/* World Run complete UI shell · 3D world with a portrait-first 2D game layer. */
:root{
  --wr-mint:#19cba6;
  --wr-mint-dark:#008f7b;
  --wr-navy:#142c50;
  --wr-sun:#ffd34b;
  --wr-coral:#ff795f;
  --wr-ivory:#fff9ea;
  --wr-ice:#eaf9f6;
  --wr-line:#b8d8dd;
  --wr-shadow:0 16px 48px #082f4652;
}

button,a,select,input{font:inherit}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #65e8ff;outline-offset:2px}
.center-panel,.game-dialog,.journey-panel{box-sizing:border-box}
.game-dialog[open],.journey-panel[open]{animation:wr-panel-in .18s ease-out}
@keyframes wr-panel-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* Bottom navigation mirrors the currently open destination. */
body[data-dialog] .bottom-nav button.selected{color:#567485;background:transparent}
body[data-dialog=world-panel] .bottom-nav [data-open-world],
body[data-dialog=character-panel] .bottom-nav [data-open-characters],
body[data-dialog=journey-panel] .bottom-nav [data-open-journey],
body[data-dialog=gold-panel] .bottom-nav [data-open-gold]{color:#008f7b;background:linear-gradient(#d8fff2,#a9f5e3)}

/* Pause screen */
.pause-panel{max-width:390px;padding:28px 25px 22px;text-align:center}
.pause-mark{width:78px;height:78px;margin:0 auto 13px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#2a6798,#142c50);border:4px solid #e7fbff;box-shadow:0 0 0 3px #4baee3,0 8px 18px #0b31574d,inset 0 3px 0 #ffffff45}
.pause-mark span{font-size:31px;letter-spacing:4px;color:#fff;text-shadow:0 2px #0b2848}
.pause-panel h2{margin-bottom:8px}
.pause-panel>p{margin:0 0 14px}
.pause-panel>.primary-button{width:100%;margin-top:6px}
.pause-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pause-actions .secondary-button{font-size:14px;min-height:46px}
.pause-panel>#pause-home{display:block;margin:12px auto 0;color:#48697b}

/* Result screen */
.result-panel{width:min(390px,calc(100% - 24px));border-color:#bff7ed;box-shadow:0 0 0 2px #15c5a555,var(--wr-shadow)}
.result-panel:before{content:'';position:absolute;left:18px;right:18px;top:14px;height:84px;border-radius:50%;background:radial-gradient(ellipse,#ffe68b8f,transparent 70%);pointer-events:none}
.result-medal,.result-banner,.result-data-hero{position:relative}
.result-data-hero{padding:9px 0 5px;border-radius:16px;background:linear-gradient(135deg,#e8fff7,#fffdf1)}
.data-balance{border:1px solid #cde4e1;background:linear-gradient(145deg,#eff9f7,#e2f1ef);box-shadow:inset 0 1px #fff}
.result-actions .secondary-button{border-width:2px}

/* Shared dialogs */
.game-dialog,.journey-panel{scrollbar-width:thin;scrollbar-color:#9fc9c8 transparent}
.game-dialog>p:first-of-type{margin-top:-7px}
.game-dialog .primary-button,.journey-panel .primary-button{letter-spacing:-.25px}
.wallet-hero{margin:17px 0 20px;padding:17px;border-radius:19px;background:radial-gradient(circle at 50% 0,#dffff6,#c8f6e9 55%,#b7e9df);border:1px solid #8ed7cd;box-shadow:inset 0 2px #fff,0 5px 13px #0a5a4e1f}
.wallet-detail{padding:13px 3px;border-color:#d4e5e3}
.data-notice{border:1px solid #d4ebe8;background:#e7f3f0!important;color:#4d6e78!important}
.friends-art{margin:14px 0 18px;padding:12px;border-radius:20px;background:radial-gradient(circle,#dbfff3,#f9fff9 66%);border:1px solid #cce9e3}
.friends-art svg{filter:drop-shadow(0 4px 0 #0d755f20)}

/* Character selection: finished cards before the selected 3D portrait is cached. */
#character-panel{max-width:470px}
.character-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 8px}
.character-picker button{position:relative;min-height:148px;padding:13px 8px 12px;overflow:hidden;border:2px solid #d5e5e7;background:linear-gradient(155deg,#ffffff,#f3faf7);box-shadow:0 4px 0 #adc5ca55}
.character-picker button:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#ffffffb8,transparent 44%);pointer-events:none}
.character-picker button[aria-pressed=true]{border-color:#00a98f;background:linear-gradient(145deg,#dcfff4,#a9f5e3);box-shadow:0 0 0 3px #72ead6,0 5px 0 #0b8b7450}
.character-picker button[aria-pressed=true]:after{content:'✓';position:absolute;right:8px;top:8px;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#08af91;color:#fff;font-weight:900}
.character-picker .runner-dot{position:relative;width:72px;height:72px;border:3px solid #fff;border-radius:50%;overflow:hidden;box-shadow:0 4px 9px #12354b30,0 0 0 1px #a4d4d3;background-color:#c7f5e9;background-repeat:no-repeat}
.runner-dot:after,.runner-dot.vivi:after{content:''}
.runner-dot.orange{background-image:url('https://worldruncdn.ttok.im/assets/v1/0e249a559b876e0de1b11f9e78f6670761e12a01e2d785a6f1da36d378c63074/orange-reference.webp');background-position:50% 5%;background-size:228% auto}
.runner-dot.trip{background-image:url('https://worldruncdn.ttok.im/assets/v1/c586e63b1a9efe94998885372db5c59f9e688df36aace8c83ed5a42b8ab992f7/trip-reference.webp');background-position:50% 5%;background-size:228% auto}
.runner-dot.toki{background:
  radial-gradient(circle at 39% 43%,#29212a 0 3px,transparent 3.5px),
  radial-gradient(circle at 61% 43%,#29212a 0 3px,transparent 3.5px),
  radial-gradient(ellipse at 50% 47%,#ffd1b7 0 23px,transparent 24px),
  radial-gradient(ellipse at 50% 28%,#f36f8e 0 30px,transparent 31px),
  linear-gradient(160deg,#ffc5d4,#ff8ca9)}
.runner-dot.toki:before{content:'';position:absolute;left:20px;right:20px;bottom:-10px;height:31px;border-radius:16px 16px 4px 4px;background:#ff6e92;border:3px solid #fff}
.runner-dot.vivi{background:
  radial-gradient(circle at 39% 43%,#2d3328 0 3px,transparent 3.5px),
  radial-gradient(circle at 61% 43%,#2d3328 0 3px,transparent 3.5px),
  radial-gradient(ellipse at 50% 47%,#ffd0b2 0 23px,transparent 24px),
  radial-gradient(ellipse at 50% 28%,#50382f 0 30px,transparent 31px),
  linear-gradient(160deg,#d8efb9,#91c87d)}
.runner-dot.vivi:before{content:'';position:absolute;left:20px;right:20px;bottom:-10px;height:31px;border-radius:16px 16px 4px 4px;background:#74b564;border:3px solid #fff}
.character-picker .runner-dot[data-portrait=true]{width:72px;height:72px}
.character-picker button b{font-size:13px;line-height:1.15;z-index:1}
.character-picker button span{max-width:118px;min-height:30px;color:#527381;z-index:1}
#character-status{min-height:19px;text-align:center;margin:7px 0 -6px}

/* Tokyo is the completed first stage; the following destinations stay honest. */
.world-dialog{max-width:490px}
.world-dialog .city-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.world-dialog .city-card{position:relative;min-height:104px;border-color:#c8dce1;background:#f4f8f7}
.world-dialog .city-tokyo{grid-column:1/-1;display:grid;grid-template-columns:45% 55%;min-height:138px;border-color:#17b99d;background:linear-gradient(145deg,#e2fff6,#fff8e8);box-shadow:0 0 0 2px #7ce8d4,0 5px 0 #07867545}
.world-dialog .city-tokyo .city-art{height:100%;min-height:134px;background:
  url('https://worldruncdn.ttok.im/assets/v1/9b0f01a3154470b5113699ffb926a9c9cd837eb219cd0effb768a9ef75172a20/tower.webp') 52% 28%/112% auto no-repeat,
  linear-gradient(#49aefc 0 48%,#c7f6e9 48% 100%)}
.world-dialog .city-tokyo .city-art:before{left:2%;right:2%;bottom:0;width:auto;height:43%;background:linear-gradient(90deg,#f47755 0 16%,#f8c85c 16% 31%,#4d9dd2 31% 50%,#ed6f74 50% 68%,#f2c353 68% 83%,#56a3d5 83%);box-shadow:none;clip-path:polygon(0 42%,10% 24%,18% 52%,28% 22%,39% 49%,49% 17%,60% 46%,70% 26%,81% 52%,90% 19%,100% 42%,100% 100%,0 100%);opacity:.9}
.world-dialog .city-tokyo .city-art:after{display:none}
.city-card-copy{display:grid!important;grid-template-columns:auto 1fr;align-content:center;gap:3px 7px!important;padding:9px!important}
.city-card-copy i{grid-row:1/3}
.city-card-copy b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.city-card-copy small{font-size:9px;color:#69818c;font-weight:700;white-space:nowrap}
.city-tokyo .city-card-copy b{font-size:15px;white-space:normal}
.city-tokyo .city-card-copy small{color:#008b76;font-size:11px}
.city-card:disabled{opacity:.68;filter:saturate(.35);cursor:not-allowed;box-shadow:none}
.city-card:disabled .city-art:after{opacity:.6}
.world-dialog .mode-picker{padding:4px;border-radius:16px;background:#e8f0ef}
.world-dialog .mode-picker button{border-radius:12px}

/* Mission journal */
.journey-panel{max-width:500px;padding:27px 25px;background:linear-gradient(145deg,#fffef7,#f4fffc)}
.journey-panel h2{margin-bottom:3px}
#chapter-reward{margin:0;padding:8px 11px;border-radius:10px;background:#e1f5ef;color:#087862;font-weight:800}
.mission-card{position:relative;border-radius:16px;padding:14px;border-color:#cee2e4;box-shadow:0 3px 0 #b8cdd040}
.mission-card.completed:after{content:'✓';position:absolute;right:11px;top:11px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#12ad89;color:#fff}
.mission-card.completed>div{padding-right:27px}
.mission-card progress{height:10px;border-radius:8px;overflow:hidden}
.gear-heading{padding-top:18px;border-top:1px solid #d8e7e5}
.gear-row{padding:13px 0}
.gear-row button{border:1px solid #d99d12;background:linear-gradient(#ffe681,#ffc538);box-shadow:inset 0 2px #fff9,0 3px 0 #b4781833}
#gear-notice{padding:9px 11px;border-radius:10px;background:#eef7f5}
.journey-help{padding-top:10px;border-top:1px dashed #b9d0d1}

/* Settings is a compact, scroll-safe control sheet. */
.settings-panel{width:min(438px,calc(100% - 24px));max-width:438px;max-height:calc(100dvh - 24px);padding:25px 22px 22px;text-align:left}
.settings-panel h2{margin-bottom:13px}
.settings-section{position:relative;margin-top:10px;padding:13px;border:1px solid #d2e3e4;border-radius:16px;background:linear-gradient(145deg,#ffffffd9,#edf8f5d9);box-shadow:inset 0 1px #fff}
.settings-section-title{display:block;margin-bottom:5px;color:#0a7a70;font-size:10px;font-weight:900;letter-spacing:1.1px}
.settings-panel label{min-height:41px;margin:0;gap:12px;border-bottom:1px solid #e0ebeb}
.settings-panel label:last-child{border-bottom:0}
.settings-panel select{min-width:128px;max-width:180px;min-height:37px;padding:7px 32px 7px 10px;border-radius:10px;border-color:#bfd5d9;background:#fff;color:#163a53;font-weight:800}
.settings-panel output{font-variant-numeric:tabular-nums;color:#0a7a70;font-weight:900;white-space:nowrap}
.fps-setting output{padding:6px 9px;border-radius:9px;background:#e1f5ef}
.debug-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:8px;padding:9px 12px;border-radius:12px;border:1px solid var(--line,#d7e4e9);background:#f4faf8;font:inherit;color:inherit}.debug-toggle::after{content:'OFF';font-size:11px;font-weight:800;padding:3px 9px;border-radius:9px;background:#dce8ec;color:#56707c}.debug-toggle[aria-pressed=true]::after{content:'ON';background:#18caaa;color:#fff}
.settings-panel .settings-hint{margin:7px 0 4px;font-size:10px;line-height:1.55;color:#67808b}
.speed-setting{display:grid!important;grid-template-columns:1fr auto;align-items:center!important;padding:6px 0 1px}
.speed-setting output{padding:3px 8px;border-radius:9px;background:#173f5f;color:#fff;font-size:11px}
.speed-setting input{grid-column:1/-1;width:100%;max-width:none;height:28px}
.emotes{margin-top:9px;gap:8px}
.emotes button{min-height:42px;font-size:13px}
.emotes #dance:before{content:'♫';font-size:18px}
.emotes #taunt:before{content:'✌';font-size:17px}
#settings-camera-slot{padding-right:65px}
.settings-panel .camera-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%;margin:8px 0 0;padding:5px;border-radius:12px;background:#173f5f}
.settings-panel .camera-controls button{min-height:38px;padding:6px 4px;font-size:10px}
.settings-panel .camera-controls button:nth-last-child(-n+2){font-size:20px}
.settings-panel #sound{position:absolute;right:13px;top:12px;width:43px;height:43px;margin:0;border-radius:13px;background:linear-gradient(145deg,#2b6695,#173754);border:2px solid #e2f7ff;color:#fff;box-shadow:0 0 0 2px #3883b04d;font-size:19px}
#settings-language-slot label{padding:3px 0}
.settings-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.settings-links .text-button{display:grid;place-items:center;min-height:41px;margin:0;border:1px solid #c3d8da;border-radius:12px;background:#fff;color:#456575;text-decoration:none}

/* Map explorer controls use the same navy/mint hierarchy as the game HUD. */
.map-heading{border:2px solid #bcecff;background:linear-gradient(145deg,#244d75f2,#102d50f2);box-shadow:0 0 0 2px #2f82b065,0 7px 22px #092c4650}
.map-top>button,.map-destinations,.map-toolbar{border:2px solid #fff;background:linear-gradient(145deg,#fffef4f7,#effbf8f7)}
.map-mode button[aria-pressed=true]{background:linear-gradient(#18caaa,#00957e);box-shadow:inset 0 1px #8affeb}
.map-toolbar>button{background:#dff2ee}
.map-help{display:inline-block;padding:5px 12px;border-radius:12px;background:#102d50a8}

/* Loading */
.loading{overflow:hidden;background:radial-gradient(circle at 50% 26%,#397bb2 0,#183b67 38%,#0d2446 75%)}
.loading:before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 40%,#0be0bd13 41% 42%,transparent 43%),radial-gradient(circle at 50% 112%,#22d2ac33 0 25%,transparent 26%);pointer-events:none}
.loading>*{position:relative}
.loading-flight{font-size:44px;color:#bff9ff;transform:rotate(-12deg);filter:drop-shadow(0 5px 6px #071a3c66);animation:wr-flight 1.9s ease-in-out infinite}
@keyframes wr-flight{50%{transform:translate(14px,-6px) rotate(-6deg)}}
.loading-brand{margin:-5px 0 4px;font-size:43px}
.load-track{height:8px;border-radius:10px;background:#ffffff26;border:1px solid #ffffff2e}
.load-track i{border-radius:10px;background:linear-gradient(90deg,#12c8a7,#62ffe5,#ffd65b);box-shadow:0 0 12px #44f5dc}
.loading-stops{display:flex;gap:35px;margin-top:-27px;width:210px;justify-content:space-between}
.loading-stops i{width:9px;height:9px;border:2px solid #d7ffff;border-radius:50%;background:#1d466c}

@media(max-width:700px){
  .game-dialog,.journey-panel{max-height:calc(100dvh - 22px)}
  #character-panel,.world-dialog{width:calc(100% - 20px);padding:20px 15px}
  .character-picker{gap:8px;margin-top:13px}
  .character-picker button{min-height:128px;padding:10px 4px}
  .character-picker .runner-dot,.character-picker .runner-dot[data-portrait=true]{width:61px;height:61px}
  .character-picker button span{font-size:9px;min-height:27px}
  .world-dialog .city-tokyo{min-height:120px}
  .world-dialog .city-tokyo .city-art{min-height:116px}
  .world-dialog .city-card{min-height:87px}
  .world-dialog .city-card:not(.city-tokyo) .city-art{height:39px}
  .city-card-copy b{font-size:10px}
  .city-card-copy small{font-size:8px}
  .pause-panel{width:calc(100% - 28px);padding:24px 20px 18px}
  .pause-mark{width:66px;height:66px}
  .settings-panel{top:50%;width:calc(100% - 16px);max-height:calc(100dvh - 12px);padding:20px 14px 16px;border-radius:22px}
  .settings-panel .close-button{top:8px;right:9px}
  .settings-panel h2{font-size:23px;margin:4px 0 8px}
  .settings-section{margin-top:7px;padding:10px}
  .settings-panel label{font-size:12px}
  .settings-panel select{min-width:121px;font-size:11px}
  .settings-panel .camera-controls{grid-template-columns:repeat(3,1fr)}
  .settings-links{margin-top:8px}
  .map-help{font-size:11px}
}

@media(max-height:690px){
  .settings-panel{padding-top:15px}
  .settings-panel>.eyebrow{display:none}
  .settings-section{padding-block:8px}
  .settings-panel .settings-hint{display:none}
  .settings-panel label{min-height:35px}
  .settings-panel .camera-controls{margin-top:5px}
  .character-picker button{min-height:111px;padding-block:7px}
  .character-picker .runner-dot,.character-picker .runner-dot[data-portrait=true]{width:52px;height:52px}
  .world-dialog .city-grid{margin-block:7px}
  .world-dialog .city-tokyo{min-height:94px}
  .world-dialog .city-tokyo .city-art{min-height:90px}
  .world-dialog .city-card{min-height:72px}
  .world-dialog .city-card:not(.city-tokyo) .city-art{height:27px}
}

@media(max-height:500px) and (orientation:landscape){
  .settings-panel{max-width:720px;display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;align-content:start;padding:13px 18px}
  .settings-panel>h2,.settings-panel>.eyebrow,.settings-panel>.close-button{grid-column:1/-1}
  .settings-panel h2{margin:0;font-size:20px}
  .settings-panel .settings-section{margin:0}
  #settings-camera-slot{padding-right:60px}
  .settings-links{grid-column:1/-1;margin:0}
  .world-dialog{max-width:720px}
  .world-dialog .city-grid{grid-template-columns:repeat(3,1fr)}
  .world-dialog .city-tokyo{grid-column:span 1;display:block;min-height:84px}
  .world-dialog .city-tokyo .city-art{height:45px;min-height:45px}
}

@media(prefers-reduced-motion:reduce){
  .game-dialog[open],.journey-panel[open],.loading-flight{animation:none}
}

/* ---------------------------------------------------------------- 계정 패널 */
/* 헤더의 아바타 칩 옆에 붙는 상태 버튼. 좁은 화면에서는 줄여서 말줄임표로 끊는다. */
.account-chip{flex:0 1 auto;min-width:0;max-width:118px;min-height:38px;padding:2px 11px;gap:5px}
.account-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
/* 좁은 헤더에서는 글리프를 접어 닉네임/게스트 표기에 자리를 내준다. */
.account-glyph{display:none;flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #b6e8ff;background:radial-gradient(circle at 50% 32%,#ffffff 0 34%,transparent 35%),#2f79ab}
@media(min-width:440px){.account-glyph{display:block}}
.account-chip[data-member=true]{background:linear-gradient(150deg,#0f8f7d,#0b6157)}
.account-chip[data-member=true] .account-glyph{border-color:#c6fff0}

.account-dialog .account-view{display:flex;flex-direction:column;gap:10px}
.account-dialog .account-view>.primary-button,.account-dialog .account-view>.secondary-button{width:100%;margin:0}
.account-state{margin:0 0 6px!important;font-size:12px!important;font-weight:800;color:#0a7a70!important}
.account-error{margin:0 0 4px!important;padding:9px 11px;border-radius:12px;font-size:12px!important;line-height:1.6!important;background:#e8f2ef;color:#31596a!important}
.account-error[data-tone=warn]{background:#ffeceb;color:#a4404a!important}
.account-error[data-tone=ok]{background:#dcfaef;color:#0a7361!important}
.account-card{padding:13px;border:1px solid #d2e3e4;border-radius:16px;background:linear-gradient(145deg,#ffffffd9,#edf8f5d9);display:flex;flex-direction:column;gap:8px}
.account-card strong{font-size:14px}
.account-card p{margin:0!important;font-size:11.5px!important;line-height:1.65!important}
.account-hint{margin:0!important;font-size:11px!important;line-height:1.6!important;color:#6b8792!important}

.account-form{display:flex;flex-direction:column;gap:9px;margin:0}
.account-form label{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin:0;font-size:12px;font-weight:800;text-align:left}
.account-form input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #bfd5d9;border-radius:12px;background:#fff;color:#163a53;font-size:16px;font-weight:700}
/* 아직 입력하지 않은 칸을 미리 빨갛게 칠하지 않는다. */
.account-form input:user-invalid{border-color:#e0a4a4}
.account-form .primary-button,.account-form .secondary-button{width:100%;margin-top:4px}

.account-social{display:flex;flex-direction:column;gap:8px;padding-top:4px;border-top:1px solid #dfeaea}
.account-social-button{width:100%;justify-content:space-between;padding-inline:14px;font-size:14px}
.account-social-button small{font-size:10px;font-weight:800;color:#7b929b;padding:3px 8px;border-radius:20px;background:#e8eeef}
.account-social-button[data-ready=true]{color:#08465f}

.account-code{display:block;text-align:center;padding:12px 8px;border-radius:14px;background:#0d3350;color:#8ffbe4;font-size:27px;font-weight:900;letter-spacing:5px;font-variant-numeric:tabular-nums}
#account-code-input{text-transform:uppercase;letter-spacing:4px;text-align:center;font-size:19px}
.account-identities{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.account-identity{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border:1px solid #dbe8e8;border-radius:13px;background:#fff;font-size:12px}
.account-identity strong{display:block;font-size:13px}
.account-identity small{display:block;color:#6b8792;font-size:11px;word-break:break-all}
.account-identity .text-button{margin:0;flex:none;min-height:38px;color:#a4404a}

@media(max-width:700px){
  .account-dialog{max-height:calc(100dvh - 22px)}
}
@media(max-width:370px){
  .account-chip{max-width:62px;min-height:33px;padding:2px 7px}
  .account-chip b{font-size:10px}
}

/* Character selection is a horizontal, snap-scrolling roster. */
.character-picker{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;padding:6px 4px 13px;margin:18px -4px 8px;touch-action:pan-x}
.character-picker::-webkit-scrollbar{display:none}
.character-picker button{flex:0 0 144px;scroll-snap-align:start;min-height:174px}
.character-picker button:first-child{margin-left:1px}
.character-picker:after{content:'→ 오른쪽으로 더 보기';flex:0 0 auto;align-self:center;color:#5d818d;font-size:10px;font-weight:800;white-space:nowrap;padding-right:5px}
@media(max-width:370px){.character-picker{gap:9px}.character-picker button{flex-basis:132px;min-height:158px}.character-picker:after{font-size:9px}}

/* Unified game-styled form controls. */
select,input[type='text'],input[type='email'],input[type='password'],input[type='number'],input[type='search'],input[type='url'],textarea{border:2px solid #b9d8dc;border-radius:13px;background:linear-gradient(145deg,#ffffff,#eefaf7);color:#163a53;box-shadow:inset 0 1px 2px #174b5b12,0 2px 0 #8bb8bf35;transition:border-color .15s,box-shadow .15s,background .15s}
select{appearance:none;padding:9px 38px 9px 12px;background-image:linear-gradient(45deg,transparent 50%,#087d79 50%),linear-gradient(135deg,#087d79 50%,transparent 50%),linear-gradient(145deg,#ffffff,#eefaf7);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%,0 0;background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat;cursor:pointer}
input[type='text'],input[type='email'],input[type='password'],input[type='number'],input[type='search'],input[type='url'],textarea{padding:11px 13px}
textarea{min-height:92px;resize:vertical;line-height:1.5}
select:hover,input:hover,textarea:hover{border-color:#70c9c2}
select:focus,input:focus,textarea:focus{border-color:#00a98f;background:#f5fffc;box-shadow:0 0 0 3px #65e8ff66,inset 0 1px 2px #174b5b12;outline:none}
input:user-invalid,textarea:user-invalid{border-color:#e38b86;box-shadow:0 0 0 3px #ffb8ad55}
input::placeholder,textarea::placeholder{color:#86a0a7;font-weight:600}
input[type='range']{appearance:none;width:100%;height:10px;border-radius:9px;background:linear-gradient(90deg,#19cba6 0 55%,#d6e7e6 55%);border:1px solid #9bc9c6;box-shadow:inset 0 1px 2px #164a5220}
input[type='range']::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(#74ffe2,#00ac91);border:3px solid #fff;box-shadow:0 2px 5px #164a5240;cursor:pointer}
input[type='checkbox'],input[type='radio']{accent-color:#08ae92;width:18px;height:18px}
.map-destinations select{border:2px solid #b9d8dc;box-shadow:0 2px 0 #8bb8bf35;background-color:#fff;}

/* Shared generated UI components */
.ui-card{list-style:none;display:grid;gap:6px;padding:12px;border:1px solid #b9d8dc;border-radius:14px;background:linear-gradient(145deg,#fff,#eefaf7);box-shadow:0 3px 0 #8bb8bf35}
.ui-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ui-card-head strong{font-size:12px}.ui-card-head span{font-size:11px;color:#557783;font-variant-numeric:tabular-nums}
.ui-card progress{width:100%;height:8px;accent-color:#16c8a5}
.ui-action{min-height:36px;padding:7px 12px;border:1px solid #008f7b;border-radius:12px;background:linear-gradient(#39e0bd,#00a98f);color:#fff;font-size:12px;font-weight:900;box-shadow:inset 0 1px #c9fff0,0 2px 0 #006b5e55;cursor:pointer}
.ui-action:disabled{background:#dbe6e7;color:#71858b;border-color:#b8c9ca;box-shadow:none;cursor:not-allowed}

/* 3D full-body roster cards: the picker stays visual while preserving the
   horizontal, touch-friendly browsing behavior. */
.runner-strip .runner-card{flex-basis:154px;min-height:218px;padding:12px 9px 14px;gap:6px}
.runner-strip .runner-portrait{width:112px;height:136px;border-radius:18px;background-repeat:no-repeat;background-position:center bottom;background-size:contain;border-color:var(--runner-accent,#6dfff0);box-shadow:inset 0 2px #ffffff45,0 5px 12px #081f3c66}
.runner-strip-lobby{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:5px 4px 11px;margin:0 0 9px;gap:10px}
.runner-strip-lobby .runner-card{flex:0 0 108px;min-height:151px;padding:8px 6px 9px;gap:4px}
.runner-strip-lobby .runner-portrait{width:78px;height:94px;border-radius:15px;background-repeat:no-repeat;background-position:center bottom;background-size:contain}
.runner-strip-lobby .runner-card>b{font-size:11px}.runner-strip-lobby .runner-card>em,.runner-strip-lobby .runner-card .runner-hp,.runner-strip-lobby .runner-card .runner-perks,.runner-strip-lobby .runner-card .runner-lock,.runner-strip-lobby .runner-card progress,.runner-strip-lobby .runner-card>small{display:none}
@media(max-width:700px){.runner-strip .runner-card{flex-basis:142px;min-height:202px}.runner-strip .runner-portrait{width:100px;height:124px}.runner-strip-lobby .runner-card{flex-basis:100px;min-height:140px}.runner-strip-lobby .runner-portrait{width:72px;height:86px}}

/* Continue offer (hearts / rewarded ad) */
.continue-panel{width:min(390px,calc(100% - 24px));padding:26px 25px 18px;border-color:#ffd3d8;box-shadow:0 0 0 2px #ff7a8a55,var(--wr-shadow)}
.continue-ring{position:relative;width:84px;height:84px;margin:0 auto 10px;border-radius:50%;background:conic-gradient(#ff5d73 var(--continue-progress,100%),#ffe3e7 0);display:grid;place-items:center;box-shadow:0 8px 18px #7a1b2d33}
.continue-ring>i{position:absolute;inset:8px;border-radius:50%;background:#fffcf4}
.continue-ring>b{position:relative;font-size:31px;font-weight:900;color:#d63d55;font-variant-numeric:tabular-nums}
.continue-panel h2{margin:4px 0 6px}
.continue-panel>p{margin:0 0 14px}
.continue-panel>.primary-button,.continue-panel>.secondary-button{width:100%;justify-content:flex-start;gap:14px;text-align:left;margin-top:10px}
.continue-panel>.primary-button{background:linear-gradient(135deg,#ff8b98,#ff5d73);box-shadow:0 4px 0 #c9344b;color:#fff}
.continue-panel button>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.continue-panel button>span>b{font-size:15px}
.continue-panel button>span>small{font-size:10px;font-weight:600;opacity:.85;white-space:normal}
.continue-panel .icon-heart,.continue-panel .icon-play{flex:none;width:30px;height:30px}
.continue-panel button:disabled{opacity:.5;filter:saturate(.4);box-shadow:none}
.continue-panel>#continue-status{margin:12px 0 0;min-height:14px}
.continue-panel>#continue-skip{margin-top:10px;color:#48697b}
.continue-panel[data-busy=true] .continue-ring{background:conic-gradient(#b8c8d0 100%,#e7edf0 0)}
.hearts-pill{color:#ffdfe4}
.hearts-pill .icon-heart{width:22px;height:22px}
.hearts-pill small{font-size:9px;font-weight:600;opacity:.8;font-variant-numeric:tabular-nums;margin-left:2px}
.hearts-pill[data-empty=true]{opacity:.7}
@media(prefers-reduced-motion:reduce){.continue-ring{transition:none}}
/* 설정·메뉴(대화상자·아이템 화면)가 열려 있는 동안 상단 HUD(아바타·지갑·설정 버튼)는 숨긴다. */
body[data-settings] .hud,body[data-dialog] .hud,body[data-collection] .hud,.collection-screen .collection-hud{display:none}
/* Keep map preview visible near the top of settings on small screens. */
.settings-map-preview>button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left}
.settings-map-preview>button>span{flex:1}
.settings-map-preview .settings-hint{margin:8px 0 0}

/* ── 엔진 컨트롤(원격 설정) 화면 ─────────────────────────────────────────
   점검 차단막·새 버전 안내·로비 공지. 기본은 숨김이며 remote-config 가 켠다. */
.engine-panel{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:12px;padding:24px 20px calc(24px + env(safe-area-inset-bottom));text-align:center;
 background:linear-gradient(180deg,#0e2b40f2,#071a28fa);color:#f3fbff;backdrop-filter:blur(6px)}
.engine-panel[hidden]{display:none}
.engine-panel strong{font-size:clamp(20px,5vw,28px);letter-spacing:.01em}
.engine-panel p{max-width:34rem;margin:0;font-size:clamp(13px,3.4vw,16px);line-height:1.6;color:#d5ecf7}
.engine-panel button{min-width:min(18rem,80vw)}
.engine-block-until{font-weight:600;color:#ffd79a}
.engine-update{z-index:130}
body[data-maintenance='true'] .lobby,body[data-maintenance='true'] .bottom-nav,
body[data-maintenance='true'] .top-controls,body[data-maintenance='true'] .lobby-wallet{display:none}
.engine-notice{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);z-index:60;
 display:flex;align-items:flex-start;gap:8px;width:min(34rem,calc(100vw - 24px));padding:10px 12px;
 border:1px solid #b9e9ea55;border-radius:12px;background:#10334be8;color:#eaf7ff;
 font-size:13px;line-height:1.45;box-shadow:0 8px 24px #04121ca8}
.engine-notice[hidden]{display:none}
.engine-notice strong{flex:0 0 auto;font-weight:700;color:#ffd79a}
.engine-notice span{flex:1 1 auto;min-width:0;word-break:break-word}
.engine-notice-close{flex:0 0 auto;border:0;background:none;color:#cfe8f5;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.engine-notice-close:hover{color:#fff}
@media (max-width:480px){.engine-notice{font-size:12px}}