:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;--paper:#fffdf7;--canvas:#fffaf0;--sand:#f5efe3;--sand-deep:#eadac3;--ink:#342a26;--muted:#766960;--line:#d7c6ae;--brand:#c94f3d;--brand-dark:#87362e;--gold:#d79039;--green:#28734c;--shadow:0 18px 46px #54392429;--soft-shadow:0 8px 24px #54392421;font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--sand);min-width:320px;min-height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;overflow:hidden}button,input{font:inherit}button{color:inherit;-webkit-user-select:none;user-select:none}button:focus-visible,[role=button]:focus-visible,input:focus-visible{outline-offset:4px;outline:5px solid #1674c8}#app{min-height:100dvh}.app-shell{background:radial-gradient(circle at 8% 8%,#ffffffc7 0 9%,#0000 24%),linear-gradient(145deg,#f8f2e7,#efe3d2);width:100vw;height:100dvh;display:grid}.app-header{min-width:0;padding:max(12px, env(safe-area-inset-top)) 28px 12px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:5;background:#fffdf7e0;border-bottom:2px solid #7e5b3a1f;align-items:center;gap:24px;display:grid}.brand-lockup,.header-meta,.player-meta{align-items:center;gap:12px;display:flex}.brand-mark{background:var(--brand);color:#fff;border-radius:17px;place-items:center;width:48px;height:48px;font-size:28px;display:grid;box-shadow:inset 0 -5px #551c182e}.brand-name{letter-spacing:.08em;white-space:nowrap;font-size:24px}.phase-title{text-align:center;letter-spacing:.06em;margin:0;font-size:clamp(28px,2.2vw,46px)}.status-pill,.participant-count{white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;min-height:42px;padding:8px 16px;font-weight:850;display:inline-flex}.status-pill{color:#625850;background:#ede5d8}.status-pill:before{content:"";background:#ad9f92;border-radius:50%;width:11px;height:11px;margin-right:8px}.status-pill.is-connected{color:#236341;background:#ddf1e5}.status-pill.is-connected:before{background:#36a568;box-shadow:0 0 0 4px #36a56824}.status-pill.is-reconnecting:before,.status-pill.is-connecting:before{background:var(--gold);animation:1.2s ease-in-out infinite status-pulse}.status-pill.is-room-full,.status-pill.is-host-conflict{color:#842f2a;background:#f8dfda}.participant-count{color:#6a481c;background:#f4e3bd}.host-shell{grid-template-rows:84px minmax(0,1fr) 116px}.host-header{grid-template-columns:1fr minmax(260px,1.4fr) 1fr}.host-header .header-meta{justify-content:flex-end}.host-stage,.player-stage{place-items:center;min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.host-stage{padding:18px 28px}.waiting-panel,.finale-panel,.player-finale{width:min(760px,88vw);box-shadow:var(--shadow);text-align:center;background:#fffdf7f0;border:3px solid #ead9bf;border-radius:38px;justify-items:center;gap:12px;padding:clamp(32px,5vw,72px);display:grid}.waiting-panel h2,.finale-panel h2,.player-finale h2{margin:0;font-size:clamp(34px,4.2vw,68px)}.waiting-panel p,.finale-panel p,.player-finale p{color:var(--muted);margin:0;font-size:clamp(20px,2vw,32px);font-weight:700}.waiting-panel small{color:#96877c;margin-top:16px;font-size:16px}.join-panel{text-align:left;grid-template-columns:minmax(240px,340px) minmax(300px,1fr);place-items:center stretch;gap:clamp(26px,4vw,54px);width:min(940px,92vw);padding:clamp(24px,3vw,44px)}.join-copy{justify-items:start;gap:14px;display:grid}.join-copy h2{text-align:left}.join-step,.join-no-input{color:#674619;background:#f4e3bd;border-radius:999px;padding:8px 15px;font-size:18px;font-weight:900;display:inline-flex}.join-no-input{color:#236341;background:#ddf1e5;margin-top:6px}.join-qr-block{justify-items:center;gap:10px;min-width:0;display:grid}.join-qr-code{aspect-ratio:1;width:min(100%,340px);box-shadow:var(--soft-shadow);background:#fff;border:4px solid #342a26;border-radius:24px;padding:10px}.join-qr-code svg{width:100%;height:100%;display:block}.join-url{color:#6f6258;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:13px;overflow:hidden}.waiting-orbit,.finale-medal{color:#fff;background:linear-gradient(145deg,#f2b44c,#c65a3d);border-radius:36px;place-items:center;width:108px;height:108px;font-size:56px;animation:2.8s ease-in-out infinite gentle-float;display:grid;box-shadow:inset 0 -9px #6731192e,0 12px 30px #a85b2833}.finale-sparkles{color:var(--gold);letter-spacing:.2em;font-size:64px}.host-controls{padding:12px 22px max(12px, env(safe-area-inset-bottom));z-index:7;background:#fffdf8;border-top:2px solid #7e5b3a24;grid-template-columns:minmax(450px,1fr) minmax(520px,1.12fr);gap:18px;display:grid;box-shadow:0 -12px 35px #4d311f1a}.phase-controls,.template-controls{gap:10px;display:grid}.phase-controls{grid-template-columns:repeat(5,minmax(78px,1fr))}.template-controls{grid-template-columns:repeat(5,minmax(82px,1fr))}.action-button,.tool-button{cursor:pointer;background:#fffaf0;border:3px solid #d7c4a9;border-radius:22px;align-content:center;place-items:center;gap:2px;min-width:0;min-height:82px;padding:8px 10px;transition:transform .12s,border-color .12s,background .12s;display:grid;box-shadow:inset 0 -6px #674a2a1a}.action-button:active,.tool-button:active,.color-button:active,.launch-button:active{transform:translateY(3px)scale(.98)}.action-button:hover{border-color:var(--gold)}.action-button.is-primary{background:#f7d88f;border-color:#c58b2d}.action-button.is-danger{color:#8d3b32}.action-button:disabled{cursor:not-allowed;opacity:.45;transform:none}.qr-open-button{background:#fff4d6;border-radius:17px;flex-direction:row;grid-template-columns:none;gap:7px;min-height:54px;padding:6px 13px;display:flex}.qr-open-button .action-icon{font-size:23px}.qr-open-button .action-label{font-size:15px}.action-icon,.tool-icon{font-size:28px;font-weight:900;line-height:1}.paint-bucket-icon{width:44px;height:44px}.action-label,.tool-label{white-space:nowrap;font-size:16px;font-weight:900}.drawing-board{aspect-ratio:8/5;background:var(--paper);width:min(100%,160dvh - 384px);max-height:100%;box-shadow:0 0 0 3px #d8c4a6, var(--shadow);border:7px solid #fff;border-radius:28px;position:relative;overflow:hidden}.drawing-board canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.drawing-live[data-tool=bucket]{cursor:var(--drawing-cursor,cell)}.drawing-live[data-tool=brush]{cursor:var(--drawing-cursor,crosshair)}.animal-avatar{color:#2d2825;display:block;overflow:visible}.animal-avatar .avatar-line{fill:none}.animal-avatar .avatar-ink,.animal-avatar .avatar-dot{fill:#2d2825}.animal-avatar .avatar-paper{fill:#fff}.art-wall{scrollbar-width:thin;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-auto-rows:minmax(0,1fr);gap:16px;width:100%;height:100%;display:grid;overflow:auto}.art-card{background:var(--paper);min-height:250px;box-shadow:var(--soft-shadow);border:3px solid #e0cfb7;border-radius:24px;grid-template-rows:minmax(0,1fr) auto;transition:opacity .2s,transform .2s;display:grid;overflow:hidden}.art-card.is-offline{opacity:.55}.art-card-canvas{place-items:center;min-height:0;padding:8px;display:grid}.art-card-canvas .artwork-svg{width:100%;height:100%;max-height:34vh}.art-card-info{background:#f7ecda;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;display:flex}.art-card-info strong{font-size:19px}.art-card-info strong:before{content:"";background:var(--participant-accent);border-radius:50%;width:12px;height:12px;margin-right:8px;display:inline-block}.art-card-info span{color:var(--muted);font-size:14px;font-weight:750}.artwork-svg{display:block;overflow:visible}.art-region{fill-rule:evenodd;stroke:#50372e;stroke-width:8px;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:filter .18s,opacity .18s}.artwork-svg.is-interactive .art-region{cursor:pointer}.artwork-svg.is-interactive .art-region:hover,.artwork-svg.is-interactive .art-region:focus{filter:brightness(1.07)drop-shadow(0 0 10px #ffbe3699)}.art-material-overlay{pointer-events:none;transition:opacity .22s;stroke:none!important}.art-ink{fill:none;stroke:#5a3b30;stroke-width:7px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;vector-effect:non-scaling-stroke}.art-label{fill:#5a3b30;text-anchor:middle;pointer-events:none;font-weight:950}.art-shadow{fill:#5c412a29;pointer-events:none}.magic-flash{animation:.52s ease-out magic-fill}.progress-wall{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-content:center;gap:18px;width:min(1180px,100%);display:grid;overflow:auto}.progress-card{background:var(--paper);min-height:116px;box-shadow:var(--soft-shadow);border:3px solid #ddcbb2;border-radius:26px;grid-template-columns:76px 1fr;align-items:center;gap:16px;padding:18px;display:grid}.progress-card.is-offline{opacity:.55}.progress-card.is-complete{background:#eff8ed;border-color:#68aa76}.progress-avatar{color:#fff;border-radius:23px;place-items:center;width:68px;height:68px;font-size:32px;display:grid}.progress-body{gap:8px;min-width:0;display:grid}.progress-body strong{font-size:22px}.progress-label{color:var(--muted);font-size:16px;font-weight:800}.progress-meter{background:#e9dfcf;border-radius:999px;height:18px;overflow:hidden}.progress-meter-fill{border-radius:inherit;background:linear-gradient(90deg,#e0903a,#52a76b);width:0;height:100%;transition:width .35s;display:block}.template-dialog{background:#fbf6ed;border:4px solid #d7bd99;border-radius:32px;width:min(1320px,100vw - 44px);max-height:calc(100dvh - 44px);padding:0;overflow:hidden;box-shadow:0 30px 100px #20140c59}.template-dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#2e201894}.template-dialog>header{background:#fff;border-bottom:2px solid #e2d1b8;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.template-dialog h2{margin:0;font-size:30px}.template-dialog header .action-button{min-width:90px;min-height:66px}.difficulty-picker{background:#fffaf0;border-bottom:2px solid #e2d1b8;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 20px;display:grid}.difficulty-button{text-align:left;cursor:pointer;background:#fff;border:3px solid #d5c2a7;border-radius:20px;grid-template-rows:auto auto;grid-template-columns:48px 1fr;align-items:center;column-gap:12px;min-height:82px;padding:10px 16px;display:grid}.difficulty-button.is-selected{background:#f8dc9b;border-color:#a65b21;box-shadow:inset 0 -6px #6d3e1817}.difficulty-number{color:#fff;background:#78503a;border-radius:15px;grid-row:1/3;place-items:center;width:44px;height:44px;font-size:23px;font-weight:950;display:grid}.difficulty-button strong{font-size:22px}.difficulty-button small{color:var(--muted);font-size:14px;font-weight:750}.template-grid{grid-template-columns:repeat(4,1fr);gap:16px;max-height:calc(100dvh - 268px);padding:20px;display:grid;overflow:auto}.template-card{cursor:pointer;min-width:0;box-shadow:var(--soft-shadow);background:#fff;border:3px solid #dbc7a9;border-radius:24px;grid-template-rows:180px auto;padding:0;display:grid;overflow:hidden}.template-card[hidden]{display:none!important}.template-card:hover,.template-card.is-current{border-color:var(--gold);transform:translateY(-2px)}.template-card.is-current{box-shadow:0 0 0 4px #d7903938, var(--soft-shadow)}.template-preview{background:#fffaf0;place-items:center;padding:6px;display:grid;overflow:hidden}.template-preview .artwork-svg{width:100%;height:100%}.template-copy{text-align:left;gap:3px;padding:12px 16px;display:grid}.template-copy strong{font-size:20px}.template-copy small{color:var(--muted);font-size:14px;font-weight:700}.difficulty-badge{color:#315e39;background:#e6efe2;border-radius:999px;width:fit-content;padding:3px 9px;font-size:13px;font-weight:900}.difficulty-badge.is-medium{color:#704b1a;background:#f4e3bd}.difficulty-badge.is-detailed{color:#663b75;background:#eadcf0}.join-dialog{background:#fbf6ed;border:4px solid #d7bd99;border-radius:32px;width:min(1000px,100vw - 44px);max-height:calc(100dvh - 44px);padding:0;overflow:hidden;box-shadow:0 30px 100px #20140c59}.join-dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#2e201894}.join-dialog>header{background:#fff;border-bottom:2px solid #e2d1b8;justify-content:space-between;align-items:center;padding:14px 22px;display:flex}.join-dialog h2{margin:0;font-size:28px}.join-dialog header .action-button{min-width:90px;min-height:62px}.join-dialog .join-panel{width:100%;box-shadow:none;border:0;border-radius:0}.player-shell{grid-template-rows:94px minmax(0,1fr) auto}.player-header{grid-template-columns:1fr auto;padding-inline:clamp(16px,4vw,34px)}.player-title h1{margin:0;font-size:clamp(28px,4.5vw,42px)}.player-title p{color:var(--muted);margin:2px 0 0;font-size:clamp(16px,2.6vw,22px);font-weight:750}.player-meta{justify-content:flex-end}.player-identity{border-left:9px solid var(--participant-accent,var(--gold));white-space:nowrap;align-items:center;gap:9px;min-height:48px;padding-left:14px;font-size:clamp(17px,2.4vw,22px);display:inline-flex}.player-identity-avatar{background:#fff;border:2px solid #4b4039;border-radius:50%;width:46px;height:46px;padding:3px}.player-stage{padding:16px clamp(12px,3vw,28px)}.player-stage .drawing-board{width:min(100%,160dvh - 480px)}.identity-welcome{z-index:80;padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));background:radial-gradient(circle at 12% 17%,#f7ca69c2 0 7%,#0000 7.5%),radial-gradient(circle at 88% 83%,#74ac7d94 0 8%,#0000 8.5%),#f5ead7;place-items:center;animation:.28s ease-out identity-page-in;display:grid;position:fixed;inset:0;overflow:auto}.identity-welcome.is-leaving{opacity:0;transition:opacity .24s,transform .24s;transform:scale(1.02)}.identity-welcome-card{text-align:center;background:#fffdf8;border:4px solid #4b4039;border-radius:clamp(28px,5vmin,44px);justify-items:center;gap:clamp(8px,1.6vmin,14px);width:min(620px,100%);padding:clamp(22px,4vmin,42px);display:grid;box-shadow:0 26px 80px #3e2a1d3d}.identity-welcome-label{color:#6e5f54;letter-spacing:.08em;margin:0;font-size:clamp(18px,3vmin,25px);font-weight:900}.identity-avatar-frame{aspect-ratio:1;background:#fff;border:5px solid #342d29;border-radius:50%;place-items:center;width:clamp(142px,25vmin,205px);padding:clamp(12px,2vmin,20px);display:grid;box-shadow:0 10px #e5d4b8,0 18px 38px #442d1c26}.identity-animal-avatar{width:100%;height:100%}.identity-welcome-card h2{letter-spacing:.06em;margin:3px 0 0;font-size:clamp(38px,7vmin,64px);line-height:1.12}.identity-welcome-hint{color:var(--muted);margin:0;font-size:clamp(17px,2.7vmin,23px);font-weight:800}.identity-start-button{color:#152f1c;cursor:pointer;background:#78b67f;border:4px solid #315f3e;border-radius:24px;width:min(430px,100%);min-height:clamp(70px,10vmin,88px);margin-top:4px;padding:12px 24px;font-size:clamp(21px,3.4vmin,29px);font-weight:950;box-shadow:inset 0 -8px #1d532b29,0 8px 20px #31653b2e}.identity-start-button:active{transform:translateY(3px)scale(.985)}.identity-auto-enter{color:#776a61;gap:7px;width:min(360px,90%);font-size:clamp(14px,2vmin,17px);font-weight:750;display:grid}.identity-auto-enter i{background:#e6dac8;border-radius:999px;height:7px;overflow:hidden}.identity-auto-enter i:before{content:"";border-radius:inherit;transform-origin:0;background:#886e52;width:100%;height:100%;animation:5.5s linear forwards identity-countdown;display:block}.player-toolbar{min-height:158px;padding:12px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));z-index:8;background:#fffdf8;border-top:2px solid #dac7ab;grid-template-columns:minmax(420px,1.25fr) minmax(350px,1fr);align-items:stretch;gap:14px;display:grid;box-shadow:0 -10px 30px #4e35221a}.player-toolbar.is-hidden{display:none}.player-toolbar:has(.color-row.is-coloring){grid-template-columns:minmax(0,1fr) minmax(100px,150px);min-height:198px}.color-row,.tool-row{gap:10px;display:grid}.color-row{grid-template-columns:repeat(5,minmax(66px,1fr))}.color-row.is-coloring{grid-template-rows:repeat(2,minmax(76px,1fr))}.tool-row{grid-template-columns:repeat(5,minmax(68px,1fr))}.tool-row.compact{grid-template-columns:minmax(86px,160px);justify-content:end}.player-toolbar:has(.color-row.is-coloring) .tool-row.compact{align-content:end}.color-button{background:var(--swatch);color:#fff;min-width:0;min-height:82px;box-shadow:inset 0 -8px 0 color-mix(in srgb, var(--swatch-dark), transparent 18%), 0 0 0 3px #cbb89e;cursor:pointer;text-shadow:0 2px 3px #0000004d;border:4px solid #fff;border-radius:24px;align-content:center;place-items:center;gap:2px;padding:6px;display:grid;position:relative}.color-button.is-selected{box-shadow:inset 0 -8px 0 color-mix(in srgb, var(--swatch-dark), transparent 18%), 0 0 0 6px #2d241f, 0 10px 20px #30221933;transform:translateY(-5px)}.color-button.is-selected:after{content:"✓";color:#2e2722;width:27px;height:27px;text-shadow:none;background:#fff;border-radius:50%;place-items:center;font-size:18px;display:grid;position:absolute;top:4px;right:7px}.color-shape{font-size:32px;line-height:1}.color-label{font-size:16px;font-weight:950}.tool-button{min-height:82px}.tool-button.is-selected{background:#f7d98c;border-color:#342a26;box-shadow:inset 0 -6px #674a2a24,0 0 0 3px #342a26}.player-art-frame{background:var(--canvas);width:min(92vw,133.3dvh - 413.23px);height:min(100%,68vh);box-shadow:0 0 0 3px #d8c4a6, var(--shadow);border:7px solid #fff;border-radius:32px;place-items:center;padding:8px;display:grid}.player-art-frame .artwork-svg{width:100%;height:100%}.artwork-nameplate{box-shadow:var(--soft-shadow);background:#fffdf7e6;border-radius:18px;padding:10px 18px;display:grid;position:absolute;bottom:24px;left:32px}.artwork-nameplate strong{font-size:21px}.artwork-nameplate span{color:var(--muted);font-size:15px;font-weight:700}.puzzle-board{width:min(100%,136.8dvh - 399.456px);height:100%;max-height:68vh;box-shadow:0 0 0 3px #d8c4a6, var(--shadow);background:radial-gradient(circle,#74533514 1.5px,#0000 1.5px) 0 0/26px 26px,#f7f0e3;border:7px solid #fff;border-radius:32px;place-items:center;display:grid;overflow:hidden}.puzzle-svg{width:100%;height:100%;overflow:visible}.puzzle-target-shape{stroke-width:7px;stroke-dasharray:14 12;vector-effect:non-scaling-stroke;fill:#eee4d3!important;stroke:#b6a38c!important}.puzzle-target.is-selected-target{filter:drop-shadow(0 0 18px #ffab22eb)}.puzzle-target.is-selected-target .puzzle-target-shape:not(.puzzle-hit){fill:#fff0bd!important;stroke:#d77822!important}.puzzle-piece{cursor:grab;filter:drop-shadow(0 11px 8px #3f2b1c38);transition:filter .16s,opacity .18s}.puzzle-piece:active{cursor:grabbing}.puzzle-piece-shape{stroke-width:8px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.puzzle-hit{pointer-events:all;fill:#0000!important;stroke:#0000!important;stroke-width:46px!important}.puzzle-piece.is-selected{filter:drop-shadow(0 0 15px #ffab22f2)drop-shadow(0 11px 8px #3f2b1c38)}.puzzle-piece.is-pending{animation:.38s ease-out snap-pop}.puzzle-piece.is-placed{pointer-events:none;filter:drop-shadow(0 5px 4px #3f2b1c1f)}.puzzle-target.is-hint{animation:1.05s ease-in-out infinite target-hint}.puzzle-board.is-complete{box-shadow:0 0 0 7px #75af72,0 20px 60px #468b5140}.puzzle-help{color:#65574c;text-align:center;background:#f5e8d3;border-radius:22px;place-items:center;padding:10px 18px;font-size:clamp(16px,2vw,22px);font-weight:850;display:grid}.player-toolbar:has(.puzzle-help){grid-template-columns:1fr minmax(140px,220px)}.feedback-toast{left:50%;bottom:max(184px, calc(env(safe-area-inset-bottom) + 174px));z-index:30;max-width:calc(100vw - 32px);box-shadow:var(--shadow);text-align:center;opacity:0;pointer-events:none;background:#fff7da;border:3px solid #e0bd77;border-radius:999px;padding:13px 22px;font-size:clamp(18px,2.4vw,25px);font-weight:900;transition:opacity .18s,transform .18s;position:fixed;transform:translate(-50%,20px)scale(.94)}.feedback-toast.is-visible{opacity:1;transform:translate(-50%)scale(1)}.launch-page{background:radial-gradient(circle at 15% 16%,#f6c768 0 6%,#0000 7%),radial-gradient(circle at 84% 78%,#8bc591 0 7%,#0000 8%),linear-gradient(145deg,#f8f0e3,#ecdcc5);place-items:center;min-height:100dvh;padding:24px;display:grid}.launch-card{width:min(760px,100%);box-shadow:var(--shadow);text-align:center;background:#fffdf7f0;border:4px solid #dcc39d;border-radius:40px;justify-items:center;gap:18px;padding:clamp(28px,6vw,62px);display:grid}.launch-mark{background:var(--brand);color:#fff;border-radius:34px;place-items:center;width:100px;height:100px;font-size:54px;display:grid;box-shadow:inset 0 -8px #531d1729}.launch-card h1{letter-spacing:.08em;margin:0;font-size:clamp(44px,8vw,72px)}.launch-card>p{max-width:600px;color:var(--muted);margin:0;font-size:20px;font-weight:700;line-height:1.7}.launch-label{text-align:left;gap:8px;width:min(500px,100%);font-size:18px;font-weight:900;display:grid}.launch-label input{width:100%;min-height:64px;color:var(--ink);background:#fff;border:3px solid #cdb696;border-radius:18px;padding:10px 18px;font-size:22px}.launch-actions{grid-template-columns:1fr;gap:16px;width:min(520px,100%);display:grid}.launch-button{text-align:left;cursor:pointer;background:#fff7e7;border:3px solid #cba878;border-radius:24px;grid-template-columns:60px 1fr;align-items:center;gap:12px;min-height:112px;padding:16px;display:grid;box-shadow:inset 0 -7px #6441231a}.launch-button:first-child{background:#f7d894}.launch-button-icon{place-items:center;font-size:42px;display:grid}.launch-button>span:last-child{gap:4px;display:grid}.launch-button strong{font-size:21px}.launch-button small{color:var(--muted);font-size:15px;font-weight:700}.launch-note{color:#88776a;font-size:14px;line-height:1.6}@keyframes status-pulse{50%{opacity:.45;transform:scale(.8)}}@keyframes gentle-float{50%{transform:translateY(-8px)rotate(2deg)}}@keyframes magic-fill{0%{filter:brightness(2)drop-shadow(0 0 28px #ffd75b)}to{filter:none}}@keyframes snap-pop{45%{transform:scale(1.08)}}@keyframes target-hint{50%{filter:drop-shadow(0 0 18px #ffae2f);opacity:.65}}@keyframes identity-page-in{0%{opacity:0;transform:scale(.97)}}@keyframes identity-countdown{to{transform:scaleX(0)}}@media (width<=920px){.host-shell{grid-template-rows:76px minmax(0,1fr) 182px}.host-header{grid-template-columns:auto 1fr auto;padding-inline:16px}.brand-name,.participant-count{display:none}.host-controls{grid-template-rows:1fr 1fr;grid-template-columns:1fr;gap:8px;padding:8px 12px}.action-button{min-height:72px}.template-grid{grid-template-columns:repeat(3,1fr)}.join-panel{grid-template-columns:minmax(210px,290px) minmax(260px,1fr)}.player-toolbar{grid-template-columns:1fr;gap:8px;min-height:188px}.player-stage .drawing-board{width:min(100%,160dvh - 560px)}.player-art-frame{width:min(96vw,133.3dvh - 479.88px)}.feedback-toast{bottom:214px}}@media (width<=620px){.app-header{padding:max(8px, env(safe-area-inset-top)) 14px 8px}.player-shell{grid-template-rows:78px minmax(0,1fr) auto}.player-header{gap:8px}.player-title h1{font-size:25px}.player-title p{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.player-identity{border-left:0;min-height:42px;padding-left:0}.player-identity-name{display:none}.player-identity-avatar{width:42px;height:42px}.status-pill{min-height:36px;padding:6px 11px;font-size:13px}.player-stage{padding:9px}.player-toolbar{min-height:176px;padding:8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}.color-row,.tool-row{gap:7px}.color-button,.tool-button{border-radius:18px;min-height:70px}.color-shape,.tool-icon{font-size:25px}.paint-bucket-icon{width:38px;height:38px}.color-label,.tool-label{font-size:13px}.player-stage .drawing-board{width:100%}.player-art-frame{border-width:4px;width:100%;height:100%}.artwork-nameplate{padding:7px 12px;bottom:14px;left:16px}.artwork-nameplate span{display:none}.puzzle-board{border-width:4px;width:100%;max-height:none}.player-toolbar:has(.puzzle-help){grid-template-columns:1fr 116px;min-height:100px}.puzzle-help{padding:8px;font-size:14px}.feedback-toast{bottom:194px}.launch-actions,.difficulty-picker{grid-template-columns:1fr}.difficulty-button{min-height:68px}.template-grid{grid-template-columns:repeat(2,1fr);max-height:calc(100dvh - 390px)}.template-card{grid-template-rows:130px auto}.join-panel{text-align:center;grid-template-columns:1fr;overflow:auto}.join-copy{justify-items:center}.join-copy h2{text-align:center}.join-qr-code{width:min(64vw,300px)}}@media (width<=460px){.player-toolbar:has(.color-row.is-coloring){grid-template-columns:minmax(0,1fr) 82px;min-height:240px}.color-row.is-coloring{grid-template-rows:repeat(3,70px);grid-template-columns:repeat(3,minmax(66px,1fr))}.player-toolbar:has(.color-row.is-coloring) .tool-row.compact{grid-template-columns:82px}}@media (height<=620px) and (orientation:landscape){.player-shell{grid-template-rows:72px minmax(0,1fr) 132px}.player-toolbar{grid-template-columns:1.2fr 1fr;min-height:132px}.color-button,.tool-button{min-height:66px}.player-stage .drawing-board,.player-art-frame,.puzzle-board{width:auto;height:100%;max-height:none}.feedback-toast{bottom:148px}.player-toolbar:has(.color-row.is-coloring){grid-template-columns:minmax(0,1fr) 110px;min-height:132px}.color-row.is-coloring{grid-template-rows:1fr;grid-template-columns:repeat(9,minmax(50px,1fr))}.player-toolbar:has(.color-row.is-coloring) .tool-row.compact{grid-template-columns:110px}.identity-welcome{padding-block:10px}.identity-welcome-card{text-align:left;grid-template-columns:auto 1fr;column-gap:24px;width:min(760px,100%);padding:18px 28px}.identity-welcome-label,.identity-avatar-frame{grid-row:span 3}.identity-welcome-label{display:none}.identity-avatar-frame{width:min(38vmin,190px)}.identity-welcome-card h2,.identity-welcome-hint,.identity-start-button,.identity-auto-enter{grid-column:2;justify-self:stretch}.identity-welcome-card h2{align-self:end}.identity-start-button{width:100%}.identity-auto-enter{text-align:center;width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}