/* ═══════════════ ARENA (sidebar-shell page, specs/arena-mode.md §8) ═══════════════
   The Arena is its own thing: ember + gold on charcoal, bevelled "forged" buttons, a cinematic pack
   hero and a prize gauntlet — deliberately not the store's product-listing look. */

:root {
    --ar-ember: #ff6a00;
    --ar-gold: #ffbf00;
    --ar-pale: #ffe28a;
    --ar-ink: #1a0d00;
    --ar-line: rgba(255, 130, 0, 0.35);
    --ar-panel: linear-gradient(180deg, rgba(30, 13, 6, 0.92) 0%, rgba(11, 8, 8, 0.94) 100%);
}

main { padding: 12px 16px 16px; box-sizing: border-box; }

/* ── panels ── */
.arena-card { background: var(--ar-panel); border: 1px solid var(--ar-line); border-radius: 16px; padding: 20px 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,191,0,0.08); box-sizing: border-box; }
.arena-section-title { font-family: 'DragonSlayer', 'HwyGothic', sans-serif; color: var(--ar-gold); letter-spacing: 3px; font-size: 1.1rem; margin: 0 0 12px; text-shadow: 0 0 12px rgba(255,120,0,0.35); }

/* ── forged buttons ── */
.arena-btn { position: relative; height: auto; /* override global button height */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-family: 'HwyGothic', sans-serif; letter-spacing: 2px; font-size: 0.8rem; color: var(--ar-ink); text-decoration: none; background: linear-gradient(180deg, #ffd45a 0%, #ffb300 45%, #ff7a00 100%); border: 1px solid rgba(255, 225, 140, 0.9); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(120,40,0,0.45), 0 4px 0 #7a2e00, 0 8px 22px rgba(255,110,0,0.35); text-shadow: 0 1px 0 rgba(255,255,255,0.35); cursor: pointer; overflow: hidden; transition: transform .12s, box-shadow .12s, filter .2s; }
.arena-btn::after { content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); pointer-events: none; }
.arena-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(120,40,0,0.45), 0 5px 0 #7a2e00, 0 12px 28px rgba(255,120,0,0.5); }
.arena-btn:hover:not(:disabled)::after { animation: ar-sheen .7s ease; }
.arena-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 #7a2e00, 0 4px 12px rgba(255,110,0,0.3); }
.arena-btn:disabled { filter: grayscale(0.7) brightness(0.6); cursor: default; transform: none; box-shadow: 0 2px 0 #3a1a08; }
.arena-btn i { font-size: 0.95em; }
@keyframes ar-sheen { from { left: -130%; } to { left: 160%; } }
.arena-btn-ghost { color: var(--ar-gold); background: linear-gradient(180deg, rgba(48, 22, 10, 0.95), rgba(18, 11, 9, 0.98)); border-color: rgba(255, 140, 0, 0.5); box-shadow: inset 0 1px 0 rgba(255,191,0,0.15), 0 3px 0 #2a1206, 0 6px 16px rgba(0,0,0,0.45); text-shadow: none; }
.arena-btn-ghost:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,191,0,0.2), 0 4px 0 #2a1206, 0 8px 20px rgba(255,120,0,0.25); border-color: rgba(255,191,0,0.8); }
.arena-btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(255,191,0,0.25), transparent); }
.arena-btn-danger { color: #ffb0a0; border-color: rgba(255, 90, 60, 0.55); background: linear-gradient(180deg, rgba(70, 18, 12, 0.95), rgba(24, 10, 9, 0.98)); box-shadow: inset 0 1px 0 rgba(255,120,100,0.15), 0 3px 0 #3a0e08, 0 6px 16px rgba(0,0,0,0.45); text-shadow: none; }
.arena-btn-danger:hover:not(:disabled) { border-color: #ff6a50; box-shadow: 0 4px 0 #3a0e08, 0 8px 20px rgba(255,80,50,0.3); }
.arena-btn-big { padding: 14px 26px; font-size: 0.95rem; }
.arena-btn-hero { flex-direction: column; gap: 2px; padding: 14px 32px; font-size: 1rem; letter-spacing: 3px; border-radius: 14px; animation: ar-pulse 2.4s ease-in-out infinite; }
.arena-btn-hero:disabled { animation: none; }
.arena-btn-sub { font-size: 0.72rem; letter-spacing: 1.5px; opacity: 0.85; }
.arena-btn-sub:not(:empty)::before { content: '\1F48E\00a0'; }
@keyframes ar-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(120,40,0,0.45), 0 4px 0 #7a2e00, 0 8px 22px rgba(255,110,0,0.35); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(120,40,0,0.45), 0 4px 0 #7a2e00, 0 10px 36px rgba(255,120,0,0.7); } }

/* ── gate ── */

/* ── shell ── */
.arena-shell { display: flex; gap: 20px; width: 100%; max-width: 1560px; min-width: 0; box-sizing: border-box; margin: 0 auto; text-align: left; }
.arena-sidebar { position: sticky; top: 140px; flex: 0 0 230px; height: calc(100vh - 242px); display: flex; flex-direction: column; background: var(--ar-panel); border: 1px solid var(--ar-line); border-radius: 14px; padding: 14px 10px; box-sizing: border-box; }
.arena-nav { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; }
.arena-nav-group + .arena-nav-group { margin-top: 14px; }
.arena-nav-group-label { font-family: 'HwyGothic', sans-serif; letter-spacing: 2px; font-size: 0.7rem; color: rgba(255,191,0,0.5); padding: 6px 10px 4px; text-transform: uppercase; }
.arena-tab, .arena-step { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; /* override global button height */ padding: 10px 12px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: rgba(240,236,230,0.8); font-family: 'HwyGothic', sans-serif; font-size: 0.85rem; letter-spacing: 1px; cursor: pointer; text-align: left; transition: background .15s, border-color .15s; }
.arena-tab:hover, .arena-step:hover:not(:disabled) { background: rgba(255,120,0,0.08); color: var(--ar-gold); }
.arena-tab.active, .arena-step.active { background: linear-gradient(90deg, rgba(255,110,0,0.22), rgba(255,191,0,0.08)); border-color: rgba(255,140,0,0.45); color: var(--ar-gold); box-shadow: inset 3px 0 0 var(--ar-ember); }
.arena-tab i { width: 18px; text-align: center; }
.arena-step-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,191,0,0.5); font-family: 'DragonSlayer', serif; font-size: 0.8rem; color: var(--ar-gold); flex: 0 0 24px; }
.arena-step.done .arena-step-num { background: linear-gradient(180deg, #ffd45a, #ff8a00); color: var(--ar-ink); border-color: var(--ar-pale); }
.arena-step.active .arena-step-num { background: linear-gradient(180deg, #ffd45a, #ff8a00); color: var(--ar-ink); border-color: var(--ar-pale); box-shadow: 0 0 12px rgba(255,140,0,0.8); }
.arena-step:disabled { opacity: 0.35; cursor: default; }
.arena-sidebar-foot { margin-top: auto; padding: 10px; border-top: 1px solid rgba(255,140,0,0.15); font-size: 0.78rem; color: rgba(240,236,230,0.6); }
.arena-foot-line { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.arena-foot-line b { color: var(--ar-gold); }
.arena-foot-line b.gem-pill { font-size: 0.68rem; padding: 1px 8px; }
.arena-sound { height: auto; /* override global button height */ margin-top: 8px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(255,120,0,0.08); border: 1px solid rgba(255,140,0,0.25); border-radius: 8px; color: var(--ar-gold); font-family: 'HwyGothic', sans-serif; font-size: 0.7rem; letter-spacing: 1px; cursor: pointer; }
.arena-sound.off { color: rgba(240,236,230,0.45); background: transparent; }
.arena-sound i { width: 16px; text-align: center; }
.arena-content-col { flex: 1; min-width: 0; }
.arena-topbar { display: flex; align-items: center; gap: 14px; padding: 0 4px 8px; flex-wrap: wrap; }
.arena-heading { font-family: 'DragonSlayer', 'HwyGothic', sans-serif; font-size: 2rem; margin: 0; letter-spacing: 3px; background: linear-gradient(180deg, var(--ar-pale), #ff9d1a 55%, #ff5a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255,120,0,0.4)); }
.arena-stepline { font-family: 'HwyGothic', sans-serif; letter-spacing: 2px; color: rgba(255,191,0,0.5); font-size: 0.8rem; }
.arena-page { display: flex; flex-direction: column; gap: 14px; }
.arena-panel { display: none; }
.arena-panel.active { display: block; }
.arena-stepbar { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* ── shared bits ── */
.arena-notice { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 14px 16px; color: rgba(240,236,230,0.8); }
.arena-notice a { color: var(--ar-gold); }
.arena-hint { color: rgba(240,236,230,0.65); font-size: 0.85rem; margin: 0 0 12px; }
.arena-msg { min-height: 1.2em; font-size: 0.85rem; color: #9be39b; margin-top: 8px; }
.arena-msg-error { color: #ff7a7a; }
.arena-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 0.85rem; color: rgba(240,236,230,0.65); }
.arena-kv b { color: var(--ar-gold); font-weight: 700; }
.arena-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.arena-actions-center { justify-content: center; }
.arena-select { background: #161010; color: #f0ece6; border: 1px solid var(--ar-line); border-radius: 8px; padding: 6px 10px; font-family: 'HwyGothic', sans-serif; }
.arena-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.88rem; }
.arena-table th { text-align: left; color: rgba(255,191,0,0.5); font-weight: normal; letter-spacing: 1px; font-size: 0.72rem; padding: 6px 10px; border-bottom: 1px solid rgba(255,140,0,0.2); }
.arena-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.arena-table tr.me td { color: var(--ar-gold); }
.arena-empty { color: rgba(240,236,230,0.5); text-align: center; padding: 18px; }

/* site rarity colours (store.css) */
.rarity-COMMON   { --rar: #9e9e9e; }
.rarity-UNCOMMON { --rar: #4caf50; }
.rarity-RARE     { --rar: #2196f3; }
.rarity-EPIC     { --rar: #ab47bc; }
.rarity-ANCIENT  { --rar: #ff9800; }

/* ── 1 · pack hero — one card, sized so Pack fits a laptop viewport without scrolling ── */
.arena-hero { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 24px 12px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 20% 45%, rgba(255,110,0,0.34), transparent 48%), radial-gradient(ellipse at 92% 0%, rgba(255,191,0,0.14), transparent 38%), var(--ar-panel); border: 1px solid var(--ar-line); box-shadow: 0 14px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,191,0,0.1); }
.arena-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,140,0,0.03) 22px 24px); pointer-events: none; }
.arena-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, rgba(255,90,0,0.18), transparent 55%); pointer-events: none; }
.arena-hero-main { position: relative; display: grid; grid-template-columns: 215px 1fr; gap: 28px; align-items: center; }
.arena-hero-box { position: relative; width: 215px; padding-top: 6px; perspective: 900px; }
.arena-hero-box::before { content: ''; position: absolute; inset: 4% -10% 20%; border-radius: 50%; background: radial-gradient(circle, rgba(255,130,0,0.6), rgba(255,60,0,0.18) 55%, transparent 72%); filter: blur(22px); animation: ar-glow 3s ease-in-out infinite; }
#arena-box-art { position: relative; z-index: 2; width: 100%; display: block; filter: drop-shadow(0 22px 26px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(255,120,0,0.45)); animation: ar-float 4.5s ease-in-out infinite; }
.arena-hero-box:hover #arena-box-art { animation-play-state: paused; transform: translateY(-6px) rotateY(-10deg) rotateX(4deg) scale(1.03); transition: transform .35s ease; }
.arena-hero-floor { position: absolute; left: 6%; right: 6%; bottom: 10px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,140,0,0.6), rgba(255,80,0,0.22) 50%, transparent 72%); filter: blur(10px); z-index: 0; animation: ar-glow 3s ease-in-out infinite; }
/* reflection: the same art flipped, clipped to its first 54px (= the box's bottom edge) and faded out downward */
.arena-hero-reflect { position: relative; z-index: 1; height: 66px; margin-top: -3px; overflow: hidden; opacity: 0.75; filter: blur(0.6px) brightness(1.15); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.35) 45%, transparent 92%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.35) 45%, transparent 92%); pointer-events: none; }
.arena-hero-reflect img { width: 100%; display: block; transform: scaleY(-1); animation: ar-float-reflect 4.5s ease-in-out infinite; }
.arena-ember { position: absolute; bottom: 22%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px rgba(255,140,0,0.8); opacity: 0; z-index: 3; animation: ar-ember 4s ease-out infinite; pointer-events: none; }
.arena-ember:nth-child(4) { left: 18%; animation-delay: 0s; animation-duration: 4.2s; }
.arena-ember:nth-child(5) { left: 34%; animation-delay: 1.1s; width: 3px; height: 3px; animation-duration: 3.6s; }
.arena-ember:nth-child(6) { left: 52%; animation-delay: 2.1s; animation-duration: 4.8s; }
.arena-ember:nth-child(7) { left: 68%; animation-delay: 0.6s; width: 4px; height: 4px; animation-duration: 3.9s; }
.arena-ember:nth-child(8) { left: 84%; animation-delay: 1.7s; width: 3px; height: 3px; animation-duration: 4.4s; }
@keyframes ar-ember { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-14px, -200px) scale(1.1); opacity: 0; } }
.arena-hero-flash { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, #fff6d0, rgba(255,191,0,0.6) 35%, transparent 70%); opacity: 0; pointer-events: none; z-index: 4; }
@keyframes ar-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(1.2deg); } }
@keyframes ar-float-reflect { 0%, 100% { transform: scaleY(-1) translateY(0); opacity: 1; } 50% { transform: scaleY(-1) translateY(-8px); opacity: 0.7; } }
@keyframes ar-glow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.arena-hero.tearing #arena-box-art { animation: ar-tear 0.9s cubic-bezier(.6,-0.2,.8,1) forwards; }
.arena-hero.tearing .arena-hero-flash { animation: ar-flash 0.9s ease-out forwards; }
@keyframes ar-tear { 0% { transform: scale(1) rotate(0); filter: brightness(1); } 35% { transform: scale(1.06) rotate(-3deg); filter: brightness(1.4); } 55% { transform: scale(1.1) rotate(3deg); filter: brightness(2); } 100% { transform: scale(1.7); opacity: 0; filter: brightness(3); } }
@keyframes ar-flash { 0% { opacity: 0; transform: scale(0.4); } 55% { opacity: 0; } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
.arena-hero-copy { position: relative; min-width: 0; }
.arena-hero-kicker { font-family: 'HwyGothic', sans-serif; letter-spacing: 3px; font-size: 0.7rem; color: rgba(255,191,0,0.65); margin-bottom: 2px; }
.arena-hero-title { font-family: 'DragonSlayer', 'HwyGothic', sans-serif; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; letter-spacing: 8px; margin: 0 0 10px; background: linear-gradient(100deg, var(--ar-pale) 0%, #ff9d1a 40%, #ff5a00 60%, var(--ar-pale) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,120,0,0.45)) drop-shadow(0 4px 0 rgba(0,0,0,0.6)); animation: ar-shimmer 6s linear infinite; }
@keyframes ar-shimmer { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
.arena-hero-text { color: rgba(240,236,230,0.88); margin: 0 0 12px; line-height: 1.45; max-width: 560px; }
.arena-hero-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-family: 'HwyGothic', sans-serif; letter-spacing: 1px; font-size: 0.75rem; color: rgba(240,236,230,0.6); }
.arena-hero-meta b { color: var(--ar-gold); font-size: 0.9rem; margin-left: 4px; }
.arena-hero-meta b::before { content: '\1F48E\00a0'; font-size: 0.75rem; }
.arena-blocked { margin-top: 8px; color: #ff9a6a; font-size: 0.85rem; }
.arena-odds { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.arena-odds li { font-size: 0.76rem; color: rgba(240,236,230,0.85); padding: 5px 12px; border: 1px solid rgba(255,140,0,0.3); border-radius: 999px; background: rgba(255,120,0,0.07); }
.arena-odds li::before { content: '\2726\00a0'; color: var(--ar-gold); }
/* the prize ladder row: a small horizontal label, then the 0→7 path */
.arena-hero-gauntlet { position: relative; border-top: 1px solid rgba(255,140,0,0.2); padding-top: 8px; }
.arena-hero-gauntlet .arena-section-title { margin: 0 0 4px 4px; font-size: 0.72rem; letter-spacing: 3px; opacity: 0.8; text-shadow: none; line-height: 1; }
.arena-hero-gauntlet .arena-gauntlet { padding: 2px 0 0; }

/* the prize ladder */
.arena-gauntlet { display: flex; align-items: flex-start; overflow-x: auto; padding: 8px 0 2px; }
.ar-node { position: relative; flex: 1 1 0; min-width: 64px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.ar-node::before { content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px; background: linear-gradient(90deg, rgba(255,120,0,0.15), rgba(255,140,0,0.45)); }
.ar-node:first-child::before { display: none; }
.ar-node.done::before { background: linear-gradient(90deg, var(--ar-ember), var(--ar-gold)); box-shadow: 0 0 8px rgba(255,140,0,0.6); }
.ar-node-ring { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,191,0,0.5); background: #170b05; font-family: 'DragonSlayer', serif; font-size: 1.05rem; color: var(--ar-gold); box-shadow: 0 0 10px rgba(255,120,0,0.25); transition: transform .2s; }
.ar-node.done .ar-node-ring { background: linear-gradient(180deg, #ffd45a, #ff8a00); color: var(--ar-ink); border-color: var(--ar-pale); }
.ar-node.here .ar-node-ring { transform: scale(1.18); box-shadow: 0 0 18px rgba(255,140,0,0.9); }
.ar-node.final .ar-node-ring { border-color: var(--ar-ember); box-shadow: 0 0 14px rgba(255,110,0,0.5); }
.ar-node.final .ar-node-ring::after { content: '\1F451'; position: absolute; top: -16px; font-size: 0.85rem; }
.ar-node-treasure { font-family: 'HwyGothic', sans-serif; letter-spacing: 1px; font-size: 0.82rem; color: var(--ar-gold); }
.ar-node-treasure::before { content: '\1F48E\00a0'; font-size: 0.7rem; }
.ar-node-chest { font-size: 0.66rem; letter-spacing: 0.5px; color: var(--rar, #9e9e9e); font-family: 'HwyGothic', sans-serif; }
.ar-node:not(.done) .ar-node-treasure, .ar-node:not(.done) .ar-node-chest { opacity: 0.75; }
.arena-gauntlet-run .ar-node:not(.done) .ar-node-treasure, .arena-gauntlet-run .ar-node:not(.done) .ar-node-chest { opacity: 0.45; }

/* ── 2 · reveal ── */
.arena-reveal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; align-items: start; }
.ar-card { perspective: 900px; cursor: pointer; }
.ar-card-inner { position: relative; aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.2,1); border-radius: 8px; }
.ar-card.flipped .ar-card-inner { transform: rotateY(180deg); }
.ar-card-back, .ar-card-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 8px; overflow: hidden; }
.ar-card-back { background: radial-gradient(circle at 50% 35%, #3a1500 0%, #170800 60%, #0a0400 100%); border: 2px solid rgba(255,140,0,0.55); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 30px rgba(255,120,0,0.35); }
.ar-card-back img { width: 70%; opacity: 0.9; }
.ar-card:not(.flipped):hover .ar-card-inner { transform: translateY(-4px) rotateY(0); box-shadow: 0 8px 20px rgba(255,140,0,0.3); }
.ar-card-front { transform: rotateY(180deg); background: #111; border: 2px solid rgba(255,255,255,0.12); }
.ar-card-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-card-name { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,0.85)); color: #f0ece6; font-family: 'HwyGothic', sans-serif; font-size: 0.6rem; letter-spacing: 1px; padding: 10px 4px 4px; text-align: center; }
.ar-card-skin-tag { position: absolute; top: 0; left: 0; right: 0; background: var(--rar, #9e9e9e); color: #0e0e0e; font-family: 'HwyGothic', sans-serif; font-size: 0.55rem; letter-spacing: 1.5px; text-align: center; padding: 2px 0; }
.ar-card.flipped.has-skin .ar-card-front { border-color: var(--rar, #9fd8ff); box-shadow: 0 0 14px var(--rar, #9fd8ff); }
.ar-card.pop .ar-card-inner { animation: ar-pop 1.1s ease-out; }
.ar-card.pop.rarity-EPIC .ar-card-inner, .ar-card.pop.rarity-ANCIENT .ar-card-inner { animation: ar-pop-big 1.2s ease-out; }
@keyframes ar-pop { 0% { transform: rotateY(180deg) scale(1); } 30% { transform: rotateY(180deg) scale(1.12); } 100% { transform: rotateY(180deg) scale(1); } }
@keyframes ar-pop-big { 0% { transform: rotateY(180deg) scale(1); } 25% { transform: rotateY(180deg) scale(1.3) translateY(-10px); } 60% { transform: rotateY(180deg) scale(1.15); } 100% { transform: rotateY(180deg) scale(1); } }
.ar-card.guaranteed .ar-card-back::after { content: '\2605'; position: absolute; top: 6px; right: 8px; color: var(--ar-gold); font-size: 0.9rem; text-shadow: 0 0 6px var(--ar-gold); }

/* ── modals (confirm + skin) ── */
.arena-modal { position: fixed; inset: 0; z-index: 1900; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ar-fade .25s ease-out; }
.arena-modal-box { position: relative; background: var(--ar-panel); border: 1px solid var(--rar, var(--ar-line)); border-radius: 18px; padding: 24px; width: min(440px, 100%); max-height: 85vh; overflow-y: auto; box-shadow: 0 0 40px var(--rar, rgba(255,120,0,0.3)), 0 30px 60px rgba(0,0,0,0.7); box-sizing: border-box; }
.arena-modal-box.wide { width: min(720px, 100%); }
.arena-modal-close { position: absolute; top: 10px; right: 12px; height: auto; /* override global button height */ background: transparent; border: none; color: rgba(240,236,230,0.6); font-size: 1rem; cursor: pointer; padding: 4px 8px; }
.arena-modal-title { font-family: 'DragonSlayer', 'HwyGothic', sans-serif; color: var(--ar-gold); margin: 0 0 12px; font-size: 1.4rem; letter-spacing: 3px; text-shadow: 0 0 12px rgba(255,120,0,0.35); }
.arena-confirm-box { text-align: center; border-color: var(--ar-line); }
.arena-confirm-art { width: 150px; filter: drop-shadow(0 14px 18px rgba(0,0,0,0.75)) drop-shadow(0 0 18px rgba(255,120,0,0.5)); margin: 0 auto 14px; display: block; animation: ar-float 4.5s ease-in-out infinite; }
.arena-confirm-text { color: #f0ece6; font-size: 1rem; margin: 0 0 6px; }
.arena-confirm-sub { color: rgba(240,236,230,0.6); font-size: 0.82rem; margin: 0; }
.arena-skin-row { display: flex; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.arena-skin-row:last-child { border-bottom: none; }
.arena-skin-row img { width: 72px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 8px; border: 2px solid var(--rar, #9e9e9e); box-shadow: 0 0 12px var(--rar, transparent); flex: 0 0 72px; }
.arena-skin-row.big { flex-direction: column; text-align: center; border: none; }
.arena-skin-row.big img { width: 200px; flex: 0 0 auto; }
.arena-skin-info { min-width: 0; }
.arena-skin-tag { font-family: 'HwyGothic', sans-serif; letter-spacing: 2px; font-size: 0.65rem; color: var(--rar, var(--ar-gold)); }
.arena-skin-name { font-family: 'DragonSlayer', serif; color: #f0ece6; font-size: 1.05rem; margin: 2px 0; }
.arena-skin-sub { color: rgba(240,236,230,0.6); font-size: 0.78rem; margin-bottom: 8px; }
.ar-equip { height: auto; /* override global button height */ padding: 7px 14px; font-family: 'HwyGothic', sans-serif; letter-spacing: 1.5px; font-size: 0.7rem; background: linear-gradient(180deg, #ffd45a, #ff8a00); color: var(--ar-ink); border: 1px solid var(--ar-pale); border-radius: 8px; cursor: pointer; box-shadow: 0 2px 0 #7a2e00; }
.ar-equip:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.ar-equip.done { background: transparent; color: #9be39b; border: 1px solid #9be39b; cursor: default; box-shadow: none; }
@keyframes ar-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 3 · deck builder: mirrors the /decks builder (decks.css picker + preview), pool cards only ── */
.ar-builder { display: flex; align-items: flex-start; gap: 24px; text-align: left; }
.ar-picker-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ar-panel-title { font-family: 'HwyGothic', sans-serif; font-size: 0.68rem; letter-spacing: 3px; color: rgba(255,191,0,0.6); text-transform: uppercase; margin: 0; }
.ar-picker-search { position: relative; display: flex; align-items: center; }
.ar-picker-search-input { width: 100%; padding: 5px 28px 5px 12px; border-radius: 20px; border: 1px solid rgba(255,191,0,0.22); background: rgba(255,255,255,0.04); color: #f0ece6; font-family: 'HwyGothic', sans-serif; font-size: 0.82rem; outline: none; box-sizing: border-box; transition: border-color .18s, box-shadow .18s; }
.ar-picker-search-input:focus { border-color: rgba(255,191,0,0.5); box-shadow: 0 0 6px rgba(255,191,0,0.14); }
.ar-picker-search-icon { position: absolute; right: 9px; color: #6a6258; font-size: 0.75rem; pointer-events: none; }
.ar-picker-grid { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; max-height: calc(100vh - 300px); min-height: 200px; overflow-y: auto; padding: 6px 2px 2px 1px; scrollbar-width: thin; scrollbar-color: rgba(255,191,0,0.18) transparent; }
.ar-picker-card { position: relative; cursor: pointer; border-radius: 7px; border: 1px solid rgba(255,255,255,0.05); transition: transform .15s, box-shadow .15s, border-color .15s, opacity .15s; user-select: none; -webkit-user-select: none; flex-shrink: 0; opacity: 0.45; }
.ar-picker-card img { width: 90px; height: 126px; border-radius: 6px; display: block; object-fit: cover; pointer-events: none; }
.ar-picker-card:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 8px 20px rgba(255,191,0,0.22); border-color: rgba(255,191,0,0.18); opacity: 1; }
.ar-picker-card.in-deck { opacity: 1; border-color: rgba(255,191,0,0.35); }
.ar-picker-card.maxed { cursor: default; }
.ar-picker-card.maxed:hover { transform: none; box-shadow: none; border-color: rgba(255,191,0,0.35); }
.ar-picker-count { position: absolute; top: 4px; right: 4px; background: var(--ar-gold); color: #0e0e0e; font-family: 'HwyGothic', sans-serif; font-size: 0.7rem; font-weight: bold; border-radius: 50%; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; line-height: 1; cursor: pointer; transition: background-color .15s, transform .15s; }
.ar-picker-count:hover { background-color: #e57373; transform: scale(1.15); }
.ar-picker-copies { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.75); color: var(--ar-gold); border: 1px solid rgba(255,191,0,0.5); border-radius: 999px; padding: 0 6px; font-family: 'HwyGothic', sans-serif; font-size: 0.62rem; letter-spacing: 1px; pointer-events: none; }
.ar-picker-hint { font-family: 'HwyGothic', sans-serif; font-size: 0.62rem; color: rgba(240,236,230,0.4); letter-spacing: 1px; margin: 2px 0 0; }
.ar-picker-empty { font-family: 'HwyGothic', sans-serif; font-size: 0.72rem; color: rgba(240,236,230,0.4); letter-spacing: 1px; padding: 24px 0; width: 100%; text-align: center; }
.ar-deck-panel { flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px; }
.ar-deck-preview { background: rgba(10,10,10,0.9); border: 1px solid rgba(255,191,0,0.12); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ar-deck-preview-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(255,191,0,0.08); }
.ar-deck-slot-count { font-family: 'HwyGothic', sans-serif; font-size: 0.88rem; font-weight: bold; color: #81c784; }
.ar-deck-slot-count.at-min { color: var(--ar-gold); }
.ar-deck-list { display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 380px); min-height: 120px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,191,0,0.1) transparent; }
.ar-deck-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: rgba(255,255,255,0.03); border-radius: 7px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.ar-deck-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.05); }
.ar-deck-item-count { font-family: 'HwyGothic', sans-serif; font-size: 0.73rem; font-weight: bold; color: var(--ar-gold); min-width: 22px; text-align: center; flex-shrink: 0; }
.ar-deck-item-name { flex: 1; font-family: 'HwyGothic', sans-serif; font-size: 0.77rem; color: #a8a09a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-deck-item-remove { height: auto; /* override global button height */ background: transparent; border: none; color: #5a5650; cursor: pointer; font-size: 0.68rem; padding: 2px 5px; border-radius: 4px; min-width: 0; line-height: 1; flex-shrink: 0; transition: color .15s, background .15s; }
.ar-deck-item-remove:hover { color: #e57373; background: rgba(244,67,54,0.1); }
.arena-bench-count { font-family: 'HwyGothic', sans-serif; letter-spacing: 1px; color: var(--ar-gold); font-size: 0.78rem; text-align: center; }

/* ── 4 · battle ── */
.arena-record-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.arena-record-label { font-family: 'HwyGothic', sans-serif; letter-spacing: 2px; color: rgba(255,191,0,0.55); font-size: 0.75rem; }
.arena-record-score { font-family: 'DragonSlayer', serif; color: var(--ar-gold); font-size: 1.7rem; }
.arena-record-score small { font-family: 'HwyGothic', sans-serif; font-size: 0.75rem; color: rgba(240,236,230,0.6); letter-spacing: 1px; }
.arena-gauntlet-run { margin: 12px 0 6px; }
.arena-lives { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.arena-pips { display: flex; gap: 6px; }
.arena-pips span { width: 30px; height: 11px; border-radius: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,191,0,0.3); }
.arena-pips-loss span { border-color: rgba(255,80,80,0.4); }
.arena-pips-loss span.on { background: #ff5252; box-shadow: 0 0 8px rgba(255,80,80,0.6); }
.arena-prize-now { margin-top: 12px; }
.arena-searching { margin-top: 16px; text-align: center; padding: 22px; border: 1px dashed rgba(255,140,0,0.45); border-radius: 14px; background: rgba(255,120,0,0.04); }
.arena-radar { position: relative; width: 90px; height: 90px; margin: 0 auto 10px; }
.arena-radar span { position: absolute; inset: 0; border: 2px solid var(--ar-gold); border-radius: 50%; opacity: 0; animation: arena-ping 2.1s ease-out infinite; }
.arena-radar span:nth-child(2) { animation-delay: .7s; }
.arena-radar span:nth-child(3) { animation-delay: 1.4s; }
@keyframes arena-ping { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.arena-searching-text { font-family: 'DragonSlayer', serif; color: var(--ar-gold); font-size: 1.2rem; margin: 0; }
.arena-ellipsis::after { content: '…'; animation: arena-dots 1.5s steps(4) infinite; }
@keyframes arena-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.arena-searching-hint { color: rgba(240,236,230,0.6); font-size: 0.82rem; margin: 6px 0 14px; }
.arena-found { margin-top: 16px; text-align: center; color: #9be39b; font-family: 'DragonSlayer', serif; font-size: 1.2rem; }

/* ── ANCIENT DROP takeover ── */
.arena-ancient { position: fixed; inset: 0; z-index: 2000; background: radial-gradient(circle at 50% 40%, rgba(255,110,0,0.35), rgba(0,0,0,0.96) 65%); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ar-fade .4s ease-out; --ar-accent: #ff8c1a; }
.arena-ancient-inner { text-align: center; max-width: 720px; }
.arena-ancient-title { font-family: 'DragonSlayer', serif; font-size: clamp(2.6rem, 9vw, 6rem); color: var(--ar-accent); letter-spacing: 6px; text-shadow: 0 0 30px var(--ar-accent), 0 0 70px rgba(255,120,0,0.6); animation: ar-title 1s cubic-bezier(.2,1.4,.3,1); }
@keyframes ar-title { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.arena-ancient-set { font-family: 'DragonSlayer', serif; color: var(--ar-gold); font-size: clamp(1.3rem, 4vw, 2.2rem); letter-spacing: 3px; margin: 6px 0 16px; }
.arena-ancient-fan { display: flex; justify-content: center; margin: 0 0 14px; }
.arena-ancient-fan img { width: 110px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 8px; border: 2px solid var(--ar-accent); box-shadow: 0 10px 30px rgba(0,0,0,0.7); margin: 0 -14px; transform-origin: 50% 120%; animation: ar-fan .8s ease-out both; }
.arena-ancient-fan img:nth-child(1) { transform: rotate(-24deg); } .arena-ancient-fan img:nth-child(2) { transform: rotate(-14deg); } .arena-ancient-fan img:nth-child(3) { transform: rotate(-5deg); }
.arena-ancient-fan img:nth-child(4) { transform: rotate(5deg); } .arena-ancient-fan img:nth-child(5) { transform: rotate(14deg); } .arena-ancient-fan img:nth-child(6) { transform: rotate(24deg); }
@keyframes ar-fan { from { opacity: 0; transform: translateY(40px) rotate(0); } }
.arena-ancient-text { color: #f0ece6; font-size: 1rem; margin: 0 0 8px; }
body.arena-shake { animation: ar-shake .9s ease-in-out; }
@keyframes ar-shake { 10%, 90% { transform: translate(-2px, 0); } 20%, 80% { transform: translate(4px, 0); } 30%, 50%, 70% { transform: translate(-6px, 2px); } 40%, 60% { transform: translate(6px, -2px); } }

/* ── RUN COMPLETE takeover (the prize popup): tinted by how far the run got — band-0 (no wins) is a
   smouldering red, band-low/mid ember, band-high gold, band-perfect white-gold with a crown. ── */
.arena-result { position: fixed; inset: 0; z-index: 1950; overflow-y: auto; background: radial-gradient(ellipse at 50% 30%, var(--ar-res-glow) 0%, transparent 68%), rgba(7, 4, 2, 0.97); display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; animation: ar-fade .4s ease-out; --ar-res: #ff8c1a; --ar-res-glow: rgba(255,110,0,0.28); }
.arena-result.band-0 { --ar-res: #ff5a3c; --ar-res-glow: rgba(200,40,20,0.3); }
.arena-result.band-low { --ar-res: #ff8c1a; --ar-res-glow: rgba(255,110,0,0.26); }
.arena-result.band-mid { --ar-res: #ffb300; --ar-res-glow: rgba(255,140,0,0.32); }
.arena-result.band-high { --ar-res: #ffd45a; --ar-res-glow: rgba(255,170,0,0.38); }
.arena-result.band-perfect { --ar-res: #fff1b8; --ar-res-glow: rgba(255,200,80,0.5); }
.arena-result-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.arena-result-embers span { position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: var(--ar-res); box-shadow: 0 0 10px 2px var(--ar-res-glow), 0 0 4px var(--ar-res); opacity: 0; animation: ar-rise 6s linear infinite; }
.arena-result-embers span:nth-child(1) { left: 4%; animation-delay: 0s; animation-duration: 6.5s; }
.arena-result-embers span:nth-child(2) { left: 11%; animation-delay: 1.4s; width: 3px; height: 3px; }
.arena-result-embers span:nth-child(3) { left: 19%; animation-delay: 2.6s; animation-duration: 7.2s; }
.arena-result-embers span:nth-child(4) { left: 26%; animation-delay: 0.7s; width: 4px; height: 4px; animation-duration: 5.4s; }
.arena-result-embers span:nth-child(5) { left: 33%; animation-delay: 3.3s; width: 3px; height: 3px; }
.arena-result-embers span:nth-child(6) { left: 41%; animation-delay: 1.9s; animation-duration: 6.8s; }
.arena-result-embers span:nth-child(7) { left: 48%; animation-delay: 4.1s; width: 6px; height: 6px; animation-duration: 5.8s; }
.arena-result-embers span:nth-child(8) { left: 56%; animation-delay: 0.3s; width: 3px; height: 3px; }
.arena-result-embers span:nth-child(9) { left: 63%; animation-delay: 2.2s; animation-duration: 7s; }
.arena-result-embers span:nth-child(10) { left: 71%; animation-delay: 3.7s; width: 4px; height: 4px; }
.arena-result-embers span:nth-child(11) { left: 78%; animation-delay: 1.1s; animation-duration: 6.2s; }
.arena-result-embers span:nth-child(12) { left: 86%; animation-delay: 4.6s; width: 3px; height: 3px; animation-duration: 5.6s; }
.arena-result-embers span:nth-child(13) { left: 92%; animation-delay: 2.9s; }
.arena-result-embers span:nth-child(14) { left: 97%; animation-delay: 0.9s; width: 4px; height: 4px; animation-duration: 7.4s; }
@keyframes ar-rise { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 8% { opacity: 1; } 60% { opacity: 0.9; } 100% { transform: translate(-30px, -105vh) scale(1.2); opacity: 0; } }
.arena-result-inner { position: relative; text-align: center; width: min(760px, 100%); margin: auto; }
.arena-result-kicker { font-family: 'HwyGothic', sans-serif; letter-spacing: 5px; font-size: 0.8rem; color: var(--ar-res); opacity: 0; animation: ar-fade .5s ease-out .15s forwards; }
.arena-result-title { font-family: 'DragonSlayer', serif; font-size: clamp(2.2rem, 7.5vw, 4.6rem); line-height: 1; color: var(--ar-res); letter-spacing: 5px; margin: 6px 0 16px; text-shadow: 0 0 24px var(--ar-res), 0 0 60px var(--ar-res-glow); animation: ar-title .9s cubic-bezier(.2,1.4,.3,1); }
.arena-result.band-perfect .arena-result-title::before { content: '\1F451'; display: block; font-size: 0.55em; margin-bottom: 4px; text-shadow: none; animation: ar-float 3s ease-in-out infinite; }
.arena-result-badge { display: inline-block; font-family: 'HwyGothic', sans-serif; letter-spacing: 3px; font-size: 0.72rem; color: var(--ar-ink); background: linear-gradient(180deg, #ffd45a, #ff8a00); border: 1px solid var(--ar-pale); border-radius: 999px; padding: 6px 16px; margin: 0 0 14px; box-shadow: 0 0 18px rgba(255,160,0,0.55); opacity: 0; transform: scale(0.6); animation: ar-badge .6s cubic-bezier(.2,1.5,.3,1) .5s forwards; }
.arena-result-badge:empty { display: none; }
.arena-result-badge.muted { background: rgba(0,0,0,0.35); color: rgba(240,236,230,0.7); border-color: rgba(255,191,0,0.3); box-shadow: none; }
@keyframes ar-badge { to { opacity: 1; transform: scale(1); } }
.arena-result-record { opacity: 0; animation: ar-fade .5s ease-out .35s forwards; }
.arena-result-rec-label { display: block; font-family: 'HwyGothic', sans-serif; letter-spacing: 3px; font-size: 0.68rem; color: rgba(240,236,230,0.6); }
.arena-result-score { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 2px 0 6px; }
.arena-result-score i { color: var(--ar-res); font-style: normal; font-family: 'DragonSlayer', serif; font-size: 2.4rem; line-height: 1; opacity: 0.8; }
.arena-result-side { display: inline-flex; align-items: baseline; gap: 8px; }
.arena-result-side b { font-family: 'DragonSlayer', serif; font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; color: #f0ece6; text-shadow: 0 0 18px rgba(255,140,0,0.35); }
.arena-result-side small { font-family: 'HwyGothic', sans-serif; letter-spacing: 2px; font-size: 0.7rem; color: rgba(240,236,230,0.6); }
.arena-gauntlet-result { max-width: 640px; margin: 4px auto 14px; opacity: 0; animation: ar-fade .5s ease-out .55s forwards; }
.arena-gauntlet-result .ar-node:not(.done) .ar-node-treasure, .arena-gauntlet-result .ar-node:not(.done) .ar-node-chest { opacity: 0.35; }
.arena-gauntlet-result .ar-node.here .ar-node-ring { animation: ar-glow 1.6s ease-in-out infinite; }
.arena-result-prize { background: var(--ar-panel); border: 1px solid var(--ar-line); border-radius: 18px; padding: 16px 20px 14px; margin: 0 auto 14px; width: min(420px, 100%); box-sizing: border-box; box-shadow: 0 0 40px var(--ar-res-glow), 0 20px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,191,0,0.1); opacity: 0; transform: translateY(14px); animation: ar-prize .6s cubic-bezier(.2,1.2,.3,1) .7s forwards; }
@keyframes ar-prize { to { opacity: 1; transform: none; } }
.arena-result-prize-label { font-family: 'HwyGothic', sans-serif; letter-spacing: 4px; font-size: 0.7rem; color: var(--ar-gold); }
.arena-result-treasure { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 4px 0 2px; }
.arena-result-treasure .gem-ico::before { font-size: 1.6rem; }
.arena-result-treasure b { font-family: 'DragonSlayer', serif; font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1.1; color: var(--ar-gold); text-shadow: 0 0 20px rgba(255,160,0,0.6); font-variant-numeric: tabular-nums; }
.arena-result-treasure.landed b { animation: ar-land .5s cubic-bezier(.2,1.6,.3,1); }
@keyframes ar-land { 0% { transform: scale(1); } 40% { transform: scale(1.18); text-shadow: 0 0 40px rgba(255,200,0,1); } 100% { transform: scale(1); } }
.arena-result-packs:empty { display: none; }
.arena-result-pack { display: inline-flex; align-items: center; gap: 8px; margin: 6px 4px 2px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--rar, var(--ar-line)); color: var(--rar, var(--ar-gold)); background: rgba(0,0,0,0.35); box-shadow: 0 0 14px var(--rar, transparent); font-family: 'HwyGothic', sans-serif; letter-spacing: 1.5px; font-size: 0.78rem; }
.arena-result-paid { color: rgba(240,236,230,0.65); font-size: 0.8rem; margin-top: 6px; }
.arena-result-tease { color: #f0ece6; font-size: 1rem; max-width: 520px; margin: 0 auto 16px; opacity: 0; animation: ar-fade .5s ease-out 1.3s forwards; }
.arena-result-actions { opacity: 0; animation: ar-fade .5s ease-out 1.5s forwards; }
.arena-result-actions .arena-btn-hero { padding: 12px 28px; }
.arena-result-actions .arena-btn-hero .arena-btn-sub:empty { display: none; }
body.arena-shake-hard { animation: ar-shake 1.1s ease-in-out; }

/* ── season / history ── */
.arena-season-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.arena-season-rule { color: rgba(240,236,230,0.85); margin: 10px 0 6px; }
.arena-season-mine { margin-bottom: 6px; }
.arena-history-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.88rem; cursor: pointer; border-radius: 8px; transition: background .15s; }
.arena-history-row:hover { background: rgba(255,140,0,0.08); }
.arena-history-row.perfect .arena-history-status::before { content: '\1F451\00a0'; }
.arena-history-date { color: rgba(240,236,230,0.5); font-size: 0.78rem; }
.arena-history-rec { color: #f0ece6; }
.arena-history-status { font-family: 'HwyGothic', sans-serif; letter-spacing: 1px; font-size: 0.7rem; color: var(--ar-gold); }

/* ── mobile ── */
@media (max-width: 1024px), (hover: none) {
    .arena-shell { flex-direction: column; gap: 12px; }
    .arena-sidebar { position: static; height: auto; flex: none; padding: 10px; }
    .arena-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .arena-nav-group { display: contents; }
    .arena-nav-group + .arena-nav-group { margin-top: 0; }
    .arena-nav-group-label { display: none; }
    .arena-tab, .arena-step { width: auto; padding: 8px 12px; border: 1px solid rgba(255,140,0,0.3); border-radius: 999px; }
    .arena-step.active, .arena-tab.active { box-shadow: none; }
    .arena-sidebar-foot { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border-top: none; padding: 0 4px; }
    .arena-sound { width: auto; margin-top: 0; margin-left: auto; }
    .arena-sound span { display: none; }
    .arena-card { padding: 14px; }
    .arena-topbar .arena-stepbar { flex-basis: 100%; justify-content: stretch; }
    .arena-topbar .arena-stepbar .arena-btn { flex: 1; justify-content: center; }
    .arena-hero { padding: 16px 14px; text-align: center; }
    .arena-hero-main { grid-template-columns: 1fr; gap: 14px; }
    .arena-hero-box { width: 200px; margin: 0 auto; }
    .arena-hero-reflect { height: 48px; }
    .arena-hero-gauntlet .arena-section-title { text-align: left; }
    .arena-hero-text { margin-left: auto; margin-right: auto; }
    .arena-hero-meta, .arena-odds { justify-content: center; }
    .arena-btn-hero { width: 100%; }
    .ar-node { min-width: 70px; }
    .arena-reveal-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
    .ar-builder { flex-direction: column; gap: 16px; }
    .ar-deck-panel { flex: none; width: 100%; }
    .ar-picker-grid { max-height: 52vh; }
    .ar-picker-card img { width: 76px; height: 106px; }
    .ar-deck-list { max-height: 260px; }
    .arena-result { align-items: flex-start; }
    .arena-result-score { gap: 12px; }
    .arena-result-actions { flex-direction: column; }
    .arena-result-actions .arena-btn { width: 100%; }
    .arena-history-row { grid-template-columns: 1fr auto; }
    .arena-history-date { grid-column: 1 / -1; }
}