:root{font-family:system-ui,-apple-system,sans-serif;color:#f4f1e9;background:#151926;--panel:#20283a;--line:#3b4760;--muted:#b7c0d0;--accent:#e4ab59;--red:#a95160}
*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#111726;border-bottom:1px solid var(--line);padding:12px max(14px,calc((100vw - 1160px)/2))}.brand{display:flex;align-items:center;gap:10px}.brand strong{display:block;font-size:1.15rem}.brand small{display:block;color:var(--muted)}.sigil{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--accent);border-radius:10px;color:var(--accent);font-weight:800}
main{max-width:1160px;margin:auto;padding:14px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px;min-width:0}h1{font-size:1.45rem;margin:0 0 10px}h2{font-size:1.1rem;margin:0 0 10px}h3{font-size:.83rem;color:var(--accent);margin:16px 0 8px}p{line-height:1.45}.muted,.hint{color:var(--muted)}.hint{font-size:.9rem}#status{min-height:24px;color:var(--accent)}.hidden{display:none!important}
.actions,.row,.top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.top{justify-content:space-between}.top h1{margin:0}.profile{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.profile p{margin:3px 0}code{overflow-wrap:anywhere}
label{display:block;margin:10px 0;font-size:.9rem;color:var(--muted)}input,select,textarea{display:block;width:100%;min-height:44px;border:1px solid #566179;border-radius:9px;background:#171d2c;color:#fff;font:inherit;padding:10px;margin-top:4px}textarea{min-height:100px;resize:vertical}.actions label{min-width:160px;flex:1}.actions input{flex:1;min-width:130px;width:auto}.actions select{width:100%}button{min-height:44px;border:1px solid transparent;border-radius:9px;padding:9px 14px;color:#171925;background:var(--accent);font:inherit;font-weight:650;cursor:pointer}button.secondary{background:#35445c;color:#fff;border-color:#52647e}button.ghost{background:transparent;color:#f1d4bd;border-color:#66576a}button:disabled{opacity:.43;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e4ab59;outline-offset:2px}.pill{border:1px solid var(--line);padding:7px 10px;border-radius:99px;color:var(--accent);font-size:.84rem}
.home-grid,.builder-grid,.field{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.home-grid .panel,.builder-grid .panel,.field .panel{margin-bottom:0}details{margin-top:18px}summary{cursor:pointer}.chat{height:210px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;padding:8px;background:#161e2b}.message{padding:5px 0;border-bottom:1px solid #354055;overflow-wrap:anywhere}.message strong{color:var(--accent)}.message small{color:var(--muted)}.catalog{max-height:470px;overflow:auto}.entry{display:flex;align-items:center;gap:8px;padding:7px;border-bottom:1px solid var(--line)}.entry .mini{flex:1;min-width:0}.entry .mini strong{display:block}.entry small{display:block;color:var(--muted)}.count{min-width:40px;text-align:center}.saved{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:8px 0}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:78px}.hand{display:flex;gap:7px;overflow-x:auto;padding:4px 0 12px}.card{flex:0 0 118px;min-width:0;min-height:112px;text-align:left;background:#394057;border:1px solid #687289;color:#f7f1e9;padding:8px;border-radius:10px;overflow-wrap:anywhere}.card .glyph,.mini-glyph{display:grid;place-items:center;background:linear-gradient(135deg,#82606c,#3c526b);border:1px solid #ffffff33;border-radius:7px;color:#fff;font-size:1.15rem;font-weight:800;width:38px;height:38px;margin-bottom:5px}.card b{display:block;font-size:.81rem;line-height:1.2}.card small{display:block;font-size:.7rem;color:#d7dbeb;margin-top:3px}.card.active{outline:3px solid var(--accent)}.card.red .glyph{background:linear-gradient(135deg,#b64d47,#703744)}.card.blue .glyph{background:linear-gradient(135deg,#3c83a9,#355373)}.card.green .glyph{background:linear-gradient(135deg,#6a9661,#376957)}.card.gold .glyph{background:linear-gradient(135deg,#c49a50,#725c42)}.card.violet .glyph{background:linear-gradient(135deg,#9862ad,#533d7a)}.mini-glyph{width:34px;height:34px;margin:0;flex:none;font-size:.9rem}.board .card{width:100%;flex:auto;min-height:100px}.board .card .glyph{width:30px;height:30px;font-size:.9rem}.row .card{flex:0 0 118px}#auth{max-width:480px;margin:24px auto}
@media(max-width:750px){.home-grid,.builder-grid,.field{grid-template-columns:1fr}.field{gap:10px}.panel{padding:12px}header{padding:10px 14px}.profile .actions{width:100%}.profile button{flex:1}}
@media(max-width:390px){.board{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.board .card{padding:5px;min-height:96px}.board .card b{font-size:.7rem}.board .card small{font-size:.62rem}.actions>button{flex:1}.hand .card{flex-basis:105px}}

.inactive-ability{color:#ffd48c!important;font-weight:700}

.card .card-flags{color:var(--accent);font-size:.62rem;line-height:1.15}.slot-placeholder{min-height:102px;border:1px dashed #465371;border-radius:10px;display:grid;place-items:center;color:#60708a;font-size:1.2rem;background:#171d2c70}@media(max-width:390px){.slot-placeholder{min-height:96px}}

.feedback-fields{display:grid;gap:10px}.feedback-fields label{display:grid;gap:5px}.report-list{display:grid;gap:6px;padding:10px 0;max-height:320px;overflow:auto}.report-entry{border:1px solid #465371;padding:9px;border-radius:8px}.report-entry p{white-space:pre-wrap;overflow-wrap:anywhere}

.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rules-content{display:grid;gap:16px;max-width:850px}.rule-section{border-bottom:1px solid #45506a;padding:6px 4px 14px}.rule-section h2{margin:4px 0 9px}.rule-section p{line-height:1.65;white-space:pre-wrap}@media(max-width:600px){header{flex-wrap:wrap;gap:10px}.header-actions{width:100%;justify-content:flex-end}.rules-content{font-size:.95rem}}

/* Keep disabled cards readable for players inspecting their hand. */
.card:disabled{opacity:.83;cursor:default}.board .card:disabled{opacity:.78}#turnLabel{display:inline-block;margin-left:9px}.leaderboard{margin:0;padding-left:25px}.leaderboard-entry{margin-bottom:7px;display:flex;justify-content:space-between;gap:10px;align-items:center;overflow-wrap:anywhere}.leaderboard-entry>div{min-width:0;display:grid}.leaderboard-entry strong{color:#f4f1e9}.leaderboard-entry small{color:var(--muted);font-size:.75rem}.leaderboard-entry b{color:var(--accent);white-space:nowrap}@media(max-width:390px){.hand .card small{font-size:.72rem}.board .card b{font-size:.72rem}}