html, body, #game-container { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0b0f24; color: #e6e9ff; font-family: Inter, system-ui, sans-serif; }
#game-container { display: flex; flex-direction: column; background: url(../assets/moon-kingdom-bg.webp) center/cover; }
#hud { padding: calc(env(safe-area-inset-top) + 4vh) 4vw 8px; display: flex; gap: 8px; align-items: center; background: linear-gradient(#0b0f24ee, #0b0f2400); flex-wrap: wrap; }
#hud .stat { background: #141a3acc; border: 1px solid #8a93d6; border-radius: 10px; padding: 4px 8px; font-size: 13px; font-weight: 600; }
#hud button { margin-left: auto; }
#screen { flex: 1; overflow-y: auto; padding: 8px 4vw 16px; touch-action: pan-y; }
.panel { background: #0d1230dd; border: 1px solid #6a73c0; border-radius: 14px; padding: 16px; margin-bottom: 12px; backdrop-filter: blur(4px); line-height: 1.55; }
h1, h2 { font-family: Orbitron, sans-serif; color: #dfe4ff; text-shadow: 0 0 12px #8fa4ff; margin: 0 0 10px; }
h1 { font-size: 26px; text-align: center; }
h2 { font-size: 18px; }
button { font: 600 15px Inter, sans-serif; color: #fff; background: linear-gradient(#3b4597, #232a66); border: 1px solid #a7b0ff; border-radius: 12px; padding: 12px 14px; min-height: 44px; cursor: pointer; }
button:active { transform: scale(0.97); filter: brightness(1.3); }
button:disabled { opacity: 0.4; }
.choice { display: block; width: 100%; text-align: left; margin-top: 8px; }
.story-summary { font-size: 16px; line-height: 1.65; }
.story-more { margin: 10px 0 14px; border-top: 1px solid #8a93d655; border-bottom: 1px solid #8a93d655; }
.story-more summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: #dfe4ff; font-weight: 700; cursor: pointer; list-style: none; }
.story-more summary::-webkit-details-marker { display: none; }
.story-more summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid #a7b0ff; border-radius: 50%; color: #ffd76a; }
.story-more[open] summary::before { content: '−'; }
.story-more .read-less-label, .story-more[open] .read-more-label { display: none; }
.story-more[open] .read-less-label { display: inline; }
.story-more > p { margin: 0 0 12px; color: #d2d7fa; line-height: 1.7; }
.story-choices { margin-top: 8px; }
.gold { color: #ffd76a; }
#tabs { display: flex; padding: 6px 3vw calc(env(safe-area-inset-bottom) + 3vh); gap: 4px; background: #0b0f24ee; }
#tabs button { flex: 1; padding: 8px 2px; font-size: 12px; }
#tabs button.on { background: linear-gradient(#7d8cff, #3b4597); }
.portrait { width: 96px; float: left; margin: 0 12px 8px 0; border-radius: 12px; border: 1px solid #a7b0ff; }
.bar { height: 10px; background: #222; border-radius: 6px; overflow: hidden; margin: 4px 0 10px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b9a, #ffd76a); }
.map { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.region { width: 100%; min-height: 56px; padding: 12px; border-radius: 12px; background: #1a2150cc; border: 1px solid #6a73c0; font-size: 13px; text-align: left; }
.region.locked { opacity: 0.55; }
.region.here { border-color: #ffd76a; box-shadow: 0 0 14px #ffd76a88; }
.region[aria-pressed="true"] { background: #354080; }
small { color: #aeb7f5; }
.ach { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #ffffff18; font-size: 13px; }
.ach.off { opacity: 0.4; }
#dice-layer { position: fixed; inset: 0; display: none; background: #000a; z-index: 10; }
#dice-layer canvas { position: absolute; inset: 0; }
#dice-result { position: absolute; bottom: 22vh; width: 100%; text-align: center; font: 700 28px Orbitron, sans-serif; text-shadow: 0 0 18px #8fa4ff; z-index: 2; }
#toast { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); background: #ffd76a; color: #221; padding: 10px 16px; border-radius: 12px; font-weight: 800; opacity: 0; transition: opacity 0.3s; z-index: 20; pointer-events: none; }
textarea { width: 100%; height: 80px; background: #0008; color: #fff; border-radius: 8px; }