@font-face{font-family:Outfit;src:url('vendor/outfit-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url('vendor/outfit-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Outfit;src:url('vendor/outfit-extrabold.ttf') format('truetype');font-weight:800;font-display:swap}

:root{
  --paper:#f8f5ec; --ink:#263e34; --muted:#77837a; --line:#dcded2;
  --coral:#e96646; --mint:#dcebdd; --glass:#fffdf5cc; --glass-line:#ffffff8c;
  --shadow:0 10px 34px #2a3d2e1f;
  --display:'Outfit','Arial Rounded MT Bold',sans-serif;
  --body:'Outfit','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --pad-top:calc(14px + env(safe-area-inset-top));
  --pad-bottom:calc(14px + env(safe-area-inset-bottom));
  --pad-side:calc(16px + env(safe-area-inset-left));
}
body.night{
  --paper:#16292f; --ink:#f0ede0; --muted:#9db1b0; --line:#365055;
  --coral:#f7926e; --mint:#2f4a4c; --glass:#223b43d4; --glass-line:#ffffff1f;
  --shadow:0 10px 34px #00000038;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;background:var(--paper);color:var(--ink);
  font-family:var(--body);-webkit-font-smoothing:antialiased;
  transition:background .8s,color .8s;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,#park-canvas:focus-visible,input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.icon-defs{position:absolute;width:0;height:0}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── 무대 ─────────────────────────────────────────────── */
.stage{position:fixed;inset:0;overflow:hidden}
#park-canvas{position:absolute;inset:0;cursor:grab;touch-action:none}
#park-canvas.dragging{cursor:grabbing}
#park-canvas canvas{display:block;width:100%;height:100%}

/* ── 상단 HUD ─────────────────────────────────────────── */
.hud-top{
  position:absolute;top:0;left:0;right:0;z-index:6;
  padding:var(--pad-top) var(--pad-side) 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  pointer-events:none;
}
.hud-top>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:9px;margin:0;font:800 15px/1 var(--display);letter-spacing:-.3px}
.logo-mark{width:26px;height:26px;color:var(--coral);fill:currentColor;stroke:none;flex:none}
.logo b{font-weight:800;color:var(--coral);margin-left:3px}
.hud-actions{display:flex;align-items:center;gap:7px}
.chip,.icon-button{
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:38px;border-radius:19px;background:var(--glass);
  border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .16s,background .2s;
}
.chip{padding:0 15px 0 12px;font-size:12px;font-weight:600}
.icon-button{width:38px}
.chip svg,.icon-button svg{width:18px;height:18px;flex:none}
.chip:hover,.icon-button:hover{transform:translateY(-1px)}
.chip:active,.icon-button:active{transform:translateY(1px)}
.icon-button[aria-pressed="true"]{background:var(--coral);color:#fff8ec;border-color:transparent}

/* ── 하단 HUD ─────────────────────────────────────────── */
.hud-bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:0 var(--pad-side) var(--pad-bottom);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  pointer-events:none;
}
.hud-bottom>*{pointer-events:auto}
.hint{display:flex;align-items:center;gap:8px;margin:0 0 5px;font-size:11px;color:var(--muted)}
.hint svg{width:17px;height:17px;flex:none;opacity:.75}
.view-controls{
  position:absolute;top:calc(var(--pad-top) + 50px);right:var(--pad-side);z-index:6;
  display:flex;gap:2px;padding:4px;border-radius:24px;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.view-controls button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.view-controls svg{width:17px;height:17px}
.view-controls button:hover{background:var(--mint)}
.corner-buttons{
  position:absolute;right:var(--pad-side);bottom:calc(var(--pad-bottom) + 58px);z-index:7;
  display:flex;align-items:center;gap:11px;
}
.corner-buttons button{
  width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .16s;
}
.corner-buttons button svg{width:24px;height:24px;color:var(--coral)}
.corner-buttons button:hover{transform:translateY(-2px)}
.corner-buttons button:active{transform:translateY(1px)}

/* 설정 메뉴 */
.menu{
  position:absolute;top:calc(var(--pad-top) + 50px);right:var(--pad-side);z-index:9;
  min-width:196px;padding:8px;border-radius:16px;display:flex;flex-direction:column;gap:2px;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  animation:pop-in .18s ease-out;
}
.menu button{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;font-size:12px;font-weight:600;text-align:left;white-space:nowrap}
.menu button:hover{background:color-mix(in srgb,var(--mint) 65%,transparent)}
.menu svg{width:17px;height:17px;color:var(--coral);flex:none}
.menu-row{display:flex;align-items:center;gap:11px;padding:9px 13px;font-size:12px;font-weight:600;white-space:nowrap}
.speed-set{display:flex;gap:3px;margin-left:auto}
.speed-set button{padding:5px 9px;border-radius:9px;font-size:11px;font-weight:700;color:var(--muted)}
.speed-set button.on{background:var(--coral);color:#fff8ec}
.speed-set button:not(.on):hover{background:color-mix(in srgb,var(--mint) 65%,transparent)}

/* ── 어트랙션 표시 ─────────────────────────────────────── */
.hotspot{
  position:absolute;left:0;top:0;z-index:4;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:5px 11px 5px 5px;border-radius:22px;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity .35s,transform .16s;
}
.hotspot span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--coral);color:#fff8ec;font:700 9px var(--body)}
.hotspot b{font:600 9px var(--body);letter-spacing:.9px}
.hotspot:hover{transform:translate(-50%,-50%) scale(1.05)}

/* ── 조이스틱 ─────────────────────────────────────────── */
.joystick{
  position:absolute;left:var(--pad-side);bottom:calc(var(--pad-bottom) + 58px);z-index:7;
  width:116px;height:116px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  touch-action:none;user-select:none;
}
.joystick:before{content:'';position:absolute;width:74px;height:74px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent)}
.joystick-knob{width:50px;height:50px;border-radius:50%;background:var(--coral);box-shadow:0 5px 16px #a8482c40;transition:transform .14s ease-out}
.joystick.active .joystick-knob{transition:none}
@media(hover:hover) and (pointer:fine){.joystick{display:none}}

/* 1인칭일 때 화면 중앙 조준점 */
body.playing.first-person .stage:after{
  content:'';position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#fffdf5b8;box-shadow:0 0 0 1.5px #1b2f2a33;
}

/* ── 탑승 버튼과 진행 표시 ─────────────────────────────── */
.play-center{
  position:absolute;left:50%;bottom:calc(var(--pad-bottom) + 60px);z-index:7;
  transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;
}
.action-pill{
  pointer-events:auto;display:flex;align-items:center;gap:11px;
  padding:9px 20px 9px 9px;border-radius:28px;
  background:var(--coral);color:#fff8ec;font-size:14px;font-weight:700;white-space:nowrap;
  box-shadow:0 10px 28px #a8482c3d;
  animation:pop-in .24s ease-out,pill-pulse 1.5s ease-out .3s infinite;
}
@keyframes pill-pulse{
  0%{box-shadow:0 10px 28px #a8482c3d,0 0 0 0 color-mix(in srgb,var(--coral) 65%,transparent)}
  70%,100%{box-shadow:0 10px 28px #a8482c3d,0 0 0 16px transparent}
}
.hotspot.near{background:var(--coral);color:#fff8ec;border-color:transparent;transform:translate(-50%,-50%) scale(1.18)}
.hotspot.near span{background:#fff8ec;color:var(--coral)}
.action-pill:hover{filter:brightness(1.06)}
.action-key{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffffff2e}
.action-key svg{width:17px;height:17px}
.ride-progress{width:184px;height:5px;border-radius:5px;overflow:hidden;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.ride-progress span{display:block;height:100%;width:0;border-radius:5px;background:var(--coral);transition:width .2s linear}
@keyframes pop-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ── 어트랙션 패널 ─────────────────────────────────────── */
.panel{
  position:absolute;bottom:calc(var(--pad-bottom) + 138px);right:var(--pad-side);z-index:8;
  width:min(320px,calc(100vw - var(--pad-side)*2));
  padding:18px;border-radius:18px;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  animation:pop-in .2s ease-out;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel-head h2{margin:0;font:700 16px var(--display);letter-spacing:-.3px}
.panel-head h2 b{color:var(--coral);font-size:11px;margin-left:6px;vertical-align:2px}
.ride-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ride-list button{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  padding:11px 10px;border-radius:13px;transition:background .18s;
}
.ride-list button:hover{background:color-mix(in srgb,var(--mint) 65%,transparent)}
.ride-list em{
  flex:none;width:29px;height:29px;display:grid;place-items:center;border-radius:9px;
  background:var(--coral);color:#fff8ec;font:700 11px/1 var(--display);font-style:normal;
}
.ride-list span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ride-list strong{font-size:13px;font-weight:600}
.ride-list small{font-size:10px;color:var(--muted);line-height:1.4}
.ride-list svg{width:17px;height:17px;margin-left:auto;flex:none;color:var(--coral)}
.panel-note{margin:12px 2px 0;font-size:10px;color:var(--muted)}

/* ── 안내 토스트 ──────────────────────────────────────── */
.toast{
  position:absolute;left:50%;top:calc(var(--pad-top) + 56px);z-index:9;transform:translateX(-50%);
  padding:9px 17px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:pop-in .2s ease-out;
}

/* ── 로딩 · 타이틀 ─────────────────────────────────────── */
.loading{
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:var(--paper);font-size:12px;color:var(--muted);
  transition:opacity .5s;
}
.loading.ready{opacity:0;pointer-events:none}
.loading-mark{width:56px;height:56px;color:var(--coral);fill:currentColor;stroke:none;animation:spin 5.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.title-screen{
  position:absolute;inset:0;z-index:14;display:grid;
  padding:0 var(--pad-side);
  transition:opacity .5s,visibility .5s;
}
.title-screen.gone{opacity:0;visibility:hidden}
.title-screen{justify-items:center;text-align:center;background:color-mix(in srgb,var(--paper) 30%,transparent)}
.title-inner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;padding:calc(var(--pad-top) + 9vh) 0 calc(var(--pad-bottom) + 10vh)}
.title-inner h1{margin:0;font:800 clamp(64px,11vw,128px)/.86 var(--display);letter-spacing:-5px;text-shadow:0 4px 40px color-mix(in srgb,var(--paper) 70%,transparent)}
.title-inner h1 span{color:var(--coral)}
.title-slogan{margin:0;font-size:17px;font-weight:600;letter-spacing:.4px;color:var(--ink);opacity:.92;text-shadow:0 2px 20px color-mix(in srgb,var(--paper) 85%,transparent)}
.start-button{
  display:inline-flex;align-items:center;gap:16px;
  padding:15px 20px 15px 24px;border-radius:32px;
  background:var(--coral);color:#fff8ec;font-size:14px;font-weight:600;
  box-shadow:0 12px 30px #a8482c33;transition:transform .16s,filter .2s;
}
.start-button svg{width:19px;height:19px}
.start-button:hover{transform:translateY(-2px);filter:brightness(1.06)}
.start-button:active{transform:translateY(0)}
/* 타이틀 화면에서는 게임 HUD 를 감춘다 */
body:not(.playing) .hud-top,
body:not(.playing) .hud-bottom,
body:not(.playing) .view-controls,
body:not(.playing) .corner-buttons,
body:not(.playing) .hotspot{opacity:0;pointer-events:none}
.hud-top,.hud-bottom,.view-controls,.corner-buttons,.hotspot{transition:opacity .5s}

/* ── 원더패스 ─────────────────────────────────────────── */
dialog{
  width:min(420px,calc(100% - 28px));padding:34px;border:1px solid var(--line);border-radius:20px;
  background:var(--paper);color:var(--ink);box-shadow:0 30px 90px #0f291c40;
}
dialog::backdrop{background:#12262166;backdrop-filter:blur(6px)}
.dialog-close{position:absolute;right:14px;top:14px;box-shadow:none;background:transparent;border-color:transparent}
.dialog-eyebrow{margin:0;font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--coral)}
dialog h2{margin:12px 0 14px;font:700 27px/1.35 var(--display);letter-spacing:-1px}
.dialog-copy{margin:0 0 22px;font-size:12px;line-height:1.9;color:var(--muted)}
dialog label{display:block;margin-bottom:8px;font-size:11px}
dialog input{
  width:100%;margin-bottom:16px;padding:14px;border:1px solid var(--line);border-radius:11px;
  background:transparent;color:var(--ink);font-size:13px;
}
dialog .start-button{width:100%;justify-content:space-between}
.souvenir{position:relative;margin-bottom:18px;padding:24px;border-radius:14px;background:var(--coral);color:#fff8e6;text-align:center}
.souvenir:before,.souvenir:after{content:'';position:absolute;bottom:42px;width:20px;height:20px;border-radius:50%;background:var(--paper)}
.souvenir:before{left:-10px}.souvenir:after{right:-10px}
.souvenir-top{display:flex;justify-content:space-between;margin:0;font:700 12px var(--display)}
.souvenir-top span{font-size:9px;align-self:center}
.souvenir-mark{width:64px;height:64px;margin:8px 0;fill:currentColor;stroke:none}
.souvenir strong{display:block;margin-bottom:9px;font:600 24px var(--display);overflow-wrap:anywhere}
.souvenir>span{font-size:8px;letter-spacing:1.6px}
.souvenir-bottom{display:flex;justify-content:space-between;margin:20px 0 0;padding-top:14px;border-top:1px dashed #fff8e680;font-size:9px}
.noscript{position:fixed;inset:auto 0 0;z-index:30;margin:0;padding:15px;background:var(--paper);text-align:center}

/* ── 반응형 ───────────────────────────────────────────── */
@media(max-width:900px){
  .title-inner h1{letter-spacing:-3px}
  .hint{display:none}
  .hotspot b{display:none}
  .hotspot{padding:4px;gap:0}
  .play-center{bottom:calc(var(--pad-bottom) + 152px)}
  .panel{bottom:calc(var(--pad-bottom) + 138px);left:auto;right:var(--pad-side);width:min(330px,calc(100vw - 2*var(--pad-side)))}
  .toast{top:calc(var(--pad-top) + 50px);font-size:11px;padding:8px 14px}
}
/* 가로로 누운 작은 화면에서는 HUD 를 더 납작하게 */
@media(max-height:520px){
  .joystick{width:96px;height:96px;bottom:calc(var(--pad-bottom) + 6px)}
  .joystick:before{width:60px;height:60px}
  .joystick-knob{width:42px;height:42px}
  .play-center{bottom:calc(var(--pad-bottom) + 14px);left:auto;right:calc(var(--pad-side) + 84px);transform:none}
  .title-inner h1{font-size:clamp(40px,9vh,64px)}
}
@media(max-width:430px){
  .joystick{width:100px;height:100px}
  .joystick:before{width:64px;height:64px}
  .joystick-knob{width:44px;height:44px}
  .title-inner h1{font-size:clamp(52px,15vw,76px);letter-spacing:-2.4px}
  .start-button{padding:13px 17px 13px 21px;font-size:13px}
  .hud-actions{gap:5px}
  .chip,.icon-button{height:36px;width:36px}
  dialog{padding:26px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}