/* Z-LAB – chủ đề kinh dị: đen ám xanh độc, sương mù, nhiễu phim, axit & máu. Ghi đè lên styles.css */
:root {
  --bg: #040604; --fg: #e6efe0; --mute: #93a88c; --dim: #5b6d55;
  --acid: #9dff3a; --acid2: #4fd11a; --blood: #c1121f; --blood2: #ff2a3d; --bone: #e8dcc0; --violet: #a259ff;
  --line: rgba(157,255,58,.14); --line2: rgba(157,255,58,.28);
  --cy: #9dff3a; --gold: #e8dcc0;
  --display: 'Grenze Gotisch', 'Be Vietnam Pro', serif; --hud: 'Chakra Petch', 'Be Vietnam Pro', monospace;
  color-scheme: dark;
}
html { background: var(--bg); }
body { background: radial-gradient(1100px 700px at 50% -10%, #12230f 0%, #070c06 45%, var(--bg) 75%) fixed, var(--bg); color: var(--fg); }
body::before { content: ''; position: fixed; inset: -50%; z-index: 70; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
body::after { content: ''; position: fixed; inset: 0; z-index: 69; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%); }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.fog { position: fixed; left: -20%; width: 140%; height: 45vh; z-index: 0; pointer-events: none; opacity: .5; filter: blur(30px); background: radial-gradient(ellipse at 30% 50%, rgba(120,160,110,.18), transparent 60%), radial-gradient(ellipse at 75% 60%, rgba(150,120,170,.12), transparent 60%); animation: fogMove 40s linear infinite alternate; }
.fog.f1 { bottom: -10vh; } .fog.f2 { top: 30vh; animation-duration: 55s; animation-direction: alternate-reverse; opacity: .3; }
@keyframes fogMove { to { transform: translateX(12%); } }
#flash { position: fixed; inset: 0; z-index: 95; pointer-events: none; background: #dff8ff; opacity: 0; }
#flash.on { animation: lightning 1.1s ease-out; }
@keyframes lightning { 0% { opacity: 0; } 5% { opacity: .85; } 10% { opacity: .1; } 16% { opacity: .7; } 30% { opacity: 0; } 42% { opacity: .35; } 100% { opacity: 0; } }

/* chữ */
.zt { font-family: var(--display); font-weight: 800; letter-spacing: .02em; line-height: 1; }
.flicker { animation: flicker 6s infinite; }
@keyframes flicker { 0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; text-shadow: 0 0 18px rgba(157,255,58,.45), 0 0 2px #000; } 20%, 22%, 55% { opacity: .55; text-shadow: none; } }
.acid-text { color: var(--acid); text-shadow: 0 0 18px rgba(157,255,58,.45); }
.blood-text { color: var(--blood2); text-shadow: 0 0 16px rgba(255,42,61,.45); }
.bone-text { color: var(--bone); }
.hud { font-family: var(--hud); }
.drip { position: relative; display: inline-block; }
.drip::after { content: ''; position: absolute; left: 18%; top: 88%; width: 6px; height: 0; border-radius: 0 0 6px 6px; background: linear-gradient(var(--blood), #6a0008); animation: drip 4.5s ease-in infinite; }
@keyframes drip { 0%, 40% { height: 0; opacity: 1; } 80% { height: 30px; opacity: 1; } 100% { height: 34px; opacity: 0; } }

/* nút 3D – biến thể kinh dị */
.b3d { --t: #d8ff9a; --m: #9dff3a; --b: #4fd11a; --edge: #2a6e0c; --rim: #0f2a04; --tx: #0b1f02; --cb: rgba(255,255,255,.75); font-family: var(--hud); letter-spacing: .06em; text-transform: uppercase; }
.b3d.blood { --t: #ff8a8a; --m: #e0202f; --b: #9a0a16; --edge: #5a0008; --rim: #2a0004; --tx: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); --cb: rgba(255,255,255,.6); }
.b3d.bone { --t: #fff6e0; --m: #e8dcc0; --b: #b9a984; --edge: #6e6045; --rim: #2e2716; --tx: #241c0c; }
.b3d.rust { --t: #f0b27a; --m: #c66b2e; --b: #8a3f12; --edge: #4f2207; --rim: #251002; --tx: #1e0d02; }
.b3d.violet { --t: #e2c8ff; --m: #a259ff; --b: #6a1fd0; --edge: #3a0d80; --rim: #1c0540; --tx: #fff; }
.b3d.steel { --t: #3f4a3c; --m: #262e24; --b: #161c15; --edge: #0a0d09; --rim: #040503; --tx: #d8e8d0; --cb: rgba(157,255,58,.45); }
.b3d.ghost { --t: #1a2218; --m: #121811; --b: #0c100b; --edge: #050705; --rim: #2c3a28; --tx: #c8dcc0; }
.b3d.cyan { --t: #d8ff9a; --m: #9dff3a; --b: #4fd11a; --edge: #2a6e0c; --rim: #0f2a04; --tx: #0b1f02; }
.b3d.green { --t: #d8ff9a; --m: #9dff3a; --b: #4fd11a; --edge: #2a6e0c; --rim: #0f2a04; --tx: #0b1f02; }
.b3d.red { --t: #ff8a8a; --m: #e0202f; --b: #9a0a16; --edge: #5a0008; --rim: #2a0004; --tx: #fff; }

/* khung */
.panel { background: linear-gradient(160deg, rgba(24,34,22,.78), rgba(8,12,8,.86)); border: 1px solid var(--line2); box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }
.hud::before { --hc: var(--acid); }
.hud.blood::before { --hc: var(--blood2); }
.hud.bone::before { --hc: var(--bone); }
.chip { background: rgba(157,255,58,.1); color: #c6ff8a; border-color: rgba(157,255,58,.35); font-family: var(--hud); }
.chip.blood { background: rgba(193,18,31,.18); color: #ff9aa3; border-color: rgba(255,42,61,.45); }
.chip.bone { background: rgba(232,220,192,.1); color: var(--bone); border-color: rgba(232,220,192,.35); }
.chip.dim { background: rgba(255,255,255,.04); color: var(--mute); border-color: var(--line); }
.chip.violet { background: rgba(162,89,255,.15); color: #d3b4ff; border-color: rgba(162,89,255,.45); }
.topbar { background: linear-gradient(180deg, rgba(4,6,4,.95), rgba(4,6,4,.65)); border-bottom: 1px solid var(--line); }
.icon-btn { background: linear-gradient(180deg, #243021, #121a11); color: #c8e8b8; border-color: var(--line2); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 0 #050805, 0 6px 14px rgba(0,0,0,.5); }
.nav { background: linear-gradient(0deg, rgba(4,6,4,.97), rgba(4,6,4,.8)); border-top: 1px solid var(--line); }
.nav-in { grid-template-columns: repeat(5, 1fr); }
.nav a { color: var(--dim); font-family: var(--hud); }
.nav a.on { color: #0b1f02; background: linear-gradient(180deg, #d8ff9a, #9dff3a 55%, #4fd11a); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 #2a6e0c, 0 0 0 1px #0f2a04, 0 10px 22px rgba(120,255,60,.25); }
.sec-title { color: #b6d8a6; font-family: var(--hud); }
.sec-title::before { background: linear-gradient(90deg, var(--acid), transparent); }
.toast { background: rgba(10,16,9,.96); border-color: var(--line2); }
.toast .ic { color: var(--acid); }
.modal-bg { background: rgba(0,0,0,.78); }
.foot-note b { color: var(--acid); }
.brand b { font-family: var(--display); font-size: 21px; letter-spacing: .04em; color: var(--acid); text-shadow: 0 0 14px rgba(157,255,58,.4); }
.brand small { color: var(--mute); }
.brand img { box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(157,255,58,.4); }
.bar3d { background: #060a05; }
.bar3d > i { background: linear-gradient(180deg, #e0ffb0, #9dff3a 50%, #3fa810); box-shadow: 0 0 12px rgba(157,255,58,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.switch.on { background: linear-gradient(180deg, #9dff3a, #3fa810); box-shadow: inset 0 3px 6px rgba(0,0,0,.4), 0 0 0 1.5px #2a6e0c, 0 0 14px rgba(157,255,58,.4); }
.row .ri { background: #18231a; color: var(--acid); border-color: var(--line2); }
.input3d { background: #050805; box-shadow: inset 0 3px 8px rgba(0,0,0,.85), 0 0 0 1.5px #2c3a28; }
.modal .input3d { margin-bottom: 16px; }
.input3d:focus { box-shadow: inset 0 3px 8px rgba(0,0,0,.85), 0 0 0 2px var(--acid), 0 0 20px rgba(157,255,58,.3); }
.app { max-width: 1180px; }

/* ===== trang chủ */
.hero-z { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
.hero-z h1 { font-family: var(--display); font-weight: 900; font-size: clamp(42px, 9vw, 84px); line-height: .92; margin: 8px 0 10px; color: var(--bone); text-shadow: 0 0 2px #000, 0 6px 30px rgba(0,0,0,.8); }
.hero-z h1 .acid-text { display: block; }
.hero-z p.lead { color: #b9c9b0; font-size: 15.5px; max-width: 560px; margin: 0 0 18px; }
.stage-box { position: relative; height: 56vh; min-height: 340px; max-height: 620px; border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse at 50% 80%, rgba(80,160,50,.18), transparent 60%), linear-gradient(180deg, #0a1209, #040604); border: 1px solid var(--line2); box-shadow: inset 0 0 80px rgba(0,0,0,.85), 0 20px 50px rgba(0,0,0,.6); touch-action: none; }
.stage-box .z3d-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.stage-box .z3d-canvas:active { cursor: grabbing; }
.stage-box::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,6,4,.0) 60%, rgba(4,6,4,.65)), repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px); }
.stage-tag { position: absolute; z-index: 2; left: 14px; top: 12px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.stage-tag .zname { font-family: var(--display); font-size: clamp(24px, 4.5vw, 36px); line-height: 1; color: var(--bone); text-shadow: 0 2px 12px #000; }
.stage-tag .zsub { font-family: var(--hud); font-size: 12px; letter-spacing: .14em; color: var(--acid); text-transform: uppercase; margin-top: 6px; }
.stage-hint { position: absolute; z-index: 2; bottom: 10px; left: 0; right: 0; text-align: center; font: 600 11.5px var(--hud); letter-spacing: .14em; color: rgba(200,230,190,.55); pointer-events: none; text-transform: uppercase; }
.rank { flex: none; width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; font: 900 28px/1 var(--display); color: #0b1f02; background: radial-gradient(circle at 35% 30%, #f0ffd0, #9dff3a 55%, #3fa810); box-shadow: 0 0 0 2px #0f2a04, 0 5px 0 #2a6e0c, 0 0 24px rgba(157,255,58,.4); }
.rank.S, .rank.SS { color: #fff; background: radial-gradient(circle at 35% 30%, #ffb0b8, #e0202f 55%, #7a0010); box-shadow: 0 0 0 2px #2a0004, 0 5px 0 #5a0008, 0 0 28px rgba(255,42,61,.55); }
.rank.A { color: #fff; background: radial-gradient(circle at 35% 30%, #e6d0ff, #a259ff 55%, #4a14a0); box-shadow: 0 0 0 2px #1c0540, 0 5px 0 #3a0d80, 0 0 24px rgba(162,89,255,.45); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi { padding: 12px; border-radius: 16px; background: rgba(6,10,6,.7); border: 1px solid var(--line); }
.kpi b { display: block; font: 800 26px/1 var(--display); color: var(--acid); }
.kpi span { font-size: 12px; color: var(--mute); }
.menu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mtile { position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--fg); padding: 16px 14px 14px; border-radius: 20px; background: radial-gradient(240px 120px at 100% 0%, var(--tc, rgba(157,255,58,.22)), transparent), linear-gradient(160deg, #1a2418, #0a0f09); border: 1px solid var(--line2); box-shadow: 0 6px 0 #050805, 0 14px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .1s, box-shadow .1s; margin-bottom: 6px; }
.mtile:active { transform: translateY(5px); box-shadow: 0 1px 0 #050805; }
.mtile .ic { width: 30px; height: 30px; color: var(--ti, var(--acid)); filter: drop-shadow(0 0 8px currentColor); }
.mtile b { display: block; font: 800 22px/1.05 var(--display); margin-top: 12px; color: var(--bone); }
.mtile small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 4px; }

/* ===== phòng lắp ráp */
.lab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lab > div, .detail-grid > div, .hero-z > div { min-width: 0; }
.lab .stage-box { height: 50vh; min-height: 320px; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot-btn { position: relative; border: 0; padding: 8px 4px 7px; border-radius: 14px; color: var(--mute); font: 700 11px/1.15 var(--hud); text-transform: uppercase; letter-spacing: .04em; background: linear-gradient(180deg, #1e281c, #0f150e); box-shadow: 0 0 0 1px #2c3a28, inset 0 1px 0 rgba(255,255,255,.08), 0 4px 0 #050805; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 4px; transition: transform .08s; }
.slot-btn:active { transform: translateY(3px); box-shadow: 0 0 0 1px #2c3a28, 0 1px 0 #050805; }
.slot-btn .sw { width: 28px; height: 28px; border-radius: 9px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.35), 0 0 12px var(--sg); background: linear-gradient(145deg, var(--sc), var(--sd)); }
.slot-btn.on { color: #0b1f02; background: linear-gradient(180deg, #d8ff9a, #9dff3a 55%, #4fd11a); box-shadow: 0 0 0 1px #0f2a04, inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 #2a6e0c, 0 0 20px rgba(157,255,58,.3); }
.parts { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 10px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.part { scroll-snap-align: start; position: relative; border: 0; padding: 8px 8px 10px; border-radius: 16px; text-align: center; color: var(--fg); background: radial-gradient(120px 90px at 50% 30%, var(--pg), transparent 70%), linear-gradient(170deg, #1c261a, #0b100a); box-shadow: 0 0 0 1px #2c3a28, inset 0 1px 0 rgba(255,255,255,.06), 0 5px 0 #050805; transition: transform .1s, box-shadow .1s; margin-bottom: 5px; }
.part:active { transform: translateY(4px); box-shadow: 0 0 0 1px #2c3a28, 0 1px 0 #050805; }
.part img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.part .ph { width: 100%; aspect-ratio: 1; display: grid; place-items: center; color: var(--dim); font-size: 11px; }
.part b { display: block; font: 700 12px/1.25 var(--ui); margin-top: 2px; min-height: 30px; }
.part small { display: block; font: 600 10.5px var(--hud); color: var(--mute); letter-spacing: .06em; text-transform: uppercase; }
.part.on { box-shadow: 0 0 0 2px var(--acid), 0 5px 0 #2a6e0c, 0 0 24px rgba(157,255,58,.35); }
.part.on::after { content: '✓'; position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 12px/1 var(--ui); color: #0b1f02; background: var(--acid); }
.lab-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lab-actions .b3d.xl { grid-column: 1 / -1; }
.stats-box { display: grid; gap: 14px; }
.statrow { display: grid; grid-template-columns: 92px 1fr 42px; align-items: center; gap: 10px; font: 600 12.5px var(--hud); letter-spacing: .04em; color: #c8dcc0; text-transform: uppercase; }
.statrow .v { text-align: right; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.statrow .bar3d { height: 10px; }
.statrow .bar3d > i { transition: width .6s cubic-bezier(.2,.8,.2,1); }
.statrow .delta { font-size: 10px; margin-left: 2px; }
.statrow .delta.up { color: var(--acid); } .statrow .delta.down { color: var(--blood2); }
.radar { width: 100%; max-width: 280px; margin: 0 auto; display: block; }
.power { display: flex; align-items: center; gap: 14px; }
.power .pw b { display: block; font: 900 40px/1 var(--display); color: var(--acid); text-shadow: 0 0 18px rgba(157,255,58,.4); }
.power .pw span { font: 600 11px var(--hud); letter-spacing: .14em; color: var(--mute); text-transform: uppercase; }
.skulls { display: inline-flex; gap: 3px; vertical-align: middle; }
.skulls .ic { width: 18px; height: 18px; color: #3a4436; }
.skulls .ic.on { color: var(--blood2); filter: drop-shadow(0 0 6px rgba(255,42,61,.6)); }
.trait { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(6,10,6,.7); border: 1px solid var(--line); font-size: 13.5px; }
.trait .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.trait.weak { border-color: rgba(255,42,61,.35); background: rgba(60,4,10,.35); }
.trait.weak .ic { color: var(--blood2); }
.trait.ab .ic { color: var(--acid); }
.trait.legend { border-color: rgba(162,89,255,.5); background: rgba(40,12,80,.35); }
.trait.legend .ic { color: var(--violet); }
.trait b { color: var(--bone); }
.trait small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 2px; }

/* ===== bách khoa */
.codex-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ccard-z { position: relative; display: flex; gap: 12px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--fg); background: linear-gradient(165deg, rgba(26,36,24,.82), rgba(8,12,8,.9)); border: 1px solid var(--line2); box-shadow: 0 5px 0 #050805, 0 12px 22px rgba(0,0,0,.45); transition: transform .1s, border-color .2s; min-width: 0; }
.ccard-z:hover { border-color: rgba(157,255,58,.5); }
.ccard-z:active { transform: translateY(3px); }
.ccard-z .av { width: 64px; height: 64px; flex: none; border-radius: 14px; background: #070b06 center/cover no-repeat; border: 1px solid var(--line2); box-shadow: inset 0 0 20px rgba(0,0,0,.8); }
.ccard-z h4 { margin: 0; font: 800 18px/1.15 var(--display); color: var(--bone); letter-spacing: .02em; }
.ccard-z .wk { font-size: 12px; color: var(--mute); margin-top: 3px; }
.ccard-z .mini { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips button { flex: none; border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--mute); border-radius: 999px; padding: 8px 13px; font: 700 12.5px/1 var(--hud); letter-spacing: .03em; }
.chips button.on { background: rgba(157,255,58,.15); color: #d0ff9a; border-color: rgba(157,255,58,.55); }
.search-z { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-radius: 16px; background: #050805; box-shadow: inset 0 3px 8px rgba(0,0,0,.85), 0 0 0 1.5px #2c3a28; }
.search-z .ic { color: var(--acid); width: 20px; height: 20px; }
.search-z input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 600 15px var(--ui); padding: 12px 0; }
.search-z:focus-within { box-shadow: inset 0 3px 8px rgba(0,0,0,.85), 0 0 0 2px var(--acid); }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.kill-box { padding: 14px 16px; border-radius: 16px; background: linear-gradient(150deg, rgba(193,18,31,.25), rgba(60,4,10,.3)); border: 1px solid rgba(255,42,61,.5); }
.kill-box b { display: block; font: 800 13px var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--blood2); margin-bottom: 6px; }
.disclaimer { font-size: 12px; color: var(--dim); margin-top: 10px; }

/* ===== hầm mộ */
.crypt { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tomb { position: relative; display: block; text-decoration: none; color: var(--fg); padding: 8px 8px 12px; border-radius: 18px 18px 14px 14px; background: linear-gradient(170deg, #20291e, #0b100a); border: 1px solid var(--line2); box-shadow: 0 5px 0 #050805, 0 12px 22px rgba(0,0,0,.5); text-align: center; transition: transform .1s; }
.tomb:active { transform: translateY(4px); }
.tomb img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: radial-gradient(circle at 50% 70%, rgba(120,200,80,.18), transparent 70%), #070b06; }
.tomb b { display: block; font: 800 15px/1.15 var(--display); color: var(--bone); margin-top: 8px; }
.tomb small { display: block; font: 600 11px var(--hud); color: var(--mute); margin-top: 3px; letter-spacing: .05em; }
.tomb .rk { position: absolute; top: 12px; right: 12px; font: 900 15px/1 var(--display); padding: 4px 8px; border-radius: 8px; background: #0b1f02; color: var(--acid); border: 1px solid var(--line2); }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.recipe { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(6,10,6,.7); font-size: 13px; }
.recipe.found { border-color: rgba(162,89,255,.55); background: rgba(40,12,80,.35); }
.recipe b { display: block; font: 800 16px var(--display); color: var(--bone); }
.recipe.locked b { color: var(--dim); }

/* ===== đấu trường */
.arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.fighter { text-align: center; padding: 12px; border-radius: 18px; background: rgba(6,10,6,.75); border: 1px solid var(--line2); min-width: 0; }
.fighter img { width: 100%; max-width: 180px; aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.fighter b { display: block; font: 800 17px/1.1 var(--display); color: var(--bone); margin-top: 6px; }
.fighter .hp { margin-top: 10px; height: 14px; border-radius: 8px; background: #060a05; box-shadow: inset 0 2px 4px rgba(0,0,0,.8); overflow: hidden; }
.fighter .hp i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #ff8a8a, #e0202f 55%, #8a0010); transition: width .35s; }
.fighter.hit { animation: shake .35s; }
.vs { font: 900 40px/1 var(--display); color: var(--blood2); text-shadow: 0 0 20px rgba(255,42,61,.6); }
.blog { max-height: 220px; overflow-y: auto; display: grid; gap: 6px; font: 600 13px var(--hud); padding: 12px; border-radius: 14px; background: rgba(4,6,4,.8); border: 1px solid var(--line); }
.blog div { color: #c8dcc0; } .blog .crit { color: var(--blood2); } .blog .win { color: var(--acid); font-size: 15px; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (min-width: 900px) {
  .hero-z { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .lab { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .lab .stage-box { height: calc(100dvh - 210px); max-height: 760px; position: sticky; top: 84px; }
  .codex-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .menu-tiles { grid-template-columns: repeat(4, 1fr); }
  .kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1300px) { .codex-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 420px) { .slot-btn { font-size: 9.5px; } .arena { grid-template-columns: 1fr; } .vs { text-align: center; } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } .fog { animation: none; } }