:root {
  color-scheme: dark;
  --bg:#07110d;
  --panel:#0d1b15;
  --panel-2:#12231c;
  --line:#274236;
  --pitch-a:#1f6b45;
  --pitch-b:#246f49;
  --red:#d63b3b;
  --white:#f4f3ed;
  --ink:#eef7f1;
  --muted:#8da69a;
  --accent:#d9b95b;
  --control:rgba(217,185,91,.24);
  --legal:rgba(112,210,151,.34);
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#102219 0,var(--bg) 42%);color:var(--ink);font:15px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button{font:inherit}
.app-shell{max-width:1440px;margin:0 auto;padding:18px}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:12px 16px;border:1px solid var(--line);background:rgba(13,27,21,.92);border-radius:14px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:10px}.brand small{display:block;color:var(--muted)}.brand-mark{width:38px;height:38px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#1b1608;font-weight:900}
.scoreboard{display:flex;align-items:center;gap:18px}.team-score{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em}.team-score b{font-size:28px}.team-score.red span{color:#ff8080}.team-score.white span{color:#fff}.clock{font-variant-numeric:tabular-nums;font-size:24px;font-weight:800;background:#06100c;border:1px solid var(--line);padding:8px 14px;border-radius:10px;min-width:86px;text-align:center}
.secondary-btn{justify-self:end;border:1px solid var(--line);background:#11241b;color:var(--ink);padding:10px 14px;border-radius:9px;cursor:pointer}
.game-layout{display:grid;grid-template-columns:minmax(220px,270px) minmax(480px,1fr) minmax(220px,290px);gap:16px;align-items:start}.panel{background:rgba(13,27,21,.93);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:16px}.eyebrow{display:block;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.16em;margin-bottom:6px}.turn-indicator{font-size:24px;font-weight:900}.selected-card h2{margin:2px 0 6px}.selected-card p,.event-card p{margin:0;color:#c3d4cb}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button{border:1px solid #315043;background:#14291f;color:var(--ink);padding:11px 8px;border-radius:9px;cursor:pointer;font-weight:750}.actions button.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.actions button:disabled{opacity:.3;cursor:not-allowed}.micro-help{color:var(--muted);font-size:12px;margin:0}.dice-panel{background:#09150f;border:1px solid var(--line);border-radius:10px;padding:12px;min-height:96px}.dice-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.die{width:31px;height:31px;border-radius:7px;background:#edf2ee;color:#102017;display:grid;place-items:center;font-weight:900}.die.best{outline:2px solid var(--accent);outline-offset:1px}.dice-result{font-weight:800;color:var(--accent)}.legend{display:grid;gap:7px}.role-row{display:grid;grid-template-columns:34px 1fr;gap:8px;color:#bfd0c7}.role-row b{color:var(--accent)}
.pitch-wrap{position:relative;padding:18px 10px}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(12,1fr);aspect-ratio:2/3;border:2px solid rgba(255,255,255,.72);position:relative;background:var(--pitch-a);box-shadow:0 18px 46px rgba(0,0,0,.28)}.cell{position:relative;display:grid;place-items:center;border-right:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);min-width:0}.cell:nth-child(16n+1),.cell:nth-child(16n+2),.cell:nth-child(16n+3),.cell:nth-child(16n+4),.cell:nth-child(16n+5),.cell:nth-child(16n+6),.cell:nth-child(16n+7),.cell:nth-child(16n+8){background:rgba(255,255,255,.025)}.cell.control::after{content:"";position:absolute;inset:4px;border:1px solid rgba(217,185,91,.55);background:var(--control);border-radius:5px;pointer-events:none}.cell.legal::before{content:"";position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:var(--legal);border:2px solid rgba(153,232,184,.8);pointer-events:none}.cell.xg-high{box-shadow:inset 0 0 0 2px rgba(236,193,76,.35)}.piece{z-index:2;width:min(72%,48px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.76);display:grid;place-items:center;font-size:11px;font-weight:950;letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.28)}.piece.red{background:var(--red);color:white}.piece.white{background:var(--white);color:#16221c;border-color:#b9c5bf}.piece.selected{outline:3px solid var(--accent);outline-offset:3px}.piece.inspect{opacity:.88}.ball{position:absolute;z-index:3;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #101712;right:6%;bottom:6%;box-shadow:0 2px 4px rgba(0,0,0,.45)}.coord{position:absolute;left:3px;top:2px;font-size:8px;color:rgba(255,255,255,.35)}.halfway{position:absolute;left:0;right:0;top:50%;border-top:2px solid rgba(255,255,255,.6);pointer-events:none}.center-circle{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;border:2px solid rgba(255,255,255,.58);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.goal{width:38%;height:18px;margin:0 auto;border:2px solid rgba(255,255,255,.75);border-bottom:0;display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:9px;letter-spacing:.12em}.goal-bottom{border-top:0;border-bottom:2px solid rgba(255,255,255,.75)}
.full-time{color:var(--accent);font-weight:900}
@media(max-width:980px){.topbar{grid-template-columns:1fr auto}.scoreboard{grid-column:1/-1;grid-row:2;justify-content:center}.game-layout{grid-template-columns:1fr}.left-panel,.right-panel{grid-template-columns:1fr 1fr}.pitch-wrap{order:-1;max-width:640px;width:100%;margin:0 auto}}
@media(max-width:620px){.app-shell{padding:8px}.topbar{padding:10px}.brand small{display:none}.game-layout{gap:8px}.left-panel,.right-panel{grid-template-columns:1fr}.pitch-wrap{padding:12px 0}.piece{width:75%;font-size:9px}.actions{grid-template-columns:repeat(5,1fr)}.actions button{padding:9px 2px;font-size:12px}.scoreboard{gap:9px}.team-score{gap:5px}.team-score b{font-size:22px}}
.context-menu{position:absolute;z-index:20;min-width:156px;padding:8px;background:rgba(5,14,10,.97);border:1px solid rgba(217,185,91,.55);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.42);backdrop-filter:blur(8px)}
.context-menu[hidden]{display:none}
.context-label{padding:3px 6px 7px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.context-actions{display:grid;grid-template-columns:repeat(2,minmax(64px,1fr));gap:6px}
.context-actions button{min-height:38px;border:1px solid #315043;background:#14291f;color:var(--ink);padding:8px 9px;border-radius:8px;cursor:pointer;font-weight:800;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.context-actions button:hover{border-color:#5b7d6d;background:#193326}
.context-actions button:active{transform:scale(.97)}
.context-actions button.active{border-color:var(--accent);background:#2a2818;box-shadow:0 0 0 1px var(--accent) inset}
.cell.legal{cursor:pointer}
.cell.legal:hover::before{transform:scale(1.12)}
@media(max-width:620px){.context-menu{min-width:140px;padding:7px}.context-actions button{min-height:42px;padding:7px 8px}}

/* Match modes, chess clocks and lobby */
.top-actions{justify-self:end;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.team-block{display:grid;gap:4px;justify-items:center}.team-block .team-score{min-width:92px;justify-content:center}.team-block.red .team-score span{color:#ff8080}.team-block.white .team-score span{color:#fff}
.player-clock{font-variant-numeric:tabular-nums;font-size:20px;font-weight:900;background:#06100c;border:1px solid var(--line);padding:5px 11px;border-radius:8px;min-width:82px;text-align:center;transition:border-color .15s,box-shadow .15s}
.player-clock.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(217,185,91,.35),0 0 18px rgba(217,185,91,.12)}.score-vs{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.16em}
.turn-card small{display:block;margin-top:5px;color:var(--muted)}.dice-total{color:var(--accent);font-weight:900;margin-left:3px}
.lobby-overlay{position:fixed;inset:0;z-index:100;background:rgba(3,9,6,.86);display:grid;place-items:center;padding:18px;backdrop-filter:blur(10px)}.lobby-overlay[hidden]{display:none}
.lobby-card{width:min(760px,100%);background:linear-gradient(145deg,#10231a,#09150f);border:1px solid #315043;border-radius:20px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lobby-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}.brand-mark.large{width:52px;height:52px;border-radius:14px;font-size:18px}.lobby-brand h1{margin:0;font-size:28px}.lobby-brand p,.setup-head p{margin:3px 0 0;color:var(--muted)}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mode-card{min-height:132px;border:1px solid #315043;border-radius:14px;background:#12231c;color:var(--ink);padding:18px;text-align:left;cursor:pointer;display:grid;align-content:center;gap:6px;transition:transform .15s,border-color .15s,background .15s}.mode-card:hover{transform:translateY(-2px);border-color:var(--accent);background:#183126}.mode-card b{font-size:18px}.mode-card span{color:var(--muted);font-size:13px}
.text-btn{border:0;background:transparent;color:var(--muted);padding:4px 0 12px;cursor:pointer}.setup-head{margin-bottom:18px}.setup-head h2{margin:0;font-size:24px}.field-title,.field-label{display:block;color:#c7d8cf;font-weight:800;margin:12px 0 7px}.field-label input{display:block;width:100%;margin-top:7px;background:#07120d;border:1px solid #315043;color:var(--ink);border-radius:9px;padding:11px 12px;font-size:16px}.field-label small{display:block;margin-top:5px;color:var(--muted);font-weight:400}
.color-choice{display:flex;gap:10px;margin-bottom:14px}.color-choice label{cursor:pointer}.color-choice input{position:absolute;opacity:0}.color-pill{display:inline-grid;place-items:center;min-width:98px;padding:10px 16px;border-radius:10px;border:2px solid transparent;font-weight:900}.red-pill{background:#7e2424;color:#fff}.white-pill{background:#e8e8e3;color:#17201b}.color-choice input:checked+.color-pill{border-color:var(--accent);box-shadow:0 0 0 2px rgba(217,185,91,.18)}
.primary-btn{border:1px solid #d8bd6a;background:var(--accent);color:#171307;padding:11px 16px;border-radius:9px;cursor:pointer;font-weight:900}.primary-btn:disabled{opacity:.55;cursor:default}.wide{width:100%;margin-top:14px}.online-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.online-option{border:1px solid var(--line);border-radius:13px;padding:16px;background:rgba(255,255,255,.018)}.online-option h3{margin:0 0 10px}.invite-code{font-size:32px;font-weight:950;letter-spacing:.12em;text-align:center;padding:16px;border:1px dashed var(--accent);border-radius:12px;background:#07120d;color:#f4d879;margin:14px 0}.online-state{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px}.setup-actions{display:flex;gap:10px;justify-content:center;margin-top:16px}.setup-note{color:var(--muted);font-size:12px;text-align:center}.lobby-message{min-height:20px;margin-top:12px;color:#f1c86a}.red-text{color:#ff7373}.white-text{color:#fff}
@media(max-width:760px){.mode-grid,.online-grid{grid-template-columns:1fr}.lobby-card{padding:18px}.scoreboard{gap:8px}.player-clock{font-size:17px;min-width:72px}.top-actions{grid-column:2}.online-state{flex-direction:column}}

/* KORA Help Center */
.help-open{overflow:hidden}.help-overlay{position:fixed;inset:0;z-index:180;background:rgba(2,8,5,.88);display:grid;place-items:center;padding:18px;backdrop-filter:blur(12px)}.help-overlay[hidden]{display:none}
.help-shell{width:min(1120px,100%);height:min(820px,calc(100% - 18px));display:grid;grid-template-rows:auto auto 1fr;background:linear-gradient(145deg,#10231a,#07120d);border:1px solid #315043;border-radius:20px;box-shadow:0 36px 90px rgba(0,0,0,.58);overflow:hidden}
.help-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:22px 24px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.help-header h1{margin:1px 0 3px;font-size:28px}.help-header p{margin:0;color:var(--muted)}.help-kicker{display:inline-block;color:var(--accent);font-size:10px;letter-spacing:.18em;font-weight:950}.help-close{width:42px;height:42px;border:1px solid #315043;background:#10231a;color:var(--ink);border-radius:10px;font-size:26px;line-height:1;cursor:pointer}.help-close:hover{border-color:var(--accent)}
.help-search-wrap{margin:14px 24px;display:flex;align-items:center;gap:9px;background:#06100c;border:1px solid #315043;border-radius:11px;padding:0 13px;color:var(--muted)}.help-search-wrap input{width:100%;min-height:44px;background:transparent;border:0;outline:0;color:var(--ink);font:inherit}.help-search-wrap input::placeholder{color:#71847a}
.help-layout{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:0;border-top:1px solid rgba(255,255,255,.04)}.help-nav{min-height:0;overflow:auto;padding:12px;border-right:1px solid rgba(255,255,255,.07);background:rgba(4,13,9,.28)}.help-nav button{width:100%;display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;text-align:left;border:1px solid transparent;background:transparent;color:var(--ink);border-radius:10px;padding:10px;cursor:pointer}.help-nav button>span{color:var(--accent);font-weight:900;text-align:center;padding-top:1px}.help-nav button b{display:block;font-size:13px}.help-nav button small{display:block;margin-top:2px;color:var(--muted);line-height:1.25}.help-nav button:hover{background:#11271d}.help-nav button.active{background:#183126;border-color:#3e614f}.help-empty{padding:10px;color:var(--muted);font-size:13px}
.help-content{min-height:0;overflow:auto;padding:24px 30px 36px;outline:none;color:#d7e4dd}.help-topic-head{display:flex;gap:14px;align-items:flex-start;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08)}.help-topic-head>span{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#193327;color:var(--accent);font-size:21px}.help-topic-head h2{margin:0;color:#fff;font-size:24px}.help-topic-head p{margin:4px 0 0;color:var(--muted)}.help-content>h2,.help-content>h3{color:#fff}.help-content h2{margin:0 0 10px}.help-content h3{margin:22px 0 7px}.help-content p{line-height:1.6}.help-content li{margin:7px 0;line-height:1.45}.help-content ul,.help-content ol{padding-left:22px}
.help-rule-callout{display:grid;gap:5px;margin:18px 0;padding:15px 17px;border:1px solid rgba(217,185,91,.38);border-left:4px solid var(--accent);border-radius:10px;background:rgba(217,185,91,.07)}.help-rule-callout b{color:#f5d985;font-size:11px;letter-spacing:.11em}.help-rule-callout span{line-height:1.5}.help-rule-callout.danger{border-color:rgba(255,105,105,.32);border-left-color:#ff7373;background:rgba(167,45,45,.09)}.help-rule-callout.danger b{color:#ff8d8d}
.help-step-grid,.help-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.help-step-grid>div,.help-role-grid>div{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}.help-step-grid b,.help-role-grid b{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#193327;color:var(--accent)}.help-step-grid strong,.help-role-grid strong{color:#fff}.help-step-grid span,.help-role-grid span{color:#aebfb6;font-size:13px;line-height:1.35}.help-control-diagram{width:190px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:15px auto}.help-control-diagram>*{display:grid;place-items:center;aspect-ratio:1;border-radius:7px;background:#183126;color:#92b5a3}.help-control-diagram b{background:var(--red);color:#fff;border:2px solid rgba(255,255,255,.7)}
.help-dice-table{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.help-dice-table>div{min-width:130px;flex:1;display:grid;gap:3px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#0c1c15}.help-dice-table b{color:var(--accent);font-size:17px}.help-dice-table span{color:var(--muted);font-size:12px}.help-example{display:grid;gap:5px;padding:14px;border-radius:10px;background:#0a1711;border:1px dashed #395b4b}.help-example b{color:#fff}.help-no-results{display:grid;place-items:center;text-align:center;gap:6px;min-height:240px}.help-no-results span{color:var(--muted)}
.lobby-help-btn{width:100%;margin-top:13px;border:1px solid #315043;border-radius:12px;background:#0b1a13;color:var(--ink);padding:12px 15px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center}.lobby-help-btn:hover{border-color:var(--accent)}.lobby-help-btn span{color:var(--muted);font-size:12px}
@media(max-width:760px){.help-overlay{padding:7px}.help-shell{height:calc(100% - 4px);border-radius:14px}.help-header{padding:15px 16px 11px}.help-header h1{font-size:22px}.help-search-wrap{margin:10px 14px}.help-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.help-nav{display:flex;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding:8px}.help-nav button{min-width:max-content;width:auto;grid-template-columns:22px auto;padding:8px 10px}.help-nav button small{display:none}.help-content{padding:18px 16px 28px}.help-step-grid,.help-role-grid{grid-template-columns:1fr}.help-topic-head h2{font-size:21px}}