:root {
  --bg: #0e0a18; --panel: #211735; --panel-2: #312044; --ink: #fff3d1;
  --muted: #c8b6c8; --yellow: #ffd45e; --orange: #f07b3f; --red: #d9484d;
  --green: #63d471; --purple: #9b6eea; --dark: #140d21; --edge: #5b3c69;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; }
body { color: var(--ink); background: radial-gradient(circle, #241633 0, var(--bg) 65%); font-family: "Courier New", "Malgun Gothic", monospace; image-rendering: pixelated; }
button, textarea { font: inherit; }
button { color: inherit; }

.app-shell { width: 100%; height: 100%; display: grid; place-items: center; }
.game-viewport { --safe-bottom: env(safe-area-inset-bottom, 0px); position: relative; isolation: isolate; aspect-ratio: 9 / 16; width: min(100vw, 56.25vh); height: min(100vh, 177.777vw); overflow: hidden; overscroll-behavior: none; background: #20162d; box-shadow: 0 0 0 4px #110b1b, 0 0 0 7px #493054, 0 20px 70px #000b; }
#gameCanvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.game-viewport, #gameCanvas, .joystick, .joystick * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; -webkit-user-drag: none; }
.modal-card, .modal-card textarea, .modal-card input, .modal-card select, .modal-card [contenteditable="true"], .review-item, .review-item * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.modal-card button { -webkit-user-select: none; user-select: none; }
.hidden { display: none !important; }

.pixel-panel { border: 2px solid #8c6a8f; background: var(--panel); box-shadow: inset -2px -2px 0 #130c1e, inset 2px 2px 0 #493458, 3px 3px 0 #08050d; }
.screen { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; text-align: center; }
.dim-screen { background: #0c0713d9; }
.kicker { margin: 0 0 5px; color: var(--yellow); font-size: 8px; font-weight: 900; letter-spacing: 2px; text-shadow: 1px 1px #5f3727; }
h1, h2, p { overflow-wrap: anywhere; }
h1, h2 { margin: 0; line-height: 1.15; text-shadow: 2px 2px 0 #6c2941, 4px 4px 0 #160d20; }
h1 { font-size: 29px; letter-spacing: -2px; }
h2 { font-size: 18px; }

.menu-screen { justify-content: flex-start; padding-top: 34px; background: linear-gradient(#1b1029e8, #171025f6), repeating-linear-gradient(0deg, transparent 0 11px, #fff1 11px 12px); }
.menu-rays { position: absolute; top: 70px; left: 50%; width: 220px; height: 220px; transform: translateX(-50%); background: repeating-conic-gradient(#ffd45e10 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
.logo-block { position: relative; z-index: 1; }
.subtitle { margin: 5px 0 0; color: var(--yellow); font-size: 10px; font-weight: 900; }
.pixel-bowl { position: relative; width: 50px; height: 38px; margin: 0 auto 8px; background: linear-gradient(#fff0cd 0 45%, #d94e4a 45%); clip-path: polygon(8% 10%,92% 10%,84% 80%,68% 100%,32% 100%,16% 80%); filter: drop-shadow(3px 3px #0d0815); }
.pixel-bowl::after { content: ""; position: absolute; left: 21px; top: 25px; width: 8px; height: 8px; background: var(--yellow); }
.pixel-bowl i { position: absolute; z-index: 2; width: 3px; height: 11px; top: -7px; background: #fff8dfaa; animation: steam 1.5s steps(3) infinite; }
.pixel-bowl i:nth-child(1){left:15px}.pixel-bowl i:nth-child(2){left:24px;animation-delay:-.5s}.pixel-bowl i:nth-child(3){left:33px;animation-delay:-1s}
@keyframes steam { 50% { transform: translate(3px,-5px); opacity: .4; } }
.menu-copy { position: relative; width: 100%; margin: 16px 0 12px; padding: 9px; border-top: 1px dashed #76577c; border-bottom: 1px dashed #76577c; color: var(--muted); font-size: 7px; line-height: 1.35; }
.menu-copy p { margin: 3px 0; }.menu-copy b { color: var(--yellow); }
.menu-actions { position: relative; z-index: 2; width: 100%; display: grid; gap: 7px; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pixel-button { min-height: 30px; padding: 7px 8px; border: 2px solid #8c6a8f; color: var(--ink); background: #352342; box-shadow: inset 2px 2px #5a3c65, inset -2px -2px #180f22, 3px 3px #09050e; font-size: 8px; font-weight: 900; cursor: pointer; text-shadow: 1px 1px #000; }
.pixel-button:hover, .pixel-button:focus-visible { color: var(--yellow); outline: 1px solid var(--yellow); }
.pixel-button:active { transform: translate(2px,2px); box-shadow: inset 2px 2px #180f22; }
.pixel-button.primary { border-color: #ffe286; color: #2c1821; background: var(--yellow); box-shadow: inset 2px 2px #fff0a3, inset -2px -2px #ad6a36, 3px 3px #6e302c; text-shadow: none; }
.pixel-button.small { min-height: 26px; font-size: 7px; }
.rating-summary { margin-top: 9px; border: 0; color: #a99aab; background: transparent; font-size: 7px; cursor: pointer; }
.rating-summary .stars { color: var(--yellow); letter-spacing: 1px; }.rating-summary b { margin-left: 4px; }
.version { position: absolute; bottom: 8px; right: 9px; margin: 0; color: #6f6275; font-size: 6px; }

.dialog { width: 100%; padding: 18px 14px 14px; }.dialog h2 { margin-bottom: 14px; }
.control-grid { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 12px 10px; text-align: left; }
.control-grid b { color: var(--yellow); font-size: 9px; }.control-grid p { margin: 4px 0 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.key-art { display: grid; grid-template-columns: repeat(3, 15px); gap: 2px; justify-content: center; }.key-art span { display: grid; place-items: center; height: 15px; border: 1px solid #aa8aad; background: #463150; font-size: 7px; }.key-art span:first-child { grid-column: 2; }.key-art span:nth-child(2) { grid-column: 1; }
.stick-art { width: 43px; height: 43px; margin: auto; border: 2px solid #73577d; border-radius: 50%; background: #130c1e99; }.stick-art i { display: block; width: 19px; height: 19px; margin: 10px; border: 2px solid #c19ac1; border-radius: 50%; background: #5e4367; }
.tip { margin: 15px 0; padding: 7px; color: var(--yellow); background: #120c1c; font-size: 7px; line-height: 1.5; }

.hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; padding: 5px; }
.hud-top { display: grid; grid-template-columns: 1fr 19px 19px; gap: 3px; align-items: stretch; pointer-events: auto; }
.hp-wrap { height: 19px; display: grid; grid-template-columns: 19px 1fr 24px; align-items: center; gap: 3px; padding: 2px 3px; }
.hud-label { color: #ff867e; font-size: 6px; font-weight: 900; }.hp-wrap strong { font-size: 6px; text-align: right; }
.meter { height: 7px; overflow: hidden; border: 1px solid #0c0711; background: #100a18; box-shadow: inset 1px 1px #000; }
.meter i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#c93646,#f05a52); transition: width .15s; }
.square-button { width: 19px; height: 19px; padding: 0; border: 2px solid #8c6a8f; background: #31203e; box-shadow: inset 1px 1px #60486a, 2px 2px #09050e; font-size: 8px; cursor: pointer; pointer-events: auto; }
.square-button[aria-pressed="true"] { color: #251327; background: var(--yellow); }
.hud-stats { height: 16px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; margin-top: 3px; padding: 2px 4px; color: var(--muted); font-size: 6px; text-align: center; }.hud-stats strong { color: var(--ink); }
.xp-wrap { position: absolute; left: 5px; right: 5px; bottom: 4px; text-align: center; }.xp-meter { position: relative; height: 10px; border: 2px solid #715679; }.xp-meter i { width: 0; background: var(--green); }.xp-meter b { position: absolute; inset: 0; color: #fff; font-size: 5px; line-height: 6px; text-shadow: 1px 1px #000; }.xp-wrap small { display: block; margin-top: 2px; color: #b7a8b9; font-size: 5px; text-shadow: 1px 1px #000; }

.level-screen { z-index: 100; justify-content: center; background: radial-gradient(circle at 50% 50%, #704b8f99, #0b0712ef 70%); }
.level-panel { position: relative; width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 5px; scrollbar-width: none; }
.level-panel::-webkit-scrollbar { display: none; }
.level-glow { position: absolute; z-index: 0; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%,-50%); border: 2px dashed #ffd45e55; pointer-events: none; animation: level-spin 8s linear infinite; }
@keyframes level-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.level-screen h2 { position: relative; z-index: 1; font-size: 14px; }.level-panel > .kicker { position: relative; z-index: 1; font-size: 13px; }
.upgrade-cards { position: relative; z-index: 1; width: 100%; display: grid; gap: 7px; margin-top: 14px; }
.upgrade-card { min-height: 68px; display: grid; grid-template-columns: 40px 1fr 18px; gap: 7px; align-items: center; padding: 7px; border: 2px solid #806388; color: var(--ink); background: linear-gradient(90deg,#2e1e3d,#20152e); box-shadow: inset 2px 2px #51395e, inset -2px -2px #120b1c, 3px 3px #07040c; text-align: left; cursor: pointer; }
.upgrade-card:hover,.upgrade-card:focus-visible { border-color: var(--yellow); transform: translateX(2px); outline: none; }.upgrade-card:disabled { opacity: .6; }
.upgrade-icon { width: 34px; height: 34px; display: grid; grid-template-columns: repeat(8,1fr); image-rendering: pixelated; }
.upgrade-icon i { display: block; }
.upgrade-info strong { display: block; color: var(--yellow); font-size: 9px; }.upgrade-info p { margin: 3px 0; color: var(--muted); font-size: 6px; line-height: 1.35; }.upgrade-info small { color: #927f97; font-size: 6px; }
.upgrade-key { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #b491b6; background: #493250; font-size: 7px; }
.number-hint { position: relative; z-index: 1; margin: 10px 0 0; color: #9c8ca0; font-size: 6px; }

.pause-dialog { display: grid; gap: 7px; }.pause-dialog h2 { margin-bottom: 8px; }
#controlsScreen, #pauseScreen { z-index: 200; }
.result-screen { justify-content: flex-start; padding-top: 24px; background: linear-gradient(#1a1129f5,#0c0713f5); }
.result-screen h2 { max-width: 190px; font-size: 15px; }.result-icon { width: 46px; height: 46px; margin: 9px 0; image-rendering: pixelated; }
.result-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }.result-stats div { padding: 7px; border: 1px solid #493454; }.result-stats span { display: block; color: var(--muted); font-size: 6px; }.result-stats b { display: block; margin-top: 2px; color: var(--yellow); font-size: 10px; }
.result-upgrades { width: 100%; margin-top: 8px; text-align: left; }.result-upgrades > span { color: var(--muted); font-size: 6px; }.result-upgrades > div { min-height: 28px; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }.result-upgrades i { padding: 3px 5px; border: 1px solid #5f4669; background: #2b1c38; color: #f2d891; font-size: 6px; font-style: normal; }
.result-actions { margin-top: 5px; }

.joystick { position: absolute; left: 50%; top: 75%; z-index: 20; width: 58px; height: 58px; transform: translate(-50%,-50%); border: 2px solid #c5abc855; border-radius: 50%; background: #100a1899; box-shadow: inset 0 0 0 7px #ffffff08; pointer-events: none; }
.joystick i { position: absolute; left: 17px; top: 17px; width: 20px; height: 20px; border: 2px solid #d1b8d4aa; border-radius: 50%; background: #6e5378cc; box-shadow: 2px 2px #0c0712; }
.toast { position: absolute; z-index: 30; left: 50%; top: 24%; width: max-content; max-width: 85%; padding: 6px 10px; transform: translateX(-50%); border: 2px solid #fff1b1; color: var(--yellow); background: #21142fe8; box-shadow: 3px 3px #08040d; font-size: 8px; font-weight: 900; text-align: center; animation: toast-in .2s steps(3); }
@keyframes toast-in { from { transform: translate(-50%,6px); opacity: 0; } }

.modal { position: absolute; inset: 0; z-index: 300; display: grid; place-items: center; padding: 12px; background: #09050ddb; }
.modal-card { position: relative; width: 100%; max-height: 95%; overflow: auto; padding: 17px 12px 12px; touch-action: pan-y; }.modal-card h2 { font-size: 16px; }
.modal-close { position: absolute; right: 6px; top: 5px; width: 21px; height: 21px; padding: 0; border: 1px solid #8c6a8f; color: #d8c7db; background: #2a1b38; cursor: pointer; }
.modal-lead { margin: 8px 0; color: var(--muted); font-size: 7px; line-height: 1.4; }
.star-input { display: flex; justify-content: center; gap: 5px; margin: 8px 0 12px; }.star-input button { padding: 0; border: 0; color: #5d4b63; background: transparent; font-size: 20px; cursor: pointer; text-shadow: 2px 2px #0e0916; }.star-input button.active { color: var(--yellow); }
.comment-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 7px; text-align: left; }.comment-label span { color: #8f7f93; }
textarea { width: 100%; margin-top: 4px; resize: none; border: 2px solid #705579; border-radius: 0; padding: 8px; color: var(--ink); background: #100a19; font-size: 7px; line-height: 1.5; outline: none; touch-action: pan-y; }.form-status { min-height: 11px; margin: 5px 0; color: var(--yellow); font-size: 6px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.review-summary { margin: 8px 0; padding: 8px; background: #130c1e; }.review-summary strong { display: block; color: var(--yellow); font-size: 14px; }.review-summary span { color: var(--muted); font-size: 7px; }
.review-list { display: grid; gap: 5px; max-height: 210px; overflow-y: auto; margin-bottom: 8px; touch-action: pan-y; }.review-item { padding: 7px; border: 1px solid #533d5d; background: #180f25; text-align: left; }.review-item header { display: flex; justify-content: space-between; color: var(--yellow); font-size: 7px; }.review-item time { color: #827486; font-size: 6px; }.review-item p { margin: 5px 0 0; color: var(--muted); font-size: 7px; line-height: 1.45; white-space: pre-wrap; }

/* 브라우저 확대에 기대지 않는 PC·모바일 공통 가독성 크기 */
button { touch-action: manipulation; }
h1, h2, p { overflow-wrap: normal; word-break: keep-all; }
.pixel-panel { border-width: 3px; }
.screen { padding: 20px; }
.kicker { margin-bottom: 7px; font-size: 13px; line-height: 1.2; }
h1 { font-size: 50px; line-height: 1.05; }
h2 { font-size: 26px; line-height: 1.25; }

.menu-screen { padding-top: 28px; }
.subtitle { margin-top: 7px; font-size: 16px; line-height: 1.3; }
.menu-copy { margin: 14px 0 12px; padding: 9px 8px; font-size: 13px; line-height: 1.45; }
.menu-copy p { margin: 6px 0; }
.menu-actions { gap: 8px; }
.button-row { gap: 8px; }
.pixel-button { min-height: 44px; padding: 10px 12px; font-size: 14px; line-height: 1.2; }
.pixel-button.small { min-height: 44px; font-size: 12px; }
.rating-summary { min-height: 36px; margin-top: 7px; padding: 6px; font-size: 11px; line-height: 1.35; }
.rating-summary b { white-space: pre-line; }
.version { bottom: 7px; right: 8px; font-size: 10px; }

.dialog { padding: 20px 16px 16px; }
.dialog h2 { margin-bottom: 18px; }
.control-grid { grid-template-columns: 72px 1fr; gap: 16px 12px; }
.control-grid b { font-size: 15px; }
.control-grid p { margin-top: 5px; font-size: 13px; line-height: 1.5; }
.key-art { grid-template-columns: repeat(3, 22px); gap: 3px; }
.key-art span { height: 22px; font-size: 11px; }
.stick-art { width: 56px; height: 56px; }
.stick-art i { width: 26px; height: 26px; margin: 13px; }
.tip { margin: 18px 0; padding: 10px; font-size: 13px; line-height: 1.5; }

.hud { padding: 6px; }
.hud-top { grid-template-columns: 1fr 44px 44px; gap: 6px; }
.hp-wrap { height: 44px; grid-template-columns: 24px 1fr 52px; gap: 5px; padding: 5px 6px; }
.hud-label, .hp-wrap strong { font-size: 12px; }
.meter { height: 12px; border-width: 2px; }
.square-button { width: 44px; height: 44px; border-width: 3px; font-size: 18px; font-weight: 900; }
.square-button:hover, .square-button:focus-visible { border-color: var(--yellow); outline: 1px solid var(--yellow); }
.square-button:active { transform: translate(2px,2px); box-shadow: inset 2px 2px #180f22; }
.hud-stats { height: 28px; margin-top: 5px; padding: 4px 5px; font-size: 11px; }
.hud-stats span:nth-child(-n+2), .hud-stats strong { color: var(--ink); font-weight: 900; }
#timeText { color: var(--yellow); font-size: 12px; }
.xp-wrap { left: 6px; right: 6px; bottom: 5px; }
.xp-meter { height: 17px; }
.xp-meter b { font-size: 10px; line-height: 13px; }
.xp-wrap small { margin-top: 3px; font-size: 10px; }

.level-screen { padding: 14px 12px 12px; }
.level-screen h2 { font-size: 21px; line-height: 1.35; }
.level-panel > .kicker { font-size: 16px; }
.upgrade-cards { gap: 8px; margin-top: 10px; }
.upgrade-card { min-height: 108px; grid-template-columns: 48px 1fr 28px; gap: 9px; padding: 10px; border-width: 3px; }
.upgrade-icon { width: 44px; height: 44px; }
.upgrade-info strong { font-size: 16px; line-height: 1.25; }
.upgrade-info p { min-height: 2.8em; margin: 5px 0; font-size: 12px; line-height: 1.4; white-space: pre-line; word-break: keep-all; }
.upgrade-info small { font-size: 11px; line-height: 1.3; }
.upgrade-key { width: 28px; height: 28px; font-size: 13px; }
.number-hint { margin-top: 9px; font-size: 11px; line-height: 1.35; }

.pause-dialog { gap: 10px; }
.pause-dialog h2 { margin-bottom: 10px; }
.result-screen { padding: 18px 20px 14px; }
.result-screen h2 { max-width: 280px; font-size: 24px; line-height: 1.35; white-space: pre-line; }
.result-icon { width: 58px; height: 58px; margin: 10px 0; }
.result-stats div { padding: 10px; }
.result-stats span { font-size: 11px; }
.result-stats b { margin-top: 4px; font-size: 16px; }
.result-upgrades { margin-top: 10px; }
.result-upgrades > span { font-size: 11px; }
.result-upgrades > div { min-height: 38px; gap: 5px; margin-top: 5px; }
.result-upgrades i { padding: 5px 7px; font-size: 11px; }
.result-actions { margin-top: 8px; }

.joystick { width: 80px; height: 80px; border-width: 3px; box-shadow: inset 0 0 0 9px #ffffff08; }
.joystick i { left: calc(50% - 16px); top: calc(50% - 16px); width: 32px; height: 32px; border-width: 3px; }
.toast { top: 23%; max-width: 90%; padding: 10px 14px; border-width: 3px; font-size: 14px; line-height: 1.4; white-space: pre-line; word-break: keep-all; }

.modal { padding: 14px; }
.modal-card { max-height: 96%; padding: 24px 16px 16px; }
.modal-card h2 { font-size: 24px; }
.modal-close { right: 8px; top: 8px; width: 44px; height: 44px; border-width: 2px; font-size: 24px; font-weight: 900; }
.modal-lead { margin: 10px 0; font-size: 13px; line-height: 1.5; }
.star-input { gap: 6px; margin: 10px 0 14px; }
.star-input button { width: 44px; height: 44px; font-size: 28px; }
.comment-label { font-size: 12px; }
textarea { min-height: 118px; margin-top: 6px; padding: 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.form-status { min-height: 38px; margin: 7px 0; font-size: 12px; line-height: 1.45; white-space: pre-line; word-break: keep-all; }
.modal-actions { gap: 8px; }
.review-summary { margin: 10px 0; padding: 10px; }
.review-summary strong { font-size: 20px; }
.review-summary span { font-size: 12px; line-height: 1.45; white-space: pre-line; word-break: keep-all; }
.review-list { gap: 8px; max-height: 230px; margin-bottom: 10px; }
.review-list > p { margin: 0; padding: 14px 8px; color: var(--muted); font-size: 13px; line-height: 1.5; white-space: pre-line; word-break: keep-all; }
.review-item { padding: 10px; }
.review-item header { font-size: 12px; }
.review-item time { font-size: 11px; }
.review-item p { margin-top: 7px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

@media (max-height: 700px) {
  .menu-screen { padding-top: 18px; }
  .pixel-bowl { width: 46px; height: 35px; margin-bottom: 5px; }
  h1 { font-size: 44px; }
  .subtitle { font-size: 15px; }
  .menu-copy { margin: 8px 0; padding: 6px; font-size: 12px; line-height: 1.35; }
  .menu-copy p { margin: 3px 0; }
  .level-screen { padding: 8px 10px; }
  .level-panel { padding: 4px; }
  .level-panel > .kicker { font-size: 14px; }
  .level-screen h2 { font-size: 19px; }
  .upgrade-cards { gap: 6px; margin-top: 6px; }
  .upgrade-card { min-height: 84px; padding-top: 7px; padding-bottom: 7px; }
  .number-hint { margin-top: 6px; }
  .result-screen { padding-top: 12px; }
  .result-icon { width: 50px; height: 50px; margin: 6px 0; }
}

@media (max-width: 374px) {
  .screen { padding-left: 14px; padding-right: 14px; }
  .hud-stats { font-size: 10px; }
  .upgrade-card { grid-template-columns: 44px 1fr 26px; gap: 7px; padding: 8px; }
  .upgrade-icon { width: 40px; height: 40px; }
  .upgrade-info strong { font-size: 15px; }
  .upgrade-info p { font-size: 11px; }
  .upgrade-info small { font-size: 10px; }
}

@media (pointer: fine) { .joystick { opacity: .5; } }
@media (max-aspect-ratio: 9/16) { .game-viewport { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }