@import url('https://fonts.googleapis.com/css2?family=VT323&family=Permanent+Marker&display=swap');
/* Trick or Fright: UI styles */
:root {
  --blood: #b3121b;
  --blood-hi: #e0242e;
  --pumpkin: #ff7a18;
  --bone: #e8e0cc;
  --night: #05070d;
  --bone-dim: rgba(232, 224, 204, 0.62);
  --glass: rgba(5, 7, 13, 0.55);
  --f-title: 'Creepster', 'Cinzel', serif;
  --f-head: 'Cinzel', Georgia, serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-vhs: 'VT323', 'Courier New', monospace;
  --f-marker: 'Permanent Marker', 'Cinzel', cursive;
  --paper: #efe5cb;
  --ink: #1c1712;
}

html, body { margin: 0; height: 100%; background: var(--night); overflow: hidden; color: var(--bone); font-family: var(--f-body); }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; user-select: none; -webkit-user-select: none; }
#ui * { box-sizing: border-box; }
#ui button, #ui input { pointer-events: auto; }
:where(#ui) :where(button, input) { font: inherit; }
.cinematic #ui { display: none; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.screen.on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }

/* ---------- film grain + vignette ---------- */
.tof-fx { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.tof-grain {
  position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}
.tof-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.tof-danger {
  position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .2s linear;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(179, 18, 27, .22) 82%, rgba(179, 18, 27, .7) 100%);
  animation: dangerPulse 1.1s ease-in-out infinite;
}
@keyframes dangerPulse { 50% { filter: brightness(1.35); } }

/* ---------- loading ---------- */
.loading { background: #000; display: grid; place-items: center; z-index: 40; }
.loading-inner { width: min(420px, 70vw); text-align: center; }
.loading-text { font-family: var(--f-head); letter-spacing: .5em; text-transform: uppercase; font-size: 14px; color: var(--bone-dim); margin-bottom: 22px; animation: flick 3s infinite; }
.loading-track { height: 2px; background: rgba(255,122,24,.12); overflow: hidden; }
.loading-bar { height: 100%; background: var(--pumpkin); transform-origin: left; transform: scaleX(0); transition: transform .3s ease; box-shadow: 0 0 12px var(--pumpkin), 0 0 30px rgba(255,122,24,.6); animation: barFlicker 1.7s infinite; }
.loading-pct { margin-top: 14px; font-size: 11px; letter-spacing: .3em; color: rgba(232,224,204,.35); font-variant-numeric: tabular-nums; }
@keyframes barFlicker { 0%,100% { opacity: 1; } 8% { opacity: .4; } 10% { opacity: 1; } 47% { opacity: .85; } 49% { opacity: .2; } 52% { opacity: 1; } }

/* ---------- menu ---------- */
.menu-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,7,13,.94) 0%, rgba(5,7,13,.78) 28%, rgba(5,7,13,.25) 55%, transparent 75%),
    linear-gradient(0deg, rgba(5,7,13,.7) 0%, transparent 30%);
}
.menu-col { position: absolute; left: clamp(28px, 7vw, 120px); top: 50%; transform: translateY(-50%); width: min(560px, 86vw); }
.title {
  margin: 0; font-family: var(--f-title); font-weight: 400; line-height: .86; color: var(--pumpkin);
  font-size: clamp(64px, 10vw, 150px); letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(179,18,27,.85), 0 0 46px rgba(179,18,27,.5), 0 4px 0 #3a0508;
  animation: titleIn 1.6s cubic-bezier(.2,.7,.2,1) both, flick 7s 2s infinite;
}
.title span { display: block; }
.title .t2 { font-family: var(--f-head); font-size: .22em; letter-spacing: .6em; color: var(--bone-dim); text-shadow: none; margin: .25em 0 .1em .2em; font-style: italic; }
.title .t3 { color: var(--blood-hi); text-shadow: 0 0 22px rgba(255,122,24,.35), 0 0 50px rgba(179,18,27,.8), 0 4px 0 #2a0306; }
@keyframes titleIn { from { opacity: 0; filter: blur(12px); transform: translateY(-14px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes flick { 0%,100% { opacity: 1; } 3% { opacity: .55; } 4% { opacity: 1; } 5.5% { opacity: .7; } 6% { opacity: 1; } 61% { opacity: 1; } 62% { opacity: .82; } 63% { opacity: 1; } }
.tagline { font-family: var(--f-head); font-style: italic; font-size: clamp(15px, 1.5vw, 20px); color: var(--bone); opacity: .82; margin: 22px 0 38px; letter-spacing: .06em; animation: fadeUp 1s .7s both; }

.menu-items { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.menu-items.center { align-items: center; }
[data-panel] { display: none; }
[data-panel].open { display: flex; }
.panel.open { display: block; }

.mbtn {
  position: relative; background: none; border: 0; padding: 10px 2px 10px 0; cursor: pointer;
  color: var(--bone); font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .32em; font-size: clamp(15px, 1.35vw, 19px); opacity: .78;
  transition: color .25s, opacity .25s, letter-spacing .35s, transform .35s;
}
.mbtn::before {
  content: ''; position: absolute; left: -26px; top: 50%; width: 14px; height: 2px; background: var(--blood-hi);
  transform: translateY(-50%) scaleX(0) skewX(-30deg); transform-origin: right; transition: transform .3s;
  box-shadow: 0 0 10px var(--blood);
}
.mbtn::after {
  content: ''; position: absolute; left: 0; right: .32em; bottom: 4px; height: 2px;
  background: linear-gradient(90deg, var(--blood-hi), rgba(179,18,27,0)); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px rgba(224,36,46,.9);
}
.mbtn:hover, .mbtn:focus-visible { color: #fff; opacity: 1; letter-spacing: .38em; outline: none; text-shadow: 0 0 14px rgba(224,36,46,.7); }
.mbtn:hover::after, .mbtn:focus-visible::after { transform: scaleX(1); }
.mbtn:hover::before, .mbtn:focus-visible::before { transform: translateY(-50%) scaleX(1) skewX(-30deg); }
.mbtn.back { margin-top: 22px; font-size: 14px; }

/* staggered entrance */
.anim > *, .menu .menu-items.open > * { animation: fadeSlide .6s cubic-bezier(.2,.7,.2,1) both; }
.anim > *:nth-child(1) { animation-delay: .05s; } .anim > *:nth-child(2) { animation-delay: .13s; }
.anim > *:nth-child(3) { animation-delay: .21s; } .anim > *:nth-child(4) { animation-delay: .29s; }
.anim > *:nth-child(5) { animation-delay: .37s; } .anim > *:nth-child(6) { animation-delay: .45s; }
.menu.intro .menu-items.open > *:nth-child(1) { animation-delay: .9s; }
.menu.intro .menu-items.open > *:nth-child(2) { animation-delay: 1.0s; }
.menu.intro .menu-items.open > *:nth-child(3) { animation-delay: 1.1s; }
.menu.intro .menu-items.open > *:nth-child(4) { animation-delay: 1.2s; }
.menu-items.open.anim > *:nth-child(1) { animation-delay: .05s; } .menu-items.open.anim > *:nth-child(2) { animation-delay: .12s; }
.menu-items.open.anim > *:nth-child(3) { animation-delay: .19s; } .menu-items.open.anim > *:nth-child(4) { animation-delay: .26s; }
@keyframes fadeSlide { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.menu-foot {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 12px; letter-spacing: .14em;
  color: rgba(232,224,204,.45); text-transform: uppercase; animation: fadeUp 1s 1.5s both;
}

/* panels */
.panel h2 { font-family: var(--f-head); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; font-size: 22px; color: var(--pumpkin); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(179,18,27,.5); }
.panel { max-height: 52vh; overflow: auto; pointer-events: auto; }
.objectives { list-style: none; margin: 0 0 22px; padding: 0; font-size: 15px; line-height: 1.55; color: var(--bone); }
.objectives li { display: flex; gap: 12px; margin-bottom: 9px; }
.objectives b { color: var(--pumpkin); font-weight: 600; }
.bullet { flex: 0 0 7px; height: 7px; margin-top: .55em; background: var(--blood-hi); transform: rotate(45deg); box-shadow: 0 0 8px var(--blood); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.krow { display: flex; align-items: center; gap: 6px; }
.krow em { font-style: normal; font-size: 13px; color: var(--bone-dim); margin-left: 6px; letter-spacing: .06em; }
.kc {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px;
  font-family: var(--f-body); font-weight: 600; font-size: 12px; color: var(--bone);
  background: linear-gradient(180deg, rgba(232,224,204,.14), rgba(232,224,204,.04));
  border: 1px solid rgba(232,224,204,.28); border-bottom-width: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.kc.wide { min-width: 54px; }

.setting { margin-bottom: 22px; }
.setting label { display: flex; justify-content: space-between; font-family: var(--f-head); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--bone-dim); margin-bottom: 10px; }
.setting .val { color: var(--pumpkin); font-family: var(--f-body); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1px solid rgba(232,224,204,.25); border-radius: 4px; overflow: hidden; }
.segbtn { background: transparent; border: 0; color: var(--bone-dim); padding: 9px 22px; font-family: var(--f-head); letter-spacing: .2em; text-transform: uppercase; font-size: 13px; cursor: pointer; transition: background .2s, color .2s; }
.segbtn + .segbtn { border-left: 1px solid rgba(232,224,204,.25); }
.segbtn.on { background: var(--blood); color: #fff; box-shadow: inset 0 0 14px rgba(0,0,0,.4); }
.segbtn:hover:not(.on) { color: var(--bone); background: rgba(179,18,27,.2); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--blood-hi), rgba(232,224,204,.2)); }
input[type=range]::-moz-range-track { height: 2px; background: rgba(232,224,204,.2); }
input[type=range]::-moz-range-progress { height: 2px; background: var(--blood-hi); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; background: var(--pumpkin); transform: rotate(45deg); box-shadow: 0 0 10px var(--pumpkin); border: 0; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: var(--pumpkin); border: 0; border-radius: 0; transform: rotate(45deg); box-shadow: 0 0 10px var(--pumpkin); }

.lead { font-size: 16px; margin: 0 0 16px; }
.lead b { color: var(--pumpkin); }
.credits { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.9; color: var(--bone-dim); }
.credits b { color: var(--bone); font-weight: 600; }

/* ---------- HUD ---------- */
.hud { font-family: var(--f-body); }
.hud .ico { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.hud .ico svg, .stat .ico svg { width: 100%; height: 100%; }
.hud-candy, .hud-clock, .hud-scares {
  position: absolute; top: 22px; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: linear-gradient(180deg, rgba(5,7,13,.6), rgba(5,7,13,.25)); border: 1px solid rgba(232,224,204,.1); border-radius: 3px;
  backdrop-filter: blur(3px); text-shadow: 0 2px 6px #000;
}
.hud-candy { left: 24px; }
.hud-candy .ico { width: 38px; color: var(--pumpkin); filter: drop-shadow(0 0 6px rgba(255,122,24,.6)); }
.candy-num { font-family: var(--f-head); font-weight: 700; font-size: 26px; color: var(--bone); font-variant-numeric: tabular-nums; min-width: 1.3em; text-align: right; }
.candy-goal { font-family: var(--f-head); font-size: 15px; color: var(--bone-dim); }
.hud-candy.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
.hud-candy.pop .candy-num { color: var(--pumpkin); transition: color .6s; }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }

.hud-clock { left: 50%; transform: translateX(-50%); padding: 8px 22px; }
.hud-clock .ico { color: var(--bone); filter: drop-shadow(0 0 8px rgba(232,224,204,.6)); }
.clock-text { font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: .14em; font-variant-numeric: tabular-nums; transition: color .5s; }
.hud-clock.urgent .clock-text, .hud-clock.urgent .ico { color: var(--blood-hi); text-shadow: 0 0 12px rgba(224,36,46,.8); }
.hud-clock.urgent { animation: urgent 1s ease-in-out infinite; border-color: rgba(224,36,46,.5); }
@keyframes urgent { 50% { box-shadow: 0 0 22px rgba(179,18,27,.6); } }

.hud-scares { right: 24px; }
.hud-scares .ico { color: var(--bone); }
.scare-num { font-family: var(--f-head); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.hud-scares.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }

.hud-stamina, .hud-exposure { position: absolute; display: flex; align-items: center; gap: 10px; }
.hud .bar { position: relative; height: 6px; background: rgba(232,224,204,.1); border: 1px solid rgba(232,224,204,.16); overflow: hidden; }
.hud .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(1); }
.hud-stamina { left: 24px; bottom: 28px; }
.hud-stamina .bar { width: 200px; }
.hud-stamina .ico { color: var(--bone-dim); width: 18px; }
.hud-stamina .fill { background: linear-gradient(90deg, #8a7f66, var(--bone)); }
.hud-stamina.low .fill { background: var(--blood-hi); animation: flick 1s infinite; }

.hud-exposure { left: 50%; bottom: 30px; transform: translateX(-50%); --exp: 0; }
.hud-exposure .bar { width: min(320px, 40vw); height: 8px; border-radius: 4px; }
.hud-exposure .fill { background: linear-gradient(90deg, #ffb36b, var(--pumpkin) 40%, var(--blood-hi)); box-shadow: 0 0 calc(var(--exp) * 18px) var(--blood-hi); }
.hud-exposure .ico { width: 26px; height: 26px; color: rgb(232 224 204 / calc(.45 + var(--exp) * .55)); transition: color .2s; }
.hud-exposure.hot .ico { color: var(--blood-hi); filter: drop-shadow(0 0 8px var(--blood-hi)); animation: eyePulse .6s ease-in-out infinite; }
.hud-exposure.hot .bar { border-color: rgba(224,36,46,.7); box-shadow: 0 0 16px rgba(179,18,27,.7); }
.hud-exposure.flash { animation: flashX .6s ease-out; }
@keyframes eyePulse { 50% { transform: scale(1.18); } }
@keyframes flashX { 0% { filter: brightness(2.5); } 100% { filter: none; } }

.crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(232,224,204,.7); box-shadow: 0 0 4px rgba(0,0,0,.8); }

.toasts { position: absolute; left: 0; right: 0; top: 34%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast {
  font-family: var(--f-head); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 22px;
  color: var(--bone); text-shadow: 0 0 18px rgba(0,0,0,.9), 0 2px 4px #000; animation: toastIn .35s cubic-bezier(.2,1.4,.4,1) both;
  transition: opacity .6s, transform .6s;
}
.toast.scream { font-family: var(--f-title); font-weight: 400; font-size: 54px; letter-spacing: .05em; color: var(--pumpkin); text-shadow: 0 0 20px rgba(179,18,27,.9), 0 3px 0 #3a0508; }
.toast.warn { color: var(--blood-hi); text-shadow: 0 0 20px rgba(179,18,27,.9), 0 2px 4px #000; }
.toast.gold { color: #ffc067; font-size: 18px; }
.toast.out { opacity: 0; transform: translateY(-16px); }
@keyframes toastIn { from { opacity: 0; transform: scale(1.5); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- pause / end ---------- */
.pause, .end { display: grid; place-items: center; }
.pause { background: radial-gradient(ellipse at center, rgba(5,7,13,.55), rgba(5,7,13,.9)); backdrop-filter: blur(4px) saturate(.6); }
.center-card { text-align: center; }
.center-card .big { font-family: var(--f-head); font-weight: 700; font-size: 40px; letter-spacing: .5em; margin: 0 0 28px .5em; color: var(--bone); text-transform: uppercase; }
.center-card .mbtn::before { display: none; }
.center-card .mbtn::after { right: .38em; left: 0; background: linear-gradient(90deg, rgba(179,18,27,0), var(--blood-hi), rgba(179,18,27,0)); transform-origin: center; }

.end { background: rgba(0,0,0,0); transition: opacity 1.4s ease, visibility 0s linear 1.4s, background 2s; }
.end.on { transition: opacity 1.4s ease, visibility 0s, background 2s; }
.end.on.lost { background: radial-gradient(ellipse at center, rgba(60,0,4,.7), rgba(0,0,0,.96)); }
.end.on.won { background: radial-gradient(ellipse at center, rgba(70,30,0,.55), rgba(5,7,13,.95)); }
.end-title { font-family: var(--f-title); font-weight: 400; margin: 0; font-size: clamp(56px, 9vw, 130px); line-height: 1; letter-spacing: .03em; }
.end.lost .end-title { color: var(--blood-hi); text-shadow: 0 0 30px rgba(179,18,27,.9), 0 5px 0 #200; }
.end.won .end-title { color: var(--pumpkin); text-shadow: 0 0 30px rgba(255,122,24,.6), 0 0 60px rgba(179,18,27,.6), 0 5px 0 #3a0508; }
.end.on .end-title { animation: endIn 2s cubic-bezier(.2,.7,.2,1) both; }
.end-reason { font-family: var(--f-head); font-style: italic; font-size: 18px; color: var(--bone-dim); margin: 14px 0 36px; }
.end.on .end-reason { animation: fadeUp 1s 1s both; }
.stats { display: flex; justify-content: center; gap: clamp(20px, 5vw, 64px); margin-bottom: 38px; }
.end.on .stats { animation: fadeUp 1s 1.4s both; }
.end.on .menu-items { animation: fadeUp 1s 1.9s both; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat .ico { width: 30px; height: 26px; color: var(--pumpkin); }
.stat b { font-family: var(--f-head); font-size: 30px; font-variant-numeric: tabular-nums; }
.stat small { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .3em; font-size: 11px; color: var(--bone-dim); }
@keyframes endIn { from { opacity: 0; transform: scale(1.25); filter: blur(14px); letter-spacing: .3em; } to { opacity: 1; transform: none; filter: none; } }

@media (max-width: 640px) {
  .keys { grid-template-columns: 1fr; }
  .hud-stamina .bar { width: 120px; }
  .menu-foot { font-size: 10px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tof-grain, .title, .loading-bar, .tof-danger { animation: none !important; }
}

/* =====================================================================
   Round 2: level corner, difficulty, MONSTERS, MAP, PLAY unleash, END progression
   ===================================================================== */
.menu .menu-items.open > *:nth-child(5), .menu .menu-items.open > *:nth-child(6), .menu .menu-items.open > *:nth-child(7) { animation: fadeSlide .6s cubic-bezier(.2,.7,.2,1) both; }
.menu.intro .menu-items.open > *:nth-child(5) { animation-delay: 1.3s; }
.menu.intro .menu-items.open > *:nth-child(6) { animation-delay: 1.4s; }
.menu.intro .menu-items.open > *:nth-child(7) { animation-delay: 1.5s; }
.menu-items.open.anim > *:nth-child(5) { animation-delay: .33s; } .menu-items.open.anim > *:nth-child(6) { animation-delay: .4s; } .menu-items.open.anim > *:nth-child(7) { animation-delay: .47s; }
.menu-col { transition: opacity .45s ease, transform .45s ease, filter .45s; }
.menu.wide-open .menu-col { opacity: 0; transform: translateY(-50%) translateX(-30px); filter: blur(6px); pointer-events: none; }
.menu-shade { transition: background .6s; }
.menu.wide-open .menu-shade { background: radial-gradient(ellipse at 65% 45%, rgba(5,7,13,.35), rgba(5,7,13,.92) 70%), rgba(5,7,13,.45); }
.menu.wide-open .menu-foot, .menu.wide-open .menu-level { opacity: 0; pointer-events: none; }
.tagline { margin: 18px 0 26px; }

/* difficulty toggle (under PLAY) */
.diff { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; }
.diff-seg { display: inline-flex; border: 1px solid rgba(232,224,204,.2); background: rgba(5,7,13,.45); }
.dbtn {
  background: transparent; border: 0; cursor: pointer; padding: 7px 16px; font-family: var(--f-head) !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: .24em; font-size: 11px; color: rgba(232,224,204,.45); transition: color .25s, background .25s, box-shadow .25s;
}
.dbtn + .dbtn { border-left: 1px solid rgba(232,224,204,.14); }
.dbtn:hover { color: var(--bone); }
.dbtn[data-diff="sweet"].on { color: #1a0a02; background: var(--pumpkin); box-shadow: 0 0 18px rgba(255,122,24,.6); }
.dbtn[data-diff="trick"].on { color: #120e08; background: var(--bone); box-shadow: 0 0 16px rgba(232,224,204,.4); }
.dbtn[data-diff="fright"].on { color: #fff; background: var(--blood); box-shadow: 0 0 20px rgba(224,36,46,.7); text-shadow: 0 0 8px rgba(0,0,0,.6); }
.diff-desc { font-family: var(--f-head); font-style: italic; font-size: 12.5px; color: var(--bone-dim); letter-spacing: .04em; min-height: 1.3em; }
.end-diff { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .3em; font-size: 11px; color: var(--bone-dim); margin-top: -26px; margin-bottom: 28px; }
.end-diff b { font-weight: 700; }
.end-diff.d-sweet b { color: var(--pumpkin); } .end-diff.d-trick b { color: var(--bone); } .end-diff.d-fright b { color: var(--blood-hi); }
.end.on .end-diff { animation: fadeUp 1s 1.2s both; }

/* shared xp bar */
.xpbar { position: relative; height: 4px; background: rgba(232,224,204,.1); border: 1px solid rgba(232,224,204,.14); overflow: hidden; border-radius: 2px; }
.xpbar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--blood), var(--pumpkin)); box-shadow: 0 0 10px var(--pumpkin); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }

/* level corner */
.menu-level {
  position: absolute; top: 26px; right: clamp(20px, 4vw, 48px); width: 210px; padding: 12px 16px 12px;
  background: linear-gradient(180deg, rgba(5,7,13,.72), rgba(5,7,13,.38)); border: 1px solid rgba(232,224,204,.1);
  border-top: 2px solid rgba(179,18,27,.7); backdrop-filter: blur(4px); animation: fadeUp 1s 1.2s both; transition: opacity .4s;
}
.lv-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.lv-label { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .35em; font-size: 11px; color: var(--bone-dim); }
.menu-level .lv-num { font-family: var(--f-title); font-weight: 400; font-size: 34px; line-height: .8; color: var(--pumpkin); text-shadow: 0 0 14px rgba(179,18,27,.8); }
.lv-sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,224,204,.5); font-variant-numeric: tabular-nums; }
.lv-mon { color: var(--bone); opacity: .8; font-family: var(--f-head); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* menu toasts */
.menu-toasts { position: absolute; left: 0; right: 0; top: 16%; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 30; pointer-events: none; }

/* ---------- wide panels ---------- */
.wide {
  position: absolute; inset: clamp(18px, 4vh, 44px) clamp(18px, 4vw, 64px) clamp(18px, 3.5vh, 36px);
  flex-direction: column; pointer-events: auto; gap: 18px;
}
[data-panel].wide.open { display: flex; }
.wide-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid rgba(179,18,27,.5); padding-bottom: 12px; }
.wide-head h2 { margin: 0; font-family: var(--f-title); font-weight: 400; font-size: clamp(40px, 4.6vw, 66px); line-height: .9; color: var(--pumpkin); letter-spacing: .03em; text-shadow: 0 0 18px rgba(179,18,27,.85), 0 3px 0 #3a0508; }
.wide-sub { margin: 0 0 4px; font-family: var(--f-head); font-style: italic; color: var(--bone-dim); font-size: 16px; }
.wide-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wide-foot .mbtn.back { margin: 0; }
.wide.anim > * { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }

.xpbox { display: grid; grid-template-columns: auto 220px auto; align-items: center; gap: 14px; font-family: var(--f-head); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: var(--bone-dim); }
.xpbox b { font-family: var(--f-title); font-weight: 400; font-size: 30px; color: var(--pumpkin); letter-spacing: .02em; vertical-align: -4px; text-shadow: 0 0 12px rgba(179,18,27,.8); }
.xpbox .lv-xp { font-family: var(--f-body); letter-spacing: .1em; font-size: 11px; font-variant-numeric: tabular-nums; }

/* monsters */
.mon-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(230px, 320px) 1fr; gap: clamp(16px, 2.4vw, 32px); }
.mon-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 2px 2px; scrollbar-width: thin; scrollbar-color: rgba(179,18,27,.6) transparent; }
.mcard {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; padding: 10px 14px 10px 10px;
  color: var(--bone); background: linear-gradient(90deg, rgba(232,224,204,.06), rgba(232,224,204,.015)); border: 1px solid rgba(232,224,204,.1);
  border-left: 3px solid transparent; transition: background .25s, border-color .25s, transform .25s;
  animation: fadeSlide .55s calc(.08s + var(--i, 0) * .07s) cubic-bezier(.2,.7,.2,1) both;
}
.mcard:hover { background: linear-gradient(90deg, rgba(179,18,27,.22), rgba(179,18,27,.03)); transform: translateX(4px); }
.mcard.focus { border-color: rgba(255,122,24,.35); border-left-color: var(--pumpkin); background: linear-gradient(90deg, rgba(255,122,24,.16), rgba(179,18,27,.04)); }
.mcard.sel .sigil { border-color: var(--pumpkin); box-shadow: 0 0 16px rgba(255,122,24,.55), inset 0 0 12px rgba(179,18,27,.6); }
.sigil {
  flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(232,224,204,.3);
  font-family: var(--f-title); font-size: 26px; color: var(--pumpkin); background: radial-gradient(circle at 50% 35%, rgba(179,18,27,.45), rgba(5,7,13,.9) 70%);
  text-shadow: 0 0 10px rgba(179,18,27,.9);
}
.sigil svg { width: 20px; height: 20px; }
.mc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-text b { font-family: var(--f-head); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.mc-text small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.mcard.sel .mc-text small { color: var(--pumpkin); }
.mcard.locked { color: rgba(232,224,204,.42); background: rgba(0,0,0,.35); }
.mcard.locked .sigil { color: rgba(232,224,204,.5); background: rgba(5,7,13,.9); border-style: dashed; text-shadow: none; }
.mcard.locked .mc-text small { color: rgba(224,36,46,.85); }
.mcard.shake, .code-form.shake { animation: shakeX .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeX { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }

.mon-stage {
  position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(232,224,204,.08);
  background: radial-gradient(ellipse at 50% 70%, rgba(120,10,18,.35), rgba(5,7,13,.2) 45%, rgba(5,7,13,.75) 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.8);
}
.mon-stage::before, .mon-stage::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,122,24,.55); z-index: 3; pointer-events: none; }
.mon-stage::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.mon-stage::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.stage-view { position: absolute; inset: 0; }
.preview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter .5s; }
.mon-stage.locked .preview-canvas { filter: brightness(.08) contrast(2) saturate(0); }
.stage-glow { position: absolute; inset: auto 15% 0; height: 30%; background: radial-gradient(ellipse at 50% 100%, rgba(255,122,24,.18), transparent 70%); pointer-events: none; }
.stage-msg { position: absolute; left: 0; right: 0; top: 44%; text-align: center; font-family: var(--f-head); letter-spacing: .5em; text-transform: uppercase; font-size: 13px; color: var(--bone-dim); animation: flick 3s infinite; pointer-events: none; }
.mon-stage[data-status="error"] .stage-msg { color: rgba(232,224,204,.45); animation: none; }
.stage-lock { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 8px; color: var(--blood-hi); text-align: center; pointer-events: none; z-index: 2; }
.mon-stage.locked .stage-lock { display: flex; animation: fadeUp .5s both; }
.stage-lock .ico { width: 54px; height: 54px; filter: drop-shadow(0 0 14px rgba(179,18,27,.9)); }
.stage-lock .ico svg { width: 100%; height: 100%; }
.stage-lock b { font-family: var(--f-head); letter-spacing: .5em; text-transform: uppercase; font-size: 18px; margin-left: .5em; }
.stage-lock small { font-family: var(--f-head); letter-spacing: .25em; text-transform: uppercase; font-size: 12px; color: var(--bone-dim); }
.stage-info { position: absolute; left: clamp(16px, 2.4vw, 32px); bottom: clamp(14px, 2.4vh, 28px); max-width: min(420px, 70%); z-index: 2; pointer-events: none; }
.stage-info.anim > * { animation: fadeSlide .5s cubic-bezier(.2,.7,.2,1) both; }
.stage-info.anim > *:nth-child(2) { animation-delay: .07s; } .stage-info.anim > *:nth-child(3) { animation-delay: .14s; }
.mon-name { margin: 0; font-family: var(--f-title); font-weight: 400; font-size: clamp(34px, 3.6vw, 54px); line-height: 1; color: var(--blood-hi); text-shadow: 0 0 22px rgba(179,18,27,.9), 0 3px 0 #200; }
.mon-blurb { margin: 6px 0 14px; font-family: var(--f-head); font-style: italic; font-size: 15px; color: var(--bone); opacity: .85; text-shadow: 0 2px 8px #000; }
.mon-stats { display: grid; gap: 6px; width: min(260px, 100%); }
.mstat { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; }
.mstat span { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .22em; font-size: 10px; color: var(--bone-dim); }
.sbar { height: 3px; background: rgba(232,224,204,.12); position: relative; overflow: hidden; }
.sbar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, var(--blood-hi), var(--pumpkin)); box-shadow: 0 0 8px var(--pumpkin); }
.mon-stage.jolt { animation: jolt .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes jolt { 0% { filter: brightness(2.4) saturate(1.4); transform: scale(1.025); } 30% { transform: translate(-6px, 3px) scale(1.015); } 50% { transform: translate(5px, -2px); } 100% { filter: none; transform: none; } }

.code-form { display: flex; align-items: stretch; border: 1px solid rgba(232,224,204,.18); background: rgba(5,7,13,.6); }
.code-in { width: 210px; background: transparent; border: 0; outline: none; padding: 9px 14px; color: var(--bone); font-family: var(--f-head) !important; letter-spacing: .16em; font-size: 13px; user-select: text; -webkit-user-select: text; }
.code-in::placeholder { color: rgba(232,224,204,.35); text-transform: uppercase; letter-spacing: .3em; font-size: 11px; }
.code-form:focus-within { border-color: rgba(255,122,24,.6); box-shadow: 0 0 18px rgba(179,18,27,.35); }
.code-btn { background: rgba(179,18,27,.75); border: 0; color: #fff; padding: 0 16px; cursor: pointer; font-family: var(--f-head) !important; text-transform: uppercase; letter-spacing: .25em; font-size: 11px; transition: background .2s; }
.code-btn:hover { background: var(--blood-hi); }

/* map cards */
.map-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); align-content: center; }
.mapcard {
  position: relative; display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0; color: var(--bone);
  background: rgba(5,7,13,.7); border: 1px solid rgba(232,224,204,.12); overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
  animation: fadeUp .6s calc(.1s + var(--i, 0) * .1s) cubic-bezier(.2,.7,.2,1) both;
}
.mapcard:hover { transform: translateY(-6px); border-color: rgba(255,122,24,.5); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 30px rgba(179,18,27,.35); }
.mapcard.sel { border-color: var(--pumpkin); box-shadow: 0 0 0 1px var(--pumpkin), 0 0 34px rgba(255,122,24,.3); }
.mapcard.going { animation: jolt .5s; border-color: var(--blood-hi); }
.thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; transition: filter .3s; }
.thumb > span { position: absolute; display: block; }
.t-moon { width: 18%; aspect-ratio: 1; border-radius: 50%; top: 12%; right: 14%; }
.t-sil { inset: auto 0 0 0; height: 58%; }
.t-fog { inset: auto -10% 0 -10%; height: 40%; background: linear-gradient(0deg, rgba(200,210,230,.28), transparent); filter: blur(6px); animation: fogDrift 9s ease-in-out infinite alternate; }
@keyframes fogDrift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
.mapcard:hover .thumb { filter: brightness(1.18); }
/* Maple Street: blue night, houses with warm windows */
.map-maple .thumb { background: radial-gradient(circle at 75% 20%, rgba(150,170,220,.35), transparent 40%), linear-gradient(180deg, #0b1230 0%, #1a2350 55%, #2a1e2a 100%); }
.map-maple .t-moon { background: radial-gradient(circle at 40% 40%, #fffbe8, #d7d2bd 60%); box-shadow: 0 0 30px 8px rgba(220,225,255,.4); }
.map-maple .t-sil {
  background:
    radial-gradient(circle at 18% 62%, #ffb347 0 3%, transparent 3.6%), radial-gradient(circle at 30% 62%, #ffb347 0 3%, transparent 3.6%),
    radial-gradient(circle at 66% 58%, #ff9a2e 0 2.6%, transparent 3.2%), radial-gradient(circle at 92% 86%, #ff7a18 0 3.4%, transparent 4.4%),
    linear-gradient(135deg, transparent 49.5%, #07080f 50%) 6% 0 / 20% 34% no-repeat, linear-gradient(225deg, transparent 49.5%, #07080f 50%) 26% 0 / 20% 34% no-repeat,
    linear-gradient(#07080f, #07080f) 6% 100% / 40% 68% no-repeat,
    linear-gradient(135deg, transparent 49.5%, #090a12 50%) 54% 14% / 17% 30% no-repeat, linear-gradient(225deg, transparent 49.5%, #090a12 50%) 71% 14% / 17% 30% no-repeat,
    linear-gradient(#090a12, #090a12) 54% 100% / 34% 58% no-repeat,
    linear-gradient(0deg, #05060a 0 18%, transparent 18%);
}
/* Cemetery: teal moonlight, crosses and headstones */
.map-cemetery .thumb { background: radial-gradient(circle at 30% 18%, rgba(120,220,200,.3), transparent 45%), linear-gradient(180deg, #06161a 0%, #0f2e33 55%, #1c2a2a 100%); }
.map-cemetery .t-moon { left: 20%; right: auto; background: radial-gradient(circle at 40% 40%, #e9fff8, #a6d6cc 65%); box-shadow: 0 0 36px 10px rgba(140,240,210,.35); }
.map-cemetery .t-sil {
  background:
    radial-gradient(circle at 81% 52%, rgba(255,170,70,.95) 0 2.2%, transparent 3%), radial-gradient(circle at 81% 52%, rgba(255,140,40,.4) 0 6%, transparent 10%),
    linear-gradient(#040a0c, #040a0c) 13% 100% / 3% 62% no-repeat, linear-gradient(#040a0c, #040a0c) 10.4% 44% / 10% 5% no-repeat,
    radial-gradient(ellipse at 50% 100%, #040a0c 0 60%, transparent 61%) 30% 100% / 10% 36% no-repeat,
    radial-gradient(ellipse at 50% 100%, #040a0c 0 60%, transparent 61%) 44% 100% / 8% 28% no-repeat,
    radial-gradient(ellipse at 50% 100%, #040a0c 0 60%, transparent 61%) 58% 100% / 9% 32% no-repeat,
    linear-gradient(135deg, transparent 49.5%, #03080a 50%) 74% 0 / 8% 30% no-repeat, linear-gradient(225deg, transparent 49.5%, #03080a 50%) 82% 0 / 8% 30% no-repeat,
    linear-gradient(#03080a, #03080a) 74% 100% / 16% 72% no-repeat,
    linear-gradient(0deg, #020507 0 16%, transparent 16%);
}
.map-cemetery .t-fog { background: linear-gradient(0deg, rgba(150,230,210,.35), transparent); }
/* Farm: harvest moon, amber sky, barn and pumpkins */
.map-farm .thumb { background: radial-gradient(circle at 70% 26%, rgba(255,150,40,.45), transparent 45%), linear-gradient(180deg, #1a0a10 0%, #3a1608 55%, #4a2208 100%); }
.map-farm .t-moon { width: 26%; top: 6%; right: 20%; background: radial-gradient(circle at 40% 40%, #ffd28a, #f08a24 70%); box-shadow: 0 0 50px 14px rgba(255,140,30,.45); }
.map-farm .t-sil {
  background:
    radial-gradient(ellipse at 20% 90%, #ff7a18 0 4%, transparent 4.8%), radial-gradient(ellipse at 32% 93%, #ff8c2a 0 3%, transparent 3.8%),
    radial-gradient(ellipse at 44% 89%, #ff6a10 0 3.6%, transparent 4.4%), radial-gradient(ellipse at 90% 91%, #ff7a18 0 3.4%, transparent 4.2%),
    radial-gradient(circle at 63% 62%, #ffb347 0 3%, transparent 3.8%),
    linear-gradient(135deg, transparent 49.5%, #0c0503 50%) 52% 8% / 11% 30% no-repeat, linear-gradient(225deg, transparent 49.5%, #0c0503 50%) 63% 8% / 11% 30% no-repeat,
    linear-gradient(#0c0503, #0c0503) 52% 100% / 22% 64% no-repeat,
    repeating-linear-gradient(90deg, #0a0402 0 2px, transparent 2px 9px) 0 60% / 40% 50% no-repeat,
    linear-gradient(0deg, #080302 0 22%, transparent 22%);
}
.map-farm .t-fog { background: linear-gradient(0deg, rgba(255,170,90,.18), transparent); }
.mp-text { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 12px; }
.mp-text b { font-family: var(--f-head); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(15px, 1.3vw, 19px); }
.mp-text small { font-family: var(--f-head); font-style: italic; font-size: 14px; color: var(--bone-dim); line-height: 1.45; }
.mp-tag { margin: 2px 18px 16px; align-self: flex-start; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dim); border-bottom: 1px solid rgba(232,224,204,.25); padding-bottom: 3px; }
.mapcard.sel .mp-tag { color: var(--pumpkin); border-color: var(--pumpkin); }

/* ---------- PLAY: unleash ---------- */
.tof-flash { position: absolute; inset: 0; z-index: 45; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,240,220,.95), rgba(224,36,46,.85) 45%, rgba(40,0,2,.95) 100%); }
#ui.unleash .tof-flash { animation: unleashFlash .9s ease-out both; }
@keyframes unleashFlash { 0% { opacity: 0; } 8% { opacity: .95; } 20% { opacity: .25; } 30% { opacity: .75; } 60% { opacity: .35; } 100% { opacity: 1; background: #000; } }
#ui.unleash .menu { animation: shake .9s cubic-bezier(.36,.07,.19,.97) both; }
body:has(#ui.unleash) #game { animation: shake .9s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  0%, 100% { transform: none; } 6% { transform: translate(-14px, 6px) rotate(-.6deg) scale(1.02); } 12% { transform: translate(12px, -8px) rotate(.5deg) scale(1.03); }
  20% { transform: translate(-10px, 10px) rotate(-.4deg) scale(1.04); } 30% { transform: translate(8px, -6px) scale(1.05); } 45% { transform: translate(-6px, 4px) scale(1.06); }
  60% { transform: translate(4px, -3px) scale(1.07); } 80% { transform: translate(-2px, 2px) scale(1.08); }
}
.unleash-text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 46; pointer-events: none; opacity: 0;
  font-family: var(--f-title); font-size: clamp(48px, 8vw, 120px); color: #fff; letter-spacing: .03em; text-shadow: 0 0 30px var(--blood-hi), 0 0 70px var(--blood), 0 5px 0 #200; }
#ui.unleash .unleash-text { animation: unleashText .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes unleashText { 0% { opacity: 0; transform: translateY(-50%) scale(1.8); filter: blur(10px); } 25% { opacity: 1; transform: translateY(-50%) scale(1); filter: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scale(.94); } }

/* ---------- END progression ---------- */
.end-prog { display: none; flex-direction: column; align-items: center; gap: 12px; margin: -12px 0 30px; }
.end-prog.has { display: flex; }
.end.on .end-prog { animation: fadeUp 1s 1.6s both; }
.xp-gain { font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: .25em; color: #ffc067; text-shadow: 0 0 16px rgba(255,122,24,.6); }
.xp-gain b { font-variant-numeric: tabular-nums; font-size: 30px; }
.end-lvl { display: flex; align-items: center; gap: 14px; }
.end-lvl .xpbar { width: min(260px, 50vw); height: 6px; }
.lvl-text { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .25em; font-size: 13px; color: var(--bone-dim); white-space: nowrap; }
.lvl-text b { font-family: var(--f-title); font-weight: 400; font-size: 26px; color: var(--pumpkin); letter-spacing: .02em; margin-left: 4px; vertical-align: -3px; }
.lv-from { color: var(--bone-dim); margin-left: 6px; } .lv-arrow { color: var(--blood-hi); margin: 0 4px; }
.end-prog.levelup .lvl-text { color: var(--bone); text-shadow: 0 0 12px rgba(255,122,24,.6); }
.end.on .end-prog.levelup .lvl-text { animation: lvlPulse 1.4s 2.8s ease-in-out 2; }
@keyframes lvlPulse { 50% { transform: scale(1.12); text-shadow: 0 0 24px var(--pumpkin); } }
.unlock-card {
  margin-top: 6px; padding: 14px 34px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative;
  border: 1px solid rgba(224,36,46,.6); background: radial-gradient(ellipse at center, rgba(179,18,27,.35), rgba(5,7,13,.6));
  box-shadow: 0 0 30px rgba(179,18,27,.5), inset 0 0 24px rgba(0,0,0,.6);
}
.end.on .unlock-card { animation: unlockIn .9s 2.5s cubic-bezier(.2,1.4,.4,1) both, unlockGlow 2s 3.4s ease-in-out infinite; }
.unlock-card small { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .4em; font-size: 12px; color: var(--blood-hi); }
.unlock-card b { font-family: var(--f-title); font-weight: 400; font-size: 40px; line-height: 1; color: var(--pumpkin); text-shadow: 0 0 20px rgba(179,18,27,.9), 0 3px 0 #3a0508; }
.unlock-card em { font-style: italic; font-family: var(--f-head); font-size: 12px; color: var(--bone-dim); letter-spacing: .1em; }
@keyframes unlockIn { from { opacity: 0; transform: scale(1.6); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes unlockGlow { 50% { box-shadow: 0 0 50px rgba(224,36,46,.8), inset 0 0 24px rgba(0,0,0,.6); } }

@media (max-width: 860px) {
  .mon-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .mon-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .mcard { flex: 0 0 210px; }
  .map-cards { grid-template-columns: 1fr; overflow-y: auto; align-content: start; }
  .xpbox { grid-template-columns: auto 120px auto; }
  .wide-foot { flex-wrap: wrap; }
}
@media (max-height: 700px) {
  .end-title { font-size: clamp(44px, 7vw, 90px); }
  .end-reason { margin: 8px 0 18px; }
  .stats { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #ui.unleash .menu, body:has(#ui.unleash) #game { animation: none !important; }
}

/* ---------- main menu: left column + monster showcase on the right ---------- */
.menu-shade {
  background:
    linear-gradient(90deg, rgba(5,7,13,.95) 0%, rgba(5,7,13,.82) 24%, rgba(5,7,13,.38) 44%, transparent 58%),
    linear-gradient(0deg, rgba(5,7,13,.55) 0%, transparent 22%);
}
.menu-col { top: clamp(28px, 7vh, 80px); transform: none; width: min(500px, 86vw); }
.menu.wide-open .menu-col { transform: translateX(-30px); }
.title { font-size: clamp(60px, 8.4vw, 132px); }
.menu-foot { left: clamp(28px, 7vw, 120px); right: auto; text-align: left; bottom: 22px; font-size: 11px; max-width: 46vw; }

.showcase-plate {
  top: auto; bottom: clamp(26px, 6vh, 64px); right: clamp(24px, 5vw, 80px); width: min(360px, 40vw);
  padding: 16px 20px 14px; border-top: 0; border-left: 2px solid rgba(179,18,27,.75);
  background: linear-gradient(100deg, rgba(5,7,13,.78), rgba(5,7,13,.42) 70%, rgba(5,7,13,.15));
  animation: plateIn 1.1s 1.1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes plateIn { from { opacity: 0; transform: translateX(30px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.plate-top { display: flex; align-items: center; gap: 14px; }
.lv-badge {
  flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 50px;
  border: 1px solid rgba(255,122,24,.6); transform: rotate(45deg); background: radial-gradient(circle, rgba(179,18,27,.55), rgba(5,7,13,.9) 75%);
  box-shadow: 0 0 18px rgba(179,18,27,.6);
}
.lv-badge > * { transform: rotate(-45deg); }
.lv-badge small { font-family: var(--f-head); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dim); margin: 0 0 -4px .3em; }
.showcase-plate .lv-num { font-family: var(--f-title); font-weight: 400; font-size: 24px; line-height: 1; color: var(--pumpkin); text-shadow: 0 0 12px rgba(179,18,27,.9); }
.plate-name {
  margin: 0; font-family: var(--f-title); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1; color: var(--blood-hi);
  letter-spacing: .02em; text-shadow: 0 0 20px rgba(179,18,27,.9), 0 3px 0 #200; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1;
  text-transform: none;
}
.plate-blurb { margin: 10px 0 12px; font-family: var(--f-head); font-style: italic; font-size: 14px; line-height: 1.45; color: var(--bone); opacity: .82; text-shadow: 0 2px 8px #000; }
.plate-xp { display: flex; align-items: center; gap: 12px; }
.plate-xp .xpbar { flex: 1; }
.plate-xp .lv-xp { font-size: 10.5px; letter-spacing: .12em; color: rgba(232,224,204,.55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plate-link {
  margin-top: 12px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--pumpkin);
  font-family: var(--f-head) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; font-size: 11px;
  border-bottom: 1px solid rgba(255,122,24,.35); transition: color .2s, letter-spacing .3s, border-color .2s;
}
.plate-link:hover { color: #fff; letter-spacing: .36em; border-color: var(--blood-hi); text-shadow: 0 0 12px rgba(224,36,46,.8); }
.diff-desc.pop { animation: fadeUp .35s both; }
@media (max-width: 860px) {
  .showcase-plate { width: min(320px, 86vw); }
  .menu-foot { display: none; }
}

/* =====================================================================
   VHS HORROR TAPE art direction (logo stays as is)
   OSD type: VT323 with green/magenta chroma offset. Labels: cream masking tape + marker.
   ===================================================================== */
:root { --osd: #f3f0e6; --chroma: -1.5px 0 rgba(0,255,170,.55), 1.5px 0 rgba(255,0,170,.6), 0 0 10px rgba(255,255,255,.18); --marker-red: #a3121a; }

/* scanlines + tracking band + OSD (menu only) */
.vhs-scan { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.vhs-track { position: absolute; left: 0; right: 0; top: -14%; height: 9%; pointer-events: none; z-index: 2; opacity: 0; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.0) 0 2px, rgba(255,255,255,.22) 2px 3px, rgba(255,255,255,0) 3px 7px),
    linear-gradient(180deg, transparent, rgba(220,220,235,.16) 40%, rgba(255,255,255,.3) 55%, transparent);
  filter: blur(.6px); animation: tracking 7.3s linear infinite; }
@keyframes tracking { 0%, 78% { top: -14%; opacity: 0; transform: skewX(0); } 80% { opacity: .9; } 90% { transform: skewX(-8deg) translateX(-1.5%); } 100% { top: 108%; opacity: .7; transform: skewX(4deg); } }
.osd { position: absolute; z-index: 6; font-family: var(--f-vhs); color: var(--osd); text-shadow: var(--chroma); font-size: clamp(26px, 2.2vw, 38px); line-height: 1; letter-spacing: .04em; pointer-events: none; }
.osd-tr { top: clamp(18px, 3.6vh, 40px); right: clamp(22px, 3vw, 52px); display: flex; gap: 1.1em; }
.osd-rec i { font-style: normal; color: #ff2a2a; text-shadow: 0 0 10px rgba(255,40,40,.9); animation: recBlink 1.1s steps(1) infinite; }
.osd-rec { animation: recFlicker 4s infinite; }
@keyframes recBlink { 50% { opacity: 0; } }
@keyframes recFlicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .55; } 43% { opacity: 1; } 77% { opacity: .8; } 78% { opacity: 1; } }
.osd-bl { left: clamp(28px, 7vw, 120px); bottom: clamp(18px, 3.6vh, 40px); display: flex; flex-direction: column; gap: 4px; font-size: clamp(24px, 1.9vw, 34px); }
.osd-play { font-size: .7em; opacity: .75; }
.menu-foot { display: none; }
.menu.wide-open .osd-bl { opacity: 0; }
.menu.wide-open .osd-tr { opacity: .55; }

/* main menu: VCR on-screen display, varied sizes, no boxes */
.menu-col { top: clamp(22px, 5vh, 64px); }
.tagline { font-family: var(--f-vhs); font-style: normal; font-size: clamp(20px, 1.6vw, 28px); letter-spacing: .06em; color: var(--osd); text-shadow: var(--chroma); opacity: .78; margin: 10px 0 clamp(14px, 3vh, 30px) 4px; }
.menu-items { gap: 0; }
.menu .menu-items .mbtn, .center-card .mbtn, .wide .mbtn.back, .panel .mbtn.back {
  font-family: var(--f-vhs); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  color: var(--osd); opacity: .84; text-shadow: var(--chroma); padding: 3px 0 3px 0; transition: opacity .15s, transform .2s, color .15s;
}
.menu .menu-items .mbtn::after, .center-card .mbtn::after, .wide .mbtn.back::after, .panel .mbtn.back::after { display: none; }
.menu .menu-items .mbtn::before, .center-card .mbtn::before, .wide .mbtn.back::before, .panel .mbtn.back::before {
  display: block; content: '\25B6'; position: absolute; left: -1.05em; top: 50%; width: auto; height: auto; background: none; box-shadow: none;
  transform: translateY(-50%) scale(.62); font-size: inherit; color: inherit; opacity: 0;
}
.menu .menu-items .mbtn:hover, .menu .menu-items .mbtn:focus-visible, .center-card .mbtn:hover, .wide .mbtn.back:hover, .panel .mbtn.back:hover {
  opacity: 1; color: #fff; letter-spacing: .05em; transform: translateX(.35em); text-shadow: -2px 0 rgba(0,255,170,.7), 2px 0 rgba(255,0,170,.75), 0 0 16px rgba(255,255,255,.35);
}
.menu .menu-items .mbtn:hover::before, .menu .menu-items .mbtn:focus-visible::before, .center-card .mbtn:hover::before, .wide .mbtn.back:hover::before, .panel .mbtn.back:hover::before {
  opacity: 1; transform: translateY(-50%) scale(.62); animation: recBlink .8s steps(1) infinite;
}
.menu .menu-items .mbtn[data-act="play"] { font-size: clamp(64px, 6vw, 104px); opacity: 1; margin-bottom: 2px; }
.menu .menu-items .mbtn[data-act="monsters"] { font-size: clamp(36px, 3.1vw, 54px); margin-top: 8px; }
.menu .menu-items .mbtn[data-act="map"] { font-size: clamp(32px, 2.7vw, 46px); }
.menu .menu-items .mbtn[data-act="how"] { font-size: clamp(25px, 2vw, 34px); margin-top: 8px; }
.menu .menu-items .mbtn[data-act="settings"] { font-size: clamp(23px, 1.8vw, 31px); }
.menu .menu-items .mbtn[data-act="credits"] { font-size: clamp(21px, 1.6vw, 28px); opacity: .62; }
.menu .menu-items .mbtn[data-act="credits"]:hover { opacity: 1; }

/* difficulty = tape speed */
.diff { margin: 0 0 6px 4px; gap: 4px; }
.diff-seg { border: 0; background: none; gap: 22px; }
.dbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 0 4px; font-family: var(--f-vhs) !important; font-weight: 400; letter-spacing: .04em;
  color: rgba(243,240,230,.38); border-bottom: 2px solid transparent; text-transform: none; }
.dbtn + .dbtn { border-left: 0; }
.dbtn b { font-weight: 400; font-size: clamp(28px, 2.2vw, 38px); line-height: .95; }
.dbtn small { font-size: clamp(15px, 1.15vw, 19px); text-transform: uppercase; letter-spacing: .12em; }
.dbtn:hover { color: rgba(243,240,230,.8); }
.dbtn.on { background: none !important; box-shadow: none !important; }
.dbtn[data-diff="sweet"].on { color: var(--pumpkin); border-color: var(--pumpkin); text-shadow: 0 0 14px rgba(255,122,24,.7); }
.dbtn[data-diff="trick"].on { color: var(--osd); border-color: var(--osd); text-shadow: var(--chroma); }
.dbtn[data-diff="fright"].on { color: #ff3b42; border-color: #ff3b42; text-shadow: 0 0 14px rgba(224,36,46,.9); }
.diff-desc { font-family: var(--f-vhs); font-style: normal; font-size: clamp(17px, 1.25vw, 21px); letter-spacing: .05em; color: rgba(243,240,230,.6); }

/* masking-tape paper labels */
.panel, .showcase-plate, .unlock-card {
  --rot: -1deg;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(120,90,40,.18), transparent 55%),
    var(--paper);
  color: var(--ink); border: 0; border-radius: 2px 3px 2px 4px; transform: rotate(var(--rot));
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.5); backdrop-filter: none;
}
.panel::before, .showcase-plate::before, .unlock-card::before {
  content: ''; position: absolute; top: -13px; left: 34%; width: 118px; height: 28px; transform: rotate(-3deg);
  background: linear-gradient(90deg, rgba(222,206,160,.82), rgba(236,224,186,.9) 50%, rgba(214,198,150,.82));
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%, 3% 60%, 0 30%);
}
.panel { position: relative; padding: 26px 30px 18px; max-height: min(56vh, 520px); overflow: visible; width: min(500px, 86vw); }
.panel.open { display: block; }
.panel[data-panel="settings"] { --rot: .8deg; }
.panel[data-panel="credits"] { --rot: -.6deg; }
.panel > :not(h2):not(.mbtn) { position: relative; }
.panel h2 { font-family: var(--f-marker); font-weight: 400; letter-spacing: .01em; text-transform: none; font-size: clamp(30px, 2.6vw, 40px); color: var(--marker-red); border: 0; padding: 0; margin: 0 0 10px -4px; transform: rotate(-1.5deg); }
.panel .objectives, .panel .lead, .panel .credits { color: var(--ink); }
.panel .objectives { font-size: 15px; margin-bottom: 16px; }
.panel .objectives b, .panel .lead b { color: var(--marker-red); }
.panel .bullet { background: var(--marker-red); box-shadow: none; transform: rotate(45deg) scale(.85); }
.panel .credits { color: rgba(28,23,18,.78); line-height: 1.7; max-height: 34vh; overflow: auto; }
.panel .credits b { color: var(--ink); }
.panel .kc { color: var(--ink); background: rgba(28,23,18,.06); border-color: rgba(28,23,18,.45); box-shadow: none; }
.panel .krow em { color: rgba(28,23,18,.72); }
.panel .setting label { color: rgba(28,23,18,.7); font-family: var(--f-vhs); font-size: 20px; letter-spacing: .06em; }
.panel .setting .val { color: var(--marker-red); font-family: var(--f-vhs); }
.panel .seg { border-color: rgba(28,23,18,.4); }
.panel .segbtn { color: rgba(28,23,18,.6); font-family: var(--f-vhs); font-size: 20px; letter-spacing: .08em; }
.panel .segbtn + .segbtn { border-color: rgba(28,23,18,.4); }
.panel .segbtn.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.panel input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--marker-red), rgba(28,23,18,.3)); }
.panel input[type=range]::-webkit-slider-thumb { background: var(--ink); box-shadow: none; }
.panel .mbtn.back { color: var(--ink); text-shadow: none; font-size: 26px; margin-top: 10px; }
.panel .mbtn.back:hover { color: var(--marker-red); text-shadow: none; }
.menu-col:not([data-view="main"]) .title { font-size: clamp(46px, 5.4vw, 92px); }
.menu-col:not([data-view="main"]) .tagline { display: none; }
.menu-col:not([data-view="main"]) .menu-items { margin-top: 18px; }
.menu-col .panel { margin-top: 28px; }

/* right-side name plate = tape label */
.showcase-plate { --rot: 1.3deg; padding: 22px 24px 16px; width: min(380px, 38vw); animation: plateIn 1.1s 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes plateIn { from { opacity: 0; transform: translateX(30px) rotate(var(--rot)); filter: blur(6px); } to { opacity: 1; transform: rotate(var(--rot)); filter: none; } }
.showcase-plate::before { left: auto; right: 18%; transform: rotate(4deg); }
.lv-badge { transform: none; width: auto; height: auto; padding: 4px 8px 3px; border: 0; border-radius: 3px; background: #0d0c0f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 0 rgba(0,0,0,.4); }
.lv-badge > * { transform: none; }
.lv-badge small { font-family: var(--f-vhs); font-size: 12px; letter-spacing: .14em; color: rgba(243,240,230,.5); margin: 0; }
.lv-counter { font-family: var(--f-vhs); font-weight: 400; font-size: 30px; line-height: .9; letter-spacing: .12em; color: var(--osd); text-shadow: var(--chroma); }
.plate-name { font-family: var(--f-marker); color: var(--marker-red); text-shadow: none; font-size: clamp(28px, 2.4vw, 40px); transform: rotate(-1deg); }
.plate-blurb { color: rgba(28,23,18,.82); text-shadow: none; opacity: 1; margin: 10px 0 10px; }
.plate-xp .xpbar { background: rgba(28,23,18,.12); border-color: rgba(28,23,18,.25); }
.plate-xp .xpbar i { background: var(--marker-red); box-shadow: none; }
.plate-xp .lv-xp { color: rgba(28,23,18,.6); font-family: var(--f-vhs); font-size: 17px; letter-spacing: .06em; }
.plate-link { font-family: var(--f-vhs) !important; font-weight: 400; font-size: 22px; letter-spacing: .06em; color: var(--marker-red); border-bottom: 2px solid rgba(163,18,26,.4); }
.plate-link:hover { color: var(--ink); letter-spacing: .06em; text-shadow: none; border-color: var(--ink); }

/* wide panels: tape-case shelf */
.wide-head { border-bottom: 0; align-items: center; padding: 0; }
.wide-head h2 { font-family: var(--f-marker); font-size: clamp(34px, 3.2vw, 52px); color: var(--marker-red); text-shadow: none; line-height: 1;
  background: var(--paper); padding: 8px 28px 6px; transform: rotate(-1.4deg); box-shadow: 0 12px 30px rgba(0,0,0,.6); position: relative; }
.wide-sub { font-family: var(--f-vhs); font-style: normal; font-size: 24px; color: var(--osd); text-shadow: var(--chroma); opacity: .8; margin: 0 auto 0 18px; }
.xpbox { font-family: var(--f-vhs); font-size: 20px; letter-spacing: .08em; color: rgba(243,240,230,.7); }
.xpbox b { font-family: var(--f-vhs); font-size: 30px; color: var(--osd); text-shadow: var(--chroma); }
.xpbox .lv-xp { font-family: var(--f-vhs); font-size: 18px; }
.wide .mbtn.back { font-size: 32px; }

.mcard { background: linear-gradient(180deg, #16141a, #0b0a0d); border: 1px solid #000; border-left: 0; padding: 8px 10px; gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.5); }
.mcard:hover { background: linear-gradient(180deg, #1c191f, #0e0c10); transform: translateX(6px); }
.mcard.focus { outline: 2px solid var(--pumpkin); outline-offset: 2px; background: linear-gradient(180deg, #1c191f, #0e0c10); }
.sigil { flex: 0 0 44px; height: 44px; border: 0; color: transparent; text-shadow: none; font-size: 0;
  background: radial-gradient(circle, #0b0a0d 0 16%, #d8d2c4 17% 22%, #24212a 23% 52%, #3a3640 53% 56%, #1b1920 57% 100%); box-shadow: inset 0 0 0 2px #000; }
.mcard.sel .sigil { box-shadow: inset 0 0 0 2px #000, 0 0 14px rgba(255,122,24,.7); animation: reel 2.4s linear infinite; }
@keyframes reel { to { transform: rotate(360deg); } }
.mc-text { flex: 1; background: var(--paper); padding: 6px 12px 5px; transform: rotate(-.8deg); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.mcard:nth-child(2n) .mc-text { transform: rotate(.7deg); }
.mcard:nth-child(3n) .mc-text { transform: rotate(-.3deg); }
.mc-text b { font-family: var(--f-marker); font-weight: 400; letter-spacing: .01em; text-transform: none; font-size: 19px; color: var(--ink); }
.mc-text small { font-family: var(--f-vhs); font-size: 16px; letter-spacing: .06em; color: rgba(28,23,18,.6); }
.mcard.sel .mc-text small { color: var(--marker-red); }
.mcard.locked { background: #09080a; color: inherit; }
.mcard.locked .mc-text { filter: grayscale(1) brightness(.55); }
.mcard.locked .mc-text small { color: var(--marker-red); filter: none; }
.mcard.locked .sigil { color: rgba(243,240,230,.6); font-size: 14px; background: #121015; border: 1px dashed rgba(243,240,230,.25); }

.mon-stage { border: 0; border-radius: 22px / 18px; background: radial-gradient(ellipse at 50% 70%, rgba(120,10,18,.35), rgba(5,7,13,.25) 45%, rgba(5,7,13,.85) 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.9), 0 0 0 10px #0b0a0d, 0 0 0 11px #222, 0 20px 50px rgba(0,0,0,.7); margin: 11px; }
.mon-stage::before { inset: 0; left: 0; top: 0; width: auto; height: auto; border: 0; border-radius: inherit; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55)); }
.mon-stage::after { content: 'PLAY \25B6'; right: 22px; top: 16px; bottom: auto; width: auto; height: auto; border: 0; font-family: var(--f-vhs); font-size: 28px; color: var(--osd); text-shadow: var(--chroma); }
.mon-stage.locked::after { content: 'NO SIGNAL'; color: #ff3b42; }
.stage-msg, .stage-lock b, .stage-lock small, .mstat span { font-family: var(--f-vhs); letter-spacing: .08em; }
.stage-msg { font-size: 28px; color: var(--osd); text-shadow: var(--chroma); }
.stage-lock b { font-size: 34px; letter-spacing: .1em; margin: 0; }
.stage-lock small { font-size: 20px; }
.mstat span { font-size: 17px; }
.code-form { border: 1px dashed rgba(243,240,230,.35); background: rgba(0,0,0,.55); }
.code-in { font-family: var(--f-vhs) !important; font-size: 24px; letter-spacing: .1em; color: var(--osd); text-shadow: var(--chroma); padding: 4px 14px; }
.code-in::placeholder { font-size: 20px; letter-spacing: .1em; color: rgba(243,240,230,.4); }
.code-btn { font-family: var(--f-vhs) !important; font-size: 22px; letter-spacing: .1em; background: var(--marker-red); }

.map-cards { gap: clamp(18px, 2.6vw, 40px); }
.mapcard { background: #0c0b0e; border: 0; box-shadow: 0 0 0 1px #000, 0 16px 40px rgba(0,0,0,.65); transform: rotate(-.9deg); }
.mapcard:nth-child(2) { transform: rotate(.7deg); }
.mapcard:nth-child(3) { transform: rotate(-.3deg); }
.mapcard:hover { transform: translateY(-6px) rotate(0); }
.mapcard.sel { box-shadow: 0 0 0 3px var(--pumpkin), 0 0 34px rgba(255,122,24,.35); }
.mp-text { background: var(--paper); margin: -18px 16px 0; padding: 10px 16px 10px; position: relative; transform: rotate(-1.2deg); box-shadow: 0 6px 14px rgba(0,0,0,.55); }
.mapcard:nth-child(2) .mp-text { transform: rotate(1deg); }
.mp-text b { font-family: var(--f-marker); font-weight: 400; letter-spacing: .01em; text-transform: none; font-size: clamp(20px, 1.7vw, 28px); color: var(--marker-red); }
.mp-text small { color: rgba(28,23,18,.8); font-size: 14px; }
.mp-tag { font-family: var(--f-vhs); font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: rgba(243,240,230,.6); border: 0; margin: 12px 18px 14px; }
.mapcard.sel .mp-tag { color: var(--pumpkin); }
.mapcard.sel .mp-tag::before { content: '\25B6  '; animation: recBlink .9s steps(1) infinite; }

/* toasts, pause, end */
.menu-toasts .toast { font-family: var(--f-vhs); font-weight: 400; font-size: 40px; letter-spacing: .06em; color: var(--osd); text-shadow: var(--chroma); }
.menu-toasts .toast.scream { font-family: var(--f-vhs); font-size: 60px; color: #ff3b42; text-shadow: -2px 0 rgba(0,255,170,.6), 2px 0 rgba(255,0,170,.7), 0 0 24px rgba(224,36,46,.8); }
.center-card .mbtn { font-size: clamp(30px, 2.4vw, 42px); }
.center-card .mbtn:first-child { font-size: clamp(38px, 3vw, 54px); }
.center-card .menu-items { gap: 2px; }
.center-card .big { font-family: var(--f-vhs); font-weight: 400; font-size: 72px; letter-spacing: .08em; text-shadow: var(--chroma); }
.end-reason { font-family: var(--f-vhs); font-style: normal; font-size: 26px; letter-spacing: .04em; color: var(--osd); text-shadow: var(--chroma); opacity: .8; }
.end-diff { font-family: var(--f-vhs); font-size: 22px; letter-spacing: .08em; }
.stat small, .lvl-text { font-family: var(--f-vhs); font-size: 18px; letter-spacing: .1em; }
.stat b { font-family: var(--f-vhs); font-weight: 400; font-size: 42px; text-shadow: var(--chroma); }
.xp-gain { font-family: var(--f-vhs); font-weight: 400; font-size: 30px; letter-spacing: .08em; }
.xp-gain b { font-size: 44px; }
.lvl-text b { font-family: var(--f-vhs); font-size: 34px; }
.unlock-card { --rot: -1.2deg; padding: 22px 40px 14px; }
.unlock-card small { font-family: var(--f-vhs); font-weight: 400; font-size: 22px; letter-spacing: .1em; color: var(--ink); }
.unlock-card b { font-family: var(--f-marker); color: var(--marker-red); text-shadow: none; font-size: 40px; }
.unlock-card em { font-family: var(--f-vhs); font-style: normal; font-size: 18px; color: rgba(28,23,18,.65); }
.end.on .unlock-card { animation: unlockIn .9s 2.5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes unlockIn { from { opacity: 0; transform: rotate(var(--rot)) scale(1.6); filter: blur(8px); } to { opacity: 1; transform: rotate(var(--rot)); filter: none; } }
.unleash-text { font-family: var(--f-vhs); text-transform: uppercase; letter-spacing: .06em; text-shadow: -4px 0 rgba(0,255,170,.7), 4px 0 rgba(255,0,170,.8), 0 0 40px var(--blood-hi); }

@media (max-height: 800px) {
  .menu .menu-items .mbtn[data-act="play"] { font-size: 60px; }
  .menu .menu-items .mbtn[data-act="monsters"] { font-size: 36px; }
  .menu .menu-items .mbtn[data-act="map"] { font-size: 32px; }
  .menu .menu-items .mbtn[data-act="how"] { font-size: 26px; margin-top: 4px; }
  .menu .menu-items .mbtn[data-act="settings"] { font-size: 24px; }
  .menu .menu-items .mbtn[data-act="credits"] { font-size: 22px; }
  .title { font-size: clamp(52px, 7vw, 104px); }
  .panel { padding: 20px 24px 12px; }
  .panel .objectives { font-size: 13.5px; line-height: 1.4; }
  .showcase-plate { padding: 16px 18px 12px; }
  .plate-blurb { font-size: 13px; margin: 6px 0; }
  .mc-text b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .vhs-track, .osd-rec, .osd-rec i, .mcard.sel .sigil { animation: none !important; } }

/* fixes after first VHS pass */
.menu.wide-open .showcase-plate { visibility: hidden; animation: none; }
.menu.wide-open .osd-tr { opacity: 0; }
.mon-stage { background: radial-gradient(ellipse at 50% 72%, #3a0a10, #120a10 45%, #060508 100%); }

/* How to Play: controller section */
.pad-title { font-family: "Permanent Marker", "Cinzel", serif; font-size: 20px; margin: 14px 0 6px; letter-spacing: .02em; }