:root{--ink:#29314f;--muted:#65708b;--cream:#fff8df;--purple:#7857e8;--red:#ff5364;--blue:#3f91f7;--yellow:#ffd43b}
*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;overscroll-behavior:none;background:#e9f6ff;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}body{min-height:100svh;overflow:hidden}button{font:inherit}[hidden]{display:none!important}.page-wrapper{width:100%;max-width:430px;height:100svh;overflow:hidden;background:var(--cream)}.footer{display:none}.header{color:#2d5a1b;background:rgba(255,253,239,.92);border-bottom:1px solid rgba(45,90,27,.08)}
.game-shell{position:relative;height:100svh;padding:72px 12px calc(12px + env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(circle at 8% 19%,rgba(255,212,59,.26) 0 48px,transparent 49px),radial-gradient(circle at 96% 72%,rgba(255,111,165,.18) 0 72px,transparent 73px),linear-gradient(155deg,#fff9df 0%,#f2fbff 54%,#f7eeff 100%)}.pop-shape{position:absolute;border-radius:50%;pointer-events:none;opacity:.7}.shape-a{top:92px;right:-18px;width:52px;height:52px;background:#c5f2da}.shape-b{bottom:80px;left:-20px;width:55px;height:55px;border:12px solid #c8bafa}.shape-c{top:42%;right:7px;width:15px;height:15px;background:#ffd43b;box-shadow:-10px 17px 0 #ff9fc0}.game-screen{position:relative;z-index:1;height:100%}.game-heading{margin:0 0 9px 5px}.game-heading span{color:#66738e;font-size:9px;font-weight:900;letter-spacing:.2em}.game-heading h1{margin:1px 0 0;color:#315a43;font-size:20px;font-weight:900;letter-spacing:.06em}
.instruction{--accent:#ff4f91;--accent-dark:#c42668;position:relative;isolation:isolate;height:158px;overflow:hidden;border:4px solid var(--accent);border-radius:29px;background:linear-gradient(135deg,#ffe0ef 0%,#fff8fc 48%,#eee9ff 100%);box-shadow:0 5px 0 var(--accent-dark),0 10px 0 #fff,0 18px 30px rgba(64,53,112,.2);transition:border-color .2s,background .2s,box-shadow .2s}.instruction::before{content:"";position:absolute;inset:5px;z-index:-1;border:2px dashed rgba(255,255,255,.9);border-radius:21px;pointer-events:none}.instruction.player-2{--accent:#6657ed;--accent-dark:#3d30a8;background:linear-gradient(135deg,#e5e2ff 0%,#f9f8ff 49%,#dff4ff 100%)}.player-label{position:absolute;top:9px;left:10px;z-index:7;padding:5px 11px 4px;border:2px solid #fff;border-radius:999px;background:linear-gradient(135deg,#ff78ac,#e7357d);color:#fff;font-size:12px;line-height:1;font-weight:1000;letter-spacing:.06em;text-shadow:0 1px 1px rgba(91,16,52,.28);box-shadow:0 3px 0 #b82961,0 4px 9px rgba(119,31,75,.2)}.player-label.player-2{right:10px;left:auto;background:linear-gradient(135deg,#8878ff,#5045d2);box-shadow:0 3px 0 #342b9e,0 4px 9px rgba(47,39,145,.22)}
.character{position:absolute;z-index:1;bottom:-7px;width:145px;height:133px;pointer-events:none;transition:opacity .2s ease,filter .2s ease}.character img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 7px 7px rgba(53,35,89,.22))}.character-left{left:-24px}.character-left img{transform:scaleX(-1)}.character-right{right:-24px}.instruction.player-1 .character-left,.instruction.player-2 .character-right{z-index:2;width:164px;height:148px;opacity:1;animation:character-pop .22s cubic-bezier(.22,1.5,.5,1)}.instruction.player-1 .character-right,.instruction.player-2 .character-left{opacity:.3;filter:saturate(.72)}@keyframes character-pop{0%{opacity:.35;transform:scale(.96)}70%{opacity:1;transform:scale(1.03)}100%{transform:scale(1)}}
.command-line{position:absolute;z-index:5;top:36px;bottom:12px;left:50%;width:min(53%,202px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:3px;padding:8px 7px;border:3px solid #fff;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 5px 0 color-mix(in srgb,var(--accent),#fff 62%),0 8px 16px rgba(48,42,91,.16)}.finger-icon{flex:0 0 auto;width:clamp(52px,15vw,64px);height:clamp(67px,19vw,80px);object-fit:contain;filter:drop-shadow(0 3px 3px rgba(130,24,89,.16))}.command-copy{min-width:0;display:grid;justify-items:center;gap:8px}.command-copy>strong{color:#342747;font-size:clamp(20px,5.9vw,27px);line-height:1;font-weight:1000;letter-spacing:-.04em;white-space:nowrap;text-shadow:0 2px 0 #fff}.target-color{display:flex;align-items:center;gap:5px}.arrow{color:var(--accent);font-size:19px;line-height:1;font-weight:1000}.color-chip{display:inline-flex;align-items:center;gap:4px;color:#25304d;font-size:clamp(17px,5vw,22px);line-height:1}.color-chip i{width:clamp(24px,7vw,31px);aspect-ratio:1;border:3px solid #fff;border-radius:50%;background:var(--spot);box-shadow:0 3px 0 color-mix(in srgb,var(--spot),#000 25%),0 0 0 2px rgba(41,49,79,.1)}.color-chip b{font-weight:1000}.red{--spot:var(--red)}.blue{--spot:var(--blue)}.yellow{--spot:var(--yellow)}.card-spark{position:absolute;z-index:4;color:var(--accent);font-style:normal;font-weight:1000;text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff;pointer-events:none}.spark-a{top:12px;left:32%;font-size:14px;transform:rotate(-12deg)}.spark-b{right:31%;bottom:8px;font-size:13px;transform:rotate(12deg)}.spark-c{top:11px;right:32%;color:#ffd43b;font-size:17px}.action-hint{display:none}
.board{width:min(100%,calc(100svh - 327px - env(safe-area-inset-bottom)));max-width:398px;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,3vw,15px);margin:20px auto 0;padding:clamp(12px,3.8vw,18px);border:3px solid #fff;border-radius:28px;background:#dfe7fb;box-shadow:0 9px 0 #c2cce8,0 18px 34px rgba(73,83,125,.14);touch-action:none}.spot{position:relative;width:100%;aspect-ratio:1;padding:0;border:4px solid rgba(255,255,255,.94);border-radius:50%;background:var(--spot);box-shadow:0 6px 0 color-mix(in srgb,var(--spot),#000 24%),0 8px 13px rgba(54,63,99,.15);touch-action:none}.spot.occupied::after{content:attr(data-owner);position:absolute;inset:19%;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;color:#fff;background:rgba(42,49,77,.48);font-size:clamp(11px,3.5vw,15px);font-weight:1000;text-shadow:0 1px 3px rgba(0,0,0,.55)}.spot.target-pulse{animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{transform:translateY(2px) scale(.92);filter:brightness(1.08);box-shadow:0 3px 0 color-mix(in srgb,var(--spot),#000 24%)}}
.modal-layer{position:fixed;z-index:300;inset:0;display:grid;place-items:center;padding:22px;background:rgba(48,56,86,.35);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.modal-card{width:min(100%,330px);padding:30px 24px 27px;border:3px solid #fff;border-radius:30px;background:#fffdf3;text-align:center;box-shadow:0 11px 0 #c8ceeb,0 28px 60px rgba(39,47,79,.25);animation:card-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes card-pop{from{opacity:0;transform:scale(.86) translateY(18px)}}.title-mark{display:grid;grid-template-columns:repeat(3,27px);justify-content:center;gap:8px;margin:0 auto 21px}.title-mark i{width:27px;aspect-ratio:1;border:3px solid #fff;border-radius:50%;background:var(--spot);box-shadow:0 4px 0 color-mix(in srgb,var(--spot),#000 22%)}.eyebrow{margin:0 0 6px;color:#6857a8;font-size:10px;font-weight:1000;letter-spacing:.2em}.start-card h2{margin:0;color:#315a43;font-size:39px;line-height:1;letter-spacing:-.04em}.start-note{margin:18px 0 24px;color:#4f5b76;font-size:14px;font-weight:800;line-height:1.7}.main-button{width:100%;min-height:59px;border:0;border-radius:999px;background:linear-gradient(135deg,#75d99d,#42bb78);color:#fff;font-size:18px;font-weight:1000;letter-spacing:.08em;box-shadow:0 7px 0 #258553;cursor:pointer}.main-button:active{transform:translateY(4px);box-shadow:0 3px 0 #258553}.result-card h2{margin:6px 0 17px;color:#34415f;font-size:clamp(43px,13vw,62px);line-height:.95}.result-card h2 em{color:var(--red);font-style:normal}.result-reason{min-height:42px;margin:0 0 22px;color:#4e5a76;font-size:14px;font-weight:800;line-height:1.6}
@media(max-width:370px){.game-shell{padding-inline:9px}.instruction{height:150px;border-radius:25px}.character{width:133px;height:123px}.instruction.player-1 .character-left,.instruction.player-2 .character-right{width:151px;height:139px}.character-left{left:-26px}.character-right{right:-26px}.command-line{top:35px;bottom:11px;width:54%;padding-inline:4px}.finger-icon{width:48px;height:63px}.command-copy>strong{font-size:19px}.board{width:min(100%,calc(100svh - 316px - env(safe-area-inset-bottom)));margin-top:18px}}@media(max-height:680px){.game-shell{padding-top:62px}.game-heading{display:none}.instruction{height:142px}.command-line{top:33px;bottom:9px}.character{height:119px}.instruction.player-1 .character-left,.instruction.player-2 .character-right{height:132px}.board{width:min(100%,calc(100svh - 164px));margin-top:14px}}@media(prefers-reduced-motion:reduce){.spot.target-pulse,.modal-card,.instruction .character{animation:none}}

.action-hint:not(:empty){display:block;position:absolute;z-index:9;left:8px;right:8px;bottom:3px;margin:0;padding:5px 7px;border-radius:9px;background:#fff5cd;color:#684b1b;text-align:center;font-size:10px;font-weight:800;line-height:1.4}