body { background: #092f37; background-image: radial-gradient(#2a6f70 1px, transparent 1px), radial-gradient(#174851 1px, transparent 1px); background-size: 23px 23px, 41px 41px; }
.app-shell { min-height: 100vh; max-width: 1020px; background: #f7f1dd; box-shadow: 0 0 0 9px #f2b947, 0 0 0 17px #0b4245, 0 22px 60px #001b20a8; }
.topbar { min-height: 58px; border-bottom: 3px solid #d8c792; }
.brand { font-family: 'Press Start 2P', monospace; font-size: 10px; }
.brand img { width: 48px; }
.game-hud { margin-left: auto; display: flex; gap: 8px; font: 10px 'Press Start 2P', monospace; }
.game-hud span, .mission-badge { background: #123d38; color: #fff9e8; padding: 9px 10px; border-radius: 8px; box-shadow: inset 0 -3px #092e2b; }
.game-hud span:first-child { color: #ff927c; }.game-hud span:last-child { color: #ffd36c; }
.level-progress { margin-left: 14px; }.level-progress i { width: 12px; height: 12px; border: 2px solid #0f7168; background: transparent; }.level-progress i.done { background: #f5a33b; box-shadow: 0 0 0 2px #ffde81; }
.hero-screen, .game-screen, .results-screen { position: relative; }.hero-screen::before, .game-screen::before, .results-screen::before { content: ''; position: absolute; pointer-events: none; inset: 0; background-image: linear-gradient(#0d423c0c 1px, transparent 1px), linear-gradient(90deg, #0d423c0c 1px, transparent 1px); background-size: 24px 24px; }
.hero-copy, .mascot-stage, .game-header, .scene-card, .instruction, .pill-row, .slots, .tablet-card, .next-level, .feedback, .dialogue-card, .choices, .score-cards, .whatsapp, .link-button, .results-screen > * { position: relative; z-index: 1; }
.eyebrow { font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.6; color: #b15b23; }.hero-screen h1 { text-shadow: 4px 4px #f5d37c; }
.button { border-radius: 7px; text-transform: uppercase; letter-spacing: .04em; }.primary { background: #e55d44; box-shadow: 0 5px 0 #9d382d; }.primary:hover { box-shadow: 0 7px 0 #9d382d; }
.game-screen { margin-top: 32px; padding: 28px; border: 3px solid #123d38; border-radius: 18px; background: #fffaf0; box-shadow: 8px 8px 0 #d3bc79; }
.game-header { border-bottom: 2px dashed #c7b783; padding-bottom: 18px; }.timer { border: 3px solid #123d38; border-radius: 7px; box-shadow: 3px 3px #123d38; }.scene-card { border: 3px solid #123d38; box-shadow: 5px 5px #123d38; }.morning-scene { background: linear-gradient(135deg,#ffe48d,#ffbd61); }.alert-scene { background: linear-gradient(135deg,#ffb88d,#f5775d); }
.pill-pill { border: 3px solid #0f7168; border-radius: 8px; box-shadow: 3px 3px #0f7168; font-weight: 700; }.pill-pill::before { content: '◆ '; color: #f2a841; }.pill-pill.selected { transform: translate(-2px,-2px); box-shadow: 5px 5px #0f7168; }.slot { border: 3px dashed #73a99a; border-radius: 8px; background: #e8f6ee; }.slot.correct { box-shadow: inset 0 0 0 2px #fff; }.tablet-card { border: 3px solid #123d38; box-shadow: 5px 5px #123d38; }.tablet-icon { border-radius: 7px; font-size: 21px; }
.pill-pill { min-width: 148px; display: flex; align-items: center; gap: 9px; cursor: grab; }.pill-pill::before { display: none; }.pill-pill:active { cursor: grabbing; }.tablet-shape { display: inline-block; width: 29px; height: 29px; flex: 0 0 auto; border: 2px solid #123d38; box-shadow: 2px 2px #123d38; }.vitamin .tablet-shape { border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff5ac 0 10%, #ffc73d 12% 68%, #dc8c1c 70%); }.blood .tablet-shape { border-radius: 18px; background: linear-gradient(90deg, #f4edf1 0 48%, #dd5261 49%); }.magnesium .tablet-shape { border-radius: 7px; background: repeating-linear-gradient(45deg, #b7a1ed 0 5px, #8d71d1 5px 10px); transform: rotate(45deg); }.slot { position: relative; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: auto auto auto; column-gap: 6px; text-align: left; }.slot > span { grid-row: 1 / 3; }.slot strong { font-size: 16px; }.slot small { color: #5a7871; }.slot b { grid-column: 1 / -1; }.slot.drop-ready { border-style: solid; border-color: #f5a33b; background: #fff4c6; transform: scale(1.025); box-shadow: 0 0 0 3px #f5a33b55; }.pill-pill.placed { transform: scale(.88); filter: grayscale(.15); }
.dialogue-card { border: 3px solid #123d38; box-shadow: 6px 6px #123d38; background: #d7f0df; }.dialogue blockquote { background: #fff; padding: 14px; border-radius: 13px 13px 13px 2px; }.choices button { border: 3px solid #123d38; border-radius: 8px; box-shadow: 4px 4px #123d38; font-weight: 700; }.choices button:hover, .choices button.selected { transform: translate(-2px,-2px); box-shadow: 6px 6px #123d38; }
.results-screen { padding: 30px; border: 3px solid #123d38; border-radius: 18px; background: #fffaf0; box-shadow: 8px 8px #d3bc79; }.score-cards div { border: 3px solid #123d38; box-shadow: 4px 4px #123d38; }.result-mascot::after { content: 'QUEST CLEAR!'; position: absolute; z-index: 2; top: 6px; right: 20px; background: #e55d44; color: #fff; padding: 9px; font: 10px 'Press Start 2P', monospace; transform: rotate(4deg); }
@media(max-width:650px){.app-shell{box-shadow:none;border-left:4px solid #f2b947;border-right:4px solid #f2b947}.brand{font-size:8px}.game-hud{display:none}.game-screen{padding:18px}.mission-badge{display:none}}