* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0d1220; --panel:#161e33; --panel2:#1e2946; --border:#2b3a63;
  --text:#e8edf7; --dim:#93a0bd; --accent:#ffa726; --accent2:#42a5f5;
  --red:#e53935; --blue:#1e88e5; --yellow:#fdd835; --green:#43a047;
  --black:#546e7a; --purple:#8e24aa; --white-c:#eceff1; --good:#7ee787; --bad:#ff8f8f;
}
body { background:var(--bg); color:var(--text); font-family:-apple-system,'Segoe UI',Roboto,sans-serif; }
body.busy { cursor:progress; }
body.busy #board { pointer-events:none; }

#topbar { display:flex; align-items:center; gap:24px; padding:10px 20px; background:var(--panel); border-bottom:2px solid var(--accent); position:sticky; top:0; z-index:50; }
#logo { font-weight:900; font-size:20px; color:var(--accent); letter-spacing:1px; }
#logo span { color:var(--accent2); }
#tabs { display:flex; gap:6px; }
.tab { background:transparent; color:var(--dim); border:1px solid transparent; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; }
.tab:hover { color:var(--text); }
.tab.active { background:var(--panel2); color:var(--accent); border-color:var(--border); }
#cardcount { margin-left:auto; color:var(--dim); font-size:13px; }

.tabpage { display:none; padding:16px 20px; }
.tabpage.active { display:block; }
.hidden { display:none !important; }
.hint { color:var(--dim); font-size:13px; margin:8px 0; }
h2 { margin-bottom:10px; } h3 { margin:14px 0 6px; }
#rules-body p { margin:8px 0; max-width:900px; line-height:1.6; }

