/* app.css — "킹받는" retro flash-game look (decision 0006).
   Deliberately tacky: thick ink outlines, wobbly hand-drawn borders, sticker buttons, hot pink. */

:root {
  --ink: #1b1320;
  --paper: #fff8ec;
  --pink: #ff4fa3;
  --rose: #e8173a;
  --lemon: #ffe95c;
  --mint: #6ff0c8;
  --sky: #7cc8ff;
  --purple: #9b5cff;
  --lilac: #efe0ff;
  --wob1: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wob2: 15px 255px 15px 225px / 225px 15px 255px 15px;
  --wob3: 30px 8px 26px 10px / 10px 28px 8px 30px;
  --sticker: 4px 4px 0 var(--ink);
  --f-ui: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --f-talk: 'Gaegu', 'Jua', 'Malgun Gothic', sans-serif;
  --f-title: 'Black Han Sans', 'Jua', 'Malgun Gothic', sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #ff9fcf;
  background-image: radial-gradient(#ffd6ec 22%, transparent 23%), radial-gradient(#ffd6ec 22%, transparent 23%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
  color: var(--ink);
  font-family: var(--f-ui);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
/* Game UI, not a document: no text selection/callout on taps, no double-tap zoom, no image drag.
   Typing fields stay selectable. */
#app {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
#app img, #app svg { -webkit-user-drag: none; user-drag: none; }
#app textarea, #app input, #app [contenteditable="true"] {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

/* ---------- phone frame ---------- */
#app {
  --persona: var(--pink); --persona-tint: #fff0f7;
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}
@media (min-width: 560px) {
  body { display: flex; align-items: center; justify-content: center; }
  #app {
    width: 400px;
    height: min(calc(100dvh - 40px), 860px);
    border: 4px solid var(--ink);
    border-radius: 34px;
    box-shadow: 10px 10px 0 var(--ink);
    margin: 0;
  }
}

/* ---------- layers ---------- */
.bg-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #ffd1ea; }
.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-img { position: absolute; inset: 0; background: center / cover no-repeat; }
.bg-layer[data-mode="doodle"] .bg-img { display: none; }
.bg-layer[data-mode="sprite"] .bg-canvas { display: none; }

.screen { position: absolute; inset: 0; z-index: 1; display: none; }
.screen.is-active { display: block; animation: screen-in .35s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes screen-in { from { transform: scale(.94) rotate(-1deg); opacity: 0; } to { transform: none; opacity: 1; } }

.fx-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }

/* ---------- shared bits ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; padding: 10px 20px;
  font-family: var(--f-ui); font-size: 19px; letter-spacing: -.3px;
  background: #fff; border: 3px solid var(--ink); border-radius: var(--wob1);
  box-shadow: var(--sticker);
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-pink { background: var(--pink); color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.btn-yellow { background: var(--lemon); }
.btn-ghost { background: #fff; }
.btn-small { min-height: 44px; padding: 6px 12px; font-size: 16px; }
.link-btn { background: none; border: 0; padding: 8px 0; font-size: 14px; text-decoration: underline wavy var(--pink); color: #3f3046; }

.mute-btn {
  width: 44px; height: 44px; padding: 5px; flex: none;
  background: #fff; border: 3px solid var(--ink); border-radius: var(--wob2);
  box-shadow: 3px 3px 0 var(--ink);
}
.mute-btn svg { width: 100%; height: 100%; display: block; }
.mute-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.chip {
  display: inline-block; max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 10px; font-size: 14px; line-height: 1.2;
  background: #fff; border: 2.5px solid var(--ink); border-radius: var(--wob3);
  box-shadow: 2px 2px 0 var(--ink);
}
.chip-mode { background: var(--lemon); transform: rotate(-2deg); }
.chip-persona { background: var(--persona); color: #fff; text-shadow: 1px 1px 0 var(--ink); transform: rotate(1.5deg); }

.toast {
  position: absolute; left: 50%; bottom: calc(24px + var(--sab)); z-index: 60;
  transform: translate(-50%, 30px) rotate(-2deg); opacity: 0; pointer-events: none;
  padding: 10px 18px; max-width: 90%; text-align: center;
  background: var(--lemon); border: 3px solid var(--ink); border-radius: var(--wob1); box-shadow: var(--sticker);
  font-size: 16px; transition: transform .25s cubic-bezier(.2, 1.8, .5, 1), opacity .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }

/* ---------- title ---------- */
.screen-title { overflow: hidden; }
.title-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: calc(14px + var(--sat)) calc(16px + var(--sar)) 0 calc(16px + var(--sal));
  display: flex; flex-direction: column; gap: 10px;
}
.title-mute { position: absolute; top: calc(10px + var(--sat)); right: calc(10px + var(--sar)); z-index: 3; }
.title-hero { text-align: center; padding: 10px 0 0; }
.title-ribbon {
  display: inline-block; padding: 3px 12px; margin-bottom: 6px; font-size: 13px;
  background: var(--rose); color: #fff; border: 2.5px solid var(--ink); border-radius: var(--wob3);
  transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--ink);
}
.game-title {
  margin: 4px 0 4px; font-family: var(--f-title); font-weight: 400;
  font-size: clamp(36px, 11.5vw, 48px); line-height: 1.05; letter-spacing: -1px;
  color: var(--pink);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 4px 4px 0 var(--ink), 6px 6px 0 var(--lemon);
  animation: wobble 2.4s ease-in-out infinite;
}
@keyframes wobble { 0%, 100% { transform: rotate(-2.5deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }
.game-subtitle {
  display: inline-block; margin: 6px 0 0; padding: 4px 12px; font-family: var(--f-talk); font-weight: 700; font-size: 19px;
  background: #fff; border: 2.5px solid var(--ink); border-radius: var(--wob2); transform: rotate(1deg);
}
.title-warn {
  padding: 8px 12px; font-size: 14px; background: #fff3c4; border: 2.5px dashed var(--ink); border-radius: var(--wob3);
}

.pick { margin: 0; }
section.pick { display: flex; flex-direction: column; gap: 6px; }
.pick-h {
  margin: 0; font-family: var(--f-ui); font-weight: 400; font-size: 17px;
  display: inline-block; align-self: flex-start; padding: 1px 10px;
  background: var(--ink); color: var(--lemon); border-radius: var(--wob3); transform: rotate(-1.5deg);
}
.pick-modes { display: flex; flex-direction: column; gap: 8px; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button.pick {
  position: relative; text-align: left;
  min-height: 52px; padding: 8px 12px;
  background: #fff; border: 3px solid var(--ink); border-radius: var(--wob1); box-shadow: var(--sticker);
  transition: transform .1s, box-shadow .1s, background .1s;
}
button.pick:nth-child(2n) { border-radius: var(--wob2); }
button.pick:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
button.pick.is-sel { background: var(--lemon); transform: rotate(-1deg) scale(1.02); }
button.pick.is-sel::after {
  content: '♥'; position: absolute; top: -12px; right: -6px;
  font-size: 22px; color: var(--rose); -webkit-text-stroke: 1.5px var(--ink); transform: rotate(14deg);
}
.pick-mode { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.pick-badge {
  grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center;
  font-family: var(--f-title); font-size: 22px; color: #fff; background: var(--pink);
  border: 2.5px solid var(--ink); border-radius: 50% 45% 55% 48%; text-shadow: 1px 1px 0 var(--ink);
}
.pick-name { font-size: 18px; line-height: 1.2; display: block; }
.pick-desc { font-size: 14px; line-height: 1.3; color: #3f3046; display: block; }
button.pick-art { text-align: center; }
.pick-personas button.pick { text-align: center; padding: 8px 8px 10px; min-height: 90px; }
.persona-badge {
  display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 2px;
  font-size: 24px; background: var(--pink); color: #fff; border: 2.5px solid var(--ink); border-radius: 50%;
}
.persona-b .persona-badge { background: var(--sky); }
.pick-persona .pick-name { font-size: 20px; }

.title-start {
  position: sticky; bottom: 0; margin: 4px -16px 0; padding: 10px 16px calc(14px + var(--sab));
  background: linear-gradient(to bottom, rgba(255, 209, 234, 0), rgba(255, 209, 234, .95) 35%);
}
.btn-start {
  width: 100%; min-height: 62px; font-size: 25px; font-family: var(--f-title); letter-spacing: 0;
  background: var(--rose); color: #fff; -webkit-text-stroke: 1px var(--ink); text-shadow: 3px 3px 0 var(--ink);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.04) rotate(1deg); } }

/* ---------- game ---------- */
.topbar {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 0 calc(10px + var(--sal));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; min-width: 0; }

.char-area {
  position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 57%;
  padding-top: calc(48px + var(--sat));
  transform-origin: 50% 38%;
}
.char-mount { position: relative; width: 100%; height: 100%; }
.char-mount > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.char-enter { animation: char-in .5s cubic-bezier(.2, 1.7, .5, 1); }
@keyframes char-in { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.char-area.is-thinking .char-mount { animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-1deg); } }

.bottom-panel {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));
}

.thinking {
  align-self: center; padding: 6px 16px; font-size: 17px;
  background: #fff; border: 3px solid var(--ink); border-radius: var(--wob1); box-shadow: 3px 3px 0 var(--ink);
  animation: think-wiggle 1s ease-in-out infinite;
}
@keyframes think-wiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-2px); } }
.thinking .dots i { font-style: normal; display: inline-block; animation: dot 1s infinite; }
.thinking .dots i:nth-child(2) { animation-delay: .15s; }
.thinking .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-6px); } }

