*{margin:0;padding:0;box-sizing:border-box}:root{--ink: #4a3220;--ink-soft: #8a7154;--card: #fffdf6;--card-active: #fff3df;--primary: #ee7b23;--primary-dark: #d2620f;--barn: #c64b3c;--gold: #f2b23e;--green: #57a65a;--straw: #f6dfa0;--clay-border: rgba(74, 50, 32, .1);--clay-shadow: 0 5px 0 rgba(74, 50, 32, .09), 0 12px 26px rgba(74, 50, 32, .12);--clay-shadow-small: 0 3px 0 rgba(74, 50, 32, .08), 0 6px 14px rgba(74, 50, 32, .1);--radius: 20px}:root[data-theme=dark]{--ink: #f2e7d3;--ink-soft: #c3ab8b;--card: #3b2c1d;--card-active: #4e3821;--clay-border: rgba(242, 231, 211, .09);--clay-shadow: 0 5px 0 rgba(0, 0, 0, .3), 0 12px 26px rgba(0, 0, 0, .35);--clay-shadow-small: 0 3px 0 rgba(0, 0, 0, .26), 0 6px 14px rgba(0, 0, 0, .3)}html,body{height:100%}body{font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5;background:radial-gradient(ellipse 90% 40% at 15% -8%,#d3ecf6 0%,transparent 60%),radial-gradient(ellipse 80% 35% at 90% -5%,#fbe6bb 0%,transparent 55%),radial-gradient(ellipse 120% 45% at 50% 108%,#cfe6b5 0%,transparent 60%),linear-gradient(175deg,#fdf6e3,#f8ecd2 55%,#f2e3c0);background-attachment:fixed;color:var(--ink);-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}:root[data-theme=dark] body{background:radial-gradient(ellipse 90% 42% at 18% -8%,#2e415e 0%,transparent 62%),radial-gradient(ellipse 70% 32% at 88% -4%,#463452 0%,transparent 55%),radial-gradient(ellipse 120% 45% at 50% 108%,#253620 0%,transparent 60%),linear-gradient(175deg,#2b2114,#241b10 55%,#1d150b);background-attachment:fixed}h1,h2,h3,.status,button{font-family:Fredoka,Nunito,sans-serif}button{font-size:1rem;color:inherit;border:3px solid var(--clay-border);background:var(--card);border-radius:16px;padding:10px 16px;min-height:46px;cursor:pointer;font-weight:600;box-shadow:var(--clay-shadow-small);transition:transform .15s ease,box-shadow .15s ease,background .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover{transform:translateY(-1px)}button:active{transform:translateY(2px);box-shadow:0 1px #4a322014,0 3px 8px #4a32201a}button:disabled{opacity:.45;cursor:default;transform:none}button:focus-visible,input:focus-visible{outline:3px solid var(--primary);outline-offset:2px}button.primary{background:linear-gradient(180deg,#f68f33,var(--primary-dark));border-color:#8c410559;color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:0 5px #a84e08,0 12px 22px #d2620f59}button.primary:active{box-shadow:0 1px #a84e08,0 4px 10px #d2620f4d}button.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft)}button.ghost:hover{color:var(--ink);transform:none}.icon-button{width:46px;min-width:46px;padding:0;border-radius:14px;color:var(--ink-soft)}.app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}.screen{flex:1;display:flex;flex-direction:column}.menu-top{display:flex;justify-content:space-between;align-items:center}.lang-switch{display:flex;gap:6px}.lang-switch button{min-height:38px;padding:4px 12px;font-size:.82rem;font-weight:700;border:none;box-shadow:none;background:#4a322012;color:var(--ink-soft);border-radius:12px}.lang-switch button.active{background:var(--ink);color:var(--card)}:root[data-theme=dark] .lang-switch button{background:#f2e7d317}.hero{text-align:center;padding:6px 0 2px}.hero-art{width:190px;height:88px;filter:drop-shadow(0 6px 8px rgba(74,50,32,.2));animation:float 5s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.title{font-size:2.5rem;font-weight:700;letter-spacing:.01em;line-height:1.1;background:linear-gradient(180deg,#b3541e,#833f12);-webkit-background-clip:text;background-clip:text;color:transparent}:root[data-theme=dark] .title{background:linear-gradient(180deg,#f6a75d,#dd7a24);-webkit-background-clip:text;background-clip:text}.tagline{color:var(--ink-soft);margin-top:4px;font-size:.95rem;font-weight:600}.stats-row{display:flex;justify-content:center;gap:10px;margin-top:14px}.stat-chip{display:flex;align-items:center;gap:7px;background:var(--card);border:3px solid var(--clay-border);border-radius:14px;padding:7px 13px;box-shadow:var(--clay-shadow-small);font-size:.85rem;color:var(--ink-soft)}.stat-chip strong{font-size:1.05rem;color:var(--ink);font-family:Fredoka,sans-serif}.stat-chip svg{color:var(--gold)}.stat-chip.streak svg{color:var(--barn)}.menu-section{margin-top:18px}.menu-section h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin:14px 0 8px}.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 10px 13px;border-radius:var(--radius);color:var(--ink-soft)}.mode-card strong{color:var(--ink);font-size:1rem;line-height:1.2}.mode-card small,.variant-row small,.toggle-row small{color:var(--ink-soft);font-size:.78rem;font-family:Nunito,sans-serif;font-weight:600;display:block}.mode-card.active,.variant-row.active,.featured-card.active{border-color:var(--primary);background:var(--card-active)}.mode-card.active svg{color:var(--primary)}.featured-card{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:18px 16px 15px;border-radius:var(--radius);border-width:3px}.featured-card strong{font-size:1.25rem;color:var(--ink)}.featured-card small{color:var(--ink-soft);font-family:Nunito,sans-serif;font-weight:600}.featured-card em{font-style:normal;font-size:.82rem;font-weight:800;color:var(--primary-dark);background:#ee7b231f;border-radius:10px;padding:4px 12px;margin-top:6px}:root[data-theme=dark] .featured-card em{color:#ffb066;background:#ee7b232e}.featured-badge{position:absolute;top:-12px;right:14px;background:linear-gradient(180deg,var(--gold),#d99a1e);color:#5d4004;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:10px;padding:4px 10px;box-shadow:0 3px 8px #d99a1e66}.featured-art{width:46px;height:46px}.variants-toggle{width:100%;margin-top:8px;min-height:40px;font-size:.88rem}.variant-list{display:flex;flex-direction:column;gap:8px}.variant-row{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:16px}.seg{display:flex;background:#4a322014;border-radius:16px;padding:4px;gap:4px}:root[data-theme=dark] .seg{background:#0000004d}.seg button{flex:1;border:none;box-shadow:none;background:transparent;font-weight:600;min-height:44px;border-radius:12px;color:var(--ink-soft)}.seg button.active{background:var(--card);box-shadow:var(--clay-shadow-small);color:var(--ink)}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:3px solid var(--clay-border);border-radius:16px;padding:12px 14px;box-shadow:var(--clay-shadow-small);cursor:pointer}.toggle-row input{width:24px;height:24px;accent-color:var(--primary);flex-shrink:0;cursor:pointer}.start-button{margin-top:24px;padding:16px;font-size:1.3rem;border-radius:22px;letter-spacing:.02em}.rules-link{margin-top:8px}.online-cta{width:100%;margin-top:18px;display:flex;align-items:center;gap:14px;text-align:left;padding:15px 18px;border-radius:18px;border:none;color:#fff;background:linear-gradient(120deg,#3f9d63,#2f7d8a 55%,#4a6fb0);box-shadow:0 5px #2b6d47,0 12px 24px #2f7d8a66}.online-cta:active{box-shadow:0 1px #2b6d47,0 4px 10px #2f7d8a66}.online-cta span{flex:1;display:flex;flex-direction:column}.online-cta strong{font-size:1.15rem}.online-cta small{font-size:.8rem;opacity:.9;font-family:Nunito,sans-serif;font-weight:600}.online-cta-arrow{font-size:1.6rem;opacity:.85}.header-spacer{width:46px;flex-shrink:0}.online-panel{background:var(--card);border:3px solid var(--clay-border);border-radius:20px;padding:18px;box-shadow:var(--clay-shadow-small);margin-top:16px}.online-panel h2{font-size:1.35rem;margin-bottom:12px;text-align:center}.online-note{text-align:center;color:var(--ink-soft);font-weight:600;padding:20px 0}.field-label{display:block;font-size:.82rem;font-weight:700;color:var(--ink-soft);margin:12px 0 6px}.text-input{width:100%;font:inherit;font-weight:700;color:var(--ink);background:var(--card-active);border:3px solid var(--clay-border);border-radius:14px;padding:12px 14px;min-height:48px}.text-input:focus-visible{outline:3px solid var(--primary);outline-offset:1px}.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}.avatar-option{aspect-ratio:1;min-height:0;font-size:1.5rem;padding:0;border-radius:14px}.avatar-option.active{border-color:var(--primary);background:var(--card-active);transform:scale(1.05)}.profile-card{padding:14px 16px}.profile-row{display:flex;align-items:center;gap:12px}.profile-avatar{font-size:2.2rem;line-height:1}.profile-info{flex:1;display:flex;flex-direction:column}.profile-info strong{font-size:1.2rem;font-family:Fredoka,sans-serif}.profile-info small{color:var(--ink-soft);font-weight:700}.profile-stats{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:2px solid var(--clay-border);font-size:.85rem;font-weight:700;color:var(--ink-soft)}.profile-stats span{display:flex;align-items:center;gap:6px}.profile-stats svg{color:var(--gold)}.online-action{width:100%;margin-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px;border-radius:18px}.online-action strong{font-size:1.1rem}.online-action small{font-size:.8rem;color:var(--ink-soft);font-family:Nunito,sans-serif;font-weight:600}.online-action.primary small{color:#ffffffe6}.code-row{display:flex;gap:8px;margin-top:12px}.code-input{flex:1;text-transform:uppercase;letter-spacing:.2em;text-align:center}.code-row button{flex-shrink:0;padding:0 20px}.lb-title{display:flex;align-items:center;gap:8px;font-size:1.1rem;margin-bottom:10px}.lb-title svg{color:var(--gold)}.lb-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;font-weight:700}.lb-row.me{background:var(--card-active)}.lb-rank{width:22px;text-align:center;color:var(--ink-soft);font-family:Fredoka,sans-serif}.lb-avatar{font-size:1.3rem}.lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-elo{color:var(--primary-dark);font-family:Fredoka,sans-serif}:root[data-theme=dark] .lb-elo{color:#f5a35a}.waiting-panel{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}.code-box{font-family:Fredoka,sans-serif;font-size:2.6rem;font-weight:700;letter-spacing:.35em;padding:12px 8px 12px 20px;background:var(--card-active);border-radius:16px;color:var(--primary-dark)}:root[data-theme=dark] .code-box{color:#f5a35a}.pulse-dots{display:flex;gap:10px}.pulse-dots span{width:14px;height:14px;border-radius:50%;background:var(--primary);animation:bounce 1.2s ease-in-out infinite}.pulse-dots span:nth-child(2){animation-delay:.15s}.pulse-dots span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}.players-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 0}.player-chip{display:flex;align-items:center;gap:7px;background:var(--card);border:2.5px solid var(--clay-border);border-radius:14px;padding:5px 10px;box-shadow:var(--clay-shadow-small);transition:border-color .2s ease,transform .2s ease}.player-chip.active{border-color:var(--primary);transform:translateY(-2px)}.player-avatar{font-size:1.5rem;line-height:1}.player-name{display:flex;flex-direction:column;font-weight:700;font-size:.9rem;line-height:1.1}.player-name small{color:var(--ink-soft);font-size:.72rem}.players-bar .vs{font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink-soft);font-size:.85rem}.elo-delta{display:inline-block;margin-top:8px;font-family:Fredoka,sans-serif;font-size:1.3rem;font-weight:700;padding:4px 16px;border-radius:12px}.elo-delta.up{color:#2f8a4e;background:#57a65a2e}.elo-delta.down{color:#c0442f;background:#e0464029}.presence-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-left:-4px;align-self:flex-start;border:2px solid var(--card)}.presence-dot.online{background:#3fae5c;box-shadow:0 0 6px #3fae5cb3}.presence-dot.offline{background:#b0a08a}.running-badge{width:11px;height:11px;border-radius:50%;background:#ffd763;box-shadow:0 0 8px #ffd763e6;flex-shrink:0;animation:pulse 1.2s ease-in-out infinite}.running-cta{background:linear-gradient(120deg,#d2620f,#c64b3c);box-shadow:0 5px #9c3a2c,0 12px 24px #c64b3c66}.running-cta:active{box-shadow:0 1px #9c3a2c,0 4px 10px #c64b3c66}.resume-button{width:100%;margin-top:20px;display:flex;flex-direction:column;gap:2px;padding:13px 16px;border-radius:18px;border-color:#57a65a80}.resume-button strong{color:#2f8a4e;font-size:1.05rem}.resume-button small{color:var(--ink-soft);font-size:.78rem;font-family:Nunito,sans-serif;font-weight:600}:root[data-theme=dark] .resume-button strong{color:#7dcb92}.rematch-note{margin-top:10px;font-weight:700;font-size:.9rem;color:var(--ink-soft)}.rematch-note.incoming{color:var(--primary-dark);animation:pulse 1.4s ease-in-out infinite}:root[data-theme=dark] .rematch-note.incoming{color:#f5a35a}.options-panel .side-seg button{gap:5px;font-size:.9rem}.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--ink);color:var(--card);font-weight:700;font-size:.9rem;padding:12px 20px;border-radius:14px;box-shadow:0 8px 24px #0000004d;z-index:40;max-width:90vw;text-align:center;animation:toast-in .25s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.game-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 4px}.status{font-weight:600;text-align:center;font-size:1.02rem}.status.thinking{color:var(--ink-soft);animation:pulse 1.2s ease-in-out infinite}.score-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:2px 0 6px}.score-chip{display:flex;align-items:center;gap:6px;background:var(--card);border:2.5px solid var(--clay-border);border-radius:12px;padding:4px 11px;box-shadow:var(--clay-shadow-small);font-family:Fredoka,sans-serif;font-weight:600;font-size:1rem}.score-chip small{color:var(--ink-soft);font-size:.78rem}.house-chip{border-color:#c64b3c59}.board-wrap{position:relative;width:100%;max-width:min(94vw,64dvh);margin:2px auto}.board{width:100%;height:auto;display:block;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 14px 22px rgba(74,50,32,.28))}.piece{transition:transform .3s cubic-bezier(.34,1.4,.64,1),opacity .4s ease}.piece.dead{opacity:0;pointer-events:none}.target{animation:pulse 1.1s ease-in-out infinite}.selected-ring{animation:pulse 1.4s ease-in-out infinite}.hint-halo{animation:halo 2.2s ease-in-out infinite}.feather{animation:feather-fly .85s ease-out forwards}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes halo{0%,to{opacity:.08}50%{opacity:.45}}@keyframes feather-fly{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}.tip-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;max-width:440px;background:var(--card);border:2.5px solid var(--clay-border);border-radius:14px;padding:6px 4px 6px 14px;box-shadow:var(--clay-shadow-small);font-size:.85rem;font-weight:700;color:var(--ink-soft)}.tip-bar>svg{color:var(--gold);flex-shrink:0}.tip-bar button{min-height:36px;min-width:36px;padding:0;border:none;box-shadow:none;background:transparent;color:var(--ink-soft);font-size:1.2rem}.game-controls{display:flex;justify-content:center;gap:10px;padding:12px 0 4px}.game-controls button svg{flex-shrink:0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#32200c8c;display:flex;align-items:center;justify-content:center;padding:20px;z-index:20;overflow:hidden}.board-wrap .overlay{position:absolute;border-radius:32px;background:#32200c73}.confetti-piece{position:absolute;top:-12px;border-radius:3px;animation:confetti-fall linear forwards}@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}85%{opacity:1}to{transform:translateY(115vh) rotate(560deg);opacity:0}}.board-wrap .overlay .confetti-piece{animation-name:confetti-fall-local}@keyframes confetti-fall-local{0%{transform:translateY(-10px) rotate(0);opacity:1}80%{opacity:1}to{transform:translateY(620px) rotate(560deg);opacity:0}}.win-card,.rules-card{position:relative;background:var(--card);border:3px solid var(--clay-border);border-radius:26px;padding:26px 24px 22px;text-align:center;box-shadow:0 16px 46px #00000059;max-width:420px;width:100%}.win-figure{margin-top:-66px;filter:drop-shadow(0 6px 8px rgba(74,50,32,.25))}.win-card h2{margin:4px 0 6px;font-size:1.6rem}.win-card p{color:var(--ink-soft);font-size:.94rem;font-weight:600}.win-buttons{display:flex;gap:10px;justify-content:center;margin-top:18px}.rules-card{text-align:left;max-height:84dvh;overflow-y:auto}.rules-card h2{text-align:center;margin-bottom:10px;font-size:1.5rem}.rules-card h3{margin:16px 0 6px;font-size:1.05rem;color:var(--primary-dark)}:root[data-theme=dark] .rules-card h3{color:#f5a35a}.rules-card p{font-size:.92rem;color:var(--ink-soft);font-weight:600;margin-bottom:8px;line-height:1.5}.rules-card .primary{display:flex;margin:18px auto 0}@media(min-width:480px){.title{font-size:2.9rem}}@media(prefers-reduced-motion:reduce){.piece,button,body{transition:none}.target,.selected-ring,.hint-halo,.status.thinking,.hero-art{animation:none}.feather,.confetti-piece{display:none}}