:root{--bg:#fff7e7;--paper:#fffdf5;--panel:#ffeec3;--ink:#3f3a34;--muted:#8b806d;--line:#d8c59d;--mint:#8abf93;--rose:#e98575;--blue:#80bdd8;--yellow:#f2ca62;--purple:#b8a7e8;--shadow:#ccb995;--map:#fffaf0}
[data-theme="dark"]{--bg:#172735;--paper:#203747;--panel:#2d4650;--ink:#fff0c9;--muted:#b1b6a7;--line:#566f73;--mint:#8fd2a4;--rose:#ed927e;--blue:#80c7df;--yellow:#f2ce68;--purple:#b8a7e8;--shadow:#0a151d;--map:#1e3440}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:12px ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif}body{display:flex;justify-content:center}button,a,select{-webkit-tap-highlight-color:transparent}.page{width:min(620px,100%);padding:14px 14px max(22px,env(safe-area-inset-bottom))}.topbar{min-height:60px;border-bottom:2px dashed var(--line);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:12px}.topbar>a,.topbar button{min-height:44px;border:0;background:none;color:var(--muted);font:900 9px inherit;letter-spacing:.07em;text-decoration:none;cursor:pointer}.brand{text-align:center;min-width:0}.brand h1{margin:0;font-size:clamp(18px,4vw,27px);font-weight:950;letter-spacing:.08em;white-space:nowrap;transform:rotate(-1deg)}.brand span{display:block;margin-top:5px;color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.07em;white-space:nowrap}.header-actions{display:flex;gap:10px}.toolbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.tool-select,.stat-pill{min-width:0;padding:8px;border:2px solid var(--ink);border-radius:11px 8px 13px 9px;background:var(--panel);box-shadow:2px 3px var(--shadow);display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:8px;font-weight:950;letter-spacing:.08em}.tool-select select{border:0;background:transparent;color:var(--ink);font:950 10px inherit;outline:none}.stat-pill b{font-size:13px;color:var(--ink)}.stat-pill:nth-child(3) b{color:var(--rose)}.stat-pill:nth-child(4) b{color:var(--mint)}.frame{position:relative;width:min(100%,480px);aspect-ratio:1;margin:auto;padding:7px;border:3px solid var(--ink);border-radius:22px 17px 24px 18px;background:var(--paper);box-shadow:7px 8px var(--shadow);transform:rotate(.15deg)}.frame:before{content:"RIBBON WORKS";position:absolute;right:15px;top:-10px;padding:3px 7px;border:2px solid var(--ink);border-radius:4px;background:var(--yellow);font-size:7px;font-weight:950;letter-spacing:.07em;transform:rotate(4deg);z-index:1}.frame canvas{display:block;width:100%;height:100%;border-radius:13px 10px 16px 11px;background:var(--map);touch-action:none;user-select:none;-webkit-user-select:none}.overlay{position:absolute;inset:7px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:color-mix(in srgb,var(--paper) 94%,transparent);text-align:center;border-radius:13px 10px 16px 11px}.overlay.hide{display:none}.win-mark{color:var(--yellow);font-size:46px}.overlay b{font-size:clamp(22px,6vw,36px);letter-spacing:.06em}.overlay span{color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.07em}.overlay button{min-height:46px;padding:12px 18px;border:2px solid var(--ink);border-radius:13px 10px 15px 11px;background:var(--yellow);color:var(--ink);box-shadow:3px 4px var(--ink);font:950 10px inherit;letter-spacing:.08em;cursor:pointer}.overlay button:hover{background:var(--mint)}footer{margin-top:13px;padding-top:11px;border-top:2px dashed var(--line);color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.06em;text-align:center;line-height:1.5}.levels-overlay{position:fixed;inset:0;z-index:100;display:none;padding:16px;background:#172735dd;overflow:auto}.levels-overlay.show{display:flex;justify-content:center;align-items:flex-start}.levels-dialog{width:min(580px,100%);margin:auto;padding:14px;border:3px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:7px 8px var(--shadow)}.levels-header{min-height:44px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px dashed var(--line);margin-bottom:12px}.levels-header b{font-size:12px;letter-spacing:.1em}.levels-header span{display:block;margin-top:3px;color:var(--muted);font-size:8px}.levels-header button{border:0;background:none;color:var(--muted);font:900 9px inherit;cursor:pointer}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.level-card{min-height:72px;border:2px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);padding:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer}.level-card.current{border-color:var(--rose)}.level-card.completed{border-left-color:var(--mint);background:color-mix(in srgb,var(--mint) 35%,var(--panel))}.level-card:disabled{opacity:.4;cursor:not-allowed}.level-num{color:var(--muted);font-size:8px}.level-status{font-size:8px;color:var(--mint)}@media(max-width:520px){.page{padding:10px 10px max(18px,env(safe-area-inset-bottom))}.topbar{min-height:52px}.brand h1{font-size:16px}.brand span{display:none}.header-actions{gap:5px}.toolbar{grid-template-columns:repeat(2,1fr)}.frame{padding:5px;border-width:2px;border-radius:18px 14px 21px 15px}.overlay{inset:5px}.level-grid{grid-template-columns:repeat(3,1fr)}footer{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}