.dialogue {
  position: relative; min-height: 92px; padding: 22px 16px 16px;
  background: #fff; border: 3.5px solid var(--ink); border-radius: var(--wob1);
  box-shadow: 5px 5px 0 var(--ink);
}
.dialogue.pop-in { animation: dlg-pop .22s cubic-bezier(.2, 1.8, .5, 1); }
@keyframes dlg-pop { from { transform: scale(.96) rotate(-.6deg); } }
.dialogue.is-empty { visibility: hidden; }
.speaker-label {
  position: absolute; top: -17px; left: 14px; padding: 2px 14px;
  font-size: 18px; line-height: 1.3; color: #fff; background: var(--persona); text-shadow: 1px 1px 0 var(--ink);
  border: 3px solid var(--ink); border-radius: var(--wob3); transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--ink);
}
.speaker-label:empty { display: none; }
.dialogue-text {
  font-family: var(--f-talk); font-weight: 700; font-size: 22px; line-height: 1.35; letter-spacing: -.2px;
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
}
.dialogue-next {
  position: absolute; right: 14px; bottom: 6px; font-size: 14px; color: var(--pink); opacity: 0;
}
.dialogue.is-waiting .dialogue-next { opacity: 1; animation: nudge .6s ease-in-out infinite alternate; }
@keyframes nudge { to { transform: translateY(4px); } }

