:root{--bg:#f3f5fa;--surface:#fff;--surface-2:#eef2f8;--text:#1c2333;--muted:#5c6579;--line:#dde3ee;--accent:#2f6fed;--accent-ink:#fff;--accent-soft:#e5eeff;--warm:#ff7a2f;--danger:#d93f45;--ok:#13914a;--seat:#fff;--seat-line:#cdd5e3;--board:#24583f;--chalk:#f2f6ee;--desk:#b98049;--radius:14px;--shadow:0 1px 2px #1018280f, 0 6px 20px #10182812;--font:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not(.dopa){--bg:#0f131b;--surface:#171d28;--surface-2:#1e2532;--text:#e7ebf3;--muted:#98a2b6;--line:#2a3344;--accent:#6d9bff;--accent-ink:#0b1222;--accent-soft:#1d2b4a;--seat:#1b2230;--seat-line:#354055;--board:#1d4634;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;margin:0}body{min-height:100dvh;overflow-x:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.app{z-index:1;position:relative}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;max-width:1440px;margin:0 auto;padding:12px 20px;display:flex}.brand{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:12px;align-items:center;gap:10px;padding:4px;display:flex}.logo{width:38px;height:38px}.logo-board{fill:var(--board)}.logo-a{fill:var(--accent)}.logo-b{fill:var(--warm)}.brand-text{flex-direction:column;align-items:flex-start;line-height:1.1;display:flex}.brand-text strong{letter-spacing:.06em;font-size:1.45rem}.brand-text small{letter-spacing:.3em;color:var(--muted);font-size:.68rem}.top-actions{flex-wrap:wrap;gap:6px;display:flex}.ghost{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 12px;font-size:.88rem}.ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.ghost.small{padding:6px 10px;font-size:.82rem}.layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:20px;max-width:1440px;margin:0 auto;padding:0 20px 40px;display:grid}@media (max-width:980px){.layout{grid-template-columns:minmax(0,1fr);padding:0 12px 32px}.topbar{padding:10px 12px}}.stage{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;padding:18px}.stage-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.now{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.now-kind{color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:3px 8px;font-size:.78rem;font-weight:700}.now-title{font-size:1.05rem;font-weight:700}.saved{color:var(--ok);font-size:.78rem;font-weight:700}.stats{color:var(--muted);gap:12px;font-size:.9rem;display:flex}.board{flex-direction:column;gap:14px;display:flex}.front{flex-direction:column;align-items:center;gap:8px;display:flex}.board.teacher .front{flex-direction:column-reverse}.blackboard{text-align:center;background:var(--board);width:min(70%,560px);color:var(--chalk);letter-spacing:.6em;border:5px solid #8a6136;border-radius:8px;padding:6px;font-size:.9rem}.desk{background:var(--desk);color:#fff;letter-spacing:.3em;border-radius:6px;padding:4px 18px;font-size:.8rem}.board-mid{justify-content:center;align-items:stretch;gap:10px;display:flex}.side-label{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.3em;color:var(--muted);border-radius:8px;flex:none;justify-content:center;align-items:center;padding:6px 3px;font-size:.78rem;display:flex}.side-label.window{color:#2b6aa8;background:linear-gradient(#d6ecff,#eef7ff)}@media (prefers-color-scheme:dark){:root:not(.dopa) .side-label.window{color:#8cc4ff;background:linear-gradient(#1b3550,#15283c)}}.grid{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));width:min(100%, calc(var(--cols) * 132px), max(300px, calc((100dvh - 330px) * var(--cols) / var(--rows) * 1.25)));gap:clamp(5px,1.1vw,12px);display:grid;position:relative}.seat{aspect-ratio:4/3;border:2px dashed var(--seat-line);background:var(--seat);outline-offset:2px;border-radius:10px;outline:3px solid #0000;justify-content:center;align-items:center;min-width:0;padding:0;transition:outline-color .15s,background .15s;display:flex}.seat:hover:not(:disabled),.seat.active{outline-color:var(--accent)}.seat:disabled{opacity:1;cursor:default}.seat.off{background:repeating-linear-gradient(45deg, var(--surface-2) 0 7px, transparent 7px 14px);border-style:solid;border-color:#0000}.off-mark{color:var(--danger);opacity:.7;font-size:clamp(.9rem,2.2vw,1.4rem);font-weight:700}.empty-mark{color:var(--muted);font-size:clamp(.6rem,1.2vw,.8rem)}.card{z-index:2;pointer-events:none;perspective:700px;min-width:0;margin:4px;container-type:size}.card.moving{z-index:6}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.7,.2,1);position:relative}.card.down .card-inner{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;border-radius:9px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.card-front{background:hsl(var(--h) 90% 93%);border:2px solid hsl(var(--h) 60% 72%);color:hsl(var(--h) 55% 22%);box-shadow:0 2px 0 hsl(var(--h) 45% 78%)}@media (prefers-color-scheme:dark){:root:not(.dopa) .card-front{background:hsl(var(--h) 32% 25%);border-color:hsl(var(--h) 45% 46%);color:hsl(var(--h) 85% 92%);box-shadow:none}}.card-back{color:#fff;background:repeating-linear-gradient(135deg,#3c4b7a 0 8px,#34416b 8px 16px);border:2px solid #8796c8;font-size:min(60cqh,45cqw);font-weight:800;transform:rotateY(180deg)}.num{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:min(58cqh,42cqw);font-weight:800;line-height:1}.pin{font-size:max(10px,min(26cqh,18cqw));line-height:1;position:absolute;top:2px;right:3px}.card.pinned .card-front{border-style:solid;border-width:3px}.board.landed .card .card-inner{animation:.55s ease-out land}@keyframes land{0%{transform:scale(1)}35%{transform:scale(1.12)}to{transform:scale(1)}}.unseated{color:#a1282d;background:#fff1f0;border-radius:10px;margin-top:12px;padding:10px 12px;font-size:.9rem}@media (prefers-color-scheme:dark){:root:not(.dopa) .unseated{color:#ffb4b0;background:#3a1a1c}}.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;margin:2px;padding:1px 8px;font-size:.85rem;font-weight:700;display:inline-block}.actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px;display:flex}.shuffle-btn{letter-spacing:.08em;color:#fff;background:linear-gradient(135deg, var(--warm), #ff4d6d);border:0;border-radius:999px;padding:16px 44px;font-size:1.25rem;font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 8px 22px #ff5a4659}.shuffle-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px #ff5a466b}.shuffle-btn:active:not(:disabled){transform:translateY(1px)scale(.98)}.save-btn{border:2px solid var(--accent);background:var(--surface);color:var(--accent);border-radius:999px;padding:12px 24px;font-size:1rem;font-weight:700}.save-btn.attention{background:var(--accent);color:var(--accent-ink);animation:1.6s ease-in-out infinite attention}@keyframes attention{50%{box-shadow:0 0 0 8px #2f6fed2e}}.avoid-note{text-align:center;color:var(--muted);margin:12px 0 0;font-size:.88rem;line-height:1.7}.save-hint{color:var(--accent)}.panel{flex-direction:column;gap:14px;display:flex}.box{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}.box h2{align-items:center;gap:6px;margin:0 0 10px;font-size:1rem;display:flex}.count{color:var(--muted);margin-left:auto;font-size:.8rem;font-weight:600}.stepper,.field{align-items:center;gap:8px;margin:8px 0;display:flex}.field.col{flex-direction:column;align-items:stretch;gap:4px}.lbl{min-width:3.2em;color:var(--muted);font-size:.9rem}.unit{color:var(--muted);font-size:.85rem}.step{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;width:36px;height:36px;font-size:1.1rem;line-height:1}.step:hover:not(:disabled){border-color:var(--accent)}input[type=number],input[type=text]{border:1px solid var(--line);background:var(--surface);border-radius:10px;min-width:0;padding:7px 10px}.stepper input{text-align:center;width:64px;font-size:1.05rem;font-weight:700}.seg{border:1px solid var(--line);border-radius:10px;display:inline-flex;overflow:hidden}.seg.wide{display:flex}.seg button{background:var(--surface);border:0;flex:1;padding:7px 14px;font-size:.9rem}.seg button+button{border-left:1px solid var(--line)}.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}.hint{background:var(--accent-soft);border-radius:10px;margin:10px 0 0;padding:8px 10px;font-size:.85rem;line-height:1.6}.sub{color:var(--muted);margin:8px 0 0;font-size:.82rem}.empty{color:var(--muted);margin:6px 0 0;font-size:.85rem;line-height:1.6}.link{color:var(--accent);font-size:inherit;background:0 0;border:0;padding:0 4px;text-decoration:underline}.check{cursor:pointer;align-items:center;gap:8px;min-width:0;font-size:.92rem;display:flex}.check input{width:18px;height:18px;accent-color:var(--accent);flex:none}.row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;display:flex}.btn{background:var(--accent);color:var(--accent-ink);cursor:pointer;border-radius:10px;align-items:center;gap:4px;padding:8px 14px;font-size:.9rem;font-weight:700;display:inline-flex}.btn.disabled{opacity:.55;pointer-events:none}.pins,.history{flex-direction:column;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.pins li,.history li{background:var(--surface-2);border-radius:10px;align-items:center;gap:8px;padding:6px 8px;display:flex}.pin-seat{flex:1;font-size:.85rem}.history li .check{flex:1}.history li.off{opacity:.55}.history li.current{box-shadow:inset 3px 0 0 var(--accent)}.h-title{text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;overflow:hidden}.h-meta{color:var(--muted);white-space:nowrap;font-size:.75rem}.icon{width:30px;height:30px;color:var(--muted);background:0 0;border:0;border-radius:8px;flex:none}.icon:hover:not(:disabled){background:var(--surface);color:var(--accent)}.privacy{color:var(--muted);margin:0 4px;font-size:.78rem;line-height:1.6}.popover{z-index:50;background:var(--surface);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:8px;width:280px;padding:12px;animation:.14s ease-out pop-in;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 16px 40px #00000038}.popover.above{transform:translate(-50%,-100%)}@keyframes pop-in{0%{opacity:0}}.pop-title{color:var(--muted);font-size:.85rem}.pop-title b{color:var(--text);font-size:1rem}.popover>button{text-align:left;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:9px 12px;font-size:.92rem}.popover>button:hover{border-color:var(--accent)}.popover>button.danger{color:var(--danger)}.pin-form{border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:4px;padding:8px 10px;display:flex}.pin-form .row{flex-wrap:nowrap;margin:0}.pin-form input{flex:1;width:100%}.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:8px 14px;font-weight:700}.toasts{z-index:80;pointer-events:none;flex-direction:column;gap:8px;width:min(560px,100vw - 24px);display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.toast{color:#fff;background:#1f2533;border-radius:12px;padding:11px 16px;font-size:.9rem;line-height:1.5;animation:.2s ease-out toast-in;box-shadow:0 10px 30px #00000040}.toast.error{background:#b4262c}.toast.success{background:#12804a}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.dropzone{z-index:90;border:4px dashed var(--accent);color:var(--accent);pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#2f6fed1f;border-radius:20px;place-items:center;font-size:1.4rem;font-weight:800;display:grid;position:fixed;inset:12px}.print-only{display:none}.stage:fullscreen{background:var(--bg);border-radius:0;flex-direction:column;justify-content:center;padding:2vh 3vw;display:flex;overflow:auto}.stage:fullscreen .grid{width:min(100%, calc(var(--cols) * 240px), max(300px, calc((100dvh - 260px) * var(--cols) / var(--rows) * 1.25)))}@media print{@page{size:A4 landscape;margin:12mm}:root,:root.dopa{--bg:#fff;--surface:#fff;--text:#000}.topbar,.panel,.actions,.avoid-note,.stats,.now,.toasts,.popover,.ticker,.dopa-bg,.mute,.skip,.fx-canvas{display:none!important}.layout{padding:0;display:block}.stage{box-shadow:none;padding:0}.print-only{display:block}.print-title{text-align:center;width:100%;font-size:18pt;font-weight:700}.grid{width:min(100%, calc(var(--cols) * 120px))!important}.seat{border:1px solid #999}.card-front{color:#000!important;box-shadow:none!important;background:#fff!important;border:2px solid #333!important}.rar{display:none}}:root.dopa{--bg:#0b0016;--surface:#1c0634d1;--surface-2:#3c14648c;--text:#fff4ff;--muted:#e2b6ff;--line:#ff78ff59;--accent:#ff3df2;--accent-ink:#fff;--accent-soft:#ff3df229;--seat:#14002899;--seat-line:#00fff080;--shadow:0 0 0 1px #ff78ff40, 0 0 26px #ff00c840;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root.dopa body{background:radial-gradient(circle at 20% 10%,#3b0066,#0000 50%),radial-gradient(circle at 80% 90%,#00335c,#0000 50%),#0b0016}.dopa-bg{z-index:0;pointer-events:none;background:conic-gradient(#ff006e22,#8338ec22,#3a86ff22,#06d6a022,#ffbe0b22,#ff006e22);animation:14s linear infinite spin-bg;position:fixed;inset:0;overflow:hidden}@keyframes spin-bg{to{filter:hue-rotate(360deg)}}.dopa-bg span{left:calc(var(--i) * 6.2% + 1%);font-size:calc(22px + var(--i) * 1.6px);animation:rise calc(7s + var(--i) * .43s) linear infinite;animation-delay:calc(var(--i) * -.9s);opacity:.75;position:absolute;bottom:-60px}@keyframes rise{to{transform:translateY(-120vh)rotate(720deg)}}:root.dopa .brand-text strong{background:linear-gradient(90deg,#ff3b6b,#ff9f1c,#ffe14d,#3dff8b,#3dd6ff,#7b61ff,#ff5cf0,#ff3b6b) 0 0/200%;color:#0000;-webkit-background-clip:text;background-clip:text;font-size:1.7rem;animation:1.6s linear infinite rainbow-text}:root.dopa .brand-text small{color:#3dffe0;text-shadow:0 0 8px #3dffe0}@keyframes rainbow-text{to{background-position:200%}}.ticker{white-space:nowrap;color:#fff;text-shadow:0 1px 2px #00000080;z-index:1;background:linear-gradient(90deg,#ff006e,#ffbe0b,#ff006e);margin-bottom:12px;padding:5px 0;font-weight:800;position:relative;overflow:hidden}.ticker-track{animation:18s linear infinite ticker;display:inline-flex}@keyframes ticker{to{transform:translate(-50%)}}:root.dopa .stage{background:linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, #ff3b6b, #ffe14d, #3dff8b, #3dd6ff, #ff5cf0) border-box;border:2px solid #0000}:root.dopa .blackboard{color:#3dffe0;text-shadow:0 0 8px #3dffe0;background:#000;border-color:#ff3df2;box-shadow:0 0 18px #ff3df2}:root.dopa .card-front{background:linear-gradient(135deg, hsl(var(--h) 100% 62%), hsl(calc(var(--h) + 70) 100% 58%));color:#fff;text-shadow:0 2px #00000059,0 0 10px #0000004d;box-shadow:0 0 14px hsl(var(--h) 100% 60% / .8);border:2px solid #fff}:root.dopa .card-back{text-shadow:0 0 12px #fff;background:linear-gradient(135deg,#ff006e,#8338ec,#3a86ff,#06d6a0,#ffbe0b) 0 0/300% 300%;border-color:#fff;animation:1.2s linear infinite holo}@keyframes holo{0%{background-position:0%}to{background-position:300%}}.rar{color:#fff;text-shadow:none;background:#00000073;border-radius:4px;padding:0 4px;font-size:max(8px,min(22cqh,14cqw));font-weight:900;line-height:1.3;position:absolute;top:2px;left:3px}.card.r-R .rar{background:#2f80ff}.card.r-SR .rar{background:#a24bff}.card.r-SSR .rar{color:#5a3b00;background:linear-gradient(135deg,#ffe066,#ffb300)}.card.r-UR .rar{color:#2a0030;background:linear-gradient(90deg,#ff3b6b,#ffe14d,#3dff8b,#3dd6ff,#ff5cf0)}:root.dopa .card.r-SSR .card-front{box-shadow:0 0 0 3px gold,0 0 22px gold}:root.dopa .card.r-UR .card-front{animation:1.2s ease-in-out infinite ur-glow;box-shadow:0 0 0 3px #fff,0 0 28px #ff5cf0,0 0 50px #3dd6ff}@keyframes ur-glow{50%{filter:brightness(1.3)saturate(1.4)}}:root.dopa .seat.r-UR{border-color:#ffe14d}:root.dopa .shuffle-btn{text-shadow:0 2px #00000059;background:linear-gradient(90deg,#ff3b6b,#ff9f1c,#ffe14d,#3dff8b,#3dd6ff,#7b61ff,#ff5cf0,#ff3b6b) 0 0/200%;font-size:1.4rem;animation:1.2s linear infinite rainbow-text,.9s ease-in-out infinite throb;box-shadow:0 0 30px #ff3df2b3}@keyframes throb{50%{transform:scale(1.06)}}:root.dopa .side-label.window{color:#fff;text-shadow:0 0 6px #3dffe0;background:linear-gradient(#00e5ff66,#ff3df266)}:root.dopa .box h2{color:#3dffe0;text-shadow:0 0 8px #3dffe099}.mute,.skip{z-index:120;color:#fff;border:2px solid #fff;border-radius:999px;font-weight:800;position:fixed}.mute{background:#280046cc;width:48px;height:48px;font-size:1.3rem;bottom:16px;left:16px}.skip{background:linear-gradient(90deg,#ff006e,#8338ec);padding:12px 22px;font-size:1rem;bottom:16px;right:16px;box-shadow:0 0 18px #ff006e}.fx-canvas{pointer-events:none;z-index:100;width:100vw;height:100vh;position:fixed;inset:0}.fx-flash{pointer-events:none;z-index:101;background:#fff;position:fixed;inset:0}.fx-flash.gold{background:radial-gradient(circle,#fff7c2,gold 60%,#ff9f00)}.fx-flash.rainbow{background:linear-gradient(135deg,#ff3b6b,#ff9f1c,#ffe14d,#3dff8b,#3dd6ff,#7b61ff,#ff5cf0)}.fx-banner{z-index:102;pointer-events:none;text-align:center;white-space:nowrap;font-weight:900;font-family:var(--font);position:fixed;top:45%;left:50%}.fx-banner-main{-webkit-text-stroke:3px #fff;paint-order:stroke fill;filter:drop-shadow(0 6px #00000073)drop-shadow(0 0 22px #fff9);font-size:clamp(2.6rem,11vw,8rem);line-height:1.05}.fx-banner-sub{color:#fff;text-shadow:0 3px #00000080,0 0 14px #ff3df2;margin-top:6px;font-size:clamp(1.2rem,4.5vw,2.6rem)}.fx-banner.rainbow .fx-banner-main,.fx-banner.ur .fx-banner-main{background:linear-gradient(90deg,#ff3b6b,#ff9f1c,#ffe14d,#3dff8b,#3dd6ff,#7b61ff,#ff5cf0);color:#0000;-webkit-background-clip:text;background-clip:text}.fx-banner.gold .fx-banner-main{color:gold;-webkit-text-stroke:3px #7a3e00}.fx-banner.ur .fx-banner-main{font-size:clamp(2.8rem,12vw,9rem)}.fx-float{z-index:103;pointer-events:none;color:#fff;white-space:nowrap;text-shadow:0 2px #00000080,0 0 10px #ff3df2;font-size:1.3rem;font-weight:900;position:fixed}.fx-float.r{color:#8ec5ff}.fx-float.sr{color:#d29bff;font-size:1.5rem}.fx-float.ssr{color:gold;-webkit-text-stroke:1px #7a3e00;font-size:2rem}.fx-combo{z-index:103;pointer-events:none;color:#ffe14d;text-shadow:0 3px #b3006b,0 0 16px #ff3df2;align-items:baseline;gap:6px;font-weight:900;display:flex;position:fixed;top:90px;right:22px;transform:rotate(-6deg)}.fx-combo b{font-size:3.6rem;line-height:1}.fx-combo span{font-size:1.3rem}