* { margin:0; padding:0; box-sizing:border-box; }
@font-face {
  font-family:'Armada';
  src:url('Armada Bold.otf') format('opentype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
body { background:#0a0a1a; color:#e0e0e0; font-family:'Segoe UI',system-ui,sans-serif; overflow:hidden; height:100vh; }

/* ── Menu Screen ── */
#menu-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; gap:24px; }
#decks-screen { display:none; height:100vh; flex-direction:column; overflow:hidden; }
#menu-screen h1 { font-size:48px; background:linear-gradient(135deg,#ff6644,#4488ff,#44cc44,#ffdd44,#8844bb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; letter-spacing:2px; }
#menu-screen h2 { font-size:18px; color:#888; margin-bottom:16px; }
.deck-grid { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; max-width:900px; }
.deck-option { width:160px; padding:16px; border-radius:12px; cursor:pointer; text-align:center; transition:transform 0.2s,box-shadow 0.2s; border:2px solid rgba(255,255,255,0.1); }
.deck-option:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.5); }
.deck-option h3 { font-size:16px; margin-bottom:8px; }
.deck-option p { font-size:11px; color:#aaa; line-height:1.4; }
.deck-fire { background:linear-gradient(135deg,#331111,#552222); border-color:#cc3333; }
.deck-water { background:linear-gradient(135deg,#111133,#222255); border-color:#3366cc; }
.deck-nature { background:linear-gradient(135deg,#113311,#225522); border-color:#33aa33; }
.deck-light { background:linear-gradient(135deg,#332211,#554433); border-color:#ccaa33; }
.deck-darkness { background:linear-gradient(135deg,#221133,#332244); border-color:#663399; }

/* ── Game Screen ── */
#game-screen { display:none; height:100vh; }
.game-layout { display:grid; grid-template-columns:1fr 280px; height:100vh; }

/* ── Board ── */
.board { display:flex; flex-direction:column; padding:8px; gap:4px; overflow-y:auto; }
.player-label { font-size:12px; color:#888; padding:2px 8px; display:flex; justify-content:space-between; align-items:center; min-height:60px; gap:8px; }
.player-label span { color:#aaa; }
.player-resources { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.deck-summary { display:inline-flex; align-items:center; gap:7px; color:#aaa; }
.deck-stack { position:relative; display:inline-block; width:38px; height:52px; flex:0 0 38px; }
.deck-stack-sheets { display:none; }
.deck-stack-card { position:absolute; left:0; top:0; width:34px; height:48px; border-radius:5px; overflow:hidden; background:linear-gradient(135deg,#30204c,#182540); border:1px solid rgba(255,255,255,0.35); box-shadow:0 2px 8px rgba(0,0,0,0.35); transition:opacity 0.2s ease; }
.deck-stack-card::after { content:''; position:absolute; inset:3px; border:1px solid rgba(255,221,102,0.35); border-radius:3px; pointer-events:none; }
.deck-stack-card .card-back-img { border-radius:3px; }
.deck-stack.empty .deck-stack-card { opacity:0.25; filter:grayscale(1); }
/* Manual "top of deck face up (public)": the top card's face fills the deck thumbnail, gold-ringed. */
.deck-stack-faceup-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.deck-stack.deck-top-faceup .deck-stack-card { border-color:rgba(255,221,102,0.85); box-shadow:0 0 8px rgba(255,221,102,0.45),0 2px 8px rgba(0,0,0,0.35); }
.deck-stack.deck-top-faceup .deck-stack-card::after { border-color:rgba(255,221,102,0.7); }
.deck-horizontal-countdown {
  position:absolute;
  z-index:3;
  right:-13px;
  top:-7px;
  min-width:38px;
  padding:2px 5px;
  border-radius:999px;
  border:1px solid rgba(112,255,128,0.72);
  background:linear-gradient(180deg,rgba(21,92,36,0.96),rgba(7,38,17,0.96));
  color:#baffc4;
  font-size:9px;
  font-weight:900;
  letter-spacing:0.2px;
  text-align:center;
  box-shadow:0 0 10px rgba(80,255,112,0.32),0 3px 8px rgba(0,0,0,0.45);
  pointer-events:none;
}
.deck-stack.has-horizontal-card .deck-stack-card {
  box-shadow:5px 5px 0 rgba(0,0,0,0.28),0 0 12px rgba(80,255,112,0.28);
}
.deck-count { font-weight:700; color:#ddd; }
.zone-row { display:flex; gap:8px; align-items:center; min-height:40px; padding:2px 4px; overflow:visible; }
.zone-label { font-size:10px; color:#666; width:56px; text-align:right; flex-shrink:0; text-transform:uppercase; letter-spacing:1px; }
.zone-cards { display:flex; gap:4px; flex-wrap:wrap; flex:1; min-height:50px; padding:4px; border-radius:6px; }
.battle-zone { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); min-height:80px; }
.mana-zone { background:rgba(255,255,255,0.02); }
.shield-zone { background:rgba(255,255,255,0.02); }
.hand-zone { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); min-height:80px; }
.grave-zone { background:rgba(255,255,255,0.02); }
/* Dedicated Field zone — sits at the far right of each player's battle row, separate from the main
   battle zone. Fields appear here permanently (TCG convention: fields are flat, off to the side). */
.field-zone { background:rgba(170,136,255,0.05); border:1px dashed rgba(170,136,255,0.2); min-height:80px; flex:0 0 auto; min-width:100px; max-width:240px; display:flex; gap:4px; flex-wrap:wrap; padding:4px; border-radius:6px; align-items:center; justify-content:center; }
.field-zone:empty::before { content:'Fields / Fortresses'; font-size:9px; color:#555; letter-spacing:1px; }
.forbidden-zone { position:relative; z-index:28; overflow:visible; background:radial-gradient(circle at 50% 45%,rgba(255,55,32,0.22),rgba(112,16,12,0.16) 58%,rgba(44,7,7,0.18)); border:1px dashed rgba(255,84,62,0.55); min-height:112px; flex:0 0 146px; min-width:146px; max-width:146px; display:flex; align-items:center; justify-content:center; padding:3px; border-radius:6px; box-shadow:inset 0 0 18px rgba(255,42,28,0.12); }
.final-forbidden-field-zone { background:radial-gradient(circle at 50% 45%,rgba(255,205,76,0.18),rgba(91,38,18,0.18) 58%,rgba(35,9,8,0.2)); border-color:rgba(255,203,92,0.5); box-shadow:inset 0 0 18px rgba(255,157,42,0.11),0 0 10px rgba(255,162,54,0.08); }
.forbidden-impulse-stack { position:relative; z-index:30; width:136px; height:102px; flex:0 0 136px; cursor:help; transition:filter 0.14s ease; }
.forbidden-impulse-stack::before,
.forbidden-impulse-stack::after { content:none; }
.forbidden-impulse-stack:hover,
.forbidden-impulse-stack.hover-stable { transform:scale(1.04); z-index:40; filter:drop-shadow(0 0 14px rgba(255,95,44,0.38)); }
.forbidden-impulse-face { position:absolute; left:43px; top:17px; width:50px; height:70px; z-index:2; border-radius:6px; overflow:hidden; border:1px solid rgba(255,222,160,0.58); box-shadow:0 10px 20px rgba(0,0,0,0.55),0 0 var(--forbidden-glow-inner,8px) rgba(255,88,40,var(--forbidden-glow-inner-alpha,0.18)); pointer-events:none; transition:border-color 95ms ease-out, box-shadow 95ms ease-out, filter 95ms ease-out; will-change:border-color,box-shadow,filter; }
.forbidden-impulse-face::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(0,0,0,0.28)); pointer-events:none; }
.forbidden-impulse-face .card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:5px; }
.final-forbidden-field-stack .forbidden-impulse-face { left:15px; top:23px; width:106px; height:57px; }
.final-forbidden-field-stack .forbidden-impulse-face .card-img { object-fit:contain; background:#050507; }
.forbidden-impulse-name { position:absolute; inset:6px; display:flex; align-items:center; justify-content:center; text-align:center; color:#ffe9c5; font-size:8px; font-weight:800; line-height:1.1; text-shadow:0 1px 4px #000; }
.forbidden-seal-fan { position:absolute; inset:0; z-index:3; pointer-events:none; }
.forbidden-seal-card { position:absolute; width:35px; height:49px; border-radius:5px; overflow:hidden; border:1.5px solid rgba(255,58,46,var(--forbidden-seal-alpha,0.88)); background:#171923; box-shadow:0 7px 14px rgba(0,0,0,0.62),0 0 var(--forbidden-seal-glow,10px) rgba(255,46,34,var(--forbidden-seal-glow-alpha,0.38)); transition:border-color 95ms ease-out, box-shadow 95ms ease-out, filter 95ms ease-out; will-change:border-color,box-shadow,filter; }
.forbidden-seal-card img { width:100%; height:100%; object-fit:cover; display:block; }
.forbidden-seal-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#b8c5d7; font-size:8px; font-weight:900; letter-spacing:0.08em; background:linear-gradient(135deg,#262b36,#121721); }
.forbidden-seal-pos-0 { left:24px; top:-5px; transform:rotate(-43deg); z-index:1; }
.forbidden-seal-pos-1 { left:77px; top:-5px; transform:rotate(43deg); z-index:1; }
.forbidden-seal-pos-2 { left:23px; top:34px; transform:rotate(0deg); z-index:3; }
.forbidden-seal-pos-3 { left:78px; top:34px; transform:rotate(0deg); z-index:3; }
.forbidden-seal-pos-4 { left:24px; top:61px; transform:rotate(43deg); z-index:1; }
.forbidden-seal-pos-5 { left:77px; top:61px; transform:rotate(-43deg); z-index:1; }
.forbidden-seal-count { position:absolute; left:50%; bottom:1px; transform:translateX(-50%); z-index:5; padding:2px 7px; border-radius:999px; background:rgba(7,6,10,0.84); border:1px solid rgba(255,205,138,0.48); color:#ffdba6; font-size:8px; font-weight:900; letter-spacing:0.08em; white-space:nowrap; text-shadow:0 1px 3px #000; box-shadow:0 4px 10px rgba(0,0,0,0.44); }
.forbidden-heartbeat-hit .forbidden-impulse-face { border-color:rgba(255,120,74,var(--forbidden-ring-alpha,0.46)); box-shadow:0 10px 20px rgba(0,0,0,0.55),0 0 var(--forbidden-glow-inner,8px) rgba(255,84,44,var(--forbidden-glow-alpha,0.32)),0 0 var(--forbidden-glow-outer,14px) rgba(255,34,24,var(--forbidden-ring-glow-alpha,0.22)); filter:brightness(1.05); }
.forbidden-heartbeat-hit-strong .forbidden-impulse-face { border-color:rgba(255,90,62,var(--forbidden-ring-alpha,0.46)); box-shadow:0 10px 20px rgba(0,0,0,0.55),0 0 var(--forbidden-glow-inner,8px) rgba(255,72,38,var(--forbidden-glow-alpha,0.32)),0 0 var(--forbidden-glow-outer,14px) rgba(255,28,22,var(--forbidden-ring-glow-alpha,0.22)); filter:brightness(1.08); }
.forbidden-heartbeat-hit .forbidden-seal-card { border-color:rgba(255,92,72,0.98); box-shadow:0 7px 14px rgba(0,0,0,0.62),0 0 var(--forbidden-seal-glow,10px) rgba(255,52,38,var(--forbidden-seal-glow-alpha,0.38)),0 0 var(--forbidden-glow-outer,14px) rgba(255,28,22,var(--forbidden-ring-glow-alpha,0.22)); filter:brightness(1.06); }
.forbidden-heartbeat-hit-strong .forbidden-seal-card { border-color:rgba(255,72,58,1); box-shadow:0 7px 14px rgba(0,0,0,0.62),0 0 var(--forbidden-seal-glow,10px) rgba(255,50,34,var(--forbidden-seal-glow-alpha,0.38)),0 0 var(--forbidden-glow-outer,14px) rgba(255,22,18,var(--forbidden-ring-glow-alpha,0.22)); filter:brightness(1.1); }
.zone-cards.zeron-zone { position:relative; z-index:27; overflow:visible; min-height:120px; flex:0 0 178px; min-width:178px; max-width:178px; display:flex; align-items:center; justify-content:center; padding:3px; border-radius:8px; border:1px dashed rgba(75,205,255,0.46); background:radial-gradient(circle at 50% 45%,rgba(78,210,255,var(--zeron-center-alpha,0.22)),rgba(20,54,86,0.18) 58%,rgba(4,12,22,0.28)); box-shadow:inset 0 0 20px rgba(55,188,255,0.12),0 0 10px rgba(65,188,255,0.08); }
.zeron-slot-stack { position:relative; z-index:30; width:168px; height:112px; flex:0 0 168px; cursor:help; }
.zeron-slot-card { position:absolute; border-radius:5px; overflow:hidden; border:1.5px solid rgba(146,205,238,0.5); background:#111925; box-shadow:0 7px 14px rgba(0,0,0,0.58); cursor:help; transition:filter 0.14s ease, transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, left 0.22s ease, right 0.22s ease, top 0.22s ease, bottom 0.22s ease; }
.zeron-slot-card img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.zeron-slot-card::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(0,0,0,0.24)); }
.zeron-slot-card:hover,
.zeron-slot-card.hover-stable { transform:scale(1.045); z-index:20; filter:brightness(1.06); }
.zeron-slot-card.linked { z-index:7; border-color:rgba(106,217,255,0.98); box-shadow:0 7px 14px rgba(0,0,0,0.58),0 0 var(--zeron-glow-size,10px) rgba(71,209,255,var(--zeron-glow-alpha,0.42)),0 0 calc(var(--zeron-glow-size,10px) * 1.7) rgba(93,126,255,var(--zeron-glow-soft-alpha,0.19)); animation:zeron-linked-pulse 1.85s ease-in-out infinite; animation-delay:var(--zeron-pulse-delay, 0ms); animation-fill-mode:both; }
.zeron-top-left { left:7px; top:3px; width:38px; height:52px; }
.zeron-bottom-left { left:7px; bottom:3px; width:38px; height:52px; }
.zeron-top-right { right:7px; top:3px; width:38px; height:52px; }
.zeron-bottom-right { right:7px; bottom:3px; width:38px; height:52px; }
.zeron-top-left.linked { left:25px; top:3px; }
.zeron-bottom-left.linked { left:25px; bottom:3px; }
.zeron-top-right.linked { right:25px; top:3px; }
.zeron-bottom-right.linked { right:25px; bottom:3px; }
.zeron-center { left:63px; top:27px; width:42px; height:58px; z-index:8; border-color:rgba(190,231,255,0.7); box-shadow:0 9px 16px rgba(0,0,0,0.58),0 0 12px rgba(75,209,255,0.26); }
.zeron-slot-missing { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:3px; text-align:center; color:#bfeeff; font-size:7px; font-weight:900; line-height:1.05; background:linear-gradient(135deg,#122438,#0c1019); text-shadow:0 1px 3px #000; pointer-events:none; }
.zeron-link-count { position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); z-index:24; padding:2px 8px; border-radius:999px; background:rgba(5,10,18,0.86); border:1px solid rgba(116,220,255,0.52); color:#c8f5ff; font-size:8px; font-weight:900; letter-spacing:0.08em; white-space:nowrap; text-shadow:0 1px 3px #000; box-shadow:0 4px 10px rgba(0,0,0,0.46),0 0 9px rgba(65,201,255,0.16); pointer-events:none; }
@keyframes zeron-linked-pulse {
  0%,100% { filter:brightness(1); }
  50% { filter:brightness(1.16); box-shadow:0 7px 14px rgba(0,0,0,0.58),0 0 calc(var(--zeron-glow-size,10px) * 1.28) rgba(82,222,255,var(--zeron-glow-alpha,0.42)),0 0 calc(var(--zeron-glow-size,10px) * 2.1) rgba(97,138,255,var(--zeron-glow-peak-soft-alpha,0.23)); }
}
/* ── FORBIDDEN STAR ~World's Last Day~: the 5-card Final Forbidden Field cross (mirrors .zeron-zone). ── */
.zone-cards.final-forbidden-field-zone { position:relative; z-index:27; overflow:visible; min-height:134px; flex:0 0 188px; min-width:188px; max-width:188px; display:flex; align-items:center; justify-content:center; padding:3px; border-radius:8px; border:1px dashed rgba(200,90,255,0.5); background:radial-gradient(circle at 50% 45%,rgba(160,45,215,calc(var(--forbidden-bg-alpha,0.18))),rgba(48,16,70,0.2) 58%,rgba(10,4,18,0.3)); box-shadow:inset 0 0 20px rgba(150,40,210,0.14),0 0 var(--forbidden-glow-outer,16px) rgba(185,65,255,var(--forbidden-glow-alpha,0.4)); }
.ffield-slot-stack { position:relative; z-index:30; width:178px; height:126px; flex:0 0 178px; cursor:help; }
/* The FFL card pieces are LANDSCAPE scans, so the slots are landscape (wider than tall). overflow is
   VISIBLE so the tapped seal-card sitting on top (and its glow) isn't clipped; the art is clipped by the
   img's own border-radius instead. */
.ffield-slot-card { position:absolute; border-radius:5px; overflow:visible; border:1.5px solid rgba(210,150,238,0.5); background:#1a1020; box-shadow:0 7px 14px rgba(0,0,0,0.58),0 0 var(--forbidden-glow-inner,10px) rgba(190,70,255,var(--forbidden-ring-glow-alpha,0.28)); cursor:help; transition:filter 0.14s ease, transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; }
.ffield-slot-card img.ffield-corner-img,
.ffield-slot-card.ffield-center img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; border-radius:4px; }
.ffield-slot-card:hover,
.ffield-slot-card.hover-stable { transform:scale(1.05); z-index:25; filter:brightness(1.07); }
.ffield-top-left { left:4px; top:3px; width:52px; height:37px; }
.ffield-bottom-left { left:4px; bottom:3px; width:52px; height:37px; }
.ffield-top-right { right:4px; top:3px; width:52px; height:37px; }
.ffield-bottom-right { right:4px; bottom:3px; width:52px; height:37px; }
.ffield-center { left:60px; top:43px; width:58px; height:40px; z-index:8; border-color:rgba(232,190,255,0.72); box-shadow:0 9px 16px rgba(0,0,0,0.58),0 0 12px rgba(200,80,255,0.3); }
.ffield-slot-missing { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:3px; text-align:center; color:#f0d4ff; font-size:7px; font-weight:900; line-height:1.05; background:linear-gradient(135deg,#2a1438,#140a1e); text-shadow:0 1px 3px #000; pointer-events:none; }
/* The seal is a real face-down card the SAME SIZE as the corner card, sitting on top with a slight
   offset so the corner card peeks out underneath. The portrait card-back sleeve is rotated 90° to fill
   the landscape card. Normal draggable seal (data-uid + manual-seal-draggable) so it can be pulled off. */
.ffield-corner-seal { position:absolute; left:50%; top:50%; transform:translate(calc(-50% + 3px), calc(-50% - 3px)); width:52px; height:37px; border-radius:5px; overflow:hidden; border:1.5px solid rgba(202,132,242,0.96); box-shadow:0 3px 10px rgba(0,0,0,0.66),0 0 var(--forbidden-seal-glow,12px) rgba(185,70,255,0.6); background:#171327; z-index:40; pointer-events:auto; }
.ffield-corner-seal .ffield-seal-back { position:absolute; left:50%; top:50%; width:37px; height:52px; object-fit:cover; transform:translate(-50%,-50%) rotate(90deg); display:block; pointer-events:none; }
.ffield-corner-seal .forbidden-seal-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:7px; font-weight:900; color:#e6c8ff; }
/* ── Dormageddon X (awakened): the combined creature as 5 FULL-SIZE cards in a plus, INSIDE the battle
   zone. Each .dplus-cell holds an ordinary renderCardHTML card (so it keeps every normal interaction —
   drag, menu, tap, ▲/▼ stacking tabs); the cells are absolutely placed into a plus, with a moderate
   overlap (center on top) so the footprint stays compact while all 5 pieces read as one creature. ── */
/* Top-anchored so removing the bottom piece shrinks the group from below (board shrinks toward normal)
   without lowering the center/top. The center only shifts to make room for present left/top pieces. */
.dormageddon-plus-group { position:relative; flex:0 0 auto; align-self:flex-start; margin:2px 8px; }
.dplus-cell { position:absolute; width:62px; height:86px; }
.dplus-cell .card { margin:0 !important; }   /* the tapped-card clearance margin would skew the rotation layout */
.dplus-center { z-index:4; }   /* keep the center (and its pile fan, when a side is pulled under) above the others */
.divider { height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); margin:2px 0; }
.phase-bar { text-align:center; font-size:13px; padding:4px; color:#ffdd44; font-weight:600; letter-spacing:1px; }

/* ── Cards ── */
.card { width:68px; height:94px; border-radius:6px; padding:4px; display:flex; flex-direction:column; justify-content:space-between; cursor:default; position:relative; transition:transform 0.15s,box-shadow 0.15s; border:2px solid rgba(255,255,255,0.2); font-size:10px; flex-shrink:0; user-select:none; }
.card.tapped { transform:rotate(90deg); margin:10px 6px; }
/* Fields and in-battle Orega Auras are natively landscape-shaped.
   Using swapped width/height (instead of transform:rotate) keeps the art upright — rotating the
   whole container would also rotate the image inside it, which is wrong for landscape art scans. */
.card.card-field,
.card.card-orega-aura { width:94px; height:68px; transform:none; margin:4px; flex-direction:row; align-items:center; padding:3px 6px; }
.card.card-field .card-name,
.card.card-orega-aura .card-name { font-size:8px; line-height:1.1; flex:1; text-align:left; padding:0 4px; }
.card.card-field .card-cost,
.card.card-orega-aura .card-cost { position:static; flex:0 0 auto; }
.card.card-field .card-power,
.card.card-orega-aura .card-power { position:static; flex:0 0 auto; font-size:7px; }
.card.card-field.tapped,
.card.card-orega-aura.tapped { transform:none; } /* Landscape card types don't tap; ignore the class if ever applied */
.card.clickable { cursor:pointer; box-shadow:0 0 8px rgba(255,255,200,0.5); border-color:rgba(255,255,200,0.7); animation:glow 1.5s ease-in-out infinite alternate; }
.card.clickable:hover { transform:scale(1.08); z-index:10; box-shadow:0 0 16px rgba(255,255,200,0.8); }
.card.clickable.tapped:hover { transform:rotate(90deg) scale(1.08); }
.card.selected { border-color:#00ff88 !important; box-shadow:0 0 12px rgba(0,255,136,0.6) !important; }
.card.facedown { background:#2a2a3a !important; border-color:#444; }
.card.facedown .card-cost,.card.facedown .card-name,.card.facedown .card-power,.card.facedown .card-icons { visibility:hidden; }
.card.facedown .card-img { display:none; }
.card.facedown .fortified-castle-attachment .card-img { display:block; }
.card.facedown .shield-top-faceup-attachment .card-img { display:block; }
.card-back-img { position:absolute; inset:0; border-radius:4px; object-fit:cover; width:100%; height:100%; }
.card.ex-life-shield { border-color:#f4d35e !important; box-shadow:0 0 10px rgba(244,211,94,0.45), inset 0 0 0 1px rgba(244,211,94,0.35); }
.ex-life-shield-badge { position:absolute; left:3px; right:3px; bottom:3px; z-index:4; padding:2px 2px; border-radius:4px; border:1px solid rgba(255,238,156,0.7); background:linear-gradient(180deg,rgba(84,55,10,0.95),rgba(28,20,8,0.95)); color:#ffefae; text-align:center; font-weight:800; font-size:6px; line-height:1.05; letter-spacing:0.3px; text-shadow:0 1px 2px rgba(0,0,0,0.9); pointer-events:none; }
.ex-life-shield-badge .ex-life-source { display:block; margin-top:1px; color:#fff9d9; font-size:5px; font-weight:700; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-small .ex-life-shield-badge { left:2px; right:2px; bottom:2px; font-size:5px; }
.card-small .ex-life-shield-badge .ex-life-source { font-size:4.5px; }
.card.shield-force-shield { border-color:#8bd9ff !important; box-shadow:0 0 10px rgba(83,190,255,0.45), inset 0 0 0 1px rgba(139,217,255,0.35); }
.shield-force-shield-badge { position:absolute; left:3px; right:3px; top:3px; z-index:4; padding:2px 2px; border-radius:4px; border:1px solid rgba(139,217,255,0.75); background:linear-gradient(180deg,rgba(12,75,118,0.96),rgba(6,22,36,0.96)); color:#bdeeff; text-align:center; font-weight:800; font-size:6px; line-height:1.05; letter-spacing:0.3px; text-shadow:0 1px 2px rgba(0,0,0,0.9); pointer-events:none; }
.shield-force-shield-badge .shield-force-source { display:block; margin-top:1px; color:#effaff; font-size:5px; font-weight:700; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-small .shield-force-shield-badge { left:2px; right:2px; top:2px; font-size:5px; }
.card-small .shield-force-shield-badge .shield-force-source { font-size:4.5px; }
.card.fortified-castle-shield { border-color:#74d9ff !important; box-shadow:0 0 10px rgba(83,190,255,0.36), inset 0 0 0 1px rgba(116,217,255,0.28); z-index:18; }
.card.face-up-stack-shield { z-index:22; overflow:visible; }
.card.face-up-stack-shield:hover,
.card.face-up-stack-shield.clickable:hover { z-index:42; }
.equipped-weapon { position:absolute; top:var(--attachment-top,-12px); right:var(--attachment-right,-14px); width:40px; height:56px; border-radius:4px; border:1.5px solid #ff8844; z-index:12; display:flex; flex-direction:column; justify-content:space-between; padding:2px; font-size:6px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.5); }
.equipped-weapon::before { content:''; position:absolute; inset:-7px; border-radius:9px; }
.equipped-weapon:hover { z-index:30; transform:translateY(-1px); }
.crossed-gear { top:var(--attachment-top,-12px); bottom:auto; right:var(--attachment-right,var(--crossed-gear-right,-14px)); border-color:#ffd166; box-shadow:0 2px 8px rgba(0,0,0,0.55),0 0 10px rgba(255,209,102,0.35); }
.fortified-castle-attachment { top:var(--attachment-top,-12px); right:var(--attachment-right,-14px); z-index:32; border-color:#74d9ff; box-shadow:0 2px 8px rgba(0,0,0,0.55),0 0 11px rgba(116,217,255,0.38); }
.shield-top-faceup-attachment { top:var(--attachment-top,-12px); right:var(--attachment-right,-14px); z-index:34; border-color:#ffe58d; box-shadow:0 2px 8px rgba(0,0,0,0.55),0 0 12px rgba(255,229,141,0.42); }
.equipped-weapon .card-img { position:absolute; inset:0; border-radius:3px; object-fit:cover; width:100%; height:100%; pointer-events:none; }
.equipped-weapon.has-img .eq-cost,.equipped-weapon.has-img .eq-name { display:none; }
.eq-cost { font-weight:700; font-size:8px; }
.eq-name { font-size:5px; text-align:center; line-height:1.1; }
.card-cost { font-weight:700; font-size:12px; }
.card-name { font-size:8px; line-height:1.2; text-align:center; flex:1; display:flex; align-items:center; justify-content:center; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,0.7); }
.card-power { font-weight:700; font-size:11px; text-align:right; }
.card-icons { position:absolute; top:2px; right:4px; font-size:9px; }
.card-small { width:48px; height:66px; }
.card-small.card-orega-aura { width:66px; height:48px; }
.card-small .fortified-castle-attachment { width:36px; height:50px; }
.card-small .equipped-weapon.orega-aura { width:50px; height:36px; }
.card-small .card-cost { font-size:10px; }
.card-small .card-name { font-size:7px; }
.card-small .card-power { font-size:9px; }
.card-small .card-icons { font-size:7px; }

.card-animation-layer { position:fixed; inset:0; z-index:99999; pointer-events:none; overflow:visible; }
.card-move-ghost { position:fixed; pointer-events:none; transform-origin:center center; will-change:transform,opacity,filter; filter:brightness(1.12); box-shadow:0 10px 22px rgba(0,0,0,0.38); border-radius:8px; }
.card-move-ghost .card { width:100% !important; height:100% !important; margin:0 !important; pointer-events:none !important; animation:none !important; box-sizing:border-box; }
.card-move-ghost .card.clickable { box-shadow:0 8px 18px rgba(0,0,0,0.45); border-color:rgba(255,255,255,0.38); }
.card-animation-destination-hidden { opacity:0 !important; }

/* Civilization colors */
.civ-fire { background:linear-gradient(135deg,#8b1a1a,#cc3333); color:#ffe0d0; }
.civ-water { background:linear-gradient(135deg,#1a2a6b,#3366cc); color:#d0e0ff; }
.civ-nature { background:linear-gradient(135deg,#1a5b1a,#33aa33); color:#d0ffd0; }
.civ-light { background:linear-gradient(135deg,#6b5a1a,#ccaa33); color:#fff8d0; }
.civ-darkness { background:linear-gradient(135deg,#3a1a5b,#663399); color:#e8d0ff; }
.civ-colorless { background:linear-gradient(135deg,#2d3139,#727a86); color:#f4f5f6; }
.civ-multi { color:#f0f0f0; border-color:rgba(255,255,255,0.4); }
.neo-evo-badge { position:absolute; bottom:1px; left:3px; font-size:7px; color:#ffdd44; font-weight:700; text-shadow:0 1px 2px #000; letter-spacing:0.5px; }
.card.has-img .neo-evo-badge { background:rgba(0,0,0,0.7); padding:1px 4px; border-radius:3px; }
.card.has-img .card-cost { background:rgba(0,0,0,0.6); border-radius:3px; padding:0 3px; }
.card.has-img .card-power { background:rgba(0,0,0,0.6); border-radius:3px; padding:0 3px; }
.card.has-img .card-icons { background:rgba(0,0,0,0.6); border-radius:3px; padding:0 3px; }
.evo-clickable { cursor:pointer; text-decoration:underline dotted; z-index:5; padding:2px 4px; margin:-2px -4px; }
.equipment-clickable { color:#ffd166 !important; border-color:rgba(255,209,102,0.38) !important; cursor:pointer; text-decoration:underline dotted; z-index:6; }
.shield-stack-clickable { cursor:pointer; text-decoration:underline dotted; z-index:7; padding:2px 4px; margin:-2px -4px; }

@keyframes glow { from{box-shadow:0 0 6px rgba(255,255,200,0.4)} to{box-shadow:0 0 14px rgba(255,255,200,0.7)} }

/* ── Sidebar ── */
.sidebar { display:flex; flex-direction:column; border-left:1px solid #222; background:#0f0f1f; height:100vh; overflow:hidden; }
.log-panel { flex:1; overflow-y:auto; padding:8px; font-size:11px; line-height:1.5; min-height:0; }
.log-panel div { padding:2px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.log-turn { color:#ffdd44; font-weight:700; margin-top:6px; }
.log-action { color:#ccc; }
.log-damage { color:#ff6644; }
.log-effect { color:#88bbff; }
.log-card-name { color:#ffdd66; text-decoration:underline dotted; cursor:pointer; }
.card-name-ref { color:#ffdd66; text-decoration:underline dotted; text-decoration-color:rgba(255,221,102,0.7); cursor:pointer; }
.card-img { position:absolute; inset:0; border-radius:4px; object-fit:cover; width:100%; height:100%; }
.card.card-mana-zone > .card-img,
.card.card-mana-zone > .card-back-img { transform:rotate(180deg); }
.card.has-img .card-name { display:none; }
.card.has-img { border:2px solid rgba(255,255,255,0.3); }
.tt-card-img { width:200px; border-radius:6px; margin-bottom:8px; display:block; }
.card-tooltip { position:fixed; z-index:999; background:#1a1a2e; border:1px solid #444; border-radius:8px; padding:10px 14px; max-width:280px; pointer-events:none; display:none; box-shadow:0 4px 16px rgba(0,0,0,0.6); }
.card-tooltip.visible { display:block; }
.card-tooltip h3 { font-size:13px; margin-bottom:3px; color:#fff; }
.card-tooltip .tt-stats { font-size:11px; color:#aaa; margin-bottom:3px; }
.card-tooltip .tt-text { font-size:10px; color:#ccc; line-height:1.3; font-style:normal; }
.rules-reminder { font-style:italic; }
.card-tooltip .tt-flip { font-size:9px; color:#aa88ff; margin-top:4px; }
.card-links-box {
  margin-top:8px;
  padding-top:7px;
  border-top:1px dashed rgba(143,238,229,0.28);
  font-size:10px;
}
.card-links-box summary {
  color:#8feee5;
  cursor:pointer;
  font-weight:800;
  outline:none;
}
.card-links-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.card-links-list a {
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 7px;
  border:1px solid rgba(143,238,229,0.35);
  border-radius:4px;
  background:rgba(143,238,229,0.08);
  color:#e9fffb;
  text-decoration:none;
  font-weight:700;
}
.card-links-list a:hover {
  background:rgba(143,238,229,0.18);
  border-color:rgba(143,238,229,0.66);
}
.card-tooltip.multi { max-width:min(96vw, 980px); }
/* Manual free play: the tooltip is a MOVABLE WINDOW — grabbable (pointer-events on), with a drag
   cursor and a × close button. It passes pointer events through while a card is being dragged so a
   parked window never blocks a drop underneath. */
.card-tooltip.manual-tt-window { pointer-events:auto; cursor:grab; }
.card-tooltip.manual-tt-window.manual-tt-dragging { cursor:grabbing; user-select:none; box-shadow:0 8px 26px rgba(0,0,0,0.7); }
/* Click-through while the cursor is over a card beneath the window (set in JS) — the card wins, so a
   parked window never makes the card under it undraggable. The × stays clickable so you can still
   dismiss the window from over a card. Same passthrough applies while a card is being dragged. */
.card-tooltip.manual-tt-window.manual-tt-passthrough,
.card-tooltip.manual-tt-window.tt-passive { pointer-events:none; }
.card-tooltip.manual-tt-window.tt-passive .tt-close { pointer-events:auto; }
.card-tooltip .tt-close { display:none; }
.card-tooltip.manual-tt-window .tt-close { display:flex; align-items:center; justify-content:center; position:absolute; top:4px; right:4px; width:18px; height:18px; padding:0; border:1px solid #555; border-radius:50%; background:rgba(40,40,60,0.9); color:#ccc; font-size:14px; line-height:1; cursor:pointer; z-index:2; }
.card-tooltip.manual-tt-window .tt-close:hover { background:#c0392b; color:#fff; border-color:#e74c3c; }
.card-tooltip .tt-multi { display:flex; gap:12px; align-items:flex-start; }
.card-tooltip .tt-card-panel { width:220px; flex:0 0 220px; }
.card-tooltip.multi .tt-card-img { width:100%; }

.dm-language-toggle {
  position:fixed;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:1200;
  pointer-events:auto;
}

.dm-language-toggle button {
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:28px;
  padding:5px 9px;
  border:1px solid rgba(143, 238, 229, 0.55);
  border-radius:6px;
  background:rgba(11, 17, 28, 0.86);
  color:#dbe7f2;
  font-size:11px;
  font-weight:800;
  letter-spacing:0;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(0, 0, 0, 0.38);
}

.dm-language-toggle button:hover {
  border-color:#8feee5;
  color:#ffffff;
}

.dm-language-toggle .dm-lang-divider {
  color:#75889a;
}

.dm-lang-en .dm-language-toggle .dm-lang-label-en,
.dm-lang-ja .dm-language-toggle .dm-lang-label-ja {
  color:#fff4a3;
}

/* ── Settings (gear button + panel, bottom-left) ── */
.dm-settings-btn {
  position:fixed; left:12px; bottom:12px; z-index:1500;
  width:38px; height:38px; border-radius:50%;
  background:rgba(18,20,34,0.94); color:#cfd6e6; border:1px solid rgba(255,255,255,0.18);
  font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.5); transition:transform 0.18s,border-color 0.15s,color 0.15s;
}
.dm-settings-btn:hover { border-color:#88aaff; color:#fff; transform:rotate(45deg); }
.dm-settings-panel {
  position:fixed; left:12px; bottom:58px; z-index:1500; width:236px;
  background:linear-gradient(180deg,#171b29,#0e111b); border:1px solid rgba(255,255,255,0.16);
  border-radius:12px; padding:12px 14px; box-shadow:0 18px 44px rgba(0,0,0,0.62); color:#dfe4f0;
}
.dm-settings-panel[hidden] { display:none; }
.dm-settings-head { font-size:13px; font-weight:700; color:#9fb4d8; margin-bottom:10px; letter-spacing:0.4px; }
.dm-settings-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:9px 0; font-size:12px; }
.dm-settings-row label { color:#aeb6c6; white-space:nowrap; }
.dm-settings-btn-toggle { background:#1c2233; color:#cdd6ea; border:1px solid #36405a; border-radius:6px; padding:4px 10px; font-size:11px; cursor:pointer; transition:border-color 0.15s,background 0.15s,color 0.15s; }
.dm-settings-btn-toggle:hover { border-color:#6f87c0; }
.dm-lang-mini .ja, .dm-lang-mini .sep { opacity:0.42; }
.dm-lang-mini.is-ja .ja { opacity:1; } .dm-lang-mini.is-ja .en { opacity:0.42; }
.dm-settings-row input[type=range] { flex:1; min-width:0; accent-color:#88aaff; cursor:pointer; }
.dm-settings-val { min-width:36px; text-align:right; color:#9fb4d8; }

/* ── Font-size scale (Settings → Font size): TEXT-ONLY scaling. We no longer `zoom` whole surfaces
      (that scaled images/padding/layout and even the title screen). Instead the reading-surface
      font-sizes are re-declared with calc(<base>px * var(--dm-font-scale)) in the block at the END of
      this file (source-order wins over the base px). --dm-font-scale is 1 at the default 16px. ── */

.db-detail-panel .db-det-flavor {
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed rgba(255, 255, 255, 0.16);
  color:#aaa;
  font-size:11px;
  line-height:1.45;
  font-style:italic;
  white-space:pre-wrap;
}
.mana-symbol { display:inline-flex; align-items:center; justify-content:center; min-width:1.55em; height:1.55em; padding:0 .22em; border-radius:999px; margin:0 .08em; color:#fff; font-size:.92em; line-height:1; font-style:normal; font-weight:900; vertical-align:-0.2em; border:1px solid rgba(255,255,255,0.42); box-shadow:inset 0 1px 2px rgba(255,255,255,0.34), inset 0 -3px 6px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.38); text-shadow:0 1px 2px rgba(0,0,0,0.8); }
.mana-symbol-fire { background:linear-gradient(145deg,#ff8a4b,#c22a21 58%,#5b120e); }
.mana-symbol-water { background:linear-gradient(145deg,#59d8ff,#2363c7 58%,#10285f); }
.mana-symbol-nature { background:linear-gradient(145deg,#8af06b,#2e9f38 58%,#124d1e); }
.mana-symbol-light { background:linear-gradient(145deg,#fff4a4,#d5a533 58%,#785612); color:#3b2a07; text-shadow:0 1px 0 rgba(255,255,255,0.45); }
.mana-symbol-darkness { background:linear-gradient(145deg,#cf8cff,#6a2c91 58%,#271231); }
.mana-symbol-colorless { background:linear-gradient(145deg,#f1f4f7,#9aa4ad 58%,#49515a); color:#20252b; text-shadow:0 1px 0 rgba(255,255,255,0.45); }
.mana-symbol-multi { background:var(--mana-gradient); }
.rules-icon {
  display:inline-block;
  width:1.42em;
  height:1.42em;
  margin:0 .28em 0 .02em;
  object-fit:contain;
  vertical-align:-0.38em;
}
.rules-icon-blocker,
.rules-icon-shieldTrigger {
  width:1.32em;
  height:1.32em;
  vertical-align:-0.33em;
}
.rules-icon-shieldTriggerPlusSecond {
  width:1em;
  height:1em;
  margin-right:.34em;
  vertical-align:-0.22em;
}
.rules-icon-shieldForce {
  height:1.62em;
  vertical-align:-0.5em;
}
.action-panel { border-top:1px solid #222; padding:8px; display:flex; flex-direction:column; gap:6px; }
.action-btn { padding:10px; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:background 0.2s; }
.btn-charge { background:#335533; color:#88ff88; }
.btn-charge:hover { background:#447744; }
.btn-charge:disabled { background:#222; color:#555; cursor:default; }
.btn-end { background:#553333; color:#ff8888; }
.btn-end:hover { background:#774444; }
.btn-end:disabled { background:#222; color:#555; cursor:default; }
.btn-skip { background:#333355; color:#8888ff; }
.btn-skip:hover { background:#444477; }

/* ── Modal ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.28); z-index:100; justify-content:center; align-items:center; pointer-events:none; }
.modal-overlay.active { display:flex; }
.modal { background:#1a1a2e; border:1px solid #333; border-radius:12px; padding:20px; max-width:700px; max-height:80vh; overflow-y:auto; min-width:300px; pointer-events:auto; }
.modal h3 { margin-bottom:12px; color:#ffdd44; cursor:move; user-select:none; touch-action:none; }
.modal-cards { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; justify-content:center; }
.modal.modal-choice-list { width:max-content; max-width:min(92vw, 980px); max-height:none; overflow:visible; }
.modal.modal-choice-list h3 { max-width:min(84vw, 900px); margin-left:auto; margin-right:auto; text-align:center; }
.deck-search-list { display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:10px; max-width:min(84vw, 900px); overflow:visible; padding:12px 14px 18px; margin:0 auto 16px; }
.deck-search-card { position:relative; display:flex; justify-content:center; width:max-content; max-width:100%; transition:opacity 0.15s ease, filter 0.15s ease; }
.deck-search-card.disabled { opacity:0.34; filter:grayscale(0.55) saturate(0.7); cursor:not-allowed; }
.deck-search-card.disabled .card { box-shadow:none; border-color:rgba(255,255,255,0.14); }
.modal-buttons { display:flex; gap:8px; justify-content:center; }
.modal-buttons button { padding:8px 20px; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; }
.modal-confirm { background:#335533; color:#88ff88; }
.modal-cancel { background:#553333; color:#ff8888; }
.modal-confirm:disabled { background:#222; color:#555; cursor:default; }

/* ── Target indicators ── */
.attack-player-target { min-height:40px; border:2px dashed transparent; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#666; margin:4px; transition:all 0.2s; }
.attack-player-target.clickable { border-color:#ff6644; color:#ff6644; cursor:pointer; background:rgba(255,102,68,0.1); }
.attack-player-target.clickable:hover { background:rgba(255,102,68,0.25); }

/* ── Win screen ── */
.win-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:200; justify-content:center; align-items:center; flex-direction:column; gap:20px; }
.win-overlay.active { display:flex; }
.win-overlay h2 { font-size:36px; }
.win-overlay button { padding:12px 32px; font-size:16px; border:none; border-radius:8px; cursor:pointer; background:#335533; color:#88ff88; }

/* ── Deck Builder ── */
#deckbuilder-screen { display:none; height:100vh; flex-direction:column; }
.db-header { height:50px; display:flex; align-items:center; gap:16px; padding:0 16px; border-bottom:1px solid #222; background:#0f0f1f; flex-shrink:0; }
.db-header h2 { flex:1; font-size:18px; color:#ffdd44; }
.db-header button { padding:6px 16px; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; }
.db-back-btn { background:#553333; color:#ff8888; }
.db-back-btn:hover { background:#774444; }

.db-layout { display:grid; grid-template-columns:minmax(320px, var(--db-pool-width, 1fr)) 8px minmax(220px, var(--db-info-width, 340px)) 8px minmax(260px, var(--db-deck-width, 320px)); flex:1; overflow:hidden; min-width:0; width:100%; }
.db-resize-handle { position:relative; width:8px; min-width:8px; cursor:col-resize; background:rgba(255,255,255,0.035); border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(0,0,0,0.35); touch-action:none; z-index:4; }
.db-resize-handle::before { content:''; position:absolute; left:50%; top:10px; bottom:10px; width:2px; transform:translateX(-50%); border-radius:999px; background:rgba(240,199,102,0.16); transition:background 0.12s, box-shadow 0.12s; }
.db-resize-handle:hover::before,
.db-resize-handle:focus-visible::before,
.db-resize-handle.active::before { background:rgba(240,199,102,0.78); box-shadow:0 0 10px rgba(240,199,102,0.32); }
.db-resize-handle:focus-visible { outline:1px solid rgba(240,199,102,0.68); outline-offset:-1px; }
.db-layout.is-resizing,
.db-layout.is-resizing * { cursor:col-resize !important; user-select:none !important; }

/* Card Pool */
.db-pool { display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.db-filters { display:flex; gap:4px; padding:8px 12px; flex-wrap:wrap; align-items:center; border-bottom:1px solid #1a1a2e; background:#0a0a1a; min-width:0; }
.db-filter-btn { padding:5px 12px; border:1px solid #333; border-radius:4px; background:#1a1a2e; color:#888; cursor:pointer; font-size:12px; transition:all 0.15s; }
.db-filter-btn:hover { border-color:#555; color:#ccc; }
.db-filter-btn.active { border-color:#88ff88; color:#88ff88; background:#1a2e1a; }
.db-filter-btn.civ-fire-f.active { border-color:#ff6644; color:#ff6644; background:#2e1a1a; }
.db-filter-btn.civ-water-f.active { border-color:#4488ff; color:#4488ff; background:#1a1a2e; }
.db-filter-btn.civ-nature-f.active { border-color:#44cc44; color:#44cc44; background:#1a2e1a; }
.db-filter-btn.civ-light-f.active { border-color:#ffdd44; color:#ffdd44; background:#2e2e1a; }
.db-filter-btn.civ-darkness-f.active { border-color:#aa66ff; color:#aa66ff; background:#2a1a3e; }
.db-filter-group { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.db-filter-spacer { flex:1; min-width:12px; }
.db-sort-label { font-size:11px; color:#777; }
.db-sort-select { background:#1a1a2e; color:#aaa; border:1px solid #333; border-radius:4px; padding:3px 6px; font-size:11px; cursor:pointer; }
/* Searchable dropdown (Tag / Cost / Power / Rarity / Set): the trigger keeps the boxy .db-sort-select
   look and is kept as compact as the native <select>s (thin padding + tight line-height). */
.db-search-select { position:relative; display:inline-flex; }
.db-search-select-trigger { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11px; line-height:1.3; text-align:left; padding:3px 6px; }
.db-search-select-trigger .db-ss-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.db-search-select-trigger .db-ss-caret { font-size:8px; opacity:0.6; margin-left:auto; padding-left:2px; }
.db-search-select-trigger:hover { border-color:#555; color:#ccc; }
.db-ss-popup { position:fixed; z-index:3000; background:#12121f; border:1px solid #3a3a55; border-radius:6px; box-shadow:0 12px 34px rgba(0,0,0,0.65); padding:6px; max-width:340px; }
.db-ss-search { width:100%; box-sizing:border-box; background:#1a1a2e; color:#ddd; border:1px solid #3a3a55; border-radius:4px; padding:5px 8px; font-size:12px; margin-bottom:6px; outline:none; }
.db-ss-search:focus { border-color:#5a7fa8; }
.db-ss-search::placeholder { color:#555; }
.db-ss-list { max-height:300px; overflow-y:auto; }
.db-ss-group { font-size:9px; text-transform:uppercase; letter-spacing:0.07em; color:#6a6a85; padding:7px 8px 2px; }
.db-ss-option { padding:5px 9px; font-size:12px; color:#bbb; border-radius:4px; cursor:pointer; white-space:nowrap; }
.db-ss-option:hover, .db-ss-option.db-ss-active { background:#23233a; color:#fff; }
.db-ss-option.selected { color:#88ff88; }
.db-ss-option.selected::after { content:' ✓'; opacity:0.8; }
.db-ss-option.db-ss-custom { color:#8fc8ef; font-style:italic; border-bottom:1px solid #23233a; margin-bottom:2px; }
.db-ss-empty { padding:10px 8px; font-size:11px; color:#666; text-align:center; }
.db-set-filter-select { flex:1 1 360px; min-width:240px; max-width:none; }
.db-syntax-link { background:transparent; border:1px solid #35546b; border-radius:4px; color:#8fc8ef; padding:3px 8px; font-size:11px; cursor:pointer; }
.db-syntax-link:hover { border-color:#7cc7ff; color:#d8f1ff; background:#102131; }
.db-sort-dir-btn { background:#1a1a2e; color:#aaa; border:1px solid #333; border-radius:4px; padding:4px 8px; font-size:11px; cursor:pointer; min-width:62px; }
.db-sort-dir-btn:hover { border-color:#88ff88; color:#ddffdd; }
.db-search { background:#1a1a2e; color:#ccc; border:1px solid #333; border-radius:4px; padding:5px 10px; font-size:12px; width:240px; margin-left:4px; }
.db-search::placeholder { color:#555; }
.db-search:focus { outline:none; border-color:#88ff88; }
.db-pool-count { font-size:11px; color:#7f8b96; min-width:74px; text-align:right; }
.syntax-guide { color:#c8d4df; font-size:12px; line-height:1.45; max-width:720px; }
.syntax-guide p { margin:0 0 10px; }
.syntax-guide code { background:#0b1220; border:1px solid #29384a; border-radius:4px; color:#ffe78c; padding:1px 5px; font-family:Consolas, monospace; font-size:11px; }
.syntax-guide-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; margin:10px 0 12px; }
.syntax-guide-grid div { border:1px solid #283448; border-radius:6px; background:#11182a; padding:7px 8px; }
.syntax-guide-grid span { display:block; color:#9aa8b8; margin-top:4px; }

.db-cards-grid { flex:1; overflow-y:auto; padding:12px; display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; min-width:0; }
.db-cards-grid.db-list-view { display:block; padding:8px 10px; }
.db-cards-grid.db-gallery-view { display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); justify-items:center; align-content:start; }
.db-cards-grid.db-gallery-view .db-card-wrapper { width:80px; }
.db-card-wrapper { position:relative; cursor:pointer; transition:transform 0.12s; }
.db-card-wrapper:hover { transform:scale(1.06); z-index:5; }
.db-card-wrapper.maxed { opacity:0.5; }
.db-card-badge { position:absolute; top:2px; right:2px; min-width:20px; height:20px; box-sizing:border-box; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; z-index:2; padding:0 4px; border:2px solid; }
.db-card-badge.has-copies { background:#1a2e1a; color:#88ff88; border-color:#88ff88; }
.db-card-badge.max-copies { background:#2e1a1a; color:#ff8888; border-color:#ff8888; }
.db-card-badge.no-copies { display:none; }
.db-card-row { position:relative; display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:78px; margin:0 0 7px; padding:8px 10px; border:1px solid rgba(255,255,255,0.1); border-radius:8px; background:rgba(8,12,18,0.74); cursor:pointer; transition:border-color 0.12s, background 0.12s, transform 0.12s; }
.db-card-row:hover { border-color:rgba(240,199,102,0.34); background:rgba(18,25,34,0.9); transform:translateY(-1px); }
.db-card-row.maxed { opacity:0.55; }
.db-card-wrapper[draggable="true"], .db-card-row[draggable="true"], .db-deck-item[draggable="true"], .db-current-deck-gallery-item[draggable="true"] { user-select:none; }
.db-dragging { opacity:0.45; }
.db-cards-grid.drag-remove-target, .db-deck-list.drag-add-target { outline:2px dashed rgba(136,255,136,0.55); outline-offset:-6px; background-color:rgba(136,255,136,0.045); }
.db-card-thumb { width:48px; height:66px; border-radius:5px; border:1px solid rgba(255,255,255,0.15); overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff0a8; font-size:16px; font-weight:800; box-shadow:0 6px 14px rgba(0,0,0,0.3); }
.db-card-thumb img { width:100%; height:100%; aspect-ratio:48/66; object-fit:cover; display:block; }
.db-card-thumb-fallback { width:100%; height:100%; padding:4px 3px; display:flex; flex-direction:column; justify-content:space-between; align-items:stretch; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,0.65); }
.db-card-thumb-fallback .db-thumb-cost { align-self:flex-start; min-width:16px; padding:1px 3px; border-radius:999px; background:rgba(0,0,0,0.38); color:#fff3ad; font-size:12px; line-height:1.1; }
.db-card-thumb-fallback .db-thumb-name { color:#f7fbff; font-size:7px; line-height:1.08; font-weight:800; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.db-card-thumb-fallback .db-thumb-type { color:#d6dee8; font-size:6px; line-height:1; font-weight:800; text-transform:uppercase; opacity:0.9; }
.db-card-row-main { min-width:0; }
.db-card-row-title { display:flex; align-items:center; gap:8px; min-width:0; }
.db-card-row-name { color:#f3f7fb; font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-card-row-count { color:#9ff2bd; border:1px solid rgba(136,255,136,0.28); border-radius:999px; padding:1px 6px; font-size:10px; white-space:nowrap; }
.db-card-row-stats { color:#91a0ae; font-size:11px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-card-row-meta { color:#d7bd7d; font-size:10px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-card-row-text { color:#aeb8c4; font-size:11px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-card-row.has-twinpact { align-items:start; min-height:112px; }
.db-card-row.has-twinpact .db-card-thumb { margin-top:2px; }
.db-card-row.has-twinpact .db-card-row-actions { align-self:center; }
.db-card-row-rules { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; min-width:0; margin-top:4px; align-items:start; }
.db-card-row-rules > .db-card-row-text { margin-top:0; }
.db-card-row-rules.has-twinpact { grid-template-columns:minmax(0,1fr) minmax(220px,0.92fr); }
.db-card-row-rules.has-twinpact .db-card-row-text { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.24; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; }
.db-card-row-spell-side { border-left:1px solid rgba(125,160,210,0.24); padding-left:10px; color:#c2cedd; }
.db-card-row-spell-title { color:#f0c766; font-size:10px; line-height:1.15; font-weight:800; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-card-row-spell-stats { color:#87a8c8; font-size:10px; line-height:1.2; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-card-row-spell-rules { min-width:0; margin-top:0; }
.db-card-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:5px; }
.db-card-tag { font-size:9px; line-height:1; padding:3px 5px; border-radius:999px; color:#dce7f0; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); }
.db-card-row-actions { display:flex; flex-direction:column; gap:5px; align-items:stretch; }
.db-row-btn { min-width:34px; padding:4px 7px; border-radius:6px; border:1px solid rgba(255,255,255,0.13); background:#111923; color:#dce7f0; cursor:pointer; font-weight:800; }
.db-row-btn:hover { border-color:#f0c766; color:#fff0a8; }
.db-row-btn.remove { color:#ffaaa0; }

@media (max-width: 900px) {
  .db-card-row-rules.has-twinpact { grid-template-columns:minmax(0,1fr); }
  .db-card-row-spell-side { border-left:0; border-top:1px solid rgba(125,160,210,0.24); padding-left:0; padding-top:6px; }
}

/* Deck Panel */
.db-deck-panel { display:flex; flex-direction:column; border-left:1px solid #222; background:#0f0f1f; overflow:hidden; }
.db-deck-header { padding:12px 16px; border-bottom:1px solid #222; }
.db-deck-header h3 { font-size:15px; margin-bottom:4px; }
.db-deck-count { font-size:24px; font-weight:700; }
.db-deck-count.valid { color:#88ff88; }
.db-deck-count.invalid { color:#ff8888; }
.db-deck-tabs { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid #222; }
.db-deck-tab-btn { flex:1; border:1px solid #333; border-radius:6px; background:#151525; color:#888; padding:6px 8px; font-size:11px; font-weight:700; cursor:pointer; }
.db-deck-tab-btn.active { border-color:#aa8844; background:#2a2416; color:#ffdd88; }
.db-deck-tab-panel { flex:1; min-height:0; display:flex; flex-direction:column; }
.db-deck-info { display:none; flex:1; overflow-y:auto; padding:12px 14px; }
.db-deck-info.active { display:block; }
.db-deck-list.hidden { display:none; }
.db-deck-info-section { margin-bottom:14px; }
.db-deck-info-title { color:#c8d3df; font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:8px; }
.db-deck-stats { display:flex; gap:8px; flex-wrap:wrap; }
.db-stat { font-size:10px; padding:2px 6px; border-radius:3px; border:1px solid #333; }

.db-deck-list { flex:1; overflow-y:auto; padding:4px 0; }
.db-deck-empty { padding:20px; text-align:center; color:#48515b; font-size:12px; line-height:1.4; }
.db-deck-view-controls { position:sticky; top:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-bottom:1px solid rgba(255,255,255,0.08); background:rgba(15,15,31,0.96); backdrop-filter:blur(4px); }
.db-deck-gallery-mode { padding:0 8px 10px; }
.db-deck-list-mode .deck-view-section-separator { padding:0 12px; }
.db-deck-gallery-mode .deck-view-section-separator { margin:9px 2px 6px; }
.db-current-deck-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:10px 8px; padding:0 0 7px; }
.db-current-deck-gallery-item { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; padding:4px 3px 6px; border-radius:7px; border:1px solid transparent; transition:transform 0.12s,border-color 0.12s,background 0.12s; }
.db-current-deck-gallery-item:hover { transform:translateY(-2px); border-color:rgba(136,255,136,0.36); background:rgba(80,255,140,0.055); }
.db-current-deck-gallery-item .deck-view-gallery-card { width:74px; height:103px; }
.db-deck-item { position:relative; display:flex; align-items:center; gap:8px; padding:5px 12px; cursor:pointer; font-size:12px; transition:background 0.1s; border-left:3px solid transparent; --deck-civ-strip:transparent; }
.db-deck-item::before { content:''; position:absolute; left:-3px; top:0; bottom:0; width:3px; background:var(--deck-civ-strip); pointer-events:none; }
.db-deck-item:hover { background:rgba(80,255,140,0.07); }
.db-deck-item .db-item-count { font-weight:700; width:24px; color:#aaa; }
.db-deck-item .db-item-civ { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.db-deck-item .db-item-name { flex:1; }
.db-deck-item .db-item-cost { color:#888; font-size:11px; }
.db-deck-item .db-item-power { color:#666; font-size:11px; width:40px; text-align:right; }
.db-deck-item .db-item-remove { color:#88ff88; font-size:14px; opacity:0; transition:opacity 0.1s; }
.db-deck-item:hover .db-item-remove { opacity:1; }
.civ-dot-fire { background:#cc3333; }
.civ-dot-water { background:#3366cc; }
.civ-dot-nature { background:#33aa33; }
.civ-dot-light { background:#ccaa33; }
.civ-dot-darkness { background:#663399; }
.civ-dot-colorless { background:#8b939e; }
.civ-dot-multi { background:linear-gradient(135deg,#ccaa33,#3366cc,#33aa33); }
.db-deck-item[data-civ="fire"] { border-left-color:#cc333366; --deck-civ-strip:#cc333366; }
.db-deck-item[data-civ="water"] { border-left-color:#3366cc66; --deck-civ-strip:#3366cc66; }
.db-deck-item[data-civ="nature"] { border-left-color:#33aa3366; --deck-civ-strip:#33aa3366; }
.db-deck-item[data-civ="light"] { border-left-color:#ccaa3366; --deck-civ-strip:#ccaa3366; }
.db-deck-item[data-civ="darkness"] { border-left-color:#66339966; --deck-civ-strip:#66339966; }
.db-deck-item[data-civ="colorless"] { border-left-color:#8b939e66; --deck-civ-strip:#8b939e66; }

.db-deck-actions { padding:12px; border-top:1px solid #222; display:flex; flex-direction:column; gap:6px; }
.db-deck-actions button { padding:8px; border:none; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; transition:background 0.15s; }
.db-save-row { display:flex; gap:6px; }
.db-save-row input { flex:1; background:#1a1a2e; border:1px solid #333; color:#ccc; border-radius:6px; padding:6px 10px; font-size:12px; }
.db-save-row input::placeholder { color:#555; }
.db-save-btn { background:#333355; color:#8888ff; }
.db-save-btn:hover { background:#444477; }
.db-import-btn { white-space:nowrap; padding-left:10px !important; padding-right:10px !important; }
.db-clear-btn { background:#332222; color:#aa6666; }
.db-clear-btn:hover { background:#443333; }
.db-start-btn { background:#224422; color:#555; font-size:14px !important; padding:10px !important; }
.db-start-btn.ready { background:#335533; color:#88ff88; cursor:pointer; }
.db-start-btn.ready:hover { background:#447744; }

.db-info-column { display:flex; min-width:0; border-left:1px solid #222; background:#0f0f1f; overflow:hidden; }
.db-detail-panel { min-height:0; max-height:none; flex:1; padding:12px 16px; overflow-y:auto; flex-shrink:1; }
body:not(.curation-body) #deckbuilder-screen .db-detail-panel > .tt-card-img { width:clamp(200px, 74%, 420px); max-width:100%; height:auto; max-height:54vh; object-fit:contain; margin:0 auto 8px; transition:width 0.12s ease; }
.db-detail-panel h4 { font-size:13px; margin-bottom:2px; }
.db-detail-panel .db-det-stats { font-size:11px; color:#888; margin-bottom:4px; }
.db-detail-panel .db-det-illus { color:#9bbfae; }
.db-detail-panel .db-det-text { font-size:11px; color:#c6ccd5; font-style:normal; line-height:1.4; }
.db-art-picker { margin:8px 0; }
/* Alt-art picker: one horizontal row; grouped multifaced thumbnails stay compact and extras scroll sideways. */
.db-art-list { overflow-x:auto; overflow-y:hidden; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:6px; padding:0 0 6px; }
.db-art-option { display:inline-flex; align-items:center; flex:0 0 auto; padding:0; background:transparent; border:2px solid #444; border-radius:4px; color:inherit; font:inherit; cursor:pointer; opacity:0.65; }
.db-art-option:hover { opacity:1; border-color:#777; }
.db-art-option.selected { opacity:1; border-color:#ffdd44; }
.db-art-thumb { width:40px; height:56px; aspect-ratio:5/7; object-fit:cover; border-radius:4px; display:block; }
.db-art-dual-thumb { display:flex; gap:2px; align-items:center; }
.db-art-dual-thumb img { width:28px; height:40px; object-fit:cover; border-radius:3px; display:block; box-sizing:border-box; }
.db-art-dual-thumb .db-art-side-choice { border:1px solid transparent; cursor:pointer; }
.db-art-dual-thumb .db-art-side-choice.selected { border-color:#ffdd44; box-shadow:0 0 0 1px rgba(255,221,68,.35); }

.horizontal-card-thumb { position:relative; overflow:hidden; display:block; background:#111923; border-radius:inherit; }
.horizontal-card-thumb > .horizontal-card-thumb-img {
  position:absolute;
  left:50%;
  top:50%;
  width:140%;
  height:71.4286%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  transform:translate(-50%, -50%) rotate(90deg);
  transform-origin:center;
  display:block;
  border-radius:inherit;
  pointer-events:none;
}
.card-img.horizontal-card-thumb { position:absolute; inset:0; width:100%; height:100%; border-radius:4px; }
.db-card-thumb .horizontal-card-thumb,
.deck-thumb-card .horizontal-card-thumb,
.deck-view-row-img .horizontal-card-thumb,
.deck-view-gallery-card .horizontal-card-thumb,
.resource-pile-card .horizontal-card-thumb { width:100%; height:100%; }
.db-art-thumb.horizontal-card-thumb { width:40px; height:56px; border-radius:4px; }
.db-art-dual-thumb .horizontal-card-thumb { width:28px; height:40px; border-radius:3px; box-sizing:border-box; }
.menu-belt-card .horizontal-card-thumb,
.moonless-source-card .horizontal-card-thumb,
.manual-stack-card .horizontal-card-thumb,
.manual-seal-slice .horizontal-card-thumb { width:100%; height:100%; border-radius:inherit; }
.menu-belt-card .horizontal-card-thumb > .horizontal-card-thumb-img,
.moonless-source-card .horizontal-card-thumb > .horizontal-card-thumb-img,
.manual-stack-card .horizontal-card-thumb > .horizontal-card-thumb-img,
.manual-seal-slice .horizontal-card-thumb > .horizontal-card-thumb-img {
  width:140%;
  height:71.4286%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  transform:translate(-50%, -50%) rotate(90deg);
  border-radius:inherit;
}
.manual-stack-img.horizontal-card-thumb { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; }

/* Mana Curve */
.db-curve { display:flex; align-items:flex-end; gap:3px; height:50px; padding:4px 0; }
.db-curve-bar { flex:1; background:#335533; border-radius:2px 2px 0 0; min-width:12px; position:relative; transition:height 0.2s; }
.db-curve-bar span { position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); font-size:8px; color:#666; }
.db-curve-bar .db-curve-val { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:8px; color:#88ff88; }

/* Saved decks on menu */
.saved-decks-section { margin-top:24px; text-align:center; }
.saved-decks-section h3 { font-size:14px; color:#666; margin-bottom:12px; }
.ai-deck-picker { margin-bottom:18px; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.ai-deck-picker label { font-size:12px; color:#888; }
.ai-deck-picker select { background:#1a1a1a; color:#ccc; border:1px solid #444; border-radius:4px; padding:6px 10px; font-family:inherit; font-size:11px; cursor:pointer; min-width:200px; }
.ai-deck-picker select:hover, .ai-deck-picker select:focus { border-color:#888; outline:none; }
.ai-deck-picker select option { background:#1a1a1a; color:#ccc; }
.ai-deck-picker select optgroup { color:#888; font-style:italic; }
.saved-deck-grid { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.saved-deck-option { width:150px; padding:12px; border-radius:10px; cursor:pointer; text-align:center; background:#1a1a2e; border:2px solid #333; transition:all 0.2s; position:relative; }
.saved-deck-option:hover { transform:translateY(-3px); border-color:#88ff88; box-shadow:0 6px 20px rgba(0,0,0,0.4); }
.saved-deck-option h4 { font-size:14px; color:#ccc; margin-bottom:4px; }
.saved-deck-option p { font-size:10px; color:#666; }
.saved-deck-delete { position:absolute; top:4px; right:8px; color:#ff6644; cursor:pointer; font-size:14px; opacity:0; transition:opacity 0.15s; }
.saved-deck-option:hover .saved-deck-delete { opacity:1; }
.custom-deck-btn { display:inline-block; padding:14px 28px; border:2px dashed #444; border-radius:12px; color:#888; cursor:pointer; font-size:14px; font-weight:600; transition:all 0.2s; background:transparent; margin-top:16px; }
.custom-deck-btn:hover { border-color:#88ff88; color:#88ff88; transform:translateY(-2px); }

/* Dedicated deck library */
.decks-page { flex:1; overflow-y:auto; padding:18px; }
.decks-page-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 auto 16px; max-width:1180px; flex-wrap:wrap; }
.decks-page-title h3 { color:#fff0a8; font-size:20px; margin-bottom:4px; }
.decks-page-title p { color:#8c9aaa; font-size:12px; }
.deck-library-section { max-width:1180px; margin:0 auto 24px; }
.deck-library-section h3 { color:#d9e2ec; font-size:15px; margin:0 0 10px; letter-spacing:0.4px; }
.deck-library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.deck-library-card { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.12); border-radius:8px; background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015)),#101720; box-shadow:0 12px 28px rgba(0,0,0,0.28); }
.deck-library-card::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,rgba(240,199,102,0.08),transparent 48%,rgba(57,214,199,0.06)); }
.deck-library-body { position:relative; padding:12px; }
.deck-library-hero { display:flex; align-items:center; justify-content:center; gap:12px; min-height:92px; border-bottom:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01)); }
.deck-thumb-fan { position:relative; width:92px; height:84px; flex:0 0 92px; }
.deck-thumb-card { position:absolute; top:5px; width:48px; height:67px; border-radius:5px; overflow:hidden; border:1px solid rgba(255,255,255,0.26); background:#18202a; box-shadow:0 8px 18px rgba(0,0,0,0.45); }
.deck-thumb-card:nth-child(1) { left:0; transform:rotate(-8deg); }
.deck-thumb-card:nth-child(2) { left:22px; top:0; z-index:2; }
.deck-thumb-card:nth-child(3) { left:44px; transform:rotate(8deg); }
.deck-thumb-card img { width:100%; height:100%; object-fit:cover; display:block; }
.deck-thumb-card.empty { display:flex; align-items:center; justify-content:center; color:#55616d; font-size:10px; }
.deck-library-info { min-width:0; flex:1; }
.deck-library-info h3, .deck-library-info h4 { color:#f3f7fb; font-size:15px; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deck-library-info p { color:#9aa7b4; font-size:11px; line-height:1.35; margin-bottom:5px; }
.deck-library-tags { display:flex; flex-wrap:wrap; gap:4px; }
.deck-library-tag { font-size:9px; padding:3px 6px; border-radius:999px; color:#dce7f0; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.07); }
.deck-library-tag.warn { color:#ffaaa0; border-color:rgba(255,120,96,0.35); background:rgba(255,80,50,0.08); }
.deck-library-sleeve { position:absolute; right:10px; top:10px; width:26px; height:36px; border-radius:4px; border:1px solid rgba(255,255,255,0.28); overflow:hidden; opacity:0.9; box-shadow:0 4px 10px rgba(0,0,0,0.4); }
.deck-library-sleeve img { width:100%; height:100%; object-fit:cover; }
.deck-library-actions { position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(58px,1fr)); gap:6px; padding:0 12px 12px; }
.deck-library-actions button { padding:7px 6px; border-radius:7px; border:1px solid rgba(255,255,255,0.14); background:#0b1118; color:#dce7f0; cursor:pointer; font-size:11px; font-weight:800; }
.deck-library-actions button:hover { border-color:#f0c766; color:#fff0a8; }
.deck-library-actions button:disabled { opacity:0.45; cursor:not-allowed; }
.deck-library-actions button.danger { color:#ffaaa0; border-color:rgba(255,120,96,0.25); }
.deck-library-empty { border:1px dashed rgba(255,255,255,0.18); border-radius:8px; padding:24px; color:#91a0af; text-align:center; background:rgba(255,255,255,0.03); }
.deck-view-header { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.deck-view-thumbs { display:flex; gap:8px; align-items:center; min-width:96px; }
.deck-view-summary { color:#9aa7b4; font-size:12px; line-height:1.45; }
.deck-view-thumb { width:54px; height:75px; border-radius:5px; border:1px solid rgba(255,255,255,0.2); background:#111923; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#66727f; font-size:10px; }
.deck-view-thumb img { width:100%; height:100%; object-fit:cover; }
.deck-view-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0; padding:10px; border:1px solid rgba(255,255,255,0.1); border-radius:8px; background:rgba(255,255,255,0.035); }
.deck-view-sleeve { display:flex; align-items:center; gap:8px; min-width:120px; color:#9aa7b4; font-size:10px; }
.deck-view-sleeve img { width:38px; height:54px; border-radius:5px; border:1px solid rgba(255,255,255,0.25); object-fit:cover; }
.deck-view-list { max-height:360px; overflow-y:auto; margin-top:10px; padding-right:4px; }
.deck-view-modebar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:8px 0 10px; }
.deck-view-toggle { display:inline-flex; gap:0; border:1px solid rgba(255,255,255,0.14); border-radius:7px; overflow:hidden; background:#0b1118; }
.deck-view-toggle button, .deck-view-screenshot { padding:6px 11px; border:0; background:#0b1118; color:#aeb8c4; cursor:pointer; font-size:11px; font-weight:800; }
.deck-view-toggle button + button { border-left:1px solid rgba(255,255,255,0.12); }
.deck-view-toggle button.active { color:#fff0a8; background:rgba(240,199,102,0.14); }
.deck-view-toggle button:hover, .deck-view-screenshot:hover { color:#f3f7fb; background:rgba(255,255,255,0.08); }
.deck-view-screenshot { border:1px solid rgba(136,255,136,0.28); border-radius:7px; color:#b9ffd2; }
.deck-view-screenshot:disabled { opacity:0.55; cursor:wait; color:#81908b; border-color:rgba(255,255,255,0.12); }
.deck-view-section-separator { display:flex; align-items:center; gap:8px; margin:9px 0 5px; color:#f0c766; font-size:10px; font-weight:900; letter-spacing:0.7px; text-transform:uppercase; }
.deck-view-section-separator::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,rgba(240,199,102,0.34),transparent); }
.deck-view-section-separator em { order:3; color:#7f8b96; font-size:9px; font-style:normal; letter-spacing:0.2px; text-transform:none; }
.deck-view-section-hyper { color:#b8a8ff; }
.deck-view-section-hyper::after { background:linear-gradient(90deg,rgba(184,168,255,0.34),transparent); }
.deck-view-section-gr { color:#9ff2bd; }
.deck-view-section-gr::after { background:linear-gradient(90deg,rgba(159,242,189,0.34),transparent); }
.deck-view-gallery { max-height:390px; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:12px 10px; padding:8px 4px 6px; }
.deck-view-gallery .deck-view-section-separator { grid-column:1 / -1; margin:5px 0 0; }
.deck-view-gallery-item { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; padding:4px 3px 6px; border-radius:7px; border:1px solid transparent; transition:transform 0.12s,border-color 0.12s,background 0.12s; }
.deck-view-gallery-item:hover { transform:translateY(-2px); border-color:rgba(240,199,102,0.34); background:rgba(255,255,255,0.04); }
.deck-view-gallery-item.selected { border-color:rgba(240,199,102,0.62); background:rgba(240,199,102,0.08); }
.deck-view-gallery-card { position:relative; width:76px; height:106px; border-radius:7px; border:2px solid rgba(255,255,255,0.23); overflow:hidden; box-shadow:0 8px 16px rgba(0,0,0,0.35); }
.deck-view-gallery-card img { width:100%; height:100%; object-fit:cover; display:block; }
.deck-view-gallery-count { position:absolute; top:0; right:0; z-index:3; min-width:24px; padding:2px 5px; border-radius:999px; background:#122315; border:1px solid rgba(136,255,136,0.62); color:#b9ffd2; font-size:10px; font-weight:900; text-align:center; box-shadow:0 2px 7px rgba(0,0,0,0.42); }
.deck-view-gallery-picked { position:absolute; left:50%; top:84px; transform:translateX(-50%); z-index:3; padding:2px 5px; border-radius:999px; background:#f0c766; color:#211805; font-size:7px; font-weight:900; letter-spacing:0.3px; box-shadow:0 2px 7px rgba(0,0,0,0.38); pointer-events:none; }
.deck-view-gallery-name { width:100%; color:#dce7f0; font-size:9px; font-weight:800; line-height:1.12; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.deck-view-gallery-fallback { width:100%; height:100%; padding:6px 5px; display:flex; flex-direction:column; justify-content:space-between; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,0.72); }
.deck-view-gallery-fallback span { align-self:flex-start; min-width:18px; padding:1px 4px; border-radius:999px; background:rgba(0,0,0,0.42); color:#fff0a8; font-size:13px; font-weight:900; }
.deck-view-gallery-fallback strong { color:#f7fbff; font-size:8px; line-height:1.12; }
.deck-view-gallery-fallback em { color:#d6dee8; font-size:6px; line-height:1; font-style:normal; font-weight:900; text-transform:uppercase; opacity:0.92; }
.deck-screenshot-help { color:#91a0af; font-size:12px; margin:-4px 0 10px; text-align:center; }
.deck-screenshot-preview { max-height:62vh; overflow:auto; padding:10px; border:1px solid rgba(255,255,255,0.12); border-radius:8px; background:#070b10; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03); margin-bottom:12px; }
.deck-screenshot-preview img { display:block; max-width:none; width:auto; height:auto; min-width:100%; border-radius:6px; box-shadow:0 10px 28px rgba(0,0,0,0.45); }
.deck-export-help { color:#91a0af; font-size:12px; margin:-4px 0 10px; text-align:center; }
.deck-export-textarea { width:100%; min-height:260px; max-height:52vh; resize:vertical; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.16); background:#070b10; color:#dce7f0; font:12px/1.45 "Consolas", "Liberation Mono", monospace; white-space:pre; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03); }
.deck-export-filename { margin:8px 0 12px; color:#fff0a8; font-size:11px; text-align:center; }
.deck-view-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:8px; align-items:center; padding:7px 8px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:12px; }
.deck-view-row.selected { background:rgba(240,199,102,0.08); }
.deck-view-row-img { width:30px; height:42px; border-radius:4px; overflow:hidden; background:#111923; display:flex; align-items:center; justify-content:center; color:#91a0af; border:1px solid rgba(255,255,255,0.12); }
.deck-view-row-img img { width:100%; height:100%; object-fit:cover; }
.deck-view-row-main { min-width:0; display:flex; flex-direction:column; gap:2px; color:#dce7f0; }
.deck-view-row-main span { color:#8d9aaa; font-size:10px; }
.deck-view-row button { padding:4px 8px; font-size:10px; border-radius:6px; border:1px solid rgba(255,255,255,0.14); background:#0b1118; color:#dce7f0; cursor:pointer; }
.deck-view-row button.active { color:#fff0a8; border-color:#f0c766; }

/* ── Multiplayer ── */
.mp-panel { margin-top:20px; text-align:center; }
.mp-panel button { padding:10px 20px; border:2px solid #4488ff; background:transparent; color:#4488ff; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; margin:4px; transition:all 0.2s; }
.mp-panel button:hover { background:#4488ff22; transform:translateY(-2px); }
.mp-code { font-size:28px; font-weight:700; color:#88ff88; letter-spacing:4px; padding:12px; background:#1a2e1a; border-radius:8px; display:inline-block; margin:8px; }
.mp-input { background:#1a1a2e; border:2px solid #4488ff; color:#fff; border-radius:8px; padding:10px 16px; font-size:16px; text-align:center; width:200px; letter-spacing:2px; }
.mp-status { color:#aaa; font-size:12px; margin-top:8px; }
.mp-name-row { margin-bottom:12px; }
.mp-name-input { background:#1a1a2e; border:1px solid #444; color:#fff; border-radius:6px; padding:8px 12px; font-size:14px; width:180px; text-align:center; }
.mp-name-input::placeholder { color:#555; }

/* ── Chat ── */
.chat-box { border-top:1px solid #222; display:flex; flex-direction:column; height:120px; }
.chat-messages { flex:1; overflow-y:auto; padding:4px 8px; font-size:11px; min-height:0; }
.chat-messages div { padding:1px 0; }
.chat-msg-you { color:#88bbff; }
.chat-msg-opp { color:#ff8888; }
.chat-msg-sys { color:#666; font-style:italic; }
.chat-input-row { display:flex; border-top:1px solid #222; }
.chat-input { flex:1; background:#0a0a1a; border:none; color:#ccc; padding:6px 8px; font-size:11px; outline:none; }
.chat-input::placeholder { color:#444; }
.chat-send { background:#333355; color:#8888ff; border:none; padding:6px 12px; cursor:pointer; font-size:11px; }

/* Visual refresh: duel table, zones, cards, and controls */
:root {
  --bg-void:#07090d;
  --bg-iron:#111820;
  --panel:#121923;
  --panel-2:#19222d;
  --line:rgba(255,255,255,0.14);
  --line-soft:rgba(255,255,255,0.07);
  --gold:#f0c766;
  --amber:#ff9d50;
  --teal:#39d6c7;
  --red:#ff5f55;
  --green:#68d982;
  --violet:#a984ff;
  --text:#e8edf2;
  --muted:#8b97a6;
}

body {
  background:
    linear-gradient(120deg, rgba(255,95,85,0.14), transparent 28%),
    linear-gradient(250deg, rgba(57,214,199,0.12), transparent 34%),
    linear-gradient(180deg, #07090d 0%, #0f151c 44%, #171017 100%);
  color:var(--text);
}

body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 44px);
  mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

#menu-screen,
#decks-screen,
#deckbuilder-screen,
#game-screen {
  position:relative;
  z-index:1;
}

#menu-screen {
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 14% 22%, rgba(255,95,85,0.18), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(57,214,199,0.16), transparent 34%),
    radial-gradient(circle at 46% 88%, rgba(104,217,130,0.15), transparent 40%),
    linear-gradient(135deg, rgba(255,95,85,0.08), transparent 38%),
    linear-gradient(225deg, rgba(104,217,130,0.08), transparent 36%),
    #0a0a1a;
}

#menu-screen::before {
  content:'';
  position:absolute;
  inset:-70%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,95,85,0.40), rgba(255,95,85,0.06) 28%, transparent 46%),
    radial-gradient(circle at 80% 18%, rgba(57,214,199,0.36), rgba(57,214,199,0.06) 30%, transparent 48%),
    radial-gradient(circle at 62% 82%, rgba(104,217,130,0.32), rgba(104,217,130,0.06) 32%, transparent 50%),
    conic-gradient(from 20deg at 50% 50%, rgba(255,95,85,0.22), rgba(57,214,199,0.20), rgba(240,199,102,0.18), rgba(169,132,255,0.20), rgba(255,95,85,0.22));
  background-size:88% 88%, 84% 84%, 96% 96%, 100% 100%;
  background-repeat:no-repeat;
  filter:blur(10px) saturate(1.35);
  opacity:0.86;
  transform:translate3d(-1%, 1%, 0) rotate(18deg) scale(1.12);
}

#menu-screen::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 44px);
  opacity:0.7;
  mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

#menu-screen > *:not(.menu-card-belt) {
  position:relative;
  z-index:2;
}

@keyframes menuGradientSwirl {
  0% { transform:translate3d(-2%, -1.5%, 0) rotate(0deg) scale(1.04); background-position:8% 10%, 92% 8%, 48% 92%, 50% 50%; }
  25% { transform:translate3d(2%, -0.5%, 0) rotate(70deg) scale(1.07); background-position:22% 8%, 82% 24%, 68% 84%, 50% 50%; }
  50% { transform:translate3d(1.5%, 2%, 0) rotate(165deg) scale(1.05); background-position:16% 34%, 90% 54%, 38% 76%, 50% 50%; }
  75% { transform:translate3d(-1.5%, 1.5%, 0) rotate(255deg) scale(1.08); background-position:8% 56%, 76% 18%, 28% 90%, 50% 50%; }
  100% { transform:translate3d(-2%, -1.5%, 0) rotate(360deg) scale(1.04); background-position:8% 10%, 92% 8%, 48% 92%, 50% 50%; }
}

.menu-card-belt {
  position:absolute;
  left:0;
  right:0;
  height:124px;
  z-index:1;
  overflow:visible;
  pointer-events:none;
  opacity:0.78;
}

.menu-card-belt-top { top:14px; }
.menu-card-belt-bottom { bottom:14px; }

.menu-card-belt-track {
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  will-change:transform;
  animation:menuBeltScrollLeft 54s linear infinite;
}

.menu-card-belt-set {
  display:flex;
  align-items:center;
  gap:16px;
  padding-right:16px;
  flex:0 0 auto;
}

.menu-card-belt-bottom .menu-card-belt-track {
  animation-name:menuBeltScrollRight;
  animation-duration:58s;
}

.menu-card-belt-track.paused,
.menu-card-belt-track.offscreen-paused {
  animation-play-state:paused;
}

.menu-belt-card {
  display:block;
  width:84px;
  height:116px;
  flex:0 0 84px;
  padding:0;
  border:1px solid rgba(255,255,255,0.26);
  border-radius:8px;
  overflow:hidden;
  background:#0d131c;
  box-shadow:0 10px 24px rgba(0,0,0,0.42), 0 0 0 1px rgba(240,199,102,0.08);
  cursor:help;
  pointer-events:auto;
  opacity:0.84;
  transform:translateZ(0);
  transition:opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.menu-belt-card:hover {
  opacity:1;
  transform:translateY(-4px) scale(1.06);
  border-color:rgba(240,199,102,0.72);
  box-shadow:0 16px 34px rgba(0,0,0,0.58), 0 0 18px rgba(240,199,102,0.24);
  z-index:3;
}

.menu-card-belt-bottom .menu-belt-card:hover {
  transform:translateY(4px) scale(1.06);
}

.menu-belt-card img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.menu-belt-card.menu-belt-card-zeron {
  width:138px;
  height:129px;
  flex:0 0 138px;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.menu-belt-card.menu-belt-card-zeron::before {
  display:none;
}

.menu-belt-card.menu-belt-card-zeron img {
  object-fit:contain;
  border-radius:0;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,0.58)) drop-shadow(0 0 12px rgba(72,202,255,0.22));
}

.menu-belt-card.menu-belt-card-zeron:hover {
  border-color:transparent;
  box-shadow:none;
}

.menu-disclaimer {
  position:absolute;
  left:18px;
  right:18px;
  bottom:6px;
  z-index:3;
  color:rgba(218,226,235,0.58);
  font-size:10px;
  line-height:1.35;
  text-align:center;
  text-shadow:0 1px 5px rgba(0,0,0,0.9);
  pointer-events:none;
}

@keyframes menuBeltScrollLeft {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

@keyframes menuBeltScrollRight {
  from { transform:translateX(-50%); }
  to { transform:translateX(0); }
}

#menu-screen h1 {
  font-family:'Armada','Arial Black','Impact',sans-serif;
  font-weight:700;
  background:linear-gradient(100deg, #fff3bb 0%, #ff5f55 22%, #39d6c7 52%, #68d982 74%, #f0c766 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,0.65));
}

#menu-screen h2,
.saved-decks-section h3 {
  color:var(--muted);
}

.deck-option,
.saved-deck-option,
.custom-deck-btn,
.mp-panel button {
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    #121923;
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 14px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.12);
}

.deck-option:hover,
.saved-deck-option:hover,
.custom-deck-btn:hover,
.mp-panel button:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 34px rgba(0,0,0,0.42), 0 0 0 1px rgba(240,199,102,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
}

.deck-fire { border-color:rgba(255,95,85,0.62); }
.deck-water { border-color:rgba(57,214,199,0.58); }
.deck-nature { border-color:rgba(104,217,130,0.58); }
.deck-light { border-color:rgba(240,199,102,0.62); }
.deck-darkness { border-color:rgba(169,132,255,0.58); }

.game-layout {
  grid-template-columns:minmax(0, 1fr) 300px;
  background:
    linear-gradient(90deg, transparent calc(100% - 301px), rgba(255,255,255,0.06) calc(100% - 300px), transparent calc(100% - 299px));
}

.board {
  padding:10px 12px;
  gap:5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 14%, transparent 86%, rgba(255,255,255,0.025)),
    linear-gradient(90deg, rgba(255,95,85,0.055), rgba(57,214,199,0.045) 50%, rgba(104,217,130,0.045));
  scrollbar-color:rgba(240,199,102,0.45) rgba(255,255,255,0.05);
}

.player-label {
  min-height:52px;
  padding:6px 10px;
  border:1px solid var(--line-soft);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
    rgba(12,17,24,0.82);
  box-shadow:0 10px 22px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}

.player-label > span:first-child {
  color:#f8f3df;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
}

.player-label a,
.player-resources,
.player-label span {
  color:#bac4cf !important;
}

.player-resources {
  gap:10px;
  font-size:11px;
}

.deck-summary {
  color:#dfe6ee;
  padding:3px 7px 3px 4px;
  border:1px solid rgba(240,199,102,0.22);
  border-radius:8px;
  background:rgba(240,199,102,0.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}

.deck-stack {
  width:48px;
  height:56px;
  flex-basis:48px;
}

.deck-stack-sheets {
  left:6px;
  top:6px;
  right:auto;
  bottom:auto;
  width:34px;
  height:48px;
  z-index:0;
  border-radius:6px;
  transform:none;
  border:1px solid rgba(240,199,102,0.24);
  background:linear-gradient(135deg, #222831, #10151e);
  box-shadow:
    3px 3px 0 #2d3136,
    6px 6px 0 #151922,
    0 5px 10px rgba(0,0,0,0.34);
}

.deck-stack-card {
  left:0;
  top:0;
  bottom:auto;
  width:34px;
  height:48px;
  z-index:1;
  border-radius:6px;
  border-color:rgba(240,199,102,0.48);
  box-shadow:2px 2px 0 rgba(255,240,190,0.18), 0 0 12px rgba(240,199,102,0.12);
}

.deck-horizontal-countdown {
  right:-15px;
  top:-9px;
}

.deck-count {
  color:#fff2c2;
  text-shadow:0 1px 8px rgba(240,199,102,0.25);
}

.player-resources {
  align-items:center;
}

.deck-stack {
  width:38px;
  height:52px;
  flex-basis:38px;
}

.deck-stack-sheets {
  display:none;
}

.deck-stack-card {
  left:0;
  top:0;
  bottom:auto;
  width:34px;
  height:48px;
  z-index:1;
  border-radius:6px;
  border-color:rgba(240,199,102,0.48);
  box-shadow:0 3px 10px rgba(0,0,0,0.38);
}

.deck-stack.empty .deck-stack-card {
  bottom:auto;
}

.resource-pile {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:58px;
  padding:3px 7px 3px 4px;
  border:1px solid rgba(160,190,220,0.24);
  border-radius:8px;
  background:rgba(18,24,32,0.72);
  color:#dfe6ee;
  cursor:pointer;
  font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}

.resource-pile:hover {
  border-color:rgba(240,199,102,0.42);
  background:rgba(28,35,45,0.9);
}

.resource-pile-card {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:48px;
  flex:0 0 34px;
  overflow:hidden;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.34);
  background:linear-gradient(135deg,#242b34,#0f151e);
  box-shadow:0 3px 9px rgba(0,0,0,0.38);
}

.resource-pile-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.resource-pile-empty {
  font-size:8px;
  font-weight:900;
  color:#7f8b96;
  letter-spacing:0.04em;
}

.resource-pile-label {
  max-width:52px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:800;
  font-size:10px;
  line-height:1.05;
  text-align:left;
  color:#e5edf5 !important;
}

.resource-pile-count {
  position:absolute;
  right:2px;
  top:2px;
  min-width:17px;
  height:17px;
  padding:1px 4px;
  border-radius:999px;
  background:#0d1118;
  border:1px solid rgba(255,255,255,0.22);
  color:#fff2c2 !important;
  font-size:9px;
  font-weight:900;
  line-height:14px;
  text-align:center;
}

/* G.R.D. (Gacharange Down) badge on the Super GR pile — green, mirrors the deck's 5.S.D badge. */
.resource-pile-sd {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:1px 5px;
  border-radius:999px;
  border:1px solid rgba(112,255,128,0.72);
  background:linear-gradient(180deg,rgba(21,92,36,0.96),rgba(7,38,17,0.96));
  color:#baffc4;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:0.2px;
  text-align:center;
  box-shadow:0 0 10px rgba(80,255,112,0.32),0 3px 8px rgba(0,0,0,0.45);
  pointer-events:none;
}

/* Super GR view window: each card is covered by a "GR" back unless revealed. The cover has
   pointer-events:none so the right-click menu still reaches the real card underneath. */
.manual-gr-card { position:relative; display:inline-block; vertical-align:top; }
.manual-gr-cover {
  position:absolute;
  inset:0;
  border-radius:8px;
  background:#171a28 center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.45);
  font-weight:900;
  font-size:18px;
  letter-spacing:1px;
  pointer-events:none;
  z-index:3;
}
.manual-gr-card.manual-gr-horizontal { outline:2px solid rgba(112,255,128,0.7); outline-offset:1px; border-radius:9px; }
.manual-gr-card.manual-gr-horizontal::after {
  content:'G.R.D.';
  position:absolute;
  left:50%;
  bottom:3px;
  transform:translateX(-50%);
  z-index:4;
  font-size:8px;
  font-weight:900;
  color:#baffc4;
  background:rgba(7,38,17,0.92);
  border:1px solid rgba(112,255,128,0.7);
  border-radius:999px;
  padding:1px 4px;
  pointer-events:none;
}

.resource-pile-graveyard .resource-pile-card {
  border-color:rgba(178,154,210,0.5);
}

.resource-pile-abyss .resource-pile-card {
  border-color:rgba(150,46,92,0.6);
}

.resource-pile-hyperspatial .resource-pile-card {
  border-color:rgba(94,187,255,0.52);
}

.resource-pile-superGacharange .resource-pile-card {
  border-color:rgba(255,122,94,0.54);
}

.zone-row {
  gap:7px;
  padding:2px 0;
}

.zone-label {
  width:62px;
  color:#9eabb9;
  font-weight:800;
  letter-spacing:1.4px;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}

.zone-cards {
  gap:5px;
  padding:6px;
  border-radius:8px;
  border:1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(8,11,16,0.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -10px 28px rgba(0,0,0,0.16);
}

.battle-zone {
  min-height:88px;
  background:
    linear-gradient(90deg, rgba(255,95,85,0.12), rgba(240,199,102,0.05) 42%, rgba(57,214,199,0.08)),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 16px),
    rgba(13,18,23,0.78);
  border-color:rgba(255,255,255,0.12);
}

.mana-zone {
  background:
    linear-gradient(90deg, rgba(104,217,130,0.13), rgba(57,214,199,0.055)),
    rgba(9,20,15,0.74);
  border-color:rgba(104,217,130,0.22);
}

.shield-zone {
  background:
    linear-gradient(90deg, rgba(240,199,102,0.15), rgba(255,95,85,0.06)),
    rgba(24,18,9,0.68);
  border-color:rgba(240,199,102,0.26);
}

.hand-zone {
  min-height:86px;
  background:
    linear-gradient(90deg, rgba(57,214,199,0.12), rgba(169,132,255,0.055)),
    rgba(9,14,20,0.74);
  border-color:rgba(57,214,199,0.22);
}

.grave-zone {
  background:rgba(17,14,19,0.74);
}

.field-zone {
  min-width:112px;
  border-radius:8px;
  border:1px dashed rgba(169,132,255,0.42);
  background:
    linear-gradient(135deg, rgba(169,132,255,0.12), rgba(240,199,102,0.04)),
    rgba(17,12,24,0.7);
}

.field-zone:empty::before {
  color:#86749f;
  font-weight:700;
}

#game-screen.board-theme-quarry .game-layout {
  background:
    linear-gradient(90deg, transparent calc(100% - 301px), rgba(224,163,92,0.16) calc(100% - 300px), transparent calc(100% - 299px)),
    linear-gradient(180deg, rgba(18,16,20,0.96), rgba(10,13,16,0.98));
}

#game-screen.board-theme-quarry .board {
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(210,126,76,0.22), transparent 34%),
    radial-gradient(ellipse at 84% 18%, rgba(71,194,177,0.16), transparent 32%),
    radial-gradient(ellipse at 48% 92%, rgba(126,98,166,0.14), transparent 38%),
    repeating-linear-gradient(164deg, rgba(255,232,176,0.035) 0 2px, transparent 2px 28px),
    linear-gradient(112deg, #241c1d 0%, #232832 42%, #2a211f 72%, #11171b 100%);
  scrollbar-color:rgba(224,163,92,0.55) rgba(0,0,0,0.18);
}

#game-screen.board-theme-quarry .board::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(128deg, transparent 0 20%, rgba(255,216,146,0.08) 20.5% 21.4%, transparent 22% 45%, rgba(78,202,181,0.07) 45.5% 46.3%, transparent 47%),
    linear-gradient(28deg, transparent 0 34%, rgba(0,0,0,0.18) 34.5% 36%, transparent 36.5% 66%, rgba(255,128,76,0.07) 66.5% 68%, transparent 69%),
    repeating-linear-gradient(8deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 12% 82%, rgba(0,0,0,0.24), transparent 32%),
    radial-gradient(circle at 88% 72%, rgba(0,0,0,0.22), transparent 30%);
  opacity:0.95;
}

#game-screen.board-theme-quarry .board > * {
  position:relative;
  z-index:1;
}

#game-screen.board-theme-quarry .player-label {
  border-color:rgba(224,163,92,0.32);
  background:
    linear-gradient(180deg, rgba(255,225,176,0.09), rgba(35,29,26,0.52)),
    repeating-linear-gradient(150deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 16px),
    rgba(20,20,22,0.84);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,232,176,0.11),
    inset 0 -12px 26px rgba(0,0,0,0.22);
}

#game-screen.board-theme-quarry .player-label > span:first-child,
#game-screen.board-theme-quarry .zone-label {
  color:#ead9b5 !important;
  text-shadow:0 1px 5px rgba(0,0,0,0.9), 0 0 8px rgba(224,163,92,0.18);
}

#game-screen.board-theme-quarry .deck-summary {
  border-color:rgba(224,163,92,0.34);
  background:rgba(35,26,21,0.56);
}

#game-screen.board-theme-quarry .deck-stack-sheets {
  border-color:rgba(224,163,92,0.34);
  background:
    repeating-linear-gradient(160deg, rgba(255,235,180,0.12) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, #3a3028, #15171b);
}

#game-screen.board-theme-quarry .zone-cards {
  border-color:rgba(195,154,103,0.22);
  background:
    linear-gradient(180deg, rgba(255,232,176,0.05), rgba(255,255,255,0.015)),
    rgba(12,13,15,0.64);
  box-shadow:
    inset 0 1px 0 rgba(255,232,176,0.08),
    inset 0 -14px 30px rgba(0,0,0,0.24),
    0 8px 18px rgba(0,0,0,0.2);
}

#game-screen.board-theme-quarry .battle-zone {
  background:
    radial-gradient(circle at 18% 28%, rgba(224,118,71,0.18), transparent 26%),
    radial-gradient(circle at 78% 68%, rgba(71,194,177,0.11), transparent 30%),
    repeating-linear-gradient(-34deg, rgba(0,0,0,0.18) 0 3px, transparent 3px 24px),
    linear-gradient(180deg, rgba(76,58,50,0.68), rgba(21,24,29,0.84));
  border-color:rgba(224,163,92,0.34);
}

#game-screen.board-theme-quarry .mana-zone {
  background:
    radial-gradient(circle at 22% 52%, rgba(108,221,135,0.16), transparent 28%),
    radial-gradient(circle at 74% 30%, rgba(71,194,177,0.11), transparent 24%),
    linear-gradient(90deg, rgba(45,73,48,0.64), rgba(18,31,30,0.72));
  border-color:rgba(108,221,135,0.28);
}

#game-screen.board-theme-quarry .shield-zone {
  background:
    radial-gradient(circle at 15% 45%, rgba(255,217,126,0.16), transparent 27%),
    linear-gradient(90deg, rgba(82,55,30,0.68), rgba(42,29,28,0.72));
  border-color:rgba(245,198,95,0.32);
}

#game-screen.board-theme-quarry .hand-zone {
  background:
    radial-gradient(circle at 82% 28%, rgba(126,98,166,0.14), transparent 30%),
    linear-gradient(90deg, rgba(28,50,58,0.66), rgba(23,22,30,0.72));
  border-color:rgba(88,181,174,0.27);
}

#game-screen.board-theme-quarry .field-zone {
  border-color:rgba(161,126,255,0.48);
  background:
    radial-gradient(circle at 30% 20%, rgba(161,126,255,0.16), transparent 34%),
    linear-gradient(135deg, rgba(48,34,62,0.78), rgba(26,20,26,0.76));
}

#game-screen.board-theme-quarry .field-zone:empty::before {
  color:#c5b6ef;
}

#game-screen.board-theme-quarry .zeron-zone {
  border-color:rgba(92,214,255,0.52);
  background:
    radial-gradient(circle at 50% 45%, rgba(67,203,255,var(--zeron-center-alpha,0.22)), transparent 58%),
    linear-gradient(135deg, rgba(20,48,65,0.72), rgba(16,18,24,0.78));
  box-shadow:
    inset 0 1px 0 rgba(183,238,255,0.08),
    inset 0 -14px 30px rgba(0,0,0,0.24),
    0 8px 18px rgba(0,0,0,0.2),
    0 0 14px rgba(62,202,255,0.1);
}

#game-screen.board-theme-quarry .final-forbidden-field-zone {
  border-color:rgba(224,163,92,0.52);
  background:
    radial-gradient(circle at 50% 45%, rgba(224,163,92,0.17), transparent 58%),
    linear-gradient(135deg, rgba(61,38,24,0.72), rgba(22,15,18,0.78));
  box-shadow:
    inset 0 1px 0 rgba(255,226,177,0.08),
    inset 0 -14px 30px rgba(0,0,0,0.24),
    0 8px 18px rgba(0,0,0,0.2),
    0 0 14px rgba(224,163,92,0.1);
}

#game-screen.board-theme-quarry .phase-bar {
  border:1px solid rgba(224,163,92,0.34);
  border-radius:8px;
  background:
    linear-gradient(90deg, rgba(83,55,34,0.62), rgba(34,44,46,0.66), rgba(61,42,38,0.62));
  color:#ffe3a3;
  text-shadow:0 0 8px rgba(224,163,92,0.28);
  box-shadow:inset 0 1px 0 rgba(255,232,176,0.1), 0 6px 16px rgba(0,0,0,0.22);
}

#game-screen.board-theme-quarry .divider {
  background:linear-gradient(90deg, transparent, rgba(224,163,92,0.5), rgba(71,194,177,0.34), transparent);
}

#game-screen.board-theme-quarry .sidebar {
  border-left-color:rgba(224,163,92,0.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(224,163,92,0.1), transparent 34%),
    linear-gradient(180deg, #15171b, #0d1014);
}

.divider {
  height:3px;
  margin:2px 0;
  background:linear-gradient(90deg, transparent, rgba(240,199,102,0.42), rgba(57,214,199,0.38), transparent);
  box-shadow:0 0 14px rgba(57,214,199,0.14);
}

.phase-bar {
  position:relative;
  margin:0 42px;
  padding:8px 12px;
  border:1px solid rgba(240,199,102,0.34);
  border-radius:8px;
  background:
    linear-gradient(90deg, rgba(255,95,85,0.20), rgba(240,199,102,0.12), rgba(57,214,199,0.18)),
    rgba(9,12,17,0.86);
  color:#fff2bf;
  font-size:12px;
  font-weight:900;
  text-shadow:0 1px 9px rgba(0,0,0,0.85);
  box-shadow:0 10px 22px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.11);
}

.card {
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:0 6px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
  transition:transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.card::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.18), transparent 34%, rgba(0,0,0,0.18) 100%);
  opacity:0.42;
}

.card.has-img::before {
  background:linear-gradient(135deg, rgba(255,255,255,0.20), transparent 30%, rgba(0,0,0,0.34) 100%);
  mix-blend-mode:normal;
  opacity:1;
}

.card:hover {
  filter:saturate(1.08) contrast(1.04);
}

.card.tapped {
  margin:12px 8px;
}

.card.clickable {
  border-color:rgba(255,235,157,0.9);
  box-shadow:0 0 0 1px rgba(255,235,157,0.22), 0 0 18px rgba(255,171,75,0.48), 0 8px 18px rgba(0,0,0,0.46);
  animation:glow 1.25s ease-in-out infinite alternate;
}

.card.clickable:hover {
  transform:scale(1.09) translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,235,157,0.5), 0 0 26px rgba(255,171,75,0.72), 0 16px 28px rgba(0,0,0,0.52);
}

.card.clickable.tapped:hover {
  transform:rotate(90deg) scale(1.09) translateY(-2px);
}

.card.selected {
  border-color:#6dffb1 !important;
  box-shadow:0 0 0 1px rgba(109,255,177,0.48), 0 0 24px rgba(109,255,177,0.58), 0 10px 22px rgba(0,0,0,0.5) !important;
}

.card.facedown {
  background:
    linear-gradient(135deg, rgba(240,199,102,0.16), transparent 28%),
    linear-gradient(315deg, rgba(57,214,199,0.14), transparent 34%),
    #1a1f2b !important;
  border-color:rgba(240,199,102,0.34);
}

.card-back-img,
.card-img,
.tt-card-img {
  border-radius:6px;
}

.card.has-img {
  border-color:rgba(255,255,255,0.38);
  background:#111820;
}

.card.has-img.civ-fire {
  border-color:rgba(255,95,85,0.82);
  box-shadow:0 0 0 1px rgba(255,95,85,0.22), 0 6px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
}

.card.has-img.civ-water {
  border-color:rgba(57,214,199,0.82);
  box-shadow:0 0 0 1px rgba(57,214,199,0.22), 0 6px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
}

.card.has-img.civ-nature {
  border-color:rgba(104,217,130,0.82);
  box-shadow:0 0 0 1px rgba(104,217,130,0.22), 0 6px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
}

.card.has-img.civ-light {
  border-color:rgba(240,199,102,0.86);
  box-shadow:0 0 0 1px rgba(240,199,102,0.24), 0 6px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
}

.card.has-img.civ-darkness {
  border-color:rgba(169,132,255,0.84);
  box-shadow:0 0 0 1px rgba(169,132,255,0.23), 0 6px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
}

.card.has-img.civ-colorless {
  border-color:rgba(196,204,214,0.78);
  box-shadow:0 0 0 1px rgba(196,204,214,0.18), 0 6px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* Gods link in a 2D GRID — cols × rows of card cells (each part placed via inline grid-column/row). */
.card.card-god-link {
  width:calc(var(--god-link-cols, 2) * 68px);
  height:calc(var(--god-link-rows, 1) * 94px);
  padding:0;
  /* overflow VISIBLE so attached cross gears / auras / sources can peek past the card edge like a
     normal card — the art itself is still clipped to the rounded shape by .god-link-art-grid below. */
  overflow:visible;
  border-color:rgba(255,153,85,0.9);
  box-shadow:0 0 0 1px rgba(255,153,85,0.28), 0 8px 20px rgba(0,0,0,0.5), 0 0 20px rgba(255,107,53,0.28);
}
.card.card-god-link.card-small {
  width:calc(var(--god-link-cols, 2) * 48px);
  height:calc(var(--god-link-rows, 1) * 66px);
}
/* Tapped → rotates 90°; collapse to a single-card footprint so it doesn't sweep across the board. */
.card.card-god-link.tapped { width:68px; height:94px; }
.card.card-god-link.card-small.tapped { width:48px; height:66px; }
.card.card-god-link .god-link-art-grid {
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  grid-template-columns:repeat(var(--god-link-cols, 2), 1fr);
  grid-template-rows:repeat(var(--god-link-rows, 1), 1fr);
  border-radius:inherit;
  overflow:hidden;
}
/* The dotted drop boxes (absolute over the picker cell). */
#game-screen.manual-mode .board { position:relative; }
.manual-godlink-slot {
  position:absolute; z-index:45; box-sizing:border-box;
  border:2px dashed rgba(255,170,90,0.95); border-radius:8px;
  background:rgba(255,150,70,0.12);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:auto;
  animation:manualGodSlotPulse 1.1s ease-in-out infinite;
}
.manual-godlink-slot > span {
  color:rgba(255,210,160,0.95); font-size:22px; font-weight:800; line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,0.7); pointer-events:none;
}
.manual-godlink-slot:hover { background:rgba(255,170,90,0.32); border-color:rgba(255,225,150,1); transform:scale(1.07); }
@keyframes manualGodSlotPulse {
  0%,100% { border-color:rgba(255,170,90,0.55); box-shadow:0 0 0 rgba(255,170,90,0); }
  50% { border-color:rgba(255,225,150,1); box-shadow:0 0 12px rgba(255,170,90,0.6); }
}
/* God Link PICKER popup — lays out every linkable God with room so its dotted slots never crowd. */
#godlink-picker-overlay {
  position:fixed; inset:0; z-index:1600; display:flex; align-items:center; justify-content:center;
  background:rgba(3,5,8,0.82); backdrop-filter:blur(1px);
}
#godlink-picker-overlay .godlink-pick {
  background:linear-gradient(180deg,#121826,#0b1018);
  border:1px solid rgba(255,170,90,0.4); border-radius:14px;
  padding:18px 22px 20px; max-width:94vw; max-height:90vh; overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,0.7);
}
#godlink-picker-overlay .godlink-pick-head { color:#ffe9cf; font-size:15px; font-weight:700; text-align:center; margin-bottom:14px; }
#godlink-picker-overlay .godlink-pick-head b { color:#ffd28a; }
#godlink-picker-overlay .godlink-pick-grid { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }
#godlink-picker-overlay .godlink-pick-cell { position:relative; padding:44px; border-radius:10px; }
#godlink-picker-overlay .godlink-pick-cell .card { pointer-events:none; margin:0 !important; }
#godlink-picker-overlay .godlink-pick-foot { text-align:center; margin-top:16px; }
#godlink-picker-overlay .godlink-pick-cancel {
  background:rgba(255,90,90,0.16); border:1px solid rgba(255,120,120,0.5); color:#ffd0d0;
  border-radius:8px; padding:7px 24px; cursor:pointer; font-size:13px;
}
#godlink-picker-overlay .godlink-pick-cancel:hover { background:rgba(255,90,90,0.3); }
.card.card-god-link .god-link-part {
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#111820;
  border-radius:4px;
  border:1px solid rgba(255,153,85,0.85);
  box-shadow:0 0 6px rgba(255,153,85,0.28);
}
.card.card-god-link .god-link-part .card-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}
.card.card-god-link .god-link-half-name {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  text-align:center;
  font-size:7px;
  font-weight:800;
  color:#fff4c5;
  text-shadow:0 1px 4px #000;
}
.card.card-god-link .card-cost,
.card.card-god-link .card-icons,
.card.card-god-link .card-power,
.card.card-god-link .neo-evo-badge {
  z-index:3;
}
.card.card-god-link .card-cost {
  position:absolute;
  top:3px;
  left:3px;
}
.card.card-god-link .card-icons {
  top:3px;
  right:4px;
}
.card.card-god-link .card-power {
  position:absolute;
  right:3px;
  bottom:3px;
}
.card.card-god-link .card-cost,
.card.card-god-link .card-icons,
.card.card-god-link .card-power {
  pointer-events:none;
}
.card.card-god-link .card-name {
  display:none;
}
.card.card-god-link.clickable:hover {
  transform:scale(1.06) translateY(-2px);
}
.card.card-god-link.clickable.tapped:hover {
  transform:rotate(90deg) scale(1.06) translateY(-2px);
}
/* Attached cards (cross gears / auras / sources / seals) on a god-linked creature must stay a NORMAL
   single-card size. The manual fan rules size them to the HOST (width/height:100%), but a god-link host
   is cols×68 × rows×94, so they'd stretch across the whole group. Pin them to one card footprint
   (68×94; auras keep their landscape ratio via aspect-ratio + a fixed height). Higher specificity than
   the base .manual-stack-card / .manual-aura-card rules, so these win regardless of stylesheet order. */
.card.card-god-link .manual-stack-card,
.card.card-god-link .manual-seal-slice { width:68px; height:94px; }
.card.card-god-link .manual-aura-card { width:auto; height:68px; }
/* Source pile → BOTTOM-CENTRE of the (wide/tall) group so it peeks out below the whole creature
   instead of hiding behind the art or off to the left. Anchor the source fan to the bottom (one card
   tall) and centre its cards; the inline top offsets still cascade the 18px peek below the edge. */
.card.card-god-link .manual-stack-fan:not(.manual-cross-fan):not(.manual-aura-fan) { top:auto; bottom:0; height:94px; }
.card.card-god-link .manual-stack-fan:not(.manual-cross-fan):not(.manual-aura-fan) .manual-stack-card,
.card.card-god-link .manual-seal-slice { left:50%; margin-left:-34px; }
/* Cross gears / weapons peek from the LEFT, vertically CENTRED on the group (not stuck up by the god
   that originally carried them) once the group grows tall. */
.card.card-god-link .manual-cross-fan { top:50%; bottom:auto; height:94px; transform:translateY(-50%); }

.card.card-zeron-birth {
  width:138px;
  height:129px;
  padding:0;
  overflow:visible;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}
.card.card-zeron-birth::before {
  display:none;
}
.card.card-zeron-birth > .card-img {
  border-radius:0;
  object-fit:contain;
  background:transparent;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,0.58)) drop-shadow(0 0 13px rgba(72,202,255,0.24));
}
.card.card-zeron-birth:not(.tapped) .card-cost,
.card.card-zeron-birth:not(.tapped) .card-icons,
.card.card-zeron-birth:not(.tapped) .card-name,
.card.card-zeron-birth:not(.tapped) .card-power,
.card.card-zeron-birth:not(.tapped) .neo-evo-badge {
  display:none;
}
.card.card-zeron-birth.clickable:not(.tapped) {
  animation:none;
}
.card.card-zeron-birth.clickable:not(.tapped) > .card-img {
  filter:drop-shadow(0 8px 14px rgba(0,0,0,0.58)) drop-shadow(0 0 18px rgba(255,235,157,0.54));
}
.card.card-zeron-birth.clickable:not(.tapped):hover {
  transform:scale(1.055) translateY(-2px);
}
.card.card-zeron-birth.tapped {
  width:68px;
  height:94px;
  padding:4px;
  overflow:hidden;
  border-color:rgba(106,217,255,0.96) !important;
  background:#111820 !important;
  box-shadow:0 0 0 1px rgba(106,217,255,0.26), 0 8px 20px rgba(0,0,0,0.5), 0 0 20px rgba(72,202,255,0.28) !important;
}
.card.card-zeron-birth.tapped::before {
  display:block;
}
.card.card-zeron-birth.card-small.tapped {
  width:48px;
  height:66px;
}
.card.card-zeron-birth.tapped > .card-img {
  border-radius:4px;
  object-fit:cover;
  filter:none;
}
/* Attachments on the manual-combined Zeron (full landscape shape) — same odd-shape fixes as god link:
   the manual fan rules size attached cards to the HOST (138×129), so pin them to a normal single-card
   footprint, anchor the source pile bottom-centre, seals centre, cross gears left-centre. */
.card.card-zeron-birth .manual-stack-card,
.card.card-zeron-birth .manual-seal-slice { width:68px; height:94px; }
.card.card-zeron-birth .manual-aura-card { width:auto; height:68px; }
/* Sources hang in a column BELOW the landscape Zeron (its body is taller than a card, so the normal
   "peek under" would overlap the art and cover the face — blocking grabs / right-clicks). Anchoring the
   fan to the card's bottom edge keeps the Zeron face fully clickable; seals overlay it centred. */
.card.card-zeron-birth .manual-stack-fan:not(.manual-cross-fan):not(.manual-aura-fan) { top:100%; bottom:auto; height:94px; margin-top:-92px; }
.card.card-zeron-birth .manual-stack-fan:not(.manual-cross-fan):not(.manual-aura-fan) .manual-stack-card,
.card.card-zeron-birth .manual-seal-slice { left:50%; margin-left:-34px; }
.card.card-zeron-birth .manual-cross-fan { top:50%; bottom:auto; height:94px; transform:translateY(-50%); }
/* Tapped, the Zeron collapses to a compact card with overflow:hidden — keep its attachments + the
   drop tabs (which sit just outside the card) visible. */
.card.card-zeron-birth.tapped { overflow:visible; }
/* card-zeron-birth hides ::before (the art floats with no sheen) — but the ▲ Top drop tab IS ::before,
   so re-enable it while the Zeron is a stack-drop target (the ▼ Under tab uses ::after, never hidden). */
.card.card-zeron-birth.manual-stack-target::before { display:block; }

.card.has-img .card-cost,
.card.has-img .card-power,
.card.has-img .card-icons {
  background:rgba(5,7,10,0.74);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}

.card-cost {
  color:#fff4c5;
  text-shadow:0 1px 6px rgba(0,0,0,0.85);
}

.card-power {
  color:#eef7ff;
  text-shadow:0 1px 6px rgba(0,0,0,0.85);
}

.card-icons {
  color:#fff4c5;
  font-weight:900;
  letter-spacing:0.4px;
}

.card-name {
  color:#f7fbff;
  text-shadow:0 1px 3px #000, 0 0 10px rgba(0,0,0,0.55);
}

.civ-fire { background:linear-gradient(135deg,#461310,#cd3026 52%,#ff8d45); color:#ffe8dc; }
.civ-water { background:linear-gradient(135deg,#0b2b43,#1b7fb6 56%,#42e0d2); color:#e6fbff; }
.civ-nature { background:linear-gradient(135deg,#10351f,#27944d 56%,#99e657); color:#eaffdf; }
.civ-light { background:linear-gradient(135deg,#5a3f12,#c79a32 54%,#fff0a8); color:#fff8d2; }
.civ-darkness { background:linear-gradient(135deg,#211327,#5b2c79 58%,#c25cff); color:#f3e3ff; }
.civ-colorless { background:linear-gradient(135deg,#262b33,#69727f 56%,#c5ccd4); color:#f8fafc; }
.civ-multi { border-color:rgba(255,255,255,0.5); color:#f5f7f8; }

.neo-evo-badge {
  color:#ffe58d;
  background:rgba(4,6,9,0.72);
  border:1px solid rgba(255,229,141,0.24);
  border-radius:4px;
  padding:1px 4px;
}

.equipped-weapon {
  border-radius:6px;
  border-color:#ff9d50;
  box-shadow:0 8px 18px rgba(0,0,0,0.48), 0 0 14px rgba(255,157,80,0.32);
}
.equipped-weapon.crossed-gear {
  border-color:#ffd166;
  box-shadow:0 8px 18px rgba(0,0,0,0.48), 0 0 14px rgba(255,209,102,0.34);
}
.equipped-weapon.orega-aura {
  width:56px;
  height:40px;
  flex-direction:row;
  align-items:center;
  border-color:#6bc8ff;
  box-shadow:0 8px 18px rgba(0,0,0,0.48), 0 0 14px rgba(107,200,255,0.34);
}
.equipped-weapon.fortified-castle-attachment {
  border-color:#74d9ff;
  box-shadow:0 8px 18px rgba(0,0,0,0.48), 0 0 14px rgba(116,217,255,0.34);
}
.equipped-weapon.shield-top-faceup-attachment {
  border-color:#ffe58d;
  box-shadow:0 8px 18px rgba(0,0,0,0.48), 0 0 14px rgba(255,229,141,0.36);
}

.card.moonless-gate-stack {
  margin:0 58px 42px;
  z-index:20;
  display:block;
  padding:0;
  overflow:visible;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.card.moonless-gate-stack.tapped {
  margin:0 58px 42px;
  transform:none;
}
.card.moonless-gate-stack::before {
  display:none;
}
.card.moonless-gate-stack.clickable:hover,
.card.moonless-gate-stack.clickable.tapped:hover {
  transform:none;
  filter:none;
}
.moonless-main-face {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:4px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.38);
  box-shadow:0 6px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
  overflow:hidden;
  transition:transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.moonless-main-face::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(135deg, rgba(255,255,255,0.20), transparent 30%, rgba(0,0,0,0.34) 100%);
}
.moonless-main-face.tapped {
  transform:rotate(90deg);
}
.moonless-main-face.has-img .card-name {
  display:none;
}
.moonless-main-face.has-img .card-cost,
.moonless-main-face.has-img .card-power,
.moonless-main-face.has-img .card-icons {
  background:rgba(5,7,10,0.74);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.moonless-main-face > .card-img,
.moonless-main-face > .card-back-img {
  z-index:1;
}
.moonless-main-face > .card-cost,
.moonless-main-face > .card-icons,
.moonless-main-face > .card-name,
.moonless-main-face > .card-power,
.moonless-main-face > .neo-evo-badge {
  position:relative;
  z-index:4;
}
.moonless-main-face > .equipped-weapon,
.moonless-main-face > .ex-life-shield-badge,
.moonless-main-face > .shield-force-shield-badge {
  z-index:5;
}
.moonless-gate-fan {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.moonless-source-card {
  position:absolute;
  left:3px;
  top:4px;
  width:62px;
  height:86px;
  border-radius:7px;
  border:2px solid rgba(160,125,255,0.9);
  background:#15111f;
  overflow:hidden;
  pointer-events:auto;
  box-shadow:0 10px 20px rgba(0,0,0,0.58), 0 0 14px rgba(142,83,255,0.28);
}
.moonless-source-card .card-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:5px;
}
.moonless-source-card.has-img .moonless-source-cost,
.moonless-source-card.has-img .moonless-source-name {
  display:none;
}
.moonless-source-cost {
  position:absolute;
  top:3px;
  left:4px;
  z-index:2;
  padding:0 3px;
  border-radius:4px;
  background:rgba(0,0,0,0.68);
  color:#fff4c5;
  font-weight:900;
  font-size:10px;
}
.moonless-source-name {
  position:absolute;
  inset:12px 4px 12px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#f7f0ff;
  font-size:7px;
  font-weight:800;
  line-height:1.15;
  text-shadow:0 1px 4px #000;
}
.moonless-source-pos-0 { transform:translate(-34px,-24px) rotate(135deg); }
.moonless-source-pos-1 { transform:translate(40px,-24px) rotate(-135deg); }
.moonless-source-pos-2 { transform:translate(-34px,34px) rotate(45deg); }
.moonless-source-pos-3 { transform:translate(40px,34px) rotate(-45deg); }
.card.moonless-gate-stack > .card-img,
.card.moonless-gate-stack > .card-back-img {
  z-index:2;
}
.card.moonless-gate-stack > .card-cost,
.card.moonless-gate-stack > .card-icons,
.card.moonless-gate-stack > .card-name,
.card.moonless-gate-stack > .card-power {
  position:relative;
  z-index:4;
}
.card.moonless-gate-stack > .neo-evo-badge {
  z-index:4;
}
.card.moonless-gate-stack > .equipped-weapon,
.card.moonless-gate-stack > .ex-life-shield-badge,
.card.moonless-gate-stack > .shield-force-shield-badge {
  z-index:5;
}
.moonless-main-face.moonless-image-only > .card-cost,
.moonless-main-face.moonless-image-only > .card-icons,
.moonless-main-face.moonless-image-only > .card-name,
.moonless-main-face.moonless-image-only > .card-power {
  display:none;
}
.moonless-main-face.moonless-image-only > .neo-evo-badge {
  position:absolute;
  left:3px;
  bottom:4px;
  transform:none;
  z-index:5;
  white-space:nowrap;
  background:rgba(4,6,9,0.82);
  border-color:rgba(255,229,141,0.52);
  box-shadow:0 2px 10px rgba(0,0,0,0.55);
}

.ex-life-shield-badge {
  border-radius:4px;
  background:linear-gradient(180deg,rgba(109,78,15,0.96),rgba(21,17,11,0.96));
  box-shadow:0 0 10px rgba(240,199,102,0.28);
}

@keyframes glow {
  from { box-shadow:0 0 0 1px rgba(255,235,157,0.18), 0 0 12px rgba(255,171,75,0.36), 0 8px 18px rgba(0,0,0,0.42); }
  to { box-shadow:0 0 0 1px rgba(255,235,157,0.42), 0 0 24px rgba(57,214,199,0.42), 0 12px 24px rgba(0,0,0,0.48); }
}

.sidebar {
  border-left:1px solid rgba(240,199,102,0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 18%),
    #0b1016;
  box-shadow:-12px 0 32px rgba(0,0,0,0.28);
}

.log-panel {
  padding:10px;
  font-size:11px;
  background:
    linear-gradient(180deg, rgba(57,214,199,0.035), transparent),
    rgba(8,12,17,0.78);
  scrollbar-color:rgba(57,214,199,0.42) rgba(255,255,255,0.04);
}

.log-panel div {
  padding:4px 2px;
  border-bottom:1px solid rgba(255,255,255,0.055);
}

.log-turn { color:#fff0a8; text-shadow:0 0 8px rgba(240,199,102,0.26); }
.log-action { color:#d7dee7; }
.log-damage { color:#ff8b77; }
.log-effect { color:#8feee5; }
.log-card-name { color:#ffe58d; text-decoration-color:rgba(255,229,141,0.55); }

.action-panel {
  padding:10px;
  border-top:1px solid rgba(240,199,102,0.14);
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
}

.action-btn,
.modal-buttons button,
.db-header button,
.db-deck-actions button,
.chat-send {
  border-radius:8px;
  box-shadow:0 8px 16px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.12);
  transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.action-btn:hover,
.modal-buttons button:hover,
.db-header button:hover,
.db-deck-actions button:hover,
.chat-send:hover {
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.16);
}

.btn-charge,
.modal-confirm,
.db-save-btn,
.db-start-btn.ready {
  background:linear-gradient(180deg, rgba(104,217,130,0.28), rgba(20,77,45,0.92));
  color:#dfffe8;
}

.btn-end,
.modal-cancel,
.db-back-btn,
.db-clear-btn {
  background:linear-gradient(180deg, rgba(255,95,85,0.24), rgba(76,24,25,0.92));
  color:#ffd7d2;
}

.btn-skip {
  background:linear-gradient(180deg, rgba(57,214,199,0.22), rgba(20,52,59,0.92));
  color:#d8fffb;
}

.action-btn:disabled,
.modal-confirm:disabled,
.btn-charge:disabled,
.btn-end:disabled {
  background:#20242b;
  color:#59616b;
  box-shadow:none;
}

.chat-box {
  border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(7,9,13,0.82);
}

.chat-input-row {
  border-top:1px solid rgba(255,255,255,0.08);
}

.chat-input,
.mp-name-input,
.mp-input,
.ai-deck-picker select,
.db-search,
.db-sort-select,
.db-save-row input {
  background:#0b1118;
  border:1px solid rgba(255,255,255,0.16);
  color:#eef4f8;
  border-radius:7px;
}

.chat-send {
  background:linear-gradient(180deg, rgba(57,214,199,0.22), rgba(17,56,61,0.95));
  color:#d9fffa;
}

/* ── Merged feed: the action log + chat share one #log panel, with Actions/Chat filter tabs. ── */
.feed-tabs {
  display:flex; gap:6px; padding:6px 8px;
  border-bottom:1px solid rgba(240,199,102,0.14);
  background:rgba(7,9,13,0.6);
}
.feed-tab {
  flex:1; font-size:11px; font-weight:700; letter-spacing:.3px;
  color:#7c8696; background:#161c26; border:1px solid #2a3340; border-radius:6px;
  padding:4px 0; cursor:pointer; transition:background .12s, color .12s, border-color .12s, opacity .12s;
}
.feed-tab:hover { background:#1d2531; color:#cfd6e4; }
.feed-tab.active {
  background:linear-gradient(180deg, rgba(57,214,199,0.22), rgba(17,56,61,0.95));
  color:#d9fffa; border-color:#39d6c7;
}
.feed-tab:not(.active) { opacity:.6; }
/* When a category is filtered off, hide its entries in the merged feed. */
#log.hide-actions .feed-actions { display:none; }
#log.hide-chat .feed-chat { display:none; }
/* Chat entries get a subtle left accent so they read as chat, not game-action log. */
#log .feed-chat { border-left:2px solid rgba(120,160,255,0.5); padding-left:6px; }

/* ── Manual mode: card-detail panel gets its OWN full-height left column (own corner, unrestrained —
   like the deck builder's card-info column), separated from the board by a vertical drag handle
   (double-click to reset). Hidden outside manual mode, where the grid is just [board | sidebar]. ── */
.manual-tt-dock, .sidebar-vresizer { display:none; }
#game-screen.manual-mode .game-layout {
  position:relative;
  grid-template-columns: var(--manual-tt-dock-w, 320px) minmax(0, 1fr) 300px;
}
#game-screen.manual-mode .manual-tt-dock {
  display:block; position:relative; min-width:0;
  /* The PANEL is the scroll container: a card taller than the viewport scrolls inside the column
     instead of being clipped, so the player never has to resize just to read a long card. */
  overflow-y:auto; overflow-x:hidden;
  border-right:1px solid rgba(240,199,102,0.16);
  box-shadow:12px 0 32px rgba(0,0,0,0.28);
  background:linear-gradient(180deg, rgba(57,214,199,0.05), transparent 22%), rgba(8,12,17,0.82);
}
/* Vertical handle riding the seam between the info column and the board. Absolutely positioned so it
   doesn't consume a grid track; it follows the column width via the same --manual-tt-dock-w var. */
#game-screen.manual-mode .sidebar-vresizer {
  display:block; position:absolute; top:0; bottom:0; z-index:6;
  left:var(--manual-tt-dock-w, 320px); transform:translateX(-50%);
  width:11px; cursor:col-resize;
  background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
  border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(0,0,0,0.45);
  touch-action:none;
}
#game-screen.manual-mode .sidebar-vresizer::after {
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3px; height:34px; border-radius:2px; background:rgba(240,199,102,0.4); transition:background .12s;
}
#game-screen.manual-mode .sidebar-vresizer:hover::after,
#game-screen.manual-mode .sidebar-vresizer.active::after { background:rgba(240,199,102,0.9); }
.manual-tt-dock-empty {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px; color:#5b6675; font-size:11px; font-style:italic;
}
/* Hide the "hover a card" placeholder while a card is actually shown. */
#manual-tt-dock:has(.card-tooltip.visible) .manual-tt-dock-empty { display:none; }
/* The shared #card-tooltip, when docked, flows normally in the scrolling panel — no floating chrome. */
.card-tooltip.manual-tt-dock {
  position:static; z-index:auto; max-width:none; width:auto; margin:0;
  border:none; border-radius:0; box-shadow:none; background:transparent;
  pointer-events:auto; cursor:default; padding:10px 12px;
}
.card-tooltip.manual-tt-dock .tt-close { display:none; }
/* Fit the card art + any wide content to the panel width (it scrolls vertically if tall). */
.card-tooltip.manual-tt-dock img,
.card-tooltip.manual-tt-dock canvas,
.card-tooltip.manual-tt-dock .card-thumb { max-width:100%; height:auto; }
.card-tooltip.manual-tt-dock.multi { width:auto; }
/* Combined multi-part view (psychic links, king cells, zeron, etc.) inside the docked LEFT column:
   stack the part panels VERTICALLY and fill the column width, instead of an off-column horizontal
   spread that overflows the board. The dock panel (overflow-y:auto) scrolls when the stack is tall. */
#game-screen.manual-mode .card-tooltip.manual-tt-dock .tt-multi {
  flex-direction:column; gap:14px; align-items:stretch;
}
#game-screen.manual-mode .card-tooltip.manual-tt-dock .tt-card-panel {
  width:100%; flex:0 0 auto;
}

.modal-overlay {
  background:rgba(3,5,8,0.22);
  backdrop-filter:none;
}

.modal {
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 20%),
    #111923;
  border:1px solid rgba(240,199,102,0.26);
  box-shadow:0 24px 70px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.1);
}

.modal h3 {
  color:#fff0a8;
  letter-spacing:0.4px;
}
.modal.dragging {
  transition:none !important;
  will-change:transform;
}

.modal-cards {
  gap:10px;
}

.card-tooltip {
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 20%),
    #101720;
  border:1px solid rgba(240,199,102,0.25);
  box-shadow:0 18px 44px rgba(0,0,0,0.62);
}

.card-tooltip h3 { color:#fff4c5; }
.card-tooltip .tt-stats { color:#adb9c8; }
.card-tooltip .tt-text { color:#d3dae2; }
.card-tooltip .tt-flip { color:#8feee5; }

.attack-player-target {
  border-radius:8px;
  color:#9eabb9;
  background:rgba(255,255,255,0.025);
}

.attack-player-target.clickable {
  border-color:#ff8b77;
  color:#ffb29e;
  background:rgba(255,95,85,0.11);
  box-shadow:0 0 18px rgba(255,95,85,0.18);
}

.attack-player-target.clickable:hover {
  background:rgba(255,95,85,0.2);
}

.card.effect-flash,
.god-link-part.effect-flash,
.equipped-weapon.effect-flash,
.moonless-source-card.effect-flash {
  animation:effectFlash 0.38s ease-out;
  outline:2px solid rgba(255,241,155,0.96);
  outline-offset:3px;
}

.attack-cue-layer {
  position:fixed;
  inset:0;
  z-index:95;
  pointer-events:none;
}

.attack-cue-svg {
  width:100%;
  height:100%;
  overflow:visible;
}

.attack-cue-path {
  fill:none;
  stroke:#ffd966;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:18 10;
  filter:drop-shadow(0 0 10px rgba(255,95,85,0.88)) drop-shadow(0 0 18px rgba(255,217,102,0.48));
  animation:attackCueBlink 0.54s ease-in-out both, attackCueDash 0.54s linear both;
}

.attack-cue-path-split {
  stroke-width:5;
}

/* ── Manual-sync MP: turn indicator, End Turn button, opponent log, incoming arrows ── */
.phase-bar .mp-turn-mine { color:#6fe39a; font-weight:700; }
.phase-bar .mp-turn-opp { color:#e3b96f; font-weight:700; }
.phase-bar .mp-phase-name { font-weight:700; letter-spacing:.5px; }
.phase-bar .mp-phase-arrow { background:#222c3e; color:#cdd8ee; border:1px solid #36425a; border-radius:5px; padding:0 7px; margin:0 1px; cursor:pointer; font-size:11px; line-height:1.6; vertical-align:middle; }
.phase-bar .mp-phase-arrow:hover { background:#2c3a52; }
.manual-bar-btn.mp-endturn-btn.mp-myturn { background:#2e7d4f; color:#fff; border-color:#3aa06a; }
.manual-bar-btn.mp-endturn-btn:disabled { opacity:0.5; cursor:not-allowed; }
.feed-entry.log-oppaction { color:#9fb4d8; }
.feed-entry.log-oppaction::before { content:"\21F2  "; opacity:0.6; }
.mp-incoming-arrow .attack-cue-path { stroke:#7fb0ff; filter:drop-shadow(0 0 10px rgba(90,140,255,0.85)) drop-shadow(0 0 18px rgba(127,176,255,0.45)); }

.attack-cue-arrow-head {
  fill:#ffd966;
  filter:drop-shadow(0 0 8px rgba(255,95,85,0.9));
}

.attack-cue-source,
.attack-cue-card-target {
  outline:2px solid rgba(255,217,102,0.92);
  outline-offset:3px;
}

.attack-cue-player-target {
  box-shadow:0 0 0 2px rgba(255,217,102,0.62), 0 0 24px rgba(255,95,85,0.34) !important;
  border-color:rgba(255,217,102,0.56) !important;
}

.card-use-cue-layer {
  position:fixed;
  inset:0;
  z-index:110;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.card-use-spotlight {
  width:min(210px, 18vw, 30vh);
  min-width:120px;
  padding:7px;
  border-radius:12px;
  background:linear-gradient(145deg, rgba(255,241,155,0.92), rgba(57,214,199,0.52) 52%, rgba(255,95,85,0.68));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.42),
    0 0 34px rgba(255,217,102,0.52),
    0 28px 62px rgba(0,0,0,0.68);
  transform:translateX(var(--card-use-offset-x, 0));
  animation:cardUseSpotlight 0.68s cubic-bezier(.2,.82,.2,1) forwards;
}

.card-use-spotlight img {
  display:block;
  width:100%;
  aspect-ratio:5 / 7;
  object-fit:cover;
  border-radius:8px;
  background:#05070a;
}

.rps-reveal {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:center;
  min-width:360px;
  margin:12px 0 14px;
}

.rps-player {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px;
  border:1px solid rgba(240,199,102,0.22);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)), rgba(8,12,18,0.72);
  text-align:center;
}

.rps-name {
  color:#9eabb9;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.rps-throw {
  color:#fff0a8;
  font-size:22px;
  font-weight:900;
  text-shadow:0 0 16px rgba(240,199,102,0.24);
}

.rps-vs {
  color:#39d6c7;
  font-weight:900;
  letter-spacing:1px;
}

.rps-result {
  padding:8px 10px;
  border-radius:8px;
  text-align:center;
  font-weight:900;
  letter-spacing:0.5px;
}

.rps-result-win {
  color:#dfffe8;
  background:rgba(104,217,130,0.16);
  border:1px solid rgba(104,217,130,0.32);
}

.rps-result-tie {
  color:#fff0a8;
  background:rgba(240,199,102,0.14);
  border:1px solid rgba(240,199,102,0.28);
}

.turn-start-indicator {
  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.turn-start-text {
  padding:18px 34px;
  border-radius:10px;
  border:1px solid rgba(240,199,102,0.36);
  background:
    linear-gradient(90deg, rgba(255,95,85,0.22), rgba(240,199,102,0.16), rgba(57,214,199,0.20)),
    rgba(7,10,16,0.88);
  color:#fff4bc;
  font-size:36px;
  font-weight:1000;
  letter-spacing:2px;
  text-transform:uppercase;
  text-shadow:0 0 22px rgba(240,199,102,0.38), 0 2px 10px rgba(0,0,0,0.92);
  box-shadow:0 22px 54px rgba(0,0,0,0.54), inset 0 1px 0 rgba(255,255,255,0.12);
  animation:turnStartFlash 0.92s cubic-bezier(.2,.82,.2,1) forwards;
}

.turn-start-opponent .turn-start-text {
  border-color:rgba(255,95,85,0.42);
  background:
    linear-gradient(90deg, rgba(255,95,85,0.28), rgba(169,132,255,0.14), rgba(240,199,102,0.12)),
    rgba(12,8,16,0.9);
}

@keyframes effectFlash {
  0% { box-shadow:0 0 0 rgba(255,241,155,0), 0 6px 12px rgba(0,0,0,0.38); filter:brightness(1); }
  42% { box-shadow:0 0 0 3px rgba(255,241,155,0.92), 0 0 26px rgba(255,217,102,0.78), 0 0 42px rgba(57,214,199,0.28); filter:brightness(1.32) saturate(1.22); }
  100% { box-shadow:0 0 0 rgba(255,241,155,0), 0 6px 12px rgba(0,0,0,0.38); filter:brightness(1); }
}

@keyframes turnStartFlash {
  0% { opacity:0; transform:scale(0.82); filter:brightness(1.28); }
  18% { opacity:1; transform:scale(1.035); filter:brightness(1.14); }
  58% { opacity:1; transform:scale(1); filter:brightness(1); }
  100% { opacity:0; transform:scale(0.96); filter:brightness(0.96); }
}

@keyframes cardUseSpotlight {
  0% { opacity:0; transform:translate3d(var(--card-use-offset-x, 0), 28px, 0) scale(.82) rotate(-3deg); filter:brightness(1.5) saturate(1.28); }
  16% { opacity:1; transform:translate3d(var(--card-use-offset-x, 0), 0, 0) scale(1.05) rotate(1deg); }
  54% { opacity:1; transform:translate3d(var(--card-use-offset-x, 0), -4px, 0) scale(1) rotate(0deg); filter:brightness(1.12) saturate(1.12); }
  100% { opacity:0; transform:translate3d(var(--card-use-offset-x, 0), -34px, 0) scale(.94) rotate(2deg); filter:brightness(1) saturate(1); }
}

@keyframes attackCueBlink {
  0% { opacity:0; }
  18% { opacity:1; }
  42% { opacity:0.42; }
  68% { opacity:1; }
  100% { opacity:0; }
}

@keyframes attackCueDash {
  from { stroke-dashoffset:34; }
  to { stroke-dashoffset:-22; }
}

.win-overlay {
  background:rgba(3,5,8,0.88);
  backdrop-filter:blur(4px);
}

.win-overlay h2 {
  color:#fff0a8;
  text-shadow:0 0 24px rgba(240,199,102,0.32);
}

#deckbuilder-screen,
#decks-screen {
  background:
    linear-gradient(120deg, rgba(57,214,199,0.08), transparent 34%),
    linear-gradient(250deg, rgba(255,95,85,0.08), transparent 36%),
    #080b10;
}

#deckbuilder-screen {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#040611;
}

#deckbuilder-screen::before,
#deckbuilder-screen::after {
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:0;
}

#deckbuilder-screen::before {
  inset:-42%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,244,188,0.23) 0 4%, rgba(240,199,102,0.12) 10%, transparent 31%),
    radial-gradient(ellipse at 45% 55%, rgba(57,214,199,0.22), transparent 34%),
    radial-gradient(ellipse at 59% 42%, rgba(169,132,255,0.23), transparent 36%),
    radial-gradient(ellipse at 36% 63%, rgba(104,217,130,0.13), transparent 34%),
    conic-gradient(from 14deg at 50% 50%, rgba(255,95,85,0.08), rgba(57,214,199,0.24), rgba(169,132,255,0.22), rgba(240,199,102,0.16), rgba(255,95,85,0.08));
  opacity:0.74;
  transform:translate3d(-1%, 1%, 0) rotate(24deg) scale(1.2);
  background-position:52% 48%, 49% 58%, 57% 40%, 40% 66%, 50% 50%;
}

#deckbuilder-screen::after {
  inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(166,232,255,0.86) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,232,173,0.82) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(207,178,255,0.78) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,0.64) 0 0.8px, transparent 1.4px);
  background-size:160px 126px, 220px 176px, 286px 222px, 132px 188px, 90px 74px;
  background-position:12px 18px, 86px 56px, 174px 110px, 42px 74px;
  opacity:0.54;
}

#deckbuilder-screen > * {
  position:relative;
  z-index:1;
}

body:not(.deckbuilder-visible) #deckbuilder-screen::before,
body:not(.deckbuilder-visible) #deckbuilder-screen::after {
  animation-play-state:paused;
}

@keyframes dbGalaxySwirl {
  0% { transform:translate3d(-1.8%, -1.2%, 0) rotate(0deg) scale(1.18); background-position:50% 50%, 45% 55%, 59% 42%, 36% 63%, 50% 50%; }
  25% { transform:translate3d(1.4%, -1.7%, 0) rotate(92deg) scale(1.22); background-position:56% 44%, 51% 62%, 52% 35%, 43% 57%, 50% 50%; }
  50% { transform:translate3d(1.7%, 1.5%, 0) rotate(188deg) scale(1.2); background-position:47% 57%, 56% 47%, 66% 49%, 29% 68%, 50% 50%; }
  75% { transform:translate3d(-1.4%, 1.8%, 0) rotate(282deg) scale(1.23); background-position:53% 43%, 39% 59%, 55% 36%, 45% 70%, 50% 50%; }
  100% { transform:translate3d(-1.8%, -1.2%, 0) rotate(360deg) scale(1.18); background-position:50% 50%, 45% 55%, 59% 42%, 36% 63%, 50% 50%; }
}

@keyframes dbStarDrift {
  from { transform:translate3d(0, 0, 0); }
  to { transform:translate3d(-95px, 64px, 0); }
}

@keyframes dbStarTwinkle {
  0% { opacity:0.38; }
  38% { opacity:0.7; }
  62% { opacity:0.48; }
  100% { opacity:0.78; }
}

.db-header,
.decks-page-top,
.db-deck-panel,
.db-info-column,
.db-filters,
.db-detail-panel,
.db-deck-actions {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(9,15,24,0.84);
  border-color:rgba(255,255,255,0.1);
}

.db-header h2,
.db-deck-count.valid,
.db-curve-bar .db-curve-val {
  color:#fff0a8;
}

.db-filter-btn,
.db-stat {
  border-radius:7px;
  background:#0b1118;
  border-color:rgba(255,255,255,0.12);
}

.db-filter-btn.active {
  background:rgba(104,217,130,0.14);
  box-shadow:0 0 16px rgba(104,217,130,0.16);
}

.db-cards-grid {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 34px),
    rgba(5,8,15,0.62);
}

.db-card-row {
  background:
    linear-gradient(90deg, rgba(240,199,102,0.055), transparent 45%),
    rgba(8,12,18,0.78);
}

.db-deck-item:hover {
  background:rgba(240,199,102,0.08);
}

.db-curve-bar {
  background:linear-gradient(180deg, #f0c766, #39d6c7);
  box-shadow:0 0 10px rgba(57,214,199,0.2);
}

.battle-zone {
  overflow:visible;
}

.shield-zone {
  overflow:visible;
}

.card.tapped {
  will-change:transform;
}

.mana-zone.mana-charge-target {
  position:relative;
  overflow:visible;
  border-color:rgba(118,255,156,0.72);
  box-shadow:
    0 0 0 1px rgba(118,255,156,0.28),
    0 0 18px rgba(104,217,130,0.28),
    inset 0 0 18px rgba(104,217,130,0.12);
  animation:manaChargePulse 1.1s ease-in-out infinite alternate;
}

.mana-zone.mana-charge-target::before {
  content:'';
  position:absolute;
  inset:2px;
  border-radius:7px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 50%, rgba(118,255,156,0.18), transparent 34%),
    linear-gradient(90deg, rgba(57,214,199,0.09), rgba(104,217,130,0.15), rgba(57,214,199,0.07));
  opacity:0.7;
}

.mana-zone.mana-charge-drag-active,
.mana-zone.mana-charge-drag-over {
  border-color:rgba(180,255,190,0.95);
  box-shadow:
    0 0 0 1px rgba(180,255,190,0.42),
    0 0 26px rgba(104,217,130,0.45),
    inset 0 0 24px rgba(57,214,199,0.16);
}

.mana-zone.mana-charge-drag-over {
  filter:saturate(1.15) brightness(1.08);
}

.card.charge-draggable {
  cursor:grab;
}

.card.charge-draggable:active {
  cursor:grabbing;
}

.card.charge-dragging {
  opacity:0.45;
  transform:scale(0.96);
}

@keyframes manaChargePulse {
  from {
    box-shadow:
      0 0 0 1px rgba(118,255,156,0.22),
      0 0 12px rgba(104,217,130,0.22),
      inset 0 0 14px rgba(104,217,130,0.08);
  }
  to {
    box-shadow:
      0 0 0 1px rgba(118,255,156,0.42),
      0 0 28px rgba(57,214,199,0.36),
      inset 0 0 22px rgba(104,217,130,0.16);
  }
}

::-webkit-scrollbar {
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track {
  background:rgba(255,255,255,0.035);
}

::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, rgba(240,199,102,0.6), rgba(57,214,199,0.42));
  border:2px solid rgba(7,9,13,0.88);
  border-radius:8px;
}

@media (max-width: 900px) {
  .game-layout { grid-template-columns:minmax(0, 1fr) 250px; }
  #game-screen.manual-mode .game-layout { grid-template-columns: var(--manual-tt-dock-w, 260px) minmax(0, 1fr) 250px; }
  .zone-label { width:52px; font-size:9px; }
  .phase-bar { margin:0 12px; }
  .card { width:62px; height:86px; }
  .card.card-orega-aura { width:86px; height:62px; }
  .card.card-god-link { width:calc(var(--god-link-cols, 2) * 62px); height:calc(var(--god-link-rows, 1) * 86px); }
  .card.card-god-link.tapped { width:62px; height:86px; }
  .card.card-god-link .manual-stack-card,
  .card.card-god-link .manual-seal-slice { width:62px; height:86px; }
  .card.card-god-link .manual-aura-card { width:auto; height:62px; }
  .card.card-god-link .manual-stack-fan:not(.manual-cross-fan):not(.manual-aura-fan) { height:86px; }
  .card.card-god-link .manual-stack-fan:not(.manual-cross-fan):not(.manual-aura-fan) .manual-stack-card,
  .card.card-god-link .manual-seal-slice { margin-left:-31px; }
  .card.card-god-link .manual-cross-fan { height:86px; }
  .card.card-zeron-birth { width:118px; height:110px; }
  .card.card-zeron-birth.tapped { width:62px; height:86px; }
  .card-small { width:44px; height:61px; }
  .card-small.card-orega-aura { width:61px; height:44px; }
  .card.card-god-link.card-small { width:calc(var(--god-link-cols, 2) * 44px); height:calc(var(--god-link-rows, 1) * 61px); }
  .card.card-god-link.card-small.tapped { width:44px; height:61px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   Font-size setting (Settings → Font size) — TEXT-ONLY scaling of the reading surfaces. Each rule
   re-declares ONLY font-size as calc(<base>px * var(--dm-font-scale)); placed last so it wins over
   the base px by source order. Nothing here scales images, padding, layout, the board, or the title
   screen — only the text grows. --dm-font-scale is 1 at the default 16px (so this is a no-op then).
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
/* In-game: log / chat feed */
.log-panel { font-size: calc(11px * var(--dm-font-scale, 1)); }
.chat-messages, .chat-input, .chat-send { font-size: calc(11px * var(--dm-font-scale, 1)); }
/* In-game: card detail dock + tooltips (the card image is untouched) */
.card-tooltip h3 { font-size: calc(13px * var(--dm-font-scale, 1)); }
.card-tooltip .tt-stats { font-size: calc(11px * var(--dm-font-scale, 1)); }
.card-tooltip .tt-text { font-size: calc(10px * var(--dm-font-scale, 1)); }
.card-tooltip .tt-flip { font-size: calc(9px * var(--dm-font-scale, 1)); }
/* Modals + settings panel + syntax guide */
.modal-buttons button { font-size: calc(13px * var(--dm-font-scale, 1)); }
.dm-settings-head { font-size: calc(13px * var(--dm-font-scale, 1)); }
.dm-settings-row { font-size: calc(12px * var(--dm-font-scale, 1)); }
.dm-settings-btn-toggle { font-size: calc(11px * var(--dm-font-scale, 1)); }
.syntax-guide { font-size: calc(12px * var(--dm-font-scale, 1)); }
.syntax-guide code { font-size: calc(11px * var(--dm-font-scale, 1)); }
/* Deckbuilder: card-list rows */
.db-card-row-name { font-size: calc(13px * var(--dm-font-scale, 1)); }
.db-card-row-count { font-size: calc(10px * var(--dm-font-scale, 1)); }
.db-card-row-stats { font-size: calc(11px * var(--dm-font-scale, 1)); }
.db-card-row-meta { font-size: calc(10px * var(--dm-font-scale, 1)); }
.db-card-row-text { font-size: calc(11px * var(--dm-font-scale, 1)); }
.db-card-row-spell-title { font-size: calc(10px * var(--dm-font-scale, 1)); }
.db-card-row-spell-stats { font-size: calc(10px * var(--dm-font-scale, 1)); }
/* Deckbuilder: deck panel + detail panel */
.db-deck-header h3 { font-size: calc(15px * var(--dm-font-scale, 1)); }
.db-deck-count { font-size: calc(24px * var(--dm-font-scale, 1)); }
.db-deck-tab-btn { font-size: calc(11px * var(--dm-font-scale, 1)); }
.db-deck-info-title { font-size: calc(11px * var(--dm-font-scale, 1)); }
.db-deck-empty { font-size: calc(12px * var(--dm-font-scale, 1)); }
.db-deck-item { font-size: calc(12px * var(--dm-font-scale, 1)); }
.db-deck-item .db-item-cost, .db-deck-item .db-item-power { font-size: calc(11px * var(--dm-font-scale, 1)); }
.db-detail-panel h4 { font-size: calc(13px * var(--dm-font-scale, 1)); }
.db-detail-panel .db-det-stats { font-size: calc(11px * var(--dm-font-scale, 1)); }
.db-detail-panel .db-det-text { font-size: calc(11px * var(--dm-font-scale, 1)); }
.db-detail-panel .db-det-flavor { font-size: calc(11px * var(--dm-font-scale, 1)); }