:root { font-family: 'Malgun Gothic', system-ui, sans-serif; color: #f5eddb; background: #111b35; }
* { box-sizing: border-box; }
body { margin: 0; background: #111b35 url('/assets/background.webp') center top / auto 100% no-repeat fixed; }
button { font: inherit; cursor: pointer; min-height: 44px; }
button:disabled { cursor: default; opacity: .45; }
.app { min-height: 100dvh; max-width: 540px; margin: auto; padding: max(100px, 14dvh) 18px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.top, .list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.eyebrow { margin: 0 0 4px; font-size: 13px; }
h1 { margin: 0; font-size: 25px; } h2 { margin: 0; font-size: 21px; }
.top, .guide, .progress { text-shadow: 0 2px 5px #07101f, 0 0 16px #07101f; }
.guide, .progress { text-align: center; margin: 0; min-height: 24px; }
.text-button { color: inherit; background: none; border: 0; text-decoration: underline; }
.top .text-button { color: #fff4d4; min-width: 98px; border: 12px solid transparent; border-image: url('/assets/button.webp') 40 170 fill / 12px 22px stretch; padding: 0 3px; text-decoration: none; text-shadow: 0 1px 3px #081226; transition: filter .16s ease; }
.top .text-button:hover { filter: brightness(1.12); }
.top .text-button:active { filter: brightness(.88); }
.board-wrap { width: min(100%, 46dvh, 480px); aspect-ratio: 1; position: relative; align-self: center; box-shadow: 0 16px 35px #050b1eb3; }
.board-wrap.entering { animation: text-appear .22s ease-out both; }
.board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--size), 1fr); grid-template-rows: repeat(var(--size), 1fr); }
.cell { min-width: 0; min-height: 0; border: 0; padding: 0; background-color: #243455; background-size: cover; background-position: center; }
.cell.mirror { background-image: url('/assets/mirror-slash.webp'); }
.cell.mirror[data-turn="1"] { background-image: url('/assets/mirror-backslash.webp'); }
.cell.flower { background-image: url('/assets/flower-dark.webp'); }
.cell.flower.lit { background-image: url('/assets/flower-lit.webp'); }
.cell.lantern { background-image: url('/assets/lantern.webp'); }
.cell.empty { background-image: url('/assets/empty.webp'); }
.cell:focus-visible, button:focus-visible { outline: 3px solid #fbe39c; outline-offset: 2px; }
.mirror:active { filter: brightness(1.16); transform: scale(.985); }
.mirror.turning { animation: mirror-gleam .28s ease-out; }
.mirror.hint-target { animation: hint-gleam 1.15s ease-in-out infinite alternate; }
.flower.newly-lit { animation: flower-awake .5s ease-out; }
.beam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.light-path { fill: none; stroke: #ffe6a3; stroke-width: .09; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .12px #fff0a8); }
.light-path.revealing { stroke-dasharray: var(--beam-length); animation: light-travel .36s ease-out both; }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.controls button, .complete button, .level-items button, .list-head button, .daily-button { color: #fff4d4; border: 12px solid transparent; border-image: url('/assets/button.webp') 40 170 fill / 12px 22px stretch; background: none; padding: 0 3px; text-shadow: 0 1px 3px #081226; transition: filter .16s ease; }
.controls button:hover, .complete button:hover, .level-items button:hover, .list-head button:hover, .daily-button:hover { filter: brightness(1.12); }
.controls button:active, .complete button:active, .level-items button:active, .list-head button:active, .daily-button:active { filter: brightness(.88); }
.complete { text-align: center; text-shadow: 0 2px 5px #020816, 0 0 12px #020816; }
.complete:not([hidden]) { animation: text-appear .3s .22s both; }
.complete p { margin: 8px 0 14px; }
.level-list { position: fixed; z-index: 10; inset: 0; padding: 24px; overflow: auto; background: #17243c url('/assets/background.webp') center top / cover no-repeat; }
.level-list:not([hidden]) { animation: text-appear .2s ease-out both; }
.daily-button { width: 100%; margin-top: 24px; }
.level-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; text-shadow: 0 2px 5px #020816, 0 0 12px #020816; }
@keyframes light-travel { from { stroke-dashoffset: var(--beam-length); } to { stroke-dashoffset: 0; } }
@keyframes flower-awake { from { filter: brightness(1.45) drop-shadow(0 0 9px #ffdea0); } to { filter: none; } }
@keyframes mirror-gleam { from { filter: brightness(1.28); } to { filter: brightness(1); } }
@keyframes hint-gleam { from { filter: brightness(1); } to { filter: brightness(1.36) drop-shadow(0 0 7px #ffe2a0); } }
@keyframes text-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mirror:active { transform: none; }
  .mirror.turning, .mirror.hint-target, .flower.newly-lit, .light-path.revealing, .complete:not([hidden]), .board-wrap.entering, .level-list:not([hidden]) { animation: none; }
  .mirror.hint-target { filter: brightness(1.32) drop-shadow(0 0 7px #ffe2a0); }
  .top .text-button, .controls button, .complete button, .level-items button, .list-head button, .daily-button { transition: none; }
}
@media (max-height: 740px) { .app { padding-top: 70px; gap: 8px; } .board-wrap { width: min(100%, 42dvh); } }
@media (min-width: 700px) { body { background-size: cover; } .app { min-height: 100vh; } }