:root{--bg: #080a0d;--bg-1: #0d1014;--bg-2: #13171c;--bg-3: #1b2128;--fg: #ffffff;--fg-muted: #b5bdc7;--fg-subtle: #737d89;--cyan: #6bd1e0;--magenta: #e040b8;--green: #3fc763;--blue: #5964d3;--white: #ffffff;--red: #ff6060;--orange: #ffa25c;--yellow: #f8ff5c;--teal: #2ecbb4;--purple: #d74bec;--amber: #ffcc00;--lime: #a8e040;--emerald: #28c878;--pink: #ff64b5;--cyan-dim: #3d8c9a;--magenta-dim: #a82888;--green-dim: #2d8a42;--blue-dim: #3e479e;--red-dim: #cc3a3a;--orange-dim: #cc6a28;--yellow-dim: #9c9e00;--teal-dim: #1e8a78;--purple-dim: #9e2cb8;--amber-dim: #b89000;--lime-dim: #609800;--emerald-dim: #1a9055;--pink-dim: #cc3d88;--surface-cyan: rgba(107, 209, 224, .12);--surface-magenta: rgba(224, 64, 184, .12);--surface-green: rgba(63, 199, 99, .12);--surface-blue: rgba(89, 100, 211, .12);--surface-red: rgba(255, 96, 96, .12);--surface-orange: rgba(255, 162, 92, .12);--surface-yellow: rgba(248, 255, 92, .1);--surface-teal: rgba( 46, 203, 180, .12);--surface-purple: rgba(215, 75, 236, .12);--surface-amber: rgba(255, 204, 0, .12);--surface-lime: rgba(168, 224, 64, .1);--surface-emerald: rgba(40, 200, 120, .12);--surface-pink: rgba(255, 100, 181, .12);--color-primary: var(--cyan);--color-secondary: var(--magenta);--color-success: var(--green);--color-info: var(--blue);--color-danger: var(--red);--color-warning: var(--orange);--color-caution: var(--yellow);--grad-primary: linear-gradient(135deg, var(--cyan), var(--purple));--grad-alt: linear-gradient(135deg, var(--magenta), var(--orange));--grad-rainbow: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple), var(--magenta));--grad-ocean: linear-gradient(135deg, var(--blue), var(--cyan), var(--emerald));--grad-aurora: linear-gradient(135deg, var(--green), var(--teal), var(--blue));--grad-forest: linear-gradient(135deg, var(--lime), var(--green), var(--emerald));--grad-fire: linear-gradient(135deg, var(--red), var(--orange), var(--yellow));--grad-sunset: linear-gradient(135deg, var(--orange), var(--magenta), var(--purple));--grad-neon: linear-gradient(135deg, var(--cyan), var(--magenta));--grad-cold: linear-gradient(135deg, var(--blue), var(--purple), var(--cyan));--grad-warm: linear-gradient(135deg, var(--amber), var(--orange), var(--red));--font-display: "Inter", sans-serif;--font-ui: "Inter", sans-serif;--font-body: "SF Pro", sans-serif;--font-label: "Helvetica Neue", sans-serif;--font-accent: "DM Sans", sans-serif;--font-tag: "Switzer", sans-serif;--font-ja: "Hiragino Sans", sans-serif;--font-ja-display: "Noto Sans JP", sans-serif;--font-mono: "Fira Code", monospace;--font-math: "CM Unicode", serif;--font-prose: "CM Unicode", serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.75rem;--font-size-2xl: 2.5rem;--font-size-3xl: 4rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--font-weight-black: 900;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.25rem;--sp-6: 1.5rem;--sp-8: 2rem;--sp-12: 3rem;--sp-16: 4rem;--shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.18);--shadow-md: 0 8px 24px rgba(0,0,0,.32);--shadow-lg: 0 18px 48px rgba(0,0,0,.42);--radius: 8px;--border-color: #303944;--border-strong: #465363;--border: 1px solid var(--border-color);--border-accent: 1px solid var(--cyan);--surface-interactive: rgba(107, 209, 224, .18);--surface-interactive-hover: rgba(107, 209, 224, .32);--surface-neutral-hover: rgba(255, 255, 255, .05);--surface-highlight: rgba(255, 255, 255, .12);--surface-noise: #ffffff;--scrim: rgba(0, 0, 0, .7);--on-accent: #000000;--focus-ring: 0 0 0 3px rgba(107, 209, 224, .35)}.select{appearance:none;width:100%;padding:var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-4);background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center;border:var(--border);border-radius:var(--radius);color:var(--fg);font-family:var(--font-ui);font-size:var(--font-size-md);cursor:pointer;outline:none;transition:border-color .15s}.select:focus{border-color:var(--cyan)}.checkbox,.radio{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-ui);font-size:var(--font-size-sm);color:var(--fg);cursor:pointer}.checkbox input[type=checkbox],.radio input[type=radio]{appearance:none;width:16px;height:16px;border:var(--border);border-radius:2px;background:var(--bg-2);cursor:pointer;transition:border-color .15s,background .15s;flex-shrink:0}.checkbox input[type=checkbox]:focus-visible,.radio input[type=radio]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;box-shadow:var(--focus-ring)}.radio input[type=radio]{border-radius:50%}.checkbox input[type=checkbox]:checked,.radio input[type=radio]:checked{background:var(--cyan);border-color:var(--cyan)}.toggle{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-ui);font-size:var(--font-size-sm);cursor:pointer}.toggle-track{width:36px;height:20px;background:var(--bg-3);border:var(--border);border-radius:999px;position:relative;transition:background .15s,border-color .15s;flex-shrink:0}.toggle-track:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--fg-muted);border-radius:50%;transition:transform .15s,background .15s}.toggle input:checked+.toggle-track{background:var(--cyan);border-color:var(--cyan)}.toggle input:checked+.toggle-track:after{transform:translate(16px);background:var(--bg)}.toggle input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.toggle input:focus-visible+.toggle-track{outline:2px solid var(--cyan);outline-offset:2px;box-shadow:var(--focus-ring)}:root{--void: #0b0c14;--panel: #12141f;--panel-2: #181b2b;--line: #262a3d;--text: #d9deef;--muted: #7b81a0;--accent: var(--cyan, #6bd1e0);--deny: var(--red, #ff6060)}[hidden]{display:none!important}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:radial-gradient(1100px 700px at 30% -10%,#131629 0%,transparent 60%),var(--void);color:var(--text);font-family:var(--font-ja, "Hiragino Sans", sans-serif);-webkit-text-size-adjust:100%}body{min-height:100%}*{-webkit-tap-highlight-color:transparent}body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}canvas{touch-action:none}button,label{touch-action:manipulation}.app{height:100dvh;min-height:560px;display:grid;grid-template-columns:minmax(360px,1fr) clamp(380px,32vw,460px);gap:clamp(14px,2vw,28px);padding:clamp(12px,2vw,24px)}.board-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0}.board-card{padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px #00000073}.board-wrap{position:relative;width:min(calc(100dvh - 150px),calc(100vw - 560px),720px);aspect-ratio:1}#screen{width:100%;height:100%;image-rendering:pixelated;background:#000;cursor:crosshair;display:block}#screenOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#screen.locked{cursor:not-allowed}.transport{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.transport .mini-toggle{height:34px;padding:0 8px;border:2px solid var(--line);background:var(--panel);box-shadow:2px 2px #0000008c;color:var(--muted)}.transport button{width:46px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font-size:15px;cursor:pointer}.transport button:hover{border-color:var(--muted)}.transport button.on{border-color:var(--accent);color:var(--accent)}.transport button:disabled{opacity:.45;cursor:default}.apply-toggle{justify-content:flex-start;margin:2px 0 8px;color:var(--muted)}.side{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto}.side.locked{opacity:.72}.side.locked #sheet,.side.locked #draftCanvas,#editorPanel.locked button,#editorPanel.locked input{pointer-events:none}.side.locked #sheet,.side.locked #draftCanvas{cursor:not-allowed}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}.panel h2{margin:0 0 2px;font-family:var(--font-ja-display, "Noto Sans JP", sans-serif);font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--accent)}.micro{margin:2px 0 10px;font-size:11px;line-height:1.6;color:var(--muted)}.add{margin-top:10px;width:100%;padding:7px 0;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--muted);font-family:var(--font-ja, sans-serif);font-size:12px;cursor:pointer}.add:hover{border-color:var(--accent);color:var(--accent)}.editor-row{display:flex;gap:10px;align-items:flex-start}#draftCanvas{width:136px;height:136px;image-rendering:pixelated;background:#0a0b12;border:1px solid var(--line);border-radius:6px;cursor:crosshair;flex:none}.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.chips button{min-width:24px;height:22px;padding:0 7px;border:1px solid var(--line);border-radius:5px;background:var(--panel-2);color:var(--muted);font-size:12px;cursor:pointer}.chips button.on{border-color:var(--text);color:var(--text)}.chips button.swatch{min-width:22px;padding:0}.chips button.swatch.on{outline:2px solid var(--text);outline-offset:1px;border-color:transparent}.shake{animation:shake .28s linear}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}@media(prefers-reduced-motion:reduce){.shake{animation:none}}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#editNext canvas{width:14px;height:14px;image-rendering:pixelated;background:#0a0b12;border-radius:2px;display:block}#editNext button{height:24px}.sheet-wrap{position:relative;width:100%;aspect-ratio:1}#sheet{width:100%;height:100%;image-rendering:pixelated;background:#000;cursor:pointer;display:block;border-radius:6px}#sheetOverlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.add.danger:hover{border-color:var(--deny);color:var(--deny)}.px-icon{width:16px;height:16px;image-rendering:pixelated;display:block;margin:0 auto}.editor-row>div:last-child{flex:1;min-width:110px}.editor-row{flex-direction:column;gap:8px}.editor-actions{display:flex;gap:6px}.editor-actions .add{flex:1}.panel,.board-card,.transport button,.chips button,.add,#dirPad button,#screen,#sheet,#draftCanvas{border-radius:0!important}.panel,.board-card{border:2px solid var(--line);box-shadow:4px 4px #0000008c}.transport button,.chips button,.add,#dirPad button{border-width:2px;box-shadow:2px 2px #0000008c}.transport button:active,.chips button:active,.add:active,#dirPad button:active{transform:translate(2px,2px);box-shadow:none}.chips button.swatch.on{outline-width:2px;outline-offset:0}#screen,#sheet{border:2px solid var(--line)}#draftCanvas{border-width:2px}html,body{background:var(--void)}.editor-top{display:flex;gap:10px;align-items:flex-start;justify-content:center}#dirPad{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:3px}#dirPad button{border:2px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:13px;cursor:pointer;padding:0;box-shadow:2px 2px #0000008c}#dirPad button.on{border-color:var(--accent);color:var(--accent);background:#6bd1e014}#dirPad button:active{transform:translate(2px,2px);box-shadow:none}.sheet-wrap{width:min(100%,clamp(272px,calc(100dvh - 440px),400px));margin:0 auto}@media(max-height:900px){.panel{padding:10px}.panel .micro{display:none}.side{gap:10px}#draftCanvas{width:96px;height:96px}#dirPad{grid-template-columns:repeat(3,29px);grid-template-rows:repeat(3,29px)}.chips button{height:20px;font-size:11px}.chips button.swatch{min-width:20px}.add{padding:5px 0;margin-top:6px}.app{padding:10px 16px;gap:12px}}@media(max-width:760px){html,body{overflow:auto}body{min-height:100svh}.app{height:auto;min-height:100svh;grid-template-columns:1fr;gap:10px;padding:8px}.board-zone{justify-content:flex-start;gap:8px}.board-card{padding:4px}.board-wrap{width:min(calc(100vw - 20px),calc(100dvh - 150px),560px)}.transport{width:min(calc(100vw - 16px),560px);gap:6px}.transport button{width:44px;height:40px}.transport .mini-toggle{height:40px}.side{overflow:visible}.panel{padding:8px}.sheet-wrap{width:min(100%,calc(100vw - 32px),420px)}.editor-top{justify-content:flex-start}#draftCanvas{width:min(112px,32vw);height:min(112px,32vw)}}.rule{margin:6px 0 0;padding:6px 8px;border:2px solid var(--line);background:var(--panel-2);font-size:11px;line-height:1.6;color:var(--accent);min-height:30px}.screen{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:radial-gradient(900px 600px at 50% -10%,#17203a 0%,transparent 60%),var(--void)}body[data-screen=title] #titleScreen,body[data-screen=menu] #menuScreen,body[data-screen=gallery] #galleryScreen,body[data-screen=play] .app{display:grid}body:not([data-screen=play]) .app{display:none}.title-stage,.menu-stage,.gallery-stage{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px}.menu-stage,.gallery-stage{max-height:100dvh;overflow-y:auto}.title-logo{image-rendering:pixelated;width:min(520px,78vw);height:auto}.title-logo.small{width:min(300px,60vw)}.title-tag{margin:-6px 0 0;font-family:var(--font-ja, sans-serif);font-size:clamp(11px,2.4vw,15px);letter-spacing:.32em;color:var(--muted)}.title-world{padding:8px;background:var(--panel);border:2px solid var(--line);box-shadow:6px 6px #0000008c}.title-world canvas{display:block;width:min(240px,56vw);height:min(240px,56vw);image-rendering:pixelated;background:#000}.menu-btn{min-width:220px;padding:12px 20px;border:2px solid var(--line);background:var(--panel);color:var(--text);font-family:var(--font-ja-display, "Noto Sans JP", sans-serif);font-size:15px;letter-spacing:.14em;cursor:pointer;box-shadow:3px 3px #0000008c}.menu-btn:hover{border-color:var(--muted)}.menu-btn:active{transform:translate(3px,3px);box-shadow:none}.menu-btn.primary{border-color:var(--accent);color:var(--accent)}.menu-btn.ghost{background:transparent;box-shadow:none;color:var(--muted);min-width:0}.menu-btn.ghost:hover{color:var(--text)}.menu-btn.mini{padding:5px 12px;font-size:12px;border-width:2px}.menu-btn:disabled{opacity:.4;cursor:default}.menu-list{display:flex;flex-direction:column;gap:10px;align-items:center}.menu-list.sub{flex-direction:row;gap:18px;margin-top:4px}.saves{width:min(340px,84vw)}.saves h3{margin:4px 0 8px;font-family:var(--font-ja-display, "Noto Sans JP", sans-serif);font-size:12px;letter-spacing:.28em;color:var(--accent);text-align:center}.slot-list{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow-y:auto}.slot{display:flex;align-items:center;gap:8px;padding:8px 10px;border:2px solid var(--line);background:var(--panel-2)}.slot .thumb{width:32px;height:32px;image-rendering:pixelated;background:#000;flex:none}.slot .meta{flex:1;min-width:0;text-align:left}.slot .meta .nm{font-size:12px;color:var(--text)}.slot .meta .ts{font-size:10px;color:var(--muted)}.slot button{border:2px solid var(--line);background:transparent;color:var(--muted);font-size:11px;padding:4px 8px;cursor:pointer}.slot button.load:hover{border-color:var(--accent);color:var(--accent)}.slot button.del:hover{border-color:var(--deny);color:var(--deny)}.slot-empty{font-size:11px;color:var(--muted);text-align:center;padding:10px}.gallery-stage{width:min(980px,94vw)}.gallery-head{display:flex;align-items:center;justify-content:center;gap:10px}.gallery-head h1{margin:0;font-family:var(--font-ja-display, "Noto Sans JP", sans-serif);font-size:18px;letter-spacing:.22em;color:var(--accent)}.gallery-head select{width:180px;height:30px;border:2px solid var(--line);background:var(--panel);color:var(--text)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;width:100%;max-height:min(72vh,720px);overflow-y:auto}.gallery-card{display:grid;grid-template-rows:auto auto auto;gap:5px;min-width:0;padding:8px;border:2px solid var(--line);background:var(--panel-2);color:var(--text);text-align:left;cursor:pointer}.gallery-card:hover{border-color:var(--accent)}.gallery-thumb{width:64px;height:64px;image-rendering:pixelated;background:#000;justify-self:center}.gallery-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.gallery-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:12px;color:var(--muted);font-size:10px}.how-panel{width:min(360px,84vw);padding:12px 14px;border:2px solid var(--line);background:var(--panel-2)}.how-panel p{margin:0 0 8px;font-size:12px;line-height:1.7;color:var(--text)}.how-panel p:last-child{margin-bottom:0}.how-panel b{color:var(--accent);font-weight:700}.play-topbar{grid-column:1 / -1;display:flex;gap:8px;align-items:center;padding:6px 4px 0}.transport button:disabled{opacity:.4}.toggle-ico{display:inline-flex;align-items:center}.toggle-ico .px-icon{width:16px;height:16px;image-rendering:pixelated;display:block}.odai-bar{display:flex;align-items:center;gap:8px;padding:4px 10px;margin-left:8px;border:2px solid var(--accent);background:var(--panel-2)}.odai-bar.off{visibility:hidden}.odai-cap{font-size:9px;letter-spacing:.18em;color:var(--accent);flex:none}.odai-text{font-size:13px;color:var(--text);font-family:var(--font-ja-display, sans-serif)}.odai-reroll{border:none;background:transparent;font-size:14px;cursor:pointer;flex:none;padding:0 2px}.odai-toggle{margin-left:auto}