.dialogue[data-speaker="her"] { background: var(--persona-tint); }
.dialogue[data-speaker="me"] { background: #e9f6ff; }
.dialogue[data-speaker="me"] .speaker-label { left: auto; right: 14px; background: var(--sky); color: var(--ink); text-shadow: none; transform: rotate(3deg); }
.dialogue[data-speaker="narr"] {
  background: #fff6cf; border-style: dashed; border-radius: var(--wob2);
}
.dialogue[data-speaker="narr"] .dialogue-text { font-style: italic; font-weight: 700; color: #3a2c42; text-align: center; font-size: 21px; }

.input-area {
  display: flex; gap: 8px; align-items: stretch;
  animation: dlg-pop .25s cubic-bezier(.2, 1.8, .5, 1);
}
.input-wrap { position: relative; flex: 1; min-width: 0; }
.input-text {
  display: block; width: 100%; height: 76px; resize: none;
  padding: 10px 12px 20px; font-family: var(--f-talk); font-weight: 700; font-size: 19px; line-height: 1.25;
  color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: var(--wob2);
  box-shadow: 3px 3px 0 var(--ink); outline: none;
}
.input-text:focus { background: #fffdf2; box-shadow: 3px 3px 0 var(--pink); }
.input-text::placeholder { color: #7a6a80; font-weight: 400; }
.input-text:disabled { background: #f1ecf2; }
.input-text[aria-invalid="true"] { border-color: #9b224b; }
.input-notice {
  padding: 8px 12px; color: #802040; background: #fff3f6;
  border: 2px solid #9b224b; border-radius: 10px;
  font-family: var(--f-talk); font-size: 15px; line-height: 1.4;
}
.counter { position: absolute; right: 8px; bottom: 5px; padding: 0 4px; font-size: 13px; color: #5e4f63; background: rgba(255, 255, 255, .92); border-radius: 6px; pointer-events: none; }
.counter.is-full { color: var(--rose); }
.send-btn {
  flex: none; width: 76px; font-size: 19px;
  background: var(--pink); color: #fff; text-shadow: 2px 2px 0 var(--ink);
  border: 3px solid var(--ink); border-radius: var(--wob1); box-shadow: var(--sticker);
}
.send-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.send-btn:disabled { background: #d9ced9; text-shadow: none; color: #fff; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- result ---------- */
.screen-result { background: #ffe3f2; }
.screen-result::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 12%, #fff4a8 0 7.5deg, #ffd1ea 7.5deg 15deg);
  opacity: .8;
}
.result-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(28px + var(--sab)) calc(16px + var(--sal));
  display: flex; flex-direction: column; gap: 16px;
}
.result-head { text-align: center; }
.result-meta { display: inline-block; font-size: 14px; padding: 2px 10px; background: #fff; border: 2px solid var(--ink); border-radius: var(--wob3); }
.score-box { margin: 8px 0 0; line-height: 1; }
.score-num {
  font-family: var(--f-title); font-size: 92px; color: var(--lemon);
  -webkit-text-stroke: 3px var(--ink); text-shadow: 5px 5px 0 var(--ink), 9px 9px 0 var(--pink);
  display: inline-block; font-variant-numeric: tabular-nums;
}
.score-unit { font-family: var(--f-title); font-size: 30px; margin-left: 4px; color: var(--ink); }
.is-scored .score-num { animation: stamp .45s cubic-bezier(.2, 2, .5, 1); }
@keyframes stamp { from { transform: scale(1.6) rotate(-8deg); } to { transform: rotate(-3deg); } }
.is-scored .score-box .score-num, .is-done .score-num { transform: rotate(-3deg); }
.ending-title {
  margin: 8px auto 4px; display: inline-block; max-width: 100%;
  padding: 6px 16px; font-family: var(--f-title); font-weight: 400; font-size: 27px; line-height: 1.2;
  background: var(--rose); color: #fff; -webkit-text-stroke: .5px var(--ink); text-shadow: 2px 2px 0 var(--ink);
  border: 3px solid var(--ink); border-radius: var(--wob1); box-shadow: var(--sticker); transform: rotate(-1.5deg);
  opacity: 0;
}
.ending-title:empty { display: none; }
.is-scored .ending-title, .is-done .ending-title { opacity: 1; animation: stamp .45s .1s cubic-bezier(.2, 2, .5, 1) backwards; transform: rotate(-1.5deg); }
.ending-no .ending-title, .ending-title.ending-no { background: #6b5d7a; }
.ending-title.ending-cheat { background: var(--ink); color: var(--lemon); }
.ending-title.ending-breakup { background: #5a4d68; }
.ending-lines { margin-top: 6px; opacity: 0; transition: opacity .4s .3s; }
.is-scored .ending-lines, .is-done .ending-lines { opacity: 1; }
.ending-line { margin: 4px 0; font-family: var(--f-talk); font-weight: 700; font-size: 19px; line-height: 1.3; word-break: keep-all; }

.result-sec {
  padding: 14px 12px 12px; background: #fff; border: 3px solid var(--ink); border-radius: var(--wob2); box-shadow: 5px 5px 0 var(--ink);
  position: relative;
}
.sec-title {
  position: absolute; top: -15px; left: 12px; margin: 0; padding: 1px 12px;
  font-family: var(--f-ui); font-weight: 400; font-size: 16px; max-width: calc(100% - 24px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--ink); color: var(--lemon); border-radius: var(--wob3); transform: rotate(-2deg);
}
.turn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.turn-card {
  padding: 14px 0 16px; border-top: 2px dotted #dccbe2;
  opacity: 0; transform: translateX(-20px);
  transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .5, 1);
}
.turn-card:first-child { border-top: 0; padding-top: 4px; }
.turn-card:last-child { padding-bottom: 2px; }
.turn-card.is-in { opacity: 1; transform: none; }
.turn-card.is-empty { opacity: 1; transform: none; color: #5e4f63; }
.turn-label { font-size: 13px; color: var(--purple); }
.turn-player { margin: 6px 0 10px; font-family: var(--f-talk); font-weight: 700; font-size: 18px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.feature-row, .delta-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.feature {
  font-size: 13px; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 12px 4px 12px 4px;
  background: #fff; box-shadow: 1px 1px 0 var(--ink);
}
.feature.is-good { background: var(--mint); }
.feature.is-bad { background: #ff9d9d; }
.feature.is-meh { background: #e6e0ea; }
.turn-reaction { margin-top: 4px; }
.turn-reaction .el-who { font-size: 13px; }
.turn-reaction .el-text { font-size: 18px; padding: 12px 12px 8px; }
.delta { font-size: 13px; padding: 1px 7px; border-radius: 6px; border: 1.5px solid var(--ink); }
.delta.is-good { background: #ffd6ec; color: #b0005b; }
.delta.is-bad { background: #d9d0f5; color: #3f2a86; }
.delta.is-flat { background: #eee; color: #777; }

.rank-body { margin-top: 6px; }
.rank-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.rank-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  padding: 5px 8px; font-size: 15px; border-bottom: 2px dotted #d8c8dd;
}
.rank-item.is-me { background: var(--lemon); border: 2.5px solid var(--ink); border-radius: var(--wob3); animation: pulse 1.2s ease-in-out 3; }
.rank-no { font-family: var(--f-title); font-size: 17px; text-align: center; }
.rank-item:nth-child(1) .rank-no { color: #d4a000; -webkit-text-stroke: .5px var(--ink); }
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-end { font-size: 13px; color: #5e4f63; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score { font-family: var(--f-title); font-variant-numeric: tabular-nums; }
.rank-empty, .rank-out { margin: 6px 0; font-size: 15px; color: #3f3046; }
.nick-form { display: flex; flex-direction: column; gap: 10px; }
.nick-q { font-size: 15px; }
.nick-row { display: flex; gap: 8px; }
.nick-input {
  flex: 1; min-width: 0; height: 50px; padding: 0 12px; font-family: var(--f-ui); font-size: 17px;
  border: 3px solid var(--ink); border-radius: var(--wob3); outline: none; background: #fffdf2;
}
.result-btns { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 8px; }
.result-btns .btn { width: 100%; }

/* ---------- modal ---------- */
.modal { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(27, 19, 32, .55); }
.modal-card {
  width: 100%; max-width: 340px; padding: 18px 16px 16px; text-align: center;
  background: var(--paper); border: 3.5px solid var(--ink); border-radius: var(--wob1); box-shadow: 6px 6px 0 var(--ink);
  animation: screen-in .35s cubic-bezier(.2, 1.6, .5, 1);
}
.modal-face { font-size: 30px; }
.modal-title { margin: 6px 0; font-family: var(--f-title); font-weight: 400; font-size: 24px; color: var(--rose); }
.modal-msg { margin: 0 0 10px; font-size: 16px; line-height: 1.4; word-break: keep-all; }
.modal-detail { margin: 0 0 12px; padding: 6px 8px; font-size: 11px; text-align: left; white-space: pre-wrap; word-break: break-all; background: #f1ecf2; border-radius: 6px; max-height: 90px; overflow: auto; }

/* ---------- FX ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-p { position: absolute; aspect-ratio: 1; background: center / contain no-repeat; will-change: transform, opacity; }

.fx-rose { top: -70px; animation: fx-fall linear both; }
@keyframes fx-fall {
  from { transform: translate3d(0, 0, 0) rotate(0); }
  to { transform: translate3d(var(--dx), var(--fall, 900px), 0) rotate(var(--rot)); }
}
.fx-star { transform: translate(-50%, -50%) scale(0); animation: fx-twinkle ease-in-out both; }
@keyframes fx-twinkle {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(1.25) rotate(35deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: 0; }
}
.fx-heart { bottom: -60px; aspect-ratio: 40 / 36; animation: fx-rise ease-out both; }
@keyframes fx-rise {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate3d(var(--dx), calc(var(--rise, -900px) * .5), 0) scale(1) rotate(-12deg); }
  100% { transform: translate3d(calc(var(--dx) * -1), var(--rise, -900px), 0) scale(1.1) rotate(12deg); opacity: .9; }
}
.fx-focusLines { animation: fx-fade var(--dur) ease-out both; }
@keyframes fx-fade { 0% { opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

.fx-shaking > .screen.is-active, .fx-shaking > .bg-layer { animation: fx-shake var(--shake-dur, .5s) linear; }
@keyframes fx-shake {
  0%, 100% { transform: none; }
  10% { transform: translate(-9px, 4px) rotate(-1deg); }
  20% { transform: translate(8px, -5px) rotate(1deg); }
  30% { transform: translate(-7px, -3px); }
  40% { transform: translate(7px, 5px) rotate(.5deg); }
  55% { transform: translate(-5px, 2px); }
  70% { transform: translate(4px, -3px); }
  85% { transform: translate(-2px, 1px); }
}

.char-area.fx-zooming { animation: fx-zoom var(--zoom-dur, 1.4s) cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes fx-zoom {
  0% { transform: scale(1); }
  18% { transform: scale(1.45) rotate(-2deg); }
  75% { transform: scale(1.4) rotate(1deg); }
  100% { transform: scale(1); }
}
.fx-zoom-vignette {
  background: radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(27, 19, 32, .55) 80%);
  animation: fx-fade var(--dur) ease-out both;
}

.fx-drop { aspect-ratio: 30 / 44; transform-origin: 50% 0; animation: fx-drip ease-in both; }
@keyframes fx-drip {
  0% { transform: scale(0) translateY(0); opacity: 0; }
  15% { transform: scale(1.2) translateY(0); opacity: 1; }
  25% { transform: scale(1) translateY(0); }
  85% { transform: scale(1) translateY(38px); opacity: 1; }
  100% { transform: scale(.9) translateY(48px); opacity: 0; }
}

.fx-lightning { animation: fx-shock var(--dur) steps(1, end) both; }
@keyframes fx-shock {
  0% { background: rgba(255, 255, 255, .95); }
  12% { background: rgba(27, 19, 32, .85); }
  24% { background: rgba(255, 250, 180, .9); }
  36% { background: rgba(27, 19, 32, .6); }
  52% { background: rgba(255, 255, 255, .5); }
  70%, 100% { background: transparent; }
}
.fx-bolt { position: absolute; top: -2%; background: center / 100% 100% no-repeat; animation: fx-bolt var(--dur) steps(1, end) both; }
@keyframes fx-bolt { 0% { opacity: 1; } 30% { opacity: 0; } 42% { opacity: 1; } 65%, 100% { opacity: 0; } }

.fx-gloom { animation: fx-fade var(--dur) ease-in-out both; }
.fx-gloom-dark { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(40, 22, 70, .72), rgba(40, 22, 70, .35) 55%, rgba(40, 22, 70, .15)); }
.fx-gloom-lines {
  position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background: repeating-linear-gradient(90deg, rgba(10, 5, 25, .85) 0 3px, transparent 3px 11px, rgba(10, 5, 25, .7) 11px 13px, transparent 13px 23px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
  animation: fx-gloom-in var(--dur) ease-out both;
}
@keyframes fx-gloom-in { from { transform: translateY(-40%); } 30% { transform: none; } to { transform: none; } }

.fx-flash { background: #fff; animation: fx-flash var(--dur) ease-out both; }
@keyframes fx-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- v2 additions (CONTRACT-v2 §3) ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.screen:focus, .sc-game:focus, .rl-card:focus, .game-title:focus, .input-text:focus-visible, .nick-input:focus-visible { outline: none; }
.nick-input:focus { box-shadow: 0 0 0 3px var(--pink); }

/* progress chip "만남 · 1/5" */
.chip-progress { background: var(--mint); transform: rotate(-1deg); font-variant-numeric: tabular-nums; }

/* calm the busy background behind the face and the dialogue (game screen only) */
.bg-layer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background:
    radial-gradient(ellipse 64% 26% at 50% 27%, rgba(255, 248, 236, .6), rgba(255, 248, 236, .28) 65%, transparent 100%),
    linear-gradient(to top, rgba(255, 248, 236, .78) 0, rgba(255, 248, 236, .45) 28%, transparent 46%);
}
#app[data-screen="game"] .bg-layer::after { opacity: 1; }

/* doodle table edge in front of the character (hides the sprite's straight bottom cut) */
.char-mount { z-index: 1; }
.fg-strip { position: absolute; z-index: 2; left: -6px; right: -6px; bottom: -8px; height: 46px; pointer-events: none; }
.fg-strip svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fg-strip .fg-top { fill: #f4b27f; }
#app[data-persona="yuri"] { --persona: #4f5bd5; --persona-tint: #eef0ff; }
#app[data-art="doodle"] .fg-strip .fg-top { fill: #ffd39c; }

/* heart indicator (decision 0012) */
.heart-ind {
  position: absolute; z-index: 3; right: calc(12px + var(--sar)); top: calc(64px + var(--sat));
  width: 66px; height: 66px; display: grid; place-items: center; pointer-events: none;
}
.heart-ind svg {
  width: var(--hi-size, 44px); height: auto; overflow: visible;
  filter: grayscale(var(--hi-grey, 0)) drop-shadow(2px 2px 0 var(--ink));
  animation: hi-beat var(--hi-beat, 1.2s) ease-in-out infinite;
  transition: width .45s cubic-bezier(.2, 1.6, .5, 1);
}
.heart-ind .hi-body { fill: var(--hi-fill, #ff4fa3); transition: fill .4s; }
.heart-ind .hi-crack { display: none; }
.heart-ind.is-cracked .hi-crack { display: inline; }
.heart-ind.is-preview .hi-body { stroke-dasharray: 4 5; fill-opacity: .6; }
.heart-ind .hi-tag {
  display: none; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  padding: 0 6px; font-size: 12px; line-height: 1.4; white-space: nowrap;
  background: #fff; border: 2px dashed var(--ink); border-radius: 8px;
}
.heart-ind.is-preview .hi-tag { display: block; }
@keyframes hi-beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(var(--hi-amp, 1.1)); }
  24% { transform: scale(.97); }
  36% { transform: scale(calc(var(--hi-amp, 1.1) - .04)); }
  52% { transform: scale(1); }
}

/* outage modal */
.modal-outage { z-index: 80; }
.modal-outage .modal-title { color: var(--ink); }
.outage-status { min-height: 1.3em; margin: 0 0 10px; font-size: 15px; color: #b3002b; }
.outage-retry { width: 100%; }
.spinner {
  display: none; width: 20px; height: 20px; flex: none;
  border: 3px solid var(--ink); border-top-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
.outage-retry.is-busy .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-card.is-nope { animation: nope .4s; }
@keyframes nope { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* probability roulette: bottom sheet, her face stays visible above it */
.roulette {
  position: absolute; inset: 0; z-index: 75; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal));
  background: linear-gradient(to bottom, rgba(27, 19, 32, 0) 0%, rgba(27, 19, 32, 0) 44%, rgba(27, 19, 32, .42) 60%, rgba(27, 19, 32, .6) 100%);
  animation: fade-in .2s ease-out; transition: opacity .25s;
}
.roulette.is-out { opacity: 0; }
@keyframes fade-in { from { opacity: 0; } }
.rl-card {
  position: relative; width: 100%; max-width: 400px; margin: 0 auto; padding: 10px 10px 8px; text-align: center;
  background: var(--paper); border: 3.5px solid var(--ink); border-radius: var(--wob1); box-shadow: 5px 5px 0 var(--ink);
  animation: rl-rise .4s cubic-bezier(.2, 1.4, .5, 1);
}
@keyframes rl-rise { from { transform: translateY(75%); } }
.rl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px; }
.rl-title {
  font-family: var(--f-title); font-size: 26px; line-height: 1.1; color: var(--pink);
  -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); transform: rotate(-2deg);
}
.rl-sub { font-size: 13px; color: #3f3046; word-break: keep-all; }
.rl-body { display: flex; align-items: center; gap: 6px; }
.rl-stage { position: relative; flex: 0 0 auto; width: min(50vw, 196px); aspect-ratio: 1; margin: 20px 0 6px 2px; }
.rl-wheel { width: 100%; height: 100%; display: block; overflow: visible; }
.rl-label { font-family: var(--f-ui); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4.5px; stroke-linejoin: round; }
.rl-seg.is-landed { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 3px #fff); }
.rl-pointer { position: absolute; left: 50%; top: -22px; z-index: 2; width: 32px; transform: translateX(-50%); }
.rl-pointer svg { display: block; width: 100%; transform-origin: 50% 20%; }
.rl-pointer.is-tick svg { animation: rl-tick .12s; }
@keyframes rl-tick { 50% { transform: rotate(-14deg); } }
.roulette.is-teeter .rl-pointer svg { animation: rl-shiver .1s linear infinite; }
@keyframes rl-shiver { 50% { transform: rotate(7deg); } }
.roulette.is-teeter .rl-stage { animation: rl-lean .75s ease-in-out; }
@keyframes rl-lean { 50% { transform: scale(1.05); } }
.rl-result {
  position: absolute; left: 50%; bottom: -4px; z-index: 3; padding: 1px 12px; white-space: nowrap; pointer-events: none;
  font-family: var(--f-title); font-size: 23px; line-height: 1.25; color: #fff; background: var(--rose);
  -webkit-text-stroke: .6px var(--ink); text-shadow: 2px 2px 0 var(--ink);
  border: 3px solid var(--ink); border-radius: var(--wob3); box-shadow: 3px 3px 0 var(--ink);
  transform: translateX(-50%) rotate(-4deg); opacity: 0;
}
.rl-result:empty { display: none; }
.roulette.is-landed .rl-result { opacity: 1; animation: rl-stamp .5s cubic-bezier(.2, 2, .5, 1); }
.roulette.is-bad .rl-result { background: #56607a; }
@keyframes rl-stamp { from { opacity: 0; transform: translateX(-50%) scale(1.9) rotate(-14deg); } }
.rl-legend { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14.5px; text-align: left; }
.rl-leg {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) 34px; align-items: center; gap: 6px;
  padding: 3px 6px; border: 2px solid transparent; border-radius: 8px; transition: transform .2s;
}
.rl-leg-name { line-height: 1.2; word-break: keep-all; }
.rl-leg.is-landed { background: var(--lemon); border-color: var(--ink); transform: rotate(-1.5deg) scale(1.05); }
.rl-sw { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 4px; }
.rl-leg-p { text-align: right; color: #3f3046; font-variant-numeric: tabular-nums; }
.rl-hint { margin-top: 2px; font-size: 13px; color: #3f3046; }
.char-area.rl-react-good .char-mount { animation: rl-hop .65s cubic-bezier(.2, 1.8, .5, 1); }
@keyframes rl-hop { 35% { transform: translateY(-16px) scale(1.03); } }
.char-area.rl-react-bad .char-mount { animation: rl-flinch .5s ease-out; }
@keyframes rl-flinch { 20% { transform: translateX(-9px) rotate(-2deg); } 50% { transform: translateX(7px) rotate(1deg); } 80% { transform: translateX(-3px); } }

/* title v2: explanations, art preview, persona faces, continue */
.pick-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pick-meta span {
  font-size: 12.5px; line-height: 1.35; padding: 0 6px; color: var(--ink);
  background: var(--lilac); border: 1.5px solid var(--ink); border-radius: 6px;
}
.face-thumb {
  display: block; width: 64px; height: 64px; margin: 0 auto 4px; overflow: hidden;
  background: #fff0f7; border: 3px solid var(--ink); border-radius: 50% 46% 52% 48%; box-shadow: 2px 2px 0 var(--ink);
}
.face-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.face-thumb.is-loading { background: repeating-linear-gradient(45deg, #ffe3f2 0 6px, #fff 6px 12px); }
.pick-art .face-thumb { width: 58px; height: 58px; }
.pick-personas button.pick { min-height: 120px; }
.title-continue {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; text-align: left;
  background: var(--mint); border: 3px solid var(--ink); border-radius: var(--wob2); box-shadow: var(--sticker);
}
.title-continue:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.title-continue .tc-k { display: block; font-family: var(--f-title); font-size: 21px; line-height: 1.15; }
.title-continue .tc-d { display: block; font-size: 14px; }
.title-continue .tc-go { margin-left: auto; font-size: 24px; }

/* result v2: share card first */
.share-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; text-align: center;
  background: var(--paper); border: 3.5px solid var(--ink); border-radius: var(--wob1); box-shadow: 6px 6px 0 var(--ink);
}
.sc-game {
  margin: 0; font-family: var(--f-title); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--pink);
  -webkit-text-stroke: 1.2px var(--ink); text-shadow: 2px 2px 0 var(--ink); transform: rotate(-2deg);
}
.sc-meta { margin-top: 6px; font-size: 13px; color: #5e4f63; white-space: pre-wrap; }
.sc-hero { display: flex; align-items: center; gap: 14px; text-align: left; }
.sc-face {
  flex: none; width: 92px; height: 92px; overflow: hidden; display: grid; place-items: center;
  background: #fff0f7; border: 3.5px solid var(--ink); border-radius: 50% 46% 52% 48%; box-shadow: 3px 3px 0 var(--ink);
}
.sc-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-face-ph { font-size: 22px; }
.sc-hero-r { flex: 1; min-width: 0; }
.sc-her { font-size: 14px; color: #3f3046; }
.sc-hero-r .ending-title { margin: 0; font-size: 22px; line-height: 1.25; word-break: keep-all; }
.sc-expr { font-size: 13px; color: #3f3046; }
.sc-line { padding: 0 4px; }
.sc-line-k { display: block; font-size: 13px; color: #6b5a72; }
.sc-line-t { margin: 2px 0 0; font-family: var(--f-talk); font-weight: 700; font-size: 18px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.score-stage { position: relative; overflow: hidden; margin: 0 -6px; padding: 2px 0 8px; border-radius: 18px; }
.score-stage > .fx-layer.is-local { z-index: 0; }
.score-stage .score-box { position: relative; z-index: 1; margin: 0; }
.share-card .score-num { font-size: 76px; }
.sc-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.bd-chip {
  padding: 3px 10px; font-size: 15px; font-variant-numeric: tabular-nums;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--wob3);
}
.sc-info { margin: 2px 0 0; padding-top: 10px; border-top: 1px solid #dccbe2; font-size: 14px; line-height: 1.65; color: #4a3b52; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
.bd-ending { background: var(--lemon); }
.bd-affection { background: #ffd6ec; }
.bd-trust { background: #d7f0ff; }
.share-actions { display: flex; flex-direction: column; gap: 10px; }
.result-share { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.result-share-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.result-share-options [hidden], .result-share-link[hidden] { display: none; }
.result-share-note, .result-share-status, .shared-result-note { margin: 0; text-align: center; font-size: 14px; line-height: 1.5; color: #5e4f63; }
.result-share-status:empty { display: none; }
.result-share-link { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.result-share-link input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 2px solid var(--ink); border-radius: 10px; font: inherit; background: #fff; }
.btn-share { width: 100%; min-height: 52px; font-size: 19px; }
.sub-row { display: flex; gap: 8px; }
.sub-row .btn { flex: 1; }
.sec-note { margin: 8px 0 0; font-size: 13px; color: #3f3046; }
/* her lines, one row each: name chip + bubble; narration muted italic without a name */
.el-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.el-row { display: flex; flex-direction: column; align-items: flex-start; }
.el-who {
  position: relative; z-index: 1; margin: 0 0 -9px 10px; padding: 1px 10px;
  font-family: var(--f-ui); font-size: 14px; line-height: 1.35; color: #fff; background: var(--persona); text-shadow: 1px 1px 0 var(--ink);
  border: 2.5px solid var(--ink); border-radius: var(--wob3); transform: rotate(-2deg);
}
.el-row.is-me .el-who { align-self: flex-end; margin: 0 10px -9px 0; background: var(--sky); color: var(--ink); text-shadow: none; transform: rotate(2deg); }
.el-row.is-her .el-text, .el-row.is-me .el-text {
  align-self: stretch; padding: 13px 12px 9px; font-family: var(--f-talk); font-weight: 700; font-size: 18px; line-height: 1.5;
  color: var(--ink); background: var(--persona-tint); border: 2.5px solid var(--ink); border-radius: 4px 16px 16px 16px;
  word-break: keep-all; overflow-wrap: anywhere;
}
.el-row.is-me .el-text { background: #e9f6ff; border-radius: 16px 4px 16px 16px; }
.el-row.is-narr { align-items: center; padding: 0 6px; }
.el-row.is-narr .el-text {
  font-family: var(--f-ui); font-style: italic; font-size: 15px; line-height: 1.55; color: #574761; text-align: center;
  text-wrap: balance;
  word-break: keep-all; overflow-wrap: anywhere;
}
.el-row.is-narr .el-text::before, .el-row.is-narr .el-text::after { content: '~'; margin: 0 6px; color: var(--persona); font-style: normal; }

.rl-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rl-bar { display: grid; grid-template-columns: 104px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font-size: 14px; }
.rl-bar-track { height: 16px; overflow: hidden; background: #f1ecf2; border: 2px solid var(--ink); border-radius: 8px; }
.rl-bar-fill { display: block; height: 100%; border-right: 2px solid var(--ink); }
.rl-bar-p { text-align: right; font-variant-numeric: tabular-nums; }
.rl-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; border: 2px solid transparent; border-radius: 6px; }
.rl-bar.is-landed .rl-bar-name { background: var(--lemon); border-color: var(--ink); }
.rl-bar-here { grid-column: 1 / -1; margin-top: -3px; font-size: 13px; color: #b3002b; text-align: right; }

.turn-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 14px; }
.chg { font-size: 14px; }
.chg.is-good { color: #b0005b; }
.chg.is-bad { color: #4b2fa0; }
.chg.is-flat { color: #6b6b6b; }
.turn-more { margin-top: 12px; padding: 10px 12px 12px; background: #f8f4fa; border-radius: 12px; }
.more-k { margin-top: 10px; font-size: 14px; line-height: 1.5; color: #4a3b52; }
.more-k:first-child { margin-top: 0; }
.turn-more .feature, .turn-more .delta { font-size: 14px; line-height: 1.5; }
.feel .turn-label { font-size: 15px; }

/* Result sections use visible headings; the ranking list keeps its own disclosure. */
.rank-cta {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 6px;
  background: #fff; border: 3px solid var(--ink); border-radius: var(--wob2); box-shadow: var(--sticker);
}
.cta-title { font-size: 17px; }
.rank-cta .lb-submit { flex: none; min-height: 50px; padding: 0 16px; font-size: 18px; }
.rank-cta .rank-skip { align-self: center; min-height: 40px; font-size: 14px; color: #5e4f63; text-decoration: underline dotted; }
.rank-cta > .rank-out, .rank-cta .lb-result { margin: 0 0 8px; }
.rank-cta .rank-out { font-size: 15px; line-height: 1.5; word-break: keep-all; }
.rank-cta .link-btn { padding: 4px 2px; min-height: 32px; }
.rank-skipped { color: #5e4f63; }
.result-sec.rank-note { padding: 10px 14px; background: rgba(255, 255, 255, .75); border: 2px dashed #a996b0; border-radius: 14px; box-shadow: none; }
.rank-note .rank-out { margin: 0; text-align: center; font-size: 15px; color: #4a3b52; }
.leave-nudge {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: #fff3c4; border: 2.5px dashed var(--ink); border-radius: var(--wob3);
}
.nudge-t { margin: 0; font-size: 15px; text-align: center; }
.result-secs { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.result-sec.result-panel { padding: 0; border-width: 2.5px; border-radius: 14px 18px 14px 20px; box-shadow: 3px 3px 0 var(--ink); }
.result-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 14px 16px 12px; border-bottom: 2px dashed #eadcee; }
.result-panel-title { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; }
.result-panel-sub { min-width: 0; font-size: 14px; line-height: 1.5; color: #5e4f63; overflow-wrap: anywhere; }
.result-panel-body { padding: 16px; }
.result-sec.fold { padding: 0; border-width: 2.5px; border-radius: 14px 18px 14px 20px; box-shadow: 3px 3px 0 var(--ink); }
.fold-head {
  display: flex; align-items: baseline; gap: 8px; min-height: 52px; padding: 14px 16px 12px;
  list-style: none; cursor: pointer;
}
.fold-head::-webkit-details-marker { display: none; }
.fold-title { flex: none; font-size: 17px; }
.fold-sub { flex: 1; min-width: 0; font-size: 13px; color: #6b5a72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-head::after { content: '▾'; margin-left: auto; font-size: 15px; color: #6b5a72; transition: transform .2s; }
.fold[open] > .fold-head::after { transform: rotate(180deg); }
.fold[open] > .fold-head { border-bottom: 2px dashed #eadcee; }
.fold-body { padding: 16px 16px 16px; }
.fold .rank-body { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .game-title, .btn-start, .thinking, .char-area.is-thinking .char-mount, .rank-item.is-me { animation: none; }
  .screen.is-active, .modal-card, .dialogue.pop-in, .input-area, .char-enter { animation: none; }
  .fx-shaking > .screen.is-active, .fx-shaking > .bg-layer, .char-area.fx-zooming { animation: none; }
  .fx-lightning, .fx-flash, .fx-bolt { animation: none; opacity: 0; }
  .heart-ind svg { animation: none; }
  .is-scored .score-num, .is-scored .ending-title { animation: none; }
  .turn-card { transform: none; transition: opacity .2s; }
  .fold-head::after { transition: none; }
  .rl-pointer.is-tick svg, .modal-card.is-nope { animation: none; }
  .rl-card, .roulette.is-landed .rl-result, .roulette.is-teeter .rl-pointer svg, .roulette.is-teeter .rl-stage { animation: none; }
  .roulette.is-rm .rl-card { animation: fade-in .3s ease-out; }
  .rl-leg { transition: none; }
}

/* ---------- small heights (e.g. 360x640) ---------- */
@media (max-height: 700px) {
  .char-area { height: 52%; }
  .rl-stage { width: min(50vw, 180px); margin-top: 18px; }
  .rl-title { font-size: 22px; }
  .dialogue { min-height: 96px; padding-top: 18px; }
  .dialogue-text { font-size: 20px; }
  .input-text { height: 64px; }
  .title-hero { padding-top: 8px; }
  .game-title { font-size: clamp(32px, 10vw, 42px); }
}

/* phone feel: hide scrollbars inside the frame (still scrollable) */
.title-scroll, .result-scroll { scrollbar-width: none; }
.title-scroll::-webkit-scrollbar, .result-scroll::-webkit-scrollbar { display: none; }

/* ---------- shared leaderboard (title → 리더보드, result → 랭킹 등록) ---------- */
.title-board { align-self: center; margin-top: 8px; transform: rotate(-1.5deg); }
.title-actions { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; }
.title-actions .title-board { margin-top: 0; }
.title-music { transform: rotate(1deg); }
.screen-lb { background: #fff4c9; }
.screen-lb::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 0%, #fff4a8 0 7.5deg, #ffe3f2 7.5deg 15deg); opacity: .7;
}
.lb-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: calc(14px + var(--sat)) calc(14px + var(--sar)) calc(20px + var(--sab)) calc(14px + var(--sal));
  display: flex; flex-direction: column; gap: 10px;
}
.lb-head { display: flex; align-items: center; gap: 10px; }
.lb-title {
  margin: 0; font-family: var(--f-title); font-weight: 400; font-size: 34px; color: var(--pink);
  -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg);
}
.lb-sub { margin: 0; font-size: 14px; color: #3f3046; }
.lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-tab {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 4px 8px; font-family: var(--f-ui); font-size: 15px;
  background: #fff; border: 2.5px solid var(--ink); border-radius: var(--wob3); box-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.lb-tab.is-on { background: var(--pink); color: #fff; text-shadow: 1px 1px 0 var(--ink); transform: rotate(-1deg); }
.lb-tab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.lb-board { margin-top: 14px; }
.lb-item { grid-template-rows: auto auto; }
.rank-line {
  grid-column: 2 / -1; font-family: var(--f-talk); font-weight: 700; font-size: 15px; color: #5e4f63;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-status { margin-bottom: 8px; }
.lb-rank {
  display: inline-block; margin: 2px 0 4px; padding: 2px 12px; font-family: var(--f-title); font-size: 22px;
  background: var(--lemon); border: 2.5px solid var(--ink); border-radius: var(--wob3); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-1.5deg);
}
.lb-error { margin: 0; }

/* Persona-led leaderboard */
.lb-scroll { padding-left: calc(16px + var(--sal)); padding-right: calc(16px + var(--sar)); }
.lb-tabs-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lb-seg .lb-tab { min-height: 44px; font-size: 14px; white-space: normal; }
.lb-seg .lb-tab.is-on { background: var(--lemon); color: var(--ink); text-shadow: none; }
.lb-tabs-persona { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.lb-tabs-persona.is-scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 3px 2px 7px; }
.lb-persona-card {
  min-width: 0; width: 100%; height: 96px; display: flex; align-items: center; gap: 7px; padding: 7px;
  text-align: left; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: var(--wob3);
  box-shadow: 2px 2px 0 var(--ink);
}
.lb-tabs-persona.is-scroll .lb-persona-card { flex: 0 0 120px; width: 120px; scroll-snap-align: start; }
.lb-persona-card.is-on { border-color: var(--card-color); box-shadow: inset 0 0 0 2px var(--ink), 2px 2px 0 var(--ink); transform: rotate(-1deg); }
.lb-persona-card .face-thumb { flex: 0 0 64px; width: 64px; height: 64px; margin: 0; }
.lb-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-card-name { font-size: 17px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-card-tag { font-size: 11px; line-height: 1.2; color: #3f3046; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.lb-tabs-persona.is-scroll .lb-persona-card { flex-direction: column; justify-content: center; height: 106px; gap: 3px; padding: 4px; text-align: center; }
.lb-tabs-persona.is-scroll .face-thumb { flex: 0 0 54px; width: 54px; height: 54px; }
.lb-tabs-persona.is-scroll .lb-card-name { font-size: 14px; }
.lb-tabs-persona.is-scroll .lb-card-tag { font-size: 10px; white-space: nowrap; display: block; text-overflow: ellipsis; }
.lb-banner { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px; background: #fff; border: 3px solid var(--persona-color); border-radius: 12px; box-shadow: 2px 2px 0 var(--ink); }
.lb-banner-face { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; }
.lb-banner-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-banner-name { font-size: 17px; line-height: 1.2; }
.lb-banner-tag { font-size: 11px; line-height: 1.25; color: #3f3046; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lb-banner-controls { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lb-period { gap: 2px; flex-wrap: nowrap; }
.lb-period .lb-tab { flex: none; min-height: 44px; padding: 2px 5px; font-size: 11px; border-width: 1.5px; box-shadow: none; }
.lb-period .lb-tab.is-on { background: var(--persona-color); color: var(--persona-ink); text-shadow: none; transform: none; }
.lb-profile-btn { min-height: 44px; padding: 2px 4px; border: 0; background: transparent; font-size: 13px; text-decoration: underline; }
.lb-board { margin-top: 2px; border-left: 4px solid var(--persona-color); min-width: 0; }
.lb-item { position: relative; border-left: 4px solid var(--persona-color); grid-template-columns: 25px minmax(0, 1fr) auto auto; gap: 5px; padding-left: 5px; }
.lb-ending { max-width: none; font-size: 11px; color: var(--ink); background: #fff7d8; border: 1px solid #b7a98e; border-radius: 5px; padding: 2px 3px; }
.rank-line { text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.rank-line.is-expanded { display: block; overflow: visible; }
.lb-sheet-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: #1b132099; }
.lb-sheet { width: 100%; max-height: 60%; overflow-y: auto; padding: 14px 18px 20px; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 0 var(--persona-color); }
.lb-sheet-close { display: block; margin-left: auto; min-width: 44px; min-height: 44px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; }
.lb-sheet-body { text-align: center; }
.lb-sheet-face { width: 96px; height: 96px; }
.lb-sheet-body h3 { margin: 8px 0 0; font-size: 24px; }
.lb-sheet-tag, .lb-sheet-hint { margin: 8px 0; line-height: 1.4; }
.lb-sheet-challenge { min-height: 44px; margin-top: 6px; }
.lb-fold-persona { display: inline-flex; align-items: center; gap: 5px; }
.lb-fold-persona .face-thumb { display: inline-block; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; border-width: 1px; box-shadow: none; }
.lb-full-board { min-height: 44px; margin-top: 8px; }
@media (max-width: 370px) { .lb-item { font-size: 13px; } .lb-ending { font-size: 11px; } .lb-persona-card { gap: 5px; padding: 5px; } }