/* MARTCard – bright & friendly anime style */
:root {
  --bg1: #fff6fb; --bg2: #eef7ff; --panel: #ffffff; --ink: #3a3550; --muted: #8a86a0; --line: #ece6f5;
  --pink: #ff7eb6; --pink2: #ffd0e5; --sky: #5cc2ff; --sky2: #d6efff; --sun: #ffcf3f; --mint: #4fd1a5; --violet: #a77bff;
  --light: #f5b700; --dark: #8b5cf6; --fire: #ff5a3c; --water: #3b9bff; --earth: #2fbf5b;
  --r: 18px; --shadow: 0 6px 22px rgba(120, 90, 170, .13); --shadow2: 0 2px 8px rgba(120, 90, 170, .15);
  --font: 'Nunito', 'Segoe UI', system-ui, sans-serif; --font2: 'Baloo 2', 'Nunito', 'Segoe UI', sans-serif;
  --zw: max(46px, min(calc(112px * var(--cs, 1)), calc((100vh / var(--zoom, 1) - 240px - 146px * var(--cs, 1)) / 5.1), calc((100vw / var(--zoom, 1) - 650px) / 8.6)));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: linear-gradient(160deg, var(--bg1), var(--bg2)) fixed;
  background-image: radial-gradient(circle at 12% 18%, #ffe3f0 0, transparent 30%), radial-gradient(circle at 88% 12%, #def3ff 0, transparent 28%), radial-gradient(circle at 70% 90%, #fff3c9 0, transparent 30%), linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font2); margin: 0 0 .5em; line-height: 1.15; }
a { color: var(--sky); }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); border-bottom: 2px solid var(--line); }
.logo { font-family: var(--font2); font-weight: 800; font-size: 28px; letter-spacing: .5px; cursor: pointer; user-select: none; background: linear-gradient(90deg, var(--pink), var(--violet), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.logo small { display: block; font-size: 11px; letter-spacing: 2px; color: var(--muted); -webkit-text-fill-color: var(--muted); font-family: var(--font); font-weight: 700; }
.topbar .spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow2); font-weight: 800; white-space: nowrap; }
.gold { color: #c48a00; }
.gold::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b8, #ffc21a 60%, #e09a00); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
select.lang { border: 2px solid var(--line); border-radius: 999px; padding: 6px 10px; background: #fff; cursor: pointer; }

/* ---------- buttons & inputs ---------- */
.btn { border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 800; cursor: pointer; background: #fff; box-shadow: var(--shadow2); transition: transform .12s, box-shadow .12s, background .12s; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(135deg, var(--pink), #ff9a8b); color: #fff; }
.btn.blue { background: linear-gradient(135deg, var(--sky), #7c9bff); color: #fff; }
.btn.green { background: linear-gradient(135deg, var(--mint), #6fdc7f); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; border: 2px solid var(--line); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.danger { background: #fff0f0; color: #e0444f; }
input[type=text], input[type=password], input[type=number], input[type=email], select, textarea { border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; outline: none; transition: border-color .15s; max-width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--pink); }
label.f { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.panel { background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; }
.page { max-width: 1280px; margin: 0 auto; padding: 22px 18px 60px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 30px; }
.muted { color: var(--muted); }
.note { background: #fffbe8; border: 2px dashed #ffe18a; border-radius: 14px; padding: 10px 14px; color: #8a6d00; font-weight: 600; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--sky2); color: #1f6fd1; font-size: 12px; font-weight: 800; }

/* ---------- main menu ---------- */
.hero { text-align: center; padding: 30px 10px 10px; }
.hero h1 { font-size: clamp(46px, 8vw, 86px); margin: 0; background: linear-gradient(90deg, var(--pink), var(--violet), var(--sky), var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; cursor: pointer; user-select: none; filter: drop-shadow(0 4px 0 rgba(255, 255, 255, .9)); }
.hero p { margin: 0; font-weight: 800; color: var(--muted); letter-spacing: 3px; text-transform: uppercase; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 1100px; margin: 30px auto; }
.menu-tile { border: 0; text-align: left; cursor: pointer; padding: 22px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .15s; min-height: 140px; }
.menu-tile:hover { transform: translateY(-4px) rotate(-.5deg); }
.menu-tile h3, .menu-tile p { position: relative; z-index: 1; padding-right: 60px; }
.menu-tile h3 { font-size: 26px; margin: 0 0 4px; }
.menu-tile p { margin: 0; color: var(--muted); font-weight: 700; }
.menu-tile .blob { position: absolute; right: -30px; bottom: -30px; width: 104px; height: 104px; border-radius: 50%; opacity: .9; display: grid; place-items: center; }
.menu-tile .blob svg { width: 48px; height: 48px; color: #fff; margin: -10px 0 0 -10px; }
.secret-box { max-width: 340px; margin: 0 auto 20px; }
.demo-cards { display: flex; justify-content: center; gap: 0; margin-top: 10px; perspective: 800px; }
.demo-cards .card { margin: 0 -18px; transition: transform .2s; }
.demo-cards .card:hover { transform: translateY(-14px) rotate(0) !important; z-index: 3; }

/* ---------- cards ---------- */
.card { --cw: 170px; width: var(--cw); aspect-ratio: 5 / 7; font-size: calc(var(--cw) / 14.5); border-radius: .9em; position: relative; display: flex; flex-direction: column; padding: .45em; gap: .3em; background: linear-gradient(160deg, #fff, var(--c1, #fff)); box-shadow: 0 .25em .9em rgba(70, 50, 110, .2); border: .28em solid var(--c2, #ddd); user-select: none; flex: none; overflow: hidden; color: #2f2a40; }
.card.el-light { --c1: #fff4c2; --c2: #ffcf3f; --ink: #a36f00; }
.card.el-dark { --c1: #ebe1ff; --c2: #a888ff; --ink: #6a3fd8; }
.card.el-fire { --c1: #ffe1d6; --c2: #ff7b5c; --ink: #d83a1c; }
.card.el-water { --c1: #dbefff; --c2: #5cb0ff; --ink: #1f6fd1; }
.card.el-earth { --c1: #dcf7e1; --c2: #5ccf77; --ink: #1f9a3c; }
.c-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.card > *:not(.c-bg):not(.c-count):not(.c-badge):not(.c-star) { position: relative; z-index: 1; }
.c-head { display: flex; align-items: center; gap: .3em; background: rgba(255, 255, 255, .85); border-radius: .6em; padding: .15em .45em; }
.c-name { flex: 1; font-family: var(--font2); font-weight: 800; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.c-el { width: 1.25em; height: 1.25em; color: var(--ink); flex: none; }
.c-art { position: relative; border-radius: .55em; overflow: hidden; aspect-ratio: 4 / 3; background: #fff; box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .8); flex: none; }
.c-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-lvl { position: absolute; left: .3em; bottom: .2em; color: #ffcf3f; font-size: .95em; text-shadow: 0 0 .2em #fff, 0 .05em .1em rgba(0, 0, 0, .35); letter-spacing: -.05em; }
.c-type { display: flex; align-items: center; justify-content: space-between; font-size: .72em; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; padding: 0 .3em; }
.gem { width: 1em; height: 1em; transform: rotate(45deg); border-radius: .2em; background: #c9c5d6; display: inline-block; box-shadow: 0 0 0 .12em #fff; }
.rar-rare .gem { background: #4aa3ff; } .rar-epic .gem { background: #a77bff; } .rar-legendary .gem { background: linear-gradient(135deg, #ffe66b, #ff9d00); }
.rar-legendary { box-shadow: 0 0 0 .14em #fff, 0 0 1.1em rgba(255, 196, 0, .65); }
.rar-legendary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) no-repeat; background-size: 300% 100%; animation: shine 4s cubic-bezier(.45, 0, .55, 1) infinite; pointer-events: none; z-index: 2; }
.rar-epic { box-shadow: 0 0 0 .1em #fff, 0 0 .8em rgba(167, 123, 255, .45); }
@keyframes shine { 0%, 15% { background-position: 125% 0; } 65%, 100% { background-position: -25% 0; } }
.c-text { flex: 1; background: rgba(255, 255, 255, .88); border-radius: .55em; padding: .35em .45em; font-size: calc(.7em * var(--ts, 1)); line-height: 1.28; overflow: hidden; }
.c-eff { margin-bottom: .2em; } .c-eff b { color: var(--ink); }
.c-mat { font-weight: 800; color: #b03a86; margin-bottom: .25em; }
.c-flavor { font-style: italic; color: #8a86a0; }
.c-stats { display: flex; justify-content: space-between; gap: .3em; font-size: .78em; font-weight: 800; }
.c-stats span { background: #fff; border-radius: 999px; padding: .1em .55em; flex: 1; text-align: center; }
.c-stats b { font-size: 1.25em; }
.c-stats .up b { color: #18a558; } .c-stats .down b { color: #e0444f; }
.c-count { position: absolute; bottom: -.1em; right: -.1em; background: var(--ink); color: #fff; font-weight: 900; border-radius: .7em 0 .7em 0; padding: .1em .5em; font-size: .95em; z-index: 3; }
.c-badge { position: absolute; top: .5em; left: -.2em; background: var(--pink); color: #fff; font-weight: 900; padding: .15em .6em; border-radius: 0 999px 999px 0; font-size: .8em; z-index: 3; }
.card.sz-lg { --cw: calc(270px * var(--cs, 1)); } .card.sz-md { --cw: calc(170px * var(--cs, 1)); } .card.sz-sm { --cw: calc(120px * var(--cs, 1)); } .card.sz-xs { --cw: calc(84px * var(--cs, 1)); } .card.sz-f { --cw: var(--zw); }
.card.sz-sm .c-text, .card.sz-xs .c-text, .card.sz-f .c-text, .card.sz-xs .c-type, .card.sz-f .c-type { display: none; }
.card.sz-sm .c-type { font-size: .6em; }
.card.sz-sm, .card.sz-xs, .card.sz-f { justify-content: space-between; }
.card.sz-xs .c-name, .card.sz-f .c-name { font-size: .95em; }
.card.sz-xs .c-stats, .card.sz-f .c-stats { font-size: 1em; } .card.sz-f .c-stats span { padding: 0 .2em; }
.card.sz-f .c-art, .card.sz-xs .c-art { aspect-ratio: 1 / 1; }
.card-back { background: linear-gradient(135deg, #ffb3d6, #b7a4ff 50%, #8fd6ff); border-color: #fff; display: grid; place-items: center; padding: 0; }
.card-back img { width: 100%; height: 100%; object-fit: cover; }
.cb-logo { font-family: var(--font2); font-weight: 900; color: #fff; text-align: center; font-size: 1.6em; line-height: .9; text-shadow: 0 .08em 0 rgba(0, 0, 0, .12); border: .15em solid rgba(255, 255, 255, .8); border-radius: 50%; width: 70%; aspect-ratio: 1; display: grid; place-content: center; }
.cb-logo small { font-size: .55em; letter-spacing: .15em; }

/* ---------- modal & toast ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(60, 40, 90, .35); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 200; padding: 16px; animation: fade .15s; }
.modal { background: #fff; border-radius: 24px; box-shadow: 0 20px 60px rgba(60, 40, 90, .3); padding: 22px; max-width: min(960px, 100%); max-height: calc(92vh / var(--zoom, 1)); overflow: auto; animation: pop .2s; position: relative; }
.modal h2 { font-size: 26px; }
.modal .x { position: absolute; right: 12px; top: 12px; }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { transform: scale(.92); opacity: 0; } }
#toasts { position: fixed; left: 50%; top: 74px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 800; box-shadow: var(--shadow); animation: pop .2s; border: 2px solid var(--pink2); }
.toast.err { border-color: #ffb0b0; color: #d33; }

/* ---------- deck builder ---------- */
.db-layout { display: grid; grid-template-columns: 240px 1fr 1fr; gap: 16px; align-items: start; }
.deck-list .deck-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; cursor: pointer; font-weight: 800; border: 2px solid transparent; }
.deck-item:hover { background: #faf6ff; } .deck-item.sel { border-color: var(--pink); background: #fff4fa; }
.deck-item .tag { margin-left: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters input[type=text] { flex: 1; min-width: 140px; }
.chip { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; cursor: pointer; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.chip.on { border-color: var(--pink); background: #fff0f7; }
.chip svg { width: 16px; height: 16px; }
.chip.el-light svg { color: var(--light); } .chip.el-dark svg { color: var(--dark); } .chip.el-fire svg { color: var(--fire); } .chip.el-water svg { color: var(--water); } .chip.el-earth svg { color: var(--earth); }
.card-grid { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.coll-grid { max-height: calc(68vh / var(--zoom, 1)); overflow: auto; padding: 6px; }
.coll-grid .card { cursor: grab; }
.coll-grid .card.none { filter: grayscale(.85); opacity: .55; }
.dropzone { min-height: 160px; border: 3px dashed var(--line); border-radius: 18px; padding: 10px; transition: background .15s, border-color .15s; }
.dropzone.over { background: #fff4fa; border-color: var(--pink); }
.dropzone .card { cursor: pointer; }
.dz-head { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; font-weight: 800; }
.errs { color: #d33; font-weight: 700; font-size: 13px; } .okmsg { color: #18a558; font-weight: 800; }
.avatar-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-pick img, .avatar-img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow2); cursor: pointer; object-fit: cover; }
.avatar-pick img.sel { border-color: var(--pink); transform: scale(1.08); }

/* ---------- shop & tower ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab { border: 0; background: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow2); }
.tab.on { background: var(--ink); color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.shop-item { background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.shop-item img.pack { width: 140px; height: 210px; object-fit: cover; border-radius: 14px; transition: transform .2s; }
.shop-item:hover img.pack { transform: rotate(-3deg) scale(1.04); }
.shop-item img.av { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow2); }
.shop-item h3 { margin: 0; font-size: 19px; }
.pack-open { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.flip-in { animation: flipIn .5s backwards; }
@keyframes flipIn { from { transform: rotateY(90deg) scale(.8); opacity: 0; } }
.tower { display: flex; flex-direction: column-reverse; gap: 12px; max-width: 760px; margin: 0 auto; }
.floor { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 12px 16px; }
.floor.locked { opacity: .55; filter: grayscale(.7); }
.floor .num { font-family: var(--font2); font-size: 26px; font-weight: 900; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sky), var(--violet)); flex: none; }
.floor.cleared .num { background: linear-gradient(135deg, var(--mint), #8fe388); }
.floor .info { flex: 1; } .floor .info b { font-size: 18px; }
.floor .els { display: flex; gap: 2px; } .floor .els svg { width: 18px; height: 18px; }
.els .el-light { color: var(--light); } .els .el-dark { color: var(--dark); } .els .el-fire { color: var(--fire); } .els .el-water { color: var(--water); } .els .el-earth { color: var(--earth); }

/* ---------- rules ---------- */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.rules .panel h3 { color: var(--pink); font-size: 21px; }
.rules ul { margin: 0; padding-left: 20px; line-height: 1.55; }

/* ---------- battle ---------- */
.battle { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; gap: 12px; padding: 10px; height: calc(100vh / var(--zoom, 1) - 62px); min-height: 640px; }
.b-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pcard { background: #fff; border-radius: 18px; box-shadow: var(--shadow2); padding: 10px 12px; display: flex; gap: 10px; align-items: center; position: relative; transition: box-shadow .2s; }
.pcard.active { box-shadow: 0 0 0 3px var(--pink), var(--shadow); }
.pcard .avatar-img { width: 54px; height: 54px; cursor: default; }
.pcard .nm { font-weight: 900; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp { font-family: var(--font2); font-size: 30px; font-weight: 900; color: #e0444f; line-height: 1; }
.hp small { font-size: 13px; color: var(--muted); }
.hpbar { height: 8px; border-radius: 99px; background: #ffe2e6; overflow: hidden; margin-top: 4px; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b81, #ff9a8b); transition: width .4s; }
.counts { display: flex; gap: 6px; flex-wrap: wrap; }
.counts .pill { font-size: 12px; padding: 4px 10px; cursor: pointer; }
.phasebar { display: flex; gap: 4px; flex-wrap: wrap; }
.phasebar span { flex: 1; text-align: center; padding: 5px 2px; border-radius: 10px; background: #fff; font-size: 11px; font-weight: 800; color: var(--muted); box-shadow: var(--shadow2); }
.phasebar span.on { background: var(--pink); color: #fff; }
.logbox { flex: 1; overflow: auto; background: #fff; border-radius: 16px; box-shadow: var(--shadow2); padding: 10px; font-size: calc(12.5px * var(--ts, 1)); line-height: 1.45; min-height: 80px; }
.logbox div { padding: 2px 0; border-bottom: 1px dashed #f1ecf8; }
.logbox .turn { font-weight: 900; color: var(--violet); }
.timer { font-family: var(--font2); font-size: 22px; font-weight: 900; text-align: center; background: #fff; border-radius: 14px; box-shadow: var(--shadow2); padding: 4px; }
.timer.low { color: #e0444f; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.b-center { display: flex; flex-direction: column; gap: 6px; min-height: 0; align-items: center; justify-content: space-between; }
.field { display: flex; flex-direction: column; gap: 6px; align-items: center; background: rgba(255, 255, 255, .55); border-radius: 26px; padding: 10px; box-shadow: inset 0 0 0 2px #fff; }
.zrow { display: flex; gap: 6px; }
.zone { width: var(--zw); height: calc(var(--zw) * 1.4); border-radius: 12px; display: grid; place-items: center; position: relative; transition: background .15s, box-shadow .15s; }
.zone.bz { background: rgba(255, 126, 182, .1); border: 2px dashed rgba(255, 126, 182, .4); }
.zone.support { background: rgba(92, 194, 255, .1); border: 2px dashed rgba(92, 194, 255, .4); height: calc(var(--zw) * 1.05); }
.zone.support .card { --cw: calc(var(--zw) * .75); }
.zone .card { cursor: pointer; transition: transform .2s; }
.zone .card.def { transform: rotate(90deg) scale(.72); }
.zone .card.attacked { filter: saturate(.55); }
.zone .card.fdown { opacity: .72; outline: 2px dashed rgba(90, 70, 140, .45); outline-offset: -4px; }
.mid-line { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--pink2), transparent); margin: 2px 0; }
.selectable { box-shadow: 0 0 0 3px var(--sun), 0 0 14px rgba(255, 207, 63, .8) !important; animation: glow 1.2s infinite; }
.selected { box-shadow: 0 0 0 4px var(--pink), 0 0 18px rgba(255, 126, 182, .9) !important; }
.targetable { box-shadow: 0 0 0 3px #ff5a5a, 0 0 16px rgba(255, 70, 70, .8) !important; animation: glow 1s infinite; }
@keyframes glow { 50% { filter: brightness(1.08); } }
.hand { display: flex; justify-content: center; min-height: 175px; padding: 6px 30px 0; width: 100%; }
.hand .card { margin: 0 var(--ov, -14px); transition: transform .15s, margin .15s; cursor: pointer; }
.hand .card:hover, .hand .card.selected { transform: translateY(-22px) scale(1.06); z-index: 5; margin: 0 2px; }
.hand.opp { min-height: 0; padding: 0; }
.hand.opp .card { --cw: 44px; }
.hand.opp .card { margin: 0 -10px; cursor: default; }
.hand.opp .card:hover { transform: none; margin: 0 -10px; }
.detail { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.actions .btn { width: 100%; }
.selbar { background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 0 0 3px var(--sun), var(--shadow); font-weight: 800; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.banner { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 150; font-family: var(--font2); font-size: 54px; font-weight: 900; color: #fff; text-shadow: 0 4px 0 var(--pink), 0 8px 24px rgba(0, 0, 0, .2); pointer-events: none; animation: banner 1.3s forwards; white-space: nowrap; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.float { position: absolute; font-family: var(--font2); font-weight: 900; font-size: 26px; pointer-events: none; animation: floatUp 1.1s forwards; z-index: 20; }
.float.dmg { color: #e0444f; } .float.heal { color: #18a558; }
@keyframes floatUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pop-in { animation: pop .3s; }
.cover { position: fixed; inset: 0; z-index: 180; background: linear-gradient(135deg, #ffd0e5, #d6efff); display: grid; place-items: center; text-align: center; }
.cover h2 { font-size: 40px; }
.result-cards { display: flex; gap: 14px; justify-content: center; margin: 14px 0; }

/* ---------- editor ---------- */
.ed-layout { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.ed-nav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 76px; }
.ed-nav .tab { text-align: left; }
.ed-split { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.ed-list { max-height: calc(75vh / var(--zoom, 1)); overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.ed-list .it { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 14px; }
.ed-list .it:hover { background: #faf6ff; } .ed-list .it.sel { background: #fff0f7; box-shadow: inset 0 0 0 2px var(--pink); }
.ed-list .it svg { width: 16px; height: 16px; flex: none; }
.ed-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ed-form .wide { grid-column: 1 / -1; }
.eff-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; align-items: end; background: #faf8ff; padding: 8px; border-radius: 12px; }
.upload { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #faf8ff; padding: 10px; border-radius: 14px; }
.upload img { max-height: 110px; border-radius: 10px; box-shadow: var(--shadow2); }
.ed-preview { position: sticky; top: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mini-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow: auto; padding: 6px; background: #faf8ff; border-radius: 12px; }
.mini-list .chip { font-size: 12px; }

@media (max-width: 1100px) {
  .battle { grid-template-columns: 270px minmax(0, 1fr); height: auto; }
  .battle .b-right { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .db-layout { grid-template-columns: 1fr; }
  :root { --zw: 72px; }
}
@media (max-width: 760px) {
  .battle { grid-template-columns: 1fr; }
  :root { --zw: 46px; }
  .zone .card { font-size: 5px; }
  .ed-layout, .ed-split { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
}

/* ---------- zone choice & drag and drop ---------- */
.zone.zpick { cursor: pointer; background: rgba(255, 207, 63, .22) !important; border: 2px solid var(--sun) !important; animation: glow 1.1s infinite; }
.battle.dragging .zone.mine { border-color: var(--sun); }
.zone.over { background: rgba(255, 207, 63, .45) !important; border: 2px solid var(--sun) !important; transform: scale(1.04); }
.hand .card[draggable=true] { cursor: grab; }

/* ---------- dark mode ---------- */
.theme-btn { width: 38px; height: 38px; padding: 0; font-size: 18px; }
[data-theme=dark] {
  --bg1: #1d1a2b; --bg2: #161b2e; --panel: #262238; --ink: #ece8fb; --muted: #a39fbd; --line: #3a3452;
  --pink2: #5a3550; --sky2: #23364f; --shadow: 0 6px 22px rgba(0, 0, 0, .35); --shadow2: 0 2px 8px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
[data-theme=dark] body { background-image: radial-gradient(circle at 12% 18%, #3a2340 0, transparent 30%), radial-gradient(circle at 88% 12%, #1f3350 0, transparent 28%), radial-gradient(circle at 70% 90%, #3a3220 0, transparent 30%), linear-gradient(160deg, var(--bg1), var(--bg2)); }
[data-theme=dark] .topbar { background: rgba(30, 26, 46, .85); }
[data-theme=dark] .btn, [data-theme=dark] .pill, [data-theme=dark] .tab, [data-theme=dark] .menu-tile, [data-theme=dark] .modal, [data-theme=dark] .shop-item,
[data-theme=dark] .floor, [data-theme=dark] .pcard, [data-theme=dark] .logbox, [data-theme=dark] .timer, [data-theme=dark] .phasebar span, [data-theme=dark] .selbar,
[data-theme=dark] .toast, [data-theme=dark] .chip, [data-theme=dark] select, [data-theme=dark] input, [data-theme=dark] textarea, [data-theme=dark] select.lang { background: var(--panel); color: var(--ink); }
[data-theme=dark] .btn.primary { background: linear-gradient(135deg, var(--pink), #ff9a8b); color: #fff; }
[data-theme=dark] .btn.blue { background: linear-gradient(135deg, var(--sky), #7c9bff); color: #fff; }
[data-theme=dark] .btn.green { background: linear-gradient(135deg, var(--mint), #6fdc7f); color: #fff; }
[data-theme=dark] .btn.ghost { background: transparent; }
[data-theme=dark] .btn.danger { background: #3c2230; color: #ff8a93; }
[data-theme=dark] .tab.on { background: var(--pink); color: #fff; }
[data-theme=dark] .phasebar span.on { background: var(--pink); color: #fff; }
[data-theme=dark] .note { background: #33301f; border-color: #6b5a22; color: #ffe08a; }
[data-theme=dark] .tag { background: var(--sky2); color: #8ec8ff; }
[data-theme=dark] .field { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); }
[data-theme=dark] .deck-item:hover, [data-theme=dark] .ed-list .it:hover { background: #2f2a45; }
[data-theme=dark] .deck-item.sel, [data-theme=dark] .ed-list .it.sel, [data-theme=dark] .chip.on { background: #3a2640; }
[data-theme=dark] .dropzone.over { background: #3a2640; }
[data-theme=dark] .eff-row, [data-theme=dark] .upload, [data-theme=dark] .mini-list { background: #2f2a45; }
[data-theme=dark] .logbox div { border-color: #353049; }
[data-theme=dark] .modal-back { background: rgba(5, 3, 15, .6); }
[data-theme=dark] .cover { background: linear-gradient(135deg, #3a2340, #1f3350); }
[data-theme=dark] .hpbar { background: #4a2a35; }
[data-theme=dark] .hero p { color: var(--muted); }
[data-theme=dark] .logo small { -webkit-text-fill-color: var(--muted); }
[data-theme=dark] .card { box-shadow: 0 .25em .9em rgba(0, 0, 0, .5); }
[data-theme=dark] .version { color: var(--muted); }
.version { font-size: 11px; font-weight: 800; color: var(--muted); }

/* ---------- v0.3: battle layout (preview left, log + chat right) ---------- */
.avatar-img.big, .pcard .avatar-img.big { width: 84px; height: 84px; border-width: 4px; flex: none; }
.pcard .nm { font-size: 17px; }
.avn { font-size: 12px; font-weight: 800; color: var(--violet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.detail-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; }
.b-left .detail { display: flex; justify-content: center; align-items: center; min-height: 120px; }
.b-left .detail .card { --cw: min(250px, 25.4vh); }
.b-left .actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.b-left .actions .btn { width: auto; flex: 1 1 45%; }
.b-left .selbar { width: 100%; }
.topctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; }
.ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ctl .phasebar { flex-wrap: nowrap; }
.ctl .phasebar span { padding: 5px 8px; flex: none; }
.ctl .timer { font-size: 17px; padding: 3px 10px; }
.small-note { padding: 6px 12px; font-size: 13px; }
.panel-title { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 0 4px; }
.chatbox { background: #fff; border-radius: 16px; box-shadow: var(--shadow2); display: flex; flex-direction: column; height: 34%; min-height: 160px; }
.chatmsgs { flex: 1; overflow: auto; padding: 10px; font-size: calc(13px * var(--ts, 1)); display: flex; flex-direction: column; gap: 6px; }
.chatmsg { padding: 6px 10px; border-radius: 12px; background: #f6f1ff; max-width: 92%; word-wrap: break-word; }
.chatmsg.side0 { align-self: flex-end; background: #ffe8f2; }
.chatform { display: flex; gap: 6px; padding: 8px; border-top: 2px solid var(--line); }
.chatform input { flex: 1; min-width: 0; padding: 6px 10px; }
[data-theme=dark] .chatbox { background: var(--panel); }
[data-theme=dark] .chatmsg { background: #322c4a; } [data-theme=dark] .chatmsg.side0 { background: #4a2a40; }

/* ---------- v0.3: hover zoom for readability (menu, boosters, shop) ---------- */
.demo-cards > div { transition: transform .2s; position: relative; }
.demo-cards > div:hover { transform: none !important; z-index: 20; }
.demo-cards .card:hover { transform: translateY(-20px) scale(1.75) !important; z-index: 20; box-shadow: 0 1.5em 3em rgba(70, 50, 110, .35); }
.modal.allow-overflow { overflow: visible; }
.pack-open { padding: 10px 0; }
.pack-open > div { position: relative; transition: z-index 0s .2s; }
.pack-open > div:hover { z-index: 30; transition: none; }
.pack-open .card, .shop-item .card, .result-cards .card { transition: transform .2s, box-shadow .2s; }
.pack-open .card:hover, .result-cards .card:hover { transform: scale(1.55); box-shadow: 0 1.2em 3em rgba(40, 20, 80, .4); }
.shop-item { position: relative; }
.shop-item:hover { z-index: 10; }
.shop-item .card:hover { transform: scale(1.45); box-shadow: 0 1.2em 3em rgba(40, 20, 80, .4); }
@media (prefers-reduced-motion: reduce) { .card, .demo-cards > div { transition: none !important; } }
.demo-cards .card.sz-md { --cw: 114px; }

/* ---------- v0.4: level star ---------- */
.c-star { position: absolute; top: -.25em; right: -.25em; width: 2.5em; height: 2.5em; z-index: 4; display: grid; place-items: center; filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .35)); }
.c-star svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #ffcf3f; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.c-star b { position: relative; font-family: var(--font2); font-weight: 900; font-size: 1.05em; color: #5a3b00; margin-top: .15em; line-height: 1; }
.card.has-star .c-head { padding-right: 2.1em; }
.card.sz-f .c-star, .card.sz-xs .c-star { width: 3.4em; height: 3.4em; top: -.45em; right: -.45em; }
.card.sz-f .c-star b, .card.sz-xs .c-star b { font-size: 1.55em; }

/* ---------- v0.4: frame colors by card kind ---------- */
.card.kind-unit { background: linear-gradient(to top, #121019 0%, #231d30 28%, var(--c2) 100%); }
.card.kind-unit .c-type, .card.meth-summon .c-type { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.card.kind-spell { --c2: #22b862; background: linear-gradient(160deg, #d3f7e0, #22b862); }
.card.kind-spell .c-type { color: #0d6a35; }
.card.kind-trap { --c2: #e23a4f; background: linear-gradient(160deg, #ffd6dc, #e23a4f); }
.card.kind-trap .c-type { color: #8c1324; }
.card.kind-structure { --c2: #ff8a1f; background: linear-gradient(160deg, #ffe6c8, #ff8a1f); }
.card.kind-structure .c-type { color: #8a4300; }
.card.meth-overlay { background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, var(--c2) 100%); }
.card.meth-summon { border-color: #fff; background: linear-gradient(160deg, #ff7eb6, #ffcf3f 25%, #5cd68a 45%, #5cc2ff 65%, #a77bff 85%, #ff7eb6); }
.card.meth-summon::before { content: ''; position: absolute; inset: -.28em; border-radius: .9em; padding: .28em; background: linear-gradient(90deg, #ff5a8a, #ffcf3f, #4fd1a5, #3b9bff, #a77bff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3; }

/* ---------- v0.4: attack arrow ---------- */
#atkArrow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 120; }
#atkArrow path { stroke: #ff4d5e; stroke-width: 7; fill: none; stroke-linecap: round; stroke-dasharray: 14 10; animation: dash .6s linear infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
#atkArrow polygon { fill: #ff4d5e; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.battle.attacking .zone .card.atk-hot { box-shadow: 0 0 0 4px #ff4d5e, 0 0 22px rgba(255, 60, 60, 1) !important; transform: scale(1.06); }
.battle.attacking .pcard.atk-hot { box-shadow: 0 0 0 4px #ff4d5e, 0 0 22px rgba(255, 60, 60, .9); }
.zone .card.can-attack { cursor: grab; }
.card.kind-unit .c-text { background: rgba(255, 255, 255, .97); }
.c-kw { display: inline-block; font-weight: 900; color: #fff; background: linear-gradient(90deg, #ff9d00, #ff5a8a); border-radius: 999px; padding: .05em .6em; margin-bottom: .25em; cursor: help; }

/* ---------- v0.6: effect badges ---------- */
.c-eff { line-height: 1.35; }
.c-tag { display: inline-block; font-weight: 900; color: #fff; border-radius: 999px; padding: 0 .45em; margin-right: .1em; white-space: nowrap; font-size: .86em; line-height: 1.45; background: #8a86a0; }
.c-tag.t-keyword { background: linear-gradient(90deg, #ff9d00, #ff5a8a); cursor: help; }
.c-tag.t-summon { background: #ff6fae; }
.c-tag.t-attack { background: #ff5a3c; }
.c-tag.t-reveal { background: #a77bff; }
.c-tag.t-destroy { background: #4a3b5e; }
.c-tag.t-grave { background: #7d7891; }
.c-tag.t-turnStart { background: #f2a900; }
.c-tag.t-turnEnd { background: #5b5fd6; }
.c-tag.t-aura { background: #17a99a; }
.c-tag.t-activate { background: #22b862; }
.c-tag.t-oppAttack { background: #e23a4f; }
.c-tag.t-oppSummon { background: #e2603a; }
.c-tag.t-gameStart { background: #3b9bff; }
.c-text { line-height: 1.22; } .c-eff { margin-bottom: .12em; }

/* ---------- v0.7: scrollable card text ---------- */
.c-text { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent; }
.c-text::-webkit-scrollbar { width: .35em; } .c-text::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .25); border-radius: 1em; }
.c-text.more { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }

/* ---------- v0.7: controller / keyboard focus ---------- */
.pad-focus { outline: 4px solid #3b9bff !important; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(59, 155, 255, .25), 0 0 22px rgba(59, 155, 255, .6) !important; border-radius: 12px; }
.hand .card.pad-focus { transform: translateY(-22px) scale(1.06); z-index: 6; margin: 0 2px; }
.menu-grid .menu-tile.pad-focus, .btn.pad-focus { transform: translateY(-2px); }
body.pad-mode { cursor: none; }
#padHints { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 300; display: flex; gap: 10px; flex-wrap: nowrap; white-space: nowrap; justify-content: center; background: rgba(40, 32, 60, .88); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; box-shadow: var(--shadow); pointer-events: none; max-width: calc(100vw - 20px); }
#padHints span { display: inline-flex; align-items: center; gap: 6px; }
.pb { font-style: normal; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; font-size: 11px; font-weight: 900; background: #fff; color: #333; }
.pb-A { background: #4fd16a; color: #fff; } .pb-B { background: #ff5a5a; color: #fff; } .pb-X { background: #3b9bff; color: #fff; } .pb-Y { background: #ffcf3f; color: #5a3b00; }

/* ---------- v0.8: effect animations ---------- */
#fxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 130; overflow: hidden; }
.fx-ghost { position: fixed; perspective: 800px; will-change: transform, opacity; }
.fx-ghost .card.fx-card { --cw: var(--gw, 120px); }
.fx-glow .card, .card.fx-glow, .fx-glow.pill, .avatar-img.fx-glow { box-shadow: 0 0 0 .2em #fff, 0 0 1.4em .3em rgba(255, 214, 90, .95) !important; }
.fx-puff { position: fixed; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(235, 235, 245, .6) 45%, rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.fx-float { position: fixed; transform: translateX(-50%); font-family: var(--font2); font-weight: 900; font-size: 24px; pointer-events: none; animation: floatUp 1.1s forwards; text-shadow: 0 2px 0 #fff, 0 0 8px rgba(255, 255, 255, .9); }
.fx-float.fx-up { color: #18a558; } .fx-float.fx-down { color: #e0444f; } .fx-float.fx-icon { font-size: 28px; }
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-list .btn { justify-content: flex-start; font-size: 17px; padding: 12px 18px; }

/* ---------- v0.9: tower layout with practice + current deck ---------- */
.tower-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.tower-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; min-height: calc(100vh / var(--zoom, 1) - 140px); }
.tower-side .current-deck { margin-top: auto; }
.tower-side h3 { margin: 0; font-size: 19px; }
.current-deck .avatar-img { width: 58px; height: 58px; cursor: default; flex: none; }
.current-deck .els svg { width: 16px; height: 16px; }
.tower-layout .tower { max-width: none; }
@media (max-width: 900px) { .tower-layout { grid-template-columns: 1fr; } .tower-side { position: static; min-height: 0; } }

/* ---------- v0.10: card back picker ---------- */
.back-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.back-pick .bp { border-radius: 10px; cursor: pointer; padding: 3px; border: 3px solid transparent; transition: transform .15s; }
.back-pick .bp:hover { transform: translateY(-3px); }
.back-pick .bp.sel { border-color: var(--pink); }
.back-pick .card { --cw: 54px; }
.card-back img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- v0.11: playmats & promo codes ---------- */
.field { position: relative; overflow: hidden; }
.field > *:not(.fbg) { position: relative; z-index: 1; }
.fbg { position: absolute; left: 0; right: 0; height: 50%; background-size: cover; background-position: center; z-index: 0; pointer-events: none; }
.fbg-top { top: 0; } .fbg-bottom { bottom: 0; }
.fbg::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .28); }
[data-theme=dark] .fbg::after { background: rgba(20, 16, 36, .45); }
.field .zone { }
.field-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.field-pick .fp { border-radius: 10px; cursor: pointer; padding: 3px; border: 3px solid transparent; transition: transform .15s; }
.field-pick .fp:hover { transform: translateY(-3px); } .field-pick .fp.sel { border-color: var(--pink); }
.field-pick img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; display: block; box-shadow: var(--shadow2); }
img.playmat { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow2); }
img.playmat.small { width: 160px; }
.shop-grid.wide-items { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.promo-box { margin-top: 30px; max-width: 560px; }
.promo-box h3 { margin: 0 0 4px; }

/* ---------- v0.12: settings & accessibility ---------- */
body { font-size: calc(16px * var(--ts, 1)); }
.b-left .detail .card { --cw: calc(min(250px, 25.4vh / var(--zoom, 1)) * var(--cs, 1)); }
.settings-modal { display: flex; flex-direction: column; gap: 14px; }
.settings-modal h3 { margin: 6px 0 0; font-size: 17px; color: var(--pink); }
.set-row { display: grid; grid-template-columns: 1fr 200px 56px; gap: 12px; align-items: center; }
.set-row input[type=range] { width: 100%; accent-color: var(--pink); }
.set-row .val { font-weight: 900; text-align: right; }
.set-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .2s; }
.switch span::after { content: ''; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.switch input:checked + span { background: var(--pink); } .switch input:checked + span::after { transform: translateX(22px); }
.set-presets { display: flex; gap: 8px; flex-wrap: wrap; }
/* high contrast */
[data-hc] { --muted: #3d3852; --line: #6f6888; --ink: #120f1c; }
[data-hc][data-theme=dark] { --muted: #d6d1ee; --line: #b3acd0; --ink: #ffffff; }
[data-hc] .card { border-width: .36em; }
[data-hc] .c-text, [data-hc] .c-head, [data-hc] .c-stats span { background: #fff !important; color: #000; }
[data-hc] .c-tag { box-shadow: 0 0 0 .12em #000; }
[data-hc] .zone { border-width: 3px !important; border-style: solid !important; }
[data-hc] .pad-focus { outline-width: 6px !important; outline-color: #ffbf00 !important; }
[data-hc] .btn { box-shadow: 0 0 0 2px var(--ink); }
[data-hc] .fbg::after { background: rgba(255, 255, 255, .55); }
[data-hc][data-theme=dark] .fbg::after { background: rgba(0, 0, 0, .6); }
/* reduced motion */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

.b-center { min-width: 0; } .topctl { flex-wrap: wrap; } .hand { max-width: 100%; }
.battle .hand:not(.opp) .card.sz-sm { --cw: calc(104px * var(--cs, 1)); }
.hand { min-height: calc(150px * var(--cs, 1)); }

/* ---------- v0.13: phase bar between the boards, hoverable card names in the log ---------- */
.midbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 6px 10px; margin: 2px 0;
  background: rgba(255, 255, 255, .82); border-radius: 999px; box-shadow: 0 2px 10px rgba(120, 90, 170, .15), inset 0 0 0 2px #fff; backdrop-filter: blur(4px); }
.midbar .phasebar { flex-wrap: nowrap; }
.midbar .phasebar span { flex: none; padding: 5px 10px; }
.midbar .timer { font-size: 17px; padding: 3px 10px; box-shadow: none; }
[data-theme=dark] .midbar { background: rgba(38, 34, 56, .88); box-shadow: 0 2px 10px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.topctl { justify-content: center; min-height: 0; }
.lc { font-weight: 900; cursor: help; border-bottom: 2px dotted currentColor; padding: 0 1px; border-radius: 3px; }
.lc:hover, .lc:focus { background: rgba(255, 207, 63, .3); outline: none; }
.lc.el-light { color: #b07c00; } .lc.el-dark { color: #7a4fe0; } .lc.el-fire { color: #e0442a; } .lc.el-water { color: #2a7fe0; } .lc.el-earth { color: #1f9a3c; }
[data-theme=dark] .lc.el-light { color: #ffd23f; } [data-theme=dark] .lc.el-dark { color: #c4a8ff; } [data-theme=dark] .lc.el-fire { color: #ff8a70; } [data-theme=dark] .lc.el-water { color: #7cc0ff; } [data-theme=dark] .lc.el-earth { color: #6fdc8a; }
#logTip { position: fixed; z-index: 160; display: none; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(40, 20, 80, .35)); animation: pop .15s; }

/* ---------- v0.14: big extra deck button with glow, draw animation ---------- */
.xdeck { position: relative; flex: none; width: 66px; height: 92px; border: 0; padding: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(160deg, #f3ecff, #d9ccff); box-shadow: var(--shadow2); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: visible; transition: transform .15s; }
.xdeck:not(.mine) { cursor: default; opacity: .9; }
.xdeck.mine:hover { transform: translateY(-3px) scale(1.04); }
.xd-stack { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); }
.xd-stack .card { --cw: 44px !important; box-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(167, 123, 255, .5); }
.xd-empty { display: block; width: 44px; height: 60px; border-radius: 8px; border: 2px dashed rgba(120, 90, 170, .4); }
.xd-label { position: relative; z-index: 1; font-size: 10px; font-weight: 900; color: #6a3fd8; background: rgba(255, 255, 255, .9); border-radius: 999px; padding: 1px 7px; margin-bottom: 4px; }
.xd-count { position: absolute; top: -7px; left: -7px; background: var(--ink); color: #fff; font-weight: 900; font-size: 12px; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; z-index: 2; }
.xd-ready { position: absolute; top: -7px; right: -7px; background: #ffcf3f; color: #5a3b00; font-weight: 900; font-size: 12px; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; z-index: 2; animation: pulse 1s infinite; }
.xdeck.ready { background: linear-gradient(160deg, #fff6c9, #ffd36b); animation: xglow 1.4s ease-in-out infinite; }
@keyframes xglow { 0%, 100% { box-shadow: 0 0 0 3px #ffcf3f, 0 0 12px 2px rgba(255, 196, 0, .7); } 50% { box-shadow: 0 0 0 4px #fff3a6, 0 0 26px 8px rgba(255, 196, 0, .95); } }
[data-theme=dark] .xdeck { background: linear-gradient(160deg, #3a2f5a, #261f40); }
[data-theme=dark] .xdeck.ready { background: linear-gradient(160deg, #6b5520, #3d2f10); }
.pcard .avatar-img.big { width: 76px; height: 76px; }
.card.xready { box-shadow: 0 0 0 .25em #ffcf3f, 0 0 1.4em .3em rgba(255, 196, 0, .8) !important; }
.fx-draw { z-index: 135; }

/* ---------- v0.15: grave + extra tiles right of the avatar, direct attack outline ---------- */
.pcard { gap: 8px; padding: 10px; }
.pcard .avatar-img.big { width: 66px; height: 66px; }
.pcard .nm { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .hp { font-size: 26px; }
.xdeck { width: 54px; height: 78px; }
.xd-stack .card { --cw: 38px !important; }
.xd-empty { width: 38px; height: 52px; }
.xd-label { font-size: 9px; padding: 1px 5px; white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
.gdeck { background: linear-gradient(160deg, #eef0f4, #cfd3de); }
.gdeck .xd-label { color: #4a4f5e; }
.gdeck .xd-stack .card { box-shadow: 2px 2px 0 rgba(0, 0, 0, .15); }
.gdeck:hover { transform: translateY(-3px) scale(1.04); }
[data-theme=dark] .gdeck { background: linear-gradient(160deg, #3a3d4a, #262833); }
.half { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center; border-radius: 18px; padding: 4px; transition: box-shadow .2s, background .2s; }
.half.direct-ok { outline: 3px dashed rgba(255, 77, 94, .55); outline-offset: 2px; }
.battle.attacking .half.direct-ok, .half.direct-ok.atk-hot { outline: 4px dashed #ff4d5e; background: rgba(255, 77, 94, .08); animation: directPulse 0.9s ease-in-out infinite; }
.half.direct-ok.atk-hot { background: rgba(255, 77, 94, .18); }
.battle.attacking .half.direct-ok::after, .half.direct-ok.hovering-ready::after { content: attr(data-direct); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255, 77, 94, .92); color: #fff; font-weight: 900; padding: 8px 16px; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 5; box-shadow: var(--shadow); }
@keyframes directPulse { 50% { outline-color: rgba(255, 77, 94, .45); } }
.half.direct-ok.hovering-ready { outline: 4px dashed #ff4d5e; animation: directPulse .9s ease-in-out infinite; }
.xdeck { width: 58px; } .xd-label { max-width: none; font-size: 8.5px; padding: 1px 4px; }
.battle { grid-template-columns: 320px minmax(0, 1fr) 280px; }
.fx-fly { z-index: 136; filter: drop-shadow(0 10px 18px rgba(40, 20, 80, .35)); }

/* ---------- v0.17: deck search picker ---------- */
.pick-grid { gap: 14px; justify-content: center; max-height: calc(62vh / var(--zoom, 1)); overflow: auto; padding: 10px; }
.pick-card { border: 0; background: none; padding: 4px; border-radius: 16px; cursor: pointer; transition: transform .15s; position: relative; }
.pick-card:hover { transform: translateY(-6px) scale(1.04); }
.pick-card.chosen { box-shadow: 0 0 0 4px var(--pink), 0 0 20px rgba(255, 126, 182, .8); transform: translateY(-6px) scale(1.04); }
.pick-card.chosen::after { content: '✓'; position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 900; display: grid; place-items: center; box-shadow: var(--shadow2); z-index: 5; }

/* ---------- v0.18: deck builder tabs + sticky preview ---------- */
.db-layout { grid-template-columns: 300px 1fr 1fr; }
.db-layout > .col:first-child { position: sticky; top: 76px; max-height: calc(100vh / var(--zoom, 1) - 90px); overflow: auto; }
.db-preview .card.sz-lg { --cw: calc(250px * var(--cs, 1)); }
.db-tabs { margin: 12px 0 8px; }
.db-tabs .tag { margin-left: 4px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.av-tile { border: 3px solid transparent; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow2); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center; transition: transform .15s; color: var(--ink); }
.av-tile:hover:not(.locked) { transform: translateY(-3px); }
.av-tile img { width: 96px; height: 96px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--shadow2); object-fit: cover; }
.av-tile b { font-size: 15px; }
.av-eff { font-size: 12px; color: var(--muted); line-height: 1.5; }
.av-tile.sel { border-color: var(--pink); background: #fff4fa; }
.av-tile.locked { opacity: .5; filter: grayscale(.6); cursor: not-allowed; }
[data-theme=dark] .av-tile.sel { background: #3a2640; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cos-grid.backs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cos-tile { border: 3px solid transparent; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow2); padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--ink); font-weight: 800; font-size: 13px; transition: transform .15s; }
.cos-tile:hover { transform: translateY(-3px); }
.cos-tile.sel { border-color: var(--pink); background: #fff4fa; }
[data-theme=dark] .cos-tile.sel { background: #3a2640; }
.cos-tile img.playmat { max-width: 100%; }
@media (max-width: 1100px) { .db-layout > .col:first-child { position: static; max-height: none; } }

/* ---------- v0.19: sticky collection, sold-out tag ---------- */
.coll-panel { position: sticky; top: 76px; max-height: calc(100vh / var(--zoom, 1) - 90px); display: flex; flex-direction: column; }
.coll-panel .coll-grid { flex: 1; min-height: 200px; max-height: none; }
.sold-tag { background: #ececf2 !important; color: #8a86a0 !important; }
[data-theme=dark] .sold-tag { background: #35304a !important; color: #a39fbd !important; }
@media (max-width: 1100px) { .coll-panel { position: static; max-height: none; } .coll-panel .coll-grid { max-height: calc(68vh / var(--zoom, 1)); } }

/* ---------- v0.20: deck builder header status ---------- */
.db-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 900; font-size: 14px; box-shadow: var(--shadow2); background: var(--panel); }
.db-status.ok { background: #dcf7e1; color: #18803f; }
.db-status.bad { background: #ffe4e6; color: #d33; cursor: help; }
.db-status.saved { background: var(--sky2); color: #1f6fd1; }
.db-status.saved small { font-weight: 700; opacity: .8; }
.db-status.saved.flash { animation: savedFlash .7s ease-out; }
@keyframes savedFlash { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(92, 194, 255, .7); } 40% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(92, 194, 255, 0); } 100% { transform: scale(1); } }
[data-theme=dark] .db-status.ok { background: #1f3d2a; color: #6fdc8a; } [data-theme=dark] .db-status.bad { background: #4a2228; color: #ff8a93; } [data-theme=dark] .db-status.saved { color: #8ec8ff; }

/* ---------- v0.21: collection viewer ---------- */
.card.sz-xl { --cw: calc(min(400px, (100vh / var(--zoom, 1) - 150px) * .625) * var(--cs, 1)); }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.col-grid.t-fields { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.col-grid.t-avatars { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.col-item { position: relative; border: 0; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow2); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: zoom-in; color: var(--ink); transition: transform .15s; }
.col-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.col-item.locked { opacity: .5; filter: grayscale(.7); }
.col-item .playmat { max-width: 100%; }
.col-name { font-weight: 800; font-size: 13px; text-align: center; }
.col-av { width: 110px; height: 110px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--shadow2); }
.col-star { position: absolute; top: 6px; right: 8px; font-size: 22px; line-height: 1; color: #c9c5d6; cursor: pointer; z-index: 5; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.col-star:hover { transform: scale(1.25); }
.col-star.on { color: #ffc21a; }
.col-modal { text-align: center; }
.col-view { display: flex; align-items: center; justify-content: center; gap: 14px; }
.col-nav { font-size: 30px; width: 52px; height: 52px; padding: 0; flex: none; }
.col-big { display: flex; justify-content: center; }
.col-big.locked { filter: grayscale(.6); opacity: .75; }
.col-av-big { width: min(420px, 70vw); height: min(420px, 70vw); border-radius: 50%; border: 8px solid #fff; box-shadow: var(--shadow); object-fit: cover; }
.col-mat-big { width: min(1000px, 78vw); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); }
.col-info { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }
.col-info h2 { margin: 0; }
.col-bar { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .1); overflow: hidden; margin-left: 8px; }
.col-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--violet)); }

/* ---------- v0.22: image cropper (secret editor) ---------- */
.crop-wrap { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
.crop-stage { flex: 1 1 auto; display: grid; place-items: center; min-height: 300px; padding: 14px; border-radius: 18px; background: repeating-conic-gradient(#f3eefa 0 25%, #fff 0 50%) 0 0 / 22px 22px; }
.crop-stage.card-mode .card.sz-lg { --cw: 380px; }
.crop-vp { position: relative; overflow: hidden; max-width: 100%; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px rgba(60, 40, 90, .25), 0 0 0 3px var(--pink); }
.crop-vp.round { border-radius: 50%; }
.crop-target { cursor: grab; touch-action: none; }
.crop-target.grabbing { cursor: grabbing; }
.crop-target > img.crop-img { position: absolute; max-width: none; max-height: none; object-fit: fill; user-select: none; pointer-events: none; }
.crop-stage.card-mode .c-art { box-shadow: 0 0 0 3px var(--pink); }
.crop-sq { position: absolute; top: 0; bottom: 0; left: 12.5%; width: 75%; border: 2px dashed rgba(255, 255, 255, .95); outline: 1px dashed rgba(0, 0, 0, .45); pointer-events: none; }
.crop-target.no-sq .crop-sq { display: none; }
.crop-side { width: 270px; flex: none; gap: 10px; }
.crop-side .row:last-child { flex-wrap: nowrap; }
.crop-ov { position: relative; width: 100%; border-radius: 10px; overflow: hidden; cursor: move; touch-action: none; background: #eee; }
.crop-ov img { display: block; width: 100%; height: auto; opacity: .55; user-select: none; pointer-events: none; }
.crop-rect { position: absolute; border: 2px solid var(--pink); box-shadow: 0 0 0 999px rgba(30, 20, 50, .35); pointer-events: none; }
.crop-side input[type=range] { width: 100%; }
@media (max-width: 760px) { .crop-side { width: 100%; } .crop-stage.card-mode .card.sz-lg { --cw: 300px; } }

/* ---------- v0.22: deck builder & database (secret editor) ---------- */
.eb-layout { grid-template-columns: 280px 1fr 1fr; }
.eb-stats { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #faf8ff; font-size: 13px; }
.eb-stats svg { width: 14px; height: 14px; vertical-align: -2px; margin: 0 2px 0 6px; }
.dbf-pill { border: 0; cursor: pointer; margin-left: auto; font: inherit; font-weight: 900; font-size: 14px; }
.dbf-pill.bad { cursor: pointer; }
.dbf-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; padding: 12px 14px; border-radius: 14px; background: #faf8ff; font-size: 14px; }
.dbf-grid span { color: var(--muted); }
[data-theme=dark] .crop-stage { background: repeating-conic-gradient(#2a2540 0 25%, #221e35 0 50%) 0 0 / 22px 22px; }
[data-theme=dark] .eb-stats, [data-theme=dark] .dbf-grid, [data-theme=dark] .crop-ov { background: #2f2a45; }

/* ---------- v0.23: booster opening ---------- */
.bp-overlay { --gc: #ffffff; --gc2: rgba(255, 255, 255, .55); position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; user-select: none; }
.bp-overlay.show { opacity: 1; }
.bp-overlay.glow-rare { --gc: #4aa8ff; --gc2: rgba(74, 168, 255, .6); }
.bp-overlay.glow-epic { --gc: #a35bff; --gc2: rgba(163, 91, 255, .65); }
.bp-overlay.glow-legendary { --gc: #ffd84a; --gc2: rgba(255, 170, 220, .7); }
.bp-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(70, 50, 120, .55), rgba(15, 8, 35, .9) 70%); backdrop-filter: blur(4px); }
.bp-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; padding: 16px; }
.bp-pack-wrap { position: relative; width: min(300px, 40vh); aspect-ratio: 2 / 3; animation: bpIn .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.bp-glow { position: absolute; inset: -9%; border-radius: 34px; background: radial-gradient(closest-side, var(--gc2), transparent); filter: blur(18px); animation: bpPulse 1.8s ease-in-out infinite; }
.glow-legendary .bp-glow { background: conic-gradient(from 0deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #7a5cff, #ff4dd8, #ff4d6d); border-radius: 50%; filter: blur(26px); opacity: .9; animation: bpPulse 1.8s ease-in-out infinite, bpSpin 4s linear infinite; }
.bp-pack { position: absolute; inset: 0; border-radius: 18px; cursor: pointer; animation: bpFloat 2.6s ease-in-out infinite; outline: none;
  box-shadow: 0 0 0 4px var(--gc), 0 0 22px 6px var(--gc2), 0 0 60px 10px var(--gc2), 0 18px 40px rgba(0, 0, 0, .5); }
.glow-legendary .bp-pack { box-shadow: 0 0 26px 6px rgba(255, 255, 255, .6), 0 0 70px 14px rgba(255, 150, 230, .55), 0 18px 40px rgba(0, 0, 0, .5); }
.glow-legendary .bp-pack::before { content: ''; position: absolute; inset: -5px; border-radius: 22px; z-index: -1; background: conic-gradient(from var(--a, 0deg), #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #7a5cff, #ff4dd8, #ff4d6d); animation: bpSpinBorder 2.5s linear infinite; }
.bp-pack > img, .bp-top img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; pointer-events: none; }
.bp-top { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 20%, 92% 23%, 84% 20%, 76% 23%, 68% 20%, 60% 23%, 52% 20%, 44% 23%, 36% 20%, 28% 23%, 20% 20%, 12% 23%, 4% 20%, 0 22%); transition: transform .7s cubic-bezier(.4, 0, .6, 1), opacity .7s; }
.bp-pack > img { clip-path: polygon(0 22%, 4% 20%, 12% 23%, 20% 20%, 28% 23%, 36% 20%, 44% 23%, 52% 20%, 60% 23%, 68% 20%, 76% 23%, 84% 20%, 92% 23%, 100% 20%, 100% 100%, 0 100%); transition: transform .7s ease-in, opacity .6s; }
.bp-shine { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; overflow: hidden; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 60%); background-size: 260% 100%; animation: bpShine 2.8s ease-in-out infinite; }
.bp-pack:hover { filter: brightness(1.12); }
.bp-pack.shake { animation: bpShake .55s ease-in-out both; }
.bp-overlay.torn .bp-top { transform: translate(40px, -140%) rotate(18deg); opacity: 0; }
.bp-overlay.torn .bp-pack > img { transform: translateY(35%) scale(.9); opacity: 0; }
.bp-overlay.torn .bp-shine { opacity: 0; }
.bp-overlay.torn .bp-glow { animation: bpFlash .65s ease-out forwards; }
.bp-title { color: #fff; text-align: center; display: flex; flex-direction: column; gap: 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.bp-title b { font-family: var(--font2); font-size: 28px; }
.bp-title span { font-weight: 800; opacity: .85; animation: bpBlink 1.6s ease-in-out infinite; }
.bp-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1200px; }
.bp-card { perspective: 1200px; cursor: pointer; opacity: 0; transform: translateY(60px) scale(.3) rotate(-8deg); transition: transform .55s cubic-bezier(.2, 1.3, .4, 1), opacity .4s; transition-delay: calc(var(--i) * 90ms); position: relative; }
.bp-card.dealt { opacity: 1; transform: none; }
.bp-card.dealt:not(.flipped):hover { transform: translateY(-8px); transition-delay: 0s; }
.bp-inner { position: relative; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.3, .1, .2, 1); }
.bp-card.flipped .bp-inner { transform: rotateY(180deg); }
.bp-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bp-front { position: absolute; inset: 0; transform: rotateY(180deg); }
.bp-backface .card { box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.bp-card.flipped { cursor: default; z-index: 1; }
.bp-card.flipped.r-rare .bp-front .card { box-shadow: 0 0 0 3px #4aa8ff, 0 0 20px 4px rgba(74, 168, 255, .6); }
.bp-card.flipped.r-epic .bp-front .card { box-shadow: 0 0 0 3px #a35bff, 0 0 26px 6px rgba(163, 91, 255, .7); }
.bp-card.flipped.r-legendary .bp-front .card { box-shadow: 0 0 26px 6px rgba(255, 220, 120, .8), 0 0 50px 12px rgba(255, 120, 220, .5); }
.bp-card.flipped.r-legendary .bp-front::before { content: ''; position: absolute; inset: -5px; border-radius: 1.1em; background: conic-gradient(from var(--a, 0deg), #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #7a5cff, #ff4dd8, #ff4d6d); animation: bpSpinBorder 2.5s linear infinite; }
.bp-card.burst::after { content: ''; position: absolute; inset: -40%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(163, 91, 255, .6) 45%, transparent); animation: bpBurst .9s ease-out forwards; }
.bp-card.burst.r-legendary::after { background: radial-gradient(closest-side, #fff, rgba(255, 216, 74, .8) 35%, rgba(255, 77, 216, .5) 60%, transparent); }
.bp-overlay.done .bp-card.flipped:hover { z-index: 5; }
.bp-overlay.done .bp-card.flipped:hover .bp-inner { transform: rotateY(180deg) scale(1.45); transition: transform .2s; }
.bp-bar { position: relative; display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 26px; color: #fff; font-weight: 800; }
.bp-hint { opacity: .8; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes bpIn { from { transform: scale(.4) translateY(80px); opacity: 0; } }
@keyframes bpFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes bpPulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes bpSpin { to { rotate: 360deg; } }
@keyframes bpSpinBorder { to { --a: 360deg; } }
@keyframes bpShine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
@keyframes bpShake { 0%, 100% { transform: none; } 15% { transform: rotate(-5deg) scale(1.05); } 30% { transform: rotate(5deg) scale(1.08); } 45% { transform: rotate(-6deg) scale(1.1); } 60% { transform: rotate(6deg) scale(1.12); } 80% { transform: rotate(-3deg) scale(1.14); } }
@keyframes bpFlash { 0% { opacity: 1; transform: scale(1); filter: blur(18px) brightness(1); } 40% { opacity: 1; transform: scale(2.4); filter: blur(30px) brightness(2); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes bpBurst { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }
@keyframes bpBlink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.bp-bar .btn:not(.primary) { color: var(--ink); }
[data-theme=dark] .bp-bar .btn:not(.primary) { color: #f1ecff; }

/* ---------- v0.25: special card versions (rainbow foil & special artwork) ---------- */
.card.foil { animation: foilBorder 4s linear infinite; }
.card > .c-foil { position: absolute !important; inset: 0; z-index: 2 !important; pointer-events: none; border-radius: inherit; overflow: hidden; }
.card > .c-foil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .65) 50%, transparent 60%) no-repeat; background-size: 300% 100%; mix-blend-mode: soft-light; animation: foilSheen 4s cubic-bezier(.45, 0, .55, 1) infinite; }
.c-var { position: absolute; left: .3em; bottom: .3em; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; font-size: .9em; color: #fff; font-weight: 900; z-index: 2;
  background: conic-gradient(#ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #7a5cff, #ff4dd8, #ff4d6d); box-shadow: 0 0 0 .12em #fff, 0 .1em .4em rgba(0, 0, 0, .3); text-shadow: 0 0 .2em rgba(0, 0, 0, .6); }
.card.sz-xs .c-var, .card.sz-f .c-var { width: 1.2em; height: 1.2em; font-size: .7em; }
/* v0.39: seamless rainbow loop – a horizontal rainbow (first colour = last colour) on a wide rotated layer,
   moved by exactly one tile per cycle, so the end of the loop is identical to its start */
.card > .c-foil::before { content: ''; position: absolute; inset: -60%; transform: rotate(-25deg); mix-blend-mode: overlay; opacity: .85;
  background: linear-gradient(90deg, rgba(255, 60, 90, .55), rgba(255, 190, 60, .55), rgba(250, 255, 80, .55), rgba(60, 255, 150, .55), rgba(60, 200, 255, .55), rgba(150, 90, 255, .55), rgba(255, 70, 200, .55), rgba(255, 60, 90, .55));
  background-size: 50% 100%; background-repeat: repeat-x; animation: foilShift 6s linear infinite; }
@keyframes foilShift { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes foilSheen { 0%, 15% { background-position: 125% 0; } 65%, 100% { background-position: -25% 0; } }
@keyframes foilBorder { 0% { border-color: #ff4d6d; } 16% { border-color: #ffb84d; } 33% { border-color: #f5e23a; } 50% { border-color: #4ddf88; } 66% { border-color: #4dc2ff; } 83% { border-color: #8a5cff; } 100% { border-color: #ff4d6d; } }
.var-pick { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px; border-radius: 14px; background: #faf8ff; }
.var-list { display: flex; flex-wrap: wrap; gap: 8px; }
.var-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: #fff; cursor: pointer; box-shadow: var(--shadow2); font-size: 11px; font-weight: 800; max-width: 110px; text-align: center; }
.var-opt .card { pointer-events: none; }
.var-opt.sel { border-color: var(--pink); background: #fff0f7; }
.alt-box { background: #faf8ff; padding: 10px; border-radius: 14px; }
.alt-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 8px; border-radius: 12px; background: #fff; box-shadow: var(--shadow2); }
.pool-box { background: #faf8ff; padding: 10px; border-radius: 14px; }
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; max-height: 340px; overflow: auto; padding: 2px; }
.pool-it { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; border: 2px solid transparent; }
.pool-it input { margin: 0; } .pool-it svg { width: 14px; height: 14px; } .pool-it .pn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-it small { font-size: 10px; color: var(--muted); }
.pool-it.on { border-color: var(--mint); background: #effcf4; }
.pool-it.r-rare small, .rar-tag.r-rare { color: #2f86e0; } .pool-it.r-epic small, .rar-tag.r-epic { color: #8a45e6; } .pool-it.r-legendary small, .rar-tag.r-legendary { color: #c98a00; }
.bp-card.special.flipped .bp-front::before { content: ''; position: absolute; inset: -6px; border-radius: 1.1em; background: conic-gradient(from var(--a, 0deg), #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #7a5cff, #ff4dd8, #ff4d6d); animation: bpSpinBorder 2s linear infinite; filter: blur(2px); }
.bp-card.burst.special::after { background: radial-gradient(closest-side, #fff, rgba(120, 220, 255, .8) 30%, rgba(255, 120, 230, .55) 60%, transparent); }
[data-theme=dark] .var-pick, [data-theme=dark] .alt-box, [data-theme=dark] .pool-box { background: #2f2a45; }
[data-theme=dark] .var-opt, [data-theme=dark] .alt-row, [data-theme=dark] .pool-it { background: #3a3452; }
[data-theme=dark] .var-opt.sel { background: #4a2a44; } [data-theme=dark] .pool-it.on { background: #1f3d2a; }
.card > .c-vars { position: absolute !important; left: -.1em; bottom: -.1em; z-index: 3 !important; background: linear-gradient(135deg, #ff7eb6, #a77bff, #5cc2ff); color: #fff; font-weight: 900; border-radius: 0 .7em 0 .7em; padding: .1em .45em; font-size: .85em; }

/* ---------- v0.26: artwork frame & readable type label ---------- */
.c-art { border: .17em solid #fff; box-shadow: 0 0 0 .08em rgba(40, 30, 60, .35), 0 .12em .45em rgba(0, 0, 0, .28); background: #fff; }
.card.kind-unit .c-art, .card.kind-extra .c-art { box-shadow: 0 0 0 .08em rgba(0, 0, 0, .55), 0 .15em .5em rgba(0, 0, 0, .45); }
.card.foil .c-art { border-color: #fff8; }
.c-type { align-self: stretch; background: rgba(255, 255, 255, .93); border-radius: 999px; padding: .2em .65em; box-shadow: 0 .06em .2em rgba(0, 0, 0, .18); line-height: 1.2; }
.card .c-type, .card.kind-unit .c-type, .card.meth-summon .c-type { text-shadow: none; }
.card.kind-unit .c-type { color: #2f2a40; }
.card.kind-extra .c-type { color: #b03a86; }
.card.kind-spell .c-type { color: #0d6a35; }
.card.kind-trap .c-type { color: #a3172b; }
.card.kind-structure .c-type { color: #8a4300; }
.c-type > span::before { margin-right: .3em; }
.card.kind-unit .c-type > span::before { content: '⚔'; } .card.kind-extra .c-type > span::before { content: '✦'; }
.card.kind-spell .c-type > span::before { content: '🔮'; } .card.kind-trap .c-type > span::before { content: '⚠'; } .card.kind-structure .c-type > span::before { content: '🏛'; }
/* small cards (hand, deck lists): bigger type label; spells/traps/structures fill the empty lower area */
.card.sz-sm .c-type { font-size: .78em; letter-spacing: .02em; }
.card.sz-sm:not(.kind-unit):not(.kind-extra) .c-type { margin: auto 0; font-size: .95em; padding: .35em .6em; justify-content: center; gap: .5em; border-radius: .7em; }
.card.sz-sm:not(.kind-unit):not(.kind-extra) .c-type .gem { display: none; }
.card.sz-sm .c-head { padding: .2em .45em; }
.card.sz-sm .c-name { font-size: 1.12em; }
[data-theme=dark] .c-type { background: rgba(255, 255, 255, .93); }
.battle .hand:not(.opp) .card.sz-sm { --cw: calc(116px * var(--cs, 1)); }
.hand .card.sz-sm .c-type { font-size: 1.1em; font-weight: 900; }
.hand .card.sz-sm:not(.kind-unit):not(.kind-extra) .c-type { font-size: 1.3em; }
.hand .card.sz-sm .c-stats { font-size: .9em; }

/* ---------- v0.27: fixes ---------- */
/* every card is its own layer → overlapping hand cards no longer mix (artwork of one card stays under the next card) */
.card { isolation: isolate; }
/* close button (✕) must not cover the dialog title */
.modal > .x + h2, .modal > .x + div > h2:first-child { padding-right: 46px; }
.modal > .x { z-index: 2; }
.zone .card.can-attack-soon { cursor: grab; }
.set-tabs { margin: 0; }
.set-tabs .tab.on { background: var(--pink); color: #fff; }
.set-sec { display: flex; flex-direction: column; gap: 14px; min-height: 230px; }

/* ---------- v0.29: avatar speech bubbles ---------- */
.speech { position: fixed; z-index: 150; max-width: 260px; pointer-events: none; animation: speechIn .35s cubic-bezier(.2, 1.5, .4, 1) both; transform-origin: 20px 0; }
.speech.above { transform-origin: 20px 100%; }
.speech span { display: block; background: #fff; color: #2f2a40; font-weight: 800; font-size: calc(15px * var(--ts, 1)); line-height: 1.3; padding: 10px 14px; border-radius: 18px; box-shadow: 0 6px 22px rgba(30, 20, 60, .35); border: 3px solid var(--pink); }
.speech::after { content: ''; position: absolute; left: 16px; width: 16px; height: 16px; background: #fff; border: 3px solid var(--pink); transform: rotate(45deg); }
.speech.below::after { top: -8px; border-right: 0; border-bottom: 0; }
.speech.above::after { bottom: -8px; border-left: 0; border-top: 0; }
.speech.out { animation: speechOut .3s ease-in forwards; }
@keyframes speechIn { from { opacity: 0; transform: scale(.4); } }
@keyframes speechOut { to { opacity: 0; transform: scale(.7) translateY(-6px); } }
.quote-menu { position: fixed; z-index: 260; background: #fff; border-radius: 16px; box-shadow: 0 10px 34px rgba(30, 20, 60, .35); padding: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 200px; max-width: 320px; max-height: 60vh; overflow: auto; }
.quote-menu b { padding: 4px 8px 6px; font-size: 13px; color: var(--pink); }
.quote-menu button { border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 10px; font-weight: 700; cursor: pointer; color: #2f2a40; }
.quote-menu button:hover { background: #fff0f7; }
.quote-menu .muted { padding: 6px 10px; font-size: 13px; }
.pcard .avatar-img { cursor: context-menu; }
.q-row { display: grid; grid-template-columns: 210px 2fr 2fr 1fr 1fr auto auto; gap: 6px; align-items: center; }
.q-row input, .q-row select { min-width: 0; }
@media (max-width: 1100px) { .q-row { grid-template-columns: 1fr 1fr; } }
[data-theme=dark] .quote-menu { background: #2b2640; } [data-theme=dark] .quote-menu button { color: #f1ecff; } [data-theme=dark] .quote-menu button:hover { background: #3a2640; }

/* ---------- v0.33: trap window ---------- */
.trap-win { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 10px; border-radius: 18px; background: linear-gradient(135deg, #fff0f2, #fff7e6); }
.trap-vs { font-size: 38px; animation: bpPulse 1.2s ease-in-out infinite; }
[data-theme=dark] .trap-win { background: linear-gradient(135deg, #3a2430, #3a3024); }

/* ---------- v0.34: tokens ---------- */
.card.is-token { border-style: dashed; }
.card.is-token .c-type > span::before { content: '✧'; }
.card.is-token .c-type { color: #6a5a8a; }
.tok-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tok-row .tok-art { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, .6); padding: 8px; border-radius: 12px; }
[data-theme=dark] .tok-row .tok-art { background: rgba(0, 0, 0, .2); }

/* ---------- v0.35: activated abilities (once per turn) ---------- */
.c-tag.t-ability { background: #f0a020; }
.zone .card.can-ability { animation: abilityGlow 1.6s ease-in-out infinite; }
@keyframes abilityGlow { 0%, 100% { box-shadow: 0 0 0 .12em #fff, 0 0 .5em .1em rgba(255, 190, 40, .55); } 50% { box-shadow: 0 0 0 .12em #fff, 0 0 1.1em .3em rgba(255, 190, 40, .95); } }

/* ---------- v0.36: profile chip, profile, admin ---------- */
.prof-chip { display: flex; align-items: center; gap: 8px; border: 0; background: #fff; border-radius: 999px; padding: 4px 14px 4px 4px; box-shadow: var(--shadow2); cursor: pointer; font: inherit; color: inherit; text-align: left; max-width: 260px; transition: transform .12s; }
.prof-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.prof-chip img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pink); flex: none; background: #fff; }
.prof-chip span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.prof-chip b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-chip small { font-size: 11px; color: var(--muted); font-weight: 700; }
.prof-chip.guest img { border-color: var(--line); filter: grayscale(.4); }
.adm-badge { font-style: normal; font-size: 10px; font-weight: 900; background: linear-gradient(135deg, #ffcf3f, #ff9a3c); color: #5a3b00; padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.prof-layout { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .prof-layout { grid-template-columns: 1fr; } }
.prof-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.prof-big { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--pink), var(--shadow); background: #fff; }
.prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin: 8px 0; }
.prof-stats span { display: flex; flex-direction: column; background: #faf8ff; border-radius: 12px; padding: 6px; font-size: 11px; color: var(--muted); font-weight: 700; }
.prof-stats b { font-size: 18px; color: var(--ink); }
.pic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; max-height: 420px; overflow: auto; padding: 4px; }
.pic-opt { border: 3px solid transparent; border-radius: 50%; padding: 0; background: none; cursor: pointer; aspect-ratio: 1; transition: transform .12s; }
.pic-opt img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; box-shadow: var(--shadow2); }
.pic-opt:hover { transform: scale(1.06); }
.pic-opt.sel { border-color: var(--pink); }
.showcase { display: flex; flex-wrap: wrap; gap: 14px; }
.showcase.small { gap: 6px; margin-top: 8px; }
.sc-slot { position: relative; }
.sc-x { position: absolute; top: -8px; right: -8px; z-index: 6; padding: 3px 8px; }
.sc-add { width: calc(170px * var(--cs, 1)); aspect-ratio: 5 / 7; border: 3px dashed var(--line); border-radius: 16px; background: transparent; cursor: pointer; font-size: 40px; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 800; }
.sc-add span { font-size: 13px; }
.sc-add:hover { border-color: var(--pink); color: var(--pink); }
.find-card { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.find-card img, .adm-pic { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: var(--shadow2); }
.adm-pic { width: 34px; height: 34px; }
.adm-table { overflow: auto; }
.adm-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.adm-table th { text-align: left; font-size: 12px; color: var(--muted); padding: 6px 8px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-act { display: flex; gap: 4px; }
[data-theme=dark] .prof-chip { background: #2b2640; }
[data-theme=dark] .prof-stats span { background: #2f2a45; }

/* ---------- v0.37: online PVP lobby ---------- */
.on-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #f0f6ff, #fff0f7); text-align: center; }
.on-code { font-family: var(--font2); font-size: 40px; font-weight: 900; letter-spacing: 6px; user-select: all; }
.on-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--pink); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-theme=dark] .on-wait { background: linear-gradient(135deg, #24304a, #3a2640); }

/* v0.38 avatar tooltip */
.av-tip { position: fixed; z-index: 160; max-width: 300px; background: var(--panel); color: var(--ink); border: 3px solid var(--pink); border-radius: 14px; padding: 9px 12px; box-shadow: 0 8px 26px rgba(30, 20, 60, .3); pointer-events: none; font-size: calc(14px * var(--ts, 1)); line-height: 1.4; animation: avTipIn .18s ease-out both; }
@keyframes avTipIn { from { opacity: 0; } to { opacity: 1; } }
.av-tip b { display: block; font-size: 1.05em; }
.av-tip small { display: block; opacity: .65; margin-bottom: 5px; }
.av-tip .c-eff { margin-top: 3px; }
.av-tip .c-tag { font-size: .85em; }
.av-tip-hint { margin-top: 6px; font-size: .85em; opacity: .7; }
.pcard .avatar-img, .pcard .avn { cursor: help; }

/* v0.39 collection: 3D tilt of the big card + light glare following the mouse */
.col-big.tilt { perspective: 1000px; }
.col-big.tilt > .card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ts3, 1)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; will-change: transform; }
.col-big.tilt.moving > .card { transition: transform .08s linear, box-shadow .2s; --ts3: 1.02; box-shadow: calc(var(--sx, 0) * -1px) calc(14px + var(--sy, 0) * -1px) 34px rgba(50, 30, 90, .35); }
.tilt-glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .85), rgba(255, 255, 255, .25) 25%, transparent 55%); }
.col-big.tilt.moving .tilt-glare { opacity: 1; }
body.reduce-motion .col-big.tilt > .card { transform: none !important; } body.reduce-motion .tilt-glare { display: none; }

/* v0.40 pick window: cards from the opponent's graveyard, view-only (look at the hand) */
.pick-card { position: relative; }
.pick-from { display: table; margin: 6px auto 0; background: #ff4d6d; color: #fff; font-weight: 900; font-size: 11px; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap; }
.pick-card.view-only { cursor: default; }

/* v0.41 trading */
.tile-badge { position: absolute; top: 12px; right: 12px; z-index: 2; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: #ff4d6d; color: #fff; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(255, 77, 109, .5); animation: pulse 1.4s infinite; }
.tr-count { background: #ff4d6d; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.tr-partner { align-items: flex-end; gap: 10px; margin: 14px 0; max-width: 560px; }
.tr-build { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .tr-build { grid-template-columns: 1fr; } }
.tr-colbox { background: var(--panel); border-radius: 18px; box-shadow: var(--shadow2); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tr-colbox h3 { margin: 0; }
.tr-gold { flex-direction: row !important; align-items: center; gap: 8px; } .tr-gold input { width: 110px; }
.tr-filter { width: 100%; }
.tr-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 520px; overflow: auto; padding: 4px; }
.tr-card { position: relative; cursor: pointer; border-radius: 12px; transition: transform .12s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tr-card:hover { transform: translateY(-3px); }
.tr-card.on > .card { box-shadow: 0 0 0 4px var(--mint), 0 0 16px rgba(79, 209, 165, .7); }
.tr-sel { position: absolute; top: -6px; right: -6px; z-index: 5; background: var(--mint); color: #fff; font-weight: 900; border-radius: 999px; padding: 2px 8px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.tr-avail { font-size: 11px; color: var(--muted); font-weight: 800; }
.tr-var { font-size: 10px; font-weight: 900; color: #8a45e6; max-width: 120px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-offer { background: var(--panel); border-radius: 18px; box-shadow: var(--shadow2); padding: 14px; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.tr-pic { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tr-msg { margin: 0; font-style: italic; }
.tr-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.tr-sides h4 { margin: 0 0 6px; }
.tr-arrow { font-size: 28px; align-self: center; color: var(--pink); }
.tr-line { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tr-chip { background: #f3eefc; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 800; } .tr-chip.gold { background: #fff3c4; }
.tr-minis { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-mini { position: relative; } .tr-mini .tr-card { cursor: default; } .tr-mini > b { position: absolute; top: -6px; right: -6px; background: var(--pink); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 12px; z-index: 5; }
.tr-mini .card { --cw: 90px; }
.tr-status { font-weight: 900; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: #eee; } .tr-status.s-accepted { background: #d9f7e8; color: #128a55; } .tr-status.s-declined, .tr-status.s-failed { background: #ffe0e6; color: #c22445; }
[data-theme=dark] .tr-chip { background: #3a3452; } [data-theme=dark] .tr-chip.gold { background: #4a3f1c; }

/* v0.42 main menu: 5 tiles in one row, collection as a slim full-width bar below */
@media (min-width: 1000px) { .menu-grid { grid-template-columns: repeat(5, 1fr); } }
.menu-tile.wide { grid-column: 1 / -1; min-height: 0; padding: 16px 26px; display: flex; align-items: center; gap: 18px; }
.menu-tile.wide h3 { margin: 0; font-size: 24px; padding-right: 0; }
.menu-tile.wide p { padding-right: 90px; }
.menu-tile.wide .blob { width: 120px; height: 120px; right: -24px; bottom: -40px; }
.menu-tile .blob .blob-emo { color: #fff; font-size: 40px; font-weight: 900; margin: -10px 0 0 -10px; line-height: 1; }

/* v0.43 long card names: smaller and on two lines – the name box keeps its height */
.c-name.fit1 { font-size: .86em !important; line-height: 1.65; }
.c-name.long { white-space: normal; text-overflow: clip; font-size: .7em !important; line-height: 1.02; height: 2.04em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.c-name.long2 { font-size: .6em !important; line-height: 1.2; height: 2.4em; }

/* v0.44 element symbol moved from the name bar to the type bar (left of the rarity gem) → more room for the name */
.c-type .c-tr { display: inline-flex; align-items: center; gap: .45em; flex: none; }
.c-type .c-el-wrap { display: inline-flex; }
.c-type .c-el { width: 1.45em; height: 1.45em; }
.card.sz-sm:not(.kind-unit):not(.kind-extra) .c-type .c-el { width: 1.2em; height: 1.2em; }
/* tiny cards (field, small lists) have no type bar → small element badge in the artwork corner */
.c-el-mini { display: none; position: absolute; left: .25em; top: .25em; z-index: 2; width: 1.5em; height: 1.5em; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 .05em .2em rgba(0, 0, 0, .3); place-items: center; }
.c-el-mini .c-el { width: 1.05em; height: 1.05em; }
.card.sz-xs .c-el-mini, .card.sz-f .c-el-mini { display: grid; }
.card .c-type > .c-tr::before { content: none !important; margin: 0; }

/* v0.48 Discord login */
.discord-btn { background: #5865f2 !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.discord-btn:hover { background: #4752c4 !important; }
.discord-tag { background: #e8eaff; color: #3c45a5; }
.or-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 700; margin: 4px 0; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }
h3 > svg { vertical-align: -3px; color: #5865f2; }

/* v0.49 18+ notice */
body.age-locked { overflow: hidden; }
body.age-locked #app, body.age-locked #topbar { filter: blur(14px); pointer-events: none; user-select: none; }
.age-gate { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(20, 12, 35, .72); animation: fade .25s; }
.age-box { background: var(--panel); color: var(--ink); max-width: 480px; width: 100%; border-radius: 26px; padding: 30px 28px 22px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.age-badge { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #ff4d6d, #c2185b); box-shadow: 0 0 0 6px #ffe0e6; }
.age-box h2 { margin: 6px 0 0; }
.age-box p { margin: 0; line-height: 1.5; color: var(--muted); font-weight: 600; }
.age-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; }
.age-btns .btn { width: 100%; justify-content: center; }
.age-box .lang { margin-top: 6px; }

/* v0.51 installable app (PWA) */
.pwa-bar { max-width: 1100px; margin: -10px auto 20px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow2); border: 2px dashed var(--violet); }
.pwa-bar img { width: 46px; height: 46px; border-radius: 12px; }
.pwa-bar span { flex: 1; display: flex; flex-direction: column; } .pwa-bar small { color: var(--muted); font-weight: 700; }
.pwa-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; font-weight: 900; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex: none; }
.pwa-x:hover { background: var(--line); color: var(--ink); }
.set-app { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; flex-wrap: wrap; }

/* ---------- v0.56 phones ---------- */
.phone-tools { display: none; }
.rotate-hint { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, #2a2140, #4a2e6b); color: #fff; text-align: center; }
.rot-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 320px; }
.rot-box h2 { margin: 8px 0 0; color: #fff; } .rot-box p { margin: 0; opacity: .85; font-weight: 600; line-height: 1.45; }
.rot-phone { font-size: 72px; animation: rotPhone 2.2s ease-in-out infinite; }
@keyframes rotPhone { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.rot-box .btn { margin-top: 10px; color: var(--ink); }
body.rot-open { overflow: hidden; }
/* landscape phone: compact top bar */
body.phone .topbar { padding: 6px 12px; gap: 8px; }
body.phone .topbar .logo small { display: none; }
body.phone #rulesBtn, body.phone #musicBtn { display: none; }
/* battle fills the screen exactly, no top bar, log & chat in a drawer */
body.phone.in-battle .topbar { display: none; }
body.phone .battle { grid-template-columns: 250px minmax(0, 1fr); height: calc(100vh / var(--zoom, 1)); min-height: 0; padding: 8px; gap: 10px; }
body.phone { --zw: max(40px, min(calc(112px * var(--cs, 1)), calc((100vh / var(--zoom, 1) - 175px - 146px * var(--cs, 1)) / 5.1), calc((100vw / var(--zoom, 1) - 560px) / 8.6))); }
body.phone .battle .b-right { position: fixed; top: 0; right: 0; bottom: 0; width: 330px; max-width: 85vw; z-index: 130; padding: 12px; background: var(--bg1); box-shadow: -10px 0 30px rgba(0, 0, 0, .25); transform: translateX(105%); transition: transform .25s; flex-direction: column; flex-wrap: nowrap; grid-column: auto; }
body.phone .battle .b-right.open { transform: none; }
body.phone .phone-tools { display: flex; flex-direction: column; gap: 8px; position: fixed; right: 8px; top: 8px; z-index: 140; }
body.phone .phone-tools .btn { width: 46px; height: 46px; padding: 0; font-size: 20px; border-radius: 50%; box-shadow: var(--shadow); }
body.phone .battle { grid-template-columns: 290px minmax(0, 1fr); }
body.phone .b-left .detail .card { --cw: calc(116px * var(--cs, 1)); }
body.phone .b-left .detail { min-height: 0; }
body.phone .b-left .detail-wrap { overflow: auto; justify-content: flex-start; }
body.phone .b-left .detail-wrap .muted { font-size: 12px; }
body.phone .hero { margin: 8px 0 0; } body.phone .hero h1 { font-size: 54px; } body.phone .demo-cards { display: none; }
body.phone .menu-grid { margin: 14px auto; }
/* phone: a tapped card opens big next to the board (with its actions) – tap elsewhere / cancel closes it */
body.phone .b-left .detail-wrap.has-sel { position: fixed; left: 300px; top: 50%; transform: translateY(-50%); z-index: 125; width: 300px; max-height: calc(100vh / var(--zoom, 1) - 20px); padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .97); box-shadow: 0 12px 40px rgba(40, 20, 80, .35); overflow: auto; }
body.phone .b-left .detail-wrap.has-sel .detail .card { --cw: calc(210px * var(--cs, 1)); }
[data-theme=dark] body.phone .b-left .detail-wrap.has-sel, body.phone[data-theme=dark] .b-left .detail-wrap.has-sel { background: rgba(40, 33, 60, .97); }

/* v0.59 start screen cards → collection */
.demo-btn { border: 0; padding: 0; background: none; cursor: pointer; display: block; font: inherit; }
.col-item.col-focus { animation: colFocus 1.1s ease-in-out 3; border-radius: 16px; }
@keyframes colFocus { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 126, 182, 0); transform: none; } 50% { box-shadow: 0 0 0 5px var(--pink), 0 0 26px rgba(255, 126, 182, .9); transform: translateY(-4px); } }
/* v0.61 units: the outer frame itself is a gradient black → element colour (spells/traps/structures keep their solid frame) */
.card.kind-unit:not(.foil) { border-color: transparent; background: linear-gradient(to top, #121019 0%, #231d30 28%, var(--c2) 100%) padding-box, linear-gradient(to bottom, #0b0910 0%, #2a2338 35%, var(--c2) 100%) border-box; }

/* v0.63 new triggers & battle states */
.c-tag.t-hit { background: #d6336c; } .c-tag.t-allyLost { background: #7a6a9a; } .c-tag.t-leave { background: #5a7d9a; } .c-tag.t-discarded { background: #8a7350; }
.zone .card.frozen { filter: saturate(.55) brightness(1.08); box-shadow: 0 0 0 3px #8fd8ff, 0 0 14px rgba(120, 210, 255, .9) !important; }
.zone .card.frozen::after { content: '❄'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.4em; color: #fff; text-shadow: 0 0 6px #4ab8ff; z-index: 6; pointer-events: none; }
.zone .card.guardian { box-shadow: 0 0 0 3px #ffcf3f, 0 0 10px rgba(255, 196, 0, .7); }
.zone .card.guardian::before { content: '🛡'; position: absolute; left: -.2em; top: -.3em; font-size: 1.6em; z-index: 7; pointer-events: none; }
.zone .card.stealthy { opacity: .72; }

/* ---------- v0.65: taller cards (5:8) – kind/element/rarity strip inside the artwork, bigger text box ----------
   applies to the sizes that show card text (md, lg, xl); small cards without text (sm, xs, field) stay 5:7 */
.card:is(.sz-md, .sz-lg, .sz-xl) { aspect-ratio: 5 / 8; gap: .28em; }
.card:is(.sz-md, .sz-lg, .sz-xl) > .c-type { position: relative; z-index: 3 !important; align-self: stretch; margin: -2.05em .45em .3em; background: rgba(20, 16, 32, .64) !important; color: #fff !important; text-shadow: none; border-radius: .45em; padding: .14em .5em; font-size: .62em; box-shadow: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.card:is(.sz-md, .sz-lg, .sz-xl) > .c-type .gem { box-shadow: 0 0 0 .12em rgba(255, 255, 255, .9); }
.card:is(.sz-md, .sz-lg, .sz-xl) > .c-text { font-size: calc(.76em * var(--ts, 1)); line-height: 1.28; padding: .4em .5em; }
.card:is(.sz-md, .sz-lg, .sz-xl) .c-eff { margin-bottom: .22em; }
.card-back:is(.sz-md, .sz-lg, .sz-xl), .sc-add { aspect-ratio: 5 / 8; }

/* ---------- v0.66: card text – keyword chips, one block per trigger (colour stripe + heading), bold numbers ---------- */
.c-kws { display: flex; flex-wrap: wrap; gap: .25em; margin-bottom: .3em; }
.c-kws .c-tag { margin: 0; }
.c-grp { --tc: #8a86a0; border-left: .28em solid var(--tc); background: color-mix(in srgb, var(--tc) 10%, #fff); border-radius: .2em .5em .5em .2em; padding: .2em .4em .25em; margin-bottom: .3em; }
.c-gh { font-weight: 900; color: var(--tc); font-size: .88em; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; margin-bottom: .05em; }
.c-ln { padding-left: .7em; position: relative; }
.c-ln::before { content: '›'; position: absolute; left: 0; color: var(--tc); font-weight: 900; }
.c-n { font-weight: 900; color: #1d1830; }
.c-text .c-flavor { border-top: 1px dashed #cfc9e0; padding-top: .25em; margin-top: .1em; font-size: .92em; }
.c-grp.t-summon { --tc: #e8559a; } .c-grp.t-attack { --tc: #e9472a; } .c-grp.t-reveal { --tc: #8f5cf0; } .c-grp.t-destroy { --tc: #4a3b5e; }
.c-grp.t-grave { --tc: #6d6882; } .c-grp.t-turnStart { --tc: #d99500; } .c-grp.t-turnEnd { --tc: #5b5fd6; } .c-grp.t-aura { --tc: #12998b; }
.c-grp.t-activate { --tc: #1ea85a; } .c-grp.t-oppAttack { --tc: #e23a4f; } .c-grp.t-oppSummon { --tc: #e2603a; } .c-grp.t-gameStart { --tc: #2f8de8; }
.c-grp.t-ability { --tc: #e09000; } .c-grp.t-hit { --tc: #d6336c; } .c-grp.t-allyLost { --tc: #7a6a9a; } .c-grp.t-leave { --tc: #5a7d9a; } .c-grp.t-discarded { --tc: #8a7350; }
[data-theme=dark] .c-n { color: inherit; }
/* v0.66: action window at the card on the field */
.cpop { position: fixed; z-index: 140; width: 230px; background: var(--panel, #fff); color: var(--ink, #2f2a40); border: 2.5px solid #ffcf3f; border-radius: 14px; box-shadow: 0 10px 30px rgba(40, 20, 80, .35); padding: 10px; display: flex; flex-direction: column; gap: 6px; animation: cpopIn .14s ease-out both; }
.cpop.trib { border-color: #ff7eb6; width: 250px; }
.cpop::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -10px; margin-left: -9px; border: 9px solid transparent; border-top-color: #ffcf3f; border-bottom: 0; }
.cpop.trib::after { border-top-color: #ff7eb6; }
.cpop.below::after { bottom: auto; top: -10px; border-top: 0; border-bottom: 9px solid #ffcf3f; }
.cpop.trib.below::after { border-bottom-color: #ff7eb6; }
.cpop-t { font-weight: 800; font-size: 14px; color: #6a3fd8; }
.cpop-x { font-size: 12.5px; line-height: 1.4; opacity: .9; }
.cpop .btn { width: 100%; justify-content: center; }
@keyframes cpopIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- v0.67: smooth booster opening – only transform/opacity are animated (GPU), no blur/backdrop filters,
   no animated custom properties (they repaint every frame) ---------- */
.card:is(.sz-md, .sz-lg, .sz-xl) > .c-type { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 16, 32, .72) !important; }
.bp-bg { -webkit-backdrop-filter: none; backdrop-filter: none; background: radial-gradient(circle at 50% 45%, rgba(62, 44, 110, .82), rgba(12, 6, 30, .96) 72%); }
.bp-glow { filter: none; background: radial-gradient(closest-side, var(--gc2), transparent 75%); will-change: transform, opacity; }
.glow-legendary .bp-glow { filter: none; -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%); mask: radial-gradient(closest-side, #000 35%, transparent 100%); }
@keyframes bpFlash { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(2.4); } 100% { opacity: 0; transform: scale(3.2); } }
.bp-pack { will-change: transform; }
.bp-shine { background: none; }
.bp-shine::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 260%; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 60%); animation: bpShine2 2.8s ease-in-out infinite; will-change: transform; }
@keyframes bpShine2 { 0% { transform: translateX(-61.5%); } 60%, 100% { transform: translateX(0%); } }
/* rotating rainbow rings: a big conic square spins inside a rounded, clipped frame */
.glow-legendary .bp-pack::before, .bp-card.flipped.r-legendary .bp-front::before, .bp-card.special.flipped .bp-front::before { content: none; }
.bp-ring { position: absolute; inset: -5px; border-radius: 1.1em; overflow: hidden; z-index: -1; display: none; pointer-events: none; }
.bp-ring::before { content: ''; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; margin: -100% 0 0 -100%; background: conic-gradient(#ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #7a5cff, #ff4dd8, #ff4d6d); animation: bpRing 2.5s linear infinite; will-change: transform; }
.bp-pack > .bp-ring { border-radius: 22px; }
.glow-legendary .bp-pack > .bp-ring, .bp-card.flipped.r-legendary .bp-ring, .bp-card.special.flipped .bp-ring { display: block; }
.bp-card.special .bp-ring { inset: -6px; }
@keyframes bpRing { to { transform: rotate(360deg); } }
.bp-card { will-change: transform, opacity; }
.bp-inner { will-change: transform; }
/* deal: cards fly out of the pack (start position set from JS), then settle */
.bp-card { transition: transform .7s cubic-bezier(.18, 1.15, .35, 1), opacity .3s; transition-delay: calc(var(--i) * 70ms); }
/* the back of a better card shimmers in its rarity colour when you point at it – a little teaser before the flip */
.bp-card.dealt:not(.flipped).r-rare:hover .bp-backface .card { box-shadow: 0 0 0 3px #4aa8ff, 0 0 22px 6px rgba(74, 168, 255, .7); }
.bp-card.dealt:not(.flipped).r-epic:hover .bp-backface .card { box-shadow: 0 0 0 3px #a35bff, 0 0 26px 8px rgba(163, 91, 255, .75); }
.bp-card.dealt:not(.flipped).r-legendary:hover .bp-backface .card, .bp-card.dealt:not(.flipped).special:hover .bp-backface .card { box-shadow: 0 0 0 3px #ffd84a, 0 0 30px 10px rgba(255, 150, 230, .75); }
.bp-card.dealt:not(.flipped):hover { transform: translateY(-10px) scale(1.04); transition: transform .2s ease-out; transition-delay: 0s; }
/* sparkles for epic / legendary / special reveals */
.bp-spark { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--sc, #fff); pointer-events: none; z-index: 6; animation: bpSpark .9s cubic-bezier(.15, .7, .3, 1) forwards; will-change: transform, opacity; }
@keyframes bpSpark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
/* foil: the rainbow and the sheen move with transform instead of background-position (no repaint per frame) */
.card > .c-foil::before { inset: -100% -220% -100% -100%; background-size: 26.2% 100%; animation: foilShift2 6s linear infinite; will-change: transform; }
@keyframes foilShift2 { from { transform: rotate(-25deg) translateX(0); } to { transform: rotate(-25deg) translateX(-26.2%); } }
.card > .c-foil::after { right: auto; width: 300%; background-size: auto; animation: foilSheen2 4s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform; }
@keyframes foilSheen2 { 0%, 15% { transform: translateX(-60%); } 65%, 100% { transform: translateX(-6.67%); } }
@media (prefers-reduced-motion: reduce) { .bp-ring::before, .bp-shine::before { animation: none; } }

/* ---------- v0.68: smoother windows, graveyard effect box, empty-deck skull card, phase menu ---------- */
/* modals: no blur behind (re-rendered every frame while fading), only opacity + transform */
.modal-back { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(40, 26, 66, .5); animation: mbIn .18s ease-out both; }
[data-theme=dark] .modal-back { background: rgba(5, 3, 15, .68); }
.modal { animation: mIn .26s cubic-bezier(.2, 1.1, .35, 1) both; will-change: transform, opacity; }
@keyframes mbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.cpop.phase-menu { width: 210px; border-color: #a888ff; }
.cpop.phase-menu::after { content: none; }
.fx-gtoast { position: fixed; width: 250px; transform: translate(-50%, 0); display: flex; gap: 8px; align-items: flex-start; background: rgba(28, 20, 46, .94); color: #fff; border: 2px solid #a888ff; border-radius: 14px; padding: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); animation: gtIn .3s cubic-bezier(.2, 1.3, .4, 1) both; will-change: transform, opacity; }
.fx-gtoast.up { transform: translate(-50%, -100%); animation-name: gtInUp; }
.fx-gtoast.out { opacity: 0; transition: opacity .35s; }
.fx-gt-card .card { --cw: 58px; }
.fx-gt-body { display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.35; min-width: 0; }
.fx-gt-body b { font-size: 13px; } .fx-gt-body .c-tag { align-self: flex-start; font-size: 10.5px; }
.fx-gt-body small { opacity: .9; }
@keyframes gtIn { from { opacity: 0; transform: translate(-50%, -14px) scale(.6); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes gtInUp { from { opacity: 0; transform: translate(-50%, -80%) scale(.6); } to { opacity: 1; transform: translate(-50%, -100%); } }
.fx-fatigue { position: fixed; width: 150px; margin-left: -75px; margin-top: -120px; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: fatIn 2.2s cubic-bezier(.25, .8, .3, 1) both; will-change: transform, opacity; }
.fx-fat-card { position: relative; width: 150px; aspect-ratio: 5 / 8; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 3px #b892ff, 0 0 40px 10px rgba(150, 90, 255, .55), 0 16px 40px rgba(0, 0, 0, .5); }
.fx-fat-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-fat-n { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); font-family: var(--font2); font-size: 46px; font-weight: 900; color: #ff5a6a; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 60, 90, .9); }
.fx-fat-t { color: #fff; font-weight: 900; font-size: 18px; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
@keyframes fatIn { 0% { opacity: 0; transform: translateY(40px) scale(.4) rotate(-8deg); } 18% { opacity: 1; transform: translateY(0) scale(1.08) rotate(2deg); } 28% { transform: scale(1) rotate(0); } 70% { opacity: 1; transform: translateY(-22px); } 100% { opacity: 0; transform: translateY(-70px) scale(.9); } }

/* ---------- v0.69: 6 zones per row; extra deck + avatar on the left, graveyard + deck on the right of the field ---------- */
.sslot { position: relative; flex: none; width: calc(var(--zw) * .92); align-self: center; margin: 0 10px; border: 0; padding: 0 0 5px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font: inherit; color: inherit; }
.zone.bz ~ .sslot, .zrow > .sslot:first-child { }
.zrow .sslot.sx, .zrow .sslot.sg { height: calc(var(--zw) * 1.4 * .92); }
.zrow .sslot.sd, .zrow .sslot.sa { height: calc(var(--zw) * 1.05 * .92); }
.sslot .ss-card { --cw: calc(var(--zw) * .66) !important; position: absolute; top: 7%; left: 50%; transform: translateX(-50%); box-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(0, 0, 0, .18); }
.sslot.sd .ss-card { --cw: calc(var(--zw) * .44) !important; top: 6%; }
.sslot .ss-empty { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 60%; height: 62%; border-radius: 8px; border: 2px dashed rgba(255, 255, 255, .55); }
.sslot > b { position: relative; z-index: 1; font-size: clamp(8px, calc(var(--zw) * .1), 11px); font-weight: 900; background: #fff; color: #3a2f5a; border-radius: 999px; padding: 1px 7px; white-space: nowrap; max-width: 112%; overflow: hidden; text-overflow: ellipsis; }
.sslot .ss-n { position: absolute; top: -8px; left: -8px; font-style: normal; background: #2f2a40; color: #fff; font-weight: 900; font-size: 12px; min-width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; border: 2px solid #fff; z-index: 2; padding: 0 4px; }
.sslot .ss-ready { position: absolute; top: -8px; right: -8px; font-style: normal; background: #ffcf3f; color: #5a3b00; font-weight: 900; font-size: 12px; min-width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; border: 2px solid #fff; z-index: 2; }
.sslot.sg { cursor: pointer; background: linear-gradient(160deg, rgba(74, 65, 96, .94), rgba(35, 28, 54, .96)); box-shadow: 0 0 0 3px #9b8cc4, 0 0 12px 2px rgba(155, 140, 196, .45); }
.sslot.sx { cursor: default; background: linear-gradient(160deg, #fff3c4, #f0b43c); box-shadow: 0 0 0 3px #ffcf3f, 0 0 12px 2px rgba(255, 200, 60, .45); }
.sslot.sx.mine { cursor: pointer; }
.sslot.sx.ready { animation: xglow 1.4s ease-in-out infinite; }
.sslot.sd { background: linear-gradient(160deg, #ffd6ea, #b7a4ff); box-shadow: 0 0 0 3px #fff, 0 0 12px 2px rgba(183, 164, 255, .5); }
.sslot.sg:hover, .sslot.sx.mine:hover { transform: translateY(-3px); }
.sslot.sg, .sslot.sx { transition: transform .15s; }
.sslot.sa { background: none; padding: 0; justify-content: center; }
.sslot.sa img { width: min(100%, calc(var(--zw) * 1.05 * .92)); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #fff; box-shadow: 0 0 0 3px #ff7eb6, 0 0 12px 3px rgba(255, 126, 182, .5); }
.sslot.sa.opp img { box-shadow: 0 0 0 3px #7a8cff, 0 0 12px 3px rgba(122, 140, 255, .5); }
.sslot.sa > b { position: absolute; bottom: -7px; font-size: clamp(7.5px, calc(var(--zw) * .085), 10px); padding: 1px 6px; }
.sslot.sa em { position: absolute; top: -6px; right: -8px; font-style: normal; background: #fff; border-radius: 12px; min-width: 22px; height: 22px; padding: 0 3px; display: grid; place-items: center; font-size: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.sslot.sa.can-ability { cursor: pointer; }
.sslot.sa.can-ability img { box-shadow: 0 0 0 3px #ffcf3f, 0 0 16px 5px rgba(255, 200, 60, .75); animation: xglow 1.4s ease-in-out infinite; }
.pcard .avn.pid { color: var(--muted, #8a86a0); font-weight: 800; letter-spacing: .03em; }
[data-theme=dark] .sslot > b { background: #2f2a45; color: #f1ecff; }
.sslot.sa { justify-content: flex-start; padding-top: 2px; }
.sslot.sa img { width: calc(var(--zw) * 1.05 * .92 * .8); }
.sslot.sa > b { bottom: 0; }
/* v0.70: graveyard / extra deck window – cards grow when you point at them */
.pile-grid { padding: 40px 30px; gap: 18px; justify-content: center; }
.pile-grid > .col { position: relative; transition: transform .18s ease-out; will-change: transform; }
.pile-grid > .col:hover { transform: scale(1.4); z-index: 5; }
.pile-grid > .col:hover .card { box-shadow: 0 14px 36px rgba(40, 20, 80, .45); }
.pick-grid .pick-card:hover { transform: translateY(-6px) scale(1.25); z-index: 5; }
/* v0.72: empty deck that heals, alternative victory banner, hyper quick chip */
.fx-fatigue.heal .fx-fat-card { box-shadow: 0 0 0 3px #7be3a0, 0 0 40px 10px rgba(90, 220, 140, .6), 0 16px 40px rgba(0, 0, 0, .5); }
.fx-fatigue.heal .fx-fat-n { color: #2fd27a; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(60, 220, 130, .9); }
.fx-altwin { position: fixed; transform: translate(-50%, -50%); z-index: 3; animation: altWin 2.5s cubic-bezier(.2, 1.2, .3, 1) both; will-change: transform, opacity; }
.fx-altwin b { display: block; white-space: nowrap; font-family: var(--font2); font-size: 44px; font-weight: 900; color: #fff; padding: 14px 34px; border-radius: 26px; background: linear-gradient(135deg, #ffcf3f, #ff8a3c 45%, #ff5a8a); box-shadow: 0 0 0 4px #fff, 0 0 60px 16px rgba(255, 200, 60, .65), 0 20px 50px rgba(0, 0, 0, .4); text-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
@keyframes altWin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-6deg); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(2deg); } 30% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.04); } }

/* ---------- v0.73: effect builder in the secret editor ---------- */
.ef-card { background: #fff; border: 2px solid #ece6f8; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.ef-head { display: flex; align-items: flex-start; gap: 10px; }
.ef-head > b { font-size: 14px; white-space: nowrap; padding-top: 5px; }
.ef-prev { flex: 1; font-size: 13px; line-height: 1.45; background: #faf8ff; border-radius: 10px; padding: 6px 9px; min-height: 30px; }
.ef-crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ef-crumb button { border: 0; font: inherit; font-size: 12px; font-weight: 800; color: #6a5a8a; background: #f1ecff; border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.ef-crumb button.cur { background: #6a3fd8; color: #fff; }
.ef-crumb button.off { opacity: .45; cursor: default; }
.ef-crumb i { font-style: normal; color: #b0a8c8; font-weight: 900; }
.ef-step h4 { margin: 0 0 8px; font-size: 14px; color: #6a3fd8; }
.ef-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ef-group > span { width: 100%; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #8a86a0; }
.ef-chip { display: inline-flex; align-items: center; gap: 8px; border: 2px solid #e6e0f5; background: #fff; border-radius: 12px; padding: 6px 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.ef-chip:hover { border-color: #b9a6f0; transform: translateY(-1px); }
.ef-chip b { display: block; font-size: 13px; }
.ef-chip small { display: block; font-size: 11px; color: #8a86a0; line-height: 1.3; }
.ef-chip.on { border-color: #6a3fd8; background: #f3eeff; box-shadow: 0 0 0 3px rgba(106, 63, 216, .15); }
.ef-ic { font-size: 18px; flex: none; }
.ef-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.ef-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ef-tabs button { border: 0; font: inherit; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #f1ecff; color: #5a4a80; cursor: pointer; }
.ef-tabs button.on { background: #ff7eb6; color: #fff; }
.ef-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ef-fields .wide { grid-column: 1 / -1; }
.ef-more { margin-top: 8px; border: 0; background: none; color: #6a3fd8; font: inherit; font-weight: 800; cursor: pointer; padding: 0; }
[data-theme=dark] .ef-card { background: #2b2540; border-color: #3d3558; }
[data-theme=dark] .ef-prev { background: #352e4d; }
[data-theme=dark] .ef-chip { background: #322b49; border-color: #463d64; }
[data-theme=dark] .ef-chip.on { background: #44386b; border-color: #a888ff; }
[data-theme=dark] .ef-crumb button, [data-theme=dark] .ef-tabs button { background: #3d3558; color: #e6defc; }
.ef-fields .tok-art { display: flex; gap: 14px; align-items: center; }
.c-tag.t-revived { background: #c0408f; } .c-tag.t-graveEnd { background: #5d567a; }
.c-grp.t-revived { --tc: #c0408f; } .c-grp.t-graveEnd { --tc: #5d567a; }
/* v0.78: controller focus in the booster opening */
.bp-pack.pad-focus { outline: none !important; box-shadow: 0 0 0 5px #3b9bff, 0 0 30px 8px rgba(59, 155, 255, .7) !important; }
.bp-card.pad-focus { outline: none !important; box-shadow: none !important; }
.bp-card.dealt:not(.flipped).pad-focus { transform: translateY(-10px) scale(1.04); }
.bp-card.pad-focus .bp-face .card { box-shadow: 0 0 0 4px #3b9bff, 0 0 24px 6px rgba(59, 155, 255, .7) !important; }
.bp-overlay.done .bp-card.flipped.pad-focus { z-index: 5; }
.bp-overlay.done .bp-card.flipped.pad-focus .bp-inner { transform: rotateY(180deg) scale(1.35); transition: transform .2s; }
/* v0.79: chosen tributes / materials are clearly marked (pink veil, check mark and number), also while the controller focus is on them */
.zone .card.tribsel::after { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; font-weight: 900; font-size: 1.9em; color: #fff; background: rgba(255, 70, 140, .42); text-shadow: 0 2px 6px rgba(120, 0, 50, .6); border-radius: inherit; pointer-events: none; }
.zone .card.tribsel.tn1::after { content: '✓ 1'; } .zone .card.tribsel.tn2::after { content: '✓ 2'; } .zone .card.tribsel.tn3::after { content: '✓ 3'; } .zone .card.tribsel.tn4::after { content: '✓ 4'; }
.zone .card.tribsel { box-shadow: 0 0 0 4px #ff3d8b, 0 0 20px 4px rgba(255, 61, 139, .85) !important; }
.zone .card.tribsel.pad-focus { box-shadow: 0 0 0 4px #ff3d8b, 0 0 0 8px #3b9bff, 0 0 24px 6px rgba(59, 155, 255, .7) !important; }
.zone .card.selectable.pad-focus { box-shadow: 0 0 0 3px var(--sun), 0 0 0 7px #3b9bff, 0 0 22px rgba(59, 155, 255, .6) !important; }
.zone .card.tribsel::after { font-size: calc(var(--cw) * .3); background: rgba(255, 60, 135, .5); }