:root {
  --ink: #153638;
  --muted: #6f817f;
  --paper: #fffdf7;
  --cream: #eee9de;
  --deep: #0d2729;
  --teal: #174c4b;
  --yellow: #ffd95a;
  --coral: #ed765f;
  --mint: #8fcaa5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--deep); overscroll-behavior: none; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 9%, rgba(255,217,90,.13), transparent 25rem),
    linear-gradient(145deg, #173d3d, #091d20 72%);
  color: var(--ink);
  font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button { font: inherit; }

.page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(350px, 420px);
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 8vw, 8rem);
  padding: 1rem 1.5rem;
}
.intro { color: #f9f5eb; }
.intro-mark {
  width: 60px; height: 60px; display: grid; place-items: center;
  margin-bottom: 4.5rem; border: 1px solid rgba(255,255,255,.22); border-radius: 19px;
  color: var(--yellow); font-size: 2rem; font-weight: 950; transform: rotate(-4deg);
}
.intro-kicker { margin: 0 0 1rem; color: #f0b269; font-size: .7rem; font-weight: 900; letter-spacing: .18em; }
.intro h1 { margin: 0; font-size: clamp(4rem, 7vw, 6.2rem); font-weight: 950; letter-spacing: -.09em; line-height: .92; }
.intro-copy { margin: 1.8rem 0 2.1rem; color: rgba(249,245,235,.76); font-size: clamp(1.05rem,1.8vw,1.3rem); line-height: 1.7; letter-spacing: -.03em; }
.intro-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.intro-chips span { padding: .55rem .82rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); font-size: .74rem; font-weight: 800; }
.how-card { max-width: 390px; display: flex; align-items: center; gap: 1rem; margin-top: 3.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.15); }
.how-number { color: var(--yellow); font-size: 1.45rem; font-weight: 950; }
.how-card p { margin: 0; color: rgba(249,245,235,.55); font-size: .8rem; line-height: 1.65; }
.how-card b { color: rgba(249,245,235,.85); }

