/* ===========================================================================
   Born from Blood — Play board (free placement)  ·  play.css
   uses :root vars from style.css
   =========================================================================== */
.play-page { overflow: hidden; }
.board { display: flex; flex-direction: column; height: calc(100vh - 61px);
  background: radial-gradient(120% 80% at 50% 50%, #1a0e13 0%, var(--bg) 70%); overflow: hidden; }
.board-wrap { position: relative; }
.token-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; }

.parea { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 5px 8px; min-height: 0; }
.parea.opp { background: rgba(123,58,160,0.06); }
.parea.me  { background: rgba(196,35,63,0.05); }
.midline { height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); flex-shrink: 0; }

/* field = free-placement playmat */
.field { position: relative; flex: 1; min-height: 92px; border: 1px dashed var(--border); border-radius: 10px; background: rgba(0,0,0,0.18); overflow: hidden; }
.field.drop-hot { border-color: var(--accent2); }
.zg { position: absolute; font-size: 0.6rem; color: rgba(171,134,148,0.32); letter-spacing: .06em; pointer-events: none; text-transform: uppercase; }
.zg[style*="bottom"] { bottom: 6px; }

.bcard { position: relative; width: 66px; height: 92px; border-radius: 6px; border: 1px solid var(--border); background: #0c0608; cursor: grab; user-select: none; }
.bcard img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; pointer-events: none; }
.bcard:hover { outline: 2px solid var(--accent2); z-index: 30; }
.field-card { position: absolute; transform: translate(-50%, -50%); }
.field-card.tapped { transform: translate(-50%, -50%) rotate(90deg); }
.bcard.tapped { transform: rotate(90deg); }
.bcard.back { cursor: default; }
.bc-hp { position: absolute; right: -5px; top: -7px; background: #b3122b; color: #fff; font-weight: 800; font-size: 0.7rem;
  border-radius: 9px; padding: 1px 5px; border: 1px solid #ff8a9c; cursor: pointer; box-shadow: 0 0 4px #000; z-index: 3; }
.bc-counter { position: absolute; left: -5px; bottom: -5px; min-width: 18px; text-align: center; background: var(--accent);
  color: #fff; font-weight: 800; font-size: 0.72rem; border-radius: 7px; padding: 0 4px; box-shadow: 0 0 4px #000; z-index: 3; }

.drag-ghost { position: fixed; width: 64px; height: 90px; pointer-events: none; z-index: 3000; opacity: 0.92; transform: rotate(-4deg); box-shadow: 0 12px 26px rgba(0,0,0,.7); border-radius: 6px; }
.drag-ghost img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* rail */
.pctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 2px; flex-wrap: wrap; }
.ncoin { display: flex; align-items: center; gap: 5px; background: linear-gradient(180deg,#3a2a10,#2a1d0a); border: 1px solid #c9a23a; border-radius: 10px; padding: 3px 7px; }
.ncoin .coin { font-size: 1rem; } .ncoin .nlbl { font-size: 0.6rem; color: #e3b341; }
.ncoin .ncount { font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: #ffe08a; min-width: 24px; text-align: center; }
.ncoin button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid #c9a23a; background: #1d1407; color: #ffe08a; font-size: 0.95rem; cursor: pointer; }
.ncoin button:hover { background: #c9a23a; color: #1d1407; }
.pile { position: relative; width: 52px; height: 72px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2);
  cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: var(--muted); flex-shrink: 0; }
.pile img { width: 100%; height: 100%; object-fit: cover; }
.pile .pile-n { position: absolute; right: 2px; bottom: 1px; background: rgba(0,0,0,.72); color: #fff; font-weight: 800; font-size: 0.72rem; padding: 0 4px; border-radius: 5px; }
.pile:hover { outline: 2px solid var(--accent2); }
.pbtn { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 6px 9px; font-size: 0.74rem; cursor: pointer; white-space: nowrap; }
.pbtn:hover { border-color: var(--accent); }
.pbtn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.decksel { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 6px 7px; font-size: 0.74rem; max-width: 150px; }
.deckname { font-size: 0.72rem; color: var(--accent2); font-weight: 700; white-space: nowrap; }
.play-hint { font-size: 0.68rem; color: var(--muted); }

/* hand */
.hand { display: flex; gap: 5px; align-items: flex-end; flex-shrink: 0; min-height: 86px; overflow-x: auto; padding: 3px; background: rgba(0,0,0,0.28); border-radius: 8px; }
.hand .bcard { width: 62px; height: 86px; }
.hand.opp { min-height: 44px; } .hand.opp .bcard { width: 30px; height: 42px; cursor: default; }
.hand-count { font-size: 0.76rem; color: var(--muted); padding: 6px; }

/* card menu */
.cardmenu { display: none; position: fixed; z-index: 1500; background: var(--surface); border: 1px solid var(--accent); border-radius: 9px; padding: 4px; min-width: 162px; box-shadow: 0 12px 34px rgba(0,0,0,.75); }
.cardmenu.open { display: block; }
.cardmenu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 0.82rem; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.cardmenu button:hover { background: var(--accent); color: #fff; }
.cardmenu .cm-sep { height: 1px; background: var(--border); margin: 3px 2px; }

/* sheet (reveal top / graveyard) */
.sheet { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(5px); z-index: 1400; align-items: center; justify-content: center; padding: 24px; }
.sheet.open { display: flex; }
.sheet-box { background: var(--surface); border: 1px solid var(--accent); border-radius: 14px; padding: 16px 18px; max-width: 880px; width: 100%; max-height: 86vh; overflow-y: auto; position: relative; }
.sheet-close { position: absolute; top: 12px; right: 14px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 5px 12px; cursor: pointer; }
.sheet-close:hover { border-color: var(--accent); }
.sheet-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--text); margin-bottom: 14px; padding-right: 66px; }
.sheet-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.sheet-card { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.sheet-card img { width: 100%; border-radius: 6px; }
.sheet-name { font-size: 0.71rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.sheet-btns button { flex: 1; min-width: 38px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 4px 2px; font-size: 0.64rem; cursor: pointer; white-space: nowrap; }
.sheet-btns button:hover { background: var(--accent); color: #fff; }

/* token */
.token { position: absolute; width: 22px; height: 22px; border-radius: 50%; pointer-events: auto; cursor: grab;
  background: radial-gradient(circle at 35% 30%, #fff, #d7d7da 60%, #a9a9ae); border: 1px solid rgba(0,0,0,.45); box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.85); }
.token:active { cursor: grabbing; }

/* enlarged card + full info (double-click) */
.bpreview { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(5px); z-index: 999; align-items: center; justify-content: center; padding: 24px; }
.bpreview.open { display: flex; }
.bpreview-box { display: flex; gap: 22px; align-items: flex-start; max-width: min(880px, 94vw); max-height: 90vh; }
.bpreview-box img { max-height: 86vh; max-width: 56vw; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.8); flex-shrink: 0; cursor: zoom-out; }
.bpreview-info { max-width: 340px; max-height: 86vh; overflow-y: auto; }
.dname { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--text); margin-bottom: 8px; line-height: 1.2; }
.dtags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dtag { font-size: 0.7rem; background: var(--surface2); border: 1px solid var(--border); color: var(--accent2); border-radius: 99px; padding: 2px 9px; }
.dstats { font-size: 0.9rem; color: var(--accent2); font-weight: 700; margin-bottom: 12px; }
.deffect { font-size: 0.92rem; line-height: 1.6; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; margin-bottom: 12px; }
.dflavor { font-size: 0.86rem; font-style: italic; color: var(--muted); line-height: 1.5; }
.empty-min { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 30px; }

@media (max-width: 820px) {
  .board { height: auto; min-height: calc(100vh - 61px); }
  .bcard { width: 54px; height: 76px; }
  .bpreview-box { flex-direction: column; align-items: center; gap: 12px; }
  .bpreview-box img { max-width: 90vw; max-height: 56vh; } .bpreview-info { max-width: 92vw; }
}