:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #302a24; background: #b9a481; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { height: 100dvh; }
body::before { content: ""; position: fixed; inset: -32px; background: linear-gradient(#5d483b40, #4a342d65), url("game/resources/img/mainUI/bg1.png") center / cover; filter: blur(18px); pointer-events: none; }
#play-area { position: relative; display: flex; justify-content: center; height: 100%; width: 100%; overflow: hidden; }
.game-frame { position: relative; height: 100%; max-width: 100%; aspect-ratio: 640 / 1386; background: #d6c7a6; box-shadow: 0 0 80px #2f211b55; }
iframe { display: block; border: 0; width: 100%; height: 100%; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 100ms ease, filter 100ms ease; }
button:active { transform: translateY(2px) scale(.97); }
button:focus-visible, .instructions-content:focus-visible { outline: 3px solid #fff19a; outline-offset: 3px; }
/* Reuse the game's hand-drawn panel edges; keep the paper center clear for text. */
.game-panel { border: 14px solid transparent; border-image: url("game/resources/img/mainUI/stamina/bg.png") 42 / 14px stretch; background: #e3d9c8; background-clip: padding-box; filter: drop-shadow(0 4px 0 #241c1880); }
.game-title, .game-button, #tools-toggle { color: #fff8e5; font-weight: 900; -webkit-text-stroke: 3px #17130f; paint-order: stroke fill; text-shadow: 0 2px 0 #17130f; }
.game-title { margin: 0; font-size: 25px; line-height: 1.4; text-align: center; }
/* Atlas coordinates come from the original AutoAtlas.atlas files. Percentage
   size/position isolates each sprite without duplicating or redrawing assets. */
.game-button { display: block; width: 100%; min-height: 56px; padding: 12px 15px 16px; background-image: url("game/resources/img/gameOverUI/AutoAtlas.png"); background-size: 280.392157% 762.676056%; background-position: 0% 76.514346%; background-repeat: no-repeat; font-size: 21px; line-height: 1.3; }
.game-button-red { background-image: url("game/resources/img/mainUI/AutoAtlas.png"); background-size: 768.292683% 1227.956989%; background-position: 61.386861% 40.705434%; }
.game-close { position: absolute; z-index: 1; top: -21px; left: -15px; width: 44px; height: 46px; background-image: url("game/resources/img/shop/AutoAtlas.png"); background-size: 1028.735632% 954.945055%; background-position: 71.287129% 67.480720%; background-repeat: no-repeat; }
#tools-toggle { position: absolute; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); z-index: 4; display: grid; justify-items: center; width: 52px; min-height: 60px; font-size: 14px; line-height: 18px; -webkit-text-stroke-width: 2.5px; }
.gear { display: block; width: 41px; height: 42px; background-image: url("game/resources/img/mainUI/AutoAtlas.png"); background-size: 2581.967213% 1812.698413%; background-position: 69.550859% 94.346617%; background-repeat: no-repeat; transition: transform 150ms ease; }
#tools-toggle[aria-expanded="true"] .gear { transform: rotate(30deg); }
#game-tools { visibility: hidden; position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 4; width: 258px; max-width: calc(100% - 32px); padding: 4px 13px 9px; }
body.tools-open #game-tools { visibility: visible; }
#game-tools .game-title { margin: -14px 0 17px; }
nav { display: grid; gap: 9px; }
#game-tools p { margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 1.5; font-weight: 600; }
dialog { width: min(370px, calc(100vw - 28px)); max-height: calc(100dvh - 52px); padding: 6px 16px 12px; overflow: visible; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #171410a8; }
dialog .game-title { flex: none; margin: -19px 0 10px; }
dialog .game-close { left: -9px; }
.instructions-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #917b63 #e3d9c8; scrollbar-width: thin; }
dl { margin: 5px 0 8px; }
dt { margin: 15px 0 5px; color: #35291b; font-size: 17px; font-weight: 900; }
dt:first-child { margin-top: 0; }
dd { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.8; text-wrap: pretty; }
dialog form { display: flex; justify-content: center; flex: none; margin-top: 14px; }
dialog form .game-button { width: 172px; min-height: 62px; font-size: 23px; }
#notice { position: fixed; bottom: max(90px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: min(380px, 90vw); padding: 12px 18px; background: #e3d9c8; border: 3px solid #30251c; border-radius: 3px 6px 2px 5px; box-shadow: 0 3px 0 #30251c; font-size: 14px; font-weight: 600; text-align: center; pointer-events: none; visibility: hidden; z-index: 5; }
#notice.visible { visibility: visible; }
@media (hover: hover) { button:hover { filter: brightness(1.09); } }
@media (prefers-reduced-motion: reduce) { button, .gear { transition: none; } }
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  body::before { display: none; }
  .game-frame { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; box-shadow: none; }
}