* { box-sizing: border-box; }
:root {
  --bg: linear-gradient(160deg, #07121f 0%, #0e2036 60%, #122b44 100%);
  --card: #f6f0dc;
  --ink: #2a1d12;
  --accent: #f5b301;
  --accent2: #e6453a;
}
body {
  margin: 0;
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: #eae6da;
  min-height: 100vh;
}
.hidden { display: none !important; }
.app { max-width: 1100px; margin: 0 auto; padding: 10px 12px 40px; }
header .logo { font-size: 1.4em; font-weight: 800; letter-spacing: 1px; color: var(--accent); padding: 8px 0; }
header .sub { font-size: .7em; color: #8aa; font-weight: 400; }

.screen { display: none; }
.screen.active { display: block; }

.back { position: fixed; top: 12px; left: 12px; z-index: 50; background: rgba(0,0,0,.4); border: 1px solid #456; color: #fff; padding: 8px 14px; border-radius: 8px; cursor: pointer; }

/* ---------- MENU ---------- */
.menu-hero { text-align: center; padding: 60px 10px 20px; }
.menu-hero h1 { font-size: 3em; margin: .2em 0; color: var(--accent); text-shadow: 0 3px 14px rgba(245,179,1,.4); }
.menu-hero .tag { color: #9ab; font-size: 1.05em; }
.menu-actions { display: flex; flex-direction: column; gap: 14px; max-width: 400px; margin: 30px auto; }
button.big { padding: 18px; font-size: 1.2em; font-weight: 700; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #ffd34d); color: #2a1d12; cursor: pointer; box-shadow: 0 6px 18px rgba(245,179,1,.3); }
button.big.secondary { background: linear-gradient(135deg, #1b1f2a, #2c3a52); color: #cfd; border: 1px solid #3a4a66; box-shadow: none; }
.menu-note { color: #789; font-size: .9em; max-width: 560px; margin: 10px auto; }

/* ---------- PANELS / FORMS ---------- */
.panel { background: rgba(10,20,35,.85); border: 1px solid #22344c; border-radius: 16px; padding: 24px; max-width: 520px; margin: 20px auto; }
.panel h2 { margin-top: 0; color: var(--accent); }
.row { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.row label { width: 80px; color: #9ab; }
input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #2c4a6a; background: #0c1828; color: #eae6da; }
button { cursor: pointer; }
.net-status { color: #9ab; margin-bottom: 12px; }
.online-panel button, .room-panel button { padding: 12px 16px; border-radius: 9px; border: none; font-size: 1em; margin: 6px 6px 6px 0; background: #1f2b3e; color: #dfe; border: 1px solid #31425c; }
.online-panel button.primary, .room-panel button.primary { background: var(--accent); color: #2a1d12; font-weight: 700; border: none; }

/* ---------- DECK EDITOR ---------- */
.deck-screen { }
.deck-logo { font-size: 1.6em; font-weight: 800; color: var(--accent); margin: 10px 0; }
.sort-nav { margin: 12px 0; }
.coltab { padding: 8px 14px; border-radius: 20px; border: 1px solid #31425c; background: #152238; color: #cfd; margin-right: 8px; }
.coltab.on { background: var(--accent); color: #2a1d12; border-color: var(--accent); }
.deck-editor { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.lib { background: rgba(0,0,0,.25); border-radius: 12px; padding: 12px; max-height: 70vh; overflow-y: auto; }
.lib-title { color: #9ab; margin-bottom: 8px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 8px; }
.lib-item { border: 1px solid #22344c; border-radius: 8px; padding: 6px; text-align: center; background: rgba(20,30,45,.4); }
.lib-item.capped { opacity: .5; }
.lib-ctl { margin-top: 4px; }
.lib-ctl .add { width: 100%; padding: 6px; border-radius: 6px; border: none; background: var(--accent); color: #2a1d12; font-weight: 700; }
.deckbuild { background: rgba(0,0,0,.25); border-radius: 12px; padding: 12px; }
.db-leader { margin-bottom: 10px; }
.lbl { color: #9ab; font-size: .8em; margin-bottom: 4px; }
.slot.leader-slot { max-width: 140px; }
.db-count { font-weight: 700; font-size: 1.1em; color: var(--accent); margin: 6px 0; }
.db-list { max-height: 38vh; overflow-y: auto; }
.db-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-radius: 7px; background: rgba(20,30,45,.5); margin: 4px 0; }
.db-row .x { color: #9ab; }
.db-row .rm { border: none; background: none; color: #e6453a; font-size: 1.1em; cursor: pointer; }
.db-list .empty { color: #789; padding: 10px; }
.db-err { color: #fbb; font-size: .85em; margin: 8px 0; }
.err-li { margin: 2px 0; }
.ok-li { color: #4ade80; }
.db-done { width: 100%; padding: 14px; border: none; border-radius: 10px; font-size: 1.1em; font-weight: 700; background: var(--accent); color: #2a1d12; margin-top: 10px; }
.db-done:disabled { background: #334; color: #789; }

/* ---------- CARDS ---------- */
.card { --c:#555; background: var(--card); color: var(--ink); border-radius: 8px; border: 2px solid var(--c); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.card.back { background: repeating-linear-gradient(45deg,#2a2a3a,#2a2a3a 8px,#35354a 8px,#35354a 16px); }
.card-art { height: 60px; display: flex; align-items: center; justify-content: center; font-size: 1.6em; color: #fff; }
.card-head { display: flex; gap: 4px; align-items: center; padding: 3px 5px; font-size: .7em; font-weight: 700; }
.card .cost { background: var(--c); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; }
.card .life { color: #d33; }
.card .nm { flex: 1; font-size: .75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-pw { text-align: center; font-size: 1.1em; font-weight: 800; color: #111; }
.card .ctr { font-size: .7em; color: #b4551a; margin-left: 4px; }
.card-type { font-size: .62em; text-align: center; color: #555; text-transform: uppercase; padding: 2px; }
.card-txt { font-size: .58em; padding: 3px 5px; color: #333; line-height: 1.2; flex: 1; }
.kwrow { padding: 2px 5px; }
.kw { display: inline-block; background: #ffe18a; color: #5a3a00; border-radius: 4px; font-size: .55em; font-weight: 700; padding: 1px 4px; margin: 1px; }

/* sizes */
.card.sm { width: 120px; }
.card.sm .card-art { height: 44px; font-size: 1.2em; }
.card.md { width: 150px; }
.card.md .card-art { height: 72px; font-size: 1.8em; }
.card.lg { width: 190px; }

.card.rested { transform: rotate(8deg); }

/* ---------- BOARD ---------- */
.board { }
.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 4px; }
.round { color: #9ab; }
.turn { font-weight: 800; color: #fff; background: #22344c; padding: 4px 12px; border-radius: 20px; }
.turn.yours { background: var(--accent); color: #2a1d12; }
.topbar .pass { margin-left: auto; padding: 10px 22px; border-radius: 9px; border: none; background: var(--accent); color: #2a1d12; font-weight: 700; font-size: 1em; }

.player { margin-bottom: 8px; }
.pname { font-weight: 700; color: #d7e5f2; margin: 6px 0 4px; }
.turn-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #334; vertical-align: middle; }
.turn-dot.on { background: var(--accent); }
.pmeta { display: flex; gap: 16px; color: #9ab; font-size: .9em; }
.pmeta b { color: #fff; }
.zones { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; }
.zone { background: rgba(20,30,45,.45); border: 1px solid #22344c; border-radius: 10px; min-height: 120px; padding: 8px; }
.leader-zone { flex: 0 0 auto; background: rgba(90,70,20,.25); }
.chars-zone { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; min-height: 120px; }
.char-slot { cursor: pointer; position: relative; border-radius: 8px; transition: outline .15s; }
.char-slot:hover { outline: 2px solid var(--accent); }
.char-slot.targetable { outline: 2px solid #4ade80; }
.don-zone { flex: 0 0 auto; text-align: center; color: var(--accent); font-weight: 700; }
.deck-zone { flex: 0 0 auto; }
.deck-back { width: 60px; height: 90px; background: repeating-linear-gradient(45deg,#2a2a3a,#2a2a3a 8px,#3a3a52 8px,#3a3a52 16px); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #cfd; font-size: .8em; border: 2px solid #456; }

.hand { display: flex; gap: 8px; flex-wrap: wrap; min-height: 110px; padding: 6px 4px; }
.hand.me { border-top: 2px solid #2a3c55; }
.hand-slot { cursor: pointer; }
.hand-slot:hover { transform: translateY(-6px); }
.hand.opp { opacity: .9; }

.log { margin-top: 12px; background: rgba(0,0,0,.3); border-radius: 10px; padding: 10px; max-height: 160px; overflow-y: auto; font-size: .85em; color: #bcd; border: 1px solid #1c2b41; }
.log div { padding: 2px 0; border-bottom: 1px solid #12202f; }

.winbanner { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); padding: 30px 50px; border-radius: 16px; font-size: 2em; font-weight: 800; z-index: 60; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.winbanner.win { background: linear-gradient(135deg,#f5b301,#ffd34d); color: #2a1d12; }
.winbanner.lose { background: #223; color: #e88; }

@media (max-width: 760px) {
  .deck-editor { grid-template-columns: 1fr; }
  .card.md { width: 120px; }
  .card.md .card-art { height: 56px; }
}