/* ===== 심연의 덱: 무한 회랑 — styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Noto+Sans+KR:wght@400;600;800&display=swap');

:root{
  --bg:#0b0717; --bg2:#120a22; --panel:#1a1230; --panel2:#231640;
  --ink:#ece6ff; --mut:#a99fc8; --gold:#ffce6b; --gold2:#e8a93d;
  --atk:#ff7a5a; --skl:#5fb8ff; --pow:#ffd36b; --curse:#9a86b0;
  --violet:#9b6cff; --teal:#3fd6a8; --red:#e0564a; --good:#6dff9e; --bad:#ff6b8a;
  --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Noto Sans KR',system-ui,sans-serif;
  background:
    radial-gradient(1200px 700px at 70% -10%, #211142 0%, transparent 60%),
    radial-gradient(900px 600px at 10% 110%, #16243a 0%, transparent 55%),
    var(--bg);
  color:var(--ink); overflow:hidden; user-select:none;
  display:flex; flex-direction:column;
}
b{color:inherit}
.hidden{display:none !important}
.btn{
  font-family:'Cinzel','Noto Sans KR',serif; font-weight:700; cursor:pointer;
  border:1px solid var(--gold2); color:#1a1208;
  background:linear-gradient(180deg,#ffe7a8,var(--gold));
  padding:.7em 1.5em; border-radius:11px; font-size:15px; letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(255,180,60,.25), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .08s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.big{font-size:19px; padding:.8em 2.2em; margin:6px 0}
.btn.ghost{background:transparent; color:var(--gold); border-color:var(--line); box-shadow:none}
.btn.ghost:hover{border-color:var(--gold)}
.btn.sm{padding:.45em .9em; font-size:13px}

/* ===== TOP BAR ===== */
#topbar{
  display:flex; align-items:center; gap:12px; padding:8px 14px;
  background:linear-gradient(180deg,rgba(20,12,38,.95),rgba(20,12,38,.6));
  border-bottom:1px solid var(--line); flex:none; z-index:30;
}
#topbar .back{color:var(--mut); text-decoration:none; font-size:14px; font-weight:600}
#topbar .back:hover{color:var(--ink)}
#topbar .brand{font-family:'Cinzel',serif; font-weight:900; color:var(--gold); letter-spacing:.04em}
#topbar .hs{margin-left:auto; color:var(--mut); font-size:13px}
#topbar .hs b{color:var(--gold)}

