:root{--bg:#e9e4d6;--card:#fbf8ef;--ink:#2b3a55;--muted:#6b7690;--accent:#d9534f;--line:#c9dcef;--ok:#3f8f5a;--shadow:0 6px 24px #2b3a5533;--font:"Comic Sans MS", "Chalkboard SE", "Marker Felt", system-ui, sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#1d2333;--card:#fbf8ef;--shadow:0 6px 28px #00000080}.page-title,.page-sub{color:#f3efe3}}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);min-height:100%;color:var(--ink);font-family:var(--font)}main{max-width:900px;margin:0 auto;padding:24px 16px 48px}.page-title{text-align:center;font-size:clamp(28px,6vw,40px)}.page-sub{text-align:center;color:var(--muted);margin:4px 0 20px}.layout{grid-template-columns:minmax(0,480px) minmax(0,1fr);justify-content:center;align-items:start;gap:20px;display:grid}@media (max-width:760px){.layout{grid-template-columns:minmax(0,480px)}}.canvas-wrap canvas{aspect-ratio:3/4;width:100%;height:auto;box-shadow:var(--shadow);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:6px;display:block}.sidebar{flex-direction:column;gap:16px;display:flex}.card{background:var(--card);box-shadow:var(--shadow);background-image:repeating-linear-gradient(to bottom, transparent 0 27px, var(--line) 27px 28px);background-position:0 44px;border-radius:6px;padding:16px}.card h2{margin-bottom:10px;font-size:20px}.leaderboard{font-size:15px;line-height:28px;list-style:none}.leaderboard li{grid-template-columns:2ch 1fr auto;gap:10px;display:grid}.leaderboard .rank{color:var(--muted);text-align:right}.leaderboard .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.leaderboard .mine{color:var(--accent);font-weight:700}.muted{color:var(--muted);font-size:14px;line-height:28px}.score-form{flex-direction:column;gap:8px;display:flex}.score-form .row{gap:8px;display:flex}.score-form input{min-width:0;font:inherit;border:2px solid var(--ink);color:var(--ink);background:#fff;border-radius:6px;flex:1;padding:6px 10px}button{font:inherit;border:2px solid var(--ink);background:var(--accent);color:#fff;cursor:pointer;border-radius:6px;padding:6px 14px;font-weight:700}button:disabled{opacity:.5;cursor:default}.error{color:var(--accent);font-size:14px}.success{color:var(--ok);font-size:15px;line-height:28px}.controls{font-size:14px;line-height:28px}.controls kbd{border:1px solid var(--ink);background:#fff;border-bottom-width:2px;border-radius:4px;padding:0 5px;font-family:inherit}
