html, body { margin: 0; height: 100%; background: #101a19; overflow: hidden; font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; color: #f3f0e2; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#fade { position: fixed; inset: 0; background: #0d1716; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.hud { position: fixed; left: 14px; top: 12px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; gap: 10px; }
body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(rgba(8,18,16,.42), rgba(8,18,16,0)); pointer-events: none; z-index: 1; }
.hud, .bar, .card, #fade, #err { z-index: 2; }
.hud, .bar, body::before { transition: opacity .9s ease; }
body.idle .hud, body.idle .bar, body.idle::before { opacity: 0; }
body.idle .bar { pointer-events: none; }
.rec { text-shadow: 0 1px 6px rgba(0,0,0,.7); min-width: 150px; }
.rec-zone { font-size: 13px; opacity: .9; letter-spacing: .02em; transition: opacity .8s ease; }
.rec.titling .rec-zone { opacity: 0; }
.rec-line { font-size: 19px; font-weight: 600; margin-top: 1px; font-variant-numeric: tabular-nums; }
.rec-sub { font-size: 12px; margin-top: 6px; opacity: .92; min-height: 15px; }
.rec-sub b { color: #ffd98a; font-weight: 600; }
#rescue { background: rgba(240,200,120,.32); }
.rec-line .sep { opacity: .5; margin: 0 6px; font-weight: 400; }
.strip { position: relative; height: 3px; margin-top: 7px; width: 150px; background: rgba(255,255,255,.22); border-radius: 2px; }
.strip i { position: absolute; left: 0; top: 0; bottom: 0; background: #f0e1aa; border-radius: 2px; }
.strip b { position: absolute; top: -2px; width: 1px; height: 7px; background: rgba(255,255,255,.6); }
.card { position: fixed; left: 0; right: 0; top: 17%; text-align: center; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease; padding: 26px 16px;
  background: radial-gradient(ellipse 46% 60% at center, rgba(8,18,16,.42), rgba(8,18,16,0) 100%); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.card.show { opacity: 1; transform: none; }
.card .kicker { font-size: 13px; letter-spacing: .28em; opacity: .85; }
.card .big { font-size: clamp(30px, 6.2vw, 58px); font-weight: 700; letter-spacing: .06em; margin: 6px 0 8px; }
.card .sub { white-space: pre-line; line-height: 1.7; font-size: 14px; opacity: .85; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .card { transform: none; transition: opacity .3s linear; } }
.stat { font-size: 10.5px; text-align: right; opacity: .55; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.6); line-height: 1.5; }
.bar { position: fixed; left: 0; right: 0; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 10px; }
.group { display: flex; gap: 2px; background: rgba(14,26,24,.55); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 3px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
button { font: inherit; font-size: 13px; color: #f3f0e2; background: transparent; border: 0; border-radius: 999px; padding: 8px 13px; cursor: pointer; }
button:hover { background: rgba(255,255,255,.12); }
button[aria-pressed="true"] { background: rgba(240,225,170,.26); }
button:focus-visible { outline: 2px solid #f0e1aa; outline-offset: 1px; }
.place { position: fixed; left: 0; right: 0; bottom: 26px; display: none; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px; z-index: 2; text-align: center; text-shadow: 0 1px 10px rgba(0,0,0,.75); }
/* 개발용 표시(구간 이동, 일시정지, 화질, 날씨·시각·계절, 성능 수치)는 개발 모드에서만 보인다 (core.js의 DEV) */
body:not(.dev) .dev-only { display: none !important; }
.place-t { font-size: 20px; font-weight: 600; letter-spacing: .1em; }
.place-s { font-size: 13px; opacity: .88; margin-bottom: 4px; }
body.placing .place { display: flex; }
body.placing .hud, body.placing .bar, body.placing::before { opacity: 0; pointer-events: none; }
/* 도착한 뒤의 마무리: 글이 한 줄씩 천천히 떠오르고, 뒤의 풍경은 조금 어두워진다 */
.ending { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: flex-start; padding: 15vh 28px 0; gap: 2.2vh; text-align: center; z-index: 2; pointer-events: none; background-color: rgba(8,18,16,0); transition: background-color 6s ease; text-shadow: 0 2px 14px rgba(0,0,0,.65); }
.ending.on { display: flex; }
.ending.dim { background-color: rgba(8,18,16,.38); }
.ending p { margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 2.6s ease, transform 2.6s ease; font-size: 16px; line-height: 1.9; letter-spacing: .04em; }
.ending p.on { opacity: 1; transform: none; }
.ending .e-big { font-size: clamp(22px, 5.4vw, 34px); font-weight: 700; letter-spacing: .1em; }
.ending .e-sub { font-size: 13px; opacity: 0; font-variant-numeric: tabular-nums; }
.ending .e-sub.on { opacity: .82; }
.ending small { display: inline-block; margin-top: 6px; font-size: 12px; opacity: .72; letter-spacing: .12em; }
.ending button { pointer-events: auto; margin-top: 2vh; padding: 11px 22px; font-size: 15px; background: rgba(240,225,170,.22); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.ending .hud, body.ending .bar, body.ending .card, body.ending::before { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ending p { transform: none; transition: opacity .4s linear; } }
.bubble { position: fixed; left: 0; top: 0; margin-top: -8px; padding: 4px 11px; border-radius: 14px; background: rgba(255,255,255,.93); color: #27332e; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,.25); will-change: transform; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.bubble span { display: inline-block; position: relative; z-index: 1; }
.bubble.beat span { animation: beat .9s ease-in-out infinite; }
.bubble.show { opacity: 1; }
@keyframes beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.2); } 28% { transform: scale(1); } 42% { transform: scale(1.13); } 56% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bubble.beat span { animation: none; } }
.meet { position: fixed; left: 0; right: 0; bottom: 24%; text-align: center; font-size: 17px; letter-spacing: .1em; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; z-index: 2; text-shadow: 0 1px 10px rgba(0,0,0,.75); }
.meet.show { opacity: 1; }
#log { position: fixed; left: 12px; right: 12px; top: 84px; max-height: 52%; overflow: auto; z-index: 3; padding: 14px 18px; border-radius: 16px; background: rgba(10,20,18,.74); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; line-height: 2; }
#log time { opacity: .6; margin-right: 8px; font-variant-numeric: tabular-nums; }
#err { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #101a19; font-size: 15px; line-height: 1.6; }