:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf4e9;background:#0d1417;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 8% 5%,#213b2b 0,transparent 31%),radial-gradient(circle at 85% 12%,#182e2d 0,transparent 30%),#0d1417}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #a7f36b;outline-offset:3px}.shell{max-width:1140px;margin:auto;padding:28px 30px 25px}.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2b3935;padding-bottom:23px}.logo{display:flex;align-items:center;gap:13px;font-size:23px;font-weight:900;letter-spacing:-.7px}.logo-icon{display:inline-flex;align-items:center;background:#b0f275;color:#182d22;border-radius:13px;padding:10px 7px;font-size:11px;letter-spacing:-2px;transform:rotate(-8deg)}.logo-dot{color:#adf37c}.powered,.eyebrow,footer,.score-card>span,.panel-top,.panel-bottom,.tip,.shortcut{font-size:10px;letter-spacing:1.4px;font-weight:800}.powered{background:#25342c;border:1px solid #405644;border-radius:999px;padding:10px 14px;color:#b8eaa4}.heading{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;padding:37px 0 31px}.eyebrow{color:#a6ee7b}.heading h1{font-size:clamp(39px,5vw,62px);letter-spacing:-2.5px;line-height:1.05;margin:14px 0 15px;font-weight:900}.heading h1 em{font-style:normal;color:#aaf27c}.heading p{font-size:14px;color:#adc1b4;line-height:1.65;max-width:480px;margin:0}.scores{display:flex;gap:11px;padding-bottom:3px}.score-card{background:#1d2a27;border:1px solid #3a4e43;border-radius:16px;padding:17px 22px;min-width:122px;display:flex;flex-direction:column;gap:9px}.score-card>span{color:#a0b4a5}.score-card strong{font-size:29px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}.score-card:last-child strong{color:#b5f587}.game-layout{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(240px,1fr);gap:18px;align-items:stretch}.game-panel,.sidebar{border:1px solid #30433b;background:#15221e;border-radius:18px;overflow:hidden}.panel-top,.panel-bottom{height:44px;display:flex;align-items:center;gap:8px;padding:0 20px;color:#a9ceac}.panel-top-right,.panel-bottom>span:last-child{margin-left:auto;color:#739589}.live-dot{height:8px;width:8px;border-radius:50%;background:#b5f587;box-shadow:0 0 10px #b5f587}.board-wrap{position:relative;padding:12px;background:#101a17}canvas{width:100%;display:block;aspect-ratio:6/5;touch-action:none;border-radius:8px;background:#162620}.overlay{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;background:rgba(11,20,18,.69);backdrop-filter:blur(4px);border-radius:8px;text-align:center;padding:22px}.overlay.hidden{display:none}.overlay-content{max-width:280px}.overlay-icon{font-size:35px;color:#b8f986}.overlay h2{font-size:30px;letter-spacing:-1px;margin:10px 0 7px}.overlay p{color:#c0ccc4;font-size:13px;line-height:1.6;margin:0 0 22px}.apple-dot{width:9px;height:9px;display:inline-block;border-radius:50%;background:#f78473;margin-right:3px}.sidebar{padding:28px 25px;display:flex;flex-direction:column}.sidebar h2{font-size:18px;margin:0 0 9px}.sidebar p{font-size:13px;line-height:1.65;margin:0;color:#9bb5a7}.dpad{width:150px;display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:6px;margin:18px auto 13px}.dpad-btn{border:1px solid #455d4b;background:#273a2e;color:#c8fbb7;border-radius:10px;font-size:25px;line-height:1;transition:background .1s,transform .1s}.dpad-btn:hover{background:#3e6340}.dpad-btn:active{transform:scale(.93)}.up{grid-column:2;grid-row:1}.left{grid-column:1;grid-row:2}.down{grid-column:2;grid-row:2}.right{grid-column:3;grid-row:2}.tip{text-align:center;font-size:10px!important;color:#688777!important;letter-spacing:0!important}.rule{height:1px;background:#33433a;margin:24px 0}.sidebar label{display:block;font-size:15px;font-weight:700;margin-bottom:11px}.sidebar select{appearance:none;width:100%;border:1px solid #4d6654;color:#eaf4e9;background:#27382e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%23b4d7ba' stroke-width='2' d='m1 1 5 5 5-5'/%3E%3C/svg%3E") right 17px center/12px no-repeat;padding:12px 15px;border-radius:9px}.sidebar-buttons{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:25px}.button{border-radius:11px;padding:14px 17px;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid transparent;transition:filter .15s,transform .1s}.button:hover{filter:brightness(1.1)}.button:active{transform:translateY(1px)}.button:disabled{opacity:.45;cursor:default}.button-primary{background:#b1f077;color:#19291e}.button-secondary{background:#293d31;border-color:#4a624f;color:#e5f6e3}.button-ghost{background:transparent;color:#a6bcae}.shortcut{font-size:9px;background:#203029;color:#9ab7a1;padding:4px 6px;border:1px solid #4b5b4c;border-radius:4px}footer{display:flex;justify-content:space-between;gap:15px;color:#5d7668;font-size:9px;padding-top:23px}footer span:last-child{color:#87a887}@media(max-width:810px){.shell{padding:18px 16px}.heading{align-items:flex-start;flex-direction:column}.scores{width:100%}.score-card{flex:1}.game-layout{grid-template-columns:1fr}.sidebar{gap:0}.sidebar-buttons{padding-top:20px}.sidebar .rule{margin:18px 0}footer{flex-wrap:wrap;line-height:1.8}.heading h1{font-size:44px}}@media(max-width:480px){.topbar{padding-bottom:16px}.logo{font-size:20px}.powered{font-size:8px;padding:8px}.heading{padding:26px 0}.heading h1{font-size:39px}.panel-top,.panel-bottom{padding:0 10px;font-size:8px;letter-spacing:.5px}.board-wrap{padding:5px}.overlay{inset:5px}.score-card{padding:14px}.sidebar{padding:22px}.score-card strong{font-size:24px}}
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:14px}.language-control{display:flex;align-items:center;gap:9px}.language-control label{font-size:12px;color:#b7d4bf;font-weight:750}.language-control select{border:1px solid #496250;border-radius:9px;background:#27382e;color:#eaf4e9;padding:9px 12px;min-width:124px;cursor:pointer}.logo{white-space:nowrap}.panel-bottom>span{white-space:nowrap}@media(max-width:650px){.topbar{gap:12px;align-items:flex-start;flex-wrap:wrap}.topbar-actions{justify-content:flex-start;width:100%}.powered{margin-left:auto}.heading h1{font-size:clamp(32px,8vw,44px)}}@media(max-width:380px){.powered{display:none}.panel-bottom{font-size:8px!important}.language-control{width:100%;justify-content:space-between}.language-control select{flex:1}}

/* Automatic mode: prominent, touch-friendly toggle. */
.button-auto{background:#203b36;border:1px solid #6bb9a0;color:#c1f9e8;min-height:50px}
.button-auto.is-active{background:#b8f7db;color:#14352b;border-color:#b8f7db}
.button-auto .auto-icon{font-size:19px;line-height:1}
.auto-hint{margin:0 0 9px!important;font-size:11px!important;line-height:1.5!important;color:#9bb7a7!important;text-align:center}
.dpad-btn:disabled{opacity:.38;cursor:default}

/* Persistent leaderboard lives in a separate panel beside the play area. */
.right-rail{display:flex;flex-direction:column;gap:18px;min-width:0}
.right-rail .sidebar{flex:none}
.player-section input{display:block;width:100%;border:1px solid #4d6654;border-radius:9px;background:#25372f;color:#eaf4e9;padding:12px 13px;font:inherit;font-size:14px}
.player-section input::placeholder{color:#839a89}
.player-section input:focus-visible{outline:3px solid #a7f36b;outline-offset:2px}
.player-section .player-hint{margin-top:8px;font-size:11px}
.player-section .input-error{min-height:0;color:#ffc0a8;font-size:11px;margin-top:5px}
.player-section .input-error:empty{display:none}
.current-player{font-size:11px!important;color:#b9efb0!important;margin-top:9px!important;overflow-wrap:anywhere}
.leaderboard-panel{border:1px solid #30433b;background:#15221e;border-radius:18px;padding:22px 22px 18px;min-width:0}
.leaderboard-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.leaderboard-header h2{font-size:18px;margin:0;color:#eaf4e9}
.leaderboard-refresh{border:1px solid #425d4c;background:#25392d;color:#b4f389;border-radius:9px;font-size:20px;line-height:1;width:36px;height:36px;cursor:pointer}
.leaderboard-refresh:hover{background:#375340}
.leaderboard-hint{margin:7px 0 16px;font-size:11px;line-height:1.5;color:#9bb5a7}
.leaderboard-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid #3d5847;border-radius:10px;padding:3px;gap:4px;background:#203129}
.leaderboard-tab{font-size:12px;font-weight:700;color:#a5c3ad;background:transparent;border:0;border-radius:7px;padding:9px 5px;min-width:0}
.leaderboard-tab.is-active{background:#b1f077;color:#19291e}
.leaderboard-list{list-style:none;margin:14px 0 0;padding:0;counter-reset:rank}
.leaderboard-list li{display:flex;align-items:center;gap:9px;padding:9px 3px;border-bottom:1px solid #304138;font-size:12px;counter-increment:rank}
.leaderboard-list li:last-child{border-bottom:0}
.leaderboard-list li::before{content:counter(rank, decimal-leading-zero);font-size:11px;color:#87a995;font-weight:700;flex:0 0 21px}
.leaderboard-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eaf4e9}
.leaderboard-score{font-weight:800;color:#b8f486;font-variant-numeric:tabular-nums}
.leaderboard-message{margin:12px 0 0;color:#9bb5a7;font-size:12px;line-height:1.5}
@media(max-width:810px){.right-rail{width:100%}}
/* Wide displays: the leaderboard gets its own visible column, not a spot below controls. */
@media(min-width:1180px){
  .shell{max-width:1380px}
  .game-layout{grid-template-columns:minmax(0,2.1fr) minmax(270px,1fr) minmax(210px,.75fr);align-items:start}
  .right-rail{display:contents}
  .sidebar,.leaderboard-panel{align-self:start}
}