:root{color:#262522;background:#f4f1ea;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.45}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}.app-shell{width:min(1100px,100%);margin:0 auto;padding:24px}.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow{margin:0 0 4px;color:#8b5d16;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:6px;font-size:clamp(30px,5vw,48px);line-height:1.02}h2{margin-bottom:6px;font-size:21px}.subtitle,.muted{color:#716e67}.panel{border:1px solid #ded8cb;border-radius:16px;background:#fffc;box-shadow:0 8px 28px #3f311a0f}.lobby-panel{display:grid;grid-template-columns:1fr auto;gap:24px;padding:24px}.lobby-actions{display:flex;align-items:center;gap:10px}.join-row{display:flex;gap:8px}input{width:180px;border:1px solid #c9c1b3;border-radius:10px;padding:10px 12px;background:#fff}.button{border:0;border-radius:10px;padding:10px 14px;font-weight:750;transition:transform .12s ease,background .12s ease}@media(hover:hover)and (pointer:fine){.button:hover:not(:disabled){transform:translateY(-1px)}.cell:not(:disabled):hover{background:#fff5d6}}.button-primary{color:#fff;background:#282723}.button-secondary{color:#302f2a;background:#e6e1d7}.button-danger{color:#fff;background:#a23b31}.button-quiet{color:#67645c;background:transparent}.button-small{padding:8px 10px;font-size:13px}.feedback{grid-column:1 / -1;min-height:22px;margin:0;color:#9a3a2d}.connection-status{border-radius:999px;padding:7px 11px;color:#fff;background:#8b8a83;font-size:13px;font-weight:750;white-space:nowrap}.connection-status[data-kind=online]{background:#2d7c52}.connection-status[data-kind=waiting]{color:#5f4816;background:#f0d28b}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}.game-main{min-width:0}.game-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}.role-display{margin:0;font-weight:750}.status-message{min-height:28px;margin:14px 0 10px;color:#5b4b2e;font-weight:750}.scoreboard{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:12px;overflow:hidden}.score-item{padding:12px 10px;background:#fff;text-align:center}.score-item span{display:block;color:#77736b;font-size:12px}.score-item strong{display:block;margin-top:2px;font-size:17px}.board-wrap{position:relative;width:min(88vw,620px);margin:0 auto 14px}.board{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;aspect-ratio:1;padding:6px;border-radius:14px;background:#2b2a27}.cell{position:relative;min-width:0;border:0;border-radius:8px;background:#ece8df}.cell.cell-opponent{cursor:default}.cell.selected{outline:3px solid #c48416;outline-offset:-3px}.piece{position:absolute;inset:12%;display:grid;place-items:center;border:3px solid #292825;border-radius:50%;font-size:clamp(18px,5vw,38px);font-weight:900}.piece.piece-white{color:#292825!important;background-color:#faf9f5!important;border-color:#292825!important;filter:none;opacity:1}.piece.piece-black{color:#fff!important;background-color:#292825!important;border-color:#151412!important;filter:none;opacity:1}.controls-panel{padding:15px}.action-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.color-popover{position:absolute;z-index:2;display:flex;gap:7px;padding:6px;border:1px solid #c9c1b3;border-radius:999px;background:#fffdf8;box-shadow:0 8px 20px #3f311a33;transform:translate(-50%,8px)}.color-popover[data-placement=above]{transform:translate(-50%,calc(-100% - 8px))}.piece-choice{display:grid;width:40px;height:40px;place-items:center;border:2px solid #36342f;border-radius:50%;padding:0;font-size:23px;font-weight:850;line-height:1}.piece-choice-white{color:#272622;background:#faf9f5}.piece-choice-black{color:#fff;background:#292825}.cancel-choice{color:#67645c;background:#eeebe4;font-size:27px;font-weight:500}.draw-response{margin-top:14px;padding-top:14px;border-top:1px solid #e5dfd3;font-size:14px;font-weight:750}.draw-response .action-row{margin-top:8px}.result-panel{margin-top:14px;padding:20px}.result-panel h2{margin-bottom:2px}.help-panel{padding:20px}.help-panel ul{padding-left:20px;color:#5f5b53}.help-panel li+li{margin-top:10px}.sync-message{margin:20px 0 0;color:#2d7c52;font-size:13px;font-weight:700}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.app-shell{padding:16px}.app-header{display:block}.connection-status{display:inline-block;margin-top:10px}.lobby-panel,.game-layout{grid-template-columns:1fr}.lobby-actions{align-items:stretch;flex-direction:column}.join-row,.join-row input,.join-row .button,.lobby-actions>.button{width:100%}.game-layout{gap:14px}.help-panel{order:2}}.game-topline-compact{padding:2px 2px 0;border:0;border-radius:0;background:transparent;box-shadow:none}.room-line{margin:0;color:#77736b;font-size:13px;font-weight:650}.game-topline-compact .button-quiet{padding-right:2px;color:#77736b;font-weight:700}.status-message-primary{margin:8px 2px 10px;min-height:24px;color:#302f2a;font-size:16px;font-weight:800}@media(max-width:760px){.game-layout{gap:10px}.game-topline-compact{padding-top:0}.status-message-primary{margin-top:6px}}.app-header-minimal{display:flex;align-items:center;margin-bottom:14px}.verto-wordmark{margin:0;font-size:clamp(30px,8vw,42px);line-height:1;letter-spacing:-.035em}.connection-status-minimal[data-kind=online]{display:none!important}@media(max-width:760px){.app-header-minimal{display:flex;margin-bottom:12px}}.header-actions{display:flex;align-items:center;margin-left:auto}.help-button{width:34px;height:34px;display:grid;place-items:center;border:1px solid #c9c1b3;border-radius:50%;padding:0;color:#514e48;background:transparent;font-size:18px;font-weight:750;line-height:1}.help-overlay{position:fixed;inset:0;z-index:20}.help-backdrop{position:absolute;inset:0;width:100%;border:0;background:#2625223d}.help-sheet{position:absolute;top:64px;right:max(16px,calc((100vw - 1100px)/2 + 24px));width:min(340px,calc(100vw - 32px));padding:18px;border:1px solid #ded8cb;border-radius:16px;background:#fffdf8;box-shadow:0 14px 38px #3f311a29}.help-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.help-sheet-header h2{margin:0;font-size:18px}.close-help{width:30px;height:30px;display:grid;place-items:center;border:0;padding:0;color:#67645c;background:transparent;font-size:24px;line-height:1}.help-sheet ul{margin:0;padding-left:20px;color:#5f5b53;font-size:14px}.help-sheet li+li{margin-top:8px}.game-layout{grid-template-columns:minmax(0,1fr)}@media(max-width:760px){.help-sheet{top:58px;right:12px;width:calc(100vw - 24px)}}.lobby-panel-minimal{display:block;padding:18px;width:min(100%,460px);margin-inline:auto}.lobby-panel-minimal .lobby-actions{justify-content:center}.lobby-actions-stack{align-items:stretch;flex-direction:column;gap:10px}.lobby-actions-stack>.button{width:100%}.join-dialog{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:18px;background:#29272342}.join-dialog[hidden]{display:none}.join-dialog-card{width:min(100%,390px);padding:18px;border:1px solid #ded8cb;border-radius:16px;background:#fffdf8;box-shadow:0 18px 50px #3f311a2e}.join-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.join-dialog-header h2{margin:0}.join-dialog .join-row input{min-width:0;flex:1;width:auto}.join-dialog .join-row{align-items:stretch;flex-direction:column}.join-dialog .join-row input,.join-dialog .join-row .button{width:100%}.lobby-panel-minimal .feedback:empty{display:none}@media(max-width:760px){.lobby-panel-minimal{padding:14px}}.board{grid-template-rows:repeat(5,1fr)}.cell{width:100%;height:100%;aspect-ratio:1;overflow:hidden;appearance:none;-webkit-appearance:none}.cell-empty{background:#ece8df}.piece{font-size:0}.piece-choice-white,.piece-choice-black{position:relative;font-size:0}.piece-choice-white{background:#faf9f5;border:3px solid #292825}.piece-choice-black{background:#292825;border:3px solid #151412}.cancel-choice{font-size:27px}.tutorial-sheet{position:absolute;top:58px;right:12px;width:min(420px,calc(100vw - 24px));overflow:hidden;border:1px solid #ded8cb;border-radius:18px;background:#fffdf8;box-shadow:0 14px 38px #3f311a29}.tutorial-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 6px}.tutorial-header h2{margin:0;font-size:18px}.tutorial-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.tutorial-track::-webkit-scrollbar{display:none}.tutorial-slide{flex:0 0 100%;scroll-snap-align:start;padding:8px 16px 10px}.tutorial-visual{display:grid;place-items:center;min-height:220px;margin-bottom:8px}.tutorial-copy h3{margin:0 0 6px;font-size:18px}.tutorial-copy p{margin:0;color:#5f5b53;font-size:14px}.tutorial-dots{display:flex;justify-content:center;gap:7px;padding:10px 0 16px}.dot{width:6px;height:6px;appearance:none;-webkit-appearance:none;border:0;padding:0;border-radius:50%;background:#c9c1b3;cursor:pointer}.dot.is-active{background:#282723}.mini-board,.verto-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:4px;width:190px;aspect-ratio:1;padding:5px;border-radius:12px;background:#2b2a27}.mini-board>span,.verto-grid:before{border-radius:6px;background:#ece8df}.mini-board>span{position:relative}.mini-piece{position:relative!important;display:block;width:72%;aspect-ratio:1;margin:14%;border-radius:50%!important;z-index:2}.white{background:#faf9f5!important;border:2px solid #292825}.black{background:#292825!important;border:2px solid #151412}.pono-cell{position:relative;width:150px;aspect-ratio:1;border:5px solid #2b2a27;border-radius:14px;background:#ece8df}.pono-choice{position:absolute;left:50%;top:50%;display:flex;gap:12px;padding:8px 10px;border:1px solid #c9c1b3;border-radius:999px;background:#fffdf8;transform:translate(-50%,-50%);animation:ponoChoice 2.8s infinite}.choice,.placed-piece,.count-piece{display:block;border-radius:50%}.choice{width:36px;aspect-ratio:1}.white-choice{background:#faf9f5;border:3px solid #292825}.black-choice{background:#292825;border:3px solid #151412}.placed-piece{position:absolute;inset:24%;background:#faf9f5;border:3px solid #292825;opacity:0;animation:ponoPlace 2.8s infinite}@keyframes ponoChoice{0%,45%{opacity:1;transform:translate(-50%,-50%) scale(1)}55%,to{opacity:0;transform:translate(-50%,-50%) scale(.94)}}@keyframes ponoPlace{0%,50%{opacity:0;transform:scale(.8)}60%,90%{opacity:1;transform:scale(1)}to{opacity:0}}.verto-grid{background:linear-gradient(#ece8df 0 0) content-box;background-color:#2b2a27;overflow:hidden}.verto-grid:before{content:"";position:absolute;inset:5px;background:linear-gradient(to right,transparent calc(20% - 2px),#2b2a27 calc(20% - 2px),#2b2a27 calc(20% + 2px),transparent calc(20% + 2px)),linear-gradient(to right,transparent calc(40% - 2px),#2b2a27 calc(40% - 2px),#2b2a27 calc(40% + 2px),transparent calc(40% + 2px)),linear-gradient(to right,transparent calc(60% - 2px),#2b2a27 calc(60% - 2px),#2b2a27 calc(60% + 2px),transparent calc(60% + 2px)),linear-gradient(to right,transparent calc(80% - 2px),#2b2a27 calc(80% - 2px),#2b2a27 calc(80% + 2px),transparent calc(80% + 2px)),linear-gradient(to bottom,transparent calc(20% - 2px),#2b2a27 calc(20% - 2px),#2b2a27 calc(20% + 2px),transparent calc(20% + 2px)),linear-gradient(to bottom,transparent calc(40% - 2px),#2b2a27 calc(40% - 2px),#2b2a27 calc(40% + 2px),transparent calc(40% + 2px)),linear-gradient(to bottom,transparent calc(60% - 2px),#2b2a27 calc(60% - 2px),#2b2a27 calc(60% + 2px),transparent calc(60% + 2px)),linear-gradient(to bottom,transparent calc(80% - 2px),#2b2a27 calc(80% - 2px),#2b2a27 calc(80% + 2px),transparent calc(80% + 2px));border-radius:8px}.line-highlight{position:absolute;z-index:1;border:2px solid #c48416;border-radius:7px;pointer-events:none;opacity:.9}.row-highlight{left:5px;right:5px;top:calc(20% + 3px);height:calc(20% - 2px)}.col-highlight{top:5px;bottom:5px;left:calc(40% + 3px);width:calc(20% - 2px)}.vpiece{grid-row:var(--r);grid-column:var(--c);place-self:center;width:62%;aspect-ratio:1;border-radius:50%;z-index:2;animation:vertoFlip 3s infinite}.vpiece.selected{outline:3px solid #c48416;outline-offset:2px;animation:none}.vpiece[style*="--r:2"][style*="--c:3"]{background:#faf9f5!important;border:2px solid #292825}@keyframes vertoFlip{0%,35%{filter:invert(0)}50%,85%{filter:invert(1)}to{filter:invert(0)}}.majority-count{display:flex;gap:24px;align-items:center}.majority-count>div{display:flex;align-items:center;gap:8px;font-size:24px}.count-piece{width:46px;aspect-ratio:1}@media(prefers-reduced-motion:reduce){.pono-choice,.placed-piece,.vpiece{animation:none}}.objective-board>span,.majority-board>span{display:grid;place-items:center}.objective-board .mini-piece,.majority-board .mini-piece{width:68%;aspect-ratio:1;margin:0;border-radius:50%;box-sizing:border-box}.objective-board .path-cell{box-shadow:inset 0 0 0 3px #c48416}.verto-cross{position:relative;width:210px;height:210px}.cross-line{position:absolute;z-index:0;border-radius:14px;background:#c4841624;border:2px solid #c48416}.cross-row{left:8px;right:8px;top:50%;height:54px;transform:translateY(-50%)}.cross-col{top:8px;bottom:8px;left:50%;width:54px;transform:translate(-50%)}.cross-piece{position:absolute;z-index:2;width:52px;aspect-ratio:1;border-radius:50%;transition:background .35s ease,border-color .35s ease;animation:crossFlip 3s infinite}.cross-piece.top{top:2px;left:50%;transform:translate(-50%)}.cross-piece.bottom{bottom:2px;left:50%;transform:translate(-50%)}.cross-piece.left{left:2px;top:50%;transform:translateY(-50%)}.cross-piece.right{right:2px;top:50%;transform:translateY(-50%)}.cross-piece.center{left:50%;top:50%;transform:translate(-50%,-50%)}.cross-piece.selected{outline:3px solid #c48416;outline-offset:4px;animation:none}@keyframes crossFlip{0%,32%{background:var(--start-bg);border-color:var(--start-border)}48%,82%{background:var(--end-bg);border-color:var(--end-border)}to{background:var(--start-bg);border-color:var(--start-border)}}.cross-piece.white{--start-bg: #faf9f5;--start-border: #292825;--end-bg: #292825;--end-border: #151412;border:3px solid var(--start-border);background:var(--start-bg)}.cross-piece.black{--start-bg: #292825;--start-border: #151412;--end-bg: #faf9f5;--end-border: #292825;border:3px solid var(--start-border);background:var(--start-bg)}.cross-piece.center.white{background:#faf9f5!important;border:3px solid #292825!important}.majority-board{width:210px}.verto-cross{position:relative;width:210px;height:210px;border-radius:18px;background:#ece8df}.cross-line,.cross-piece.selected{display:none!important}.cross-piece{animation:vertoCrossFlip 3s infinite}.cross-piece.center{animation:none!important;background:#faf9f5!important;border:3px solid #292825!important}@keyframes vertoCrossFlip{0%,30%{background:var(--start-bg);border-color:var(--start-border);transform:var(--base-transform) scale(1)}42%{transform:var(--base-transform) scale(.82)}52%,82%{background:var(--end-bg);border-color:var(--end-border);transform:var(--base-transform) scale(1)}94%{transform:var(--base-transform) scale(.82)}to{background:var(--start-bg);border-color:var(--start-border);transform:var(--base-transform) scale(1)}}.cross-piece.top,.cross-piece.bottom{--base-transform: translateX(-50%)}.cross-piece.left,.cross-piece.right{--base-transform: translateY(-50%)}.cross-piece.center{--base-transform: translate(-50%, -50%)}.verto-board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:4px;width:210px;aspect-ratio:1;padding:5px;border-radius:12px;background:#2b2a27}.verto-cell{border-radius:6px;background:#ece8df}.verto-piece{position:absolute;width:30px;aspect-ratio:1;border-radius:50%;border:2px solid #292825;z-index:2;animation:vertoColorFlip 2.8s infinite}.verto-piece.white{--start-bg: #faf9f5;--start-border: #292825;--end-bg: #292825;--end-border: #151412;background:var(--start-bg);border-color:var(--start-border)}.verto-piece.black{--start-bg: #292825;--start-border: #151412;--end-bg: #faf9f5;--end-border: #292825;background:var(--start-bg);border-color:var(--start-border)}.verto-piece.center{animation:none;background:#faf9f5!important;border-color:#292825!important}.verto-piece.top{left:50%;top:calc(10% - 15px);transform:translate(-50%)}.verto-piece.left{left:calc(10% - 15px);top:50%;transform:translateY(-50%)}.verto-piece.center{left:50%;top:50%;transform:translate(-50%,-50%)}.verto-piece.right{right:calc(10% - 15px);top:50%;transform:translateY(-50%)}.verto-piece.bottom{left:50%;bottom:calc(10% - 15px);transform:translate(-50%)}@keyframes vertoColorFlip{0%,34%{background:var(--start-bg);border-color:var(--start-border)}50%,84%{background:var(--end-bg);border-color:var(--end-border)}to{background:var(--start-bg);border-color:var(--start-border)}}@media(prefers-reduced-motion:reduce){.verto-piece{animation:none}}.verto-board-3x3{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;width:210px;aspect-ratio:1;padding:6px;border-radius:12px;background:#2b2a27}.verto-board-3x3 .verto-cell{display:grid;place-items:center;border-radius:7px;background:#ece8df}.verto-board-3x3 .verto-piece{position:static;width:68%;aspect-ratio:1;border-radius:50%;box-sizing:border-box;transform:none}.verto-board-3x3 .verto-piece.verto-start-white{background:#faf9f5;border:3px solid #292825}.verto-board-3x3 .verto-piece.verto-start-black{background:#292825;border:3px solid #151412}.verto-board-3x3 .verto-piece.flip.verto-start-white{animation:flipWhiteBlack 2.8s infinite}.verto-board-3x3 .verto-piece.flip.verto-start-black{animation:flipBlackWhite 2.8s infinite}.verto-board-3x3 .verto-piece.center{animation:none!important;background:#faf9f5;border-color:#292825}@keyframes flipWhiteBlack{0%,34%{background:#faf9f5;border-color:#292825}50%,84%{background:#292825;border-color:#151412}to{background:#faf9f5;border-color:#292825}}@keyframes flipBlackWhite{0%,34%{background:#292825;border-color:#151412}50%,84%{background:#faf9f5;border-color:#292825}to{background:#292825;border-color:#151412}}@media(prefers-reduced-motion:reduce){.verto-board-3x3 .verto-piece.flip{animation:none}}.verto-board-3x3 .verto-piece.center{animation:centerTap 2.8s infinite!important;transform-origin:center}@keyframes centerTap{0%,24%{transform:scale(1)}30%{transform:scale(.88)}36%,to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.verto-board-3x3 .verto-piece.center{animation:none!important}}.mode-choice{display:flex;gap:8px;margin-bottom:12px}.mode-choice-button{flex:1;color:#67645c;background:#eeebe4}.mode-choice-button.is-selected{color:#fff;background:#282723}.local-lobby{display:flex}.local-lobby .button{width:100%}.local-controls{margin-top:8px}.cell:disabled{opacity:1;cursor:default}