/* Phoenix Hub - modern dark theme (slate + amber) + parchment alternative */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Cinzel:wght@500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --bg:#11141d;
  --paper:#1c2230;
  --paper-dark:#151a26;
  --ink:#e8ecf5;
  --ink-soft:#98a2b8;
  --red:#f06a4d;
  --blue:#5aa2e8;
  --green:#43c98c;
  --gold:#f5a524;
  --line:#323c54;
  --font-head:'Sora',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --btn-hover:#242c3f;
  --choice-hover:#232b3e;
  --hpbar-bg:#0f1420;
  --dash:rgba(152,162,184,.3);
  --soft-line:rgba(152,162,184,.15);
  --card-trap:#2a2136;
  --card-spell:#1b2b26;
  --back-a:#222a3d;
  --back-b:#1a2133;
  --overlay-bg:rgba(4,6,12,.7);
  --map-done:#1b2a24;
  --gold-glow:rgba(245,165,36,.3);
  --bg-decor:
    radial-gradient(circle at 15% 10%, rgba(245,165,36,.07) 0, transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(90,162,232,.06) 0, transparent 45%);
}

html[data-theme="parchment"]{
  --bg:#efe4c8;
  --paper:#efe4c8;
  --paper-dark:#e3d4ad;
  --ink:#2c2317;
  --ink-soft:#5b4a32;
  --red:#a83f2b;
  --blue:#2f5d7c;
  --green:#4f7a3a;
  --gold:#b8862f;
  --line:#3a2f1f;
  --font-head:'Cinzel',serif;
  --font-body:'Poppins',system-ui,sans-serif;
  --btn-hover:#d8c699;
  --choice-hover:#e9dcbb;
  --hpbar-bg:#d9c79c;
  --dash:rgba(58,47,31,.35);
  --soft-line:rgba(90,70,40,.18);
  --card-trap:#e9d6c0;
  --card-spell:#dfe6cf;
  --back-a:#cdb988;
  --back-b:#c2ab74;
  --overlay-bg:rgba(30,20,10,.5);
  --map-done:#e7eedd;
  --gold-glow:rgba(184,134,47,.35);
  --bg-decor:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.05) 0, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(90,70,40,.05) 28px 29px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; min-height:100%;}
body{
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
/* decor gradients pinned to the viewport so they never cut off on long/scrolling screens */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background: var(--bg-decor), var(--bg);
}
h1,h2,h3{font-family:var(--font-head); font-weight:700; margin:.2em 0; letter-spacing:.3px;}

