:root { color-scheme:light; font-family:"Avenir Next",Avenir,system-ui,sans-serif; color:#344d43; background:#f7f5ed; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(ellipse at 85% 0%,#eaf0dfaa,transparent 50%),#f7f5ed; min-height:100vh; }
main { max-width:1400px; padding:24px 42px 18px; margin:auto; } .page-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:20px; }
.eyebrow { font-size:12px; font-weight:750; letter-spacing:2.5px; color:#61846c; } h1 { margin:8px 0 0; font:500 clamp(28px,3vw,42px)/1.15 Georgia,serif; letter-spacing:-1px; }
.header-note { text-align:right; font-size:14px; color:#63836d; } .header-note span { display:block; color:#82907b; font-size:12px; margin-top:5px; }
.game-card { border-radius:22px; overflow:hidden; border:1px solid #dbe3ce; box-shadow:0 18px 65px -38px #46624366; background:#fcfcf6; }.scene { position:relative; }
canvas { display:block; width:100%; height:auto; aspect-ratio:1200/620; outline:none; }canvas:focus-visible { outline:3px solid #6a9279; outline-offset:-4px; }
.hud { position:absolute; top:16px; left:18px; right:18px; display:flex; gap:10px; align-items:stretch; pointer-events:none; }.hud>div { background:#fffdf1ed; border:1px solid #ffffff88; border-radius:13px; padding:10px 13px; box-shadow:0 3px 10px #59744309; }.hud small,.energy-panel label { display:block; font-size:10px; letter-spacing:1.2px; color:#789074; font-weight:750; margin-bottom:4px; }
.level-chip { display:flex; align-items:center; gap:10px; }.level-chip>span { font:22px Georgia,serif; color:#8ca472; }.level-chip strong { font-size:13px; font-weight:650; }.collect-panel { flex:1; }#counters { display:flex; gap:16px; }#counters span { font-size:14px; white-space:nowrap; }#counters .met { color:#44744d; }.bag-panel div { font-size:14px; white-space:nowrap; }.energy-panel { width:140px; }.energy-panel>span { font-size:10px; color:#7b8975; }
progress { display:block; width:100%; height:8px; margin:6px 0; appearance:none; border:0; border-radius:20px; background:#e4e9d5; overflow:hidden; }progress::-webkit-progress-bar { background:#e4e9d5; }progress::-webkit-progress-value { background:#94af6d; border-radius:20px; }progress::-moz-progress-bar { background:#94af6d; border-radius:20px; }
.status-row { min-height:40px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 22px; border-bottom:1px solid #e8ebde; font-size:13px; color:#5c775e; }#key-status { color:#a1803c; flex-shrink:0; font-size:12px; }.game-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; gap:12px; flex-wrap:wrap; }.instructions { display:flex; align-items:center; gap:14px; font-size:11px; color:#70816c; flex-wrap:wrap; }.instructions>span { display:flex; align-items:center; gap:4px; }kbd { display:inline-flex; align-items:center; justify-content:center; min-width:23px; height:25px; padding:0 5px; border:1px solid #dce3d5; border-bottom-width:3px; border-radius:6px; background:#f5f7ef; color:#56735c; font:600 11px inherit; }
button { font:inherit; cursor:pointer; border:0; }button:focus-visible { outline:3px solid #648974; outline-offset:4px; }button:disabled { cursor:default; }.tools { display:flex; gap:4px; }.tools button { background:transparent; padding:8px; border-radius:8px; color:#6a8066; font-size:11px; }.tools button:hover { background:#edf1e5; }.below-game { display:flex; justify-content:space-between; gap:12px; padding:13px 3px; font-size:11px; color:#8d9a82; }
.overlay { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; background:#d9e6ce55; backdrop-filter:blur(3px); padding:20px; }.panel { width:min(760px,95%); background:#fffdf2f5; border:1px solid #fff; padding:28px 34px; border-radius:23px; text-align:center; box-shadow:0 12px 45px #425a3520; }.panel.narrow { width:460px; }.panel .eyebrow { font-size:11px; letter-spacing:2px; }.panel h2 { font:500 34px/1.15 Georgia,serif; margin:10px 0; }.panel p { color:#75886e; font-size:14px; line-height:1.6; margin:12px 0 22px; }.level-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:25px 0 12px; text-align:left; }.level-card { position:relative; display:flex; flex-direction:column; padding:22px; min-height:165px; border-radius:16px; background:#eaf0dc; color:#425e49; text-align:left; border:1px solid #d6e0c5; transition:transform .15s,background .15s; }.level-card:hover:not(:disabled) { transform:translateY(-3px); background:#e0eaca; }.level-card:disabled { background:#f0f0e6; color:#939c87; border-color:#e5e6da; }.level-card .number { font:30px Georgia,serif; color:#8fa56f; margin-bottom:15px; }.level-card strong { font-size:17px; font-weight:650; }.level-card small { font-size:12px; margin-top:8px; }.level-card .seal { position:absolute; top:23px; right:20px; font-size:22px; color:#b19746; }.panel .note { font-size:12px; margin:15px 0 0; }.button-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }.button-row button,.primary { background:#6c8d6b; color:#fffef4; border-radius:10px; padding:12px 19px; font-size:14px; }.button-row .secondary { background:#eaf0df; color:#607b5c; }.button-row button:hover { filter:brightness(.95); }.stats { display:flex; gap:25px; justify-content:center; margin:20px 0 24px; }.stats>div { font-size:12px; color:#7b8a70; }.stats strong { display:block; font:27px Georgia,serif; color:#567350; margin-bottom:5px; }.badge { display:inline-block; color:#9b7d36; background:#f5e9bc; border:1px solid #e9d78e; border-radius:25px; padding:9px 16px; font-size:13px; margin:8px 0; }
.loading { position:absolute; inset:0; background:#e7efdb; display:grid; place-items:center; color:#6b886d; font-size:16px; }[hidden] { display:none!important; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:950px) { main { padding:18px; }.header-note { display:none; }.hud { gap:5px; top:8px; left:8px; right:8px; }.hud>div { padding:7px 9px; }.level-chip>span { display:none; }.level-chip strong { font-size:11px; }#counters { gap:7px; }#counters span { font-size:12px; }.bag-panel div { font-size:12px; }.energy-panel { width:100px; }.hud small,.energy-panel label { font-size:8px; }.panel { padding:20px; }.panel h2 { font-size:28px; }.level-cards { margin:15px 0 5px; gap:12px; }.level-card { min-height:125px; padding:14px; }.level-card .number { margin-bottom:8px; font-size:23px; }.level-card strong { font-size:14px; }.panel p { margin:8px 0 12px; font-size:12px; }.instructions { gap:9px; }.status-row { font-size:11px; padding:9px 12px; }.below-game { font-size:10px; } }