:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f8f5ff;
  background: #100f18;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: #100f18; overscroll-behavior: none; }
button { font: inherit; }
.hidden { display: none !important; }

.game-shell {
  position: relative;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #f2edf7;
  box-shadow: 0 0 44px rgba(0,0,0,.5);
}

.flow-screen {
  position: absolute;
  z-index: 20;
  inset: 0;
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.main-button {
  width: min(86%, 330px);
  min-height: 58px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 19px;
  color: #fff;
  background: linear-gradient(135deg, #9e85c5, #684f94);
  box-shadow: 0 12px 30px rgba(20,15,45,.42), inset 0 1px rgba(255,255,255,.34);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.main-button:active { transform: scale(.98); }
.main-button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .5; animation: none; }
.ghost-button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  color: #fff;
  background: rgba(16,14,27,.48);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: max(58px, calc(env(safe-area-inset-top) + 38px));
  padding-bottom: max(64px, calc(env(safe-area-inset-bottom) + 42px));
  color: #4b3d68;
  background: linear-gradient(180deg, rgba(243,241,255,.04), transparent 58%, rgba(20,22,52,.67)), url("./assets/ui/title-screen-lumi-ruins.png") center / cover no-repeat;
  transition: opacity .4s ease, transform .4s ease;
}
.start-screen.is-leaving { opacity: 0; transform: scale(1.025); pointer-events: none; }
.start-music-toggle { position: absolute; z-index: 3; top: max(14px, env(safe-area-inset-top)); right: 14px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; color: #fff; background: rgba(30,25,53,.54); box-shadow: 0 5px 14px rgba(15,12,30,.2), inset 0 1px rgba(255,255,255,.2); font-size: 10px; font-weight: 900; cursor: pointer; backdrop-filter: blur(8px); }
.start-music-toggle.is-muted { color: rgba(255,255,255,.7); background: rgba(24,22,36,.42); }
.start-music-toggle:active { transform: scale(.96); }
.start-title { width: 100%; text-align: center; animation: title-float 3.2s ease-in-out infinite; filter: drop-shadow(0 3px 8px rgba(255,255,255,.84)); }
.start-title p { margin: 0 0 8px; color: #65567d; font-size: 12px; font-weight: 800; }
.start-title h1 { margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(38px, 11vw, 50px); line-height: 1; letter-spacing: -.07em; text-shadow: 0 2px #fff, 0 0 18px #fff; }
.start-screen .main-button { animation: start-pulse 2.2s ease-in-out infinite; }
.start-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(86%, 330px); }
.start-controls .main-button { width: 100%; }
.continue-button { width: 100%; min-height: 43px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.52); border-radius: 14px; color: #f5eefb; background: linear-gradient(135deg, rgba(73,91,125,.88), rgba(69,52,101,.9)); box-shadow: 0 7px 18px rgba(19,15,37,.3), inset 0 1px rgba(255,255,255,.2); font-size: 11px; font-weight: 900; cursor: pointer; backdrop-filter: blur(7px); }
.continue-button:active { transform: scale(.98); }
.development-reset { margin-top: -5px; padding: 4px 9px; border: 0; border-radius: 8px; color: rgba(244,237,249,.76); background: rgba(20,16,31,.4); font-size: 9px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; backdrop-filter: blur(5px); }
.development-reset:active { color: #fff; transform: translateY(1px); }
.difficulty-picker { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.difficulty-picker > span { color: #e9e1f2; font-size: 11px; font-weight: 900; white-space: nowrap; }
.difficulty-picker > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; min-width: 174px; }
.difficulty-picker button { min-height: 40px; padding: 3px 10px; border: 1px solid rgba(255,255,255,.42); border-radius: 10px; color: #e7deef; background: rgba(24,19,39,.62); font-size: 10px; font-weight: 900; line-height: 1.15; cursor: pointer; backdrop-filter: blur(8px); }
.difficulty-picker button small { display: block; margin-top: 2px; color: currentColor; font-size: 7px; opacity: .75; }
.difficulty-picker button.is-selected { color: #fff; border-color: #d8c3ef; background: linear-gradient(135deg, #ad8ccd, #74569a); box-shadow: 0 4px 12px rgba(36,22,56,.28), inset 0 1px rgba(255,255,255,.28); }
.start-difficulty { width: 100%; padding: 9px 11px; border: 1px solid rgba(255,255,255,.42); border-radius: 15px; background: rgba(20,17,35,.58); backdrop-filter: blur(8px); }

.story-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #17151f url("./assets/story/intro-ruins-nature.png") center / cover no-repeat;
}
.story-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,15,.72), rgba(8,7,15,.28) 30%, rgba(8,7,15,.36) 70%, rgba(8,7,15,.88)); }
.story-window { position: absolute; inset: 0 0 74px; overflow: hidden; mask-image: linear-gradient(transparent 2%, #000 15%, #000 78%, transparent 98%); }
.story-crawl { position: absolute; top: 100%; left: 25px; right: 25px; text-align: center; animation: story-scroll 31s linear forwards; }
.story-crawl p { margin: 0 0 66px; color: #fff; font-family: Georgia, "Noto Serif KR", serif; font-size: 20px; font-weight: 700; line-height: 1.75; text-shadow: 0 2px 8px rgba(0,0,0,.95); }
.story-crawl .story-last { color: #f3dfaa; font-size: 23px; }
.story-skip { position: absolute; z-index: 2; right: 18px; bottom: max(20px, env(safe-area-inset-bottom)); }

.character-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #493d5e;
  background: radial-gradient(circle at 75% 18%, #fff 0, transparent 40%), linear-gradient(145deg, #f8f5fc, #e5ddf0);
}
.screen-heading p { margin: 0 0 3px; color: #9584ab; font-size: 12px; font-weight: 800; }
.screen-heading h2 { margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: 29px; }
.character-layout { display: grid; grid-template-columns: 112px 1fr; gap: 12px; min-height: 0; flex: 1; }
.character-list { overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.character-option { display: block; width: 100%; min-height: 45px; margin-bottom: 7px; padding: 5px 8px; border: 1px solid #d8cde6; border-radius: 12px; color: #685879; background: rgba(255,255,255,.68); text-align: left; font-weight: 800; }
.character-option small { display: block; margin-top: 2px; color: #aaa0b4; font-size: 9px; font-weight: 600; }
.character-option.is-selected { color: #fff; border-color: #8a70aa; background: linear-gradient(135deg, #a98bc8, #755b99); box-shadow: 0 7px 14px rgba(87,61,116,.2); }
.character-option.is-selected small { color: #ece1f5; }
.character-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(185,167,208,.65); border-radius: 24px; background: rgba(255,255,255,.66); box-shadow: 0 14px 28px rgba(72,51,98,.12); }
.character-card img { width: 100%; height: calc(100% - 145px); object-fit: cover; object-position: center 18%; transition: opacity .2s ease; }
.available-badge { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 6px 10px; border-radius: 99px; color: #fff; background: #7f67a1; font-size: 10px; font-weight: 800; }
.character-copy { position: absolute; inset: auto 0 0; min-height: 150px; padding: 15px 17px; background: linear-gradient(180deg, rgba(255,255,255,.86), #fff); }
.character-copy h3 { margin: 0 0 7px; font-size: 22px; }
.character-copy h3 small { color: #9a8aa9; font-size: 10px; letter-spacing: .13em; }
.character-copy p { margin: 0; color: #766b80; font-size: 12px; line-height: 1.55; }
.character-skill { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding: 6px 9px; border-radius: 10px; color: #7e6a8d; background: #eee7f5; font-size: 10px; }
.character-skill strong { color: #765595; font-size: 12px; }
.selection-notice { flex: none; margin: -6px 0 0; color: #8e809a; font-size: 10px; text-align: center; }
.character-screen > .main-button { align-self: center; flex: none; }

.dialogue-screen {
  color: #fff;
  background: #22303b url("./assets/story/intro-ruins-nature.png") center / cover no-repeat;
}
.dialogue-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,25,.25), rgba(15,12,24,.15) 40%, rgba(14,11,21,.84) 82%); }
.dialogue-place { position: absolute; z-index: 2; top: max(24px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; padding: 8px 15px; border-radius: 99px; background: rgba(20,17,32,.6); font-size: 12px; font-weight: 800; white-space: nowrap; backdrop-filter: blur(7px); }
.dialogue-character { position: absolute; z-index: 1; bottom: 190px; width: 66%; height: 48%; border: 2px solid rgba(229,215,247,.38); border-radius: 28px; object-fit: cover; box-shadow: 0 13px 30px rgba(0,0,0,.42); transition: opacity .25s, filter .25s, transform .25s; }
.dialogue-lumi { left: -8%; object-position: 55% center; }
.dialogue-moco { right: -7%; width: 54%; height: 43%; object-position: center; }
.dialogue-character.is-inactive { opacity: .42; filter: brightness(.48) saturate(.72); transform: scale(.95); }
.dialogue-character.is-hidden-character { opacity: 0; transform: translateX(35px); }
.dialogue-panel { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: max(22px, env(safe-area-inset-bottom)); min-height: 150px; padding: 27px 24px 25px; border: 1px solid rgba(255,255,255,.45); border-radius: 20px; color: #fff; background: rgba(29,24,43,.91); box-shadow: 0 14px 30px rgba(0,0,0,.38); text-align: left; cursor: pointer; backdrop-filter: blur(10px); }
.speaker-name { position: absolute; top: -16px; left: 20px; min-width: 74px; padding: 8px 15px; border-radius: 11px; background: linear-gradient(135deg, #aa8dcc, #745795); font-size: 14px; font-weight: 900; text-align: center; }
.dialogue-text { display: block; font-size: 16px; font-weight: 650; line-height: 1.65; word-break: keep-all; }
.next-mark { position: absolute; right: 18px; bottom: 12px; color: #d9c5ef; font-size: 11px; animation: next-blink 1s ease-in-out infinite; }
.dialogue-skip { position: absolute; z-index: 4; top: max(24px, env(safe-area-inset-top)); right: 14px; min-height: 36px; font-size: 11px; }

.stage-screen, .ending-screen { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 28px; text-align: center; background: center / cover no-repeat; }
.stage-screen::before, .ending-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,19,.15), rgba(10,8,19,.82)); }
.stage-arrival-copy, .ending-screen > div, .stage-screen > button, .ending-screen > button { position: relative; z-index: 1; }
.stage-arrival-copy p, .ending-screen p { margin: 0 0 8px; color: #e9d8a5; font-size: 13px; font-weight: 900; }
.stage-arrival-copy h2, .ending-screen h2 { margin: 0 0 10px; font-family: Georgia, "Noto Serif KR", serif; font-size: 38px; text-shadow: 0 3px 12px #000; }
.stage-arrival-copy span, .ending-screen span { color: #e5e0eb; font-size: 13px; }
.stage-screen .main-button, .ending-screen .main-button { flex: none; }
.ending-screen { justify-content: center; background-image: url("./game-images/lumi/lumi-0005-03-moonforest.png"); }

.game-content { display: flex; min-height: 100dvh; padding: 0; align-items: flex-start; justify-content: center; color: #fff; background: #161321; }
.canvas-wrap { position: relative; width: min(100%, 56.25dvh); aspect-ratio: 9 / 16; overflow: hidden; background: #161321; }
canvas { display: block; width: 100%; height: 100%; image-rendering: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.puzzle-heading { position: absolute; z-index: 3; top: max(13px, env(safe-area-inset-top)); left: 15px; right: 15px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; text-shadow: 0 2px 7px rgba(0,0,0,.85); }
.puzzle-heading p { margin: 0 0 2px; color: #e6d8f4; font-size: 10px; font-weight: 800; }
.puzzle-heading h2 { margin: 0; color: #fff; font-family: Georgia, "Noto Serif KR", serif; font-size: 20px; }
.puzzle-title-row { display: flex; align-items: center; gap: 7px; }
.tutorial-help-button { display: grid; width: 23px; height: 23px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: rgba(38,28,51,.76); box-shadow: 0 3px 9px rgba(0,0,0,.32); font-size: 12px; font-weight: 900; pointer-events: auto; cursor: pointer; backdrop-filter: blur(6px); }
.tutorial-help-button:active { transform: scale(.92); }
.stage-badge { padding: 7px 11px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: #fff; background: rgba(25,19,39,.62); font-size: 12px; font-weight: 900; white-space: nowrap; backdrop-filter: blur(7px); }
.puzzle-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.hazard-counts { display: flex; gap: 3px; }
.hazard-counts span { padding: 4px 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; color: #ddd3e7; background: rgba(19,15,29,.65); font-size: 8px; white-space: nowrap; backdrop-filter: blur(6px); }
.hazard-counts span:nth-child(1) strong { color: #d7b7f3; }
.hazard-counts span:nth-child(2) strong { color: #f09aa3; }
.hazard-counts span:nth-child(3) strong { color: #ffe094; }
.hazard-counts span:nth-child(4) strong { color: #ff7f8d; }
.message { position: absolute; z-index: 6; left: 50%; bottom: max(130px, calc(env(safe-area-inset-bottom) + 118px)); translate: -50% 0; width: max-content; max-width: calc(100% - 28px); padding: 8px 12px; border: 1px solid rgba(255,255,255,.33); border-radius: 14px; color: #fff; background: rgba(27,21,40,.9); box-shadow: 0 5px 18px rgba(0,0,0,.28); font-size: 11px; line-height: 1.35; text-align: center; transition: opacity .2s; pointer-events: none; backdrop-filter: blur(8px); }
.puzzle-skip-button { position: absolute; z-index: 7; right: 13px; bottom: max(174px, calc(env(safe-area-inset-bottom) + 162px)); min-height: 31px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #ded4e4; background: rgba(32,25,43,.82); box-shadow: 0 5px 14px rgba(0,0,0,.3); font-size: 9px; font-weight: 800; cursor: pointer; backdrop-filter: blur(7px); }
.puzzle-skip-button:disabled { opacity: .35; cursor: default; }
.puzzle-skip-button:active:not(:disabled) { transform: scale(.97); }
.next-stage-button { position: absolute; z-index: 6; left: 50%; bottom: max(184px, calc(env(safe-area-inset-bottom) + 172px)); translate: -50% 0; min-width: 150px; min-height: 43px; padding: 7px 18px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; color: #fff; background: linear-gradient(135deg, #b895d2, #70518e); box-shadow: 0 9px 22px rgba(25,16,38,.46), inset 0 1px rgba(255,255,255,.34); font-size: 12px; font-weight: 900; cursor: pointer; animation: next-stage-pulse 1.35s ease-in-out infinite; }
.next-stage-button:active { transform: scale(.97); }
.completion-summary { position: absolute; z-index: 7; left: 50%; bottom: max(154px, calc(env(safe-area-inset-bottom) + 142px)); translate: -50% 0; display: flex; width: min(calc(100% - 28px), 330px); min-height: 116px; padding: 12px 13px; flex-direction: column; align-items: center; border: 1px solid rgba(244,224,170,.58); border-radius: 18px; color: #fff; background: linear-gradient(155deg, rgba(38,29,48,.94), rgba(18,14,25,.96)); box-shadow: 0 14px 34px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.13); text-align: center; cursor: pointer; backdrop-filter: blur(9px); animation: completion-card-in .38s ease-out both; }
.completion-summary > span:first-child { color: #f0d88e; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.completion-summary > strong { margin-top: 3px; font-size: 16px; }
.completion-result-row { display: grid; width: 100%; margin: 9px 0 8px; grid-template-columns: .9fr 1.45fr .8fr; gap: 5px; }
.completion-result-row em { overflow: hidden; padding: 5px 3px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: #bfb2c9; background: rgba(255,255,255,.055); font-size: 8px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.completion-result-row b { display: block; overflow: hidden; margin-top: 2px; color: #fff; font-size: 10px; text-overflow: ellipsis; }
.completion-summary small { color: #eee6f3; font-size: 10px; font-weight: 800; animation: next-blink 1.45s ease-in-out infinite; }
.completion-summary:active { transform: scale(.985); }

.tutorial-overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 15px max(18px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 35%, rgba(91,69,112,.28), rgba(9,7,15,.82) 60%); backdrop-filter: blur(4px); }
.tutorial-card { width: min(100%, 330px); padding: 16px; border: 1px solid rgba(236,220,249,.55); border-radius: 22px; color: #f8f3fb; background: linear-gradient(155deg, rgba(48,37,61,.98), rgba(22,17,31,.98)); box-shadow: 0 20px 50px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.13); text-align: center; }
.tutorial-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tutorial-card-top span { color: #ddc8ed; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.tutorial-card-top button { padding: 5px 8px; border: 0; color: #bfb1c9; background: transparent; font-size: 10px; cursor: pointer; }
.tutorial-icon { display: grid; width: 58px; height: 58px; margin: 1px auto 10px; place-items: center; border: 1px solid rgba(239,216,255,.36); border-radius: 18px; color: #ffe49b; background: linear-gradient(145deg, rgba(177,132,204,.4), rgba(74,52,91,.45)); box-shadow: inset 0 0 18px rgba(243,221,255,.12), 0 7px 17px rgba(0,0,0,.25); font-size: 25px; font-weight: 900; }
.tutorial-card h3 { margin: 0 0 7px; color: #fff; font-size: 20px; }
.tutorial-card > p { min-height: 45px; margin: 0; color: #d7cddd; font-size: 12px; line-height: 1.55; word-break: keep-all; }
.tutorial-example { display: flex; min-height: 43px; margin: 13px 0; align-items: center; justify-content: center; gap: 5px; padding: 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; color: #fff; background: rgba(10,8,16,.38); font-size: 12px; font-weight: 900; }
.tutorial-example span { display: grid; min-width: 29px; height: 29px; padding: 0 6px; place-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 7px; background: rgba(187,166,208,.35); }
.tutorial-example .number-one { color: #e9f6ff; text-shadow: 0 1px 3px #135b97; }
.tutorial-example .number-two { color: #bff1c3; text-shadow: 0 1px 3px #276d38; }
.tutorial-example .number-three { color: #ffc5c5; text-shadow: 0 1px 3px #8d3434; }
.tutorial-example .tutorial-energy { min-width: 91px; color: #ffbdc4; background: linear-gradient(90deg, rgba(196,46,78,.74) 70%, rgba(56,42,64,.66) 70%); }
.tutorial-example .tutorial-mana { min-width: 91px; color: #d9c8ff; background: linear-gradient(90deg, rgba(101,70,160,.78), rgba(45,34,67,.7)); }
.tutorial-next-button { width: 100%; min-height: 43px; border: 1px solid rgba(255,255,255,.45); border-radius: 13px; color: #fff; background: linear-gradient(135deg, #a67bc0, #70508a); box-shadow: 0 7px 17px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.22); font-size: 12px; font-weight: 900; cursor: pointer; }
.tutorial-next-button:active { transform: scale(.98); }

.game-hud { position: absolute; z-index: 5; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 72px minmax(0,1fr) 72px; align-items: end; gap: 7px; padding: 7px 8px 5px; border: 1px solid rgba(232,220,249,.32); border-radius: 22px; background: linear-gradient(180deg, rgba(32,25,45,.72), rgba(14,11,23,.94)); box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(9px); }
.orb-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.orb-wrap > span { color: #d9cde6; font-size: 8px; font-weight: 900; letter-spacing: .03em; white-space: nowrap; }
.orb { position: relative; width: 66px; height: 102px; overflow: hidden; border: 3px solid #83768d; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.18), transparent 32%), #261b30; box-shadow: inset 0 0 0 2px #d5c9da, inset 0 0 16px rgba(0,0,0,.72), 0 5px 13px rgba(0,0,0,.5); }
.orb::after { content: ""; position: absolute; inset: 6px 8px 56px; border-radius: 11px; background: linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,255,255,0)); opacity: .58; }
.orb-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transition: height .45s ease; }
.energy-orb .orb-liquid { background: linear-gradient(180deg, #ffb9aa, #dd425e 48%, #76162d 88%); box-shadow: inset 0 8px 12px rgba(255,219,207,.25); }
.orb strong { position: absolute; z-index: 2; left: 50%; bottom: 8px; translate: -50% 0; color: #fff; font-size: 11px; text-shadow: 0 2px 4px #3d0715; }
.moco-orb .orb-liquid { background: linear-gradient(180deg, #c9fff7, #7254bb 52%, #30225d); }
.moco-orb img { position: absolute; z-index: 1; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 13px; object-fit: cover; object-position: center; opacity: .88; mix-blend-mode: screen; }
.moco-orb strong { right: 1px; bottom: 2px; left: auto; min-width: 28px; height: 19px; padding: 2px 4px 0; border-radius: 99px; background: #7254a3; font-size: 9px; text-align: center; translate: 0; }
.skill-slots { display: grid; grid-template-columns: repeat(4, minmax(36px,1fr)); gap: 4px; padding-bottom: 9px; }
.skill-slot { position: relative; min-width: 0; height: 49px; padding: 2px; border: 2px solid #877794; border-radius: 8px; color: #fff; background: linear-gradient(145deg, rgba(111,89,132,.93), rgba(35,27,48,.96)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 8px rgba(0,0,0,.4); cursor: pointer; }
.skill-slot:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.skill-slot:disabled { opacity: .52; }
.skill-icon { display: block; font-size: 20px; line-height: 25px; }
.skill-image { display: block; width: 29px; height: 29px; margin: 0 auto 1px; border-radius: 6px; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,.38); }
.skill-slot small { position: absolute; top: -6px; right: -4px; min-width: 18px; padding: 2px 4px; border-radius: 99px; color: #fff; background: #b34c66; font-size: 9px; font-weight: 900; }
.skill-slot em { display: block; overflow: hidden; color: #d9cede; font-size: 7px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.empty-skill-slot { display: grid; place-items: center; cursor: default; opacity: .38; border-style: dashed; background: linear-gradient(145deg, rgba(67,56,78,.72), rgba(22,18,29,.9)); }
.empty-skill-slot span { color: #b4a8bd; font-size: 20px; line-height: 20px; }
.empty-skill-slot em { align-self: end; width: 100%; margin-top: -5px; }
.auto-flag-slot { border-color: #7f718e; background: linear-gradient(145deg, rgba(70,59,82,.95), rgba(28,23,36,.98)); }
.auto-flag-icon { display: grid; width: 30px; height: 28px; margin: 0 auto 1px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; color: #bcb1c6; background: rgba(15,13,20,.48); font-size: 8px; font-weight: 1000; letter-spacing: -.2px; }
.auto-flag-slot small { background: #665b72; }
.auto-flag-slot.is-enabled { border-color: #65d5a8; background: linear-gradient(145deg, rgba(39,131,99,.96), rgba(20,53,47,.98)); box-shadow: inset 0 0 0 1px rgba(210,255,237,.42), 0 0 12px rgba(73,222,165,.34), 0 4px 8px rgba(0,0,0,.4); }
.auto-flag-slot.is-enabled .auto-flag-icon { border-color: rgba(198,255,231,.78); color: #e7fff5; background: rgba(21,87,67,.74); text-shadow: 0 0 6px rgba(181,255,224,.8); }
.auto-flag-slot.is-enabled small { background: #229469; }
.utility-slot { border-color: #a18bab; background: linear-gradient(145deg, rgba(99,78,116,.96), rgba(33,25,44,.98)); }
.journey-slot { border-color: #78999e; }
.bag-slot { border-color: #a68a72; }
.equipment-slot .skill-icon { color: #9c8da8; }

.bag-screen { position: absolute; z-index: 40; inset: 0; display: flex; align-items: flex-end; padding: 18px 14px max(18px, env(safe-area-inset-bottom)); color: #4b3d58; background: rgba(13,10,20,.68); backdrop-filter: blur(8px); }
.bag-panel { width: 100%; max-height: 82dvh; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 26px; background: linear-gradient(155deg, #fbf8ff, #e8deef); box-shadow: 0 18px 50px rgba(0,0,0,.52); }
.bag-heading { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.bag-heading p { margin: 0 0 2px; color: #9a86aa; font-size: 10px; font-weight: 800; }
.bag-heading h2 { margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: 25px; }
.bag-heading button { width: 38px; height: 38px; border: 1px solid #d5c8df; border-radius: 50%; color: #685874; background: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.bag-summary { margin: 0 20px 11px; padding: 9px 12px; border-radius: 12px; color: #75657f; background: rgba(255,255,255,.7); font-size: 12px; }
.bag-difficulty { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 20px 11px; padding: 10px 12px; border: 1px solid #ddd0e6; border-radius: 14px; background: rgba(255,255,255,.68); }
.bag-difficulty strong, .bag-difficulty span { display: block; }
.bag-difficulty strong { margin-bottom: 2px; color: #5c4968; font-size: 12px; }
.bag-difficulty span { max-width: 145px; color: #95869e; font-size: 8px; line-height: 1.35; }
.bag-difficulty .difficulty-picker > div { min-width: 132px; }
.bag-difficulty .difficulty-picker button { min-height: 38px; padding: 2px 6px; color: #786783; border-color: #d2c3dc; background: #fff; }
.bag-difficulty .difficulty-picker button.is-selected { color: #fff; }
.bag-list { max-height: calc(82dvh - 208px); overflow-y: auto; padding: 0 14px 18px; }
.bag-item { display: grid; grid-template-columns: 48px 1fr; gap: 11px; align-items: center; min-height: 72px; margin-bottom: 8px; padding: 10px; border: 1px solid #dccfe5; border-radius: 15px; background: rgba(255,255,255,.78); }
.bag-item-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #b79ac5; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #d8b968, #8e6a37); font-size: 24px; box-shadow: inset 0 1px rgba(255,255,255,.45); }
.bag-item h3 { margin: 0 0 3px; color: #574461; font-size: 14px; }
.bag-item p { margin: 0; color: #887b90; font-size: 10px; line-height: 1.45; }
.bag-item.is-locked { filter: grayscale(1); opacity: .48; }
.bag-item.is-locked .bag-item-icon { color: #aaa0b0; background: #d4ccd8; }

.map-screen { position: absolute; z-index: 41; inset: 0; display: flex; align-items: flex-end; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); color: #493d56; background: rgba(11,9,17,.72); backdrop-filter: blur(9px); }
.map-panel { width: 100%; max-height: 92dvh; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 27px; background: linear-gradient(155deg, #faf5e8, #e8deef); box-shadow: 0 18px 55px rgba(0,0,0,.58); }
.map-heading { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px 12px; }
.map-heading p { margin: 0 0 2px; color: #9685a2; font-size: 10px; font-weight: 800; }
.map-heading h2 { margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: 26px; }
.map-heading button, .photo-close { width: 38px; height: 38px; border: 1px solid #d1c4da; border-radius: 50%; color: #695775; background: #fff; font-size: 24px; cursor: pointer; }
.map-heading-actions { display: flex; align-items: center; gap: 7px; }
.map-heading .meeting-entry { width: auto; min-width: 82px; padding: 0 11px; border-radius: 99px; color: #fff; border-color: #84669a; background: linear-gradient(135deg, #a486bb, #715387); font-size: 10px; font-weight: 900; }
.map-route { position: relative; max-height: calc(92dvh - 84px); overflow-y: auto; padding: 3px 14px 22px; }
.map-route::before { content: ""; position: absolute; top: 30px; bottom: 55px; left: 37px; width: 3px; border-radius: 9px; background: linear-gradient(#a98fc0, #d7bd82); }
.map-region { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 10px; margin-bottom: 11px; }
.map-node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 15px; border: 3px solid #f8f3fb; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #a688ba, #715484); box-shadow: 0 5px 12px rgba(65,43,76,.25); font-size: 14px; font-weight: 900; }
.map-region-card { overflow: hidden; border: 1px solid #d7cadc; border-radius: 17px; background: rgba(255,255,255,.8); box-shadow: 0 7px 16px rgba(67,45,75,.1); }
.map-region-top { display: grid; grid-template-columns: 76px 1fr; min-height: 78px; }
.map-region-top img { width: 76px; height: 78px; object-fit: cover; }
.map-region-copy { padding: 10px; }
.map-region-copy h3 { margin: 0 0 3px; font-size: 14px; }
.map-region-copy p { margin: 0; color: #8b7d92; font-size: 10px; }
.map-region-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 8px; }
.map-region-actions button { min-height: 34px; border: 1px solid #d5c8dd; border-radius: 10px; color: #685574; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.map-region-actions button:last-child { color: #fff; border-color: #83659b; background: linear-gradient(135deg, #a283b9, #705187); }
.map-region.is-locked { filter: grayscale(.8); opacity: .48; }
.map-region.is-locked .map-node { background: #8f8793; }
.map-region.is-locked .map-region-actions button { pointer-events: none; }
.map-region.is-placeholder { align-items: center; margin-bottom: 7px; filter: none; opacity: .68; }
.map-region.is-placeholder .map-node { width: 36px; height: 36px; margin: 0 4px; border-width: 2px; font-size: 11px; }
.map-placeholder-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 43px; padding: 8px 11px; border: 1px dashed #cfc2d6; border-radius: 13px; background: rgba(255,255,255,.58); }
.map-placeholder-card strong { color: #6d5c77; font-size: 11px; }
.map-placeholder-card span { overflow: hidden; color: #9a8da1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.photo-viewer { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(54px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); color: #fff; background: rgba(9,7,14,.94); }
.photo-viewer img { width: min(100%, 355px); max-height: 76dvh; border: 1px solid rgba(255,255,255,.38); border-radius: 19px; object-fit: contain; box-shadow: 0 15px 38px rgba(0,0,0,.65); }
.photo-viewer p { margin: 0 0 10px; color: #e3d4ef; font-size: 12px; font-weight: 800; }
.photo-close { position: absolute; top: max(17px, env(safe-area-inset-top)); right: 17px; }
.photo-controls { display: flex; gap: 9px; width: min(100%,355px); margin-top: 12px; }
.photo-controls button { flex: 1; min-height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; color: #fff; background: #604b72; cursor: pointer; }
.photo-controls button:disabled { opacity: .35; }

.meeting-view { position: absolute; z-index: 3; inset: 0; overflow-y: auto; padding: max(21px, env(safe-area-inset-top)) 15px max(22px, env(safe-area-inset-bottom)); color: #493d56; background: linear-gradient(155deg, #f8f2e7, #e7dcef); }
.meeting-heading { display: flex; align-items: center; justify-content: space-between; }
.meeting-heading p { margin: 0 0 2px; color: #94849f; font-size: 10px; font-weight: 800; }
.meeting-heading h2 { margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: 27px; }
.meeting-heading button { width: 39px; height: 39px; border: 1px solid #d2c5db; border-radius: 50%; color: #695775; background: #fff; font-size: 24px; cursor: pointer; }
.meeting-intro { margin: 14px 0; padding: 10px 12px; border: 1px solid #ded1e5; border-radius: 13px; color: #796a82; background: rgba(255,255,255,.66); font-size: 11px; line-height: 1.5; }
.meeting-character-switch { margin-bottom: 16px; padding: 12px; border: 1px solid #d7c9df; border-radius: 17px; background: rgba(255,255,255,.72); box-shadow: 0 7px 17px rgba(67,45,75,.08); }
.meeting-switch-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.meeting-switch-heading div { display: flex; align-items: baseline; gap: 6px; }
.meeting-switch-heading span { color: #9684a1; font-size: 9px; font-weight: 900; }
.meeting-switch-heading strong { color: #594663; font-size: 16px; }
.meeting-switch-heading small { color: #9a8ca2; font-size: 8px; text-align: right; }
.meeting-character-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.meeting-character-option { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 8px; min-width: 0; padding: 6px; border: 1px solid #cdbed6; border-radius: 13px; color: #5c4a66; background: linear-gradient(145deg, #fff, #eee5f2); text-align: left; cursor: pointer; }
.meeting-character-option img { width: 46px; height: 58px; border-radius: 9px; object-fit: cover; object-position: center 18%; background: #ded3e5; }
.meeting-character-option span { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.meeting-character-option strong { font-size: 12px; }
.meeting-character-option small { margin-top: 3px; overflow: hidden; color: #8c7b95; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; }
.meeting-character-option em { grid-column: 1 / -1; padding: 3px 5px; border-radius: 7px; color: #fff; background: #806091; font-size: 8px; font-style: normal; font-weight: 900; text-align: center; }
.meeting-character-option.is-current { border-color: #b99568; background: linear-gradient(145deg, #fff9e9, #eee2ce); box-shadow: inset 0 0 0 1px rgba(203,171,112,.3); cursor: default; }
.meeting-character-option.is-current em { background: #b28b51; }
.meeting-character-switch > p { margin: 9px 2px 0; color: #95879c; font-size: 8px; line-height: 1.45; }
.meeting-section-title { margin: 0 0 8px 2px; color: #675470; font-size: 13px; }
.meeting-event-list { display: grid; gap: 10px; }
.meeting-event { display: grid; grid-template-columns: 86px 1fr; min-height: 120px; overflow: hidden; border: 1px solid #d7cadf; border-radius: 17px; background: rgba(255,255,255,.82); box-shadow: 0 7px 17px rgba(67,45,75,.11); }
.meeting-event img { width: 86px; height: 100%; min-height: 120px; object-fit: cover; object-position: center 20%; }
.meeting-event-copy { padding: 11px; }
.meeting-event-copy > span { color: #9472a6; font-size: 9px; font-weight: 900; }
.meeting-event-copy h3 { margin: 3px 0 4px; color: #56415f; font-size: 14px; }
.meeting-event-copy p { margin: 0 0 8px; color: #8a7b91; font-size: 10px; line-height: 1.45; }
.meeting-event-copy button { width: 100%; min-height: 32px; border: 1px solid #8f70a2; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #a284b8, #725489); font-size: 10px; font-weight: 800; cursor: pointer; }
.meeting-event.is-locked { filter: grayscale(.75); opacity: .5; }
.meeting-event.is-complete { border-color: #caae70; box-shadow: inset 0 0 0 1px rgba(211,177,101,.35); }
.meeting-event-copy button:disabled { color: #827889; border-color: #d2c9d7; background: #e5dfe8; }

.meeting-dialogue { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 16px max(22px, env(safe-area-inset-bottom)); color: #fff; background: linear-gradient(180deg, rgba(20,15,27,.24), rgba(12,9,18,.92)), url("./assets/story/intro-ruins-nature.png") center / cover; }
.meeting-dialogue > img { position: absolute; top: 7%; left: 8%; width: 84%; height: 65%; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.42)); }
.meeting-dialogue-box { position: relative; z-index: 1; min-height: 174px; padding: 28px 19px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 19px; background: rgba(28,22,39,.92); backdrop-filter: blur(9px); }
.meeting-dialogue-box > span { position: absolute; top: -15px; left: 16px; padding: 7px 14px; border-radius: 10px; background: #84639a; font-size: 12px; font-weight: 900; }
.meeting-dialogue-box p { min-height: 62px; margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.meeting-dialogue-box button { width: 100%; min-height: 39px; border: 1px solid rgba(255,255,255,.32); border-radius: 11px; color: #fff; background: #725489; font-weight: 800; cursor: pointer; }

@keyframes title-float { 50% { transform: translateY(-9px); } }
@keyframes start-pulse { 50% { box-shadow: 0 14px 35px rgba(118,88,161,.62), 0 0 0 5px rgba(229,215,247,.12); } }
@keyframes story-scroll { from { transform: translateY(0); } to { transform: translateY(calc(-100% - 100dvh)); } }
@keyframes next-blink { 50% { opacity: .28; transform: translateY(3px); } }
@keyframes next-stage-pulse { 50% { box-shadow: 0 11px 28px rgba(174,127,211,.62), inset 0 1px rgba(255,255,255,.4); transform: translateY(-2px); } }
@keyframes completion-card-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-height: 740px) {
  .flow-screen { padding-top: max(15px, env(safe-area-inset-top)); }
  .character-layout { grid-template-columns: 104px 1fr; }
  .character-card img { height: calc(100% - 137px); }
  .character-copy { min-height: 143px; padding: 12px 13px; }
  .dialogue-character { bottom: 150px; height: 46%; }
  .dialogue-panel { min-height: 126px; padding-top: 23px; }
  .game-hud { grid-template-columns: 64px minmax(0,1fr) 64px; }
  .orb { width: 59px; height: 94px; border-radius: 16px; }
  .skill-slot { height: 45px; }
  .skill-image { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .start-title, .start-screen .main-button, .next-mark, .next-stage-button, .completion-summary, .completion-summary small { animation: none; }
  .story-crawl { animation-duration: .01ms; }
}