/* kart takası */
body.tr-lock{overflow:hidden}
.tr-btn{margin-right:8px}
.tr-ov{position:fixed;inset:0;z-index:9000;background:radial-gradient(120% 80% at 50% 0,#1b2f66 0,#0d1630 60%,#080d20 100%);color:#eaf0ff;display:flex;justify-content:center;overflow:hidden;animation:trIn .25s ease both}
@keyframes trIn{from{opacity:0}to{opacity:1}}
.tr-box{position:relative;width:min(1080px,100%);height:100%;display:flex;flex-direction:column;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));min-height:0}
.tr-h{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.tr-hi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12)}
.tr-with{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:99px;background:rgba(255,255,255,.1);font-weight:700;font-size:.9rem}
.tr-with .uav{--s:28px}
.tr-hint{font-size:.8rem;color:#b9c8f5;text-align:right;max-width:52%}
.tr-tables{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tr-side{position:relative;padding:10px 10px 12px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:2px solid rgba(255,255,255,.14);transition:border-color .25s,box-shadow .25s}
.tr-side.ok{border-color:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.tr-side h4{margin:0 0 8px;font-size:.88rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tr-okb{font-style:normal;font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:99px;background:#16a34a;color:#fff}
.tr-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.tr-slot{aspect-ratio:3/4;border-radius:10px;border:2px dashed rgba(255,255,255,.18);background:rgba(0,0,0,.18)}
.tr-c{position:relative;aspect-ratio:3/4;border-radius:10px;padding:2px;background:var(--g);overflow:hidden;cursor:default;box-shadow:0 4px 12px rgba(0,0,0,.4);user-select:none}
.tr-cim{position:absolute;inset:2px;border-radius:8px;overflow:hidden;background:#0b1330}
.tr-cim img{width:100%;height:100%;object-fit:cover;display:block}
.tr-cim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.tr-cp{position:absolute;top:4px;right:4px;z-index:2;min-width:22px;height:22px;padding:0 5px;border-radius:99px;background:var(--g);color:#111;font-weight:900;font-size:.74rem;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.tr-ct{position:absolute;top:5px;left:5px;z-index:2;font-size:.5rem;font-weight:900;letter-spacing:.04em;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;text-transform:uppercase}
.tr-c b{position:absolute;left:6px;right:6px;bottom:5px;z-index:2;font-size:.66rem;line-height:1.1;color:#fff;text-shadow:0 1px 3px #000}
.tr-cw{position:absolute;left:6px;bottom:30px;z-index:2;display:flex;gap:2px}
.tr-cd{position:absolute;left:6px;top:28px;z-index:2;font-style:normal;font-size:.56rem;font-weight:800;padding:1px 6px;border-radius:6px;background:#2F55D4;color:#fff}
.tr-c.rm,.tr-c.pk{cursor:pointer;transition:transform .15s}
.tr-c.rm:hover,.tr-c.pk:hover{transform:translateY(-3px) scale(1.03)}
.tr-c.rm::before{content:"×";position:absolute;z-index:3;right:3px;bottom:3px;width:16px;height:16px;border-radius:50%;background:rgba(220,38,38,.9);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.9rem;line-height:1}
.tr-c.locked{filter:saturate(.8)}
.tr-slots.lock .tr-c{cursor:not-allowed}
.tr-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tr-b{min-width:130px;padding:11px 20px;border-radius:12px;border:0;font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;color:#fff;position:relative;overflow:hidden}
.tr-b.yes{background:linear-gradient(135deg,#22c55e,#15803d)}
.tr-b.raise{background:linear-gradient(135deg,#f59e0b,#b45309)}
.tr-b.no{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.tr-b:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.tr-b:not(:disabled):hover{filter:brightness(1.1)}
.tr-b.raise.cd{opacity:.6;cursor:default}
.tr-b.raise.cd::after{content:"";position:absolute;left:0;bottom:0;height:4px;background:#fff;animation:trCd var(--cd,3s) linear forwards}
@keyframes trCd{from{width:100%}to{width:0}}
.tr-pick{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);padding:10px}
.tr-ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tr-ph h4{margin:0;font-size:.92rem}
.tr-ph small{color:#9fb0e4;font-size:.76rem}
.tr-q{margin-left:auto}
.tr-q input{padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.84rem;width:150px}
.tr-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:max-content;gap:10px;align-content:start;padding:4px 2px 8px}
.tr-grid .tr-c{width:100%;align-self:start}
.tr-grid.lock .tr-c.pk{opacity:.45;cursor:not-allowed}
.tr-empty{grid-column:1/-1;text-align:center;color:#9fb0e4;margin:20px 0}
.tr-bubs{position:absolute;left:12px;right:12px;bottom:calc(100% - 6px);z-index:6;pointer-events:none}
.tr-bub{display:inline-block;padding:7px 14px;border-radius:14px;background:#fff;color:#101a3a;font-weight:800;font-size:.86rem;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:bubIn .28s cubic-bezier(.2,1.4,.4,1) both;transition:opacity .35s}
.tr-bub.out{opacity:0}
.tr-cdn{position:fixed;inset:0;z-index:20;background:rgba(5,8,22,.82);display:grid;place-items:center;text-align:center;backdrop-filter:blur(4px)}
.tr-cdn[hidden],.tr-end[hidden]{display:none}
.tr-cdn small{display:block;font-size:1rem;color:#cfe0ff;margin-bottom:6px}
.tr-cdn b{display:block;font-size:7rem;line-height:1;font-weight:900;color:#fff;margin-bottom:14px;text-shadow:0 0 40px rgba(74,222,128,.7)}
.tr-end{position:fixed;inset:0;z-index:30;background:rgba(5,8,22,.9);display:grid;place-items:center;padding:16px;overflow:auto}
.tr-endc{width:min(560px,100%);text-align:center;display:grid;gap:10px;justify-items:center}
.tr-endc h2{margin:0;font-size:1.6rem}
.tr-endc.ok h2{color:#4ade80}
.tr-endc.bad h2{color:#fca5a5}
.tr-endc h4{margin:6px 0 0;font-size:.9rem;color:#b9c8f5}
.tr-endc p{margin:0;color:#cfe0ff}
.tr-endg{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tr-endg .tr-c{width:84px}
.tr-side .tr-cw,.tr-side .tr-cd{display:none}
.np-ic.k-trade{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff}
@media (max-width:700px){
  .tr-box{padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .tr-tables{gap:8px}
  .tr-side{padding:7px 7px 9px}
  .tr-side h4{font-size:.76rem;margin-bottom:6px}
  .tr-slots{gap:5px;grid-template-columns:repeat(3,1fr)}
  .tr-cp{min-width:20px;height:20px;font-size:.68rem;padding:0 4px;top:3px;right:3px}
  .tr-ct,.tr-cw,.tr-cd{display:none}
  .tr-c b{font-size:.56rem;left:4px;right:4px;bottom:4px}
  .tr-hint{max-width:100%;flex-basis:100%;text-align:left;order:9}
  .tr-h{flex-wrap:wrap;gap:6px 8px}
  .tr-b{min-width:0;flex:1;padding:10px 8px;font-size:.84rem}
  .tr-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px}
  .tr-q input{width:110px}
  .tr-ph small{display:none}
}