:root{--frame-width:420px;--cell:50px;--ink:#2b1d10;--parchment:#f1e4c8;--parchment-dark:#dcc79d;--wood:#6b4524;--wood-dark:#3a2412;--wood-darker:#22150a;--gold:#e9c979;--gold-dark:#b08a3a;--plank:#c89663;--plank-dark:#a8784a;--sea:#1f7ea3;--sea-dark:#114e6a;--accent:#9b1c14;--ok:#3aa35b;--bad:#d23c2c;--merge:#3f8cff;--aura:#ffd24a;--hp:#6fcf4f;--exp:#d9c089;--font-brush:"Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;--font-body:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;font-family:var(--font-body)}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);background:#140d07;margin:0}body{-webkit-user-select:none;user-select:none;justify-content:center;align-items:flex-start;display:flex}#app{width:var(--frame-width);border-left:3px solid var(--wood-darker);border-right:3px solid var(--wood-darker);background:radial-gradient(circle at 20% 10%,#ffffff14,#0000 40%),repeating-linear-gradient(90deg,#7a5230 0 22px,#6f4a2a 22px 23px,#7d5533 23px 46px,#6a4627 46px 47px);flex-direction:column;height:100vh;max-height:1000px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 40px #000000b3}.brush{font-family:var(--font-brush)}.btn{font:inherit;border:2px solid var(--wood-dark);color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:0 2px 0 var(--wood-darker), inset 0 1px 0 #fff;background:linear-gradient(#fbf4e3,#e4d2ab);border-radius:4px;padding:9px 16px;font-size:15px}.btn:hover:not(:disabled){filter:brightness(1.05)}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--wood-darker);transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{font-family:var(--font-brush);letter-spacing:.35em;background:linear-gradient(#fff,#e9e3d6);border:2px solid #b8ab93;padding:8px 26px 8px 34px;font-size:26px}.btn.dark{color:var(--gold);background:linear-gradient(#4a3a2c,#2d2219);border-color:#1a120b;box-shadow:0 2px #000,inset 0 1px #ffffff26}.btn.small{padding:5px 10px;font-size:13px}.coin{vertical-align:-2px;background:radial-gradient(circle at 35% 35%,#fff2b0,#d9a520 60%,#8a6210);border:1px solid #6b4a0e;border-radius:50%;width:14px;height:14px;margin-right:4px;display:inline-block}.plate{color:var(--gold);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);background:linear-gradient(#4b3321,#2a1a0d);border-top:1px solid #8a6a3c;border-bottom:1px solid #120b05;align-self:flex-start;align-items:baseline;gap:10px;margin:6px 0 4px;padding:3px 26px 3px 14px;display:flex}.plate .title{font-family:var(--font-brush);letter-spacing:.1em;text-shadow:0 1px #000;font-size:20px}.plate .sub{color:#e8dcc0;font-size:12px}.title-screen{color:#fdf3dc;text-align:center;background:radial-gradient(circle at 50% 20%,#2b8fb8,#0f4a66 70%);flex-direction:column;flex:1;align-items:center;gap:14px;padding:18px 16px 24px;display:flex;overflow-y:auto}.title-screen .banner{border:3px solid var(--wood-dark);border-radius:4px;width:100%;box-shadow:0 6px 18px #00000080}.title-screen .deck-art{border:3px solid var(--wood-dark);border-radius:4px;width:78%;box-shadow:0 6px 18px #00000080}.title-screen .tagline{font-family:var(--font-brush);letter-spacing:.08em;text-shadow:0 2px 4px #000;font-size:18px}.title-screen .best{color:var(--gold);background:#00000059;border:1px solid #e9c97966;border-radius:4px;padding:6px 14px;font-size:14px}.parchment{background:radial-gradient(circle at 30% 20%, #ffffff59, transparent 60%), radial-gradient(circle at 80% 90%, #966e3c2e, transparent 50%), var(--parchment);color:var(--ink);border:3px solid var(--wood-dark);border-radius:4px;box-shadow:inset 0 0 18px #78501e59}.title-screen .rules{text-align:left;max-width:370px;padding:10px 14px;font-size:13px;line-height:1.75}.topbar{color:#f7e7c4;background:linear-gradient(#3b2718,#1d1209);border-bottom:2px solid #0f0904;justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;display:flex}.topbar .stage{font-family:var(--font-brush);color:var(--gold);letter-spacing:.1em;white-space:nowrap;text-shadow:0 2px #000;font-size:21px}.topbar .coins{white-space:nowrap;color:#fff3cf;font-size:15px}.bars{background:#1d1209;flex-direction:column;gap:4px;padding:5px 12px 7px;display:flex}.bar{background:#0b0703;border:1px solid #5a4020;border-radius:2px;height:17px;position:relative;overflow:hidden}.bar .fill{position:absolute;inset:0 auto 0 0}.bar.hp .fill{background:linear-gradient(#a6ee8a, var(--hp) 60%, #3f9a2c)}.bar.exp .fill{background:linear-gradient(#f6e8c0, var(--exp) 60%, #a88f55)}.bar .label{color:#fff;text-shadow:0 1px 1px #000,0 0 2px #000;justify-content:space-between;padding:0 6px;font-size:12px;line-height:17px;display:flex;position:absolute;inset:0}.prep-screen{flex-direction:column;flex:1;min-height:0;display:flex}.info-box{margin-top:2px}.prep{flex-direction:column;flex:1;min-height:0;padding:0 8px 8px;display:flex;overflow-y:auto}.board-wrap{justify-content:center;padding:10px 0 4px;display:flex}.board{border:7px solid var(--wood-dark);box-sizing:content-box;background:#3a2615;border-radius:3px;position:relative;box-shadow:0 0 0 2px #8a6a3c,0 8px 18px #0000008c,inset 0 0 12px #0009}.cell{width:var(--cell);height:var(--cell);position:absolute}.cell.active{background:repeating-linear-gradient(90deg, var(--plank) 0 11px, #b88656 11px 12px, #cf9d69 12px 24px, #b07e4f 24px 25px);box-shadow:inset 0 0 0 1px #3c230f8c}.cell.inactive{background:#3f2917;box-shadow:inset 0 0 0 1px #00000080}.cell.inactive:after{content:"";background:linear-gradient(135deg,#0000 46%,#d6ad7c38 46% 54%,#0000 54%);border:2px solid #d6ad7c38;border-radius:50%;position:absolute;inset:12px}.cell.hint-ok{box-shadow:inset 0 0 0 4px var(--ok)}.cell.hint-bad{box-shadow:inset 0 0 0 4px var(--bad)}.cell.hint-aura{box-shadow:inset 0 0 0 3px var(--aura), inset 0 0 12px var(--aura)}.unit{cursor:grab;touch-action:none;position:absolute}.board .unit{pointer-events:none}.board .unit .hit{pointer-events:auto;cursor:grab;touch-action:none;position:absolute}.unit-visual .tile{border:2px solid;border-radius:5px;position:absolute}.unit-visual .sprite{object-fit:contain;pointer-events:none;position:absolute}.unit-visual .lv{pointer-events:none;border-radius:2px;padding:0 3px;font-family:sans-serif;font-size:10px;font-weight:700;position:absolute;box-shadow:0 1px 2px #0009}.unit-visual .pattern{color:#fff;text-shadow:0 0 2px #000,0 0 3px #000;pointer-events:none;font-family:sans-serif;font-size:12px;position:absolute}@keyframes merge-pulse{0%{box-shadow:0 0 0 2px #3f8cff99,0 0 6px #3f8cff73}to{box-shadow:0 0 0 3px #5aa5ff,0 0 14px #3f8cffe6}}.unit.merge-candidate .tile{animation:.8s ease-in-out infinite alternate merge-pulse}.unit.merge-target .tile{box-shadow:0 0 0 3px var(--merge), 0 0 14px var(--merge);animation:none}.unit.dragging{opacity:.3}.offers{justify-content:center;gap:5px;padding:2px 0 4px;display:flex}.slot{touch-action:none;background:#0000002e;border:2px dashed #f1e4c859;border-radius:4px;width:76px;height:118px;position:relative}.slot.filled{border:2px solid var(--wood-dark);cursor:grab;background:radial-gradient(circle at 30% 20%, #ffffff59, transparent 60%), var(--parchment);box-shadow:inset 0 0 10px #78501e59,0 2px 4px #0006}.slot.drop-ok{box-shadow:0 0 0 3px var(--ok)}.slot.merge-candidate{animation:.8s ease-in-out infinite alternate merge-pulse}.slot.drop-merge{box-shadow:0 0 0 3px var(--merge), 0 0 12px var(--merge);animation:none}@media (prefers-reduced-motion:reduce){.unit.merge-candidate:not(.merge-target) .tile,.slot.merge-candidate:not(.drop-merge){animation:none;box-shadow:0 0 0 3px #5aa5ffe6,0 0 10px #3f8cffb3}}.slot .diamond{width:20px;height:20px;position:absolute;top:2px;left:2px}.slot .name{height:24px;font-size:10px;font-weight:700;line-height:1.15;position:absolute;top:2px;left:22px;right:2px;overflow:hidden}.slot .art{justify-content:center;align-items:center;height:58px;display:flex;position:absolute;top:26px;left:4px;right:4px}.slot .art img{object-fit:contain;max-width:100%;max-height:100%}.slot .level-plate{position:absolute;bottom:4px;left:4px}.slot .footprint{gap:1px;display:grid;position:absolute;bottom:3px;right:3px}.slot .footprint span{background:#00000014;width:5px;height:5px}.slot .footprint span.on{background:#f07a7a}.slot .version{color:#5b3a18;font-size:9px;position:absolute;bottom:20px;left:4px}.slot .expansion-name{left:4px}.slot .expansion-planks .cell.active{border-radius:2px}.actions{justify-content:center;align-items:center;gap:8px;padding:6px 0;display:flex}.message{text-align:center;color:#fff3cf;text-shadow:0 1px 2px #000;min-height:20px;padding:0 8px;font-size:13px}.message.error{color:#ffb4a8;font-weight:700}.info{align-items:flex-start;gap:8px;min-height:64px;padding:8px 10px;font-size:13px;line-height:1.5;display:flex}.info .diamond{flex:none;width:30px;height:30px}.info .kind{background:var(--accent);color:#fff;border-radius:2px;margin-right:6px;padding:0 6px;font-size:11px;display:inline-block}.ghost{pointer-events:none;z-index:50;opacity:.9;position:fixed}.battle{flex-direction:column;flex:1;min-height:0;display:flex}.canvas-wrap{background:var(--sea-dark);flex:1;justify-content:center;align-items:stretch;min-height:0;display:flex}.canvas-wrap canvas{display:block}.battle-controls{gap:6px;display:flex}.kills{color:#f7e7c4;background:#1d1209;padding:4px 12px;font-size:12px}.modal-backdrop{z-index:20;background:#0000008c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.modal{color:#f4ead6;background:linear-gradient(#3d3935,#2c2926);border:2px solid #1a1714;border-radius:4px;width:384px;padding:0 0 12px;overflow:hidden;box-shadow:0 10px 30px #0009}.modal h2{text-align:center;letter-spacing:.25em;font-family:var(--font-brush);color:#f2e2b8;background:linear-gradient(90deg,#1d3a4c,#2b5a73 40%,#1d3a4c);margin:0;padding:10px;font-size:26px}.modal .lead{text-align:center;margin:10px 12px;font-size:13px}.card{text-align:left;width:calc(100% - 24px);font:inherit;color:inherit;cursor:pointer;background:linear-gradient(90deg,#4a4540,#3b3733);border:2px solid #5d564e;border-radius:3px;margin:0 12px 8px;padding:0 10px 8px;display:block;position:relative}.card.selected{border-color:#f5c542;box-shadow:0 0 10px #f5c54280}.card .tag{color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);background:#8b2b22;margin:0 0 4px -10px;padding:2px 10px 2px 8px;font-size:12px;display:inline-block}.card .name{font-family:var(--font-brush);font-size:20px}.card .rarity{color:#f5c542;margin-left:6px;font-size:12px}.card .desc{margin-top:2px;font-size:13px}.modal .confirm{justify-content:center;display:flex}.confirm-modal{width:min(340px,100% - 24px)}.confirm-modal .lead{margin:14px 16px;font-size:14px;line-height:1.6}.confirm-buttons{justify-content:center;gap:12px;padding:0 12px;display:flex}.btn.small-primary{letter-spacing:.1em;padding:8px 18px;font-size:18px}.confirm-buttons .btn{min-height:44px}.result{color:#f4ead6;background:linear-gradient(#244a5e,#10222d);flex-direction:column;flex:1;gap:8px;padding:12px 14px;display:flex;overflow-y:auto}.result h1{text-align:center;white-space:nowrap;letter-spacing:.12em;font-family:var(--font-brush);color:var(--gold);text-shadow:0 3px #3a2412,0 0 16px #0009;margin:4px 0 0;font-size:36px}.result .stage-banner{font-family:var(--font-brush);letter-spacing:.15em;color:#f4ead6;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);background:linear-gradient(#1b1b1b,#000);border-left:3px solid #b0402c;border-right:3px solid #b0402c;align-self:center;padding:4px 34px;font-size:20px}.result .stats{justify-content:center;gap:10px;display:flex}.result .stat{clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%);text-align:left;background:linear-gradient(135deg,#2f6f8e,#1c4459);border:1px solid #5d8ea6;min-width:150px;padding:5px 26px 5px 12px}.result .stat .label{color:#d7e7ef;font-size:12px}.result .stat .value{font-size:30px;font-weight:700;line-height:1.1}.result .record{text-align:center;color:var(--gold);font-size:14px;font-weight:700}.result .result-tabs{background:#00000059;border-radius:3px;overflow:hidden}.result .tab-row{display:flex}.result .tab{font:inherit;letter-spacing:.2em;color:#b7c3c8;cursor:pointer;background:#00000059;border:none;border-bottom:2px solid #0000;flex:1;padding:7px 0;font-size:15px}.result .tab.active{color:#fff;background:0 0;border-bottom-color:#d14b33}.result .result-pane{background:repeating-linear-gradient(90deg,#8a5c33 0 22px,#7c512c 22px 23px,#93643a 23px 46px,#7a4f2b 46px 47px);justify-content:center;min-height:120px;padding:8px;display:flex}.result .result-pane[hidden]{display:none}.result .result-pane.tactics{background:var(--parchment);color:var(--ink);flex-direction:column;justify-content:flex-start;gap:6px}.result .tactic{background:#ffffff73;border:1px solid #5a3c1e59;border-radius:3px;flex-direction:column;gap:1px;padding:4px 8px;font-size:12px;display:flex}.result .tactic strong{font-size:14px}.result .buttons{justify-content:center;gap:10px;display:flex}.result .btn.wide{max-width:180px;font-family:var(--font-brush);letter-spacing:.2em;flex-direction:column;flex:1;align-items:center;gap:2px;padding:6px 8px;font-size:22px;display:flex}.result .btn-sub{letter-spacing:0;color:#5b3a18;font-family:sans-serif;font-size:11px}.result .mini-board{border:5px solid var(--wood-dark);box-sizing:content-box;background:#3a2615;position:relative;box-shadow:0 0 0 2px #c79a64}