:root{--felt:#13382a;--felt-dark:#0b2219;--felt-light:#1f5039;--panel:#0e2a1f;--panel-line:#ffffff1f;--text:#f6efe0;--muted:#b7c4b8;--accent:#f4c542;--accent-dark:#c8961a;--accent-ink:#2a1f05;--paper:#fffaf0;--ink:#2b2620;--danger:#ff8a80;--radius:14px;--font-title:"Fredoka", "Nunito", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--text);background:radial-gradient(ellipse 120% 80% at 50% 30%, var(--felt-light) 0%, var(--felt) 55%, var(--felt-dark) 100%) fixed, var(--felt);-webkit-tap-highlight-color:transparent}h1,h2,.title{font-family:var(--font-title);letter-spacing:.01em;font-weight:600}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--panel-line);background:#ffffff12;border-radius:12px;min-height:44px;padding:10px 16px;font-weight:700;transition:transform .12s,background-color .2s,box-shadow .2s}button:active:not(:disabled){transform:scale(.97)}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button.primary{background:linear-gradient(180deg, #ffd65c, var(--accent));color:var(--accent-ink);box-shadow:0 3px 0 var(--accent-dark), 0 6px 16px #0006;border:none}button.primary:active:not(:disabled){box-shadow:0 1px 0 var(--accent-dark), 0 3px 8px #0006;transform:translateY(2px)}button.link{color:var(--muted);text-underline-offset:3px;background:0 0;border:none;font-weight:600;text-decoration:underline}.icon-button{width:44px;height:44px;min-height:44px;color:var(--muted);border-radius:50%;flex:none;padding:0;font-size:1rem}.screen{max-width:460px;min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));flex-direction:column;gap:14px;margin:0 auto;animation:.35s both rise;display:flex}.screen h1{align-items:center;gap:10px;margin:0;font-size:2rem;display:flex}.screen.pass{text-align:center;justify-content:center;align-items:center}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.big{font-size:1.4rem}.last,.hint{color:var(--muted);margin:0}.logo{text-align:center;flex-direction:column;align-items:center;gap:6px;margin:12px 0 8px;display:flex}.logo h1{color:var(--paper);text-shadow:0 3px #0005;font-size:3rem;font-weight:700}.logo-pawns{gap:8px;display:flex}.logo-pawns .dot{width:22px;height:22px;animation:2.4s ease-in-out infinite hop}.logo-pawns .dot:nth-child(2){animation-delay:.15s}.logo-pawns .dot:nth-child(3){animation-delay:.3s}.logo-pawns .dot:nth-child(4){animation-delay:.45s}@keyframes hop{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.tagline{color:var(--muted);margin:0}fieldset{border:1px solid var(--panel-line);border-radius:var(--radius);background:#0000002e;flex-direction:column;gap:10px;min-width:0;margin:0;padding:12px 14px 14px;display:flex}legend{font-family:var(--font-title);padding:0 6px;font-weight:600}input[type=text]{font:inherit;border:1px solid var(--panel-line);min-height:46px;color:var(--text);background:#00000040;border-radius:12px;padding:10px 12px;font-size:1rem}input[type=text]::placeholder{color:#fff9}.segmented{background:#0003;border-radius:14px;gap:6px;padding:4px;display:flex}.segmented button{background:0 0;border:none;flex:1}.segmented button.selected{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 6px #0005}.check{align-items:center;gap:10px;min-height:44px;display:flex}.check input{width:20px;height:20px;accent-color:var(--accent)}.game{height:100dvh;padding:max(6px, env(safe-area-inset-top)) 8px 0;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:6px;max-width:640px;margin:0 auto;display:grid}.topbar{align-items:flex-start;gap:6px;display:flex}.board-area{justify-content:center;align-items:center;min-height:0;display:flex}.panel{--card-w:min(92px, (100cqw - 24px) / 4);--card-ratio:1.4;--card-max:22dvh;--card-h:min(var(--card-max), var(--card-w) * var(--card-ratio));min-width:0;padding:10px 16px max(12px, env(safe-area-inset-bottom));border-top:1px solid var(--panel-line);background:linear-gradient(#0c271ccc,#081a13f2);border-radius:22px 22px 0 0;flex-direction:column;gap:8px;margin:0 -8px;display:flex;box-shadow:0 -8px 24px #0005;container-type:inline-size}@media (width>=900px){.game{grid-template-rows:1fr auto auto 1fr;grid-template-columns:minmax(0,1fr) 380px;gap:12px 24px;max-width:1200px;padding:16px 24px}.board-area{grid-area:1/1/-1}.topbar{grid-area:2/2}.panel{border-radius:var(--radius);border:1px solid var(--panel-line);grid-area:3/2;margin:0;padding:14px}}@media (width<=899px) and (aspect-ratio<=10/19){.panel{--card-ratio:1.6;--card-max:26dvh}.card-symbol{font-size:clamp(1.6rem,9vw,2.4rem)}.card-hint{font-size:.8rem}.instruction{font-size:1.1rem}.player{padding:7px 10px;font-size:.95rem}}.board{-webkit-user-select:none;user-select:none;filter:drop-shadow(0 10px 18px #0008);width:100%;height:100%;max-height:100%;display:block}.board-bg{fill:url(#wood);stroke:#9b6a35;stroke-width:10px}.grain{fill:none;stroke:#a8743a;stroke-opacity:.08;stroke-width:3px}.board-rotation{transition:transform .6s}.square{fill:url(#hole);stroke:#b38a52;stroke-width:2px}.house{fill:url(#hole);stroke-width:3px}.house-lane{fill-opacity:.22;stroke-width:3px}.reserve{fill-opacity:.14;stroke-width:4px}.marker{fill:none;stroke:#6b4521;stroke-opacity:.75;stroke-width:3px}.pawn-shadow{fill:#3a220b;opacity:.35}.pawn-shine{fill:#fff;opacity:.5;pointer-events:none}.pawn-halo{fill:#0000}.pawn-source{cursor:pointer}.pawn-source .pawn-halo{fill:#fff8;stroke:var(--accent);stroke-width:5px;animation:1.2s ease-in-out infinite pulse}.pawn-active .pawn-halo{fill:var(--accent);animation:none}.pawn-target{cursor:pointer}.pawn-target .pawn-halo{fill:#ff5a5a55;stroke:#e02020;stroke-width:5px}.pawn-moved .pawn-halo{fill:#f4c54266;stroke:var(--accent);stroke-width:8px;transform-box:fill-box;transform-origin:50%;animation:1.1s ease-in-out infinite alternate moved-ring}@keyframes moved-ring{to{opacity:.6;transform:scale(1.35)}}.pawn-captured .pawn-halo{fill:#ff5a5a44;stroke:#e02020;stroke-width:6px;stroke-dasharray:8 6}.preview-path{fill:none;stroke-width:7px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 12;opacity:.9;pointer-events:none}.preview-captured .preview-path{stroke:#e02020;opacity:.5}.preview-ghost{fill:#fff5;stroke-width:3px;stroke-dasharray:5 4;pointer-events:none}.pieu-mark{fill:#fff;stroke-width:3px}.target{fill:#f4c54277;stroke:#b38600;stroke-width:5px;cursor:pointer}@keyframes pulse{50%{opacity:.45}}.center-label{text-anchor:middle;fill:#6b4a24;font-family:var(--font-title);font-size:28px;font-weight:600}.center-label.small{fill:#7d5c34;font-family:inherit;font-size:20px;font-weight:600}.center-card-bg{fill:var(--paper);stroke:var(--card-accent,#5a5240);stroke-width:4px;filter:drop-shadow(0 4px 4px #0004)}.center-card-text{text-anchor:middle;font-family:var(--font-title);fill:var(--card-accent,var(--ink));font-size:40px;font-weight:700}.center-card>*{transform-box:fill-box;transform-origin:50%;animation:.35s ease-out both card-pop}@keyframes card-pop{0%{opacity:0;transform:scale(.5)}}.players{flex:1;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px;min-width:0;margin:0;padding:0;list-style:none;display:grid}.player{background:#00000038;border:2px solid #0000;border-radius:10px;align-items:center;gap:6px;min-width:0;padding:4px 8px;font-size:.85rem;transition:border-color .3s,background-color .3s;display:flex}.player-turn{border-color:var(--accent);background:#f4c5421f;box-shadow:0 0 12px #f4c54255}.player-me .player-name{font-weight:800}.player-offline{opacity:.6}.player-name{flex-direction:column;flex:1;min-width:0;line-height:1.15;display:flex}.player-name-text{overflow-wrap:anywhere;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.player-name .offline{font-size:.75rem}.team,.count{border-radius:10px;flex:none;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-size:.72rem;font-weight:800;display:inline-flex}.team{color:var(--muted);background:#ffffff1a}.partner-tag{white-space:nowrap;color:var(--accent);font-size:.75rem;font-weight:700;line-height:1.1;display:block}.count{min-width:16px;height:21px;color:var(--text);background:0 0;border:1.5px solid #fffaf099;border-radius:4px}.dots{vertical-align:middle;flex:none;gap:3px;margin-right:6px;display:inline-flex}.player .dots{margin-right:0}.dot{border-radius:50%;width:14px;height:14px;display:inline-block;box-shadow:inset 0 -2px #0004,0 1px 2px #0006;background-image:radial-gradient(circle at 35% 30%,#fff9 0 18%,#0000 45%)!important}.dot.dot-empty{opacity:.8;background-color:#0000;background-image:none!important}.result-home{flex-wrap:wrap;flex:none;justify-content:flex-end;gap:3px;max-width:50%;display:inline-flex}.result-pawns{justify-content:center;gap:10px;animation:.8s cubic-bezier(.3,1.6,.5,1) both trophy;display:flex}.result-pawns .dot.big{width:44px;height:44px}.dot.big{width:28px;height:28px}.log{color:var(--muted);flex-direction:column;gap:2px;margin:0;padding:0;font-size:.8rem;list-style:none;display:flex}.log li:not(:last-child){display:none}.log li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.panel-slot{align-items:stretch;gap:8px;min-width:0;height:48px;display:flex}.panel-slot.buttons button{min-height:0}.log-button{border:1px solid var(--panel-line);min-width:0;min-height:0;box-shadow:none;text-align:left;background:#00000026;border-radius:12px;flex:1;align-self:stretch;align-items:center;gap:8px;padding:4px 10px;font-weight:400;display:flex}.log-button:active{box-shadow:none;transform:none}.log-button .log{flex:1;min-width:0}.log-button .log li:last-child{white-space:normal;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}.log-more{max-width:40%;color:var(--accent);text-align:right;flex:none;font-size:.75rem;font-weight:700;line-height:1.2}.log.log-full{gap:6px;font-size:.95rem}.log.log-full li{white-space:normal;opacity:1;display:list-item}.log.log-full .log-new{color:var(--accent);font-weight:700}@media (width>=900px){.players{grid-template-columns:1fr}.player{padding:8px 10px;font-size:1rem}.log li:not(:last-child){opacity:.7;display:list-item}.panel-slot{align-items:center;height:76px}.panel-slot.buttons button{min-height:48px}.log li{white-space:normal}}.instruction{align-items:center;min-height:2.6em;margin:0;font-size:1.02rem;font-weight:700;line-height:1.3;display:flex}.game-my-turn .instruction{color:var(--accent)}.hand{height:calc(var(--card-h) + 10px);flex:none;justify-content:center;gap:8px;padding-top:10px;display:flex}.hand-crowded{gap:5px}.hand-crowded .card{padding:6px 2px}.hand-crowded .card-seven .card-symbol{font-size:clamp(1.1rem,5.4vw,1.5rem)}.card{--card-accent:#3b3a36;flex:0 1 var(--card-w);height:var(--card-h);background:linear-gradient(180deg, transparent 0 82%, color-mix(in srgb, var(--card-accent) 14%, transparent) 100%), var(--paper);min-width:0;color:var(--ink);border:2px solid color-mix(in srgb, var(--card-accent) 55%, #d8cdb6);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 4px;transition:transform .18s,box-shadow .18s,opacity .2s,filter .2s;animation:.35s ease-out both deal;display:flex;position:relative;box-shadow:0 2px #0002,0 6px 14px #0006}.card:nth-child(2){animation-delay:50ms}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}@keyframes deal{0%{opacity:0;transform:translateY(30px)rotate(-6deg)}}.card-start{--card-accent:#17773f}.card-back{--card-accent:#c0392b}.card-swap{--card-accent:#2563c9}.card-seven{--card-accent:#8e44ad}.card-corner{color:var(--card-accent);font-size:.72rem;font-weight:800;position:absolute;top:4px;left:6px}.card-symbol{font-family:var(--font-title);color:var(--card-accent);font-size:clamp(1.4rem,7vw,2rem);font-weight:700;line-height:1}.card-hint{text-align:center;color:#5d554a;font-size:.72rem;font-weight:600;line-height:1.15}.card:not(.card-disabled):hover{transform:translateY(-4px)}.card-selected,.card-selected:not(.card-disabled):hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent), 0 10px 20px #0008;transform:translateY(-10px)}.card-disabled{opacity:.5;filter:saturate(.3)brightness(.85);cursor:not-allowed}.card-received{animation:.35s ease-out both deal,4.5s ease-out both received-glow}@keyframes received-glow{0%,65%{box-shadow:0 0 0 3px var(--accent), 0 0 18px #f4c542aa}}.card-received-badge{background:var(--accent);color:var(--accent-ink);white-space:nowrap;pointer-events:none;border-radius:999px;padding:1px 8px;font-size:.68rem;font-weight:800;animation:4.5s ease-out both received-fade;position:absolute;top:-10px;left:50%;transform:translate(-50%)}@keyframes received-fade{0%,65%{opacity:1}to{opacity:0}}.hand-waiting .card-disabled{opacity:1;filter:saturate(.8);cursor:default}.buttons{flex-wrap:wrap;gap:8px;display:flex}.buttons button{flex:1}.error{color:var(--danger);text-align:center;margin:0}.modal-backdrop{z-index:50;background:#000a;justify-content:center;align-items:flex-end;padding:16px;animation:.2s both fade;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;width:100%;max-width:400px;padding:18px;animation:.25s both rise;box-shadow:0 12px 40px #000a}.modal h2{margin:0 0 6px}.modal p{color:var(--muted);margin:0 0 16px}.modal-body{max-height:65dvh;overflow-y:auto}.topbar-buttons{flex-direction:column;gap:6px;display:flex}.help{line-height:1.4}.help p,.help li{color:var(--text)}.help h3{font-family:var(--font-title);color:var(--accent);margin:16px 0 6px;font-weight:600}.help ul{flex-direction:column;gap:6px;margin:0;padding-left:18px;display:flex}.help ul.help-cards{padding:0;list-style:none}.help-cards li{align-items:center;gap:10px;display:flex}.help-new{position:relative}.help-new:after{content:"";background:var(--accent);width:10px;height:10px;box-shadow:0 0 0 2px var(--felt-dark,#0b2a1d);border-radius:50%;position:absolute;top:2px;right:2px}.help-symbol{background:var(--paper);min-width:58px;color:var(--card-accent,#3b3a36);border:2px solid var(--card-accent,#3b3a36);font-family:var(--font-title);text-align:center;border-radius:8px;flex:none;padding:6px 4px;font-weight:700}.modal-buttons{gap:8px;display:flex}.modal-buttons button{flex:1}@media (width>=600px){.modal-backdrop{align-items:center}}@keyframes fade{0%{opacity:0}}.room-code{font-family:var(--font-title);letter-spacing:.15em;color:var(--accent);-webkit-user-select:all;user-select:all;font-size:1.6rem;font-weight:700}.share-link{text-align:center;word-break:break-all;-webkit-user-select:all;user-select:all}.lobby-players{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.lobby-players li{background:#00000038;border-radius:10px;align-items:center;gap:8px;min-width:0;padding:8px 10px;display:flex}.lobby-players li.free{color:var(--muted);border:1px dashed var(--panel-line);background:0 0;justify-content:center}.lobby-players li.away{opacity:.6}.lobby-name{flex-direction:column;flex:1;min-width:0;line-height:1.2;display:flex}.lobby-name-text{overflow-wrap:anywhere;font-weight:700}.lobby-tags{color:var(--muted);font-size:.8rem}.lobby-tags:empty{display:none}.share-link{font-size:.9rem}.lobby-players .dots{margin-right:0}.table-board{justify-content:center;display:flex}.table-board .board{width:auto;max-width:100%;height:auto;max-height:34dvh}.table-label{font-size:64px}.home-board{align-self:stretch}.home-board .board{filter:drop-shadow(0 6px 10px #0007);max-height:150px}.home{position:relative}.home-help{top:max(16px, env(safe-area-inset-top));position:absolute;right:16px}.center{text-align:center}.room-code-line{text-align:center;color:var(--muted);margin:0}.big-button{min-height:52px;font-size:1.15rem}.game-my-turn .instruction.instruction-calm{color:var(--text);font-weight:600}.missed{text-align:left;align-self:stretch}.missed .log.missed-log li{white-space:normal;margin-left:18px;list-style:outside;display:list-item}.offline{color:var(--danger);font-weight:400}.banner{z-index:40;padding:max(8px, env(safe-area-inset-top)) 16px 8px;text-align:center;background:#7a2e2aee;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 4px 12px #0006}.banner button{min-height:36px;padding:4px 12px}.home-section{flex-direction:column;gap:8px;display:flex}.row{gap:8px;display:flex}.row input{flex:1;min-width:0}input.code-input{text-transform:uppercase;letter-spacing:.2em}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.card-received,.card-received-badge{animation-duration:4.5s!important}.turn-toast{animation:1.8s linear both toast-calm!important}.turn-toast.finish-toast{transform:translate(-50%,-50%);animation:none!important}}@keyframes toast-calm{0%,to{opacity:0;transform:translate(-50%,-50%)}10%,85%{opacity:1;transform:translate(-50%,-50%)}}.board-area{position:relative}.turn-toast{z-index:5;background:var(--accent);color:var(--accent-ink);font-family:var(--font-title);white-space:nowrap;pointer-events:none;border-radius:999px;padding:12px 22px;font-size:1.4rem;font-weight:700;animation:1.6s both toast;position:absolute;top:50%;left:50%;box-shadow:0 8px 24px #0008}@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}15%,80%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.1)}}.finish-toast{white-space:normal;text-align:center;border-radius:20px;max-width:80%;font-size:1.15rem;animation:.5s ease-out 1.2s both finish-in}@keyframes finish-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.target{transform-box:fill-box;transform-origin:50%;animation:.25s ease-out both target-in,1.2s ease-in-out .25s infinite pulse}@keyframes target-in{0%{opacity:0;transform:scale(.3)}}.confetti{pointer-events:none;z-index:30;position:fixed;inset:0;overflow:hidden}.confetti span{border-radius:2px;width:9px;height:14px;animation:linear both confetti-fall;position:absolute;top:-20px}@keyframes confetti-fall{to{transform:translate(var(--drift), 110vh) rotate(var(--spin))}}.trophy{font-size:4rem;line-height:1;animation:.8s cubic-bezier(.3,1.6,.5,1) both trophy}@keyframes trophy{0%{transform:scale(0)rotate(-30deg)}}.screen.victory{text-align:center;justify-content:center;align-items:center}.series-games{text-align:center;flex:1;align-self:center}.teams{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;display:grid}.team-card{background:#0003;border-radius:12px;flex-direction:column;gap:6px;padding:10px;display:flex}.team-card-title{font-family:var(--font-title);color:var(--accent);font-weight:600}.team-member{text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--panel-line);text-align:left;background:#ffffff12;border-radius:10px;align-items:center;min-height:44px;padding:8px 10px;display:flex;overflow:hidden}span.team-member{font-weight:700}.team-member.picked{background:var(--accent);color:var(--accent-ink);border-color:#0000;box-shadow:0 3px 10px #0006}.team-member.empty{color:var(--muted);background:0 0;border-style:dashed;font-weight:400}.scoreboard{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.score-row{background:#ffffff0d;border-radius:10px;align-items:center;gap:12px;padding:8px 12px;display:flex}.score-row.me .score-name{font-weight:800}.score-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.score-wins{font-family:var(--font-title);font-variant-numeric:tabular-nums;font-size:1.3rem;font-weight:700}.score-row.leading{background:#f4c5421f;box-shadow:inset 0 0 0 1px #f4c54266}.score-row.leading .score-wins{color:var(--accent)}.screen.victory fieldset{text-align:left;align-self:stretch}.install-banner{bottom:max(12px, env(safe-area-inset-bottom));border-radius:var(--radius);background:linear-gradient(#3a2a18,#2a1e11);border:1px solid #f4c54255;align-items:center;gap:12px;margin-top:auto;padding:12px;animation:.35s .4s both rise;display:flex;position:sticky;box-shadow:inset 0 1px #ffffff1a,0 8px 24px #000a}.install-icon{border-radius:10px;flex:none}.install-text{min-width:0;color:var(--muted);flex-direction:column;flex:1;gap:2px;font-size:.92rem;line-height:1.3;display:flex}.install-text strong{color:var(--text);font-family:var(--font-title);font-size:1rem;font-weight:600}.install-text b{color:var(--text)}.share-icon{vertical-align:-.2em;width:1.1em;height:1.1em;color:var(--accent)}.install-actions{flex:none;align-items:center;gap:6px;display:flex}
