/* çekilişli mod */
.dr{max-width:600px;margin:0 auto;padding:14px 12px 40px;color:#fff;min-height:100vh;background:#070c20}
#battle:has(.dr){background:#070c20}
.dr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.dr-top h1{margin:0;font-size:1.3rem}.dr-sub{margin:3px 0 0;font-size:.78rem;opacity:.7}
.dr-quit{flex:none;border:0;border-radius:10px;padding:8px 14px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.dr-turn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.1);margin-bottom:12px;font-size:.9rem}
.dr-turn.mine{border-color:#35c46b;background:rgba(53,196,107,.14)}
.dr-who b.me{color:#6ee79a}
.dr-clock{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center}
.dr-clock svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dr-clock .bg{fill:none;stroke:rgba(255,255,255,.15);stroke-width:3}
.dr-clock .fg{fill:none;stroke:#5b8cff;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .1s linear}
.dr-turn.mine .fg{stroke:#35c46b}
.dr-clock.warn .fg{stroke:#ff4d6d}.dr-clock.warn b{color:#ff4d6d}
.dr-clock b{font-size:1.05rem}
.dr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dr-c{position:relative;padding:0;border:0;background:none;border-radius:12px;cursor:default;transition:transform .15s,opacity .2s}
.dr-grid.mine .dr-c:not([disabled]){cursor:pointer}
.dr-grid.mine .dr-c:not([disabled]):hover{transform:translateY(-4px) scale(1.04);z-index:2}
.dr-grid.mine .dr-c:not([disabled]):active{transform:scale(.97)}
.dr-c .bt-card{pointer-events:none}
.dr-c.taken{opacity:.45;filter:grayscale(.6)}
.dr-c.taken.me{outline:3px solid #35c46b;outline-offset:-1px}
.dr-c.taken.foe{outline:3px solid #ff6b81;outline-offset:-1px}
.dr-by{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.75);font-size:.7rem;font-weight:800;white-space:nowrap}
.dr-trays{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.dr-tray{padding:10px;border-radius:14px;background:rgba(255,255,255,.06)}
.dr-tray h3{margin:0 0 8px;display:flex;justify-content:space-between;font-size:.8rem;opacity:.9}.dr-tray h3 em{font-style:normal;opacity:.7}
.dr-row{display:flex;flex-wrap:wrap;gap:4px;min-height:34px}
.dr-mini{position:relative;width:30px;aspect-ratio:5/7;border-radius:5px;overflow:hidden;border:2px solid var(--tc,#888);background:#141a30}
.dr-mini img{width:100%;height:100%;object-fit:cover;display:block}
.dr-mini b{position:absolute;right:0;bottom:0;font-size:.6rem;padding:0 3px;background:rgba(0,0,0,.7);border-top-left-radius:4px}
.dr-mini.t-bronze{--tc:#c98a55}.dr-mini.t-silver{--tc:#c4ccdc}.dr-mini.t-gold{--tc:#f2c14e}.dr-mini.t-diamond{--tc:#6ad6ff}.dr-mini.t-holo{--tc:#c785ff}
@media(max-width:520px){.dr-grid{gap:5px;grid-template-columns:repeat(4,1fr)}.dr-trays{grid-template-columns:1fr}.dr{padding:10px 8px 30px}}
.dr-fun{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:#f5b82e;color:#2a1c00;vertical-align:middle;margin-left:6px}
.dr-cf{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(4,8,22,.72);backdrop-filter:blur(4px);animation:drCf .18s ease-out}
.dr-cf-box{width:min(340px,100%);padding:22px 20px 16px;border-radius:20px;background:linear-gradient(180deg,#18244f,#0e1636);border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px rgba(0,0,0,.6);color:#fff;text-align:center}
.dr-cf-box h3{margin:0 0 6px;font-size:1.1rem}.dr-cf-box p{margin:0 0 16px;font-size:.88rem;opacity:.75}
.dr-cf-a{display:flex;gap:10px}.dr-cf-a button{flex:1;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.dr-cf-a .dr-cf-y{background:linear-gradient(180deg,#ff5a43,#c91f33);border-color:#ffd66b}
@keyframes drCf{from{opacity:0}to{opacity:1}}
@media(min-width:900px){
.dr{max-width:min(1500px,100% - 32px);min-height:0;padding:10px 12px 16px}
.dr-top{margin-bottom:6px}.dr-top h1{font-size:1.15rem}
.dr-turn{padding:6px 14px;margin-bottom:8px}.dr-clock{width:38px;height:38px}
.dr-grid{grid-template-columns:repeat(12,1fr);gap:8px}
.dr-trays{margin-top:10px}.dr-row{flex-wrap:nowrap}.dr-mini{width:auto;flex:1;max-width:44px}
}
.dr-mini.t-series{--tc:#ff9a3d}.dr-mini.t-mystery{--tc:#9a7bff}