:root{color:#f5f0e6;background:#1e1b4b;font-family:PingFang SC,Hiragino Sans GB,Noto Sans SC,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}.home{max-width:28rem;margin:0 auto;padding:2rem 1.25rem 3rem;display:flex;flex-direction:column;gap:1rem}.home h1{margin:0 0 .5rem;font-size:2.4rem;letter-spacing:.08em;text-align:center;color:#f97316}.home label,.home fieldset{display:flex;flex-direction:column;gap:.5rem;border:0;margin:0;padding:0;font-size:1rem}.avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}.avatars legend{padding:0 0 .5rem}.avatar{font-size:1.8rem;line-height:1;padding:.7rem;border:2px solid #4338ca;border-radius:1rem;background:#312e81;cursor:pointer}.avatar.selected,.avatar[aria-pressed=true]{border-color:#f97316;background:#3f3a8a}.home input{font:inherit;padding:.7rem .8rem;border-radius:.7rem;border:2px solid #4338ca;background:#0f0d2c;color:inherit}.home button[type=button]:not(.avatar){font:inherit;font-weight:600;padding:.85rem 1rem;border:0;border-radius:.9rem;background:#f97316;color:#1e1b4b;cursor:pointer}.error{margin:0;padding:.7rem .8rem;border-radius:.7rem;background:#7f1d1d;color:#fee2e2}.error-banner{position:sticky;top:0;z-index:20;margin:0;padding:.75rem 1rem;background:#7f1d1d;color:#fee2e2;text-align:center}.rejoining{margin:0;padding:4rem 1.25rem;text-align:center;font-size:1.2rem;color:#c4b5fd}.lobby{max-width:28rem;margin:0 auto;padding:2rem 1.25rem 3rem;display:flex;flex-direction:column;gap:1.25rem}.lobby-code{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.lobby-code p{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:.06em}.lobby-players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}.lobby-player{display:flex;align-items:center;gap:.55rem;padding:.65rem .75rem;border-radius:.9rem;background:#312e81}.lobby-avatar{font-size:1.6rem;line-height:1}.lobby-nick{flex:1;font-weight:600}.lobby-badge{font-size:.8rem;padding:.15rem .45rem;border-radius:999px;background:#f97316;color:#1e1b4b}.lobby-badge.off{background:#64748b;color:#f8fafc}.lobby-seconds{display:flex;gap:.5rem}.lobby-seconds button,.lobby button[type=button]:not(.kick):not(.start):not(.leave){font:inherit;font-weight:600;padding:.65rem .85rem;border:2px solid #4338ca;border-radius:.8rem;background:#312e81;color:inherit;cursor:pointer}.lobby-seconds button.selected,.lobby-seconds button[aria-pressed=true]{border-color:#f97316;background:#3f3a8a}.lobby .kick{font:inherit;font-size:.85rem;padding:.3rem .55rem;border:0;border-radius:.55rem;background:#7f1d1d;color:#fee2e2;cursor:pointer}.lobby .start{font:inherit;font-weight:700;padding:.85rem 1rem;border:0;border-radius:.9rem;background:#f97316;color:#1e1b4b;cursor:pointer}.lobby .start:disabled{opacity:.45;cursor:not-allowed}.lobby .leave{font:inherit;font-weight:600;padding:.65rem .85rem;border:2px solid #4338ca;border-radius:.8rem;background:transparent;color:inherit;cursor:pointer}.lobby-host{display:flex;flex-direction:column;gap:.75rem}.lobby-hint,.lobby-notice{margin:0}.lobby-notice{color:#c4b5fd;font-size:.9rem}.write{max-width:28rem;margin:0 auto;padding:2rem 1.25rem 3rem;display:flex;flex-direction:column;gap:1rem}.write h1{margin:0;font-size:1.7rem;text-align:center;color:#f97316}.write-timer{margin:0;text-align:center;font-size:1.6rem;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}.write-prompt{width:100%;max-height:16rem;object-fit:contain;border-radius:.9rem;background:#0f0d2c}.write textarea{font:inherit;min-height:8rem;padding:.8rem;border-radius:.7rem;border:2px solid #4338ca;background:#0f0d2c;color:inherit;resize:vertical}.write-count,.write-waiting{margin:0;text-align:right;color:#c4b5fd}.write-waiting{text-align:center;font-size:1.05rem}.write button[type=button]{font:inherit;font-weight:700;padding:.85rem 1rem;border:0;border-radius:.9rem;background:#f97316;color:#1e1b4b;cursor:pointer}.draw{max-width:56rem;margin:0 auto;padding:1.25rem 1.25rem 2rem;display:flex;flex-direction:column;gap:.75rem}.draw h1{margin:0;font-size:1.7rem;text-align:center;color:#f97316}.draw-prompt{margin:0;text-align:center;font-size:1.15rem}.draw-timer{margin:0;text-align:center;font-size:1.6rem;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}.draw-error{margin:0;text-align:center;padding:.7rem .8rem;border-radius:.7rem;background:#7f1d1d;color:#fee2e2}.draw-waiting{margin:0;text-align:center;color:#c4b5fd;font-size:1.05rem}.draw>button[type=button]{font:inherit;font-weight:700;padding:.85rem 1rem;border:0;border-radius:.9rem;background:#f97316;color:#1e1b4b;cursor:pointer}.draw>button[type=button]:disabled{opacity:.45;cursor:not-allowed}.board{display:flex;gap:.5rem;min-height:0}.board.disabled{opacity:.7}.board.disabled canvas{pointer-events:none}.tools{width:72px;display:flex;flex-direction:column;gap:.4rem;flex-shrink:0}.tools-colors{display:grid;grid-template-columns:1fr 1fr;gap:.25rem}.swatch{width:100%;aspect-ratio:1;border:2px solid #4338ca;border-radius:.4rem;padding:0;cursor:pointer}.swatch.selected,.tools button.selected,.tools button[aria-pressed=true]{border-color:#f97316;outline:2px solid #f97316}.tools-widths,.tools-actions{display:flex;flex-direction:column;gap:.25rem}.tools button{font:inherit;font-size:.72rem;font-weight:600;padding:.28rem .2rem;border:2px solid #4338ca;border-radius:.45rem;background:#312e81;color:inherit;cursor:pointer}.board-canvas{flex:1;min-width:0}.board-canvas canvas{width:100%;height:auto;display:block;background:#fff;border-radius:.7rem;touch-action:none;cursor:crosshair}@media(max-width:700px){.board{flex-direction:column}.board-canvas{order:1}.tools{order:2;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center}.tools-colors{display:flex;flex-wrap:wrap;width:100%}.swatch{width:1.6rem;height:1.6rem;aspect-ratio:auto}.tools-widths,.tools-actions{flex-direction:row;flex-wrap:wrap}.tools button{font-size:.8rem;padding:.4rem .55rem}}.album{max-width:32rem;margin:0 auto;padding:2rem 1.25rem 3rem;display:flex;flex-direction:column;gap:1.1rem}.album h1{margin:0;font-size:1.55rem;text-align:center;color:#f97316;letter-spacing:.04em}.album-dots{display:flex;justify-content:center;gap:.45rem}.album-dots .dot{width:.7rem;height:.7rem;border-radius:999px;background:#312e81;border:2px solid #4338ca}.album-dots .dot.filled{background:#f97316;border-color:#f97316}.album-page{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding:1.4rem 1.1rem 1.2rem;border-radius:1.3rem;background:#312e81}.album-avatar{margin:0;font-size:2.4rem;line-height:1}.album-text{margin:0;font-size:1.45rem;text-align:center;line-height:1.45;color:#f5f0e6}.album-blank{margin:0;font-size:1.45rem;color:#c4b5fd}.album-image{width:100%;max-height:18rem;object-fit:contain;border-radius:.9rem;background:#0f0d2c}.album-credit{margin:0;font-size:1.05rem;font-weight:600;color:#f97316}.album-nav{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.album-nav button{font:inherit;font-weight:700;padding:.85rem 1rem;border:0;border-radius:.9rem;background:#f97316;color:#1e1b4b;cursor:pointer}.album-waiting{margin:0;text-align:center;color:#c4b5fd;font-size:1.05rem}