:root{--ink:#24332e;--ink-soft:#607069;--cream:#f5efe3;--paper:#fffaf0;--paper-deep:#e7dcc8;--wood:#c8a578;--wood-dark:#98734f;--sage:#5f785e;--sage-dark:#334d3e;--blue:#397a91;--blue-dark:#205468;--coral:#d66f5f;--coral-dark:#98483f;--gold:#e7b65f;--surface:#fffaf0c7;--line:#334d3e1f;--shadow:0 24px 80px #362f231f;--shadow-soft:0 16px 44px #3f342617}*{box-sizing:border-box}html{background:var(--cream);min-width:320px}body{color:var(--ink);background:radial-gradient(circle at 15% 10%, #fffc, transparent 28rem), radial-gradient(circle at 1px 1px, #404d4209 1px, transparent 1.2px) 0 0 / 18px 18px, var(--cream);font-family:var(--font-nunito), system-ui, sans-serif;min-height:100svh;margin:0}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #397a918c}.app-shell{isolation:isolate;min-height:100svh;position:relative;overflow:hidden}.topbar,.game-topbar{z-index:5;justify-content:space-between;align-items:center;width:min(100% - 32px,1120px);height:76px;margin:0 auto;display:flex;position:relative}.topbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffaf07a;border:1px solid #334d3e14;border-radius:22px;margin-top:8px;padding:0 10px}.top-actions{gap:8px;display:flex}.logo{color:var(--sage-dark);font-family:var(--font-playfair), serif;letter-spacing:-.055em;flex-direction:column;align-items:center;gap:10px;font-size:clamp(3.4rem,10vw,5.6rem);font-weight:700;line-height:.9;display:inline-flex}.logo-mark{grid-template-columns:repeat(2,8px);gap:4px;display:grid;position:relative;transform:rotate(45deg)}.logo-mark i{background:var(--coral);border-radius:50%;width:8px;height:8px;box-shadow:inset 0 -2px #60221c33}.logo-mark i:nth-child(2),.logo-mark i:nth-child(3){background:var(--blue)}.logo-compact{letter-spacing:-.04em;flex-direction:row;gap:10px;font-size:1.55rem}.logo-compact .logo-mark{grid-template-columns:repeat(2,5px);gap:3px}.logo-compact .logo-mark i{width:5px;height:5px}.icon-button{cursor:pointer;background:#fffaf0cc;border:1px solid #334d3e24;border-radius:50%;place-items:center;width:44px;height:44px;font-weight:800;transition:all .16s;display:grid;box-shadow:0 5px 16px #3339300f}.icon-button:hover{background:var(--paper);transform:translateY(-1px)}.welcome{place-items:center;padding:40px 20px 64px;display:grid}.welcome-card{z-index:2;text-align:center;width:min(100%,520px);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(145deg,#ffffff7a,#0000 45%),#fffaf0b3;border:1px solid #334d3e1a;border-radius:44px;padding:34px 42px 38px;position:relative}.welcome-card .logo{margin:24px 0 18px}.eyebrow{color:var(--coral-dark);letter-spacing:.17em;text-transform:uppercase;font-size:.72rem;font-weight:900;display:block}.welcome-copy{max-width:390px;color:var(--ink-soft);margin:0 auto 26px;font-size:1.08rem;line-height:1.55}.hero-board{background:linear-gradient(145deg,#ffffff85,#0000),#d2b08347;border:1px solid #98734f2e;border-radius:80px;width:240px;height:138px;margin:4px auto 26px;position:relative;box-shadow:inset 0 -8px 24px #98734f14}.hero-line{transform-origin:50%;background:#5f785e54;display:block;position:absolute}.hero-line.horizontal{width:150px;height:2px;top:68px;left:45px}.hero-line.vertical{width:2px;height:88px;top:25px;left:119px;transform:rotate(38deg)}.hero-piece{color:#ffffffbf;border-radius:50%;place-items:center;width:42px;height:42px;font-style:normal;display:grid;position:absolute;box-shadow:0 8px 12px #352c202e,inset 0 -6px #0000001a,inset 0 3px #ffffff40}.hero-piece.blue{background:var(--blue)}.hero-piece.coral{background:var(--coral);border-radius:14px;transform:rotate(45deg)}.hero-piece.one{top:47px;left:34px}.hero-piece.two{top:47px;right:36px}.hero-piece.three{top:16px;left:99px;transform:scale(.72)}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:18px;justify-content:space-between;align-items:center;gap:28px;min-height:54px;padding:0 22px;font-weight:900;transition:all .14s;display:inline-flex}.primary-button{color:#fffaf0;background:var(--sage-dark);box-shadow:0 10px 24px #334d3e3b,inset 0 -3px #00000026}.primary-button:hover{background:#294536;transform:translateY(-2px)}.primary-button:active{transform:translateY(1px)}.primary-button:disabled,.secondary-button:disabled{cursor:wait;opacity:.55;transform:none}.welcome-card .primary-button{width:min(100%,330px)}.text-button{min-height:44px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;margin-top:8px;padding:8px 12px;font-weight:800}.text-button:hover{color:var(--sage-dark)}.welcome footer{color:#89938d;letter-spacing:.08em;font-size:.72rem;font-weight:800;position:absolute;bottom:22px}.ambient{z-index:-1;filter:blur(1px);border-radius:50%;position:absolute}.ambient-one{background:#397a911a;width:320px;height:320px;bottom:8%;left:-180px}.ambient-two{background:#d66f5f1a;width:260px;height:260px;top:-90px;right:-110px}.content-panel{width:min(100% - 32px,920px);margin:44px auto 80px}.content-panel.narrow{max-width:560px;box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffaf08a;border:1px solid #334d3e17;border-radius:36px;padding:26px}.back-button{min-height:44px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;margin-bottom:22px;padding:8px 0;font-weight:800;display:block}.content-panel h1,.guide-card h1,.result-card h1{font-family:var(--font-playfair), serif;letter-spacing:-.045em;margin:10px 0 30px;font-size:clamp(2.15rem,7vw,3.6rem);line-height:1.06}.mode-grid{gap:12px;display:grid}.mode-card{text-align:left;cursor:pointer;background:linear-gradient(135deg,#ffffff7a,#0000 58%),#fffaf0cc;border:1px solid #334d3e21;border-radius:26px;grid-template-columns:58px 1fr 34px;align-items:center;gap:16px;width:100%;min-height:96px;padding:14px 16px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid;box-shadow:0 9px 22px #3b352a0e}.mode-card:hover{border-color:#334d3e4d;transform:translateY(-3px);box-shadow:0 16px 38px #3b352a1c}.mode-card.featured{color:#fffaf0;background:radial-gradient(circle at 12% 20%,#e7b65f2e,#0000 30%),linear-gradient(135deg,#3c5a49,#263f32);border-color:#0000;box-shadow:0 16px 36px #233f3038}.mode-glyph,.level-glyph{background:#5f785e17;border-radius:20px;width:58px;height:58px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #334d3e0f}.featured .mode-glyph,.featured .level-glyph{background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff14}.mode-glyph i,.level-glyph i{display:block;position:absolute}.mode-glyph.bot i:first-child{background:#6ba2b6;border-radius:50%;width:25px;height:25px;top:17px;left:9px;box-shadow:inset 0 -4px #194c5f2e}.mode-glyph.bot i:nth-child(2){background:#e48a79;border-radius:8px;width:22px;height:22px;top:19px;right:8px;transform:rotate(45deg);box-shadow:inset 0 -4px #742a2329}.mode-glyph.bot i:nth-child(3),.mode-glyph.bot i:nth-child(4){z-index:2;background:#fff9eb;border-radius:50%;width:5px;height:5px;top:27px}.mode-glyph.bot i:nth-child(3){left:18px}.mode-glyph.bot i:nth-child(4){right:16px}.mode-glyph.local i:first-child,.mode-glyph.local i:nth-child(2){background:var(--paper);border:3px solid;width:27px;height:27px;top:15px;box-shadow:0 6px 12px #3131281f}.mode-glyph.local i:first-child{z-index:2;border-color:var(--blue);border-radius:50%;left:9px}.mode-glyph.local i:nth-child(2){border-color:var(--coral);border-radius:9px;right:8px;transform:rotate(45deg)}.mode-glyph.local i:nth-child(3),.mode-glyph.local i:nth-child(4){z-index:3;border-radius:50%;width:4px;height:4px;top:27px}.mode-glyph.local i:nth-child(3){background:var(--blue);left:21px}.mode-glyph.local i:nth-child(4){background:var(--coral);right:18px}.mode-glyph.online:before,.mode-glyph.online:after{content:"";transform-origin:50%;background:#397a916b;width:28px;height:2px;position:absolute;top:28px;left:15px}.mode-glyph.online:before{transform:rotate(36deg)}.mode-glyph.online:after{transform:rotate(-36deg)}.mode-glyph.online i{z-index:2;border:3px solid var(--paper);background:var(--blue);border-radius:50%;width:13px;height:13px;box-shadow:0 3px 8px #294e5b2e}.mode-glyph.online i:first-child{top:23px;left:7px}.mode-glyph.online i:nth-child(2){background:var(--coral);top:9px;right:7px}.mode-glyph.online i:nth-child(3){background:var(--sage);bottom:9px;right:7px}.mode-glyph.online i:nth-child(4){background:var(--gold);width:10px;height:10px;top:23px;left:24px}.card-arrow{background:#334d3e14;border-radius:50%;place-items:center;width:30px;height:30px;font-size:.95rem;transition:transform .18s,background .18s;display:grid}.featured .card-arrow{background:#ffffff1a}.mode-card:hover .card-arrow{transform:translate(3px)}.level-glyph.easy i:first-child{border:4px solid #6a9eb0;border-radius:50%;width:27px;height:27px;top:15px;left:15px;box-shadow:inset 0 0 0 5px #6ba2b61a}.level-glyph.easy i:nth-child(2),.level-glyph.easy i:nth-child(3){background:#6a9eb0;border-radius:50%;width:5px;height:5px;top:26px}.level-glyph.easy i:nth-child(2){left:24px}.level-glyph.easy i:nth-child(3){left:31px}.level-glyph.medium{justify-content:center;align-items:end;gap:4px;padding-bottom:14px;display:flex}.level-glyph.medium i{background:var(--sage);border-radius:5px 5px 2px 2px;width:8px;position:static}.level-glyph.medium i:first-child{opacity:.55;height:12px}.level-glyph.medium i:nth-child(2){opacity:.75;height:20px}.level-glyph.medium i:nth-child(3){height:29px}.level-glyph.hard{place-items:center;display:grid}.level-glyph.hard:before,.level-glyph.hard:after{content:"";background:#fffaf033;width:36px;height:1px;position:absolute}.level-glyph.hard:before{transform:rotate(45deg)}.level-glyph.hard:after{transform:rotate(-45deg)}.level-glyph.hard i{z-index:1;background:var(--gold);border-radius:50%;width:6px;height:6px}.level-glyph.hard i:first-child{top:9px;left:9px}.level-glyph.hard i:nth-child(2){top:9px;right:9px}.level-glyph.hard i:nth-child(3){bottom:9px;left:9px}.level-glyph.hard b{z-index:2;color:var(--paper);font-family:var(--font-playfair), serif;font-size:1.65rem;line-height:1;position:relative}.mode-card strong,.mode-card small{display:block}.mode-card strong{margin-bottom:2px;font-size:1.02rem}.mode-card small{color:var(--ink-soft)}.mode-card.featured small{color:#fffaf0ad}.difficulty-row{gap:6px;margin:-6px 8px 4px;display:flex}.difficulty-row button{min-height:38px;color:var(--ink-soft);text-transform:capitalize;cursor:pointer;background:0 0;border:0;border-radius:12px;flex:1;font-size:.78rem;font-weight:900}.difficulty-row button.selected{color:var(--sage-dark);background:#5f785e1f}.bot-level-grid .mode-card{min-height:122px}.bot-level-card{grid-template-columns:58px 1fr 34px}.bot-level-copy em{color:var(--coral-dark);letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;font-size:.61rem;font-style:normal;font-weight:1000;display:block}.bot-level-card.featured .bot-level-copy em{color:var(--gold)}.strength-meter{gap:4px;margin-top:9px;display:flex}.strength-meter i{background:#334d3e1f;border-radius:99px;width:22px;height:3px}.strength-meter i.filled{background:var(--sage)}.featured .strength-meter i{background:#ffffff1f}.featured .strength-meter i.filled{background:var(--gold)}.rules-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.rules-grid article{background:#fffaf0b8;border:1px solid #334d3e1a;border-radius:24px;min-height:230px;padding:24px}.rules-grid article>span{width:38px;height:38px;color:var(--paper);background:var(--blue);border-radius:50%;place-items:center;font-weight:900;display:grid}.rules-grid article:nth-child(2)>span{background:var(--coral)}.rules-grid article:nth-child(3)>span{background:var(--sage)}.rules-grid h2{font-family:var(--font-playfair), serif;margin:32px 0 8px}.rules-grid p{color:var(--ink-soft);margin:0;line-height:1.55}.rule-note{color:#6d5938;background:#e7b65f29;border-radius:18px;margin:14px 0 22px;padding:18px 22px}.guide-shell{grid-template-rows:auto 1fr;display:grid}.guide-card{text-align:center;place-self:center;width:min(100% - 32px,560px);padding-bottom:50px}.guide-visual{aspect-ratio:1.6;background:#fffaf0ad;border:1px solid #334d3e1a;border-radius:32px;width:min(100%,370px);margin:0 auto 28px;position:relative;overflow:hidden}.guide-grid-lines:before,.guide-grid-lines:after{content:"";background:#5f785e4d;position:absolute}.guide-grid-lines:before{width:72%;height:2px;top:50%;left:14%}.guide-grid-lines:after{width:2px;height:70%;top:15%;left:50%}.guide-visual i{color:#fff;background:var(--blue);border-radius:50%;place-items:center;width:46px;height:46px;font-style:normal;display:grid;position:absolute;box-shadow:0 7px 14px #352c202e,inset 0 -5px #0000001f}.guide-visual i:first-of-type{top:calc(50% - 23px);left:13%}.guide-visual i:nth-of-type(2){top:calc(50% - 23px);left:37%}.guide-visual i:nth-of-type(3){top:calc(50% - 23px);left:61%}.guide-visual i:nth-of-type(4){top:calc(50% - 23px);left:79%}.visual-2 i,.visual-4 i,.visual-6 i{background:var(--coral);border-radius:15px}.visual-3 i:nth-of-type(4),.visual-4 i:nth-of-type(3){opacity:.2}.step-count{color:var(--coral-dark);letter-spacing:.12em;font-size:.75rem;font-weight:900}.guide-card h1{margin-bottom:12px}.guide-card>p{min-height:52px;color:var(--ink-soft);line-height:1.6}.progress-dots{justify-content:center;gap:7px;margin:26px 0;display:flex}.progress-dots i{background:#334d3e29;border-radius:8px;width:7px;height:7px;transition:all .18s}.progress-dots i.active{background:var(--sage);width:24px}.guide-actions{justify-content:center;gap:10px;display:flex}.secondary-button{color:var(--sage-dark);background:#fffaf0cc;border:1px solid #334d3e29}.secondary-button:hover{background:var(--paper);transform:translateY(-1px)}.field-label{color:var(--ink-soft);gap:8px;margin-bottom:14px;font-size:.78rem;font-weight:900;display:grid}input{width:100%;height:56px;color:var(--ink);background:#fffaf0d1;border:1px solid #334d3e2e;border-radius:16px;padding:0 17px}.online-panel>.primary-button{width:100%}.or{color:#8b958e;align-items:center;gap:14px;margin:24px 0;font-size:.75rem;display:flex}.or:before,.or:after{content:"";background:#334d3e1f;flex:1;height:1px}.join-row{grid-template-columns:1fr auto;gap:10px;display:grid}.join-row input{text-transform:uppercase;letter-spacing:.16em;font-weight:900}.notice{color:var(--coral-dark);background:#d66f5f1a;border-radius:12px;padding:12px 14px;font-weight:800}.waiting-room{text-align:center;padding-top:20px}.waiting-room h1{letter-spacing:.14em;margin-bottom:10px}.waiting-room>p{color:var(--ink-soft);line-height:1.6}.copy-button{margin:12px 0 24px}.player-slots{text-align:left;gap:8px;display:grid}.player-slots span{color:var(--ink-soft);border:1px dashed #334d3e33;border-radius:16px;padding:16px}.player-slots span.filled{color:var(--ink);background:#fffaf0a6;border-style:solid}.player-slots i{background:#aab2ad;border-radius:50%;width:9px;height:9px;margin-right:8px;display:inline-block}.player-slots .filled i{background:#66a26f;box-shadow:0 0 0 4px #66a26f21}.lobby-heading{color:var(--ink-soft);justify-content:space-between;margin:4px 2px 10px;font-size:.76rem;display:flex}.lobby-players{gap:8px;display:grid}.lobby-players>button{min-height:62px;color:var(--ink);text-align:left;cursor:pointer;background:#fffaf0ad;border:1px solid #334d3e1f;border-radius:16px;align-items:center;gap:11px;padding:9px 12px;display:flex}.lobby-players>button:disabled{cursor:default;opacity:1}.lobby-players>button:not(:disabled):hover{border-color:var(--sage);transform:translateY(-1px)}.lobby-players>button.selected{background:#ffeeba66;border-color:#e7b65fb8}.lobby-players>button.host{background:#5f785e14}.lobby-players i{background:#aab2ad;border-radius:50%;flex:none;width:10px;height:10px}.lobby-players i.connected{background:#66a26f;box-shadow:0 0 0 4px #66a26f21}.lobby-players span{flex:1;min-width:0}.lobby-players strong,.lobby-players small{display:block}.lobby-players strong{text-overflow:ellipsis;overflow:hidden}.lobby-players small{color:var(--ink-soft);margin-top:2px}.lobby-players b{color:#a57425;font-size:1.1rem}.lobby-start{width:100%;margin-top:16px}.selected-matchup{background:#fffaf0b8;border-radius:20px;justify-content:center;align-items:center;gap:14px;margin:24px 0;padding:20px;display:flex}.selected-matchup span{color:var(--ink-soft);text-transform:uppercase;font-size:.72rem}.spectator-panel{text-align:center}.spectator-panel>p{color:var(--ink-soft);line-height:1.6}.waiting-pulse{color:var(--ink-soft);align-items:center;gap:8px;margin-top:24px;font-size:.78rem;font-weight:900;display:inline-flex}.waiting-pulse:before{content:"";background:var(--coral);border-radius:50%;width:8px;height:8px;animation:1.4s infinite breathe}.rps-panel{text-align:center;padding-top:7vh}.rps-panel>p{color:var(--ink-soft)}.rps-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0;display:grid}.rps-grid button{cursor:pointer;text-transform:capitalize;background:#fffaf0bf;border:1px solid #334d3e24;border-radius:24px;min-height:132px;transition:all .14s}.rps-grid button:hover:not(:disabled){border-color:#334d3e59;transform:translateY(-3px)rotate(-1deg)}.rps-grid button:disabled{opacity:.5}.rps-grid span{margin-bottom:8px;font-size:2.2rem;display:block}.rps-panel>small{color:#8b958e;letter-spacing:.12em}.rps-result{padding-top:6vh}.rps-result-choices{grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 30px;display:grid}.rps-result-choices>div{opacity:.58;background:#fffaf0b3;border:1px solid #334d3e21;border-radius:24px;align-content:center;place-items:center;gap:5px;min-height:150px;padding:20px 12px;display:grid}.rps-result-choices>div.winner{opacity:1;background:#ffeeba6b;border-color:#e7b65fb3;transform:translateY(-4px);box-shadow:0 12px 30px #634b1f1a}.rps-result-choices span{font-size:2.7rem}.rps-result-choices strong{text-overflow:ellipsis;max-width:100%;overflow:hidden}.rps-result-choices small{color:var(--ink-soft);text-transform:capitalize;font-weight:900}.rps-result h1{margin-bottom:6px}.rps-result>p{margin-top:0;font-weight:800}.rps-starting{color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;margin-top:28px;font-size:.72rem;font-weight:900}.rps-starting i{background:#334d3e1a;border-radius:99px;height:4px;margin-top:10px;display:block;overflow:hidden}.rps-starting i:after{content:"";border-radius:inherit;background:var(--coral);transform-origin:0;width:100%;height:100%;animation:2.8s linear both rpsCountdown;display:block}.game-shell{background:radial-gradient(circle at 50% 44%,#ffffffb8,#0000 38rem),linear-gradient(135deg,#eee5d4,#f8f2e7 55%,#ebe1cf);min-height:100svh}.game-topbar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffaf08f;border:1px solid #334d3e14;border-radius:22px;width:min(100% - 24px,760px);height:64px;margin-top:8px;padding:0 10px;box-shadow:0 10px 28px #3e34280f}.menu-dots{gap:3px;display:flex}.menu-dots i{background:currentColor;border-radius:50%;width:4px;height:4px}.match-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"p1 p2""board board";gap:10px;width:min(100% - 24px,700px);margin:0 auto;display:grid}.player-badge{color:#fffaf0e0;opacity:.66;background:linear-gradient(145deg,#ffffff0e,#0000 48%),#2d3c35;border:1px solid #ffffff12;border-radius:19px;align-items:center;gap:9px;width:100%;min-width:0;min-height:64px;margin:0;padding:9px 11px;transition:all .2s;display:flex;box-shadow:0 9px 20px #24332e1c,inset 0 1px #ffffff0d}.player-badge.p1{grid-area:p1}.player-badge.p2{grid-area:p2}.player-badge.active{opacity:1;transform:translateY(-2px)}.player-badge.p1.active{background:linear-gradient(145deg,#ffffff1a,#0000 48%),linear-gradient(135deg,#337d97,#24576a);border-color:#6fb4cd85;box-shadow:0 12px 28px #24576a40}.player-badge.p2.active{background:linear-gradient(145deg,#ffffff1a,#0000 48%),linear-gradient(135deg,#c86658,#93483f);border-color:#ed918280;box-shadow:0 12px 28px #93483f38}.mini-piece{color:#ffffffd1;background:var(--blue);border-radius:50%;flex:none;place-items:center;width:35px;height:35px;font-size:.77rem;display:inline-grid;box-shadow:inset 0 -4px #0000001f}.mini-piece.p2{background:var(--coral);border-radius:11px}.player-text{flex:1;min-width:0}.player-text strong,.player-text small{display:block}.player-text strong{text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;overflow:hidden}.player-text small{color:#fffaf094;letter-spacing:.08em;font-size:.58rem}.turn-pip{border-radius:50%;width:9px;height:9px;margin-right:5px;animation:1.1s infinite breathe}.player-badge.p1 .turn-pip,.player-badge.p2 .turn-pip{background:var(--gold);box-shadow:0 0 0 5px #e7b65f29}.player-badge.active .player-text small{color:#fffaf0d1;letter-spacing:.12em;font-weight:1000}.board-area{grid-area:board;justify-items:center;display:grid}.turn-command{width:min(100%,490px);min-height:58px;color:var(--paper);background:linear-gradient(120deg,#ffffff0e,#0000 55%),#24332e;border:1px solid #ffffff12;border-radius:19px;grid-template-columns:40px 1fr 34px;align-items:center;gap:11px;margin:2px 0 10px;padding:8px 13px;display:grid;position:relative;overflow:hidden;box-shadow:0 12px 28px #24332e2b}.turn-command:before{content:"";background:var(--blue);width:4px;position:absolute;inset:0 auto 0 0}.turn-command.p2:before{background:var(--coral)}.command-piece{color:#ffffffc2;background:var(--blue);border-radius:50%;place-items:center;width:38px;height:38px;display:grid;box-shadow:inset 0 -5px #00000024,0 6px 12px #0000001f}.command-piece.p2{background:var(--coral);border-radius:12px}.command-copy{min-width:0}.command-copy small,.command-copy strong{display:block}.command-copy small{color:var(--gold);letter-spacing:.16em;font-size:.58rem;font-weight:1000}.command-copy strong{letter-spacing:-.015em;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;font-size:1.02rem;overflow:hidden}.command-signal{width:30px;height:30px;position:relative}.command-signal i{background:var(--blue);border-radius:50%;position:absolute;inset:8px}.turn-command.p2 .command-signal i{background:var(--coral)}.command-signal i:last-child{animation:1.5s ease-out infinite commandPulse}.turn-p1 .board-frame{box-shadow:0 0 0 4px #5f9fb838,0 24px 48px #4132212e}.turn-p2 .board-frame{box-shadow:0 0 0 4px #d66f5f33,0 24px 48px #4132212e}.board-frame{aspect-ratio:1;background:linear-gradient(145deg,#ffffff80,#0000 28%),repeating-linear-gradient(96deg,#73533109 0 1px,#0000 1px 6px),#d2b083;border:1px solid #6244273d;border-radius:14%;width:min(86vw,490px);padding:8%;position:relative;box-shadow:0 24px 48px #4132212e,0 6px #aa8258,inset 0 0 0 5px #fff5dd38,inset 0 0 40px #6e4a2814}.board-glow{pointer-events:none;border-radius:12%;position:absolute;inset:4%;box-shadow:inset 0 0 50px #fff7e333}.board{width:100%;height:100%;position:relative}.board-paths{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.board-edge{stroke:#4b4c3b6e;stroke-width:3px;stroke-linecap:round}.winning-streak{stroke:var(--gold);stroke-width:8px;stroke-linecap:round;filter:drop-shadow(0 0 5px #e7b65fe6);animation:.5s both streak}.node{z-index:3;cursor:default;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;place-items:center;width:52px;height:52px;margin:-26px;padding:0;display:grid;position:absolute}.socket{background:#795d42;border-radius:50%;width:13px;height:13px;transition:all .14s;position:absolute;box-shadow:inset 0 2px 4px #3722148c,0 1px #ffffff4d}.node.selectable,.node.destination{cursor:pointer}.node.selectable:not(.occupied) .socket,.node.destination .socket{background:var(--gold);width:19px;height:19px;animation:1.6s infinite breathe;box-shadow:0 0 0 7px #ffecad42,0 0 14px #e7b65fcc}.piece{color:#ffffffb3;background:radial-gradient(circle at 33% 25%, #ffffff52, transparent 23%), var(--blue);border:2px solid #214e5e6b;border-radius:50%;place-items:center;width:47px;height:47px;font-size:.7rem;transition:transform .15s,box-shadow .15s;animation:.19s both settle;display:grid;box-shadow:0 8px 9px #45311c42,0 2px 1px #45311c57,inset 0 -7px #0000001c}.piece.p2{background:radial-gradient(circle at 33% 25%, #ffffff52, transparent 23%), var(--coral);border-color:#893b336b;border-radius:15px}.node.selectable:hover .piece,.node.selected .piece{transform:translateY(-7px)scale(1.04);box-shadow:0 16px 13px #45311c3b,inset 0 -7px #0000001c}.node.selected .piece{outline:4px solid #ffeebabf}.node.last .piece{animation:.22s both settle,.7s lastGlow}.history-controls{width:min(100% - 20px,330px);min-height:62px;color:var(--paper);background:linear-gradient(135deg,#ffffff0d,#0000 55%),#2b3a34;border:1px solid #ffffff12;border-radius:21px;grid-template-columns:50px 1fr 50px;align-items:center;gap:8px;margin-top:16px;padding:6px;display:grid;box-shadow:0 12px 28px #24332e2b,inset 0 1px #ffffff0a}.history-controls button{width:50px;height:50px;color:var(--paper);cursor:pointer;background:#ffffff12;border:1px solid #ffffff14;border-radius:16px;padding:0;transition:all .15s}.history-controls button span{margin-top:-4px;font-family:Georgia,serif;font-size:2rem;line-height:1;display:block}.history-controls button:hover:not(:disabled){color:var(--gold);background:#e7b65f1a;border-color:#e7b65f57;transform:translateY(-1px)}.history-controls button:disabled{color:#fffaf03d;cursor:default;background:#ffffff06}.replay-readout{text-align:center;min-width:0}.replay-readout small,.replay-readout strong{display:block}.replay-readout small{color:var(--gold);letter-spacing:.17em;font-size:.55rem;font-weight:1000}.replay-readout small i{background:#fffaf061;border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.replay-readout small i.live{background:#79c88a;animation:1.5s infinite breathe;box-shadow:0 0 0 4px #79c88a1a}.replay-readout strong{color:#fffaf0e0;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:.72rem;overflow:hidden}.show-result-button{min-height:38px;color:var(--sage-dark);cursor:pointer;background:#5f785e1c;border:0;border-radius:12px;margin-top:6px;padding:0 14px;font-size:.72rem;font-weight:900}.result-backdrop,.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#24332e52;place-items:center;padding:20px;animation:.22s both fadeIn;display:grid;position:fixed;inset:0}.result-card{text-align:center;width:min(100%,480px);max-height:calc(100svh - 30px);color:var(--paper);background:radial-gradient(circle at 50% 0,#e7b65f24,#0000 36%),linear-gradient(150deg,#31463b,#1f3029 68%);border:1px solid #ffffff14;border-radius:34px;padding:0 18px 18px;animation:.33s both resultIn;overflow-y:auto;box-shadow:0 30px 90px #14221c61}.result-hero{padding:28px 12px 18px;position:relative;overflow:hidden}.result-rings{pointer-events:none;width:180px;height:100px;position:absolute;top:7px;left:50%;transform:translate(-50%)}.result-rings i{border:1px solid #e7b65f21;border-radius:50%;position:absolute;inset:0;transform:rotate(-8deg)}.result-rings i:last-child{border-color:#fffaf017;inset:12px 25px;transform:rotate(12deg)}.result-piece{z-index:1;color:#ffffffc7;background:var(--blue);border:3px solid #fffaf02e;border-radius:50%;place-items:center;width:76px;height:76px;margin:0 auto 17px;font-size:1.4rem;display:grid;position:relative;box-shadow:0 18px 36px #0917124d,inset 0 -8px #00000024}.result-piece.p2{background:var(--coral);border-radius:22px}.result-piece.draw{background:var(--sage)}.result-kicker{color:var(--gold);letter-spacing:.22em;font-size:.63rem;font-weight:1000;display:block}.result-card h1{color:var(--paper);margin:6px 0 4px;font-size:clamp(2rem,9vw,2.7rem)}.result-hero>p{color:#fffaf099;margin:0;font-size:.82rem}.result-card .primary-button{width:100%}.postgame-level-picker{text-align:left;background:#ffffff0b;border:1px solid #ffffff12;border-radius:22px;padding:14px}.postgame-level-picker>div:first-child{padding:0 2px 10px}.postgame-level-picker>div:first-child strong,.postgame-level-picker>div:first-child small{display:block}.postgame-level-picker>div:first-child strong{font-size:.86rem}.postgame-level-picker>div:first-child small{color:#fffaf080;margin-top:1px;font-size:.68rem}.postgame-levels{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.postgame-levels button{color:#fffaf0b8;cursor:pointer;background:#ffffff0b;border:1px solid #ffffff12;border-radius:15px;min-width:0;min-height:58px;padding:9px 6px;transition:all .15s}.postgame-levels button:hover,.postgame-levels button.selected{color:var(--paper);background:#e7b65f1a;border-color:#e7b65f6b;transform:translateY(-1px)}.postgame-levels button>strong{text-overflow:ellipsis;font-size:.68rem;display:block;overflow:hidden}.level-pips{align-items:end;gap:3px;height:12px;margin-bottom:4px;display:inline-flex}.level-pips i{background:#fffaf024;border-radius:3px;width:4px}.level-pips i:first-child{height:4px}.level-pips i:nth-child(2){height:8px}.level-pips i:nth-child(3){height:12px}.level-pips i.filled{background:var(--gold)}.result-primary-action{margin-top:10px}.result-primary-action .primary-button{color:#24332e;background:var(--gold);min-height:58px;box-shadow:0 12px 26px #12211b38,inset 0 -3px #714a162b}.result-primary-action .primary-button:hover{color:#24332e;background:#efc77c}.result-navigation{grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px;display:grid}.result-navigation>button{color:#fffaf0b3;cursor:pointer;background:#ffffff09;border:1px solid #ffffff0f;border-radius:16px;align-content:center;place-items:center;gap:5px;min-width:0;min-height:72px;padding:9px 4px;transition:all .15s;display:grid}.result-navigation>button:hover{color:var(--paper);background:#ffffff13;border-color:#ffffff24;transform:translateY(-1px)}.result-navigation>button>strong{font-size:.65rem}.result-nav-glyph{width:25px;height:25px;display:block;position:relative}.result-nav-glyph.board{border:1px solid;border-radius:6px}.result-nav-glyph.board i{background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute}.result-nav-glyph.board i:first-child{top:4px;left:4px}.result-nav-glyph.board i:nth-child(2){top:4px;right:4px}.result-nav-glyph.board i:nth-child(3){bottom:4px;left:4px}.result-nav-glyph.board i:nth-child(4){bottom:4px;right:4px}.result-nav-glyph.modes i{border:2px solid;border-radius:50%;width:9px;height:9px;position:absolute}.result-nav-glyph.modes i:first-child{top:8px;left:1px}.result-nav-glyph.modes i:nth-child(2){top:2px;right:1px}.result-nav-glyph.modes i:nth-child(3){border-radius:3px;bottom:1px;right:1px}.result-nav-glyph.home:before,.result-nav-glyph.home:after{content:"";position:absolute}.result-nav-glyph.home:before{border:2px solid;border-top:0;border-radius:3px;width:17px;height:17px;top:6px;left:4px}.result-nav-glyph.home:after{border-top:2px solid;border-left:2px solid;width:13px;height:13px;top:2px;left:6px;transform:rotate(45deg)}.modal-backdrop{align-items:end}.menu-sheet{width:min(100%,520px);padding:12px 18px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(145deg, #ffffff73, transparent 42%), var(--paper);box-shadow:var(--shadow);border:1px solid #334d3e14;border-radius:28px 28px 0 0;animation:.22s both sheetIn}.sheet-handle{background:#334d3e2e;border-radius:4px;width:42px;height:4px;margin:0 auto 16px}.menu-sheet h2{font-family:var(--font-playfair), serif;margin:0 6px 12px;font-size:1.7rem}.menu-sheet button{cursor:pointer;background:#5f785e0b;border:0;border-radius:14px;justify-content:space-between;align-items:center;width:100%;min-height:52px;margin:3px 0;padding:0 12px;font-weight:800;transition:all .14s;display:flex}.menu-sheet button:hover{background:#5f785e1a;transform:translate(2px)}.menu-sheet button span{color:var(--ink-soft)}.menu-sheet button.danger{color:var(--coral-dark);background:#d66f5f0f}.mode-card{animation:.38s both cardIn}.mode-card:nth-child(2){animation-delay:55ms}.mode-card:nth-child(3){animation-delay:.11s}@keyframes breathe{50%{opacity:.65;transform:scale(.88)}}@keyframes rpsCountdown{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes settle{0%{opacity:0;transform:scale(1.14)translateY(-8px)}}@keyframes lastGlow{45%{filter:brightness(1.22)}}@keyframes streak{0%{opacity:0;stroke-dasharray:0 150}to{opacity:1;stroke-dasharray:150 0}}@keyframes fadeIn{0%{opacity:0}}@keyframes resultIn{0%{opacity:0;transform:translateY(20px)scale(.96)}}@keyframes sheetIn{0%{transform:translateY(100%)}}@keyframes cardIn{0%{opacity:0;transform:translateY(12px)}}@keyframes commandPulse{0%{opacity:.65;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}@media (width>=760px) and (height>=720px){.match-layout{grid-template-columns:140px 1fr 140px;grid-template-areas:"p1 board p2";align-items:center;width:min(100% - 30px,920px);margin-top:3vh}.player-badge{text-align:center;flex-direction:column;justify-content:center;align-self:center;min-height:110px}.turn-pip{margin:6px 0 0}}@media (width<=620px){.content-panel{margin-top:22px}.content-panel.narrow{border-radius:30px;width:min(100% - 20px,560px);padding:22px 16px}.welcome{padding-inline:10px}.welcome-card{border-radius:34px;padding:28px 18px 30px}.welcome-card .logo{margin-top:20px}.mode-card{border-radius:23px;grid-template-columns:54px 1fr 30px;gap:12px;padding-inline:12px}.mode-glyph,.level-glyph{border-radius:18px;width:54px;height:54px}.bot-level-grid .mode-card{min-height:116px}.rules-grid{grid-template-columns:1fr}.rules-grid article{grid-template-columns:42px 1fr;column-gap:12px;min-height:auto;padding:20px;display:grid}.rules-grid h2{margin:3px 0 4px}.rules-grid p{grid-column:2}}@media (height<=740px){.game-topbar{height:54px;margin-top:4px}.player-badge{min-height:48px;padding-block:5px}.mini-piece{width:31px;height:31px}.turn-command{min-height:50px;margin-bottom:6px;padding-block:5px}.command-piece{width:34px;height:34px}.board-frame{width:min(70vh,82vw,430px)}.history-controls{min-height:54px;margin-top:10px}.history-controls button{width:42px;height:42px}.history-controls{grid-template-columns:42px 1fr 42px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}