[hidden] { display: none !important; }
:root { --bg: #0f0e15; --panel: #1d1b29; --line: #2f2c42; --txt: #f2efe6; --muted: #a39fb6; --acc: #ffd23f; --zom: #8ee05a; --red: #ff5a4a; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--txt); font-family: 'Galmuri11', monospace; }
body { min-height: 100vh; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
.top { max-width: 1280px; margin: 0 auto; padding: 10px 16px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.top a { text-decoration: none; } .top b { color: var(--acc); letter-spacing: .05em; }
.top .crumb { opacity: .8; }

/* 게임 영역 */
.game { position: relative; margin: 0 auto; width: min(100%, 1280px, calc((100vh - 70px) * 16 / 9)); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.zm-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #14121c; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 3px #000, 0 12px 40px rgba(0,0,0,.6); touch-action: manipulation; }
.zm-stage canvas { display: block; width: 100%; height: 100%; }
.nojs { padding: 40px; text-align: center; }

.zm-top { position: absolute; left: 1%; top: 1.6vw; top: min(1.6vw, 18px); display: flex; gap: 6px; z-index: 3; }
.zm-ib { width: clamp(28px, 3.6vw, 44px); height: clamp(28px, 3.6vw, 44px); border: 2px solid #000; border-radius: 8px; background: #2a2738; color: #fff; font-size: clamp(11px, 1.2vw, 15px); box-shadow: 0 3px 0 #000; }
.zm-ib:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }

.zm-toast { position: absolute; left: 50%; top: 19%; transform: translate(-50%, -10px); background: rgba(12,10,20,.88); color: var(--acc); border: 2px solid var(--acc); padding: .5em 1.2em; border-radius: 8px; font-size: clamp(13px, 2vw, 24px); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 4; transition: opacity .2s, transform .2s; }
.zm-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 하단 바: 가로 화면에서는 게임 화면 위에 겹침 */
.zm-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 1%; padding: 0 1% 1%; z-index: 3; pointer-events: none; }
.zm-bar > * { pointer-events: auto; }
.zm-courage { position: relative; width: 12%; height: clamp(22px, 3.4vw, 40px); background: #221f2e; border: 2px solid #000; border-radius: 8px; overflow: hidden; align-self: flex-end; box-shadow: 0 3px 0 #000; }
.zm-cfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffe066, #f0a500); width: 0; }
.zm-courage span { position: relative; display: block; text-align: center; font-size: clamp(12px, 1.7vw, 22px); line-height: clamp(18px, 3vw, 36px); color: #fff; text-shadow: 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.zm-courage em { position: absolute; left: 6px; top: -1px; font-style: normal; font-size: clamp(8px, .9vw, 11px); color: #000; opacity: .55; }
.zm-cards { flex: 1; display: flex; gap: .8%; justify-content: center; }
.zm-card { position: relative; width: clamp(40px, 7.2vw, 88px); aspect-ratio: 1 / 1.12; padding: 0; border: 2px solid #000; border-radius: 9px; background: linear-gradient(#3b3652, #262236); box-shadow: 0 4px 0 #000; overflow: hidden; color: #fff; transition: transform .06s; }
.zm-card img { position: absolute; left: 50%; bottom: 22%; height: 72%; transform: translateX(-50%); image-rendering: auto; pointer-events: none; }
.zm-card b { position: absolute; left: 0; right: 0; bottom: 0; background: #000; font-size: clamp(10px, 1.3vw, 16px); color: var(--acc); line-height: 1.5; font-weight: normal; }
.zm-card .zm-key { position: absolute; top: 3px; left: 5px; font-size: clamp(8px, .8vw, 11px); color: #fff; opacity: .5; }
.zm-cdv { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,.55); pointer-events: none; }
.zm-card.off { filter: grayscale(.85) brightness(.75); }
.zm-card:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.zm-skills { position: relative; display: flex; gap: 6px; align-items: flex-end; padding-top: clamp(26px, 3vw, 36px); }
.zm-skill { position: relative; width: clamp(40px, 6vw, 74px); aspect-ratio: 1; border: 2px solid #000; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5d4a7a, #2b2140); color: #fff; padding: 0; box-shadow: 0 4px 0 #000; overflow: visible; }
.zm-skill .zm-sic { display: block; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-size: clamp(16px, 2.6vw, 30px); line-height: 1; }
.zm-skill .zm-sic img { height: clamp(18px, 2.8vw, 34px); }
.zm-skill b { position: absolute; left: 50%; top: -1.35em; transform: translateX(-50%); white-space: nowrap; font-weight: normal; font-size: clamp(8px, .85vw, 11px); color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.zm-skill em { position: absolute; right: -4px; bottom: -4px; background: #000; color: #ff9a3c; font-style: normal; font-size: clamp(8px, .9vw, 12px); padding: 1px 4px; border-radius: 6px; }
.zm-skill.off { filter: grayscale(1) brightness(.6); }
.zm-skill.rdy { animation: zmPulse .9s infinite; }
@keyframes zmPulse { 50% { box-shadow: 0 4px 0 #000, 0 0 0 4px rgba(255,154,60,.7); } }
.zm-rage { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #221f2e; border: 2px solid #000; border-radius: 6px; overflow: hidden; }
.zm-rage div { height: 100%; width: 0; background: linear-gradient(90deg, #ff6a3c, #ffb03c); }
.zm-rage span { display: none; }

/* 오버레이 화면 */
.zm-scr { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 5; background: rgba(8,7,14,.45); }
.zm-scr.on { display: flex; }
.zm-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.zm-btn { border: 3px solid #000; border-radius: 10px; background: #e8e2d0; color: #1a1724; font-size: clamp(13px, 1.6vw, 19px); padding: .55em 1.2em; box-shadow: 0 5px 0 #000; }
.zm-btn.pri { background: var(--acc); }
.zm-btn.big { font-size: clamp(16px, 2.3vw, 28px); padding: .5em 1.8em; }
.zm-btn.sm { font-size: 13px; padding: .35em .8em; box-shadow: 0 3px 0 #000; display: inline-flex; align-items: center; gap: 4px; }
.zm-btn.sm img { height: 15px; }
.zm-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #000; }
.zm-btn:disabled { opacity: .45; cursor: default; }
.zm-title { text-align: center; padding-bottom: 14%; }
.zm-kicker { margin: 0; color: var(--acc); font-size: clamp(10px, 1.3vw, 16px); letter-spacing: .1em; text-shadow: 0 2px 0 #000; }
.zm-logo { margin: .1em 0 0; font-family: 'Galmuri11', monospace; font-weight: bold; font-size: clamp(44px, 9vw, 116px); line-height: 1; color: var(--zom); text-shadow: 0 5px 0 #1d4a10, 0 9px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 -4px 0 #000; letter-spacing: .02em; }
.zm-tag { margin: .6em 0 0; font-size: clamp(12px, 1.8vw, 22px); color: #fff; text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000; }
.zm-hint { margin-top: 1.2em; font-size: clamp(9px, 1vw, 12px); color: #ddd; text-shadow: 0 1px 0 #000; }
.zm-modal { background: var(--panel); border: 3px solid #000; border-radius: 14px; box-shadow: 0 8px 0 #000; padding: clamp(14px, 2.4vw, 30px); text-align: center; min-width: min(90%, 360px); max-width: 92%; max-height: 92%; overflow: auto; }
.zm-modal h3 { margin: 0 0 6px; font-size: clamp(18px, 2.6vw, 32px); color: var(--acc); display: flex; align-items: center; justify-content: center; gap: 10px; }
.zm-modal h3 img { height: 1.3em; }
.zm-sub { margin: 0; color: var(--muted); font-size: clamp(11px, 1.3vw, 15px); }
.zm-pcards { display: flex; gap: 12px; margin-top: 16px; justify-content: center; }
.zm-pc { width: clamp(110px, 17vw, 210px); min-height: clamp(110px, 15vw, 190px); border: 3px solid #000; border-radius: 12px; background: linear-gradient(#fff6d8, #f0dfae); color: #1a1724; box-shadow: 0 6px 0 #000; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 10px; transition: transform .1s; }
.zm-pc:hover { transform: translateY(-4px) rotate(-1deg); }
.zm-pc b { font-size: clamp(14px, 1.9vw, 22px); }
.zm-pc span { font-size: clamp(11px, 1.3vw, 15px); color: #5a4a2a; }
.zm-snd { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.zm-tg { border: 2px solid #000; border-radius: 8px; background: #2a2738; color: var(--muted); font-size: 12px; padding: 4px 10px; }
.zm-tg.on { color: #fff; background: #3c5a34; }
.zm-res.win h3 { color: var(--acc); } .zm-res.lose h3 { color: var(--red); }
.zm-stars { margin: 4px 0; font-size: clamp(30px, 4.6vw, 54px); color: var(--acc); text-shadow: 0 3px 0 #000; letter-spacing: .1em; }
.zm-stars span { color: #3a364c; }
.zm-sum { list-style: none; padding: 0; margin: 10px auto 0; max-width: 300px; font-size: clamp(12px, 1.4vw, 16px); }
.zm-sum li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.zm-sum b { color: var(--acc); font-weight: normal; }
.zm-new { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; background: #2a3a26; border: 2px solid #000; border-radius: 10px; padding: 8px 14px; text-align: left; }
.zm-new img { height: 56px; } .zm-new span { display: flex; flex-direction: column; font-size: 12px; color: var(--zom); } .zm-new b { font-size: 18px; color: #fff; } .zm-new small { color: var(--muted); }

/* 노선도 */
.zm-map, .zm-shop { width: 94%; max-height: 94%; background: rgba(20,18,30,.94); border: 3px solid #000; border-radius: 14px; box-shadow: 0 8px 0 #000; padding: clamp(10px, 2vw, 24px); display: flex; flex-direction: column; }
.zm-mhead { display: flex; justify-content: space-between; align-items: center; }
.zm-mhead h2 { margin: 0; font-size: clamp(15px, 2.2vw, 26px); color: var(--acc); }
.zm-coins { display: flex; align-items: center; gap: 6px; font-size: clamp(14px, 1.8vw, 22px); color: var(--acc); }
.zm-coins img { height: 1.2em; }
.zm-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; font-size: clamp(10px, 1.1vw, 13px); text-align: center; }
.zm-zones span { padding: 3px; border-radius: 6px; color: #000; }
.zm-zones .z1, .zm-stop.z1 .zm-dot { background: #8ee05a; } .zm-zones .z2, .zm-stop.z2 .zm-dot { background: #ffb03c; } .zm-zones .z3, .zm-stop.z3 .zm-dot { background: #ff6a8a; }
.zm-route { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 12px; }
.zm-route::before { content: ''; position: absolute; left: 4%; right: 4%; top: clamp(15px, 2vw, 24px); height: 6px; background: #3a364c; border-radius: 3px; }
.zm-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; padding: 0; }
.zm-dot { width: clamp(30px, 4vw, 48px); aspect-ratio: 1; border-radius: 50%; border: 3px solid #000; color: #000; display: grid; place-items: center; font-size: clamp(12px, 1.6vw, 19px); font-weight: bold; box-shadow: 0 3px 0 #000; }
.zm-stop b { font-weight: normal; font-size: clamp(8px, .95vw, 12px); line-height: 1.3; word-break: keep-all; text-align: center; min-height: 2.6em; }
.zm-stop em { font-style: normal; font-size: clamp(8px, 1vw, 13px); color: var(--acc); }
.zm-stop.lock { opacity: .4; cursor: default; } .zm-stop.lock .zm-dot { background: #555 !important; }
.zm-stop.cur .zm-dot { animation: zmPulse .9s infinite; outline: 3px solid #fff; }
.zm-boss { position: absolute; top: -10px; right: 0; font-style: normal; font-size: 9px; background: var(--red); color: #fff; padding: 1px 4px; border-radius: 4px; border: 1px solid #000; }
.zm-stop:not(.lock):hover .zm-dot { transform: translateY(-3px); }
.zm-ups { overflow: auto; margin-top: 8px; padding-right: 4px; }
.zm-ups h4 { margin: 10px 0 4px; font-size: 13px; color: var(--muted); font-weight: normal; }
.zm-up { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: #24212f; border: 2px solid #000; border-radius: 8px; margin-bottom: 6px; text-align: left; }
.zm-up b { font-weight: normal; font-size: 14px; } .zm-up small { color: var(--acc); } .zm-up span { display: block; font-size: 11px; color: var(--muted); }
.zm-ut { height: 40px; justify-self: center; } .zm-ui { font-size: 26px; text-align: center; }

/* 세로 모바일: 조작 바를 화면 아래로 */
@media (orientation: portrait) and (max-width: 760px) {
  .game { width: 100%; }
  .zm-stage { border-radius: 0; }
  .game.playing .zm-bar { position: static; flex-wrap: wrap; padding: 8px; gap: 8px; background: #17151f; }
  .zm-courage { width: calc(100% - 140px); order: -1; height: 28px; }
  .game.playing .zm-top { top: calc(100vw * 9 / 16 + 6px); left: auto; right: 8px; }
  .zm-ib { width: 38px; height: 34px; }
  .zm-courage span { line-height: 24px; font-size: 15px; }
  .zm-cards { flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
  .zm-card { width: calc(25% - 6px); max-width: 84px; }
  .zm-skills { flex: 1 1 100%; justify-content: center; gap: 18px; padding-top: 30px; }
  .zm-skill { width: 58px; }
  .zm-skill b { font-size: 10px; }
  .zm-rage { left: 10%; right: 10%; }
  .zm-map .zm-route { grid-template-columns: repeat(6, 1fr); row-gap: 8px; }
  .zm-route::before { display: none; }
  .zm-scr:has(.zm-map, .zm-shop, .zm-modal) { position: fixed; z-index: 50; background: rgba(8,7,14,.8); }
  .zm-title .zm-hint { display: none; }
  .zm-title .zm-tag { margin-top: .3em; }
  .zm-btn.big { font-size: 15px; }
  .zm-map, .zm-shop { width: 96%; max-height: 92vh; }
  .zm-pcards { flex-direction: column; align-items: center; }
  .zm-pc { width: 80%; min-height: 0; }
  .zm-title { padding-bottom: 0; }
  .rotate-tip { display: block !important; }
}
.rotate-tip { display: none; text-align: center; font-size: 12px; color: var(--muted); padding: 8px; }

/* 소개 영역 */
.about { max-width: 960px; margin: 40px auto 0; padding: 18px 16px; border-top: 2px solid var(--line); font-size: 13px; line-height: 1.85; color: var(--muted); }
.about h1, .about h2 { font-size: 17px; color: var(--zom); margin: 0 0 8px; }
.about h3 { font-size: 14px; color: var(--txt); margin: 16px 0 4px; }
.about ol, .about ul { padding-left: 1.4em; margin: 0; } .about dt { color: var(--txt); margin-top: 8px; } .about dd { margin: 0; }
.about a { color: var(--acc); }
.foot { max-width: 960px; margin: 10px auto 0; padding: 12px 16px 30px; text-align: center; font-size: 12px; color: var(--muted); }
.foot a { margin: 0 6px; } .foot p { margin: 8px 0 0; opacity: .8; line-height: 1.6; }
body.playing .about { display: none; }

.game:fullscreen { width: min(100vw, calc(100vh * 16 / 9)); background: #000; display: flex; flex-direction: column; justify-content: center; }
.game:fullscreen .zm-stage { border-radius: 0; }

/* 가로 모바일: 헤더 숨기고 화면 꽉 채우기 */
@media (orientation: landscape) and (max-height: 520px) {
  .top { display: none; }
  .game { width: min(100%, calc(100vh * 16 / 9)); }
  .zm-stage { border-radius: 0; }
  .rotate-tip { display: none !important; }
}
.zm-ub { width: 44px; justify-self: center; }