.phone {
  position: relative; width: 100%; max-width: 420px; height: min(880px, calc(100vh - 1.2rem)); min-height: 680px;
  overflow: hidden; display: flex; flex-direction: column; border: 9px solid #071719; border-radius: 43px;
  background: var(--cream); box-shadow: 0 38px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14);
}
.phone::before { content: ""; position: absolute; z-index: 80; top: 8px; left: 50%; width: 91px; height: 23px; transform: translateX(-50%); border-radius: 16px; background: #071719; }
.phone::after { content: ""; position: absolute; z-index: 79; inset: 0; border-radius: 33px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

.topbar { display: flex; align-items: flex-end; justify-content: space-between; flex: 0 0 auto; padding: 2.75rem 1.15rem .55rem; background: var(--paper); }
.route { display: flex; align-items: center; gap: .4rem; margin: 0 0 .25rem; color: #768784; font-size: .59rem; font-weight: 850; }
.route i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px #f7dad3; }
.stage-title-row { display: flex; align-items: center; gap: .45rem; }
.topbar h2 { margin: 0; font-size: 1.27rem; font-weight: 950; letter-spacing: -.05em; }
.difficulty { padding: .25rem .45rem; border-radius: 7px; background: #e6f2ed; color: #26715e; font-size: .52rem; font-weight: 900; }
.difficulty.normal { background: #fff0d8; color: #a85d16; }
.difficulty.hard { background: #fae0dc; color: #aa3d36; }
.difficulty.extreme { background: #eee2f7; color: #71459a; }
.head-actions { display: flex; gap: .38rem; }
.coin-chip { min-width: 58px; height: 35px; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: 0 .55rem; border: 1px solid #e4bd45; border-radius: 11px; background: #fff2b8; color: #765819; cursor: pointer; }
.coin-chip i,.room-wallet i { color: #f3b91e; font-size: .78rem; font-style: normal; text-shadow: 0 1px 0 #b87b0b; }
.coin-chip strong { font-size: .67rem; font-variant-numeric: tabular-nums; }
.icon-btn { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 1px solid #ddd9cf; border-radius: 11px; background: #f5f1e9; color: #496663; font-size: 1rem; font-weight: 950; cursor: pointer; }
.icon-btn.on { border-color: #9dc9bd; background: #e4f2ed; color: #1d6859; }
.icon-btn.share-icon { border-color: #285953; background: #1c4a47; color: white; }

.stage-progress-wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; flex: 0 0 auto; padding: .35rem 1.15rem .55rem; background: var(--paper); }
.stage-pill { padding: .32rem .55rem; border: 1px solid #d9d6cc; border-radius: 9px; background: #f7f3eb; color: #586f6c; font-size: .62rem; font-weight: 900; cursor: pointer; }
.stage-pill span { margin-left: .2rem; color: #9aa5a2; }
.stage-track { position: relative; height: 6px; overflow: hidden; border-radius: 99px; background: #e2ded4; box-shadow: inset 0 1px 2px rgba(35,61,58,.09); }
.stage-track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg,#79b6a1 0 72%,var(--coral)); box-shadow: 1px 0 0 #fff2c4; transition: width .35s ease; }

.challenge-banner { flex: 0 0 auto; padding: .42rem 1rem; background: #fff4cf; color: #745a13; font-size: .62rem; text-align: center; }
.challenge-banner span { margin-right: .45rem; font-weight: 900; }
.challenge-banner b { color: #bd5a3d; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); flex: 0 0 auto; padding: .4rem 1.15rem .58rem; background: var(--paper); }
.stats div { padding-left: .55rem; border-left: 1px solid #e1ddd4; }
.stats div:first-child { padding-left: 0; border-left: 0; }
.stats span, .stats strong { display: block; }
.stats span { margin-bottom: .04rem; color: #8b9693; font-size: .5rem; font-weight: 750; }
.stats strong { font-size: .8rem; font-variant-numeric: tabular-nums; }
.combo-stat strong { color: var(--coral); }

.window { position: relative; height: 65px; flex: 0 0 65px; overflow: hidden; border-top: 5px solid #173f40; border-bottom: 6px solid #254c4d; background: linear-gradient(#75a6aa 0 62%,#789596 63%); }
.window::before { content: ""; position: absolute; top: -22px; left: 18%; width: 18px; height: 120px; transform: rotate(30deg); background: rgba(255,255,255,.22); box-shadow: 205px 0 0 -7px rgba(255,255,255,.18); }
.line-map { position: absolute; z-index: 2; top: 9px; left: 50%; display: flex; align-items: center; transform: translateX(-50%); }
.line-map::before { content: ""; position: absolute; left: 8px; right: 8px; height: 3px; background: rgba(239,245,238,.8); }
.line-map i { position: relative; width: 7px; height: 7px; margin: 0 8px; border: 2px solid #ecf1e9; border-radius: 50%; background: #658e90; }
.line-map i.now { width: 10px; height: 10px; border-color: #fff0b8; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,217,90,.25); }
.station-sign { position: absolute; z-index: 2; top: 29px; left: 50%; width: max-content; transform: translateX(-50%); padding: .24rem .65rem; border: 2px solid rgba(22,57,58,.24); border-radius: 4px; background: rgba(249,247,237,.93); color: #607875; font-size: .53rem; }
.station-sign b { color: var(--ink); }

.game-zone { position: relative; min-height: 0; flex: 1 1 auto; display: flex; justify-content: center; overflow: hidden; background: linear-gradient(90deg,transparent 49.5%,rgba(36,66,67,.08) 49.5% 50.5%,transparent 50.5%), #ddd7ca; }
.game-zone::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 12%,rgba(255,255,255,.6),transparent 57%); pointer-events: none; }
.straps { position: absolute; z-index: 4; top: -9px; left: 0; right: 0; display: flex; justify-content: space-around; pointer-events: none; }
.straps i { width: 17px; height: 24px; border: 3px solid #f2efe7; border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.board { position: relative; width: min(76vw,310px); aspect-ratio: 5/6; align-self: flex-start; display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(6,1fr); margin-top: .5rem; border: 4px solid rgba(47,73,70,.09); border-radius: 18px; background: rgba(248,245,236,.22); box-shadow: inset 0 8px 18px rgba(43,67,65,.07),0 7px 20px rgba(53,70,67,.08); touch-action: none; }
.tile { border-right: 1px solid rgba(37,63,62,.07); border-bottom: 1px solid rgba(37,63,62,.07); }

.person { --color:#78a8aa; --skin:#efc39f; position: relative; z-index: 3; width: calc(100% - 7px); height: calc(100% - 7px); align-self: center; justify-self: center; overflow: visible; padding: 0; border: 0; border-radius: 19px 19px 14px 14px; background: var(--color); color: var(--ink); box-shadow: inset 0 -7px 0 rgba(36,50,48,.13),0 4px 8px rgba(34,52,51,.18); cursor: pointer; transition: transform .2s ease,opacity .2s ease,filter .2s ease; }
.person::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.3); border-radius: 16px 16px 11px 11px; }
.person:focus-visible { outline: 3px solid white; outline-offset: -5px; }
.person:active { transform: scale(.92); }
.person.ready:not(.mine) { filter: saturate(1.07) brightness(1.02); }
.person.mine { z-index: 5; box-shadow: inset 0 -7px 0 rgba(143,101,14,.13),0 0 0 3px #fff7bd,0 6px 14px rgba(91,67,10,.27); }
.person.mine::after { content: "밀기"; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 2px 5px; border-radius: 5px; background: #173f3e; color: white; font-size: .38rem; font-weight: 950; white-space: nowrap; box-shadow: 0 2px 4px rgba(25,52,49,.2); }
.head { position: absolute; top: 8%; left: 50%; width: 36%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--skin); box-shadow: inset 0 -1px 0 rgba(110,63,44,.12); }
.eyes { position: absolute; left: 25%; right: 25%; top: 48%; height: 3px; border-left: 2px solid #3f3b36; border-right: 2px solid #3f3b36; }
.hair { position: absolute; z-index: 2; top: 4%; left: 31%; width: 38%; height: 17%; border-radius: 50% 50% 35% 35%; background: #373a37; }
.v-1 .hair { left: 29%; width: 43%; height: 21%; border-radius: 50% 50% 48% 20%; }
.v-2 .hair { top: 1%; left: 43%; width: 15%; height: 15%; border-radius: 50%; box-shadow: 0 6px 0 7px #503d37; }
.v-3 .hair { left: 32%; width: 36%; height: 9%; border-radius: 7px 7px 1px 1px; background: #69503e; }
.v-4 .hair { left: 30%; width: 41%; height: 20%; border-radius: 50% 50% 15% 15%; background: #232d37; }
.body-shape { position: absolute; left: 25%; right: 25%; top: 43%; bottom: 8%; border-radius: 10px 10px 4px 4px; background: rgba(255,255,255,.43); box-shadow: inset 0 -4px 0 rgba(40,55,51,.07); }
.body-shape::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(43,67,63,.12); }
.bag { position: absolute; left: 13%; bottom: 12%; width: 17%; height: 27%; border: 2px solid rgba(36,55,52,.34); border-radius: 4px; }
.arrow,.me,.sleep,.move-hint { position: absolute; top: 5px; height: 18px; display: grid; place-items: center; border-radius: 7px; font-size: .7rem; font-weight: 950; }
.arrow { right: 5px; width: 18px; background: rgba(255,255,255,.8); box-shadow: 0 1px 3px rgba(0,0,0,.13); }
.move-hint { right: 5px; width: 18px; background: #fff8cf; color: #9a6b08; box-shadow: 0 1px 3px rgba(0,0,0,.13); }
.me { left: 5px; width: 18px; border-radius: 6px; background: #163c3d; color: white; font-size: .52rem; }
.sleep { left: 5px; min-width: 18px; padding: 0 4px; background: #493f68; color: #fff; font-size: .52rem; box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.sleepy:not(.awake) { filter: saturate(.72) brightness(.92); }
.sleepy:not(.awake) .eyes { border-left: 3px solid #3f3b36; border-right: 3px solid #3f3b36; transform: rotate(18deg); }
.person.hinting { animation: hint .62s ease-in-out infinite alternate; }
.person.shaking { animation: shake .34s ease; }
.person.waking { animation: wake .5s ease; }
.person.sliding { animation: player-slide .26s ease; }
.person.exiting { opacity: 0; pointer-events: none; }
.person.exit-up { transform: translateY(-95px) scale(.82); }
.person.exit-down { transform: translateY(95px) scale(.82); }
.person.exit-left { transform: translateX(-95px) scale(.82); }
.person.exit-right { transform: translateX(95px) scale(.82); }
@keyframes hint { to { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 5px rgba(255,255,255,.76),0 5px 12px rgba(33,61,57,.2); } }
@keyframes shake { 25%{transform:translateX(-5px) rotate(-2deg)} 75%{transform:translateX(5px) rotate(2deg)} }
@keyframes wake { 30%{transform:rotate(-5deg)} 60%{transform:rotate(5deg)} }
@keyframes player-slide { 45%{transform:scale(.88) rotate(-2deg)} 75%{transform:scale(1.06)} }

.combo-burst { position: absolute; z-index: 12; top: 18px; left: 50%; transform: translateX(-50%) scale(.8); opacity: 0; color: var(--coral); font-size: 1.45rem; font-weight: 950; text-shadow: 0 2px white; pointer-events: none; }
.combo-burst.show { animation: combo .7s ease; }
@keyframes combo { 25%{opacity:1;transform:translateX(-50%) scale(1.12)} 100%{opacity:0;transform:translate(-50%,-25px) scale(.9)} }

.door { position: absolute; z-index: 6; left: 50%; bottom: 0; width: 120px; height: 46px; display: grid; grid-template-columns: 1fr 28px; grid-template-rows: 1fr 1fr; align-items: center; transform: translateX(-50%); padding: .35rem .55rem; border: 4px solid #1d4444; border-bottom: 0; border-radius: 9px 9px 0 0; background: #f5f0e6; box-shadow: 0 -3px 10px rgba(28,61,61,.15); }
.door span,.door strong { display: block; line-height: 1; }
.door span { color: #81908d; font-size: .46rem; }
.door strong { font-size: .62rem; }
.door i { grid-column: 2; grid-row: 1/span 2; color: var(--coral); font-size: 1.2rem; font-style: normal; font-weight: 950; text-align: center; }
.door.ready { border-color: #e0aa25; box-shadow: 0 -6px 22px rgba(255,217,90,.64); animation: glow .65s ease-in-out infinite alternate; }
@keyframes glow { to{background:#fff8d0;transform:translateX(-50%) translateY(-2px)} }

.move-console { min-height: 48px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .35rem; flex: 0 0 auto; padding: .38rem .55rem .38rem .7rem; border-top: 1px solid #d8d3c7; border-bottom: 1px solid #d8d3c7; background: #f8f5ee; }
.message { min-width: 0; display: flex; align-items: center; justify-content: center; gap: .42rem; color: #5e716f; font-size: .58rem; font-weight: 800; line-height: 1.3; text-align: center; }
.message i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #ef9c69; box-shadow: 0 0 0 3px #f5dfd1; }
.message i.ready { background: #4fa778; box-shadow: 0 0 0 3px #d8eadc; }
.move-buttons { display: grid; grid-template-columns: repeat(4,27px); gap: 3px; }
.move-buttons button { width: 27px; height: 30px; padding: 0; border: 1px solid #d4d0c7; border-radius: 8px; background: white; color: #234f4c; font-size: .77rem; font-weight: 950; cursor: pointer; box-shadow: 0 2px 0 #d8d3c8; }
.move-buttons button:active { transform: translateY(2px); box-shadow: none; }
.controls { min-height: 66px; display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem; flex: 0 0 auto; padding: .55rem .7rem .75rem; background: var(--paper); }
.controls button { display: flex; align-items: center; justify-content: center; gap: .35rem; height: 40px; border: 1px solid #d7d4ca; border-radius: 13px; background: #f6f2ea; color: #4d6866; font-size: .65rem; font-weight: 900; cursor: pointer; }
.controls button b { font-size: .85rem; }
.controls button:active { transform: translateY(1px); }
.controls .hint-btn { border-color: #315d59; background: #214b49; color: white; }
.controls .room-btn { position: relative; border-color: #e7c353; background: #fff3bc; color: #6f541a; }
.room-btn i { position: absolute; top: -3px; right: -2px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--coral); }
.controls button:disabled { opacity: .45; cursor: default; }

.overlay { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(8,29,30,.73); backdrop-filter: blur(8px); animation: fade .22s ease; }
.modal-card { position: relative; width: 100%; max-height: 100%; padding: 1.65rem 1.25rem 1.25rem; overflow: auto; border: 1px solid rgba(255,255,255,.72); border-radius: 28px; background: var(--paper); box-shadow: 0 25px 75px rgba(0,0,0,.34); animation: rise .34s cubic-bezier(.2,.9,.25,1.12); text-align: center; scrollbar-width: none; }
.modal-card::-webkit-scrollbar { display: none; }
.modal-kicker { margin: 0 0 .25rem; color: #84918e; font-size: .65rem; font-weight: 850; }
.modal-card h3 { margin: 0; font-size: 1.65rem; font-weight: 950; letter-spacing: -.06em; }
.stars { min-height: 37px; margin-top: .65rem; color: #d9d4ca; font-size: 1.8rem; letter-spacing: .08em; }
.stars .on { color: #ffc938; filter: drop-shadow(0 2px 0 #dca91e); }
.result-score { margin: .25rem 0 .85rem; color: var(--coral); font-size: 2.2rem; font-weight: 950; letter-spacing: -.04em; }
.result-score small { margin-left: .15rem; font-size: .75rem; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 1rem; padding: .78rem 0; border-top: 1px solid #e2ded4; border-bottom: 1px solid #e2ded4; }
.result-stats b { font-size: .92rem; font-variant-numeric: tabular-nums; }
.result-stats small { display: block; margin-top: .12rem; color: #8b9693; font-size: .49rem; }
.reward-earned { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .65rem; margin: -.35rem 0 .85rem; padding: .65rem .72rem; border: 1px solid #ead278; border-radius: 14px; background: #fff5c9; text-align: left; }
.coin-large { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #f5bd26; color: #ffe985; box-shadow: inset 0 -4px 0 #d79a13,0 3px 7px rgba(135,88,0,.2); font-size: .95rem; }
.reward-earned small,.reward-earned strong { display: block; }
.reward-earned small { color: #9c7b2d; font-size: .48rem; }
.reward-earned strong { margin-top: .07rem; color: #604710; font-size: .75rem; }
.reward-earned em { max-width: 76px; color: #ad7348; font-size: .48rem; font-style: normal; font-weight: 850; text-align: right; }
.share-result,.next-btn,.primary-btn,.room-result { width: 100%; height: 45px; border: 0; border-radius: 14px; font-size: .74rem; font-weight: 950; cursor: pointer; }
.room-result { margin-bottom: .52rem; background: #e2f0e6; color: #22594e; box-shadow: 0 4px 0 #a9cdb7; }
.room-result span { float: right; margin-right: .35rem; }
.share-result { margin-bottom: .55rem; background: var(--yellow); color: #294541; box-shadow: 0 4px 0 #dfb128; }
.share-result span { float: right; margin-right: .35rem; }
.next-btn,.primary-btn { background: #184745; color: white; box-shadow: 0 4px 0 #0c302f; }
.next-btn span { float: right; margin-right: .35rem; }
.result-note { display: block; margin-top: .65rem; color: #99a19e; font-size: .51rem; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; animation: fall 1.5s ease-in forwards; }
@keyframes fall { to{transform:translateY(330px) rotate(520deg);opacity:0} }

.gameover-card { padding-top: 1.25rem; }
.crash-visual { position: relative; height: 112px; display: flex; align-items: center; justify-content: center; margin: -.2rem 0 .55rem; }
.crash-visual span { width: 62px; height: 70px; display: grid; place-items: center; border-radius: 22px 22px 16px 16px; background: var(--yellow); color: #173f3e; box-shadow: inset 0 -8px rgba(137,96,11,.15),0 5px 12px rgba(46,65,61,.2); font-size: .72rem; font-weight: 950; transform: rotate(-8deg); }
.crash-visual b { z-index: 2; margin-left: -8px; font-size: 2.2rem; transform: rotate(12deg); }
.crash-visual i { width: 9px; height: 90px; margin-left: -5px; border-radius: 5px; background: #234b4b; box-shadow: 8px 0 #d5d0c5,16px 0 #234b4b; }
.gameover-card > p:not(.modal-kicker) { margin: .65rem auto .85rem; color: #71807d; font-size: .67rem; line-height: 1.5; }
.crash-rule { margin-bottom: 1rem; padding: .7rem .55rem; border-radius: 12px; background: #f3eee5; color: #7a8582; font-size: .54rem; }
.crash-rule b { color: #9a473b; }
.crash-rule span { margin: 0 .25rem; color: #c3bdb2; }

.tutorial-visual { display: flex; justify-content: center; gap: .45rem; margin: .1rem 0 1.2rem; }
.mini-person { width: 54px; height: 61px; display: grid; place-items: center; border-radius: 18px 18px 13px 13px; color: #1d4241; font-weight: 950; box-shadow: inset 0 -6px rgba(31,56,53,.12); }
.mini-person.coral{background:#ee8b78}.mini-person.blue{background:#7eadd8}.mini-person.yellow{background:var(--yellow)}
.tutorial-card ol { margin: 1.2rem 0; padding: 0; list-style: none; text-align: left; counter-reset: rule; }
.tutorial-card li { counter-increment: rule; position: relative; margin: .55rem 0; padding: .7rem .75rem .7rem 2.45rem; border-radius: 12px; background: #f4f0e8; color: #60716f; font-size: .68rem; line-height: 1.45; }
.tutorial-card li::before { content: counter(rule); position: absolute; left: .72rem; top: .62rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 8px; background: #1f504d; color: white; font-size: .58rem; font-weight: 900; }
.tutorial-card li b { color: var(--ink); }

.stage-card { max-height: calc(100% - .3rem); padding-top: 1.05rem; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; text-align: left; }
.sheet-head h3 { font-size: 1.4rem; }
.sheet-head button { width: 34px; height: 34px; border: 0; border-radius: 11px; background: #f0ece4; color: #5e716f; font-size: 1.2rem; cursor: pointer; }
.chapter-tabs { display: grid; grid-template-columns: repeat(5,1fr); gap: .3rem; margin-top: .85rem; }
.chapter-option { min-width: 0; padding: .42rem .15rem; border: 1px solid #ded9cf; border-radius: 10px; background: #f4f0e8; color: #71817e; cursor: pointer; }
.chapter-option b,.chapter-option span,.chapter-option small { display: block; }
.chapter-option b { color: #315d58; font-size: .66rem; }
.chapter-option span { overflow: hidden; margin-top: .08rem; font-size: .43rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.chapter-option small { margin-top: .08rem; color: #9aa29f; font-size: .37rem; }
.chapter-option.current { border-color: #e1ae2c; background: #fff2b9; box-shadow: inset 0 0 0 2px #fff9df; }
.stage-jump { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; align-items: stretch; gap: .35rem; margin-top: .7rem; }
.stage-jump > button { border: 1px solid #d9d4ca; border-radius: 10px; background: #f4f0e8; color: #315d58; font-weight: 950; cursor: pointer; }
.stage-jump > button:disabled { opacity: .35; cursor: default; }
.stage-jump label { min-width: 0; height: 36px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .35rem; padding-left: .55rem; border: 1px solid #d9d4ca; border-radius: 10px; background: white; }
.stage-jump label span { color: #74817e; font-size: .43rem; font-weight: 850; white-space: nowrap; }
.stage-jump input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #254e4b; font-size: .62rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.stage-jump label button { align-self: stretch; padding: 0 .55rem; border: 0; border-radius: 0 9px 9px 0; background: #285b56; color: white; font-size: .52rem; font-weight: 900; cursor: pointer; }
.stage-window-label { margin: .42rem 0 0; color: #7f8c89; font-size: .48rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stage-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .42rem; margin: .48rem 0 .65rem; }
.stage-option { position: relative; aspect-ratio: 1.06; min-width: 0; border: 1px solid #dcd8ce; border-radius: 14px; background: #f5f1e9; color: #3e5d59; font-size: .72rem; font-weight: 950; cursor: pointer; }
.stage-option b { display: block; overflow: hidden; padding: 0 .08rem; font-size: clamp(.43rem,2.1vw,.62rem); font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.stage-option > i { position: absolute; top: .2rem; right: .22rem; font-size: .42rem; font-style: normal; }
.stage-option small { display: block; margin-top: .12rem; color: #93a09d; font-size: .42rem; }
.stage-option.current { border-color: #e1a935; background: #fff3bd; box-shadow: 0 0 0 3px #fff8d9; }
.stage-option.locked { color: #aaa; background: #eeeae2; }
.stage-option .stage-stars { display: block; color: #e7b62b; font-size: .48rem; letter-spacing: -.08em; }
.sheet-note { margin: 0; color: #8e9996; font-size: .57rem; }

.room-overlay { align-items: center; padding: .65rem; }
.room-card { max-height: calc(100% - .3rem); padding: 1.1rem .95rem 1rem; border-radius: 25px; }
.room-head { align-items: center; }
.room-head-actions { display: flex; align-items: center; gap: .45rem; }
.room-wallet { height: 34px; display: flex; align-items: center; gap: .28rem; padding: 0 .6rem; border: 1px solid #ead071; border-radius: 11px; background: #fff4c4; color: #6e5219; }
.room-wallet b { font-size: .67rem; font-variant-numeric: tabular-nums; }
.room-scene { --room-turn:-38deg; --avatar-face:38deg; position: relative; height: 232px; overflow: hidden; margin-top: .85rem; border: 5px solid #193f3e; border-radius: 20px; background: radial-gradient(circle at 50% 28%,#edf6ec 0,#bfd7cf 44%,#739695 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45),0 7px 16px rgba(30,63,59,.15); perspective: 760px; cursor: grab; touch-action: pan-y; }
.room-scene:active { cursor: grabbing; }
.room-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 85%,rgba(255,230,156,.33),transparent 55%); pointer-events: none; }
.room-world { position: absolute; left: 50%; top: 55%; width: 250px; height: 164px; transform: translate(-50%,-50%) rotateX(56deg) rotateZ(var(--room-turn)); transform-style: preserve-3d; transition: transform .4s cubic-bezier(.2,.85,.25,1); }
.room-floor-3d { position: absolute; inset: 0; border: 4px solid #8a674d; border-radius: 5px; background: repeating-linear-gradient(90deg,rgba(95,62,39,.12) 0 2px,transparent 2px 31px),#ba8d65; box-shadow: 0 18px 35px rgba(27,52,50,.28); transform: translateZ(0); }
.floor-tile .room-floor-3d { border-color: #9c9991; background: linear-gradient(90deg,rgba(97,98,94,.14) 1px,transparent 1px),linear-gradient(rgba(97,98,94,.14) 1px,transparent 1px),#d5d0c4; background-size: 31px 31px; }
.room-wall-3d { position: absolute; display: block; border: 3px solid rgba(58,76,70,.18); background: #b7d9c9; box-shadow: inset 0 -18px rgba(61,87,78,.08); backface-visibility: hidden; }
.wall-sunset .room-wall-3d { background: #edb5a4; }.wall-night .room-wall-3d { background: #53627e; }
.wall-back { left: 0; top: 0; width: 100%; height: 82px; transform-origin: top center; transform: rotateX(-90deg); }
.wall-side { left: 0; top: 0; width: 82px; height: 100%; transform-origin: left center; transform: rotateY(90deg); filter: brightness(.88); }
.room-window-3d { position: absolute; z-index: 1; left: 86px; top: 7px; width: 65px; height: 43px; border: 5px solid #f4ede0; border-radius: 5px; background: linear-gradient(#5c8991,#9fc1bd); box-shadow: 0 5px 0 rgba(43,62,58,.12); transform: translateZ(58px) rotateX(-55deg) rotateZ(var(--avatar-face)); }
.room-window-3d::before,.room-window-3d::after { content: ""; position: absolute; background: #f4ede0; }.room-window-3d::before{left:50%;top:0;bottom:0;width:3px}.room-window-3d::after{left:0;right:0;top:48%;height:3px}
.room-model { position: absolute; z-index: 3; display: block; transform-style: preserve-3d; filter: drop-shadow(5px 8px 4px rgba(43,48,43,.22)); }
.model-rug { left: 75px; top: 82px; width: 112px; height: 58px; border-radius: 50%; background: #8fb8c4; transform: translateZ(2px); opacity: .9; }
.model-bed { right: 12px; top: 14px; width: 82px; height: 54px; border: 4px solid #8f684c; border-radius: 7px; background: #eee3cb; transform: translateZ(12px); box-shadow: 7px 8px 0 #684b38; }
.model-bed i { position:absolute;left:5px;top:5px;width:25px;height:18px;border-radius:8px;background:#fffaf0 }.model-bed b{position:absolute;right:3px;top:3px;bottom:3px;width:45px;border-radius:4px;background:#7aa691}.item-bed-yellow b{background:#e9bd3c}.model-bed em{position:absolute;left:8px;right:8px;bottom:-10px;height:10px;background:#684b38}
.model-desk { left: 12px; top: 19px; width: 62px; height: 34px; border-radius: 4px; background: #a76f45; transform: translateZ(17px); box-shadow: 6px 7px 0 #745038; }.model-desk i,.model-desk b{position:absolute;bottom:-18px;width:7px;height:20px;background:#694932}.model-desk i{left:7px}.model-desk b{right:7px}
.model-seat { left: 88px; top: 91px; width: 72px; height: 39px; border: 4px solid #9c4f43; border-radius: 11px; background: #df7564; transform: translateZ(15px); box-shadow: 6px 7px 0 #87443b; }.model-seat i{position:absolute;left:7px;right:7px;top:-14px;height:18px;border-radius:9px 9px 4px 4px;background:#ed8b79}.model-seat b{position:absolute;left:50%;top:1px;bottom:1px;width:2px;background:#b55b4d}
.model-decor { right: 50px; top: 83px; width: 24px; height: 24px; border-radius: 4px 4px 9px 9px; background: #a66c42; transform: translateZ(13px); }.model-decor i,.model-decor b,.model-decor em{position:absolute;bottom:14px;width:18px;height:28px;border-radius:70% 10% 70% 10%;background:#4e9367;transform-origin:bottom}.model-decor i{left:-8px;transform:rotate(-35deg)}.model-decor b{left:4px;transform:rotate(12deg)}.model-decor em{right:-8px;transform:rotate(42deg)}
.model-lamp { right: 15px; top: 86px; width: 9px; height: 38px; background:#80613b; transform:translateZ(18px) }.model-lamp i{position:absolute;left:-11px;top:-17px;width:31px;height:22px;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:#ffe8a7;box-shadow:0 0 14px #ffd96a}.model-lamp b{position:absolute;left:-8px;bottom:-5px;width:25px;height:7px;border-radius:50%;background:#6b5236}
.model-pet { left: 147px; top: 123px; width: 26px; height: 19px; border-radius:50% 50% 45% 45%;background:#d98a3f;transform:translateZ(12px) }.model-pet i{position:absolute;left:-5px;top:-3px;width:14px;height:14px;border-radius:50%;background:#e19a50}.model-pet i::before,.model-pet i::after{content:"";position:absolute;top:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid #d98a3f}.model-pet i::before{left:0}.model-pet i::after{right:0}
.model-art { left: 76px; top: 4px; width: 43px; height: 31px; border:5px solid #876141;background:linear-gradient(35deg,#e26e5e 0 18%,transparent 19%),linear-gradient(120deg,#6a9f91 0 30%,#f1dd97 31%);transform:translateZ(62px) rotateX(-55deg) rotateZ(var(--avatar-face)); }
.room-nameplate { position: absolute; z-index: 9; right: 10px; top: 8px; padding: .28rem .45rem; border-radius: 7px; background: rgba(20,59,57,.86); color: #fffbed; font-size: .43rem; font-weight: 900; letter-spacing:.03em; }
.room-view-controls { display: grid; grid-template-columns: 34px 1fr auto 34px; align-items:center; gap:.35rem; margin:.42rem .05rem .2rem; }
.room-view-controls button { height:31px;border:1px solid #d8d3c8;border-radius:9px;background:#f5f1e9;color:#315c57;font-size:.75rem;font-weight:900;cursor:pointer }.room-view-controls > span{color:#8b9794;font-size:.46rem}.room-view-controls #avatarEdit{padding:0 .55rem;border-color:#d7b84e;background:#fff2b8;color:#674e18;font-size:.55rem}.room-view-controls #avatarEdit b{color:#efb626}

.avatar-figure { --avatar-skin:#f2c6a1;--avatar-hair:#2b2d2c;--avatar-outfit:#4d9c87;position:relative;display:block;width:58px;height:82px;transform-style:preserve-3d; }
.room-avatar { position:absolute;z-index:8;left:56%;top:58%;transform:translate(-50%,-50%) translateZ(37px) rotateZ(var(--avatar-face)) rotateX(-55deg) scale(.64);filter:drop-shadow(0 7px 4px rgba(31,48,44,.35)); }
.avatar-shadow { position:absolute;left:8px;right:8px;bottom:-4px;height:12px;border-radius:50%;background:rgba(28,46,43,.25);filter:blur(2px) }
.avatar-legs { position:absolute;z-index:1;left:15px;right:15px;bottom:4px;height:28px }.avatar-legs i{position:absolute;bottom:0;width:11px;height:28px;border-radius:7px;background:#304e59;box-shadow:inset 0 -5px #213a43}.avatar-legs i:first-child{left:0}.avatar-legs i:last-child{right:0}
.avatar-body { position:absolute;z-index:2;left:10px;right:10px;top:35px;height:34px;border-radius:15px 15px 10px 10px;background:var(--avatar-outfit);box-shadow:inset 0 -7px rgba(37,49,47,.15),0 3px 5px rgba(31,49,46,.15) }.avatar-body i{position:absolute;left:50%;top:4px;bottom:7px;width:2px;background:rgba(255,255,255,.28)}
.avatar-head { position:absolute;z-index:4;left:9px;top:2px;width:40px;height:40px;border-radius:50%;background:var(--avatar-skin);box-shadow:inset 0 -3px rgba(110,64,42,.12),0 3px 5px rgba(39,51,48,.18) }
.avatar-face { position:absolute;left:10px;right:10px;top:21px;height:5px;border-left:3px solid #3a3430;border-right:3px solid #3a3430 }.avatar-face::after{content:"";position:absolute;left:50%;top:5px;width:7px;height:3px;transform:translateX(-50%);border-bottom:2px solid #9a5f54;border-radius:50%}
.avatar-hair { position:absolute;z-index:2;left:2px;right:2px;top:-1px;height:18px;border-radius:50% 50% 35% 35%;background:var(--avatar-hair) }.hair-bob .avatar-hair{left:-2px;right:-2px;height:29px;border-radius:50% 50% 18px 18px;clip-path:polygon(0 0,100% 0,100% 100%,76% 72%,68% 42%,32% 42%,24% 72%,0 100%)}.hair-bun .avatar-hair::after{content:"";position:absolute;left:50%;top:-10px;width:16px;height:16px;transform:translateX(-50%);border-radius:50%;background:var(--avatar-hair)}.hair-cap .avatar-hair{left:-1px;right:-1px;top:-3px;height:20px;border-radius:50% 50% 20% 20%}.hair-cap .avatar-hair::after{content:"";position:absolute;right:-8px;bottom:-2px;width:18px;height:6px;border-radius:50%;background:var(--avatar-hair)}
.avatar-editor { margin:.65rem 0 .8rem;padding:.75rem;border:1px solid #d9d4c9;border-radius:16px;background:#f5f1e9;animation:rise .25s ease }.avatar-editor-head{display:flex;align-items:center;justify-content:space-between;text-align:left}.avatar-editor-head h4{margin:0;font-size:1rem}.avatar-editor-head button{padding:.42rem .65rem;border:0;border-radius:9px;background:#24544f;color:white;font-size:.55rem;font-weight:900;cursor:pointer}.avatar-editor-body{display:grid;grid-template-columns:86px 1fr;gap:.7rem;align-items:center;margin-top:.65rem}.avatar-preview{height:112px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle,#fff8dc,#d9e8de);box-shadow:inset 0 0 0 1px rgba(52,81,75,.1)}.avatar-preview-figure{transform:scale(1.08)}.avatar-custom-options{display:grid;gap:.48rem;text-align:left}.avatar-custom-options section>span{display:block;margin-bottom:.25rem;color:#71817e;font-size:.5rem;font-weight:900}.avatar-custom-options section>div{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}.avatar-option{min-width:0;padding:3px 1px;border:1px solid #d9d4ca;border-radius:8px;background:white;color:#788582;cursor:pointer}.avatar-option i{display:block;width:17px;height:17px;margin:auto;border:2px solid white;border-radius:50%;background:var(--option-color);box-shadow:0 1px 3px rgba(35,53,49,.2)}.avatar-option span{display:block;overflow:hidden;margin-top:2px;font-size:.34rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.avatar-option.selected{border-color:#e2af2c;background:#fff3bd;box-shadow:0 0 0 2px #fff9df}.avatar-editor>p{margin:.55rem 0 0;color:#8b9693;font-size:.45rem}
.collection-row { margin: .72rem .1rem .85rem; text-align: left; }
.collection-row > div:first-child { display: flex; justify-content: space-between; margin-bottom: .3rem; color: #6f807d; font-size: .55rem; font-weight: 850; }
.collection-row b { color: #285b54; }
.collection-bar { height: 7px; overflow: hidden; border-radius: 99px; background: #e5e0d6; }
.collection-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f0b52d,var(--coral)); transition: width .35s ease; }
.shop-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 .1rem .55rem; text-align: left; }
.shop-heading h4 { margin: 0; font-size: 1rem; letter-spacing: -.04em; }
.shop-heading small { color: #899693; font-size: .46rem; }
.furniture-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .48rem; }
.furniture-item { position: relative; min-height: 103px; padding: .55rem .35rem .42rem; border: 1px solid #ddd8ce; border-radius: 15px; background: #f6f2ea; color: var(--ink); cursor: pointer; }
.furniture-item .furniture-icon { height: 42px; display: grid; place-items: center; font-size: 1.8rem; filter: drop-shadow(0 3px 2px rgba(37,54,51,.15)); }
.furniture-item .swatch { width: 35px; height: 35px; margin: 3px auto 4px; border: 4px solid white; border-radius: 50%; box-shadow: 0 2px 5px rgba(27,53,50,.18); }
.furniture-item strong { display: block; overflow: hidden; margin-top: .08rem; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.furniture-item small { display: flex; align-items: center; justify-content: center; gap: .2rem; margin-top: .25rem; color: #9a7725; font-size: .48rem; font-weight: 850; }
.furniture-item small i { color: #f0b725; font-style: normal; }
.furniture-item.owned small { color: #3f756b; }
.furniture-item.equipped { border-color: #e4b734; background: #fff4bd; box-shadow: inset 0 0 0 2px #fff9de; }
.furniture-item.equipped::after { content: "배치중"; position: absolute; top: 5px; right: 5px; padding: .18rem .28rem; border-radius: 5px; background: #24564f; color: white; font-size: .4rem; font-weight: 900; }
.furniture-item:disabled { opacity: .58; cursor: not-allowed; }
.room-note { margin: .7rem 0 0; color: #98a19f; font-size: .47rem; }

.toast { position: absolute; z-index: 130; left: 50%; bottom: 82px; width: max-content; max-width: calc(100% - 2rem); transform: translateX(-50%); padding: .7rem 1rem; border-radius: 12px; background: #132f31; color: white; box-shadow: 0 8px 25px rgba(0,0,0,.3); font-size: .67rem; font-weight: 800; animation: toast .25s ease; }
@keyframes fade{from{opacity:0}} @keyframes rise{from{transform:translateY(18px) scale(.96);opacity:0}} @keyframes toast{from{transform:translate(-50%,10px);opacity:0}}

@media(max-width:820px){
  .page{display:block;min-height:100dvh;padding:0;background:var(--cream)}
  .intro{display:none}.phone{max-width:none;height:100dvh;min-height:620px;border:0;border-radius:0;box-shadow:none}.phone::before,.phone::after{display:none}
  .topbar{padding-top:max(.95rem,env(safe-area-inset-top))}.controls{padding-bottom:max(.75rem,env(safe-area-inset-bottom))}
}
@media(max-height:730px){
  .phone{min-height:610px}.topbar{padding-top:.85rem}.window{height:48px;flex-basis:48px}.line-map{top:5px}.station-sign{top:23px}
  .board{width:min(66vw,270px)}.move-console{min-height:42px;padding-top:.28rem;padding-bottom:.28rem}.controls{min-height:57px;padding-top:.38rem;padding-bottom:.48rem}
  .result-card{padding-top:1rem}.result-card .stars{margin-top:.25rem}.result-score{margin:.1rem 0 .45rem;font-size:1.75rem}.result-stats{margin-bottom:.55rem;padding:.5rem 0}.reward-earned{margin-bottom:.5rem;padding:.48rem .6rem}.share-result,.next-btn,.room-result{height:40px}
  .room-scene{height:190px}.furniture-item{min-height:96px}
}
@media(max-width:360px){
  .coin-chip{min-width:48px;padding:0 .35rem}.topbar{padding-left:.8rem;padding-right:.8rem}.controls{gap:.28rem;padding-left:.45rem;padding-right:.45rem}.controls button{gap:.25rem;font-size:.6rem}.chapter-option span{display:none}.chapter-option{padding:.36rem .1rem}.move-console{padding-left:.45rem;padding-right:.4rem}.message{font-size:.52rem}.move-buttons{grid-template-columns:repeat(4,24px)}.move-buttons button{width:24px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}