/* filters */
#filters, #bfilters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center; }
input[type=text], input[type=number], select, textarea { background:var(--panel2); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:8px; font-size:14px; font-family:inherit; }
#f-search { width:280px; }
#f-results, #b-results { color:var(--dim); font-size:13px; }
button { background:var(--panel2); border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:8px; cursor:pointer; font-size:14px; }
button:hover { border-color:var(--accent); color:var(--accent); }
button.primary { background:var(--accent); color:#101010; border-color:var(--accent); font-weight:800; }
button.primary:hover { filter:brightness(1.1); color:#101010; }
button.mini { padding:5px 10px; font-size:12px; }
button.danger { color:var(--bad); }

/* card grid */
#cardgrid, #bgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
#bgrid { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
.cardcell { position:relative; cursor:pointer; border-radius:8px; overflow:hidden; background:var(--panel); aspect-ratio:430/600; }
.cardcell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .12s; }
.cardcell:hover img { transform:scale(1.05); }
.cardcell .cid { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.75); font-size:10px; padding:2px 5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cardcell .addbtn { position:absolute; top:4px; right:4px; background:var(--accent); color:#000; border:none; border-radius:6px; font-weight:800; padding:2px 8px; display:none; }
.cardcell:hover .addbtn { display:block; }
#loadmore-wrap, #bloadmore-wrap { text-align:center; margin:16px 0; }

/* deck builder */
#tab-builder.active { display:flex; gap:16px; height:calc(100vh - 60px); }
#builder-left { flex:1.4; overflow-y:auto; padding-right:4px; }
#builder-right { flex:0 0 360px; overflow-y:auto; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; }
#deck-controls { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.deck-btns { display:flex; flex-wrap:wrap; gap:6px; }
.deck-btns button, .deck-btns select { padding:6px 10px; font-size:13px; }
#deck-validity { font-size:13px; margin:6px 0; padding:8px 10px; border-radius:8px; background:var(--panel2); }
#deck-validity.ok { color:var(--good); } #deck-validity.bad { color:var(--bad); }
#deck-curve { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.cbar { background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:2px 7px; font-size:11px; color:var(--dim); }
.cbar b { color:var(--accent); margin-right:4px; }
#builder-right h3 { margin:12px 0 6px; font-size:14px; color:var(--accent2); }
.decklist { display:flex; flex-direction:column; gap:3px; }
.deckrow { display:flex; align-items:center; gap:8px; background:var(--panel2); border-radius:6px; padding:3px 8px; font-size:13px; cursor:pointer; border-left:4px solid var(--border); }
.deckrow:hover { background:#25335a; }
.deckrow .qty { font-weight:800; color:var(--accent); min-width:24px; }
.deckrow .dn { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deckrow .lvl { color:var(--dim); font-size:11px; }
.deckrow .rm { color:var(--bad); font-weight:800; padding:0 6px; }
.cl-Red{border-left-color:var(--red)} .cl-Blue{border-left-color:var(--blue)} .cl-Yellow{border-left-color:var(--yellow)}
.cl-Green{border-left-color:var(--green)} .cl-Black{border-left-color:var(--black)} .cl-Purple{border-left-color:var(--purple)} .cl-White{border-left-color:var(--white-c)}

/* zoom modal */
#modal { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:300; display:flex; align-items:center; justify-content:center; }
#modal-content { display:flex; gap:20px; max-width:900px; padding:20px; background:var(--panel); border-radius:14px; border:1px solid var(--border); max-height:88vh; }
#modal-img { width:320px; border-radius:12px; align-self:flex-start; }
#modal-info { overflow-y:auto; font-size:14px; line-height:1.55; max-width:440px; }
#modal-info h2 { color:var(--accent); margin-bottom:6px; }
#modal-info .meta { color:var(--dim); font-size:13px; margin-bottom:8px; }
#modal-info .fx { background:var(--panel2); padding:10px; border-radius:8px; margin-top:8px; white-space:pre-wrap; font-size:13px; }
#modal-info .fx b { color:var(--accent2); display:block; margin-bottom:4px; }

/* ============ PLAY BOARD ============ */
#play-setup { max-width:640px; margin:30px auto; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px; }
#play-setup h2 { color:var(--accent); }
.setup-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
#start-game { background:var(--accent); color:#000; font-weight:800; margin-top:8px; padding:10px 22px; }

#board { position:relative; }
.player-board { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:8px; margin:4px 0;
  display:grid; grid-template-columns:126px 1fr 162px; grid-template-rows:auto auto; gap:6px; }
.player-board.is-active { border-color:var(--accent); box-shadow:0 0 0 1px rgba(255,167,38,.25); }
.player-board.flipped { }
.zone { background:var(--panel2); border:1px dashed var(--border); border-radius:8px; padding:4px; position:relative; }
.zone .zlabel { position:absolute; top:2px; left:6px; font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; pointer-events:none; z-index:1; }
.zone.dragover { border-color:var(--accent); background:#243a2a; }
.z-left  { grid-column:1; grid-row:1; }
.z-battle { grid-column:2; grid-row:1; padding-top:15px; min-height:110px; display:flex; flex-direction:column; gap:6px; }
.z-right { grid-column:3; grid-row:1; }
.z-hand  { grid-column:1 / span 3; grid-row:2; }
.flipped .z-left, .flipped .z-battle, .flipped .z-right { grid-row:2; }
.flipped .z-hand { grid-row:1; }
.brow { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; align-content:flex-start; }
.trow { border-top:1px dashed var(--border); padding-top:5px; }
.z-side { display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:5px; padding-top:14px; }
.z-hand { background:var(--panel); border-style:solid; display:flex; gap:4px; flex-wrap:wrap; padding-top:15px; min-height:78px; align-items:flex-start; }
.z-hand .peek { position:absolute; top:2px; right:6px; }

.pcard { width:54px; aspect-ratio:430/600; border-radius:5px; position:relative; user-select:none; flex-shrink:0; background:#0a0f1c; }
.pcard img { width:100%; height:100%; border-radius:5px; display:block; pointer-events:none; }
.pcard.hand { cursor:grab; width:56px; }
.pcard.hand:hover { outline:2px solid var(--accent); }
.pcard.facedown img { visibility:hidden; }
.pcard.facedown { background:repeating-linear-gradient(45deg,#20325e,#20325e 6px,#182749 6px,#182749 12px); border:1px solid var(--border); }
.pcard .stackn { position:absolute; top:-6px; right:-6px; background:var(--accent); color:#000; font-size:10px; font-weight:800; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; z-index:2; }

.unit { display:flex; flex-direction:column; align-items:center; gap:1px; width:62px; cursor:pointer; padding:2px; border-radius:8px; border:1px solid transparent; }
.unit:hover { border-color:var(--accent2); background:rgba(66,165,245,.08); }
.unit.suspended .pcard { transform:rotate(90deg); }
.unit.suspended { margin:10px 14px; }
.unit.can-target { border-color:var(--red); background:rgba(229,57,53,.16); animation:pulse 1.1s infinite; }
@keyframes pulse { 50% { background:rgba(229,57,53,.32); } }
.u-dp { font-size:11px; font-weight:800; color:var(--text); }
.u-dp.modded { color:var(--accent); }
.u-kws { display:flex; flex-wrap:wrap; gap:2px; justify-content:center; }
.kw { font-size:8px; font-weight:700; padding:1px 3px; border-radius:3px; background:#2d3f6b; color:#cfe0ff; white-space:nowrap; }
.kw.kw-inh { background:#3a2d6b; color:#ded0ff; }
.kw.kw-mod { background:#6b4a1e; color:#ffe0b0; }
.u-note { font-size:8px; color:var(--accent); text-align:center; line-height:1.1; }

.pile { display:flex; flex-direction:column; align-items:center; gap:1px; cursor:pointer; }
.pile .pcard { width:44px; }
.pile-lab { font-size:9px; color:var(--dim); }
.pile.danger .pile-lab { color:var(--bad); font-weight:700; }
.empty-slot { width:44px; aspect-ratio:430/600; border:1px dashed var(--border); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--dim); cursor:pointer; }
.empty-slot:hover { border-color:var(--accent); color:var(--accent); }
.z-side .atk-banner, .z-side > .mini { flex-basis:100%; }
.atk-banner { background:var(--red); color:#fff; font-size:11px; font-weight:800; padding:6px 8px; border-radius:8px; text-align:center; cursor:pointer; margin-top:4px; }
.atk-banner:hover { filter:brightness(1.15); }

#memory-bar { display:flex; gap:3px; justify-content:center; align-items:center; padding:6px; background:#0a0f1c; border-radius:10px; margin:4px 0; }
.mem { width:27px; height:27px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--dim); cursor:pointer; }
.mem.p1side { border-color:#2a4a7f; } .mem.p2side { border-color:#7f4a2a; }
.mem.zero { border-width:2px; border-color:var(--dim); }
.mem.current { background:var(--accent); color:#000; border-color:var(--accent); transform:scale(1.2); }
#memory-bar .memlab { font-size:11px; color:var(--dim); width:90px; text-align:center; }

#turn-controls { display:flex; gap:6px; align-items:center; margin-bottom:4px; flex-wrap:wrap;
  position:sticky; top:52px; z-index:40; background:var(--bg); padding:6px 0; }
#turn-controls .spacer { flex:1; }
#turn-indicator { font-size:14px; color:var(--text); }
#turn-indicator b { color:var(--accent); }
#sel-hint { color:var(--accent2); font-size:12px; padding:2px 8px; }
#play-log { max-height:96px; overflow-y:auto; font-size:12px; color:var(--dim); background:#0a0f1c; border-radius:8px; padding:6px 10px; margin-top:4px; }
.lg { padding:1px 0; }
.lg-turn { color:var(--accent); font-weight:700; margin-top:4px; }
.lg-atk { color:#ff8f6f; } .lg-btl { color:#ffd28f; } .lg-sec { color:var(--accent2); }
.lg-del { color:var(--bad); } .lg-play { color:var(--good); } .lg-mem { color:#b6a4ff; }
.lg-blk { color:#8fd3ff; } .lg-win { color:var(--accent); font-weight:800; font-size:14px; }
.lg-fx { color:#e2c6ff; }
#play-help { margin-top:8px; font-size:12px; color:var(--dim); }
#play-help summary { cursor:pointer; color:var(--accent2); }
#play-help p { margin:6px 0; line-height:1.5; }

#ctxmenu { position:fixed; z-index:250; background:var(--panel); border:1px solid var(--border); border-radius:8px; overflow:hidden; min-width:190px; box-shadow:0 8px 24px rgba(0,0,0,.6); }
#ctxmenu button { display:block; width:100%; text-align:left; border:none; border-radius:0; padding:8px 14px; font-size:13px; background:transparent; }
#ctxmenu button:hover { background:var(--panel2); }
#ctxmenu hr { border:none; border-top:1px solid var(--border); }

/* ============ DIALOGS ============ */
#dialog-layer .dlg-backdrop { position:fixed; inset:0; background:rgba(4,8,16,.72); z-index:400; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.dlg { background:var(--panel); border:1px solid var(--accent); border-radius:14px; padding:18px 20px; min-width:340px; max-width:620px; max-height:86vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.dlg h3 { margin:0 0 4px; color:var(--accent); font-size:16px; }
.dlg-sub { color:var(--dim); font-size:13px; margin-bottom:10px; line-height:1.45; }
.dlg-body { overflow-y:auto; }
.dlg-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.dlg-choices { display:flex; flex-direction:column; gap:6px; max-height:52vh; }
.dlg-choice { display:flex; align-items:center; gap:10px; text-align:left; padding:6px 10px; }
.dlg-choice img { width:34px; border-radius:3px; }
.dlg-choice .cl-label { font-weight:600; }
.dlg-choice .cl-sub { color:var(--dim); font-size:12px; margin-left:auto; }
.dlg-trigger { display:flex; gap:14px; }
.tg-img { width:150px; border-radius:8px; align-self:flex-start; }
.tg-text { font-size:13px; line-height:1.6; white-space:pre-wrap; background:var(--panel2); padding:10px; border-radius:8px; flex:1; }
.modbox { display:flex; flex-direction:column; gap:10px; min-width:420px; }
.modbox label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim); }
.modkw-title { font-size:12px; color:var(--dim); }
.modkw { display:flex; flex-wrap:wrap; gap:5px; max-height:200px; overflow-y:auto; }
.kwtoggle { font-size:11px; padding:4px 8px; }
.kwtoggle.on { background:var(--accent); color:#000; border-color:var(--accent); font-weight:700; }

/* ============ ONLINE LOBBY ============ */
#online-panel h2 { color:var(--accent2); }
.setup-split { border:none; border-top:1px solid var(--border); margin:18px 0; }
#room-players { display:flex; flex-direction:column; gap:5px; margin:8px 0; }
.roomplayer { background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:14px; display:flex; align-items:center; gap:10px; }
.roomplayer.off { opacity:.55; }
.roomplayer.waitslot { border-style:dashed; color:var(--dim); }
.readytag { margin-left:auto; font-size:11px; font-weight:800; color:var(--dim); border:1px solid var(--border); border-radius:12px; padding:2px 10px; }
.readytag.on { color:#000; background:var(--good); border-color:var(--good); }
#room-code { color:var(--accent); letter-spacing:3px; font-size:18px; }
.chatlog { max-height:110px; overflow-y:auto; background:#0a0f1c; border-radius:8px; padding:6px 10px; font-size:12px; color:var(--dim); margin:8px 0 6px; min-height:34px; }
.chatlog:empty::before { content:'Room chat…'; opacity:.5; }
#chat-row { margin-top:4px; }
.lg-chat { color:#8fe3c9; }

/* waiting-for-opponent dialog */
.dlg-wait { display:flex; align-items:center; gap:14px; padding:8px 0; }
.wait-text { color:var(--dim); font-size:13px; }
.wait-spin { width:26px; height:26px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.9s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

.kw.kw-link { background:#1e4a3a; color:#a9f0d1; cursor:pointer; }

/* battle animations */
#fx-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:60;
  mix-blend-mode:screen; opacity:0; pointer-events:none; transition:opacity .12s; }
#fx-video.play { opacity:1; }
#fx-flash { position:absolute; inset:0; background:#fff; opacity:0; z-index:61; pointer-events:none; }
#fx-flash.play { animation:fxflash .45s ease-out; }
@keyframes fxflash { 0% {opacity:0} 14% {opacity:.7} 100% {opacity:0} }
.fx-shake { animation:fxshake .45s linear; }
@keyframes fxshake { 0%,100% {transform:none} 25% {transform:translate(-7px,3px)} 50% {transform:translate(6px,-4px)} 75% {transform:translate(-4px,2px)} }
#music-vol { width:70px; accent-color:var(--accent); }
#turn-timer { font-size:12px; color:var(--dim); min-width:52px; }
#turn-timer.slow { color:var(--bad); font-weight:700; }
#history-list { margin-top:10px; }
.histrow { font-size:12px; color:var(--dim); padding:3px 0; border-top:1px solid var(--border); }

/* ============ PHONE / SMALL SCREENS ============ */
@media (max-width: 900px) {
  #topbar { gap:10px; padding:8px 10px; flex-wrap:wrap; }
  #logo { font-size:15px; }
  .tab { padding:6px 9px; font-size:12px; }
  #cardcount { display:none; }
  .tabpage { padding:10px 8px; }
  #tab-builder.active { flex-direction:column; height:auto; }
  #builder-right { flex:none; width:100%; }
  #play-setup { margin:10px auto; padding:14px; }
  .player-board { grid-template-columns:88px 1fr 108px; padding:5px; gap:4px; }
  .pcard { width:44px; }
  .pcard.hand { width:46px; }
  .unit { width:52px; }
  .pile .pcard { width:36px; }
  .mem { width:20px; height:20px; font-size:9px; }
  #memory-bar { gap:2px; padding:4px; }
  #memory-bar .memlab { width:56px; font-size:9px; }
  #turn-controls { top:0; gap:4px; }
  #turn-controls button { padding:5px 8px; font-size:11px; }
  .dlg { min-width:0; width:94vw; padding:12px; }
  .modbox { min-width:0; }
  .tg-img { width:104px; }
  #modal-content { flex-direction:column; overflow-y:auto; max-width:94vw; }
  #modal-img { width:200px; align-self:center; }
  .u-kws { max-width:60px; }
}

#toast-layer { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.toast { background:var(--panel2); border:1px solid var(--accent); color:var(--text); padding:8px 16px; border-radius:20px; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.5); transition:opacity .35s, transform .35s; }
.toast.bad { border-color:var(--bad); color:var(--bad); }
.toast.out { opacity:0; transform:translateY(8px); }