:root{--ink:#15342d;--cream:#fff8df;--leaf:#56bd61;--dark:#10251f;--yellow:#ffd662;--cell:min(7.15vh,52px);font-family:"Trebuchet MS","Yu Gothic",system-ui,sans-serif;color:var(--ink);background:#91d7c3}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 20%,#d8f2b0 0 3%,transparent 3.2%),radial-gradient(circle at 82% 72%,#bce99a 0 4%,transparent 4.2%),linear-gradient(150deg,#9ce0cd,#d5efad);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(45deg,transparent 0 18px,#fff 18px 19px)}
.app-shell{width:min(1120px,100%);min-height:100vh;margin:auto;padding:18px 24px 10px;display:flex;flex-direction:column;position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.eyebrow{margin:0;font-size:.72rem;letter-spacing:.28em;font-weight:900;color:#39766a}.topbar h1{font-size:clamp(1.4rem,3vw,2.35rem);line-height:1;margin:4px 0 0;color:#18463a;text-shadow:0 2px #fff9}.pad-status{font-size:.82rem;font-weight:800;background:#fff8dfcc;border:2px solid #407b6d;border-radius:999px;padding:8px 12px;box-shadow:0 4px 0 #407b6d33}.pad-status span{display:inline-block;width:9px;height:9px;border-radius:50%;background:#a5aaa1;margin-right:7px}.pad-status.connected span{background:#4bc84c;box-shadow:0 0 0 3px #bdeebd}.game-layout{display:grid;grid-template-columns:210px auto 210px;gap:22px;align-items:center;justify-content:center;flex:1}.score-card,.how-card{background:#fff8dfeb;border:3px solid #337c68;border-radius:22px;padding:18px;box-shadow:0 8px 0 #276052,0 13px 25px #1c5a4b30}.score-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed #8fb4a9}.score-row span,.next-box>span{font-size:.7rem;font-weight:900;letter-spacing:.16em;color:#518175}.score-row strong{font-size:1.45rem;font-variant-numeric:tabular-nums}.next-box{padding:14px 0}.next-panels{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:7px}.mini-panel{aspect-ratio:1;border-radius:5px;border:2px solid #163b3266;box-shadow:inset 0 -3px #0002}.legend{font-size:.78rem;line-height:1.35}.legend p{margin:8px 0}.legend kbd{display:inline-block;min-width:52px;padding:3px 6px;text-align:center;background:#1c5548;color:white;border-radius:5px;box-shadow:0 2px #0b2e26}.how-card h2{font-size:1.2rem;margin:0 0 10px}.how-card>p{font-size:.88rem;line-height:1.6;margin:8px 0}.keyboard-help{margin-top:15px;padding-top:12px;border-top:1px dashed #8fb4a9;font-size:.74rem}.keyboard-help span{font-weight:900}.keyboard-help p{margin:4px 0}.board-wrap{position:relative}.board-frame{position:relative;padding:10px;background:linear-gradient(135deg,#277c68,#164d41);border:5px solid #fff7d5;border-radius:18px;box-shadow:0 8px 0 #153d34,0 16px 35px #17493d66}.board{width:calc(var(--cell)*6);height:calc(var(--cell)*12);display:grid;grid-template-columns:repeat(6,var(--cell));grid-template-rows:repeat(12,var(--cell));position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(#d9f1cf,#bddfb2);box-shadow:inset 0 0 0 2px #113c3255}.cell{width:var(--cell);height:var(--cell);position:relative;border:1px solid #477e6a25}.panel{position:absolute;inset:3px;border-radius:24%;border:2px solid #164c4166;box-shadow:inset 0 -7px #0002,inset 0 5px #fff5,0 2px 2px #173b3033;display:grid;place-items:center;transition:transform .12s ease,opacity .18s,filter .15s}.panel:before,.panel:after{content:"";position:absolute;background:#153b32;border-radius:50%;width:10%;height:14%;top:35%}.panel:before{left:27%}.panel:after{right:27%}.panel i{width:30%;height:12%;border-bottom:2px solid #153b32;border-radius:50%;margin-top:20%}.p0{background:#ff686d}.p1{background:#ffd45c}.p2{background:#5bd17b}.p3{background:#5caaf2}.p4{background:#b783e8}.p5{background:#ff9b4a}.panel.clearing{animation:pop .35s ease forwards}.cursor{position:absolute;width:calc(var(--cell)*2);height:var(--cell);z-index:5;border:4px solid #fff;border-radius:10px;filter:drop-shadow(0 0 2px #173e35) drop-shadow(0 0 6px #ffcf3c);pointer-events:none;transition:transform .08s}.cursor:before,.cursor:after{content:"";position:absolute;top:34%;width:8px;height:28%;background:#ffcf3c;border:2px solid white}.cursor:before{left:-10px;border-radius:6px 0 0 6px}.cursor:after{right:-10px;border-radius:0 6px 6px 0}.message{position:absolute;inset:10px;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px;background:#173f36e8;color:white;border-radius:8px;opacity:0;visibility:hidden;transition:.2s}.message.open{opacity:1;visibility:visible}.message-kicker{font-size:.73rem;font-weight:900;letter-spacing:.12em;color:#bdeca9}.message h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:8px 0}.message p{max-width:330px;line-height:1.7}.message button{font:inherit;font-weight:900;font-size:1rem;color:#173f36;background:#ffe072;border:0;border-radius:999px;padding:12px 28px;box-shadow:0 5px 0 #d29032;cursor:pointer}.message button:active{transform:translateY(3px);box-shadow:0 2px 0 #d29032}.message small{margin-top:12px;color:#d7ebdf}.danger-line{position:absolute;left:-6px;right:-6px;top:calc(var(--cell)*2 + 9px);height:2px;background:#ff6767;opacity:.65;box-shadow:0 0 6px #ff4747}footer{text-align:center;margin-top:10px;font-size:.7rem;font-weight:800;color:#32695d}@keyframes pop{40%{transform:scale(1.25) rotate(8deg);filter:brightness(1.5)}100%{transform:scale(0);opacity:0}}
@media(max-width:850px){:root{--cell:min(6.25vh,48px)}.game-layout{grid-template-columns:auto 180px}.score-card{grid-column:2;grid-row:1}.board-wrap{grid-column:1;grid-row:1/3}.how-card{grid-column:2;grid-row:2}.legend{display:none}}
@media(max-width:620px){:root{--cell:min(7vw,44px)}.app-shell{padding:12px}.topbar{align-items:flex-start}.pad-status{font-size:0;padding:9px}.pad-status span{margin:0}.game-layout{grid-template-columns:auto 115px;gap:10px}.score-card,.how-card{padding:11px;border-radius:14px;border-width:2px}.score-row{display:block}.score-row strong{display:block;font-size:1.05rem}.next-box,.how-card>p,.keyboard-help{display:none}.how-card h2{font-size:.85rem}.how-card:after{content:"矢印: 移動\A Z: 交換\A X: せり上げ";white-space:pre;font-size:.7rem;line-height:1.7}.board-frame{padding:6px;border-width:3px}.message{inset:6px}.message h2{font-size:1.4rem}.message p{font-size:.78rem}.message-kicker{display:none}.danger-line{top:calc(var(--cell)*2 + 5px)}}
@media(max-height:720px) and (min-width:700px){:root{--cell:43px}.app-shell{padding-top:8px}.topbar{margin-bottom:6px}.topbar h1{font-size:1.5rem}.score-card,.how-card{padding:13px}.legend{display:none}}