@import "https://fonts.googleapis.com/css2?family=Neucha&family=Manrope:wght@400;600;700;800&display=swap";:root{--paper:#f5f3ec;--card:#fdfcf8;--ink:#33302b;--ink-soft:#4a4540;--muted:#6f695f;--line:#cdc7ba;--blue:#3d6fa8;--blue-dark:#2c5480;--red:#bf5240;--red-dark:#96412f;--gold:#b3871c;--sans:"Manrope", "Segoe UI", sans-serif;--hand:"Neucha", "Segoe Print", cursive;--sketch-radius:255px 15px 225px 15px / 15px 225px 15px 255px;--sketch-radius-alt:15px 225px 15px 255px / 255px 15px 225px 15px;--sketch-shadow:3px 4px 0 #33302b1f;font-family:var(--sans);color:var(--ink);background-color:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background-image:radial-gradient(#33302b12 1px,#0000 1.4px);background-size:24px 24px}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button,input{font-family:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.landing{flex-direction:column;max-width:1240px;min-height:100svh;margin:0 auto;padding:28px 46px 38px;display:flex}.brand{color:var(--ink);align-items:center;gap:13px;display:flex}.brand>div:last-child{flex-direction:column;display:flex}.brand strong{font:400 30px/1 var(--hand);letter-spacing:.01em}.brand small{color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-top:4px;font-size:11px}.brand.compact strong{font-size:26px}.brand-mark{border:2.5px solid var(--ink);border-radius:49% 51% 52% 48%/47% 52% 48% 53%;width:42px;height:42px;position:relative;transform:rotate(-4deg)}.brand-mark:before,.brand-mark:after{content:"";background:var(--ink);border-radius:2px;width:2.5px;height:15px;position:absolute;top:-11px}.brand-mark:before{left:9px;transform:rotate(-26deg)}.brand-mark:after{right:9px;transform:rotate(26deg)}.brand-mark span{background:var(--blue);border-radius:48% 52% 50% 50%;width:10px;height:10px;position:absolute;top:14px;left:13px}.hero-section{flex:1;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);align-items:center;gap:clamp(50px,9vw,130px);padding:70px 20px 40px;display:grid}.eyebrow{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-weight:800;display:inline-flex}.hero-copy h1{font:400 clamp(52px, 6.4vw, 84px)/1 var(--hand);letter-spacing:0;color:var(--ink);margin:16px 0 22px}.hero-copy h1 em{color:var(--red);text-underline-offset:10px;font-style:normal;-webkit-text-decoration:underline wavy #bf52408c;text-decoration:underline wavy #bf52408c;text-decoration-thickness:3px}.hero-copy>p{max-width:620px;color:var(--muted);font-size:18px;line-height:1.65}.feature-row{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;gap:34px;margin-top:38px;font-size:13px;display:flex}.feature-row span{align-items:baseline;gap:8px;display:flex}.feature-row b{color:var(--ink);font:400 30px/1 var(--hand)}.room-card{background:var(--card);border:2px solid var(--ink);border-radius:var(--sketch-radius);box-shadow:var(--sketch-shadow);padding:16px 30px 27px}.mode-tabs{grid-template-columns:1fr 1fr;gap:6px;margin:4px -12px 22px;display:grid}.mode-tabs button{border-radius:var(--sketch-radius-alt);color:var(--muted);cursor:pointer;background:0 0;border:2px dashed #0000;padding:10px;font-weight:750}.mode-tabs button.active{border-color:var(--ink);color:var(--ink);background:#33302b0a}.room-card h2{font:400 32px/1.1 var(--hand);color:var(--ink);margin:0 0 22px}.room-card label{color:var(--ink);margin-bottom:17px;font-size:13px;font-weight:750;display:block}.room-card input{border:2px solid var(--line);width:100%;color:var(--ink);font:inherit;background:#fff;border-radius:12px 14px 13px 15px/15px 12px 14px 13px;outline:0;margin-top:7px;padding:12px 14px}.room-card input:focus{border-color:var(--ink)}.mode-pick{border:0;gap:8px;margin:0 0 17px;padding:0;display:grid}.mode-pick legend{color:var(--ink);margin-bottom:8px;padding:0;font-size:13px;font-weight:750}.mode-pick button{text-align:left;border:2px dashed var(--line);color:var(--muted);cursor:pointer;background:0 0;border-radius:14px 16px 15px 17px/17px 15px 16px 14px;padding:10px 12px}.mode-pick button.active{border:2px solid var(--ink);color:var(--ink);background:#33302b0a}.mode-pick b{font:400 17px var(--hand);color:var(--ink);display:block}.mode-pick small{margin-top:2px;font-size:11px;line-height:1.45;display:block}.primary-button{border:2px solid var(--ink);border-radius:var(--sketch-radius);background:var(--ink);width:100%;color:var(--card);font:750 15px/1 var(--sans);cursor:pointer;box-shadow:var(--sketch-shadow);padding:14px 17px;transition:transform .15s,box-shadow .15s}.primary-button:hover:not(:disabled){transform:translate(-1px,-2px)rotate(-.4deg);box-shadow:5px 6px #33302b29}.primary-button:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 2px #33302b29}.primary-button:disabled{opacity:.45;cursor:not-allowed}.privacy-note{color:var(--muted);text-align:center;margin:13px 0 0;font-size:11px}.form-error,.panel-error{color:var(--red-dark);margin:-6px 0 12px;font-size:12px;font-weight:600}.leaderboard{background:var(--card);border:2px solid var(--ink);border-radius:var(--sketch-radius-alt);width:min(680px,100%);box-shadow:var(--sketch-shadow);margin:10px auto 26px;padding:20px 26px 16px}.leaderboard h2{font:400 28px var(--hand);color:var(--ink);margin:0 0 12px}.leaderboard table{border-collapse:collapse;width:100%;color:var(--ink);font-size:13px}.leaderboard th{text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid var(--ink);padding:4px 8px;font-size:10px}.leaderboard td{border-bottom:2px dashed var(--line);padding:7px 8px}.leaderboard tbody tr:last-child td{border-bottom:0}.leaderboard .leader-name{font-weight:750}.leaderboard .leader-points{font:400 19px var(--hand)}.leaderboard th:nth-child(n+3),.leaderboard td:nth-child(n+3){text-align:right}.leaderboard-empty{color:var(--muted);margin:4px 0 8px;font-size:13px}.leaderboard-note{color:var(--muted);margin:10px 0 0;font-size:11px}.rules-link{color:var(--ink);font:400 19px var(--hand);cursor:pointer;background:0 0;border:0;align-self:flex-start;padding:8px 0}.rules-link span{color:var(--red);margin-left:7px}.rules-link:hover{text-underline-offset:6px;-webkit-text-decoration:underline wavy #33302b66;text-decoration:underline wavy #33302b66}.game-page{flex-direction:column;min-height:100svh;display:flex}.game-header{border-bottom:2px solid var(--ink);background:var(--card);z-index:5;grid-template-columns:1fr auto 1fr auto auto;align-items:center;gap:18px;height:64px;padding:0 30px;display:grid;position:relative}.surrender-button{border:2px dashed var(--red);border-radius:var(--sketch-radius-alt);color:var(--red-dark);cursor:pointer;background:0 0;justify-self:end;padding:7px 12px;font-size:12px;font-weight:750}.surrender-button:hover{background:#bf524012;border-style:solid}.game-header .brand-mark{width:34px;height:34px;transform:scale(.82)rotate(-4deg)}.room-title{color:var(--ink);align-items:baseline;gap:8px;display:flex}.room-title small{color:var(--muted)}.room-title b{font:400 19px var(--hand)}.connection{color:var(--muted);justify-self:end;align-items:center;gap:7px;font-size:12px;display:flex}.connection i{border:1.5px solid var(--ink);background:0 0;border-radius:47% 53% 50% 50%;width:8px;height:8px}.connection.online i{background:#4e8a63;border-color:#3c6b4c}.icon-button{border:2px solid var(--ink);width:32px;height:32px;color:var(--ink);font:400 17px var(--hand);cursor:pointer;background:0 0;border-radius:49% 51% 52% 48%/47% 52% 48% 53%}.icon-button:hover{background:#33302b0f}.scorebar{border-bottom:2px dashed var(--line);grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) 90px;align-self:center;width:calc(100% - 40px);max-width:920px;min-height:72px;display:grid}.player-score,.empty-player{border-right:2px dashed var(--line);align-items:center;gap:11px;padding:9px 24px;display:flex}.player-score>div{flex-direction:column;flex:1;min-width:0;display:flex}.player-score small{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-size:10px}.player-score b{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.player-score>strong{color:var(--ink);font:400 34px/1 var(--hand)}.player-score.own{background:#fff9}.player-ball{border:2px solid var(--blue-dark);background:var(--blue);border-radius:48% 52% 50% 50%;width:17px;height:17px;display:block}.red .player-ball{background:var(--red);border-color:var(--red-dark)}.empty-player{color:var(--muted);font-size:13px}.round-counter{color:var(--muted);flex-direction:column;justify-content:center;align-items:center;display:flex}.round-counter small{text-transform:uppercase;letter-spacing:.08em;font-size:10px}.round-counter b{color:var(--ink);font:400 27px/1.1 var(--hand)}.round-counter span{color:var(--muted);font-size:16px}.status-line{width:calc(100% - 50px);max-width:1180px;min-height:48px;color:var(--muted);justify-content:space-between;align-self:center;align-items:center;font-size:12px;display:flex}.phase-dot{border:1.5px solid var(--ink);background:var(--gold);border-radius:47% 53% 50% 50%;width:8px;height:8px;margin-right:8px;display:inline-block}.phase-result,.phase-gameOver{background:#4e8a63}.bonus{border:1.5px solid var(--gold);color:var(--gold);border-radius:10px 12px 11px 13px/13px 11px 12px 10px;padding:2px 7px;font-weight:800}.game-layout{grid-template-columns:minmax(560px,1fr) 330px;align-items:start;gap:28px;width:min(1220px,100% - 34px);margin:0 auto 30px;display:grid}.board-column{min-width:0}.board-shell{padding:6px}.game-board{width:100%;height:auto;max-height:calc(100svh - 195px);display:block}.board-paper{fill:var(--card);stroke:var(--ink);stroke-width:2.5px}.board-paper-retrace{fill:none;stroke:var(--ink);stroke-width:1.4px;opacity:.3}.channel-beds path{fill:none;stroke:#e9e5da;stroke-width:14px;stroke-linecap:round}.channel-lines path{fill:none;stroke:var(--ink-soft);stroke-width:2px;stroke-linecap:round}.channel-lines.retrace path{opacity:.38;stroke-width:1.5px}.route-trace{fill:none;stroke-width:3px;stroke-dasharray:1 10;stroke-linecap:round;opacity:.85}.trace-blue{stroke:var(--blue)}.trace-red{stroke:var(--red)}.entry path{fill:var(--card);stroke:var(--ink);stroke-width:2.2px}.entry text{font:13px var(--hand);fill:var(--ink);letter-spacing:.22em}.finish rect{fill:var(--card);stroke:var(--ink);stroke-width:2.2px}.finish text{fill:var(--ink);font:27px var(--hand)}.finish rect.finish-hatch{fill:url(#target-hatch);stroke:none}.finish .target-star{fill:var(--gold);font:17px var(--hand);letter-spacing:.06em}.node-face{fill:var(--card);stroke:var(--ink);stroke-width:2.4px}.node-face-retrace{fill:none;stroke:var(--ink);stroke-width:1.3px;opacity:.28;pointer-events:none}.node-number{fill:var(--ink);font:21px var(--hand);pointer-events:none}.board-node{cursor:pointer;outline:none}.board-node:hover .node-face,.board-node:focus .node-face{stroke-width:3.4px;fill:#fffef6}.board-node.disabled{cursor:default}.board-node.disabled:hover .node-face{stroke-width:2.4px;fill:var(--card)}.node-piece circle{fill:var(--card);stroke:var(--blue);stroke-width:2.4px}.node-piece text{fill:var(--blue-dark);font:17px var(--hand);pointer-events:none}.node-piece.enemy circle{stroke:var(--red)}.node-piece.enemy text{fill:var(--red-dark)}.node-number.small{opacity:.65;font-size:12px}.node-insert{fill:var(--ink-soft);font:22px var(--hand);pointer-events:none}.node-insert.insert-blue{fill:var(--blue-dark)}.node-insert.insert-red{fill:var(--red-dark)}.finish.owned-blue rect:first-of-type{stroke:var(--blue);stroke-width:3px}.finish.owned-red rect:first-of-type{stroke:var(--red);stroke-width:3px}.finish.owned-blue .finish-owner-mark{fill:var(--blue);stroke:var(--blue-dark);stroke-width:1.5px}.finish.owned-red .finish-owner-mark{fill:var(--red);stroke:var(--red-dark);stroke-width:1.5px}.trace-steel{stroke:var(--ink-soft)}.ball{filter:drop-shadow(1.5px 2.5px 1.5px #33302b73)}.ball circle{fill:var(--blue);stroke:var(--blue-dark);stroke-width:2px}.ball-red circle{fill:var(--red);stroke:var(--red-dark)}.ball-steel circle{fill:#55524c;stroke:var(--ink)}.ball .ball-glint{fill:#fff;stroke:none;opacity:.85}.control-panel{background:var(--card);border:2px solid var(--ink);border-radius:var(--sketch-radius-alt);box-shadow:var(--sketch-shadow);padding:22px}.panel-heading{flex-direction:column;margin-bottom:17px;display:flex}.panel-heading span{color:var(--ink);font:400 26px var(--hand)}.panel-heading small{color:var(--muted);margin-top:2px}.tool-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.tool-button{border:2px solid var(--line);background:var(--card);min-width:0;color:var(--ink);text-align:left;cursor:pointer;border-radius:14px 16px 15px 17px/17px 15px 16px 14px;align-items:center;gap:8px;padding:10px;transition:border-color .12s,transform .12s;display:flex}.tool-button:hover{border-color:var(--ink-soft)}.tool-button.active{border-color:var(--ink);background:#33302b0d;transform:rotate(-.6deg);box-shadow:2px 3px #33302b1f}.tool-button>span{width:31px;height:31px;color:var(--blue-dark);border:2px solid var(--blue);font:18px var(--hand);background:0 0;border-radius:48% 52% 50% 50%/50% 48% 52% 50%;flex:none;place-items:center;display:grid}.tool-button:nth-child(3)>span{color:var(--red-dark);border-color:var(--red)}.tool-button:nth-child(4)>span{color:#3c6b4c;border-color:#4e8a63}.tool-button div{flex-direction:column;min-width:0;display:flex}.tool-button b{white-space:nowrap;font-size:11px}.tool-button small{color:var(--muted);margin-top:2px;font-size:10px}.tool-grid.inserts{grid-template-columns:1fr;margin-bottom:14px}.turn-banner{border:2px dashed var(--line);border-radius:var(--sketch-radius-alt);color:var(--muted);margin-bottom:14px;padding:10px 14px;font-size:13px;line-height:1.4}.turn-banner.own-turn{border:2px solid var(--ink);color:var(--ink);background:#33302b0a;font-weight:700}.moves-left{color:var(--muted);justify-content:space-between;gap:10px;margin-bottom:14px;font-size:12px;display:flex}.moves-left span{align-items:center;gap:7px;display:flex}.moves-left .player-ball{width:13px;height:13px}.own-finishes{margin-top:8px}.mode-note{color:var(--muted);margin:0 0 6px}.mode-note b{color:var(--ink);font:400 17px var(--hand)}.erase-button{border:2px dashed var(--line);border-radius:var(--sketch-radius-alt);width:100%;color:var(--muted);cursor:pointer;background:0 0;margin:9px 0 16px;padding:8px}.erase-button.active{color:var(--ink);border-color:var(--ink);background:#33302b0d}.hint-card{border-left:3px solid var(--line);color:var(--muted);margin-bottom:17px;padding:4px 0 4px 14px;font-size:11px;line-height:1.5}.hint-card b{color:var(--ink);font:400 15px var(--hand)}.hint-card p{margin:4px 0 0}.ready-list{color:var(--muted);justify-content:center;gap:16px;margin-top:12px;font-size:10px;display:flex}.ready-list span{align-items:center;gap:5px;display:flex}.ready-list i{border:1.5px solid var(--line);background:0 0;border-radius:47% 53% 50% 50%;width:7px;height:7px}.ready-list .ready i{background:#4e8a63;border-color:#3c6b4c}.result-kicker{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:800}.result-panel h2{color:var(--ink);font:400 36px var(--hand);margin:5px 0 16px}.round-results{border:2px solid var(--ink);border-radius:14px 17px 15px 18px/18px 15px 17px 14px;overflow:hidden}.result-row{background:var(--card);align-items:center;gap:9px;padding:12px;display:flex}.result-row+.result-row{border-top:2px dashed var(--line)}.result-row div{flex-direction:column;flex:1;display:flex}.result-row b{color:var(--ink);font-size:13px}.result-row small{color:var(--muted);font-size:10px}.result-row strong{color:var(--ink);font:400 26px var(--hand)}.result-note{color:var(--muted);gap:10px;padding:14px 4px;font-size:11px;line-height:1.5;display:flex}.result-note>span{color:var(--gold);font-size:20px}.result-note p{margin:0}.result-note b{color:var(--ink)}.waiting-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:60px 20px;display:flex}.waiting-screen h1{color:var(--ink);font:400 44px var(--hand);margin:25px 0 10px}.waiting-screen>p{color:var(--muted);max-width:480px}.loader-track{width:160px;height:18px;position:relative;transform:rotate(-6deg)}.loader-track:after{content:"";border-bottom:2.5px solid var(--ink);border-radius:50% 40% 45% 55%/4px 5px;position:absolute;bottom:0;left:0;right:0}.loader-track span{border:2px solid var(--blue-dark);background:var(--blue);border-radius:48% 52% 50% 50%;width:16px;height:16px;animation:1.8s ease-in-out infinite alternate roll;position:absolute;top:-3px}@keyframes roll{0%{left:0;transform:rotate(0)}to{left:142px;transform:rotate(540deg)}}.room-code{border:2px solid var(--ink);border-radius:var(--sketch-radius);background:var(--card);color:var(--ink);font:400 19px var(--hand);box-shadow:var(--sketch-shadow);align-items:center;gap:18px;margin-top:27px;padding:11px 13px 11px 20px;display:flex}.room-code button{border:2px solid var(--line);color:var(--ink);font:750 12px var(--sans);cursor:pointer;background:0 0;border-radius:10px 12px 11px 13px/13px 11px 12px 10px;padding:7px 10px}.room-code button:hover{border-color:var(--ink)}.text-button{color:var(--muted);cursor:pointer;-webkit-text-decoration:underline dashed var(--line);text-decoration:underline dashed var(--line);text-underline-offset:4px;background:0 0;border:0;margin-top:24px}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#33302b73;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.rules-modal{border:2px solid var(--ink);border-radius:var(--sketch-radius);background:var(--card);width:min(560px,100%);max-height:calc(100svh - 40px);padding:34px;position:relative;overflow:auto;box-shadow:6px 8px #33302b33}.rules-modal h2{color:var(--ink);font:400 36px var(--hand);margin:6px 0 18px}.rules-modal h3{color:var(--ink);font:400 22px var(--hand);margin:18px 0 8px}.rules-modal ol{color:var(--muted);margin:0;padding-left:22px;font-size:14px;line-height:1.55}.rules-modal li{padding:5px 0 8px 6px}.rules-modal li::marker{color:var(--red);font:400 18px var(--hand)}.rules-modal b{color:var(--ink)}.rules-footnote{border-left:3px solid var(--gold);color:var(--muted);margin:16px 0;padding:4px 0 4px 12px;font-size:12px}.modal-close{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:25px;position:absolute;top:16px;right:16px}.modal-close:hover{color:var(--ink)}@media (width<=900px){.landing{padding:22px}.hero-section{grid-template-columns:1fr;gap:42px;padding:55px 0}.hero-copy{text-align:center}.hero-copy>p{margin:auto}.feature-row{justify-content:center}.room-card{width:min(430px,100%);margin:auto}.game-layout{grid-template-columns:1fr}.game-board{max-height:none}.control-panel{order:-1}.game-header{grid-template-columns:1fr auto auto;padding:0 15px}.room-title{display:none}}@media (width<=560px){.landing{padding:18px}.hero-section{padding-top:45px}.hero-copy h1{font-size:46px}.hero-copy>p{font-size:15px}.feature-row{flex-wrap:wrap;gap:14px}.room-card{padding-inline:20px}.game-header .brand strong{font-size:20px}.connection{font-size:0}.scorebar{grid-template-columns:1fr 1fr 58px;width:100%}.player-score,.empty-player{padding:8px}.player-score>strong{font-size:26px}.player-score small{display:none}.status-line{width:calc(100% - 24px)}.game-layout{width:calc(100% - 16px)}.board-shell{padding:2px}.waiting-screen h1{font-size:33px}.rules-modal{padding:28px 21px}}