/* THE NULL ROAD — CROSSING · UI styles */
@font-face { font-family: "Pretendard"; src: url("../assets/fonts/Pretendard-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../assets/fonts/Pretendard-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --gold: #f2c57c; --gold-hi: #ffe2a8; --gold-lo: #8a6a35;
  --kalvo: #cfe9ff; --bandi: #6ff3ff; --noise: #ff4d6d;
  --ink: #ece8df; --muted: #9aa2ad; --panel: rgba(8, 10, 16, 0.78); --line: rgba(242, 197, 124, 0.28);
  --ui: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #030407; overflow: hidden; }
body { color: var(--ink); font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 20px; }

#ui { position: fixed; inset: 0; pointer-events: none; font-size: calc(16px * var(--ui)); }
#ui .screen { position: absolute; inset: 0; z-index: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.2em; animation: fadeIn .45s ease both; }
#ui .screen.dim { background: radial-gradient(ellipse at center, rgba(3,4,8,.55), rgba(3,4,8,.9)); }
#ui .screen.clear { background: transparent; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.logo { width: min(64vw, 900px); filter: drop-shadow(0 0 18px rgba(242,197,124,.35)); }
.logo.small { width: min(44vw, 560px); }
.tagline { letter-spacing: .5em; font-size: .95em; color: var(--gold); text-transform: uppercase; margin-top: -.4em; text-align: center; }
.tagline small { display: block; letter-spacing: .12em; color: var(--muted); margin-top: .6em; text-transform: none; font-size: .9em; }
.press { margin-top: 12vh; letter-spacing: .4em; font-size: 1.05em; animation: pulse 2.2s ease-in-out infinite; color: var(--gold-hi); }
.foot { position: absolute; bottom: 1.4em; left: 0; right: 0; text-align: center; color: var(--muted); font-size: .78em; letter-spacing: .06em; }

.menu { display: flex; flex-direction: column; gap: .55em; min-width: min(80vw, 22em); }
.btn { pointer-events: auto; font: inherit; font-size: 1.08em; color: var(--ink); background: rgba(10,12,18,.55); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: .75em 1.4em; text-align: left; cursor: pointer; letter-spacing: .04em; position: relative; outline: none;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.btn .hint { float: right; color: var(--muted); font-size: .8em; margin-top: .2em; }
.btn:hover, .btn.focus { border-color: var(--gold); background: rgba(40,30,14,.55); box-shadow: 0 0 0 1px rgba(242,197,124,.25), 0 0 26px rgba(242,197,124,.18); transform: translateX(4px); }
.btn.focus::before { content: ""; position: absolute; left: -.9em; top: 50%; width: .45em; height: .45em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); transform: translateY(-50%); }
.btn.primary { border-color: rgba(242,197,124,.5); color: var(--gold-hi); font-weight: 700; }
.btn:disabled { opacity: .4; cursor: default; }
/* quiet out-of-game link under the main menu (Lensmera) */
.btn.link { font-size: .8em; color: var(--muted); background: transparent; border-color: transparent; padding: .4em 1em; margin-top: .6em; }
.btn.link:hover, .btn.link.focus { color: var(--gold-hi); border-color: rgba(242,197,124,.45); background: rgba(40,30,14,.4); }
.btn.link::after { content: " \2197"; }
.row { display: flex; gap: .8em; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.center { text-align: center; }
.title { font-weight: 700; font-size: 1.9em; letter-spacing: .12em; color: var(--gold-hi); text-align: center; text-shadow: 0 0 24px rgba(242,197,124,.35); }
.subtitle-line { color: var(--muted); text-align: center; max-width: 40em; line-height: 1.6; }
.records { color: var(--muted); font-size: .85em; letter-spacing: .05em; text-align: center; }

/* character select */
.chars { display: flex; gap: 1.4em; justify-content: center; flex-wrap: wrap; }
.char { width: min(40vw, 20em); border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; animation: rise .5s ease both; transition: transform .15s ease, border-color .15s, box-shadow .15s; outline: none; font: inherit; color: inherit; text-align: left; padding: 0; }
.char.focus, .char:hover { border-color: var(--gold); box-shadow: 0 0 34px rgba(242,197,124,.25); transform: translateY(-4px); }
.char.selected { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(242,197,124,.6), 0 0 40px rgba(242,197,124,.3); }
.char .art { height: min(38vh, 22em); background-size: cover; background-position: center 18%; position: relative; }
.char .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,10,16,.96)); }
.char .body { padding: 0 1.1em 1.1em; margin-top: -2.4em; position: relative; }
.char h3 { margin: 0; font-size: 1.5em; letter-spacing: .06em; }
.char .role { color: var(--gold); font-size: .85em; letter-spacing: .08em; margin: .2em 0 .7em; }
.char p { margin: .3em 0; color: #cfd3da; font-size: .88em; line-height: 1.5; }
.stat { display: flex; align-items: center; gap: .6em; font-size: .78em; color: var(--muted); margin: .25em 0; }
.stat .bar { flex: 1; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.seg { display: flex; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; }
.seg .btn { border: none; border-radius: 0; text-align: center; min-width: 7em; }
.seg .btn.on { background: rgba(242,197,124,.18); color: var(--gold-hi); }
.desc { color: var(--muted); font-size: .85em; text-align: center; min-height: 1.3em; }

/* level-up cards */
.cards { display: flex; gap: 1.1em; justify-content: center; flex-wrap: wrap; padding: 0 1em; }
.card { width: min(28vw, 15.5em); min-height: 19em; background: linear-gradient(180deg, rgba(20,18,14,.92), rgba(8,9,13,.95)); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 1.2em 1.1em; cursor: pointer; outline: none; font: inherit; color: inherit; text-align: left; position: relative;
  animation: rise .38s cubic-bezier(.2,.9,.3,1.2) both; transition: transform .14s ease, border-color .14s, box-shadow .14s; display: flex; flex-direction: column; gap: .5em; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; } .card:nth-child(4) { animation-delay: .18s; }
.card.focus, .card:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 30px rgba(242,197,124,.22); }
.card .icon { width: 3.6em; height: 3.6em; border-radius: 12px; display: grid; place-items: center; font-size: 1.7em; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.card .icon canvas { width: 100%; height: 100%; }
.card h4 { margin: .3em 0 0; font-size: 1.15em; }
.card .lv { font-size: .78em; color: var(--gold); letter-spacing: .08em; }
.card p { margin: 0; color: #c9ced6; font-size: .86em; line-height: 1.55; flex: 1; }
.card .pips { display: flex; gap: 4px; }
.card .pips i { width: 14px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.card .pips i.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.card .badge { position: absolute; top: .9em; right: .9em; font-size: .68em; letter-spacing: .12em; padding: .25em .6em; border-radius: 99px; background: rgba(111,243,255,.14); color: var(--bandi); }
.card.evolve { border-color: rgba(255,226,168,.55); background: linear-gradient(180deg, rgba(58,42,14,.95), rgba(14,11,6,.96)); }
.card.evolve .badge { background: linear-gradient(90deg, #8a6a35, #ffe2a8, #8a6a35); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; color: #1a1206; font-weight: 700; }
.card .key { position: absolute; bottom: .8em; right: 1em; color: var(--muted); font-size: .72em; }
.build { display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; max-width: 44em; }
.chip { font-size: .78em; padding: .35em .7em; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #d6d9df; }
.chip b { color: var(--gold); font-weight: 700; }

/* story panels */
.story { justify-content: flex-end; padding-bottom: 5vh; background: #000; overflow: hidden; }
.story .bgl { position: absolute; inset: -3%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; animation: kb 26s ease-in-out infinite alternate; }
.story .bgl.on { opacity: 1; }
@keyframes kb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1%, -1%); } }
.story .shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0, transparent 18%, transparent 52%, rgba(0,0,0,.82) 100%); }
.story .stage { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; }
.wave { width: 3.6em; height: 1em; overflow: hidden; }
.wave path { stroke: var(--kalvo); stroke-width: 2; fill: none; animation: wv .5s linear infinite; }
@keyframes wv { from { transform: translateX(0); } to { transform: translateX(-20px); } }
.over { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; z-index: -1; }
.screen > .over + * { position: relative; }
.story .letterbox-top, .story .letterbox-bot { position: absolute; left: 0; right: 0; height: 6vh; background: #000; }
.story .letterbox-top { top: 0; } .story .letterbox-bot { bottom: 0; }
.dialog { position: relative; width: min(92vw, 60em); min-height: 8.5em; display: flex; gap: 1.2em; align-items: flex-end; z-index: 2; }
.dialog .portrait { width: 8.2em; height: 10.2em; flex: none; border-radius: 12px; background-size: cover; background-position: center 20%;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 40px rgba(0,0,0,.6); animation: rise .35s ease both; }
.dialog .portrait.none { display: none; }
.dialog .box { flex: 1; background: rgba(6,8,12,.82); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 1.1em 1.3em 1.2em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dialog .name { font-weight: 700; letter-spacing: .1em; font-size: .9em; margin-bottom: .45em; display: flex; align-items: center; gap: .6em; }
.dialog .text { font-size: 1.22em; line-height: 1.6; min-height: 3.2em; }
.dialog .alt { color: var(--muted); font-size: .86em; margin-top: .45em; line-height: 1.5; }
.dialog .next { position: absolute; right: 1.2em; bottom: .8em; color: var(--muted); font-size: .75em; animation: pulse 1.6s infinite; }
.narration { position: relative; z-index: 2; width: min(86vw, 46em); text-align: center; font-size: 1.35em; line-height: 1.75; text-shadow: 0 2px 18px #000, 0 0 2px #000; margin-bottom: 8vh; animation: rise .6s ease both; }
.narration .alt { display: block; color: #b9bec7; font-size: .7em; margin-top: .8em; }
.skip { position: absolute; top: 8vh; right: 3vw; z-index: 3; font-size: .85em; }
.wave { width: 3.4em; height: 1em; }
.worldcard { position: absolute; top: 14vh; left: 0; right: 0; text-align: center; z-index: 2; animation: rise .8s ease both; }
.worldcard .no { color: var(--gold); letter-spacing: .5em; font-size: .9em; }
.worldcard h2 { margin: .25em 0 .2em; font-size: 3.1em; letter-spacing: .08em; text-shadow: 0 4px 30px #000; }
.worldcard .sub { color: #d7d9de; letter-spacing: .12em; text-shadow: 0 2px 14px #000; }

/* options & workshop */
.panel { background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.2em 1.4em; width: min(92vw, 40em); max-height: 72vh; overflow-y: auto; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .55em .7em; border-radius: 10px; outline: none; cursor: pointer; border: 1px solid transparent; }
.opt.focus, .opt:hover { border-color: var(--line); background: rgba(242,197,124,.06); }
.opt label { flex: 1; pointer-events: none; }
.opt .val { color: var(--gold-hi); min-width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; pointer-events: none; }
.opt .slider { width: 9em; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); position: relative; pointer-events: none; }
.opt .slider i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--gold); }
.opt small { display: block; color: var(--muted); font-size: .78em; margin-top: .15em; }
.ups .opt .cost { color: var(--gold); }
.ether { color: var(--gold-hi); font-weight: 700; letter-spacing: .06em; }
.help { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 1em; width: min(92vw, 56em); }
.help .panel { width: auto; }
.help h4 { margin: 0 0 .5em; color: var(--gold); letter-spacing: .08em; }
.help p, .help li { color: #cfd3da; font-size: .9em; line-height: 1.6; margin: .2em 0; }
.help ul { padding-left: 1.1em; margin: 0; }
kbd { font: inherit; font-size: .82em; padding: .1em .45em; border-radius: 5px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.stats { display: grid; grid-template-columns: auto auto; gap: .4em 2.2em; font-size: 1.05em; }
.stats span:nth-child(odd) { color: var(--muted); }
.stats span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.credits { max-width: 40em; text-align: center; line-height: 1.8; color: #cfd3da; }
.credits h4 { color: var(--gold); letter-spacing: .2em; margin: 1.2em 0 .3em; font-size: .85em; }

/* in-game subtitle + toasts */
#subtitle { position: fixed; left: 50%; bottom: 7vh; transform: translateX(-50%); max-width: min(88vw, 52em); text-align: center; pointer-events: none;
  font-size: calc(19px * var(--ui)); line-height: 1.5; opacity: 0; transition: opacity .25s ease; text-shadow: 0 2px 10px #000, 0 0 3px #000; }
#subtitle.show { opacity: 1; }
/* on menu screens (character select, workshop) a voice line speaks from the lower-left corner, clear of the buttons */
#subtitle.corner { left: 3vw; bottom: 5vh; transform: none; text-align: left; max-width: min(21vw, 19em); font-size: calc(16px * var(--ui)); }
@media (max-width: 760px) { #subtitle.corner { left: 50%; transform: translateX(-50%); text-align: center; max-width: 92vw; bottom: auto; top: 1.5vh; } }
#subtitle .who { display: inline-flex; align-items: center; gap: .5em; font-size: .72em; letter-spacing: .14em; font-weight: 700; margin-bottom: .2em; }
#subtitle .alt { display: block; color: #b8bdc6; font-size: .72em; }
#toasts { position: fixed; top: 13vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5em; align-items: center; pointer-events: none; font-size: calc(16px * var(--ui)); }
.toast { background: rgba(8,10,16,.86); border: 1px solid var(--line); color: var(--gold-hi); padding: .55em 1.2em; border-radius: 99px; letter-spacing: .06em;
  animation: rise .35s ease both; box-shadow: 0 0 24px rgba(242,197,124,.15); }
.toast.out { opacity: 0; transition: opacity .5s ease; }

/* touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; display: none; }
body.touch #touch.on { display: block; }
#stick { position: absolute; width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); display: none; transform: translate(-50%, -50%); }
#stick.on { display: block; }
#stick-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(242,197,124,.35); border: 1px solid rgba(242,197,124,.7); }
#touch-dash, #touch-pause { position: absolute; pointer-events: auto; border-radius: 50%; border: 1px solid rgba(242,197,124,.5); background: rgba(10,10,14,.5); color: var(--gold-hi); font: 700 13px "Pretendard", sans-serif; letter-spacing: .1em; }
#touch-dash { right: 5vw; bottom: 9vh; width: 86px; height: 86px; }
#touch-pause { right: 4vw; top: 4vh; width: 48px; height: 48px; }

.hidden { display: none !important; }