:root { font-family: ui-rounded, 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; color: #304c45; background: #f8f1e7; font-synthesis: none; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: radial-gradient(ellipse at 10% 45%, #f5dfc633, transparent 65%), #f8f1e7; }
button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #ba681f; outline-offset: 4px; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.game-shell { max-width: 480px; min-height: 100svh; margin: auto; padding: max(22px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { font-size: 25px; font-weight: 900; letter-spacing: -1.5px; }
.brand-dot { color: #de9c4a; }
.level-picker { min-height: 44px; border: 1px solid #ded8c9; border-radius: 24px; background: #fffbf3; padding: 8px 17px; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; }
.chevron { margin-left: 8px; }
.icon-button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 28px; }
.scoreboard { position: relative; display: flex; justify-content: space-between; padding: 32px 5px 23px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 800; color: #6e7c6f; }
.score { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.score strong { font-size: 35px; line-height: 1; }
.coin { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 50%; color: #a9681f; background: #f8cb57; border: 3px solid #ffe195; box-shadow: 0 2px 0 #dfa93c; font-size: 18px; }
.target { color: #829085; font-size: 23px; }
.moves-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.moves-stat strong { font-size: 35px; line-height: 1; }
.moves-stat.low { color: #bb523f; }
.progress-track { position: absolute; bottom: 0; left: 5px; right: 5px; height: 5px; background: #e7e6d9; border-radius: 10px; overflow: hidden; }
#progress { width: 0; height: 100%; background: #75a88a; border-radius: inherit; transition: width .35s ease; }
.play-area { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 36px 0 24px; min-height: 285px; }
.board { position: relative; flex: none; width: 100%; isolation: isolate; }
.room { position: absolute; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 5px; border-radius: 16px; background: #e5ead5; color: #83906b; transition: background .25s, color .25s; }
.room:nth-child(3n + 2) { background: #dce9e2; }
.room:nth-child(3n + 3) { background: #efe4c9; }
.room.bonus { background: #f9df99; color: #ad7326; }
.room.red { background: #f4b2a7; color: #a83e3b; }
.room-icon { font-size: clamp(20px, 6vw, 31px); font-weight: 900; line-height: 1; }
.room-value { font-size: 13px; font-weight: 800; }
.room.red .room-value { font-size: 10px; }
.room.closed { background: #91bfa1; color: #244e38; animation: room-close .5s cubic-bezier(.2,.8,.3,1.3); }
.room.closed.bonus { background: #f7ca5a; color: #82501e; }
.room.closed.red { background: #f7ca5a; color: #8b4433; }
.room.closed .room-icon { color: #fffaf0; text-shadow: 0 2px #50724c22; }
.wall { position: absolute; z-index: 3; border: 0; padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.wall::before { content: ''; display: block; flex-shrink: 0; border-radius: 10px; transition: background .15s; }
.wall.horizontal::before { width: 100%; height: 7px; background: repeating-linear-gradient(90deg, #a7b5a2 0 4px, transparent 4px 10px); }
.wall.vertical::before { height: 100%; width: 7px; background: repeating-linear-gradient(0deg, #a7b5a2 0 4px, transparent 4px 10px); }
.wall.placed { z-index: 4; }
.wall.placed::before { background: #476c5b; box-shadow: 0 3px 0 #2b493633; animation: wall-place .23s ease-out; }
.wall.horizontal.placed::before { height: 10px; width: 131.58%; }
.wall.vertical.placed::before { width: 10px; height: 131.58%; }
@media (hover: hover) { .wall:not(:disabled):hover::before { background: #88a992; } }
.joint { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #779079; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; box-shadow: 0 2px 0 #46634115; }
.reward-pop { position: absolute; z-index: 8; color: #835313; font-size: 26px; font-weight: 900; pointer-events: none; animation: reward-float 1s forwards; text-shadow: 0 2px #fffae9; }
.hint { min-height: 20px; font-size: 12px; color: #7e8677; margin: 29px 0 0; }
.inventory { display: flex; justify-content: center; padding: 4px 0 6px; }
.slots { display: flex; gap: 12px; }
.slots span { width: 53px; height: 53px; display: grid; place-items: center; border: 1.5px dashed #cbcbbb; border-radius: 15px; background: #edeadf66; color: #c1c4b5; font-size: 20px; }
dialog { border: 0; border-radius: 28px; background: #fffaf0; color: #304c45; padding: 28px; width: min(350px, calc(100% - 40px)); box-shadow: 0 22px 80px #253e3b30; }
dialog[open] { animation: dialog-enter .25s ease-out; }
dialog::backdrop { background: #283e3659; backdrop-filter: blur(4px); }
.result-dialog { text-align: center; }
.result-icon { border-radius: 24px; width: 74px; height: 74px; display: grid; place-items: center; background: #f7d470; color: #9e6b20; font-size: 40px; margin: 0 auto 20px; }
h1 { font-size: 27px; letter-spacing: -1px; margin: 10px 0; }
#result-detail { font-size: 14px; color: #728173; margin: 12px 0 25px; line-height: 1.6; }
.primary-button { min-height: 51px; width: 100%; background: #416d58; color: #fffaf0; border: 0; border-radius: 15px; font-weight: 800; padding: 13px; box-shadow: 0 4px 0 #284b3c; }
.text-button { border: 0; background: transparent; min-height: 44px; margin-top: 13px; font-size: 13px; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
h2 { margin: 0; font-size: 23px; }
.level-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.level-list button { min-height: 44px; border: 0; background: #e4ecdc; border-radius: 11px; font-weight: 800; }
.level-list button.current { background: #416d58; color: white; }
.level-list button:disabled { background: #eeece4; color: #b4b7aa; }
.small-note { font-size: 12px; text-align: center; color: #798574; margin: 20px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes wall-place { 0% { transform: scale(.7); opacity: .5; } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes room-close { 0% { transform: scale(.9); } 60% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes reward-float { 0% { opacity: 0; transform: translate(-50%, 0) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -12px) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -65px); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: none; } }
@media (min-width: 600px) { .game-shell { min-height: min(900px, 100svh); } }
@media (max-height: 700px) { .scoreboard { padding-top: 16px; } .play-area { padding-top: 24px; padding-bottom: 12px; } .hint { margin-top: 20px; } .slots span { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
@media (max-height: 600px) { .game-shell { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); } .scoreboard { padding-top: 10px; padding-bottom: 15px; } .play-area { padding-top: 18px; padding-bottom: 8px; } .hint { margin-top: 14px; } }