/* ===== RUN HUD ===== */
#hudbar{
  display:flex; align-items:center; gap:14px; padding:7px 16px; flex:none;
  background:rgba(14,8,28,.7); border-bottom:1px solid var(--line); z-index:20;
}
.hud-left{display:flex; align-items:center; gap:10px}
.hChar{font-family:'Cinzel',serif; font-weight:700; color:var(--gold); font-size:14px; white-space:nowrap}
.hHpWrap{position:relative; width:150px; height:18px; border-radius:10px; background:#2a0f18; overflow:hidden; border:1px solid rgba(255,90,110,.3)}
.hHpFill{position:absolute; inset:0; width:100%; background:linear-gradient(90deg,#ff7a5a,#e7331f); transition:width .25s}
.hHpTxt{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; text-shadow:0 1px 2px #000}
.hud-mid{display:flex; gap:8px; margin:0 auto}
.hChip{background:rgba(255,255,255,.05); border:1px solid var(--line); padding:4px 10px; border-radius:9px; font-size:12.5px; color:var(--mut)}
.hChip b{color:var(--ink)}
.hChip.score b{color:var(--gold)}
.hud-right{display:flex; align-items:center; gap:12px}
.relicBar{display:flex; gap:5px; flex-wrap:wrap; max-width:230px; justify-content:flex-end}
.relic{width:30px; height:30px; display:grid; place-items:center; font-size:16px; border-radius:8px;
  background:radial-gradient(circle at 50% 30%, #3a2a5c, #1a1030); border:1px solid var(--gold2); cursor:help;
  box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 0 8px rgba(255,200,90,.15)}
.potionBar{display:flex; gap:5px}
.potslot{width:30px; height:30px; display:grid; place-items:center; font-size:16px; border-radius:50%;
  border:1px dashed var(--line); color:var(--mut); cursor:pointer; transition:transform .1s}
.potslot.filled{border:1px solid var(--teal); background:radial-gradient(circle at 50% 30%,#15402f,#0c2018); box-shadow:0 0 8px rgba(63,214,168,.3)}
.potslot.filled:hover{transform:scale(1.12)}
.potslot.empty{opacity:.4; font-size:13px}

/* ===== STAGE / SCREENS ===== */
#stage{position:relative; flex:1 1 auto; min-height:0; display:flex}
.screen{position:absolute; inset:0; display:flex; flex-direction:column}
.overlayscreen{align-items:center; justify-content:center; overflow:auto; padding:18px;
  background:radial-gradient(900px 600px at 50% 20%, rgba(40,20,70,.5), rgba(8,5,18,.85))}

/* ===== MENU ===== */
#menuScreen{align-items:center; justify-content:center; overflow:auto; padding:20px; text-align:center}
.menu-card{max-width:620px}
.logo{font-size:74px; filter:drop-shadow(0 6px 24px rgba(155,108,255,.6)); animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.menu-card h1{font-family:'Cinzel',serif; font-weight:900; font-size:46px; margin:.1em 0 .2em; letter-spacing:.03em;
  background:linear-gradient(180deg,#fff,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent}
.menu-card h1 small{display:block; font-size:16px; letter-spacing:.4em; color:var(--violet); margin-top:6px; -webkit-text-fill-color:var(--violet)}
.tag{color:var(--mut); line-height:1.7; font-size:15px; margin:14px auto 18px; max-width:520px}
.feats{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:22px}
.feats span{background:rgba(155,108,255,.12); border:1px solid rgba(155,108,255,.35); color:#d8c8ff; padding:6px 12px; border-radius:20px; font-size:13px; font-weight:600}
.hint{color:var(--mut); font-size:12.5px; margin-top:18px; line-height:1.6}
.hint b{color:var(--gold)}
.selhead{font-family:'Cinzel',serif; text-align:center; color:var(--gold); font-size:24px; margin:8px 0 18px}
.charrow{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; padding:0 16px 30px}
.charpick{
  width:240px; text-align:left; cursor:pointer; color:var(--ink);
  background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:16px; padding:18px; transition:transform .12s, border-color .15s, box-shadow .2s;
}
.charpick:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.5)}
.charpick.war:hover{border-color:var(--red); box-shadow:0 16px 40px rgba(224,86,74,.3)}
.charpick.nec:hover{border-color:var(--violet); box-shadow:0 16px 40px rgba(155,108,255,.3)}
.charpick.dan:hover{border-color:var(--teal); box-shadow:0 16px 40px rgba(63,214,168,.3)}
.cicon{font-size:42px; text-align:center; filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.charpick h3{font-family:'Cinzel',serif; text-align:center; margin:6px 0 2px; font-size:22px}
.charpick.war h3{color:var(--red)} .charpick.nec h3{color:var(--violet)} .charpick.dan h3{color:var(--teal)}
.cmeta{text-align:center; font-size:12px; color:var(--mut); margin-bottom:10px}
.charpick p{font-size:13px; color:var(--mut); line-height:1.6; min-height:72px; margin:0 0 10px}
.ctags{display:flex; gap:6px; flex-wrap:wrap}
.ctags span{font-size:11px; background:rgba(255,255,255,.06); border:1px solid var(--line); padding:3px 9px; border-radius:12px; color:var(--mut)}

/* ===== MAP ===== */
.maptop{display:flex; align-items:center; gap:12px; padding:10px 18px}
.maptop h2{font-family:'Cinzel',serif; color:var(--gold); margin:0; font-size:22px}
.maptop button{margin-left:auto}
#mapScroll{flex:1 1 auto; overflow-y:auto; padding:0 10px}
#mapInner{display:flex; justify-content:center}
.mapsvg{width:100%; max-width:760px; height:auto; display:block; margin:0 auto}
.medge{stroke:rgba(160,140,210,.22); stroke-width:2.5; stroke-dasharray:5 6}
.medge.hot{stroke:rgba(255,206,107,.7); stroke-width:3; stroke-dasharray:none}
.mnode .mnodec{fill:#1c1330; stroke:#3a2c58; stroke-width:2; transition:all .15s}
.mnode .mnodet{text-anchor:middle; fill:#6a5c88; pointer-events:none}
.mnode.done .mnodec{fill:#241a3c; stroke:#4a3a6c}
.mnode.done .mnodet{fill:#8a7caa}
.mnode.fight .mnodec{stroke:#c0566a}
.mnode.elite .mnodec{stroke:#ff4d6a}
.mnode.rest .mnodec{stroke:#ff9d4d}
.mnode.shop .mnodec{stroke:#ffd24d}
.mnode.treasure .mnodec{stroke:#5fd6ff}
.mnode.event .mnodec{stroke:#9b6cff}
.mnode.boss .mnodec{stroke:#ffce6b; stroke-width:3}
.mnode.reach .mnodec{fill:#2c1f50; filter:drop-shadow(0 0 8px rgba(255,206,107,.8)); animation:pulse 1.4s infinite}
.mnode.reach .mnodet{fill:#fff}
.mnode.current .mnodec{fill:#3a2a5c; stroke:#fff; stroke-width:3}
@keyframes pulse{50%{filter:drop-shadow(0 0 14px rgba(255,206,107,1))}}
.maphint{text-align:center; color:var(--mut); font-size:13px; padding:10px}

/* ===== COMBAT ===== */
#combatScreen{display:flex; flex-direction:column}
#battleWrap{position:relative; flex:1 1 auto; min-height:0; overflow:hidden}
#battleCanvas{position:absolute; inset:0; width:100%; height:100%; display:block}
#enemyOverlay{position:absolute; inset:0; pointer-events:none}
.enemyBox{position:absolute; transform:translate(-50%,-140px); width:140px; text-align:center; pointer-events:none}
.enemyBox.targetable{pointer-events:auto; cursor:crosshair}
.enemyBox.targetable:hover .ename{color:var(--gold)}
.enemyBox.targetable::after{content:"🎯"; position:absolute; left:50%; top:150px; transform:translateX(-50%); opacity:0; transition:opacity .1s}
.enemyBox.targetable:hover::after{opacity:1}
.intent{display:inline-flex; align-items:center; gap:3px; background:rgba(10,6,20,.8); border:1px solid var(--line);
  padding:2px 8px; border-radius:10px; font-size:13px; font-weight:800; color:#ffd56b; margin-bottom:4px; box-shadow:0 2px 8px rgba(0,0,0,.5)}
.intent span{color:#fff}
.ehp{position:relative; width:120px; height:14px; margin:2px auto; border-radius:8px; background:#2a0f18; overflow:hidden; border:1px solid rgba(0,0,0,.5)}
.ehpfill{position:absolute; inset:0; background:linear-gradient(90deg,#ff5a5a,#b81f1f); transition:width .2s}
.ehptxt{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; text-shadow:0 1px 2px #000}
.ename{font-family:'Cinzel',serif; font-size:13px; font-weight:700; margin-top:2px; text-shadow:0 2px 6px #000}
.estatus{display:flex; gap:3px; flex-wrap:wrap; justify-content:center; margin-top:3px}
.schip{font-size:11px; padding:1px 5px; border-radius:8px; font-weight:800; background:rgba(0,0,0,.55); border:1px solid var(--line)}
.schip.g{color:var(--good); border-color:rgba(109,255,158,.4)}
.schip.b{color:var(--bad); border-color:rgba(255,107,138,.4)}
#combatTopRight{position:absolute; top:10px; right:10px}
.iconbtn{background:rgba(10,6,20,.7); border:1px solid var(--line); color:var(--ink); width:38px; height:38px; border-radius:10px; font-size:17px; cursor:pointer}
#playerStatusWrap{position:absolute; left:14px; bottom:10px}
.statusrow{display:flex; gap:4px; flex-wrap:wrap; max-width:300px}

#combatBottom{flex:none; display:flex; align-items:flex-end; gap:8px; padding:6px 10px 10px;
  background:linear-gradient(180deg,transparent, rgba(8,5,18,.6) 30%); position:relative; z-index:5}
#leftHud{display:flex; flex-direction:column; gap:8px; flex:none}
.energyBadge,.blockBadge{display:flex; align-items:center; gap:5px; padding:7px 12px; border-radius:12px; font-family:'Cinzel',serif; font-weight:800; font-size:18px}
.energyBadge{background:radial-gradient(circle at 40% 30%,#3a2e6e,#1a1240); border:1px solid var(--violet); color:#cdbcff; box-shadow:0 0 14px rgba(155,108,255,.4)}
.blockBadge{background:radial-gradient(circle at 40% 30%,#1d3a52,#0f2030); border:1px solid #5fb8ff; color:#bfe2ff; transition:opacity .2s}
.energyBadge .ico,.blockBadge .ico{font-size:14px}

#handZone{flex:1 1 auto; display:flex; justify-content:center; align-items:flex-end; gap:-14px; min-height:200px; overflow:visible; padding:0 6px}
#handZone .card{margin:0 -10px; transition:transform .14s, margin .14s}
#handZone .card:hover{transform:translateY(-22px) scale(1.06); z-index:20; margin:0 4px}

#rightHud{display:flex; flex-direction:column; gap:8px; align-items:stretch; flex:none}
.pileBtn{position:relative; background:rgba(20,12,38,.8); border:1px solid var(--line); color:var(--ink); width:48px; height:40px; border-radius:10px; font-size:18px; cursor:pointer}
.pileBtn small{position:absolute; right:2px; bottom:0; font-size:11px; color:var(--gold); font-weight:800}
.endbtn{font-family:'Cinzel',serif; font-weight:800; cursor:pointer; color:#1a1208;
  background:linear-gradient(180deg,#ffe7a8,var(--gold)); border:1px solid var(--gold2);
  border-radius:12px; padding:10px 14px; font-size:15px; line-height:1.1; box-shadow:0 4px 14px rgba(255,180,60,.3)}
.endbtn small{display:block; font-size:10px; font-weight:600; opacity:.7}
.endbtn:hover{transform:translateY(-2px)}

/* ===== CARD ===== */
.card{
  position:relative; width:118px; height:170px; flex:none; border-radius:13px; cursor:pointer;
  background:linear-gradient(180deg,#241a3c,#160e28); border:1px solid #3a2c58;
  box-shadow:0 8px 20px rgba(0,0,0,.5); overflow:hidden; color:var(--ink);
}
.card.atk{border-color:#7a3b32; background:linear-gradient(180deg,#34201c,#1c1010)}
.card.skl{border-color:#2c5a7a; background:linear-gradient(180deg,#172c3c,#0e1a26)}
.card.pow{border-color:#7a653b; background:linear-gradient(180deg,#34301c,#1c1810)}
.card.curse{border-color:#4a3b5a; background:linear-gradient(180deg,#2a2238,#15101e)}
.card.up{box-shadow:0 0 0 1px var(--gold), 0 8px 20px rgba(255,200,90,.25)}
.card.nope{opacity:.5; filter:grayscale(.4)}
.card.sel{transform:translateY(-26px); box-shadow:0 0 0 2px var(--gold), 0 14px 30px rgba(255,200,90,.4)}
.card .cost{position:absolute; top:-2px; left:-2px; width:30px; height:30px; display:grid; place-items:center;
  font-family:'Cinzel',serif; font-weight:900; font-size:16px; color:#fff; z-index:3;
  background:radial-gradient(circle at 40% 35%,#6a4ad0,#2a1860); border:1px solid #b69bff; border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.card .cost.atk{background:radial-gradient(circle at 40% 35%,#d05a3a,#601810); border-color:#ff9b7b}
.card .cframe{display:flex; flex-direction:column; height:100%; padding:6px 7px 7px}
.cart{height:62px; display:grid; place-items:center; border-radius:8px; margin:18px 0 4px;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.07), rgba(0,0,0,.3)); border:1px solid rgba(255,255,255,.06)}
.artglyph{font-size:34px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 10px var(--ag))}
.cname{font-family:'Cinzel',serif; font-weight:700; font-size:12.5px; text-align:center; line-height:1.1; margin-top:2px}
.ctype{font-size:9px; text-align:center; color:var(--mut); letter-spacing:.08em; margin:1px 0 3px; text-transform:uppercase}
.ctext{font-size:10.5px; line-height:1.32; text-align:center; color:#d8d0ee; flex:1; overflow:hidden}
.card.shake{animation:cshake .3s}
@keyframes cshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ===== PANELS (reward/rest/shop/event/over) ===== */
.panel{
  width:min(560px,94vw); background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--gold2); border-radius:18px; padding:24px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 0 40px rgba(155,108,255,.06);
}
.panel.wide{width:min(820px,96vw)}
.panel h2{font-family:'Cinzel',serif; color:var(--gold); margin:0 0 6px; font-size:26px}
.panel h3{font-family:'Cinzel',serif; margin:18px 0 10px; font-size:16px; color:var(--ink)}
.panel .sub{color:var(--mut); font-size:14px; margin:0 0 16px; line-height:1.6}
.panel .sub b{color:var(--gold)}
.rwsub{color:var(--mut)!important; font-weight:600}
.rewardlist{display:flex; flex-direction:column; gap:8px; margin:6px 0 4px}
.rewardrow{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:11px; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:13.5px}
.rewardrow .ricon{font-size:20px}
.rewardrow span{flex:0 1 auto}
.rewardrow span:nth-child(2){flex:1 1 auto}
.rewardrow.claimed{opacity:.55}
.minibtn{margin-left:auto; background:linear-gradient(180deg,#ffe7a8,var(--gold)); color:#1a1208; border:none; border-radius:8px; padding:5px 12px; font-weight:800; cursor:pointer; font-size:12px}
.cardchoices{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:8px 0}
.cardchoices.picked .choice:not(.sel){opacity:.35; pointer-events:none}
.choice{cursor:pointer; transition:transform .12s}
.choice:hover{transform:translateY(-10px)}
.btnRow{display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap}

.restopts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:10px}
.restcard{width:150px; cursor:pointer; color:var(--ink); background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:14px; padding:16px 12px; transition:transform .12s, border-color .15s}
.restcard:hover{transform:translateY(-6px); border-color:var(--gold)}
.restcard .ricon{font-size:32px}
.restcard b{display:block; font-family:'Cinzel',serif; margin:6px 0 3px; font-size:16px; color:var(--gold)}
.restcard span{font-size:12px; color:var(--mut)}

.deckgrid{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; max-height:62vh; overflow-y:auto; padding:8px}

.shopcards{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:6px 0 16px}
.shopitem{cursor:pointer}
.shopitem:hover{transform:translateY(-8px)}
.pricetag{position:absolute; bottom:4px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); color:var(--gold);
  font-weight:800; font-size:11px; padding:2px 8px; border-radius:8px; border:1px solid var(--gold2); z-index:4; white-space:nowrap}
.svcitem .pricetag{position:static; transform:none}
.bought{opacity:.45; pointer-events:none; filter:grayscale(.6)}
.shopservices{display:flex; flex-direction:column; gap:8px; margin:8px 0 16px; text-align:left}
.svcitem{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--line); transition:border-color .15s}
.svcitem:hover{border-color:var(--gold)}
.svcitem .ricon{font-size:24px}
.svcitem b{display:block; font-size:14px}
.svcitem small{color:var(--mut); font-size:11.5px}
.svcitem .pricetag{margin-left:auto}
.subpicker{position:absolute; inset:0; display:grid; place-items:center; background:rgba(8,5,18,.85); z-index:40; padding:16px}

.treasurebox{font-size:70px; cursor:pointer; margin:16px 0; transition:transform .2s; filter:drop-shadow(0 6px 20px rgba(255,206,107,.5))}
.treasurebox:hover{transform:scale(1.1) rotate(-4deg)}
.treasurebox.open{cursor:default; animation:pop .4s}
@keyframes pop{40%{transform:scale(1.3)}}

.eventopts{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.eventopt{font-family:'Noto Sans KR'; cursor:pointer; text-align:left; color:var(--ink);
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px; padding:13px 16px; font-size:14px; transition:border-color .15s, transform .1s}
.eventopt:hover{border-color:var(--gold); transform:translateX(4px)}

.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0}
.stat{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px; padding:12px 6px}
.stat b{display:block; font-family:'Cinzel',serif; font-size:24px; color:var(--gold)}
.stat span{font-size:11px; color:var(--mut)}
.overtitle{font-size:30px!important}

/* ===== TOAST ===== */
#toast{position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px);
  background:rgba(10,6,20,.95); border:1px solid var(--gold2); color:var(--gold); padding:10px 20px;
  border-radius:12px; font-weight:700; font-size:14px; z-index:200; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ===== MODAL ===== */
.modal{position:fixed; inset:0; background:rgba(6,3,14,.88); z-index:300; display:flex; align-items:center; justify-content:center; padding:18px}
.modalpanel{width:min(900px,96vw); max-height:88vh; background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--gold2); border-radius:16px; padding:18px; display:flex; flex-direction:column}
.modalhead{display:flex; align-items:center; margin-bottom:12px}
.modalhead h3{font-family:'Cinzel',serif; color:var(--gold); margin:0; font-size:20px}
.modalhead span{color:var(--mut); font-size:13px; font-weight:400; margin-left:8px}
.modalhead .iconbtn{margin-left:auto}

/* ===== RESPONSIVE ===== */
@media (max-width:680px){
  #hudbar{flex-wrap:wrap; gap:8px; padding:6px 10px}
  .hud-mid{order:3; width:100%; margin:0; justify-content:center}
  .hud-right{margin-left:auto}
  .relicBar{max-width:140px}
  .menu-card h1{font-size:34px}
  .card{width:96px; height:142px}
  .cart{height:48px; margin-top:16px}
  .artglyph{font-size:26px}
  .cname{font-size:11px}
  .ctext{font-size:9px}
  #handZone{min-height:160px; overflow-x:auto; justify-content:flex-start}
  #handZone .card{margin:0 -6px}
  #handZone .card:hover{transform:translateY(-10px) scale(1.03)}
  .energyBadge,.blockBadge{font-size:15px; padding:6px 9px}
  .endbtn{padding:8px 10px; font-size:13px}
  .statgrid{grid-template-columns:repeat(3,1fr)}
  .charpick{width:88vw; max-width:300px}
}
@media (max-width:680px) and (orientation:landscape){
  #handZone{min-height:120px}
  .card{width:84px; height:124px}
}