:root{--page-max:1640px;--page-gutter:24px}body:before{background:radial-gradient(1200px 600px at 10% -5%, var(--accent-soft), transparent 60%), radial-gradient(900px 500px at 100% 0%, #ff6b6b14, transparent 60%)}#app{flex-direction:column;min-height:100svh;display:flex}.btn.danger.active{background:var(--danger-soft);border-color:color-mix(in srgb, var(--danger) 50%, transparent);box-shadow:0 0 0 3px var(--danger-soft)}kbd{font:600 var(--fs-eyebrow) var(--font);color:var(--text-dim);background:var(--surface);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 5px;line-height:1.3}.btn kbd{margin-left:2px}.workspace{max-width:var(--page-max);flex:1;grid-template-columns:minmax(0,1fr) 510px;align-items:start;gap:24px;width:100%;margin:0 auto;padding:24px;display:grid}@media (max-width:1020px){.workspace{grid-template-columns:1fr}.workspace>.sidebar{display:contents}.workspace .board-panel{order:-1}.workspace>.stage{order:0}.workspace .units-panel{order:1}}.stage{flex-direction:column;gap:14px;min-width:0;display:flex}.board-frame{background:var(--bg-elev);border:1px solid var(--line);min-height:320px;box-shadow:var(--shadow-md);border-radius:18px;place-items:center;padding:18px;display:grid;position:relative;overflow-x:auto}.board-history{z-index:20;gap:4px;display:none;position:absolute;top:8px;right:8px}.board-history .btn.icon{background:var(--bg-elev-2);width:32px;height:32px}.board-frame:before{content:"";border-radius:inherit;background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);opacity:.35;pointer-events:none;background-size:20px 20px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 30%,#0000 80%);mask-image:radial-gradient(#000 30%,#0000 80%)}.board{grid-template-columns:repeat(var(--cols), var(--cell));grid-template-rows:repeat(var(--rows), var(--cell));isolation:isolate;cursor:crosshair;background:#2a2f3a;border-radius:10px;display:grid;position:relative;overflow:hidden;box-shadow:0 0 0 1px #00000080,0 10px 30px #00000073}.board-bg{image-rendering:auto;transition:opacity .25s var(--ease);background-color:#2a2f3a;background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;inset:0}.board-bg.loading{opacity:.4}.cell{z-index:1;touch-action:manipulation;outline-offset:-1px;transition:background .12s var(--ease);outline:1px solid #ffffff0f;position:relative}.cell:hover{z-index:9;background:#ffffff1f}.board[data-tool=place] .cell.path{cursor:not-allowed}.board[data-tool=place] .cell.path:hover{background:#ff505038}.cell .sprite{object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 4px #00000073);width:72%;height:72%;animation:drop .22s var(--ease);z-index:3;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cell .sprite.eggby{z-index:5;width:34%;height:34%;top:5px;left:5px;transform:none}.cell .sprite.any{filter:none;width:64%;height:64%}.unit.is-any img{filter:none;width:86%;height:86%;inset:7%}.sidebar{flex-direction:column;gap:16px;display:flex;position:sticky;top:84px}.panel{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-shrink:0;padding:16px}.panel-title{margin:0 0 var(--s3);font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-faint);justify-content:space-between;align-items:center;font-weight:700;display:flex}.panel-title .hint{letter-spacing:0;text-transform:none;color:var(--text-faint);font-weight:500}.segmented{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.segmented button{height:36px;color:var(--text-dim);transition:all .15s var(--ease);border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:13px;font-weight:700;display:flex}.segmented button small{font-size:var(--fs-eyebrow);color:var(--text-faint);font-weight:500}.segmented button:hover{color:var(--text)}.segmented button.active{background:var(--bg-elev);color:var(--text);box-shadow:var(--shadow-sm)}.maps{grid-template-columns:repeat(var(--map-cols,3), 1fr);justify-items:center;gap:8px;margin-top:12px;display:grid}.map-card{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);text-align:left;width:100%;max-width:260px;transition:all .15s var(--ease);padding:6px;position:relative}.maps[data-single] .map-card{max-width:88px}.map-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}.map-card.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.map-card .thumb{aspect-ratio:var(--map-aspect,1);background-color:#2a2f3a;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:5px;max-height:140px;margin:0 auto}.map-card .name{overflow-wrap:break-word;text-align:center;color:var(--text-dim);margin-top:6px;font-size:12px;font-weight:600}.map-card.active .name{color:var(--text)}.clear-btn{text-transform:none;letter-spacing:0;height:28px;padding:0 10px;font-size:12px}.clear-btn svg{width:13px;height:13px}.group-label{margin:var(--s1) 0 var(--s2);font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-faint);font-weight:700}.group-label.supreme{color:#ff6b6b;margin-top:6px}.group-label.eggby{color:#fbbf24;margin-top:14px}.group-label.demon-god{color:#fb923c;margin-top:14px}.group-label.summon{color:#4ade80;margin-top:14px}.palette{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.unit{aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);min-height:0;transition:all .15s var(--ease);place-items:center;padding:0;display:grid;position:relative;overflow:visible}.unit img{object-fit:contain;filter:drop-shadow(0 2px 2px #0006);width:78%;height:78%;transition:transform .15s var(--ease);position:absolute;inset:11%}.unit:focus{outline:none}.unit:focus-visible{border-color:var(--accent)}.unit:hover{border-color:var(--line-strong);background:var(--surface-hover)}.unit:hover img{transform:scale(1.1)}.unit.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}.modal-root{z-index:100;-webkit-backdrop-filter:blur(6px);animation:fade .15s var(--ease);background:#05070c8c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{width:min(100%, var(--w,720px));background:var(--bg-elev);border:1px solid var(--line);max-height:90vh;box-shadow:var(--shadow-lg);animation:rise .2s var(--ease);border-radius:16px;flex-direction:column;display:flex;overflow:hidden}.modal-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:16px 20px;font-size:15px;font-weight:700;display:flex}.modal-body{padding:20px;overflow:auto}.modal-foot{border-top:1px solid var(--line);justify-content:flex-end;gap:8px;padding:14px 20px;display:flex}.info-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;display:grid}.info-card{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);text-align:center;color:var(--text-dim);transition:all .15s var(--ease);justify-items:center;gap:8px;padding:10px 6px;font-size:12px;font-weight:600;display:grid}.info-card img{object-fit:contain;filter:drop-shadow(0 3px 4px #0006);width:56px;height:56px}.info-card:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px)}.info-card.active{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.detail{flex-direction:column;gap:18px;display:flex}.detail-head{align-items:center;gap:16px;display:flex}.detail .hero{aspect-ratio:1;border-radius:var(--radius);background:radial-gradient(circle at 50% 60%, var(--accent-soft), transparent 70%), var(--surface);border:1px solid var(--line);flex:none;place-items:center;width:88px;display:grid}.detail .hero img{object-fit:contain;filter:drop-shadow(0 6px 10px #00000080);width:75%;height:75%}.detail h2{letter-spacing:-.01em;margin:0 0 6px;font-size:20px}.detail .rarity{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:5px;margin:0 0 10px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}.detail .rarity.supreme{color:#ff6b6b;background:#ff6b6b29}.detail .rarity.note{color:var(--text-dim);background:var(--surface);margin-left:6px}.detail .rarity.demon-god{color:#fb923c;background:#fb923c29}.detail p{color:var(--text-dim);margin:0 0 14px}.variant-row{flex-wrap:wrap;gap:8px;display:flex}.variant{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);width:88px;font-size:var(--fs-2xs);color:var(--text-dim);transition:all .15s var(--ease);justify-items:center;gap:6px;padding:8px;font-weight:600;display:grid}.variant img{object-fit:contain;width:48px;height:48px}.variant:hover{border-color:var(--line-strong)}.variant.active{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}@media (max-width:560px){.maps{gap:5px}.map-card{padding:4px}.map-card .name{margin-top:4px;font-size:10px}.detail{gap:12px}.detail .hero{width:84px}.detail h2{font-size:18px}.stepper-row{flex-direction:column}.panel-title .hint{display:none}.modal-body{padding:14px}.modal-head{padding:12px 14px}.modal-foot{padding:10px 14px}.export-bar{flex-direction:column;align-items:flex-start;gap:8px}.export-bar .toggles{gap:8px}.export-bar>.hint{white-space:nowrap;font-size:12px}}.export-bar{color:var(--text-dim);justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:13px;display:flex}.toggles{flex-wrap:wrap;gap:18px;display:flex}.toggle:has(input:disabled){opacity:.45}.toggle{cursor:pointer;color:var(--text);align-items:center;gap:8px;font-weight:600;display:inline-flex}.toggle input{width:16px;height:16px;accent-color:var(--accent)}.export-preview{place-items:center;display:grid}.export-preview canvas{max-width:100%;height:auto;max-height:65vh;box-shadow:var(--shadow-md);border-radius:8px}.toasts{z-index:200;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast{background:var(--bg-elev);border:1px solid var(--line-strong);box-shadow:var(--shadow-md);animation:rise .25s var(--ease);border-radius:999px;align-items:center;gap:10px;padding:10px 16px;font-size:13px;font-weight:600;display:flex}.toast.out{animation:sink .25s var(--ease) forwards}.toast .dot{background:var(--accent);border-radius:50%;width:8px;height:8px}.toast.success .dot{background:var(--success)}.toast.error .dot{background:var(--danger)}.toast.warn .dot{background:var(--warn)}.hold-ghost{object-fit:contain;pointer-events:none;z-index:300;opacity:.9;filter:drop-shadow(0 8px 12px #0009);width:72px;height:72px;position:fixed;top:-36px;left:-36px}.board[data-tool=place] .cell.path:hover{cursor:not-allowed}.board .cell.has-units{cursor:grab;touch-action:none}.board.dragging,.board.dragging .cell{cursor:grabbing}.board.dragging .cell-actions{display:none}.cell.drag-source .sprite{opacity:.35}.cell.drag-over{box-shadow:inset 0 0 0 3px var(--accent);background:var(--accent-soft)}.drag-ghost{object-fit:contain;pointer-events:none;z-index:300;filter:drop-shadow(0 8px 12px #0009);opacity:.95;width:80px;height:80px;position:fixed;top:-40px;left:-40px}.board .routes{z-index:7;pointer-events:none;filter:drop-shadow(0 1px 2px #0009);width:100%;height:100%;position:absolute;inset:0}.board[data-tool=cycle]{cursor:crosshair}.board[data-tool=cycle] .cell:hover{background:#38bdf84d}.cell.cycle-origin{box-shadow:inset 0 0 0 3px #38bdf8}.cell.cycle-step{background:#38bdf82e}.board[data-tool=cycle] .cell-actions{display:none}.cell .edit-btn.cycle{color:#38bdf8}.cell .edit-btn.cycle.has-route,.cell .edit-btn.cycle:hover{color:#06283a;background:#38bdf8}.cell .cell-actions{z-index:8;gap:4px;display:flex;position:absolute;top:5px;right:5px}.cell .edit-btn{color:#fff;opacity:0;width:30px;height:30px;transition:opacity .12s var(--ease), transform .12s var(--ease), background .12s;background:#0a0c14d9;border:1px solid #ffffff2e;border-radius:8px;justify-content:center;align-items:center;padding:0;line-height:0;display:flex;transform:scale(.85);box-shadow:0 2px 6px #00000080}.cell .edit-btn svg{flex:none;width:15px;height:15px;display:block}.cell:hover .edit-btn{opacity:1;transform:scale(1)}.cell .edit-btn:hover{background:var(--accent)}.cell .edit-btn.lib{color:var(--warn)}.cell .edit-btn.lib.on,.cell .edit-btn.lib:hover{background:var(--warn);color:#2a1d00}.cell .edit-btn.remove{color:var(--danger)}.cell .edit-btn.remove:hover{background:var(--danger);color:#fff}.cell .badges{z-index:6;pointer-events:none;align-items:stretch;gap:3px;display:flex;position:absolute;bottom:3px;left:3px}.cell .badge{font-size:clamp(7px, calc(var(--cell) * .135), 11px);color:#fff;background:#0a0c14d1;border-radius:.5em;padding:.3em .5em;font-weight:800;line-height:1;box-shadow:0 1px 2px #00000080}.cell .badge em{color:var(--warn);font-style:normal}.cell .badge b{color:var(--success);margin-left:1px;font-weight:800}.cell .gems{background:#0a0c14d1;border-radius:5px;align-items:center;gap:3px;padding:0 5px;display:flex;box-shadow:0 1px 2px #00000080}.cell .gems i{border-radius:50%;width:6px;height:6px;display:block}.board.compact .cell .gems{display:none}.board.compact .cell .badges{bottom:2px;left:2px}.select,.text-input{border-radius:var(--radius-xs);border:1px solid var(--line);background-color:var(--surface);height:34px;color:var(--text);min-width:0;transition:border-color .15s var(--ease), background .15s var(--ease);outline:none;padding:0 10px;font-size:13px}.select{padding-right:var(--select-pad-right);cursor:pointer}.select:hover,.text-input:hover{border-color:var(--line-strong)}.select:focus,.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.select:disabled{opacity:.4;cursor:not-allowed}.grade-select{flex:none;width:72px;font-weight:700}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stepper{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);flex:1;align-items:center;height:36px;display:flex;overflow:hidden}.stepper-label{color:var(--text-dim);flex:1;padding:0 10px;font-size:12px;font-weight:600}.stepper-btn{width:32px;height:100%;color:var(--text-dim);font-size:16px;font-weight:700;transition:background .12s,color .12s}.stepper-btn:hover{background:var(--surface-hover);color:var(--text)}.stepper-input{text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);width:40px;height:100%;color:var(--text);background:0 0;outline:none;font-size:14px;font-weight:800}.stepper-row{gap:8px;display:flex}.stepper-col{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.stepper-col .stepper{flex:none}.lib-gate-hint{font-size:var(--fs-2xs);color:var(--text-dim)}.stepper-row:has(.lib-gate-hint)+.field-label{margin-top:8px}.field-label{font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-faint);margin:20px 0 8px;font-weight:700}.reset-btn{width:100%;margin-top:12px}.unit-editor{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:14px}.unit-editor+.unit-editor{margin-top:12px}.unit-editor-head{align-items:center;gap:12px;display:flex}.unit-editor-head img{object-fit:contain;filter:drop-shadow(0 3px 4px #0006);width:48px;height:48px}.unit-editor-title{flex-direction:column;flex:1;line-height:1.25;display:flex}.unit-editor-title b{font-size:15px}.unit-editor-title small{color:var(--text-faint);font-size:var(--fs-2xs)}.unit-editor-body{margin-top:14px}.gem-row{grid-template-columns:72px 1fr 72px;align-items:center;gap:6px;margin-bottom:6px;display:grid}.gem-slot-label{color:var(--text-dim);flex-direction:column;font-size:12px;font-weight:700;line-height:1.15;display:flex}.gem-slot-label small{color:var(--text-faint);align-items:center;gap:3px;font-size:10px;font-weight:600;display:inline-flex}.gem-slot-label small svg{width:10px;height:10px}.gem-row.special .select:not(.grade-select){border-color:color-mix(in srgb, var(--accent) 40%, transparent)}.gem-row.locked .gem-slot-label{color:var(--text-faint);opacity:.7}.gem-row.locked .gem-slot-label small{color:var(--text-faint)}.gem-row.locked .select:disabled{opacity:.35;border-style:dashed;border-color:var(--line-strong)}.player-tabs{margin-bottom:10px}.player-tabs button small{font-size:var(--fs-eyebrow);color:var(--text-faint);font-weight:500}.text-input{width:100%;margin-bottom:10px}.trait-list{flex-direction:column;gap:6px;margin-bottom:10px;display:flex}.trait-list:empty{margin:0}.trait-row{grid-template-columns:1fr 58px auto 32px;align-items:center;gap:6px;display:grid}.trait-row .select{height:32px;padding-left:8px;font-size:12.5px}.trait-row .grade-select{--select-arrow-size:var(--select-compact-size);--select-arrow-inset:var(--select-compact-inset);--select-pad-right:var(--select-compact-pad);width:58px}.trait-row .btn.icon{width:32px;height:32px}.trait-value{color:var(--text-dim);align-items:center;gap:1px;font-size:12px;font-weight:700;display:flex}.trait-value .value-input{text-align:center;width:38px;height:32px;margin:0;padding:0 4px;font-weight:700}.grade-chip{height:18px;font-size:var(--fs-eyebrow);color:var(--c);background:color-mix(in srgb, var(--c) 18%, transparent);border:1px solid color-mix(in srgb, var(--c) 45%, transparent);border-radius:5px;align-items:center;padding:0 6px;font-weight:800;display:inline-flex}.footer{text-align:center;color:var(--text-faint);padding:18px;font-size:12px}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(10px)scale(.98)}}@keyframes sink{to{opacity:0;transform:translateY(10px)}}@keyframes drop{0%{opacity:0;transform:translate(-50%,-60%)scale(.8)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.action-sheet{flex-direction:column;gap:8px;display:flex}.action-sheet .btn{justify-content:flex-start;height:44px}.traits-editor .panel-title{margin-top:0}.modal .trait-row{grid-template-columns:1fr 70px auto 36px}.modal .trait-row .select{height:36px;font-size:13px}.modal .trait-row .btn.icon{width:36px;height:36px}@media (max-width:560px){.modal-foot{flex-direction:column}.modal-foot .btn{width:100%}}@media (max-width:768px){.workspace{gap:14px;padding:14px}.board-frame{flex-direction:column;align-items:center;gap:10px;min-height:0;padding:12px;display:flex}.workspace .board-frame .board-history{order:-1;align-self:flex-end;display:flex;position:static}.palette{gap:6px}.info-grid{grid-template-columns:repeat(4,1fr);gap:8px}.info-card{padding:8px 4px;font-size:11px}.info-card img{width:44px;height:44px}.topbar>.tbin{gap:6px;padding:8px 10px}.topbar .group{gap:4px}.brand{gap:6px;font-size:14px}.brand img{width:22px;height:22px}.topbar .btn{min-width:34px;height:34px;padding:0 8px}.topbar .btn.icon{width:34px}.btn .label,.topbar .history{display:none}.btn:not(.icon):has(.label){width:36px;padding:0}}@media (hover:none) and (pointer:coarse){.cell .cell-actions{display:none}}