.page-battle{--chrome:128px}.drop{position:relative}.drop-device{margin:0 var(--gutter);border-radius:var(--r-device);background:var(--enamel-face);box-shadow:var(--enamel-shadow);grid-template-columns:minmax(0,1fr);grid-template-areas:"head""window""panel";gap:5px;padding:6px 8px 8px;display:grid;position:relative}.drop-head{grid-area:head;padding:2px 4px 0}.drop-title{font:600 19px / 1.06 var(--serif);letter-spacing:var(--track-display);font-optical-sizing:auto}.drop-subtitle{color:var(--ink-2);margin-top:2px;font-size:11.5px;line-height:1.2}.drop-configs{color:var(--ink);margin-top:3px;font-size:11.5px;line-height:1.25}.drop-configs-label{color:var(--ink-2);font-weight:600}.drop-panel{flex-direction:column;grid-area:panel;gap:4px;min-width:0;display:flex}.window{background:linear-gradient(180deg, #ffffff59, #fff0 30%), linear-gradient(180deg, var(--plate) 0%, var(--plate-2) 100%);--hopper-half:28px;--min-g:34px;--row-top:65px;--row-gap:34px;--row-h:33px;border-radius:20px;flex-direction:column;grid-area:window;height:clamp(390px,50svh,444px);min-height:0;margin:2px 2px 0;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 3px 7px #3c2c1e38,inset 0 1px 1.5px #3c2c1e4d,inset 0 -1px #fffc,0 0 0 3px #ffffffd9,0 0 0 4px #7868582e,0 2px 3px 4px #7868581f}.window:has(.rows>li:nth-child(9)){--min-g:16px;--row-top:64px;--row-gap:16px;--row-h:16px;height:clamp(410px,52.6svh,460px)}.window:after{content:"";z-index:4;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,#ffffff47 0%,#fff0 32% 70%,#ffffff1f 100%);position:absolute;inset:0}.board-area{flex:auto;min-height:0;position:relative}.board{z-index:2;touch-action:manipulation;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.board:focus-visible{outline-offset:-4px;border-radius:18px}.slot{z-index:3;width:calc(50% - var(--hopper-half) - 10px);background:linear-gradient(#fff 0%,#cfcac3 38%,#f4f2ee 52%,#a9a39b 100%);border-radius:13px;height:50px;padding:2px;position:absolute;top:6px;box-shadow:0 1px 1px #3c2c1e59,0 4px 8px -4px #3c2c1e73,inset 0 0 0 .5px #3c2c1e59}.slot-a{left:8px}.slot-b{right:8px}.slot-card{text-align:center;background:linear-gradient(#e7e2db 0%,#f3f0eb 30%,#f8f6f2 100%);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:1px;height:100%;padding:4px 8px;display:flex;position:relative;box-shadow:inset 0 2px 4px #3c2c1e4d,inset 0 1px 1px #3c2c1e59,inset 0 -1px #ffffffe6}.slot-side{color:var(--ink-2);align-items:center;gap:5px;font-size:11px;font-weight:650;line-height:1.1;display:inline-flex}.slot-side:before{content:"";background:var(--accent);border-radius:2px;width:7px;height:7px}.slot-b .slot-side:before{background:var(--graphite)}.slot-name{font:600 14.5px / 1.06 var(--serif);letter-spacing:-.01em;font-optical-sizing:auto;text-wrap:balance;hyphens:none}.rows{z-index:1;margin:0;padding:0;list-style:none;position:absolute;inset:0}.row{left:6px;right:6px;top:var(--y,calc(var(--row-top) + var(--row,0) * var(--row-gap)));height:var(--h,var(--row-h));letter-spacing:-.02em;color:var(--ink-2);text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:flex-start;gap:3px;padding:2px 2px 0;font-size:11px;line-height:1.15;display:flex;position:absolute}.window:has(.rows>li:nth-child(9)) .row{letter-spacing:-.02em;gap:3px;padding:0 2px;font-size:11px;line-height:1}.window:has(.rows>li:nth-child(9)) .row-name,.window:has(.rows>li:nth-child(9)) .row-vote{transform:translateY(-2.5px)}.row[data-row="0"]{--row:0}.row[data-row="1"]{--row:1}.row[data-row="2"]{--row:2}.row[data-row="3"]{--row:3}.row[data-row="4"]{--row:4}.row[data-row="5"]{--row:5}.row[data-row="6"]{--row:6}.row[data-row="7"]{--row:7}.row[data-row="8"]{--row:8}.row[data-row="9"]{--row:9}.row[data-row="10"]{--row:10}.row[data-row="11"]{--row:11}.row[data-row="12"]{--row:12}.row[data-row="13"]{--row:13}.row[data-row="14"]{--row:14}.row[data-row="15"]{--row:15}.row:focus-visible{outline-offset:-2px}.row-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ink);font-weight:600;overflow:hidden}.row-meta{letter-spacing:-.02em;color:var(--ink-2);font-size:max(11px,.88em);font-weight:500}.row-vote{white-space:nowrap;flex:none;font-size:max(11px,.92em)}.row[aria-pressed=true]{color:var(--ink);background:#e95c121a}.ends{z-index:1;flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;height:20px;padding:0 10px 2px;font-size:11px;font-weight:650;display:grid;position:relative}.end{align-items:center;gap:5px;min-width:0;display:flex}.end-b{justify-content:flex-end}.end-mid{color:var(--ink-2);white-space:nowrap;justify-content:center;font-weight:500}.end-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.end-a:before,.end-b:after{content:"";border-radius:2px;flex:none;width:8px;height:8px}.end-a:before{background:var(--accent)}.end-b:after{background:var(--graphite)}.cnt{flex:none;font-weight:700}.cnt:empty{display:none}.sim-tag{color:var(--ink-2);text-align:center;border-top:1px dashed #26201c2e;flex:none;margin:0 8px 3px;padding-top:2px;font-size:12px;line-height:1.15}.drop .readout{padding:2px 4px 0}.meterline{flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:10px;margin-bottom:3px;display:flex}.drop .groove{background:linear-gradient(#d9d3ca,#ece8e2);border-radius:3px;flex:0 0 108px;height:6px;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #3c2c1e73,0 1px #fff}.drop .groove-fill{transform-origin:0;transform:scaleX(var(--fill,0));background:linear-gradient(180deg, #ff9a5c, var(--accent));transition:transform .22s var(--ease);position:absolute;inset:0;box-shadow:0 0 6px #e95c1299}.lens-cap{text-align:right;overflow-wrap:anywhere;flex:auto;min-width:0;font-size:11px;font-weight:650;line-height:1.15}.drop .verdict{font:600 16px / 1.12 var(--serif);letter-spacing:-.012em;font-optical-sizing:auto;text-wrap:balance}.drop .detail{color:var(--ink-2);margin-top:2px;font-size:11.5px;line-height:1.25}.drop .detail .pub{color:var(--ink);font-weight:600}.verdict.called{animation:called .42s var(--ease)}@keyframes called{0%{opacity:0;transform:translateY(6px)}}.lens-knob{gap:3px 10px;padding:0 2px}.lens-knob>legend{margin-bottom:2px;font-size:11px}.lens-knob .knob-dial{align-self:start;width:40px;height:40px}.lens-knob .knob-dial:after{height:10px;top:6px}.lens-knob .knob-options{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}.lens-knob .knob-options .key{min-height:44px;padding:4px 7px;font-size:11px;line-height:1.15}.keybed{gap:3px;padding:0;display:grid}.drop-key{touch-action:manipulation;border-radius:14px;width:100%;min-height:48px;padding:5px 12px}.drop-key .drop-label{font:650 20px / 1 var(--serif);letter-spacing:-.015em}.drop-key .key-sub{font-size:11px}.drop-key.held{animation:.5s ease-in-out infinite alternate held;transform:translateY(4px)}@keyframes held{to{opacity:.92}}.drop-hint{color:var(--ink-2);font-size:11px;line-height:1.2}.ticket{background:radial-gradient(circle at 8px -2px,#0000 5px,#fffdf8 5.5px) 0 0/16px 100% repeat-x;border-radius:4px 4px 14px 14px;padding:10px 14px 12px;position:relative;box-shadow:0 1px 2px #1e242a2e,0 10px 22px -12px #1e242a73}.ticket-title{font:600 15.5px / 1.15 var(--serif);margin-bottom:4px;padding-right:64px}.ticket-close{min-width:44px;min-height:44px;color:var(--ink-2);background:0 0;border:0;border-radius:12px;padding:0 12px;font-size:13px;font-weight:650;position:absolute;top:6px;right:6px}.ticket-close:hover{background:#26201c0f}.ticket-body .intro-p{font-size:12px;line-height:1.35}.ticket-body .intro-p+.intro-p{margin-top:5px}.card-need{color:var(--ink-2);margin-bottom:8px;font-size:13px}.path{margin:0 0 10px;padding:0;list-style:none;display:grid}.path li{border-bottom:1px dashed #26201c29;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:5px 4px;font-size:12.5px;display:grid}.path li.is-lens{background:#e95c121a}.path .who{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ink-2);overflow:hidden}.path .to{white-space:nowrap;font-weight:650}.path .to:before{content:"";border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.path .to.a:before{background:var(--accent)}.path .to.b:before{background:var(--graphite)}.card-sum{margin-bottom:6px;font-size:13.5px}.card-fine{color:var(--ink-2);font-size:12px}.drop-below{width:min(var(--page), 100% - 2 * var(--gutter));gap:14px;margin:16px auto 0;display:grid}.drop-intro{padding:0 6px}.drop-intro p{font-size:var(--fs-md);margin-top:8px}@media (width<=1099px){.drop .readout{order:1}.keybed{order:2}.lens-knob{order:3}.ticket{display:none}.ticket[data-open]{z-index:30;left:8px;right:8px;bottom:max(8px, env(safe-area-inset-bottom));max-width:560px;max-height:68svh;animation:ticket-up .22s var(--ease);margin:0 auto;padding:12px 16px 14px;display:block;position:fixed;overflow:auto;box-shadow:0 -2px 6px #1e242a1f,0 20px 50px #1e242a80}}@keyframes ticket-up{0%{opacity:0;transform:translateY(30px)}}@media (width>=462px){.window{--min-g:40px;--row-top:65px;--row-gap:40px;--row-h:39px}.window:has(.rows>li:nth-child(9)){--min-g:16px;--row-top:64px;--row-gap:16px;--row-h:16px}.row{left:10px;right:10px}}@media (width>=760px){.drop-device{padding:16px}}@media (width>=1100px){.drop-device{width:min(var(--page), 100% - 120px);height:clamp(660px, calc(100svh - var(--chrome)), 920px);grid-template:"window head""window panel"minmax(0,1fr)/minmax(0,1fr) 420px;gap:8px 18px;margin:0 auto;padding:16px}.drop-head,.drop-panel{padding-left:18px;position:relative}.drop-head:before,.drop-panel:before{content:"";background:linear-gradient(90deg,#78685838,#ffffffe6);border-radius:3px;width:6px;position:absolute;left:0;box-shadow:inset 1px 0 2px #3c2c1e40}.drop-head:before{top:10px;bottom:-12px}.drop-panel:before{top:0;bottom:10px}.drop-title{font-size:22px}.window{--hopper-half:46px;--row-top:97px;--row-gap:40px;--row-h:39px;border-radius:26px;height:auto}.window:has(.rows>li:nth-child(9)){--min-g:23px;--row-top:96px;--row-gap:23px;--row-h:23px;height:auto}.slot{height:74px;top:14px}.slot-name{font-size:21px}.slot-a{left:14px}.slot-b{right:14px}.row{letter-spacing:normal;gap:4px;padding:2px 4px 0;font-size:12.5px;left:10px;right:10px}.window:has(.rows>li:nth-child(9)) .row{padding:0 6px;font-size:11px;line-height:1.05}.window:has(.rows>li:nth-child(9)) .row-name,.window:has(.rows>li:nth-child(9)) .row-vote{transform:translateY(-2px)}.ends{height:26px;font-size:var(--fs-2xs);padding:0 12px 4px}.sim-tag{margin:0 12px 6px;padding-top:5px;font-size:12px;line-height:1.2}.drop .verdict{font-size:18px}.drop .detail{font-size:12.5px}.lens-knob .knob-options{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:5px 6px}.lens-knob .knob-options .key{min-height:44px;padding:4px 7px;font-size:11.5px}.drop-key{border-radius:16px;min-height:54px}.drop-key .drop-label{font-size:21px}.ticket{overscroll-behavior:contain;scrollbar-width:thin;flex:auto;min-height:0;overflow-y:auto}.ticket[data-open]{animation:ticket-in .26s var(--ease)}.drop-intro{display:none}.drop-below{width:min(var(--page), 100% - 200px)}.cable{z-index:-1;pointer-events:none;background:url(/img/cable.svg) 0 0/110px 800px no-repeat;width:110px;height:800px;max-height:calc(100svh - 80px);position:absolute;top:40px;left:calc(100% - 4px)}}@keyframes ticket-in{0%{opacity:.2;transform:translateY(-12px)}}.cable{display:none}@media (width>=1500px){.cable{display:block}}
