@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#fff5d9;font-synthesis:none;--cream:#fff1cf;--ink:#24574e;--muted:#c2d3bd;--line:#d3e4c329;background:#397b70;font-family:DM Sans,system-ui,-apple-system,sans-serif;font-weight:400}*{box-sizing:border-box}body{background:radial-gradient(at 70% 20%,#57928355,#0000 65%),#397b70;min-width:0;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{cursor:default;opacity:.4}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #ffde93}button{border:0}h1,h2,p{margin-top:0}h1,h2{letter-spacing:-.04em;word-break:keep-all;font-family:Manrope,system-ui,sans-serif}.app{max-width:1180px;min-height:100dvh;margin:auto;padding:0 44px}.header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:116px;display:flex}.wordmark{letter-spacing:-1.6px;background:0 0;padding:0;font-family:Manrope,sans-serif;font-size:30px;font-weight:800}.wordmark span{opacity:.82;font-weight:500}.wordmark i{vertical-align:top;color:#ecd394;padding-left:7px;font-size:18px;font-style:normal}.header-actions{align-items:center;gap:12px;display:flex}.brand{flex-direction:column;align-items:flex-start;gap:5px;display:flex}.feedback-button{background:var(--cream);color:var(--ink);border:1px solid #f3e7bf70;border-radius:22px;min-height:38px;padding:8px 13px;font-size:12px;font-weight:700}.online-count{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:5px;font-size:10px;display:flex}.online-count>span{background:#bcc7bd;border-radius:50%;flex:none;width:5px;height:5px}.online-count.online>span{background:#cce6a4;box-shadow:0 0 7px #cce6a455}.feedback-modal textarea{resize:vertical;width:100%;min-height:150px;color:var(--cream);background:#285e55;border:1px solid #bcd0b955;border-radius:12px;padding:14px;font-size:16px;line-height:1.6;display:block}.feedback-modal textarea::placeholder{color:#c2d3bd99}.feedback-modal label{line-height:1.7}.feedback-length{text-align:end;color:var(--muted);margin:8px 0 22px;font-size:11px}.feedback-modal .primary{width:100%}.feedback-modal .feedback-error{color:#ffceaf}.feedback-success{text-align:center}.feedback-success>span{border:1px solid #d5e3bc88;border-radius:50%;place-items:center;width:54px;height:54px;margin:10px auto 20px;font-size:28px;display:grid}.icon-button{background:0 0;border:1px solid #f3e7bf45;border-radius:50%;width:38px;height:38px;font-size:20px}.hero{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:48px;min-height:calc(100dvh - 116px);padding:60px 0 68px;display:grid}.eyebrow{letter-spacing:.22em;opacity:.7;margin-bottom:22px;font-size:10px;font-weight:700}.hero h1{max-width:450px;margin:0 0 22px;font-size:clamp(38px,4.7vw,62px);line-height:1.16}.hero-copy>p{color:var(--muted);font-size:16px;line-height:1.7}.mode-label{color:var(--muted);margin-bottom:12px;font-size:12px}.home-modes{flex-direction:column;gap:12px;max-width:340px;margin-top:28px;display:flex}.ai-mode{border-top:1px solid var(--line);margin-top:8px;padding-top:20px}.difficulty{background:#245a4f66;border-radius:12px;gap:4px;max-width:340px;margin-bottom:12px;padding:4px;display:flex}.difficulty button{color:#d4e2cb;background:0 0;border-radius:9px;flex:1;padding:9px 8px;font-size:12px}.difficulty button.active{color:var(--cream);background:#e4ecd51c}.primary,.secondary{border-radius:13px;justify-content:center;align-items:center;gap:12px;width:100%;min-height:50px;padding:17px 22px;font-weight:700;display:flex}.primary{background:var(--cream);color:var(--ink);box-shadow:0 4px #143d3030}.primary span{margin-inline-start:auto;font-size:20px}.secondary{color:var(--cream);background:0 0;border:1px solid #f6ecc848}.play-ai{max-width:340px}.text-button{opacity:.75;background:0 0;padding:12px 0;font-size:12px}.resume{margin:2px 0 12px}.hero-board{padding:8px 0 40px;position:relative}.hero-board-visual{position:relative}.board-shell{aspect-ratio:1;filter:drop-shadow(0 18px 15px #183e3445);width:100%;position:relative}.pixi-board{width:100%;height:100%}.pixi-board canvas{display:block;position:relative;top:-2.5%;width:100%!important;height:102.5%!important}.board-input{direction:ltr;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;position:absolute;inset:5%}.board-input button{background:0 0;border-radius:2px;min-width:0;padding:0}.board-input button:focus-visible{outline-offset:-3px;z-index:2;outline:3px solid #fff}.floating-card{filter:drop-shadow(0 7px 10px #153e3266);pointer-events:none;width:94px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(12deg)}.floating-card img{width:100%;display:block}.hero-card-incoming{animation:.46s cubic-bezier(.16,1,.3,1) both hero-card-in;position:relative}.floating-card .hero-card-outgoing{animation:.38s cubic-bezier(.4,0,1,1) both hero-card-out;position:absolute;inset:0}@keyframes hero-card-in{0%{opacity:0;transform:translate(24%,16%)rotate(20deg)scale(.9)}to{opacity:1;transform:translate(0)rotate(0)scale(1)}}@keyframes hero-card-out{0%{opacity:1;transform:translate(0)rotate(0)scale(1)}to{opacity:0;transform:translate(-45%,-14%)rotate(-24deg)scale(.92)}}.floating-card.gentle-effects .hero-card-incoming{animation:none}.floating-card.gentle-effects .hero-card-outgoing{display:none}@media (prefers-reduced-motion:reduce){.hero-card-incoming{animation:none}.floating-card .hero-card-outgoing{display:none}}.board-caption{letter-spacing:.14em;color:#cfdec3aa;justify-content:space-between;padding:18px 7%;font-size:8px;display:flex}.board-caption span:last-child{text-align:end;max-width:90px}.game-layout{grid-template-columns:minmax(0,580px) minmax(0,270px);place-content:center;align-items:center;gap:65px;min-height:100dvh;padding:24px 0;display:grid}.game-main{min-width:0}.active-player{border-radius:18px;align-items:center;gap:12px;min-height:76px;padding:14px 16px;transition:background .25s;display:flex}.active-player.mine{background:var(--cream);color:var(--ink)}.active-player.theirs{color:var(--cream);background:#254b47}.active-player-copy{min-width:0}.active-player strong{overflow-wrap:anywhere;font-size:23px;font-weight:800;line-height:1.25;display:block}.active-player small{opacity:.75;margin-top:4px;font-size:11px;display:block}.active-player .timeout-streak{opacity:1;font-weight:700}.active-player time{font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;margin-inline-start:auto;font-size:28px;font-weight:700}.active-player time.low{color:#a64229}.active-player.theirs time.low{color:#ffbf99}.active-player .avatar{background:#397b7022;flex-shrink:0}.active-player.theirs .avatar{background:#fff1cf18}.avatar{background:#bdd1b729;border-radius:12px;width:40px;height:40px;overflow:hidden}.piece-icon{width:100%;height:100%;display:block;overflow:hidden}.graveyard .piece-icon{width:48px;height:48px}.graveyard button{overflow:hidden}.turn-line{color:#d9e7cb;align-items:center;gap:8px;min-height:28px;margin:10px 5% 0;font-size:11px;display:flex}.turn-dot{background:#b6cfb3;border-radius:50%;width:5px;height:5px}.turn-dot.mine{background:#ffe6a5;box-shadow:0 0 8px #ffe6a570}.turn-number{font-variant-numeric:tabular-nums;opacity:.5;margin-inline-start:auto}.board-stage{position:relative}.check-notice{color:#fff3d8;background:#843d35;border:1px solid #eea180;border-radius:12px;align-items:center;gap:12px;margin:8px 5% 4px;padding:10px 12px;font-size:12px;line-height:1.4;display:flex}.check-notice strong{flex-shrink:0;font-size:16px}.board-stage.time-low:after{content:"";pointer-events:none;border:3px solid #f4bd5a;border-radius:8px;position:absolute;inset:4%;box-shadow:0 0 22px #f4bd5a55,inset 0 0 16px #f4bd5a22}.board-stage.time-critical:after{border-color:#ff9777;animation:1s ease-in-out infinite clock-glow}.turn-clock{direction:ltr;background:#123f384d;border-radius:8px;height:5px;margin:8px 5% 0}.turn-clock-fill{width:var(--remaining);border-radius:inherit;background:#a4c5a2;height:100%;transition:width .1s linear;position:relative}.turn-clock.warning .turn-clock-fill{background:#f6bf5f;box-shadow:0 0 10px #ffba4866}.turn-clock.warning .turn-clock-fill span{background:#fff1b0;border-radius:50%;width:9px;height:9px;position:absolute;top:-2px;right:-4px;box-shadow:0 0 10px 3px #f2a44299}.turn-clock.critical .turn-clock-fill{background:#ff9777}.time-warning-label{text-align:center;color:#ffe2a5;height:19px;padding-top:4px;font-size:10px}.active-player time.critical{color:#fff6df;background:#9d443b;animation:1s ease-in-out infinite clock-glow}.turn-announcement{z-index:4;text-align:center;color:#fff0c4;pointer-events:none;background:linear-gradient(110deg,#214f48f5,#347b69f5,#214f48f5);border-block:2px solid #f1d28b;width:76%;padding:17px 20px;animation:.85s both turn-callout;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 34px #12342c66}.turn-announcement.theirs{background:linear-gradient(110deg,#343945f5,#565061f5,#343945f5);border-color:#ddb8a5}.turn-announcement span{opacity:.8;margin-bottom:5px;font-size:11px;display:block}.turn-announcement strong{font-size:clamp(24px,5vw,36px);line-height:1.2}.preview-hint{color:#d1dfc5;font-size:11px;line-height:1.6}@keyframes turn-callout{0%{opacity:1;transform:translate(-50%,-50%)scale(.9)}18%,75%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.04)}}@keyframes clock-glow{0%,to{box-shadow:0 0 5px #f6a06b33}50%{box-shadow:0 0 16px #ff967866,inset 0 0 8px #ff967822}}.gentle-effects .turn-announcement,.gentle-effects .time-critical:after,.gentle-effects time.critical{animation:none}.current-card{filter:drop-shadow(0 5px 6px #153e3240);width:108px;height:151px;margin-bottom:24px;animation:.35s ease-out deal;position:relative;transform:rotate(-5deg)}.current-card img{width:100%;height:100%}.game-controls h2{margin-bottom:10px;font-size:24px}.card-hint{opacity:.7;min-height:60px;font-size:13px;line-height:1.7}.tutorial{opacity:.5;margin:18px 0 2px;font-size:11px;line-height:1.7}.resign{border-bottom:1px solid #dfd8bb55;padding-bottom:5px}.graveyard{flex-wrap:wrap;gap:4px;display:flex}.graveyard button{background:#ffffff15;border-radius:8px;padding:4px}.graveyard button.chosen{outline:2px solid var(--cream)}.revival>p{margin:8px 0;font-size:12px}.modal-backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);z-index:20;background:#112d296b;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#316a60;border:1px solid #ffffff24;border-radius:26px;width:min(100%,430px);max-height:90dvh;padding:35px;position:relative;overflow:auto;box-shadow:0 28px 90px #152d3355}.modal h2{margin:0 0 24px;margin-inline-end:30px;font-size:25px}.modal h1{font-size:38px}.modal p{color:#d2e0ca;font-size:13px;line-height:1.8}.modal p b{opacity:.6;margin-inline-end:10px;font-size:10px}.modal-close{top:22px;position:absolute;inset-inline-end:22px}.modal label{color:#d7e3cf;gap:10px;margin:20px 0;font-size:12px;display:grid}.modal input:not([type=checkbox]),.modal select{color:#fff1d2;background:#285e55;border:1px solid #bcd0b955;border-radius:10px;width:100%;padding:13px}.modal .switch{justify-content:space-between;align-items:center;display:flex}.switch input{accent-color:#e9d59e;width:20px;height:20px}.rules-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 8px;margin-bottom:24px;display:grid}.rules-cards figure{text-align:center;margin:0}.rules-cards img{width:min(100%,60px);height:auto;margin:0 auto 6px;display:block}.rules-cards figcaption{overflow-wrap:anywhere;font-size:11px;line-height:1.4}.result{text-align:center}.result .primary{margin:24px 0 12px}.result-piece{width:80px;height:90px;margin:auto auto 20px}.result-piece .piece-icon{width:100%;height:100%}.result .eyebrow{margin-bottom:10px}.surface{text-align:center;background:#285e5544;border-radius:22px;max-width:420px;margin:70px auto;padding:35px}.lobby h1{font-size:30px}.lobby p{opacity:.7;font-size:13px;line-height:1.7}.invite-code{letter-spacing:.13em;direction:ltr;margin:25px 0;font-size:25px;font-weight:700}.members{margin:25px 0}.members>div{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:16px 0;font-size:12px;display:flex}.members>div>span:last-child{margin-inline-start:auto}.presence{background:#d4c2a977;border-radius:50%;width:7px;height:7px}.presence.connected{background:#c8de98}.divider{background:var(--line);height:1px;margin:24px 0}.toast{bottom:max(24px, env(safe-area-inset-bottom));color:#fff3d4;z-index:50;background:#183f38;border-radius:14px;width:max-content;max-width:90vw;padding:14px 22px;font-size:13px;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 5px 30px #0003}.spinner{border:2px solid #c6d8ba44;border-top-color:#ffeac2;border-radius:50%;width:30px;height:30px;margin:10px auto 28px;animation:1s linear infinite spin}@keyframes deal{0%{opacity:0;transform:translateY(-20px)rotate(-18deg)}to{opacity:1;transform:rotate(-5deg)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=760px){.app{padding:0 20px}.header{height:80px}.header-actions{gap:7px}.wordmark{font-size:25px}.hero{grid-template-columns:1fr;gap:4px;min-height:0;padding:36px 0 30px}.hero-copy{order:2}.hero-board{order:1;justify-self:center;width:75%;max-width:350px;padding-bottom:14px}.hero-board .board-caption{display:none}.floating-card{width:64px}.hero h1{max-width:none;margin:22px 0 12px;font-size:34px}.hero-copy>.eyebrow{display:none}.hero-copy>p{font-size:14px}.difficulty,.play-ai,.home-modes{max-width:none}.game-layout{flex-direction:column;gap:18px;padding:24px 0;display:flex}.game-main{flex-shrink:0;width:100%;max-width:530px}.game-controls{flex-shrink:0;width:100%;max-width:470px;min-height:135px;padding-inline-start:101px;position:relative}.game-controls>.eyebrow{display:none}.current-card{inset-inline-start:3px;width:78px;height:109px;margin:0;position:absolute;top:1px}.game-controls h2{margin-bottom:6px;font-size:19px}.card-hint{min-height:0;margin-bottom:12px;font-size:12px;line-height:1.6}.game-controls>.primary{min-height:44px;padding:12px 15px;font-size:13px}.tutorial{display:none}.active-player{gap:10px;min-height:70px;padding:11px 13px}.active-player strong{font-size:20px}.active-player time{font-size:25px}.turn-line{margin-top:5px}.modal{border-radius:20px;padding:28px 24px}.surface{margin:35px auto;padding:24px}.graveyard .piece-icon{width:44px;height:44px}.graveyard button{padding:2px}.avatar{width:40px;height:40px}}@media (width<=360px){.app{padding-inline:12px}.hero h1{font-size:30px}.header{height:68px}.wordmark{font-size:22px}.header-actions{gap:5px}.header-actions .icon-button{width:32px;height:32px}.feedback-button{min-height:32px;padding:7px 10px;font-size:11px}.game-layout{gap:12px;padding-top:12px}.game-controls{padding-inline-start:87px}.current-card{width:66px;height:92px}.card-hint{font-size:11px}.game-controls h2{font-size:17px}.modal-backdrop{padding:12px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important}}.dev-lab{flex-wrap:wrap;gap:8px;padding:8px 0;display:flex}.dev-lab button{color:#fff4d6;background:#1e4e46;border-radius:8px;padding:6px 9px;font-size:11px}.sound-test{width:100%;color:inherit;background:#ffffff12;border:1px solid #b9d0b880;border-radius:12px;padding:12px}.modal .sound-test-result{margin:10px 0 20px;font-size:12px;line-height:1.6}.board-input,.tour-practice{direction:ltr}.onboarding{color:var(--cream);background:#316a60;border:1px solid #ffffff30;border-radius:28px;width:min(480px,100vw - 32px);max-height:calc(100dvh - 32px);padding:28px;overflow-y:auto;box-shadow:0 24px 90px #102e2966}.onboarding::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#112d298f}.tour-top{justify-content:space-between;align-items:center;gap:12px;font-size:12px;display:flex}.tour-top>span{opacity:.75}.tour-top .text-button{white-space:nowrap;padding:8px 0;font-size:12px}.onboarding .language-select{justify-content:space-between;align-items:center;gap:12px;margin:10px 0 22px;font-size:12px;display:flex}.onboarding select{max-width:65%;color:var(--cream);background:#285e55;border:1px solid #ffffff30;border-radius:8px;padding:7px 12px}.tour-progress{gap:5px;margin-bottom:24px;display:flex}.tour-progress span{background:#ffffff20;border-radius:4px;flex:1;height:4px}.tour-progress .complete{background:#f3d697}.onboarding h2{overflow-wrap:anywhere;outline:none;margin-bottom:20px;font-size:27px;line-height:1.25}.tour-content{min-height:240px;animation:.2s tour-appear}.onboarding p{overflow-wrap:anywhere;margin:16px 0;font-size:14px;line-height:1.7}.onboarding .tour-note{color:#d4e1cb;font-size:12px}.tour-capture{direction:ltr;background:#254f4633;border-radius:18px;justify-content:center;align-items:center;gap:18px;padding:10px;display:flex}.tour-capture .piece-icon{width:94px;height:125px}.tour-capture>span{color:#ffe1a5;font-size:26px}.tour-cards{justify-content:center;align-items:flex-start;gap:24px;display:flex}.tour-cards figure{text-align:center;flex:0 100px;min-width:0;margin:0}.tour-cards img{filter:drop-shadow(0 4px 4px #173f3433);width:76px;max-width:100%;height:auto}.tour-cards figcaption{overflow-wrap:anywhere;margin-top:8px;font-size:12px;line-height:1.4}.tour-cards.compact{gap:14px}.tour-cards.compact img{width:46px}.tour-practice{border:5px solid #deca95;border-radius:5px;grid-template-columns:repeat(4,1fr);width:192px;margin:auto;display:grid;overflow:hidden}.tour-practice button{opacity:1;background:#ffedc1;place-items:center;height:44px;padding:0;display:grid;position:relative}.tour-practice .dark{background:#cbb578}.tour-practice .piece-icon{width:37px;height:42px}.tour-practice .suggested{box-shadow:inset 0 0 0 3px #4d9b70}.tour-practice .legal>span{background:#34765b88;border-radius:50%;width:12px;height:12px}.tour-revive{justify-content:center;align-items:center;gap:20px;display:flex}.tour-revive .tour-cards{gap:10px}.tour-revive .tour-cards img{width:58px}.tour-ghost{background:#ffedc11a;border-radius:14px;width:90px;height:110px;position:relative}.tour-ghost .piece-icon{opacity:.4}.tour-ghost>span{bottom:-8px;color:#24574e;background:#fff1cf;border-radius:50%;place-items:center;width:30px;height:30px;display:grid;position:absolute;inset-inline-end:-8px}.tour-timer{text-align:center;background:#254f4633;border-radius:18px;padding:24px}.tour-timer>span{color:#ffe2a5;direction:ltr;font-size:64px;font-weight:700;display:block}.tour-timer>div{background:#ffffff20;border-radius:5px;height:5px;margin:12px 16px 0}.tour-timer i{border-radius:inherit;background:#f3d697;width:85%;height:100%;display:block}.tour-nav{gap:12px;margin-top:24px;display:flex}.tour-nav .secondary{width:auto;min-width:82px}.onboarding.gentle-effects .tour-content{animation:none}@keyframes tour-appear{0%{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}@media (width<=360px){.onboarding{border-radius:22px;padding:20px}.onboarding h2{font-size:23px}.onboarding p{font-size:13px}.tour-content{min-height:200px}.tour-capture .piece-icon{width:75px;height:105px}.active-player strong{font-size:18px}.active-player time{font-size:23px}.turn-line{margin-inline:2%;font-size:10px}}@media (prefers-reduced-motion:reduce){.tour-content{animation:none}}