/* clean panel helper */
.sketch{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.sketch.alt{ border-radius:14px; }

button{
  touch-action:manipulation;
  font-family:var(--font-body); font-weight:600; font-size:1rem; cursor:pointer;
  padding:.55em 1.2em; color:var(--ink);
  background:var(--paper-dark);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
button:hover{background:var(--btn-hover); border-color:var(--gold); transform:translateY(-1px);}
button:active{transform:translateY(1px); box-shadow:0 1px 2px rgba(0,0,0,.3);}
button:disabled{opacity:.45; cursor:not-allowed; transform:none;}

/* floating theme toggle - top right on every page */
.theme-btn{
  position:fixed; top:10px; right:12px; z-index:99;
  font-size:.82rem; padding:.4em .9em; opacity:.92;
}
@media (max-width:760px){
  .theme-btn{top:6px; right:8px; font-size:.72rem; padding:.35em .7em;}
}

/* top padding keeps content clear of the floating theme toggle */
#app{max-width:1080px; margin:0 auto; padding:52px 18px 18px;}

/* ---------- Screens ---------- */
.screen{display:none;}
.screen.active{display:block; animation:fade .4s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;}}

.title-wrap{text-align:center; margin-top:4vh;}
.title-wrap h1{font-size:3.2rem; letter-spacing:2px;}
.subtitle{font-size:1.15rem; color:var(--ink-soft); margin-bottom:1.6em; letter-spacing:.5px;}
.menu-btns{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
.menu-btns button{font-size:1.1rem; padding:.6em 1.4em;}

/* setup cards */
#screen-setup{padding-bottom:48px;}
.setup-grid{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:10px;}
.setup-col{flex:1 1 300px; max-width:460px; padding:16px;}
.choice{padding:10px 14px; margin:10px 0; cursor:pointer; transition:background .12s ease;}
.choice:hover{background:var(--choice-hover);}
.choice h3{margin:.1em 0;}
.choice .stats{font-size:.95rem; color:var(--blue); font-weight:600;}
.choice .flavor{font-size:.9rem; color:var(--ink-soft);}
.choice.selected{background:var(--paper-dark); outline:2px solid var(--gold);}
.center{text-align:center;}
.mt{margin-top:18px;}

/* ---------- Board ---------- */
#board{display:grid; grid-template-rows:auto auto auto auto auto; gap:10px;}
.player-strip{display:flex; align-items:center; justify-content:space-between; padding:8px 14px;}
.pname{font-size:1.2rem; font-weight:600;}
.hpbar-wrap{flex:1; margin:0 16px; max-width:420px;}
.hpbar{height:18px; background:var(--hpbar-bg); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.hpfill{height:100%; background:linear-gradient(90deg,#c64a32,#e07a4d); transition:width .5s ease;}
.stat-chips{display:flex; gap:8px; font-size:.9rem; font-weight:600;}
.chip{padding:2px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper-dark);}
.chip.mana{color:var(--blue);}
.chip.dmg{color:var(--red);}
.chip.spd{color:var(--green);}

.slots-row{display:flex; gap:18px; justify-content:center; padding:6px 0;}
.slot{
  width:130px; height:180px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-dark); border:2px dashed var(--dash); border-radius:12px;
  position:relative;
}
.slot.empty.playable{border:2px solid var(--gold); cursor:pointer;}
.slot.empty.playable:hover{background:var(--paper-dark);}
.slot .slot-num{position:absolute; top:4px; left:8px; font-size:.8rem; color:var(--ink-soft);}

.vs-line{text-align:center; font-family:var(--font-head); color:var(--red); font-size:1rem; letter-spacing:3px; text-transform:uppercase;}

/* ---------- Cards ---------- */
.card{
  width:118px; height:166px; padding:8px 8px 6px; position:relative;
  display:flex; flex-direction:column; cursor:default;
  background:var(--paper); border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.card.creature{}
.card.trap{background:var(--card-trap);}
.card.spell{background:var(--card-spell);}
.card .cname{font-family:var(--font-head); font-size:.92rem; line-height:1.05; font-weight:700; border-bottom:2px solid var(--line); padding-bottom:3px;}
.card .ctext{font-size:.74rem; line-height:1.25; color:var(--ink-soft); flex:1; overflow:hidden; margin-top:5px;}
.card .cost{position:absolute; top:-10px; right:-8px; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff; border:2px solid var(--line); border-radius:4px; font-size:1rem; font-weight:700;}
.card .pow{position:absolute; bottom:-10px; left:-8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff; border:2px solid var(--line); border-radius:4px; font-size:1.15rem; font-weight:700;}
.card .pow.buffed{background:var(--green);}
.card .pow.debuffed{background:#7a7a7a;}
.card.back{background:
  repeating-linear-gradient(45deg,var(--back-a) 0 10px,var(--back-b) 10px 20px);
  display:flex; align-items:center; justify-content:center;}
.card.back::after{content:"?"; font-family:var(--font-head); font-size:2.4rem; font-weight:700; color:var(--ink-soft);}

.hand-card.selected{outline:2px solid var(--gold); transform:translateY(-12px);}
.hand-card{transition:transform .12s ease;}
.hand-card.affordable{cursor:pointer;}
.hand-card.affordable:hover{transform:translateY(-10px);}
.hand-card.unaffordable{opacity:.5;}

/* reveal flash */
.card.reveal{animation:inkpop .4s ease;}
@keyframes inkpop{0%{transform:scale(.7);opacity:0;}60%{transform:scale(1.06);}100%{transform:scale(1);opacity:1;}}

#hand-area{padding:12px; margin-top:10px;}
#hand-area h3{margin:0 0 6px;}
.hand{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; min-height:170px;}

#turn-banner{text-align:center; font-size:1.05rem; font-weight:600; min-height:1.6em; color:var(--ink); margin:6px 0;}
.controls{display:flex; gap:12px; justify-content:center; margin-top:10px;}

/* log */
#log{max-height:130px; overflow:auto; font-size:.85rem; color:var(--ink-soft); padding:8px 14px; margin-top:10px;}
#log div{border-bottom:1px solid var(--soft-line); padding:3px 0;}

/* modal */
.overlay{position:fixed; inset:0; background:var(--overlay-bg); display:none; align-items:center; justify-content:center; z-index:50;}
.overlay.active{display:flex; animation:fade .3s;}
.modal{max-width:520px; width:90%; padding:24px; text-align:center;}
.modal h2{font-size:1.6rem;}
#hand-area h3,.modal p,.powerup-row button{font-size:1rem;}
.small{font-size:.85rem;}
.reward-row,.powerup-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:16px;}
.reward-row .card{cursor:pointer;}
.reward-row .card:hover{transform:translateY(-8px);}

.deck-strip{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:14px;}
.deck-strip .card{width:96px;height:138px;}

footer{text-align:center; color:var(--ink-soft); font-size:.9rem; margin:18px 0;}
.small{font-size:.85rem; color:var(--ink-soft);}

/* ---- v2: passive on left + live power ---- */
.player-strip{gap:14px;}
.strip-left{flex:1 1 280px; min-width:0;}
.passive-box{
  display:flex; flex-direction:column; line-height:1.2; margin-top:4px;
  padding:5px 9px; background:var(--paper-dark); border:1px solid var(--line);
  border-radius:8px; max-width:340px;
}
.passive-box .passive-label{
  font-size:.65rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.passive-box b{font-size:.95rem; color:var(--blue);}
.chip.pow-chip{background:var(--gold); color:#fff; border-color:var(--line); font-weight:700;}

/* ===== v3 layout: left sidebar + compact board, no-scroll ===== */
#app{max-width:1180px;}
#screen-game.active{display:block;}
.game-grid{display:grid; grid-template-columns:240px 1fr; gap:16px; align-items:start;}

/* sidebar */
.side-panel{display:flex; flex-direction:column; gap:10px; position:sticky; top:10px;}
.side-round{padding:8px 12px; text-align:center;}
.side-round-num{font-family:var(--font-head); font-weight:700; font-size:1.25rem; color:var(--red);}
.side-passive{padding:9px 12px;}
.side-passive-who{font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; color:var(--ink-soft);}
.side-passive-who.foe{color:var(--red);}
.side-passive-who.mine{color:var(--blue);}
.side-passive .passive-name{font-family:var(--font-head); font-weight:700; font-size:1rem; margin:1px 0 3px;}
.side-log{padding:8px 12px;}
.side-log-title{font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:4px;}
.side-log #log{max-height:150px; margin:0; padding:0; border:0; background:none; box-shadow:none; font-size:.78rem;}
.side-panel button{font-size:.9rem; padding:.4em 1em;}

/* board: compact so it fits in a viewport without scrolling */
.board-area{display:flex; flex-direction:column; gap:6px;}
.player-strip{padding:6px 12px;}
.pname{font-size:1.05rem;}
.slots-row{gap:14px; padding:2px 0;}
.slot{width:104px; height:142px;}
.card{width:96px; height:134px; padding:6px 6px 5px;}
.card .cname{font-size:.8rem;}
.card .ctext{font-size:.66rem; line-height:1.18; margin-top:3px;}
.card .cost{width:24px; height:24px; font-size:.85rem; top:-9px; right:-7px;}
.card .pow{width:28px; height:28px; font-size:1rem; bottom:-9px; left:-7px;}
.card.back::after{font-size:2rem;}
.vs-line{font-size:.85rem; margin:1px 0;}
#turn-banner{font-size:1rem; min-height:1.3em; margin:3px 0;}
#hand-area{padding:8px 10px; margin-top:4px; background:var(--paper); border:2px solid var(--line); border-radius:6px;}
#hand-area h3{font-size:.95rem; margin:0 0 4px;}
.hand{gap:10px; min-height:138px; flex-wrap:nowrap; overflow-x:auto;}
.hand-card.selected{transform:translateY(-8px);}
.hand-card.affordable:hover{transform:translateY(-7px);}

@media (max-width:760px){
  .game-grid{grid-template-columns:1fr;}
  .side-panel{position:static; flex-direction:row; flex-wrap:wrap;}
  .side-panel>*{flex:1 1 140px;}
}

/* ===== round-end breakdown (concise) ===== */
.bd-totals{display:flex; align-items:center; justify-content:center; gap:18px; margin:10px 0 14px;}
.bd-tot{display:flex; flex-direction:column; align-items:center; min-width:120px;
  padding:8px 14px; background:var(--paper-dark); border:2px solid var(--line); border-radius:6px;}
.bd-tot .bd-tname{font-size:.8rem; color:var(--ink-soft); font-weight:600;}
.bd-tot b{font-family:var(--font-head); font-size:1.8rem; color:var(--red);}
.bd-vs{font-family:var(--font-head); color:var(--ink-soft);}
.bd-explain{margin:6px 0;}
.bd-math{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center;
  font-size:.95rem; margin:4px 0;}
.bd-hl{font-weight:700; color:var(--blue);}
.bd-hl.big{color:var(--red); font-size:1.1rem;}
.bd-hp{margin-top:8px; font-size:1.05rem;}
.bd-parity{margin-top:12px; padding-top:8px; border-top:1px dashed var(--dash);}
.bd-sub{font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-bottom:4px;}
.pe-up{color:var(--green); font-size:.95rem;}
.pe-down{color:var(--red); font-size:.95rem;}

/* reward selectable cards */
.card.selectable{cursor:pointer; transition:transform .1s ease;}
.card.selectable:hover{transform:translateY(-6px);}
.card.chosen{outline:3px solid var(--gold); transform:translateY(-6px);}

/* hit shake + sound btn */
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
.player-strip.shake{animation:shake .42s ease;}
#btn-sound{font-size:.85rem; padding:.4em 1em;}

/* ===== mobile (<=760px): fluid board + tap-to-expand info ===== */
@media (max-width:760px){
  #app{padding:44px 6px 6px;}
  .game-grid{grid-template-columns:1fr; gap:6px;}

  /* sidebar -> compact grid above the board */
  .side-panel{position:static; display:grid; grid-template-columns:1fr 1fr; gap:6px;}
  .side-round{grid-column:1 / -1; padding:5px 10px;}
  .side-round-num{font-size:1rem;}
  .side-round .small{display:none;}
  .side-log{grid-column:1 / -1;}
  #btn-sound,#btn-menu{font-size:.8rem; padding:.45em .6em; min-height:40px;}

  /* collapse passive + log; tap to expand */
  .side-passive{cursor:pointer; position:relative; padding:7px 22px 7px 10px;}
  .side-passive .small{display:none;}
  .side-passive.open .small{display:block;}
  .side-passive::after{content:"\25BE"; position:absolute; right:9px; top:7px; color:var(--ink-soft); font-size:.8rem;}
  .side-passive.open::after{content:"\25B4";}
  .side-passive .passive-name{font-size:.85rem;}
  .side-log #log{display:none; max-height:110px;}
  .side-log.open #log{display:block;}
  .side-log-title{cursor:pointer; position:relative;}
  .side-log-title::after{content:"\25BE"; position:absolute; right:2px; top:0; font-size:.8rem;}
  .side-log.open .side-log-title::after{content:"\25B4";}

  /* fluid board: 3 slots always share the row width; card fills slot */
  .board-area{gap:5px;}
  .slots-row{gap:2.2vw; padding:2px 0;}
  .slot{flex:1 1 0; width:auto; min-width:0; max-width:31.5%; height:auto; aspect-ratio:3 / 4;}
  .slot > .card{width:100%; height:100%;}
  .slot .slot-num{font-size:.55rem; top:2px; left:4px;}

  .card{padding:4px;}
  .card .cname{font-size:2.9vw; line-height:1.05; padding-bottom:2px;}
  .card .ctext{font-size:2.4vw; line-height:1.12; margin-top:2px;}
  .card .cost{width:5.4vw; height:5.4vw; min-width:16px; min-height:16px; font-size:2.7vw; top:-7px; right:-5px;}
  .card .pow{width:6vw; height:6vw; min-width:18px; min-height:18px; font-size:3vw; bottom:-7px; left:-5px;}
  .card.back::after{font-size:8vw;}

  /* hand: horizontal scroll with fixed compact cards */
  #hand-area{padding:8px 6px;}
  #hand-area h3{font-size:.85rem; margin:0 0 4px;}
  /* hand wraps into rows instead of sideways scrolling */
  .hand{flex-wrap:wrap; justify-content:center; gap:8px; min-height:0; padding:2px 2px 8px; overflow-x:visible;}
  .hand-card{flex:0 0 auto;}
  .hand-card > .card{width:84px; height:118px;}
  .hand-card > .card .cname{font-size:.62rem;}
  .hand-card > .card .ctext{font-size:.54rem;}
  .hand-card > .card .cost{width:18px; height:18px; font-size:.65rem;}
  .hand-card > .card .pow{width:21px; height:21px; font-size:.78rem;}

  /* player strips wrap so chips never overflow */
  .player-strip{flex-wrap:wrap; gap:6px; padding:6px 8px;}
  .pname{font-size:.92rem;}
  .hpbar-wrap{order:3; flex:1 1 100%; margin:2px 0; max-width:none;}
  .stat-chips{font-size:.72rem; gap:5px;}
  .chip{padding:1px 7px;}
  #turn-banner{font-size:.88rem; min-height:1.2em;}

  /* title / setup / modals */
  .title-wrap h1{font-size:2rem;}
  .subtitle{font-size:.92rem;}
  .menu-btns{gap:10px;}
  .menu-btns button{font-size:1rem; min-height:44px; flex:1 1 46%;}
  .setup-grid{gap:12px;}
  .setup-col{padding:10px; flex-basis:100%;}
  .modal{padding:16px; width:95%; max-height:88vh; overflow-y:auto;}
  .modal h2{font-size:1.3rem;}
  .bd-totals{gap:10px;}
  .bd-tot{min-width:84px; padding:6px 10px;}
  .bd-tot b{font-size:1.4rem;}
  .reward-row{gap:8px;}
  .reward-row .card{width:88px; height:124px;}
  .deck-strip .card{width:64px; height:90px;}
}

/* ===== campaign map ===== */
.map-path{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:920px; margin:14px auto;}
.map-node{position:relative; width:200px; padding:12px 14px; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.3);}
.map-node-num{font-family:var(--font-head); font-weight:700; color:var(--ink-soft); font-size:.85rem;}
.map-node-name{font-family:var(--font-head); font-weight:700; font-size:1.1rem; margin:2px 0;}
.map-node-foe{color:var(--blue); font-weight:600; font-size:.85rem;}
.map-node-blurb{font-style:italic; margin-top:4px;}
.map-node.locked{opacity:.55; filter:grayscale(.4);}
.map-node.done{border-color:var(--green); background:var(--map-done);}
.map-node.current{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow), 0 2px 8px rgba(0,0,0,.3);}
.map-node .map-battle{margin-top:8px; width:100%; background:var(--gold); color:#fff;}
.map-badge{margin-top:8px; color:var(--green); font-weight:700; font-size:.85rem;}
.map-deck{max-width:760px; margin:18px auto 0; padding:12px;}
@media (max-width:760px){
  .map-node{width:44%; min-width:140px; padding:8px 10px;}
  .map-node-name{font-size:.95rem;}
  .map-deck .card{width:62px; height:88px;}
}

/* ===== mobile overflow fix: allow flex/grid items to shrink ===== */
html,body{max-width:100%; overflow-x:hidden;}
@media (max-width:760px){
  #app{width:100%; max-width:100%;}
  .game-grid{width:100%;}
  .game-grid, .game-grid > *,
  .board-area, .side-panel, .side-panel > *,
  .player-strip, .player-strip > *, .strip-left, .hpbar-wrap,
  .slots-row, .slots-row > *, #hand-area{ min-width:0; }
  .player-strip{overflow:hidden;}
  .pname{white-space:normal; overflow-wrap:anywhere;}
  .side-passive,.side-round,.side-log{overflow:hidden;}
  .side-passive .passive-name,.side-passive .small{overflow-wrap:anywhere;}
  .hpbar-wrap{width:100%;}
}