.capture-tools{display:flex;gap:8px;margin:8px auto 0;max-width:520px;justify-content:center;flex-wrap:wrap}
.capture-tools .btn{min-height:42px;white-space:normal;font-size:12px;padding:8px 12px}
.capture-tools .btn:disabled{opacity:.55;cursor:default}
#btn-capture{border-color:#85dec0;color:#b6ffe6;background:#173c36e8}
.capture-panel{position:absolute;z-index:55;left:50%;top:32%;transform:translate(-50%,-12%);width:min(400px,calc(100% - 32px));padding:22px;border:1px solid #8ad9bd;border-radius:20px;background:linear-gradient(145deg,#152f2ff5,#111824fa);box-shadow:0 15px 80px #000a;text-align:center;pointer-events:auto}
.capture-panel[hidden]{display:none}.capture-panel h2{margin:0 0 8px;color:#c4ffe9;font-size:23px}.capture-panel p{font-size:13px;line-height:1.7;color:#ccdbd5;margin:8px 0 14px}
.capture-sequence{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:14px 0}.capture-sequence span{display:grid;place-items:center;width:32px;height:38px;border:1px solid #54716b;border-radius:8px;color:#b9ccc7;background:#102824}.capture-sequence .done{color:#75edc7;background:#21624e;border-color:#6aefc4}.capture-sequence .current{outline:2px solid #f9dc8c;color:#ffe3a0}
.capture-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.capture-choices button{font-size:20px;min-height:52px}.capture-countdown{color:#f2d992;font-variant-numeric:tabular-nums;font-size:14px}.capture-complete{font-size:16px;color:#bcffe1}
.capture-panel[data-stage=binding],.capture-panel[data-stage=settling]{top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:18px 20px;background:linear-gradient(145deg,#152f2fee,#111824f5)}
.capture-panel[data-stage=binding] h2,.capture-panel[data-stage=settling] h2{font-size:21px}.capture-panel[data-stage=binding] p,.capture-panel[data-stage=settling] p{margin:4px 0 8px;font-size:12px}
#screen-ar:has(.capture-panel:not([hidden])) .hud-bottom{visibility:hidden;pointer-events:none}
.gm.capturable{filter:drop-shadow(0 0 6px #70e9b0)}.gm.capturable:after{content:'結';position:absolute;right:-5px;top:-5px;background:#135043;color:#c0ffe4;border:1px solid #78d9b7;border-radius:50%;font:bold 11px serif;width:19px;height:19px;display:grid;place-items:center}
@media(max-height:650px){.capture-panel{top:20%;padding:16px}.capture-tools{margin-top:3px}.capture-tools .btn{min-height:34px;padding:4px 9px}.capture-panel h2{font-size:20px}}

/* Keep the spirit in the playfield. The capture is a physical gesture, not a modal quiz. */
.capture-panel[data-stage=ritual]{inset:0;left:0;top:0;transform:none;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:linear-gradient(180deg,#091d2600 45%,#07182096 100%);box-shadow:none;pointer-events:none}
.capture-panel[data-stage=ritual] h2{position:absolute;left:15px;right:15px;top:15.5%;margin:0;font:600 23px/1.2 var(--serif);color:#dbf9e6;text-shadow:0 2px 18px #00140f}
.capture-panel[data-stage=ritual] #capture-desc{position:absolute;left:15px;right:15px;top:20%;margin:0;color:#9fcec4;font-size:12px;letter-spacing:.12em}
.capture-panel[data-stage=ritual] #capture-countdown{position:absolute;right:20px;bottom:24px;color:#8eafa8;font-size:11px;margin:0}
.capture-ritual{position:absolute;inset:0;display:block;pointer-events:none;touch-action:none}.capture-ritual[hidden]{display:none}
.seal-core{position:absolute;z-index:3;display:grid;place-items:center;transform:translate(-50%,-50%);width:86px;height:86px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle,#e8fff717 0,#6affe518 36%,#62ddad09 60%,transparent 70%);pointer-events:auto;touch-action:none;cursor:grab;color:#e2fff2;filter:drop-shadow(0 0 18px #42d5b063)}
.seal-core:active{cursor:grabbing}.seal-core>i{display:block;width:22px;height:22px;transform:rotate(45deg);border:1px solid #c1ffe7;background:linear-gradient(145deg,#e1fff899,#6cd7d522);box-shadow:0 0 15px #98ffdb55,inset 0 0 10px #effff54d}
.seal-core:focus-visible{outline:2px solid #f2dcad;outline-offset:3px}.seal-core-label{position:absolute;top:100%;width:120px;text-align:center;font-size:11px;letter-spacing:.15em;text-shadow:0 2px 8px #00130b}.seal-core:disabled{pointer-events:none}.capture-ritual[data-phase=dragging] .seal-core-label,.capture-ritual[data-phase=sealing] .seal-core-label,.capture-ritual[data-phase=captured] .seal-core-label{display:none}
.seal-gate{position:absolute;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:50%;border:1px solid #94e4c174;background:radial-gradient(circle,#173b3522,transparent 70%);box-shadow:0 0 28px #6cfac213,inset 0 0 25px #80cfa516;color:#bae1bb;display:grid;place-items:center}
.seal-gate:before{content:'';position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(#e4efb9 var(--seal-progress,0deg),transparent 0);mask:radial-gradient(transparent 65%,#000 66%,#000 68%,transparent 69%)}
.seal-gate>i{position:absolute;inset:11px;border:1px dashed #aee1c847;border-radius:50%}.seal-gate>i:nth-child(2){inset:28px;border-style:solid;transform:rotate(45deg);border-radius:10px}.seal-gate>span{font:400 25px var(--serif);opacity:.5}.capture-ritual[data-in-gate=true] .seal-gate{border-color:#e4ecc3;box-shadow:0 0 35px #bcffc233,inset 0 0 35px #98e8c530}
.seal-gesture-hint{position:absolute;left:15px;right:15px;top:89%;margin:0!important;color:#d1e9d6!important;font-size:13px!important;letter-spacing:.04em;text-shadow:0 2px 15px #011a14}
.seal-guideline{position:absolute;left:50%;top:44%;height:21%;border-left:1px dashed #8bdbc74d;mask:linear-gradient(transparent,#000 20%,#000 70%,transparent);opacity:.6}.capture-ritual[data-phase=dragging] .seal-guideline,.capture-ritual[data-phase=sealing] .seal-guideline,.capture-ritual[data-phase=captured] .seal-guideline{display:none}
#screen-ar:has(.capture-panel[data-stage=ritual]:not([hidden])) .encounter-director,#screen-ar:has(.capture-panel[data-stage=ritual]:not([hidden])) #enemy-technique,#screen-ar:has(.capture-panel[data-stage=ritual]:not([hidden])) #action-title{visibility:hidden}
#screen-ar:has(.capture-panel[data-stage=ritual]:not([hidden])) #ghost-img{opacity:calc(1 - var(--seal-charge,0)*.95);filter:drop-shadow(0 0 15px #65edca77);transition:filter .3s}
.capture-ritual[data-phase=captured] .seal-core,.capture-ritual[data-phase=captured] .seal-gate>span{opacity:0}
@media(max-height:650px){.capture-panel[data-stage=ritual] h2{font-size:20px;top:16%}.capture-panel[data-stage=ritual] #capture-desc{top:21%}.seal-gate{width:110px;height:110px}.seal-core{width:76px;height:76px}.seal-gesture-hint{top:91%}}
@media(prefers-reduced-motion:reduce){.seal-core,.seal-gate,#screen-ar:has(.capture-panel[data-stage=ritual]) #ghost-img{transition:none;animation:none}}
