:root{--cream: #f6ead7;--paper: #fff6e8;--ink: #3a2a1c;--muted: #7a6452;--sage: #3f7a52;--sage-deep: #2c5a3c;--terracotta: #d86a3a;--gold: #e8b84a;--sky: #8ec8dc;--shadow: 0 10px 30px rgba(80, 48, 20, .18);--radius: 22px;font-family:Trebuchet MS,Segoe UI,Nunito,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 600px at 20% -10%,#ffe9bf,transparent 50%),radial-gradient(900px 500px at 100% 0%,#cde8c4,transparent 45%),var(--cream);color:var(--ink)}button,input{font:inherit}.landing{min-height:100%;display:grid;place-items:center;padding:32px 18px 48px}.landing-card{width:min(520px,100%);background:var(--paper);border-radius:32px;box-shadow:var(--shadow);padding:36px 32px 28px;border:3px solid #f0d7b0}.landing h1{margin:0 0 8px;font-size:42px;letter-spacing:-.04em}.landing p.lede{color:var(--muted);font-size:18px;line-height:1.45;margin:0 0 24px}.form{display:grid;gap:12px}.form label{font-size:13px;font-weight:700;color:var(--sage-deep)}.form input{width:100%;border:2px solid #ecd7b6;background:#fffdf8;border-radius:14px;padding:12px 14px;outline:none}.form input:focus{border-color:var(--sage)}.btn{border:0;border-radius:999px;padding:14px 22px;font-weight:800;cursor:pointer;transition:transform .12s ease,filter .12s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px) scale(.98)}.btn-primary{background:var(--terracotta);color:#fff;box-shadow:0 8px #a84b24}.btn-gold{background:var(--gold);color:#4a3208;box-shadow:0 8px #c4922a}.btn-sage{background:var(--sage);color:#fff;box-shadow:0 8px #2a5538}.btn-ghost{background:transparent;color:var(--sage-deep)}.muted{color:var(--muted);font-size:14px;text-align:center}.error{color:#b13322;font-weight:700;min-height:1.2em}.row-links{display:flex;justify-content:space-between;gap:8px;margin-top:8px}.row-links a,.row-links button{color:var(--sage-deep);font-weight:700}.game-shell{height:100%;position:relative;overflow:hidden;background:#7fb7c9}.game-shell canvas{display:block}.hud{position:absolute;inset:0;pointer-events:none;z-index:4}.hud>*{pointer-events:auto}.topbar{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.pills{display:flex;flex-wrap:wrap;gap:8px}.pill{background:#fff8e8eb;border-radius:999px;padding:8px 14px;font-weight:800;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;border:2px solid #f0d7b0}.xp-wrap{min-width:160px}.xp-bar{height:10px;background:#ead9c0;border-radius:99px;overflow:hidden;margin-top:6px}.xp-bar>span{display:block;height:100%;background:linear-gradient(90deg,#7bc47d,#e8b84a);width:0%;transition:width .4s ease}.tutorial{position:absolute;left:50%;bottom:22px;transform:translate(-50%);width:min(560px,calc(100% - 28px));background:#fff8e8f5;border-radius:24px;padding:16px 18px 14px;box-shadow:var(--shadow);border:3px solid #f0d7b0;animation:pop .45s ease}.tutorial h2{margin:0 0 4px;font-size:20px}.tutorial p{margin:0;color:var(--muted)}.panel{position:absolute;right:14px;bottom:22px;width:min(340px,calc(100% - 28px));background:#fff8e8f5;border-radius:24px;padding:16px;box-shadow:var(--shadow);border:3px solid #f0d7b0;animation:pop .3s ease}.panel h3{margin:0 0 6px}.panel .actions{display:grid;gap:8px;margin-top:12px}.timer{font-weight:800;color:var(--terracotta)}.floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}.floater{position:absolute;left:50%;top:42%;font-weight:900;font-size:28px;color:#fff8dc;text-shadow:0 3px 0 #8a5a18;animation:floatUp 1.15s ease-out forwards}.loading{height:100%;display:grid;place-items:center;background:linear-gradient(#8ec8dc,#f6ead7)}.loading-card{text-align:center;animation:bob 1.6s ease-in-out infinite}.loading h1{margin:0;font-size:40px}.sound-toggle{width:46px;height:46px;border-radius:50%;border:2px solid #f0d7b0;background:#fff8e8eb;cursor:pointer;font-size:18px}.admin{max-width:1100px;margin:0 auto;padding:24px}.admin table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:16px;overflow:hidden}.admin th,.admin td{padding:8px 10px;text-align:left;border-bottom:1px solid #f0d7b0;font-size:13px}@keyframes pop{0%{transform:translate(-50%) translateY(12px) scale(.96);opacity:0}to{transform:translate(-50%) translateY(0) scale(1);opacity:1}}.panel{animation-name:popPanel}@keyframes popPanel{0%{transform:translateY(12px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes floatUp{0%{transform:translate(-50%,20px) scale(.7);opacity:0}20%{opacity:1}to{transform:translate(-50%,-80px) scale(1.1);opacity:0}}@keyframes bob{50%{transform:translateY(-8px)}}@media(max-width:720px){.landing h1{font-size:32px}.topbar{flex-direction:column}.panel{left:14px;width:auto}}