* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:#fff; background:#0b1f12; display:flex; flex-direction:column; overflow:hidden; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.5rem .8rem; flex:0 0 auto; }
.right { display:flex; gap:.5rem; }
.pill { font:inherit; font-weight:600; color:#14351f; background:rgba(255,255,255,.9); border:0; border-radius:999px; padding:.4rem 1rem; text-decoration:none; cursor:pointer; }
.rotate-note { display:none; font-size:.85rem; color:#ffd54f; }
.stage { position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 .5rem .5rem; }
canvas { display:block; width:min(100%, calc((100vh - 70px) * 2)); height:auto; aspect-ratio:2/1; border-radius:18px; box-shadow:0 10px 40px rgba(0,0,0,.6); cursor:crosshair; touch-action:none; user-select:none; -webkit-user-select:none; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(5,20,10,.45); padding:1rem; animation:fade .4s; }
.overlay[hidden] { display:none; }
@keyframes fade { from { opacity:0; } }
.modal { background:linear-gradient(160deg,rgba(46,125,50,.96),rgba(20,53,31,.96)); border:2px solid rgba(255,255,255,.25); border-radius:24px; padding:1.4rem 1.8rem; max-width:520px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:pop .45s cubic-bezier(.2,1.4,.4,1); }
.modal.wide { max-width:760px; }
@keyframes pop { from { transform:scale(.8); opacity:0; } }
.modal h1, .modal h2 { margin:.1rem 0 .4rem; }
.logo { font-size:clamp(2.4rem,7vw,4rem); letter-spacing:-.02em; background:linear-gradient(180deg,#fff,#a5d6a7); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.modal p { line-height:1.5; margin:.3rem 0 1rem; color:#e8f5e9; }
.modes { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.8rem; }
.mode { font:inherit; color:#fff; text-align:left; background:rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.25); border-radius:18px; padding:1rem 1.1rem; cursor:pointer; display:flex; flex-direction:column; gap:.35rem; transition:transform .15s, border-color .15s, background .15s; }
.mode:hover, .mode:focus-visible { transform:translateY(-4px); border-color:#ffe066; background:rgba(0,0,0,.35); }
.mode b { font-size:1.2rem; }
.mode em { font-style:normal; color:#ffe066; font-weight:700; font-size:.9rem; }
.mode span { font-size:.85rem; color:#d7ead8; line-height:1.4; }
kbd { background:#fff; color:#14351f; border-radius:5px; padding:0 .4rem; font-weight:700; }
.go { font:inherit; font-weight:800; font-size:1.3rem; color:#14351f; background:linear-gradient(180deg,#ffe066,#ffb300); border:0; border-radius:999px; padding:.7rem 3rem; cursor:pointer; box-shadow:0 6px 0 #c67c00; }
.go:active { transform:translateY(4px); box-shadow:0 2px 0 #c67c00; }
@media (orientation:portrait) { .rotate-note { display:block; } canvas { width:100%; } .stage { align-items:flex-start; } }
@media (max-width:700px) { .modes { grid-template-columns:1fr; } }
@media (max-height:480px) { .modal { padding:.6rem 1rem; } .modal p { margin:.2rem 0 .5rem; font-size:.85rem; } .mode { padding:.5rem .8rem; } .mode span { font-size:.75rem; } .modes { margin-top:.3rem; gap:.6rem; } .logo { font-size:2.2rem; } }

.levels { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.8rem; margin-top:.8rem; max-height:60vh; overflow:auto; padding:.2rem; }
.level { font:inherit; color:#fff; text-align:left; background:rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.25); border-radius:16px; padding:.5rem; cursor:pointer; display:flex; flex-direction:column; gap:.25rem; transition:transform .15s, border-color .15s; }
.level:hover, .level:focus-visible { transform:translateY(-4px); border-color:#ffe066; }
.level canvas { width:100%; height:auto; border-radius:10px; display:block; cursor:pointer; box-shadow:none; aspect-ratio:2/1; }
.level b { font-size:.95rem; } .level span { font-size:.78rem; color:#d7ead8; line-height:1.3; }
.btns { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.go[hidden] { display:none; }
.go.alt { background:linear-gradient(180deg,#fff,#cfd8dc); box-shadow:0 6px 0 #90a4ae; font-size:1.05rem; padding:.7rem 1.6rem; }
@media (max-height:480px) { .levels { max-height:55vh; } .level span { display:none; } }
.modal.wide { width:min(94vw,780px); } .levels { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

.extra { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:.6rem 0; }
.code { display:block; font-size:2.8rem; font-weight:900; letter-spacing:.3em; margin:.4rem 0; color:#ffe066; text-shadow:0 3px 0 #b71c1c; }
.code-input { font:inherit; font-size:1.6rem; font-weight:800; letter-spacing:.3em; text-transform:uppercase; text-align:center; width:7.5em; padding:.45rem; border-radius:14px; border:2px solid rgba(255,255,255,.4); background:rgba(0,0,0,.3); color:#fff; }
.err { color:#ff9e9e; font-weight:700; width:100%; text-align:center; margin:0; }
.toast { position:fixed; top:.6rem; left:50%; transform:translateX(-50%); z-index:30; background:#ffb300; color:#3b2a00; font-weight:700; padding:.5rem 1.1rem; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.4); }
.toast[hidden] { display:none; }
.btns .go { font-size:1.1rem; padding:.65rem 1.8rem; }