/* v19 UI layer: medallion theme, skill screens, summon screens, landscape guard */
:root{
  --v19-gold:#f2c14e;--v19-gold-hi:#ffe9a8;--v19-gold-lo:#b9822a;--v19-line:#c8932a;
  --v19-ink:#fff6dc;--v19-dim:rgba(255,246,220,.7);--v19-bg0:#2c2354;--v19-bg1:#17122e;--v19-bg2:#0d0a1e;
  --v19-panel-a:#2b2052;--v19-panel-b:#17122e;--v19-btn:rgba(36,26,69,.92);--v19-teal:#4ed1c5;--v19-good:#3ddc97;--v19-bad:#ff4d5e;
  --v19-common:#c8d6d9;--v19-rare:#67bfff;--v19-epic:#c88bff;--v19-legend:#ffcc65;
}
/* ---------- layer + stage ---------- */
.v19-layer{position:fixed;inset:0;z-index:9000;background:radial-gradient(120% 90% at 50% 0%,var(--v19-bg0) 0%,var(--v19-bg1) 60%,var(--v19-bg2) 100%);font-family:'Kanit',Tahoma,"Leelawadee UI","Noto Sans Thai",system-ui,sans-serif;color:var(--v19-ink);overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.v19-layer.hidden{display:none}
.v19-stage{position:absolute;left:0;top:0;width:844px;height:390px;transform-origin:0 0}
.v19-stage *{box-sizing:border-box}
.v19-abs{position:absolute}
.v19-ol{text-shadow:-1px 0 #1a1230,1px 0 #1a1230,0 -1px #1a1230,0 1px #1a1230}
.v19-title{position:absolute;left:101px;top:12px;font-size:22px;font-weight:700;color:var(--v19-gold);line-height:40px;white-space:nowrap}
.v19-round{position:absolute;width:44px;height:44px;padding:0;border-radius:22px;border:1px solid rgba(242,193,78,.5);background:var(--v19-btn);color:var(--v19-gold);display:flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}
.v19-round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v19-round:focus-visible,.v19-cta:focus-visible,.v19-ghost:focus-visible,.v19-tab:focus-visible,.v19-tile:focus-visible{outline:2px solid var(--v19-gold-hi);outline-offset:2px}
.v19-cta{border:2px solid #fff3c4;background:linear-gradient(180deg,var(--v19-gold-hi),#e3b04b 55%,var(--v19-gold-lo));color:#1a1305;font:inherit;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:22px}
.v19-cta:disabled{filter:grayscale(.85) brightness(.7);cursor:not-allowed}
.v19-ghost{border:1px solid #e3b04b;background:var(--v19-btn);color:var(--v19-gold);font:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:22px}
.v19-ghost:disabled{opacity:.45;cursor:not-allowed}
.v19-pill{position:absolute;height:28px;padding:0 8px 0 3px;display:flex;align-items:center;gap:6px;border-radius:14px;background:rgba(19,15,43,.88);border:1px solid var(--v19-line);font-size:12px;font-weight:600;white-space:nowrap}
.v19-pill i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#1a1305}
.v19-pill i svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v19-panel{position:absolute;border-radius:14px;border:2px solid var(--v19-line);background:linear-gradient(180deg,var(--v19-panel-a),var(--v19-panel-b));box-shadow:inset 0 0 0 1px rgba(255,236,170,.25),0 4px 10px rgba(0,0,0,.45)}
.v19-eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--v19-gold)}
.v19-chip{display:inline-block;font-size:10px;font-weight:600;line-height:1;padding:3px 7px;border-radius:7px;border:1px solid rgba(242,193,78,.6);background:rgba(242,193,78,.16);color:var(--v19-gold);white-space:nowrap}
.v19-chip.common{border-color:rgba(200,214,217,.6);background:rgba(200,214,217,.12);color:var(--v19-common)}
.v19-chip.rare{border-color:rgba(103,191,255,.7);background:rgba(103,191,255,.14);color:#8fd1ff}
.v19-chip.epic{border-color:rgba(200,139,255,.7);background:rgba(200,139,255,.16);color:#d9a8ff}
.v19-chip.legendary{border-color:rgba(255,204,101,.8);background:rgba(255,204,101,.16);color:var(--v19-gold-hi)}
.v19-hl{color:var(--v19-gold-hi);font-weight:700}
.v19-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(242,193,78,.7) rgba(255,255,255,.1)}
.v19-scroll::-webkit-scrollbar{width:4px}.v19-scroll::-webkit-scrollbar-thumb{background:rgba(242,193,78,.7);border-radius:2px}
/* ---------- tabs ---------- */
.v19-tab{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--v19-gold);background:var(--v19-btn);color:var(--v19-gold);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.v19-tab.on{background:var(--v19-gold);color:#1a1305}
.v19-tab.common{border-color:var(--v19-common);color:var(--v19-common)}.v19-tab.rare{border-color:var(--v19-rare);color:#8fd1ff}.v19-tab.epic{border-color:var(--v19-epic);color:#d9a8ff}.v19-tab.legendary{border-color:var(--v19-legend);color:var(--v19-gold-hi)}
.v19-tab.on.common,.v19-tab.on.rare,.v19-tab.on.epic,.v19-tab.on.legendary{background:var(--v19-gold);color:#1a1305}
/* ---------- skill grid ---------- */
.v19-grid{display:grid;grid-template-columns:repeat(6,74px);gap:5px;align-content:start}
.v19-tile{position:relative;width:74px;height:88px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;display:block}
.v19-tile .m{position:absolute;left:11px;top:0}
.v19-tile .n{position:absolute;left:0;top:55px;width:74px;text-align:center;font-size:10px;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v19-tile .v{position:absolute;left:0;top:67px;width:74px;text-align:center;font-size:10px;line-height:1.1;color:var(--v19-gold-hi)}
.v19-tile .f{position:absolute;left:10px;top:81px;width:54px;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.v19-tile .f b{display:block;height:3px;border-radius:2px;background:var(--v19-teal)}
.v19-empty{position:absolute;left:325px;top:120px;width:470px;text-align:center;font-size:13px;line-height:1.6;color:var(--v19-dim)}
/* ---------- detail ---------- */
.v19-dim{position:absolute;inset:0;background:rgba(6,8,16,.62)}
.v19-seg{position:absolute;top:210px;width:30px;height:10px;border-radius:5px;transform:skewX(-20deg);border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1)}
.v19-seg.on{background:linear-gradient(180deg,var(--v19-gold-hi),#e3b04b)}
.v19-bar{position:absolute;height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.v19-bar b{display:block;height:6px;border-radius:3px;background:var(--v19-teal)}
.v19-bar.pity{height:8px;transform:skewX(-20deg)}
.v19-bar.pity b{height:8px;background:linear-gradient(90deg,var(--v19-epic),var(--v19-gold-hi))}
.v19-row{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.45;color:rgba(255,246,220,.94)}
.v19-row i{flex:0 0 6px;height:6px;margin-top:6px;border-radius:50%;background:var(--v19-good)}
.v19-row.note i{background:#6ee7ff}
/* ---------- summon ---------- */
@keyframes v19Pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.06)}}
@keyframes v19Spin{to{transform:rotate(360deg)}}
@keyframes v19Pop{0%{opacity:0;transform:translateY(10px) scale(.7)}70%{transform:translateY(-2px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes v19Shine{0%,100%{filter:drop-shadow(0 0 4px rgba(255,204,101,.4))}50%{filter:drop-shadow(0 0 14px rgba(255,204,101,.95))}}
.v19-orb{position:absolute;left:322px;top:70px;width:200px;height:200px}
.v19-orb .glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(200,139,255,.55),rgba(200,139,255,0) 68%);animation:v19Pulse 2.6s ease-in-out infinite}
.v19-orb .ring{position:absolute;inset:0;animation:v19Spin 24s linear infinite}
.v19-res{position:absolute;width:100px;height:116px;opacity:0;animation:v19Pop .5s cubic-bezier(.2,.9,.3,1.2) forwards}
.v19-res.legendary .m{animation:v19Shine 1.6s ease-in-out infinite}
.v19-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px}
.v19-tag.new{background:var(--v19-bad);color:#fff}.v19-tag.dup{background:rgba(78,209,197,.2);color:var(--v19-teal)}
.v19-offer{position:relative;height:74px;border-radius:12px;border:1px solid rgba(242,193,78,.4);background:rgba(10,16,30,.55);padding:6px 8px 6px 64px}
.v19-offer .m{position:absolute;left:6px;top:7px}
.v19-offer b{display:block;font-size:12px;line-height:1.2}
.v19-offer small{display:block;font-size:10px;color:var(--v19-dim);line-height:1.25;margin-top:1px;max-height:25px;overflow:hidden}
.v19-offer button{position:absolute;right:8px;bottom:6px;height:26px;padding:0 10px;font-size:11px;border-radius:13px}
@media (prefers-reduced-motion:reduce){.v19-orb .glow,.v19-orb .ring,.v19-res,.v19-res.legendary .m,#v19Rotate svg{animation:none!important}.v19-res{opacity:1}}
#toast{z-index:9500!important}

.v19-pill .pimg{width:26px;height:26px;margin:-2px 0 -2px -2px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.v19-orb,.v19-orb *{pointer-events:none}.v19-tab{position:relative;z-index:3}