:root {
  --bg1: #1b1240; --bg2: #08061a;
  --panel: rgba(28, 20, 62, .78); --panel2: rgba(46, 33, 96, .6); --line: rgba(255, 255, 255, .09);
  --text: #f3eefe; --dim: #a59cc7;
  --gold: #ffc857; --chips: #2f9bff; --mult: #ff3d5e; --xmult: #b65cff; --money: #ffd166; --green: #35d39a;
  --r1: #8ea4c8; --r2: #3fd0c9; --r3: #ff7ad9;
  --font-d: 'Black Han Sans', 'Noto Sans KR', sans-serif;
  --font: 'Noto Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 0%, #2c1c63 0%, var(--bg1) 38%, var(--bg2) 100%) fixed;
  color: var(--text); font-family: var(--font); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; color: inherit; }

/* 별 하늘 */
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; inset: -50%; background-repeat: repeat; animation: drift 120s linear infinite; opacity: .55; }
.sky i:nth-child(1) { background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 130px 80px, #cfc6ff, transparent), radial-gradient(1.4px 1.4px at 90px 150px, #fff, transparent); background-size: 190px 190px; }
.sky i:nth-child(2) { background-image: radial-gradient(1.6px 1.6px at 60px 120px, #ffe9a8, transparent), radial-gradient(1px 1px at 170px 30px, #fff, transparent); background-size: 260px 260px; animation-duration: 200s; opacity: .4; }
.sky i:nth-child(3) { background: radial-gradient(40% 30% at 80% 20%, rgba(182, 92, 255, .14), transparent), radial-gradient(40% 35% at 10% 80%, rgba(47, 155, 255, .12), transparent); inset: 0; animation: none; opacity: 1; }
@keyframes drift { to { transform: translate(190px, 95px); } }

.app { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; max-width: 1400px; margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; height: 52px; flex: none; }
.back-btn { color: var(--dim); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,.2); white-space: nowrap; }
.back-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.logo { font-family: var(--font-d); font-size: 22px; letter-spacing: .04em; background: linear-gradient(180deg, #fff3c4, var(--gold) 60%, #d68a1e); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: auto; }
.logo span { margin-left: .3em; background: linear-gradient(180deg, #e2d4ff, #a77bff); -webkit-background-clip: text; background-clip: text; }
.top-actions { display: flex; gap: 6px; }
.ibtn { white-space: nowrap; min-width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 14px; font-weight: 700; cursor: pointer; padding: 0 10px; }
.ibtn:hover { border-color: rgba(255,255,255,.3); }

.game { flex: 1; min-height: 0; display: grid; grid-template-columns: 288px 1fr; gap: 12px; padding: 0 12px 12px; }

/* ---------------------------------------------------------------- 사이드 */
.side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.blind-box { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(47,155,255,.28), rgba(28,20,62,.85)); border: 1px solid rgba(47,155,255,.45); }
.blind-box.b1 { background: linear-gradient(135deg, rgba(182,92,255,.32), rgba(28,20,62,.85)); border-color: rgba(182,92,255,.5); }
.blind-box.b2 { background: linear-gradient(135deg, rgba(255,61,94,.34), rgba(28,20,62,.85)); border-color: rgba(255,61,94,.55); }
.bl-icon { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.bl-text b { display: block; font-family: var(--font-d); font-size: 19px; font-weight: 400; }
.bl-text small { color: #e4dcff; font-size: 12px; line-height: 1.35; display: block; }
.bl-target { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; background: rgba(0,0,0,.32); border-radius: 10px; padding: 6px 10px; }
.bl-target small { color: var(--dim); font-size: 12px; }
.bl-target strong { font-family: var(--font-d); font-size: 24px; font-weight: 400; color: var(--mult); text-shadow: 0 0 12px rgba(255,61,94,.4); }

.score-box { --p: 0; position: relative; padding: 10px 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; overflow: hidden; }
.score-box::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--gold), #ff8a3d); transition: width .2s; box-shadow: 0 0 10px var(--gold); }
.score-box small { color: var(--dim); font-size: 13px; }
.score-box strong { font-family: var(--font-d); font-weight: 400; font-size: 30px; }

.hand-box { padding: 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); position: relative; overflow: hidden; }
.hand-name { text-align: center; font-weight: 900; font-size: 18px; min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; z-index: 1; }
.hand-name em { font-style: normal; font-size: 13px; color: var(--gold); background: rgba(255,200,87,.12); border-radius: 6px; padding: 1px 6px; }
.hand-name .dim, .dim { color: var(--dim); font-weight: 500; font-size: 14px; }
.hand-name .bad { color: #ff8c9e; font-size: 14px; }
.hand-name .tot { font-family: var(--font-d); font-weight: 400; font-size: 30px; color: #fff; text-shadow: 0 0 16px rgba(255,200,87,.9); }
.cm { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 8px; position: relative; z-index: 1; }
.cm .chips, .cm .mult { font-family: var(--font-d); font-size: 30px; padding: 6px 10px; border-radius: 10px; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm .chips { background: linear-gradient(180deg, #4fb0ff, #1f6fd6); text-align: right; box-shadow: 0 4px 0 #134a92, 0 0 18px rgba(47,155,255,.3); }
.cm .mult { background: linear-gradient(180deg, #ff6680, #d61f45); text-align: left; box-shadow: 0 4px 0 #8f1630, 0 0 18px rgba(255,61,94,.3); }
.cm .x { font-family: var(--font-d); font-size: 26px; color: var(--mult); }
.hand-box.fire { border-color: #ffb347; box-shadow: 0 0 0 1px #ffb347, 0 0 34px rgba(255,120,40,.55); }
.hand-box.fire::before { content: ''; position: absolute; inset: 0; transform-origin: 50% 100%; background: radial-gradient(30% 120% at 15% 100%, rgba(255,214,90,.95), transparent 70%), radial-gradient(40% 150% at 50% 100%, rgba(255,128,40,.95), transparent 72%), radial-gradient(30% 120% at 85% 100%, rgba(255,214,90,.95), transparent 70%), linear-gradient(0deg, rgba(255,61,94,.75), rgba(255,61,94,.15)); animation: flame .3s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scaleY(.85) scaleX(1.02); filter: hue-rotate(0deg); } to { transform: scaleY(1.05) scaleX(.98); filter: hue-rotate(-18deg) brightness(1.15); } }
.hand-box.lvup { animation: lvup .8s ease; }
@keyframes lvup { 0% { box-shadow: 0 0 0 0 rgba(255,200,87,.9); } 100% { box-shadow: 0 0 0 18px rgba(255,200,87,0); } }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.stat small { color: var(--dim); font-size: 12px; }
.stat b { font-family: var(--font-d); font-weight: 400; font-size: 24px; }
.stat.hands b { color: #6cc0ff; }
.stat.discards b { color: #ff7d93; }
.stat.money b { color: var(--money); }

.side-hands { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; border-radius: 14px; background: rgba(10,7,26,.45); border: 1px solid var(--line); scrollbar-width: thin; }
.sh-title { font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.sh-row { display: grid; grid-template-columns: 22px 1fr 40px 32px; gap: 4px; align-items: center; font-size: 12.5px; padding: 3px 4px; border-radius: 7px; color: #cfc6ee; }
.sh-row .lv { font-family: var(--font-d); color: var(--dim); text-align: center; }
.sh-row.up .lv { color: var(--gold); }
.sh-row .cbox, .sh-row .mbox { font-size: 12px; min-width: 0; margin: 0; padding: 0 4px; text-align: center; }
.sh-row.on { background: rgba(255,200,87,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,200,87,.5); }
.bump { animation: bump .28s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.bigbump { animation: bigbump .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes bigbump { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-4deg); filter: brightness(1.6); } 100% { transform: scale(1); } }
.slam { animation: slam .45s cubic-bezier(.3,1.7,.5,1); }
@keyframes slam { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.shake-s { animation: shakes .25s; }
@keyframes shakes { 25% { transform: translate(2px, -2px); } 50% { transform: translate(-3px, 1px); } 75% { transform: translate(1px, 2px); } }

/* ---------------------------------------------------------------- 메인 */
.main { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.bar { display: flex; gap: 10px; flex: none; }
.relics, .cons { padding: 8px 10px 10px; border-radius: 16px; background: rgba(10,7,26,.45); border: 1px solid var(--line); }
.relics { flex: 1; min-width: 0; }
.bar-label { font-size: 11px; color: var(--dim); margin-bottom: 6px; letter-spacing: .04em; }
.slots { display: flex; gap: 8px; }
.relic, .con, .slot-empty { width: 62px; height: 62px; border-radius: 14px; flex: none; }
.slot-empty { border: 2px dashed rgba(255,255,255,.1); }
.relic, .con { position: relative; border: 2px solid var(--r1); background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), rgba(30,22,70,.95) 70%); cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .15s; }
.relic:hover, .con:hover { transform: translateY(-3px); }
.relic.r2 { border-color: var(--r2); box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 12px rgba(63,208,201,.3); }
.relic.r3 { border-color: var(--r3); box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 14px rgba(255,122,217,.4); }
.relic .ri, .con .ri { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.con { border-radius: 10px; width: 50px; border-color: #7aa7ff; background: radial-gradient(circle at 50% 30%, rgba(122,167,255,.35), rgba(20,18,60,.95) 70%); }
.con.k-rune { border-color: #ffb347; background: radial-gradient(circle at 50% 30%, rgba(255,179,71,.35), rgba(40,20,40,.95) 70%); }
.cons .slot-empty { width: 50px; border-radius: 10px; }
.trigger { animation: trig .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes trig { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-8deg); box-shadow: 0 0 24px var(--gold); } 60% { transform: scale(.95) rotate(5deg); } 100% { transform: scale(1); } }

.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 20px; background: radial-gradient(90% 80% at 50% 40%, rgba(64,44,140,.35), rgba(10,7,26,.55)); border: 1px solid var(--line); position: relative; overflow: hidden; }
.table { flex: 1; position: relative; min-height: 0; overflow: hidden; }
.play-area { position: absolute; left: 6%; right: 6%; border-radius: 16px; border: 2px dashed rgba(255,255,255,.07); }
.controls { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 10px 12px 12px; align-items: center; }
.sorter { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,.25); border-radius: 12px; padding: 4px; }
.sorter small { color: var(--dim); font-size: 11px; padding: 0 4px; }

/* 버튼 */
.btn { border: 0; border-radius: 12px; padding: 12px 18px; font-size: 16px; font-weight: 900; cursor: pointer; background: linear-gradient(180deg, #4b3b8f, #33266b); box-shadow: 0 4px 0 #1d1544; transition: transform .08s, filter .15s, box-shadow .08s; color: #fff; }
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1d1544; }
.btn:disabled { opacity: .4; cursor: default; }
.btn small { font-family: var(--font-d); font-weight: 400; background: rgba(0,0,0,.25); border-radius: 6px; padding: 0 6px; margin-left: 4px; }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 9px; box-shadow: 0 3px 0 #1d1544; }
.btn.on { background: linear-gradient(180deg, #ffd77a, #e9a530); color: #2a1a00; box-shadow: 0 3px 0 #94600f; }
.btn.primary { background: linear-gradient(180deg, #ffd77a, #f0a527); color: #2a1600; box-shadow: 0 4px 0 #9a6410; }
.btn.play { background: linear-gradient(180deg, #4fb0ff, #1f6fd6); box-shadow: 0 4px 0 #134a92; }
.btn.discard { background: linear-gradient(180deg, #ff6680, #d61f45); box-shadow: 0 4px 0 #8f1630; }
.btn.danger { background: linear-gradient(180deg, #ff6680, #c21c3f); box-shadow: 0 4px 0 #7e1129; }
.btn.ghost { background: rgba(255,255,255,.08); box-shadow: none; }
.btn.big { font-size: 20px; padding: 16px 30px; }
.btn.sell { background: linear-gradient(180deg, #3ee0a6, #179a6c); box-shadow: 0 3px 0 #0d5c40; }
.btn.use { background: linear-gradient(180deg, #8ab4ff, #4a6fe0); box-shadow: 0 3px 0 #29408f; }

/* ---------------------------------------------------------------- 카드 */
.card { position: absolute; left: 0; top: 0; width: var(--cw, 80px); height: var(--ch, 112px); transition: transform .3s cubic-bezier(.2,.8,.25,1), opacity .5s; cursor: pointer; touch-action: none; will-change: transform; font-size: var(--cw, 80px); }
.card .inner { position: absolute; inset: 0; border-radius: .1em; background: linear-gradient(160deg, #fffdf7, #f1e7d2); box-shadow: 0 .07em .16em rgba(0,0,0,.45), inset 0 0 0 1px rgba(60,40,10,.18), inset 0 0 0 .045em #fff, inset 0 0 0 .055em rgba(120,90,40,.25); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.card.s0 { color: #1f2647; } .card.s1 { color: #d6243c; } .card.s2 { color: #157a50; } .card.s3 { color: #e0671a; }
.corner { position: absolute; top: .05em; left: .07em; display: flex; flex-direction: column; align-items: center; line-height: .95; z-index: 2; }
.corner b { font-family: var(--font-d); font-weight: 400; font-size: .24em; letter-spacing: -.04em; }
.corner span { font-size: .17em; }
.corner.br { top: auto; left: auto; bottom: .05em; right: .07em; transform: rotate(180deg); }
.pips { position: absolute; left: 25%; right: 25%; top: 15%; bottom: 15%; }
.pips i { position: absolute; transform: translate(-50%, -50%); font-style: normal; font-size: .175em; line-height: 1; }
.pips i.flip { transform: translate(-50%, -50%) rotate(180deg); }
.bsuit { display: none; position: absolute; inset: 0; place-items: center; font-size: .55em; padding-top: .1em; }
.table.mini .pips { display: none; }
.table.mini .bsuit { display: grid; }
.ace { position: absolute; inset: 0; display: grid; place-items: center; font-size: .62em; text-shadow: 0 .02em 0 rgba(0,0,0,.12); }
.royal { position: absolute; left: 19%; right: 19%; top: 14%; bottom: 14%; border-radius: .05em; border: .018em solid currentColor; display: grid; place-items: center; overflow: hidden; background: repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 .03em, transparent .03em .06em), linear-gradient(180deg, rgba(255,200,87,.35), rgba(255,255,255,0) 60%); }
.royal .glyph { font-size: .5em; line-height: 1; filter: drop-shadow(0 .02em 0 rgba(0,0,0,.2)); }
.royal .rl { position: absolute; top: .02em; left: .04em; font-family: var(--font-d); font-size: .16em; }
.royal .rs { position: absolute; bottom: .02em; right: .04em; font-size: .14em; }
.table.mini .royal { left: 14%; right: 14%; top: 22%; bottom: 10%; }
.table.mini .royal .rl, .table.mini .royal .rs { display: none; }
.table.mini .corner b { font-size: .3em; }
.table.mini .corner span { font-size: .22em; }
.table.mini .corner.br { display: none; }
.table.mini .ace, .table.mini .bsuit { padding-top: .2em; }
@media (hover: hover) { .card:hover .inner { transform: translateY(-.06em); box-shadow: 0 .12em .22em rgba(0,0,0,.5), inset 0 0 0 1px rgba(60,40,10,.18), inset 0 0 0 .045em #fff; } }
.card.sel .inner { box-shadow: 0 0 0 .035em var(--gold), 0 0 .2em rgba(255,200,87,.7), 0 .1em .2em rgba(0,0,0,.5); }
.card.sel.will-score .inner::before { content: ''; position: absolute; left: 30%; right: 30%; top: -.02em; height: .04em; border-radius: 0 0 .04em .04em; background: var(--gold); }
.card.dragging { transition: none; cursor: grabbing; z-index: 999 !important; }
.card.dragging .inner { transform: scale(1.08) rotate(-3deg); box-shadow: 0 .25em .4em rgba(0,0,0,.5); }
.card.debuffed .inner { filter: grayscale(.85) brightness(.75); }
.card.debuffed .inner::after { content: '봉인'; position: absolute; inset: auto 0 38% 0; text-align: center; font-size: .14em; font-weight: 900; color: #fff; background: rgba(150,20,40,.85); padding: .15em 0; transform: rotate(-12deg); }
.card.gone { opacity: 0; pointer-events: none; }
.card.wobble .inner, .fan-card .wobble .inner { animation: wob .4s ease; }
@keyframes wob { 0% { transform: scale(1); } 25% { transform: scale(1.16) rotate(-6deg); } 55% { transform: scale(1.05) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
.card.used { opacity: .28; }

.deckpile { position: absolute; right: 12px; top: 10px; width: 54px; height: 76px; cursor: pointer; z-index: 1; display: none; }
.pile-back, .card-back { position: absolute; inset: 0; border-radius: 7px; background: radial-gradient(circle at 50% 50%, #ffc857 0 9%, transparent 10%), repeating-linear-gradient(45deg, #3a2a86 0 6px, #2a1d66 6px 12px); border: 3px solid #f4ecd8; box-shadow: 3px 3px 0 #2a1d66, 6px 6px 0 rgba(0,0,0,.3); }
.deckpile span { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.65); padding: 1px 5px; border-radius: 5px; white-space: nowrap; }

.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; text-align: center; transition: .35s cubic-bezier(.3,1.6,.5,1); z-index: 900; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner b { display: block; font-family: var(--font-d); font-weight: 400; font-size: 52px; color: var(--gold); text-shadow: 0 4px 0 #7a4b00, 0 0 30px rgba(255,200,87,.7); white-space: nowrap; }
.banner small { font-size: 16px; color: #fff; }

/* 팝업 숫자 */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -100%); font-family: var(--font-d); font-size: 22px; padding: 2px 10px; border-radius: 9px; color: #fff; background: #555; white-space: nowrap; animation: popup 1.1s cubic-bezier(.2,1.4,.4,1) forwards; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.pop.chips { background: var(--chips); }
.pop.mult { background: var(--mult); }
.pop.xmult { background: linear-gradient(135deg, #c77dff, #7b2cbf); font-size: 28px; }
.pop.money { background: var(--money); color: #3a2400; }
.pop.info { background: #5a4aa0; font-size: 17px; }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.3); } 18% { opacity: 1; transform: translate(-50%, -130%) scale(1.15); } 30% { transform: translate(-50%, -125%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%) scale(.95); } }
.confetti { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: conf 2s ease-in forwards; }
@keyframes conf { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: .8; } }

.toast { position: fixed; left: 50%; top: 64px; transform: translate(-50%, -16px); background: rgb(24,17,56); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 10px 18px; border-radius: 12px; font-weight: 700; font-size: 14px; opacity: 0; transition: .2s; pointer-events: none; z-index: 3000; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: rgba(255,61,94,.6); color: #ffc0cb; }

/* 툴팁 */
.tip { position: fixed; z-index: 2500; width: 250px; background: rgba(18,12,44,.97); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.tip.show { opacity: 1; pointer-events: auto; transform: none; }
.tip-h { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.tip-i { font-size: 30px; }
.tip-h b { display: block; font-size: 16px; }
.tip p { margin: 0; color: #e8e2fb; }
.rar { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.1); color: var(--r1); }
.rar.r2 { color: var(--r2); } .rar.r3 { color: var(--r3); } .rar.planet { color: #8ab4ff; } .rar.rune { color: #ffb347; }
.tip-sell { color: var(--dim); display: block; margin-top: 6px; }
.tip-actions { display: flex; gap: 6px; margin-top: 10px; }
.tip-actions .btn { flex: 1; }
.t-chips { color: #5fb6ff; } .t-mult { color: #ff6b85; } .t-x { color: #d39bff; } .t-money { color: var(--money); } .t-hl { color: var(--gold); } .t-cur { color: var(--dim); font-size: .9em; }

/* ---------------------------------------------------------------- 관문 선택 */
.blinds-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 16px; overflow: auto; }
.floor-title { text-align: center; }
.floor-title small { display: block; color: var(--gold); font-weight: 900; letter-spacing: .1em; }
.floor-title b { font-family: var(--font-d); font-weight: 400; font-size: 32px; }
.blinds { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 14px; width: 100%; justify-content: center; }
.blind-card { border-radius: 18px; padding: 16px 12px; text-align: center; background: var(--panel); border: 2px solid rgba(47,155,255,.4); display: flex; flex-direction: column; gap: 8px; align-items: center; transition: transform .2s; }
.blind-card.b1 { border-color: rgba(182,92,255,.45); }
.blind-card.b2 { border-color: rgba(255,61,94,.55); background: linear-gradient(180deg, rgba(120,20,50,.45), var(--panel)); }
.blind-card.cur { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--gold), 0 14px 30px rgba(0,0,0,.4); }
.blind-card.done { opacity: .5; }
.blind-card.next { opacity: .78; }
.bc-icon { font-size: 40px; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 3px rgba(255,255,255,.12); }
.bc-name { font-family: var(--font-d); font-size: 20px; }
.bc-desc { font-size: 13px; color: #ddd4ff; min-height: 38px; line-height: 1.4; }
.bc-target { background: rgba(0,0,0,.3); border-radius: 10px; padding: 6px; width: 100%; }
.bc-target small { display: block; font-size: 11px; color: var(--dim); }
.bc-target b { font-family: var(--font-d); font-weight: 400; font-size: 24px; color: var(--mult); }
.bc-reward { font-size: 13px; color: var(--dim); }
.bc-reward b { color: var(--money); }
.bc-state { font-size: 13px; font-weight: 700; color: var(--dim); padding: 10px; }

/* 정산 */
.cash { margin: auto; width: min(420px, 92%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.cash-title { text-align: center; }
.cash-title small { display: block; color: var(--dim); }
.cash-title b { font-family: var(--font-d); font-weight: 400; font-size: 46px; color: var(--money); text-shadow: 0 0 20px rgba(255,209,102,.4); }
.cash-lines { display: flex; flex-direction: column; gap: 6px; min-height: 100px; }
.cash-line { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.25); animation: slidein .3s ease; }
.cash-line b { color: var(--money); font-family: var(--font-d); font-weight: 400; font-size: 18px; }
@keyframes slidein { from { opacity: 0; transform: translateX(-16px); } }

/* 상점 */
.shop { flex: 1; display: flex; flex-direction: column; padding: 14px; gap: 12px; overflow: auto; }
.shop-head { display: flex; justify-content: space-between; align-items: baseline; }
.shop-head b { font-family: var(--font-d); font-weight: 400; font-size: 26px; color: var(--gold); }
.shop-head small { color: var(--dim); }
.shop-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.item { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.item.fresh { animation: fresh .35s ease both; }
@keyframes fresh { from { opacity: 0; transform: translateY(12px) scale(.95); } }
.item.sold { opacity: .45; }
.it-icon { font-size: 40px; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 16px; border: 2px solid var(--r1); background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), rgba(30,22,70,.95) 70%); }
.it-icon.r2 { border-color: var(--r2); } .it-icon.r3 { border-color: var(--r3); } .it-icon.planet { border-color: #8ab4ff; border-radius: 50%; } .it-icon.rune { border-color: #ffb347; border-radius: 10px; }
.it-name { font-weight: 900; font-size: 16px; }
.it-tag { font-size: 11px; font-weight: 700; color: var(--r1); }
.it-tag.r2 { color: var(--r2); } .it-tag.r3 { color: var(--r3); } .it-tag.planet { color: #8ab4ff; } .it-tag.rune { color: #ffb347; } .it-tag.pack { color: var(--gold); }
.it-desc { font-size: 13px; line-height: 1.45; color: #e2dbfa; flex: 1; }
.it-acts { display: flex; gap: 6px; width: 100%; }
.it-acts .btn { flex: 1; padding: 9px 6px; font-size: 14px; }
.btn.buy { background: linear-gradient(180deg, #3ee0a6, #179a6c); box-shadow: 0 4px 0 #0d5c40; }
.btn.buy b { font-family: var(--font-d); font-weight: 400; }
.it-sold { font-size: 13px; color: var(--dim); padding: 9px; }
.shop-foot { display: flex; gap: 10px; justify-content: space-between; margin-top: auto; }
.shop-foot .btn { flex: 1; }
.btn.reroll { background: linear-gradient(180deg, #8f6bff, #5b3fd1); box-shadow: 0 4px 0 #36248a; }
.btn.reroll b { font-family: var(--font-d); font-weight: 400; color: var(--money); }

/* ---------------------------------------------------------------- 오버레이 */
.overlay { position: fixed; inset: 0; background: rgba(6,4,18,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1500; display: grid; place-items: center; padding: 16px; overflow: auto; }
.overlay[hidden] { display: none; }
.panel { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: linear-gradient(180deg, rgba(48,34,104,.97), rgba(22,15,52,.98)); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: panelin .3s cubic-bezier(.3,1.4,.5,1); }
@keyframes panelin { from { opacity: 0; transform: scale(.92) translateY(10px); } }
.panel h2 { margin: 0 0 14px; font-family: var(--font-d); font-weight: 400; font-size: 28px; text-align: center; }
.panel h2 small { font-family: var(--font); font-size: 14px; color: var(--dim); }
.row { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.panel.title { background: transparent; border: 0; box-shadow: none; text-align: center; width: min(560px, 100%); }
.title-fan { position: relative; height: 170px; margin-bottom: 4px; --cw: 92px; }
.fan-card { position: absolute; left: 50%; top: 20px; width: 92px; height: 129px; transform-origin: 50% 140%; transform: translateX(-50%) rotate(calc(var(--i) * 11deg)); animation: fanin .8s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc((var(--i) + 2) * 70ms); }
.fan-card .card { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 92px; }
@keyframes fanin { from { transform: translateX(-50%) rotate(0deg) translateY(40px); opacity: 0; } }
.title-logo { font-family: var(--font-d); font-weight: 400; font-size: clamp(48px, 13vw, 76px); margin: 0; line-height: 1; background: linear-gradient(180deg, #fff6d0, var(--gold) 55%, #d4801a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 #5a2f00); }
.title-logo span { background: linear-gradient(180deg, #efe4ff, #a77bff 60%, #6a3fd8); -webkit-background-clip: text; background-clip: text; }
.title-sub { color: #ddd4ff; margin: 12px 0 22px; }
.title-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.title-btns .btn { width: min(300px, 100%); }
.title-best { display: flex; justify-content: center; gap: 18px; margin-top: 22px; color: var(--dim); font-size: 13px; flex-wrap: wrap; }
.title-best b { color: var(--gold); font-family: var(--font-d); font-weight: 400; font-size: 18px; margin-left: 4px; }

.how p { margin: 0 0 10px; line-height: 1.6; color: #e8e2fb; }
.how .keys { color: var(--dim); font-size: 13px; }
.settings { display: flex; flex-direction: column; gap: 10px; }
.set-row { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,.2); padding: 10px 12px; border-radius: 12px; }
.seg { display: flex; gap: 4px; }
code { color: var(--dim); }
.hands-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hands-table th { color: var(--dim); font-weight: 500; font-size: 12px; text-align: left; padding: 4px 6px; }
.hands-table td { padding: 7px 6px; border-top: 1px solid var(--line); }
.hands-table .lv { color: var(--gold); font-weight: 900; }
.hands-table .hn { font-weight: 700; }
.hands-table .pc { color: var(--dim); text-align: right; }
.cbox, .mbox { display: inline-block; min-width: 34px; text-align: center; border-radius: 6px; padding: 1px 6px; font-family: var(--font-d); margin: 0 3px; }
.cbox { background: var(--chips); } .mbox { background: var(--mult); }
.note { color: var(--dim); font-size: 12px; text-align: center; margin: 10px 0 0; }
.panel.deck-panel { width: min(900px, 100%); }
.deck-grid { display: flex; flex-direction: column; gap: 8px; --cw: 44px; }
.deck-row { display: flex; gap: 8px; align-items: center; }
.dr-suit { width: 34px; text-align: center; font-size: 22px; flex: none; }
.dr-suit small { display: block; font-size: 11px; color: var(--dim); }
.dr-suit.s0 { color: #c7cdf5; } .dr-suit.s1 { color: #ff5d73; } .dr-suit.s2 { color: #3ddc97; } .dr-suit.s3 { color: #ff9a4d; }
.dr-cards { display: flex; flex-wrap: wrap; gap: 3px; }
.dr-cards .card { position: relative; width: 44px; height: 62px; font-size: 44px; cursor: default; }
.dr-cards .card .pips { display: none; }
.dr-cards .card .bsuit { display: grid; padding-top: .2em; }
.dr-cards .card .corner.br { display: none; }
.dr-cards .card .corner b { font-size: .3em; } .dr-cards .card .corner span { font-size: .22em; }
.dr-cards .card .royal { left: 14%; right: 14%; top: 22%; bottom: 10%; }
.dr-cards .card .royal .rl, .dr-cards .card .royal .rs { display: none; }

.res-head { text-align: center; margin-bottom: 14px; }
.res-head small { color: var(--mult); font-weight: 900; letter-spacing: .08em; }
.res-head.win small { color: var(--gold); }
.res-head h2 { margin: 6px 0; }
.res-head p { margin: 0; color: var(--dim); }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-grid div { background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px; }
.res-grid small { display: block; color: var(--dim); font-size: 12px; }
.res-grid b { font-family: var(--font-d); font-weight: 400; font-size: 22px; }
.res-grid em { font-style: normal; color: var(--dim); font-size: 12px; margin-left: 6px; }
.res-relics { margin-top: 10px; background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px; }
.res-relics small { color: var(--dim); font-size: 12px; }
.rs-relic { font-size: 26px; margin-right: 6px; }

/* ---------------------------------------------------------------- 모바일 */
@media (max-width: 820px) {
  .side-hands { display: none; }
  .topbar { height: 44px; padding: 6px 8px; gap: 6px; }
  .back-btn { font-size: 12px; padding: 5px 8px; }
  .logo { font-size: 15px; }
  .logo span { margin-left: .15em; }
  .ibtn { min-width: 34px; height: 32px; font-size: 12px; padding: 0 7px; }
  .game { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 6px; padding: 0 6px 6px; }
  .side { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 6px; }
  .blind-box { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; padding: 6px 8px; border-radius: 12px; gap: 8px; }
  .bl-icon { width: 34px; height: 34px; font-size: 20px; }
  .bl-text b { font-size: 15px; }
  .bl-text small { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bl-target { grid-column: auto; flex-direction: column; align-items: flex-end; padding: 4px 8px; }
  .bl-target small { font-size: 10px; }
  .bl-target strong { font-size: 18px; }
  .score-box { flex-direction: column; justify-content: center; padding: 6px 10px 9px; border-radius: 12px; }
  .score-box small { font-size: 11px; }
  .score-box strong { font-size: 22px; }
  .hand-box { padding: 6px 8px; border-radius: 12px; }
  .hand-name { font-size: 13px; min-height: 18px; }
  .hand-name em { font-size: 11px; }
  .hand-name .tot { font-size: 20px; }
  .cm { margin-top: 4px; gap: 4px; }
  .cm .chips, .cm .mult { font-size: 18px; padding: 3px 7px; border-radius: 8px; }
  .cm .x { font-size: 16px; }
  .stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat { padding: 4px 8px; border-radius: 10px; }
  .stat small { font-size: 10px; }
  .stat b { font-size: 17px; }
  .main { gap: 6px; }
  .bar { gap: 6px; }
  .relics, .cons { padding: 4px 6px 6px; border-radius: 12px; }
  .bar-label { font-size: 10px; margin-bottom: 3px; }
  .slots { gap: 4px; }
  .relic, .slot-empty { width: calc((100vw - 150px) / 5); max-width: 52px; height: 46px; border-radius: 10px; }
  .con, .cons .slot-empty { width: 38px; height: 46px; border-radius: 8px; }
  .relic .ri, .con .ri { font-size: 24px; }
  .stage { border-radius: 14px; }
  .controls { padding: 6px 8px 8px; gap: 6px; }
  .controls .btn { padding: 11px 8px; font-size: 15px; }
  .sorter { flex-direction: column; gap: 3px; padding: 3px; }
  .sorter small { display: none; }
  .sorter .btn { padding: 4px 8px; font-size: 12px; }
  .banner b { font-size: 36px; }
  .blinds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .blind-card { padding: 10px 6px; gap: 5px; border-radius: 14px; }
  .blind-card.cur { transform: translateY(-4px); }
  .bc-icon { width: 46px; height: 46px; font-size: 26px; }
  .bc-name { font-size: 15px; }
  .bc-desc { font-size: 11px; min-height: 30px; }
  .bc-target b { font-size: 17px; }
  .blind-card .btn { padding: 10px 8px; font-size: 14px; width: 100%; }
  .floor-title b { font-size: 24px; }
  .shop { padding: 8px; gap: 8px; }
  .shop-items { gap: 6px; }
  .item { padding: 8px 5px; border-radius: 12px; gap: 4px; }
  .it-icon { width: 52px; height: 52px; font-size: 28px; border-radius: 12px; }
  .it-name { font-size: 13px; }
  .it-desc { font-size: 11px; }
  .it-acts { flex-direction: column; gap: 4px; }
  .it-acts .btn { font-size: 13px; padding: 8px 4px; }
  .pop { font-size: 17px; }
  .pop.xmult { font-size: 21px; }
  .panel { padding: 16px; }
  .deck-grid { --cw: 34px; }
  .dr-cards .card { width: 34px; height: 48px; font-size: 34px; }
  .dr-suit { width: 24px; font-size: 18px; }
  .tip { width: 230px; font-size: 13px; }
}
@media (min-width: 821px) { .deckpile { display: block; } }
@media (max-height: 640px) and (min-width: 821px) {
  .side { gap: 6px; }
  .blind-box, .hand-box { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky i { animation: none; }
}

/* ---------------------------------------------------------------- 카드 강화·뒷면 (M2) */
.enh-tag { position: absolute; left: 50%; bottom: .04em; transform: translateX(-50%); font-family: var(--font-d); font-size: .13em; padding: .05em .4em; border-radius: .5em; color: #fff; z-index: 3; white-space: nowrap; box-shadow: 0 .02em .04em rgba(0,0,0,.3); }
.extra-tag { position: absolute; right: .05em; top: 40%; font-family: var(--font-d); font-size: .11em; color: #fff; background: var(--chips); border-radius: .3em; padding: 0 .25em; z-index: 3; }
.enh-bonus .inner { background: linear-gradient(160deg, #eef6ff, #cfe3ff); box-shadow: 0 .07em .16em rgba(0,0,0,.45), inset 0 0 0 .04em #4fa8ff; }
.enh-bonus .enh-tag { background: var(--chips); }
.enh-mult .inner { background: linear-gradient(160deg, #fff0f2, #ffd0d8); box-shadow: 0 .07em .16em rgba(0,0,0,.45), inset 0 0 0 .04em #ff5d78; }
.enh-mult .enh-tag { background: var(--mult); }
.enh-wild .inner { background: linear-gradient(160deg, #fffdf7, #f1e7d2); box-shadow: 0 .07em .16em rgba(0,0,0,.45); }
.enh-wild .inner::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: .04em; background: conic-gradient(#ff5d73, #ffd166, #7ae582, #4cc9f0, #b388ff, #ff5d73); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 2; }
.enh-wild .enh-tag { background: linear-gradient(90deg, #ff5d73, #b388ff); }
.enh-glass .inner { background: linear-gradient(135deg, rgba(235,248,255,.92), rgba(190,225,255,.75) 50%, rgba(240,250,255,.9)); box-shadow: 0 .07em .16em rgba(0,0,0,.35), inset 0 0 0 .03em rgba(255,255,255,.9), inset 0 0 .1em rgba(120,180,255,.6); }
.enh-glass .inner::after { content: ''; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: rotate(20deg); }
.enh-glass .enh-tag { background: #7b8cff; }
.enh-steel .inner { background: linear-gradient(160deg, #f3f5f8, #b8c0cc 45%, #e6eaf0 55%, #9aa4b3); box-shadow: 0 .07em .16em rgba(0,0,0,.45), inset 0 0 0 .04em #7c8797; }
.enh-steel .enh-tag { background: #59626f; }
.enh-gold .inner { background: linear-gradient(160deg, #fff7d6, #ffd76a 50%, #f5b93b); box-shadow: 0 .07em .16em rgba(0,0,0,.45), inset 0 0 0 .04em #c88a12; }
.enh-gold .enh-tag { background: #b67a00; }
.enh-lucky .inner { background: radial-gradient(circle at 30% 20%, rgba(80,200,120,.25) 0 .06em, transparent .07em) 0 0 / .22em .22em, linear-gradient(160deg, #f4fff4, #d2f5d8); box-shadow: 0 .07em .16em rgba(0,0,0,.45), inset 0 0 0 .04em #2fae5d; }
.enh-lucky .enh-tag { background: #1f9a4a; }
.enh-stone .inner { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18) 0 .05em, transparent .06em) 0 0 / .17em .19em, radial-gradient(circle at 70% 60%, rgba(0,0,0,.12) 0 .04em, transparent .05em) 0 0 / .21em .15em, linear-gradient(160deg, #a9a49b, #6f6b64); box-shadow: 0 .07em .16em rgba(0,0,0,.5), inset 0 0 0 .03em rgba(0,0,0,.3); }
.stone { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; text-shadow: 0 .02em 0 rgba(0,0,0,.4); }
.stone b { font-family: var(--font-d); font-size: .26em; font-weight: 400; }
.stone small { font-size: .13em; opacity: .85; }
.card .back { position: absolute; inset: 0; border-radius: .1em; background: radial-gradient(circle at 50% 50%, #ffc857 0 .08em, transparent .09em), repeating-linear-gradient(45deg, #3a2a86 0 .07em, #2a1d66 .07em .14em); border: .04em solid #f4ecd8; box-shadow: 0 .07em .16em rgba(0,0,0,.45); display: none; }
.card.fd .back { display: block; }
.card.fd .inner { visibility: hidden; }
.card.forced .inner { box-shadow: 0 0 0 .035em #4cc9f0, 0 0 .2em rgba(76,201,240,.8); }
.card.shatter { animation: shatter .6s ease forwards; pointer-events: none; }
@keyframes shatter { 0% { filter: brightness(1); } 30% { filter: brightness(2) blur(0); opacity: 1; } 100% { filter: brightness(3) blur(6px); opacity: 0; } }
.card.used { opacity: .28; }

.relic.off { filter: grayscale(1) brightness(.55); }
.relic.off::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: #ff5d73; font-size: 30px; font-weight: 900; }
.rbadge { position: absolute; right: -6px; bottom: -6px; font-family: var(--font-d); font-size: 11px; background: #1a1240; border: 1px solid rgba(255,255,255,.3); color: var(--gold); padding: 0 4px; border-radius: 6px; }
.btn.move { flex: 0 0 auto; background: rgba(255,255,255,.12); box-shadow: none; padding: 6px 10px; }

.shop-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shop-packs .item { flex-direction: row; text-align: left; align-items: center; gap: 10px; }
.shop-packs .it-icon { flex: none; width: 56px; height: 56px; font-size: 30px; border-color: var(--gold); background: radial-gradient(circle at 50% 35%, rgba(255,200,87,.35), rgba(40,26,70,.95) 70%); }
.pack-info { flex: 1; min-width: 0; }
.shop-packs .it-acts { width: auto; flex-direction: column; }

.pick-desc { text-align: center; color: #e2dbfa; margin: -6px 0 12px; line-height: 1.5; }
.pick-cards, .pack-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pick-cards .card { position: relative; width: 64px; height: 90px; font-size: 64px; transition: transform .15s; }
.pick-cards .card .pips { display: none; } .pick-cards .card .bsuit { display: grid; padding-top: .2em; }
.pick-cards .card .corner.br { display: none; }
.pick-cards .card.sel { transform: translateY(-10px); }
.panel.pick-panel, .panel.pack-panel { width: min(620px, 100%); }
.pack-choice { width: 170px; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; animation: fresh .4s ease both; }
.pack-choice .card.pack-card { position: relative; width: 84px; height: 118px; font-size: 84px; cursor: default; }
.pc-desc { font-size: 13px; color: #e2dbfa; line-height: 1.45; flex: 1; }
.pack-choice .it-acts { width: 100%; }
.enh-sum { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.enh-sum .es { font-size: 12px; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.08); }
.enh-sum .es b { color: var(--gold); }

@media (max-width: 820px) {
  .shop-packs { gap: 6px; }
  .shop-packs .item { padding: 6px; gap: 6px; }
  .shop-packs .it-icon { width: 40px; height: 40px; font-size: 22px; }
  .pack-info .it-name { font-size: 12px; }
  .pack-info .it-desc { display: none; }
  .toast { top: auto; bottom: 92px; transform: translate(-50%, 16px); }
  .shop-packs .it-acts .btn { padding: 7px 6px; font-size: 12px; }
  .pack-choice { width: calc(50% - 6px); padding: 8px; }
  .pick-cards .card { width: 54px; height: 76px; font-size: 54px; }
  .rbadge { font-size: 10px; right: -4px; bottom: -4px; }
}

/* ---------------------------------------------------------------- 타이틀·덱 선택·도감 (M3) */
.title-btns .btn small { font-family: var(--font); font-weight: 700; font-size: 13px; background: rgba(0,0,0,.15); }
.title-sub-btns { display: flex; gap: 8px; width: min(300px, 100%); }
.title-sub-btns .btn { flex: 1; padding: 11px 6px; font-size: 14px; }
.panel.deck-select-panel { width: min(760px, 100%); }
.deck-select { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.deck-tile { border: 2px solid var(--line); background: rgba(0,0,0,.25); border-radius: 16px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; transition: transform .12s, border-color .12s; }
.deck-tile:hover { transform: translateY(-2px); }
.deck-tile.on { border-color: var(--gold); background: rgba(255,200,87,.12); box-shadow: 0 0 18px rgba(255,200,87,.25); }
.deck-tile.locked { opacity: .5; cursor: not-allowed; }
.dt-icon { font-size: 30px; width: 52px; height: 72px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(circle at 50% 50%, rgba(255,200,87,.5) 0 10%, transparent 11%), repeating-linear-gradient(45deg, #3a2a86 0 6px, #2a1d66 6px 12px); border: 3px solid #f4ecd8; margin-bottom: 4px; }
.deck-tile.locked .dt-icon { filter: grayscale(1); }
.deck-tile > b { font-size: 15px; }
.deck-tile > b i { font-style: normal; color: var(--gold); }
.deck-tile small { font-size: 12px; color: #d9d0f5; line-height: 1.4; }
.panel.codex-panel { width: min(640px, 100%); }
.codex { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.codex .relic { width: 54px; height: 54px; }
.codex .relic .ri { font-size: 28px; }
.codex .relic.unknown { border-color: rgba(255,255,255,.15); background: rgba(0,0,0,.35); box-shadow: none; }
.codex .relic.unknown .ri { color: var(--dim); font-family: var(--font-d); font-size: 22px; filter: none; }
.unlocks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.unl { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,200,87,.25), rgba(255,200,87,.05)); border: 1px solid rgba(255,200,87,.5); animation: panelin .5s ease both; }
.unl > span { font-size: 30px; }
.unl small { display: block; color: var(--gold); font-weight: 900; font-size: 12px; }
.unl > div > b { display: block; font-size: 16px; }
.unl em { font-style: normal; font-size: 12px; color: #e2dbfa; }
.panel.confirm { width: min(380px, 100%); }
.panel.results .row .btn { flex: 1 1 auto; }

@media (max-width: 820px) {
  .deck-select { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .deck-tile { padding: 8px 6px; border-radius: 12px; }
  .dt-icon { width: 40px; height: 54px; font-size: 22px; }
  .deck-tile > b { font-size: 13px; }
  .deck-tile small { font-size: 11px; }
  .codex .relic { width: 46px; height: 46px; }
  .codex .relic .ri { font-size: 24px; }
}