/* Isekai "System Window" theme: translucent holographic panels in deep blue, cyan glow lines, gold corner brackets.
   Loaded after style.css; only restyles, layout positions stay in style.css. */
:root{
  --sys:#7fe3ff; --sys2:#3aa6e8; --sysd:rgba(127,227,255,.5); --gold:#f0cc6e; --gold2:#b8862e;
  --panel:rgba(9,20,44,.84); --panel2:rgba(16,36,72,.9); --ink-s:#e6f6ff; --muted-s:#93b6cc;
  --hp:#ff5470; --mp:#4f9dff; --xp:#6ef0c8; --jx:#f0cc6e;
  --head:"Cinzel","Kanit",serif; --thai:"Kanit","Sarabun",sans-serif; --num:"Pixelify Sans",monospace;
}
body{background:#050a18;color:var(--ink-s)}
.frame{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--sysd);outline:none;border-radius:4px;
  box-shadow:0 0 0 1px rgba(4,10,24,.9),0 0 22px rgba(80,190,255,.22),inset 0 0 28px rgba(80,190,255,.10),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* gold L-shaped corner brackets */
.frame::after{content:"";position:absolute;inset:-3px;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) top left/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) top left/2px 12px no-repeat,
    linear-gradient(var(--gold),var(--gold)) top right/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) top right/2px 12px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom left/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom left/2px 12px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom right/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom right/2px 12px no-repeat}
/* window title tab */
.frame[data-title]::before{content:"◆ " attr(data-title) " ◆";position:absolute;top:-10px;left:12px;padding:0 8px;font:600 10px/18px var(--head);letter-spacing:.18em;color:var(--gold);
  background:linear-gradient(90deg,rgba(9,20,44,0),#0a1830 15%,#0a1830 85%,rgba(9,20,44,0));text-shadow:0 0 8px rgba(240,204,110,.5);white-space:nowrap}
.pix{font-family:var(--num)}

/* HUD */
#hud{padding:10px 12px 10px 10px;gap:10px}
#face{border:1px solid var(--sys);border-radius:50%;background:radial-gradient(circle at 40% 35%,#24467a,#0b1530);box-shadow:0 0 12px rgba(127,227,255,.45),inset 0 0 10px rgba(0,0,0,.6)}
#hud .nm{font:600 14px var(--thai);color:#fff;text-shadow:0 0 8px rgba(127,227,255,.6)}
#hud .nm #lv{font:500 11px var(--num);color:var(--sys)}
.rank{background:linear-gradient(180deg,#ffe39a,var(--gold2));color:#2a1a08;font:700 11px var(--head);border-radius:3px;padding:0 6px;box-shadow:0 0 8px rgba(240,204,110,.5)}
.bar{height:12px;background:rgba(0,8,20,.75);border:1px solid rgba(127,227,255,.35);border-radius:6px;overflow:hidden}
.bar i{border-radius:6px;box-shadow:0 0 8px currentColor}
.bar i::after{inset:1px 2px 55% 2px;border-radius:6px;background:rgba(255,255,255,.35)}
#hpb{background:linear-gradient(90deg,#c0203a,var(--hp))!important;color:#ff5470}
#mpb{background:linear-gradient(90deg,#2050c0,var(--mp))!important;color:#4f9dff}
#xpb{background:linear-gradient(90deg,#20a080,var(--xp))!important;color:#6ef0c8}
#jxb{background:linear-gradient(90deg,#a87020,var(--jx))!important;color:#f0cc6e}
.bar span{font:10px/12px var(--num);text-shadow:0 0 3px #000,0 0 2px #000}
.gold{font:12px var(--num);color:var(--gold)}

/* map + quest */
#mapbox{padding:8px}
#mini{border:1px solid var(--sysd);border-radius:3px;box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
#mapbox .row{font:500 11px var(--thai);color:var(--sys)}
#track{padding:12px 12px 10px;font:13px/1.5 var(--thai);color:var(--ink-s)}
#track h4{font:600 12px var(--thai);color:var(--gold);letter-spacing:.02em;border-bottom:1px solid rgba(127,227,255,.2);padding-bottom:2px;margin-bottom:4px}
#track .ok{color:var(--xp)}

/* system log: no heavy frame, just a glass strip */
#log{background:linear-gradient(90deg,rgba(6,14,32,.82),rgba(6,14,32,.45));border:none;border-left:2px solid var(--sys);box-shadow:none;border-radius:0 4px 4px 0;font:12.5px/1.5 var(--thai);padding:8px 12px}
#log::after{display:none}

/* hotbar */
#bar{padding:8px 10px;gap:8px;border-radius:30px}
#bar::after{inset:-3px 18px}
.slot{background:radial-gradient(circle at 50% 35%,#16305a,#071228);border:1px solid var(--sysd);border-radius:10px;color:var(--ink-s);box-shadow:inset 0 0 10px rgba(80,190,255,.25);transition:box-shadow .15s,transform .15s}
.slot:hover,.slot:focus-visible{border-color:var(--sys);box-shadow:0 0 14px rgba(127,227,255,.6),inset 0 0 12px rgba(127,227,255,.3);transform:translateY(-2px);outline:none}
.slot kbd{font:600 10px var(--head);color:var(--gold);top:2px;left:5px}
.slot em{font:10px var(--num);color:#fff;text-shadow:0 0 3px #000}
.slot .cd{border-radius:10px;background:conic-gradient(rgba(2,8,20,.78) var(--p,0%),transparent 0)}
.slot .tip{background:#0a1830;border:1px solid var(--sysd);color:var(--ink-s);border-radius:4px;padding:4px 8px;font:12px var(--thai);box-shadow:0 0 12px rgba(80,190,255,.3)}

/* menu & small buttons */
#menu{padding:8px;gap:5px}
.sbtn{font:500 12px var(--thai);background:linear-gradient(180deg,rgba(40,90,150,.55),rgba(14,32,64,.7));color:var(--ink-s);border:1px solid rgba(127,227,255,.4);border-radius:3px;padding:4px 10px;cursor:pointer;transition:all .12s}
.sbtn:hover,.sbtn:focus-visible{border-color:var(--sys);color:#fff;box-shadow:0 0 10px rgba(127,227,255,.5);outline:none}
#menu .sbtn::before{content:"▸ ";color:var(--gold)}

/* dialog: system window with a name plate */
#dlg{background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--ink-s);border-color:var(--sysd);padding:20px 18px 16px;gap:16px}
#dlg canvas{border:1px solid var(--sys);border-radius:6px;background:radial-gradient(circle at 50% 30%,#24467a,#0b1530);box-shadow:0 0 14px rgba(127,227,255,.4)}
#dlg h3{position:absolute;top:-14px;left:100px;margin:0;padding:3px 14px;font:600 14px var(--thai);color:#1a1206;background:linear-gradient(180deg,#ffe39a,var(--gold2));border-radius:3px;box-shadow:0 0 12px rgba(240,204,110,.5)}
#dlg p{font:15px/1.65 var(--thai);color:var(--ink-s)}
#dlg p b{color:var(--gold)}
#dlg .acts{gap:6px}
#dlg button{font:500 13px var(--thai);background:linear-gradient(180deg,rgba(40,90,150,.5),rgba(10,24,52,.8));color:var(--ink-s);border:1px solid rgba(127,227,255,.45);border-radius:3px;padding:6px 12px}
#dlg button::before{content:"▸ ";color:var(--gold)}
#dlg button:hover,#dlg button:focus-visible{border-color:var(--sys);color:#fff;box-shadow:0 0 12px rgba(127,227,255,.55);background:linear-gradient(180deg,rgba(60,130,200,.6),rgba(14,36,72,.85))}
#dlg .card{background:rgba(127,227,255,.06);border:1px solid rgba(127,227,255,.2);border-left:2px solid var(--sys);border-radius:3px;color:var(--ink-s)}
#dlg .card b{font:600 13px var(--thai);color:#fff}
#dlg small{color:var(--muted-s)}

/* inventory */
#bag{padding:14px 12px 10px;font:13px var(--thai)}
#bag h4{font:600 13px var(--thai);color:var(--gold);border-bottom:1px solid rgba(127,227,255,.2);padding-bottom:3px}
#bag .it{border-bottom:1px solid rgba(127,227,255,.1);padding:4px 0;gap:8px}
#bag small{color:var(--muted-s)}
#bag .gi,#dlg .gi{background:radial-gradient(circle,#16305a,#071228);border:1px solid var(--sysd);border-radius:4px}

/* banner: "SYSTEM MESSAGE" style */
#banner{padding:10px 40px;background:linear-gradient(90deg,transparent,rgba(9,24,52,.85) 20%,rgba(9,24,52,.85) 80%,transparent);border-top:1px solid var(--sysd);border-bottom:1px solid var(--sysd)}
#banner b{font:700 30px var(--thai);color:#fff;text-shadow:0 0 14px rgba(127,227,255,.8),0 2px 0 #000}
#banner span{font:600 12px var(--head);color:var(--gold);letter-spacing:.3em}

/* title screen with a turning magic circle */
#title{background:radial-gradient(ellipse at 50% 60%,#16305e 0%,#081430 45%,#03060f 100%)}
#title .circle{position:absolute;left:50%;top:44%;width:min(720px,140vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;opacity:.5;
  background:
    radial-gradient(circle,transparent 46%,rgba(127,227,255,.55) 46.4%,transparent 47%),
    radial-gradient(circle,transparent 39%,rgba(240,204,110,.5) 39.3%,transparent 39.8%),
    radial-gradient(circle,transparent 31%,rgba(127,227,255,.35) 31.3%,transparent 31.8%),
    repeating-conic-gradient(from 0deg,rgba(127,227,255,.35) 0 .6deg,transparent .6deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 30.5%,#000 47.5%,transparent 48%);mask:radial-gradient(circle,transparent 30%,#000 30.5%,#000 47.5%,transparent 48%);
  animation:spin 60s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#title h1{position:relative;font:700 clamp(36px,7vw,64px) var(--thai);color:#fff;text-shadow:0 0 22px rgba(127,227,255,.8),0 0 4px #7fe3ff,0 3px 0 #000}
#title h1 small{font:600 .32em var(--head);color:var(--gold);letter-spacing:.42em;text-shadow:0 0 10px rgba(240,204,110,.6)}
#title .story{position:relative;color:#bcd8ea;font:15px/1.7 var(--thai)}
.classes{position:relative}
.cls{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--sysd);outline:none;border-radius:6px;box-shadow:0 0 18px rgba(80,190,255,.2),inset 0 0 22px rgba(80,190,255,.1);color:var(--ink-s);position:relative}
.cls:hover,.cls:focus-visible{border-color:var(--sys);box-shadow:0 0 26px rgba(127,227,255,.55),inset 0 0 22px rgba(127,227,255,.2);outline:none}
.cls b{font:600 18px var(--thai);color:#fff}
.cls p{color:var(--muted-s);font:12.5px/1.5 var(--thai)}
.cls .st{font:11px var(--num);color:var(--sys)}
#cont{position:relative;font:600 14px var(--thai);background:linear-gradient(180deg,#ffe39a,var(--gold2));color:#1a1206;border:none;border-radius:4px;padding:8px 22px;box-shadow:0 0 16px rgba(240,204,110,.5)}
@media (prefers-reduced-motion:reduce){#title .circle{animation:none}}
@media (max-width:720px){#dlg h3{left:12px}#dlg{padding-top:22px}.frame[data-title]::before{font-size:9px}}
#menu{top:calc(146px + env(safe-area-inset-top,0px))}
@media (max-width:720px){#menu{top:calc(136px + env(safe-area-inset-top,0px))}}
@media (max-width:720px){#menu{max-width:calc(100% - 150px);padding:6px;gap:3px}#menu .sbtn{font-size:10.5px;padding:2px 6px}#menu .sbtn::before{content:""}#hud{padding:8px}#face{width:40px;height:40px}}
/* ===== RO-style windows (character / inventory / refine) ===== */
.win{z-index:4;padding:0;color:var(--ink-s);font:13px var(--thai)}
.win .wh{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-bottom:1px solid rgba(127,227,255,.25);background:linear-gradient(90deg,rgba(127,227,255,.12),transparent)}
.win .wh b{font:600 16px var(--thai);color:#fff;text-shadow:0 0 8px rgba(127,227,255,.5)}
.win .wh kbd{font:600 11px var(--head);color:var(--gold);border:1px solid var(--gold2);border-radius:3px;padding:0 5px}
.win .wx{margin-left:auto;width:30px;height:30px;font:700 18px/1 var(--thai);color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--sysd);border-radius:4px;cursor:pointer}
.win .wx:hover,.win .wx:focus-visible{background:#c0283c;border-color:#ff8a9a;outline:none}
.win .wb{padding:12px;max-height:calc(100vh - 140px);overflow-y:auto}
#charwin{left:max(8px,calc(50% - 470px));top:calc(70px + env(safe-area-inset-top,0px));width:min(540px,calc(100% - 16px))}
#invwin{right:max(8px,calc(50% - 470px));top:calc(70px + env(safe-area-inset-top,0px));width:min(410px,calc(100% - 16px))}
#refwin{left:50%;top:calc(60px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(560px,calc(100% - 16px))}
.gs{width:48px;height:48px;position:relative;display:grid;place-items:center;padding:0;cursor:pointer;background:radial-gradient(circle at 50% 35%,#16305a,#071228);border:1px solid var(--rc,rgba(127,227,255,.3));border-radius:8px;box-shadow:inset 0 0 8px rgba(80,190,255,.18),0 0 6px color-mix(in srgb,var(--rc) 40%,transparent);color:var(--ink-s)}
.gs img{width:32px;height:32px;image-rendering:pixelated}
.gs small{font:10px var(--thai);color:var(--muted-s)}
.gs i{position:absolute;left:3px;top:1px;font:700 10px var(--num);font-style:normal;color:var(--gold);text-shadow:0 0 3px #000}
.gs em{position:absolute;right:3px;bottom:1px;font:10px var(--num);font-style:normal;color:#fff;text-shadow:0 0 3px #000}
.gs.sel,.gs:hover,.gs:focus-visible{outline:2px solid var(--sys);outline-offset:1px}
.gs.empty{cursor:default;opacity:.35}
.det{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px;border:1px solid rgba(127,227,255,.25);border-left:2px solid var(--sys);border-radius:4px;background:rgba(127,227,255,.06)}
.det img{width:36px;height:36px;image-rendering:pixelated;flex:none;background:#071228;border:1px solid var(--sysd);border-radius:6px}
.det>div:nth-child(2){flex:1;min-width:0;line-height:1.5}
.det small{color:var(--muted-s)}.det .cmp{color:#ffb070}
.det .da{display:flex;flex-direction:column;gap:4px;flex:none}
/* character */
.cw{display:flex;gap:14px;flex-wrap:wrap}
.doll{display:flex;gap:10px;flex:1 1 230px;justify-content:center}
.doll .col{display:flex;flex-direction:column;gap:8px}
.doll .fig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:110px;border-radius:50%/40%;background:radial-gradient(ellipse at 50% 60%,rgba(127,227,255,.18),transparent 70%)}
.doll .fig canvas{width:120px;height:120px;image-rendering:pixelated}
.doll .fig b{font:600 14px var(--thai);color:#fff}.doll .fig small{font:11px var(--thai);color:var(--gold)}
.doll .setl{font:11px var(--thai);color:var(--gold);max-width:56px;line-height:1.3}
.stats{flex:1 1 220px;min-width:0}
.stats h5{margin:8px 0 4px;font:600 13px var(--head);letter-spacing:.1em;color:var(--gold)}
.lvb{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;font:11px var(--num);color:var(--sys)}
.sr{display:grid;grid-template-columns:38px 1fr 26px 22px;align-items:center;gap:6px;margin:3px 0}
.sr b{font:600 12px var(--head);color:#fff}.sr small{font:10px var(--num);color:var(--muted-s)}
.pill{display:block;text-align:center;font:12px var(--num);border:1px solid var(--sysd);border-radius:10px;padding:1px 0;background:rgba(0,10,30,.5)}
.pb{width:26px;height:22px;font:700 15px/1 var(--thai);color:var(--sys);background:transparent;border:1px solid var(--sysd);border-radius:4px;cursor:pointer}
.pb:hover:not(:disabled){background:rgba(127,227,255,.2);color:#fff}.pb:disabled{opacity:.25;cursor:default}
.pts{font:12px var(--thai);color:var(--muted-s)}.pts b{color:var(--gold);font-family:var(--num)}
.ag{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:3px 10px;font:12px var(--num)}.ag span{color:var(--muted-s);font-family:var(--head);font-size:11px}.ag b{color:#fff;font-weight:400}
/* inventory */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.tab{font:500 12px var(--thai);color:var(--muted-s);background:transparent;border:1px solid transparent;border-bottom-color:rgba(127,227,255,.25);padding:4px 10px;cursor:pointer;border-radius:4px 4px 0 0}
.tab.on,.tab:hover{color:#fff;border-color:var(--sysd);background:rgba(127,227,255,.12)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.grid .gs{width:100%;aspect-ratio:1;height:auto}
.foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid rgba(127,227,255,.2);font:12px var(--thai);color:var(--muted-s)}
.foot .zeny{margin-left:auto;color:var(--gold);font:600 14px var(--num)}
/* refine */
.rf{display:flex;gap:14px}
.rf-slots{display:flex;flex-direction:column;gap:6px}
.rf-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle,rgba(127,227,255,.25) 0 30%,transparent 31%),repeating-conic-gradient(rgba(127,227,255,.35) 0 2deg,transparent 2deg 30deg);border:2px solid var(--sysd);box-shadow:0 0 24px rgba(127,227,255,.35),inset 0 0 30px rgba(127,227,255,.2);animation:spin2 20s linear infinite}
.ring img{width:64px;height:64px;image-rendering:pixelated;animation:spin2 20s linear infinite reverse;filter:drop-shadow(0 0 8px rgba(127,227,255,.7))}
.ring.ok{animation:flashok .9s ease-out}.ring.bad{animation:flashbad .6s ease-out}
@keyframes spin2{to{transform:rotate(360deg)}}
@keyframes flashok{0%{box-shadow:0 0 80px 30px rgba(255,220,120,.9)}100%{box-shadow:0 0 24px rgba(127,227,255,.35)}}
@keyframes flashbad{0%,40%{box-shadow:0 0 50px 16px rgba(255,60,60,.8);transform:translateX(-4px)}20%,60%{transform:translateX(4px)}100%{transform:none}}
.rf-name{font:600 18px var(--thai);text-shadow:0 0 10px currentColor;padding:4px 18px;border-top:1px solid var(--sysd);border-bottom:1px solid var(--sysd);background:linear-gradient(90deg,transparent,rgba(127,227,255,.15),transparent)}
.cmp2{display:flex;align-items:center;gap:12px;justify-content:center}
.cmp2>div{display:flex;flex-direction:column;gap:1px;padding:6px 14px;border:1px solid rgba(127,227,255,.25);border-radius:6px;background:rgba(0,10,30,.4);min-width:120px}
.cmp2 small{color:var(--muted-s)}.cmp2 b{font:600 18px var(--num);color:#fff}.cmp2 span{font:12px var(--num)}.cmp2 .up{color:#7cf0a0}.cmp2 i{color:var(--gold);font-style:normal}
.mats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mat{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:84px;padding:6px;border:1px solid var(--sysd);border-radius:6px;background:rgba(0,10,30,.45);font:12px var(--num)}
.mat img{width:28px;height:28px;image-rendering:pixelated}.mat b{font:700 18px var(--num);color:var(--gold);line-height:28px}.mat small{font:10px var(--thai);color:var(--muted-s)}
.mat.lack span{color:#ff7a8a}
.rinfo{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font:12px var(--thai);color:var(--muted-s)}.rinfo b{color:var(--gold);font-family:var(--num)}
.safe{font:12px var(--thai);display:flex;gap:6px;align-items:center;color:var(--ink-s)}
.hint{margin:0;font:12px var(--thai);color:var(--muted-s)}.rf-empty{color:var(--muted-s)}
.rbtn{display:flex;gap:8px;align-items:center}
.go{font:600 15px var(--thai);color:#1a1206;background:linear-gradient(180deg,#ffe39a,var(--gold2));border:none;border-radius:5px;padding:9px 34px;cursor:pointer;box-shadow:0 0 14px rgba(240,204,110,.5)}
.go:hover:not(:disabled){filter:brightness(1.1)}.go:disabled{filter:grayscale(1);opacity:.5;cursor:default}
@media (max-width:720px){#charwin,#invwin,#refwin{left:8px;right:8px;width:auto;transform:none;top:calc(60px + env(safe-area-inset-top,0px))}.rf{flex-direction:column}.rf-slots{flex-direction:row;flex-wrap:wrap}.ring{width:120px;height:120px}}
@media (prefers-reduced-motion:reduce){.ring,.ring img{animation:none}}
#charwin{left:max(8px,calc(50% - 480px));width:min(520px,calc(100% - 16px))}#invwin{right:max(8px,calc(50% - 480px));width:min(400px,calc(100% - 16px))}
@media (max-width:720px){#bar{gap:4px;padding:5px 6px;max-width:calc(100% - 8px)}#bar .slot{width:38px;height:38px}#bar .slot canvas{width:24px;height:24px}}
/* ===== skill tree, world map, tips, quest nav ===== */
#skillwin{left:50%;top:calc(56px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(900px,calc(100% - 16px))}
.skt{display:flex;gap:14px;flex-wrap:wrap}
.cols{flex:2 1 460px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cols .col{display:flex;flex-direction:column;align-items:center;gap:0}
.arr{display:block;width:2px;height:22px;background:linear-gradient(var(--sysd),var(--gold));position:relative}
.arr::after{content:"";position:absolute;bottom:-3px;left:-3px;border:4px solid transparent;border-top-color:var(--gold)}
.sn{width:100%;max-width:170px;display:grid;justify-items:center;gap:2px;padding:6px 4px 8px;border:1px solid rgba(127,227,255,.2);border-radius:8px;background:rgba(0,10,30,.35);cursor:pointer;position:relative}
.sn.sel{border-color:var(--sys);box-shadow:0 0 14px rgba(127,227,255,.4)}
.sn.lock{opacity:.5;filter:grayscale(.7)}
.sn .req{font:10px var(--thai);color:var(--gold)}
.si{width:52px;height:52px;padding:0;border:2px solid var(--sysd);border-radius:50%;background:#071228;cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 0 10px rgba(80,190,255,.25)}
.si img{width:44px;height:44px;image-rendering:pixelated}
.sn b{font:600 13px var(--thai);color:#fff;text-align:center}.sn small{font:10px var(--thai);color:var(--muted-s)}
.lvc{display:flex;align-items:center;gap:4px;margin-top:2px}.lvc span{font:12px var(--num);min-width:44px;text-align:center;padding:1px 6px;border-radius:10px;background:#3a1420;border:1px solid #8a3040}
.lvc button{width:24px;height:22px;border-radius:4px;border:1px solid var(--sysd);font:700 14px/1 var(--thai);cursor:pointer;color:#fff}
.lvc .pl{background:linear-gradient(180deg,#5ad070,#2a8a3a)}.lvc .mn{background:linear-gradient(180deg,#8a8a9a,#4a4a5a)}.lvc button:disabled{opacity:.25;cursor:default}
.skd{flex:1 1 260px;min-width:0;padding:12px;border:1px solid var(--sysd);border-radius:8px;background:rgba(0,10,30,.45);display:flex;flex-direction:column;gap:8px}
.skd .hd{display:flex;gap:10px;align-items:center}.skd .hd img{width:44px;height:44px;image-rendering:pixelated}.skd .hd b{display:block;font:600 16px var(--thai);color:#fff}.skd .hd small{color:var(--gold)}
.skd p{margin:0;font:13px/1.6 var(--thai)}
.skd dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font:12px var(--thai)}.skd dt{color:var(--muted-s)}.skd dd{margin:0;color:var(--sys)}.skd dd.bad{color:#ff7a8a}
.skd .rem{font:13px var(--thai)}.skd .rem b{font:700 26px var(--num);color:var(--gold);margin-left:6px}
.skd .act{display:flex;gap:8px;justify-content:flex-end}
#worldwin{left:50%;top:calc(56px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(760px,calc(100% - 16px))}
.wm{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.wr{text-align:left;padding:8px 10px;border:1px solid rgba(127,227,255,.25);border-radius:6px;background:rgba(0,10,30,.4);color:var(--ink-s);cursor:pointer;display:grid;gap:2px}
.wr b{font:600 13px var(--thai)}.wr small{font:11px var(--thai);color:var(--muted-s)}
.wr.here{border-color:var(--gold);box-shadow:0 0 10px rgba(240,204,110,.4)}.wr.sel{outline:2px solid var(--sys)}.wr.lock{opacity:.55}
#tipwin{left:50%;top:30%;transform:translateX(-50%);width:min(440px,calc(100% - 16px));z-index:6}
#tipwin p{margin:0 0 12px;font:14px/1.7 var(--thai)}#tipwin .tb{display:flex;gap:8px;justify-content:flex-end}
#track .q.nav{border:1px solid rgba(240,204,110,.4);border-radius:4px;padding:6px;background:rgba(240,204,110,.08)}
#track .q.nav small{display:block;color:var(--muted-s);margin-bottom:4px}
@media (max-width:720px){#skillwin,#worldwin{left:8px;right:8px;width:auto;transform:none}.cols{flex-basis:100%}.sn b{font-size:11px}.si{width:42px;height:42px}.si img{width:34px;height:34px}}
/* ===== shop ===== */
#shopwin{left:50%;top:calc(56px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(500px,calc(100% - 16px))}
.shop .wb{padding:0 12px 12px}
.shop .awn{height:30px;margin:0 -12px 8px;background:repeating-linear-gradient(90deg,#3a6ad0 0 28px,#dfeaff 28px 56px);
  -webkit-mask:radial-gradient(circle 14px at 14px 16px,#000 98%,transparent) 0 0/28px 30px repeat-x,linear-gradient(#000,#000) 0 0/100% 16px no-repeat;mask:radial-gradient(circle 14px at 14px 16px,#000 98%,transparent) 0 0/28px 30px repeat-x,linear-gradient(#000,#000) 0 0/100% 16px no-repeat}
.stabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.stab{font:600 13px var(--thai);padding:6px 16px;border-radius:16px 16px 4px 4px;border:1px solid var(--sysd);background:rgba(0,10,30,.4);color:var(--muted-s);cursor:pointer}
.stab.on{background:linear-gradient(180deg,#5aa0f0,#2a5ab0);color:#fff;border-color:#9fd8ff;box-shadow:0 0 10px rgba(127,227,255,.4)}
.slist{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 290px);overflow-y:auto}
.srow{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid rgba(127,227,255,.22);border-radius:8px;background:linear-gradient(90deg,rgba(127,227,255,.08),rgba(0,10,30,.35))}
.sic{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:8px;border:1px solid var(--sysd);background:radial-gradient(circle,#1e3a6a,#071228)}.sic img{width:36px;height:36px;image-rendering:pixelated}
.sinfo{flex:1;min-width:0;line-height:1.4}.sinfo b{font:600 14px var(--thai);color:#fff}.sinfo .rem{font:10px var(--thai);color:#ff7a8a}.sinfo small{display:block;color:var(--muted-s);font-size:12px}
.sbuy{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.price{display:flex;align-items:center;gap:5px;font:600 14px var(--num);color:#fff;background:#2a3044;border-radius:12px;padding:2px 12px 2px 3px}
.price i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff0a0,#d89a20);color:#5a3a08;font:700 8px var(--num);font-style:normal}
.sbuy small{font:11px var(--thai);color:var(--xp)}.qb{display:flex;gap:4px}
.sfoot{margin-top:10px;text-align:right;font:13px var(--thai);color:var(--muted-s)}.sfoot b{color:var(--gold);font-family:var(--num)}
.slist .empty{color:var(--muted-s);text-align:center}
/* ===== auto window ===== */
#autowin{left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(560px,calc(100% - 16px))}
.arow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(127,227,255,.12);font:13px var(--thai)}
.sw{width:44px;height:24px;border-radius:12px;border:1px solid var(--sysd);background:#2a3044;position:relative;cursor:pointer;flex:none}
.sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#9aa4b8;transition:left .15s}
.sw.on{background:linear-gradient(90deg,#2a8a4a,#5ad070)}.sw.on i{left:22px;background:#fff}
.seg{display:flex;border:1px solid var(--sysd);border-radius:6px;overflow:hidden}.seg button{font:12px var(--thai);padding:4px 12px;background:transparent;color:var(--muted-s);border:none;cursor:pointer}.seg .on{background:#2a5ab0;color:#fff}
.mobs{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0}.mb{font:12px var(--thai);padding:4px 10px;border-radius:14px;border:1px solid var(--sysd);background:rgba(0,10,30,.4);color:var(--ink-s);cursor:pointer}.mb.on{background:#c0283c;border-color:#ff8a9a;color:#fff}.mb small{color:inherit;opacity:.7}
.stp{display:flex;align-items:center;gap:6px}.stp button{width:26px;height:24px;border-radius:4px;border:1px solid var(--sysd);background:#2a3044;color:#fff;cursor:pointer;font:700 14px/1 var(--thai)}.stp input{width:140px;accent-color:#5ad070}
.skn{display:flex;align-items:center;gap:8px}.skn img{width:28px;height:28px;image-rendering:pixelated}
.regen{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rp{padding:10px;border-radius:8px;display:flex;flex-direction:column;gap:6px}
.rp.hp{background:linear-gradient(180deg,rgba(90,180,90,.25),rgba(20,60,30,.3));border:1px solid rgba(124,224,124,.4)}.rp.mp{background:linear-gradient(180deg,rgba(90,140,220,.25),rgba(20,40,80,.3));border:1px solid rgba(127,180,255,.4)}
.rp small{color:var(--muted-s)}.rp small b{color:#fff}.rp .stp input{width:100%}
.pots{display:flex;gap:6px}.pslot{width:46px;height:46px;position:relative;border-radius:8px;border:1px dashed var(--sysd);background:rgba(0,10,30,.4);cursor:pointer;display:grid;place-items:center}
.pslot img{width:30px;height:30px;image-rendering:pixelated;opacity:.4}.pslot.on{border-style:solid;border-color:var(--gold)}.pslot.on img{opacity:1}
.pslot em{position:absolute;right:2px;bottom:0;font:10px var(--num);font-style:normal;color:#fff}.pslot i{position:absolute;left:2px;top:0;font:700 10px var(--num);font-style:normal;color:var(--gold)}
.anote{margin:10px 0 0;padding:6px 10px;border-radius:6px;background:rgba(240,204,110,.12);color:var(--gold);font:12px var(--thai);text-align:center}
#autobtn{position:absolute;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:64px;height:64px;border-radius:50%;display:grid;place-items:center;align-content:center;cursor:pointer;color:var(--muted-s);padding:0;z-index:3}
#autobtn b{font:700 14px var(--head);letter-spacing:.05em}#autobtn small{font:9px var(--num);color:var(--gold)}
#autobtn.on{color:#fff;border-color:#5ad070;box-shadow:0 0 18px rgba(90,208,112,.7),inset 0 0 18px rgba(90,208,112,.4);animation:autopulse 1.6s ease-in-out infinite}
@keyframes autopulse{50%{box-shadow:0 0 6px rgba(90,208,112,.4),inset 0 0 8px rgba(90,208,112,.2)}}
@media (max-width:720px){#shopwin,#autowin{left:8px;right:8px;width:auto;transform:none}.regen{grid-template-columns:1fr}#autobtn{width:48px;height:48px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){#autobtn.on{animation:none}}
/* ===== account / online ===== */
.acct{position:relative;width:min(640px,100%);padding:14px;display:grid;gap:10px}
.acct .who{display:flex;gap:10px;align-items:center}.acct .who img{width:40px;height:40px;border-radius:50%;border:1px solid var(--sys)}.acct .who b{display:block;font:600 15px var(--thai);color:#fff}.acct .who small{color:var(--muted-s);font:12px var(--thai)}
.acct .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slotc{display:grid;gap:3px;padding:10px;border:1px solid var(--sysd);border-radius:8px;background:rgba(0,10,30,.45);color:var(--ink-s);text-align:left;font:13px var(--thai)}
.slotc b{font:600 14px var(--thai);color:#fff}.slotc small{color:var(--muted-s)}.slotc.empty{cursor:pointer;border-style:dashed}.slotc.sel{border-color:var(--gold);box-shadow:0 0 12px rgba(240,204,110,.4)}
.slotc .sa{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}.slotc .go{padding:5px 14px;font-size:13px}
.newc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:13px var(--thai)}.newc input{font:14px var(--thai);padding:6px 10px;border-radius:6px;border:1px solid var(--sys);background:#071228;color:#fff;min-width:0;flex:1 1 160px}.newc small{color:var(--gold)}
.acct .muted,.muted{color:var(--muted-s);font:13px var(--thai);margin:0;text-align:center}.acct .warn{color:#ff8a9a;margin:0;font:13px var(--thai)}
#chatbox{left:max(8px,env(safe-area-inset-left,0px));bottom:calc(46px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100% - 16px));display:flex;gap:6px;padding:4px}
#chatbox input{flex:1;min-width:0;font:13px var(--thai);padding:5px 8px;border-radius:4px;border:1px solid var(--sysd);background:rgba(0,8,20,.8);color:#fff}
#onl{color:#5ad070;font:11px var(--thai)}
#lbwin{left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(520px,calc(100% - 16px))}
.lb{display:flex;flex-direction:column;gap:4px}.lr{display:grid;grid-template-columns:28px 1fr auto auto auto;gap:10px;align-items:center;padding:6px 10px;border-radius:6px;background:rgba(0,10,30,.4);font:13px var(--thai)}
.lr b{font:700 15px var(--num);color:var(--gold)}.lr .nm{color:#fff;font-weight:600}.lr small{color:var(--muted-s)}.lr.me{outline:1px solid var(--gold)}
@media (max-width:720px){.acct .slots{grid-template-columns:1fr}#chatbox{bottom:calc(112px + env(safe-area-inset-bottom,0px))}.lr{grid-template-columns:24px 1fr auto}.lr small,.lr span:last-child{display:none}}
.auth{display:grid;gap:6px;font:13px var(--thai)}.auth label{color:var(--muted-s)}
.auth input{font:14px var(--thai);padding:8px 10px;border-radius:6px;border:1px solid var(--sysd);background:#071228;color:#fff}
.auth input:focus{outline:2px solid var(--sys);outline-offset:1px}.atabs{display:flex;gap:6px;margin-bottom:4px}.auth .go{justify-self:start}.auth .warn:empty{display:none}
.auth .linkb{justify-self:start;background:none;border:none;color:var(--sys);font:12px var(--thai);cursor:pointer;padding:0;text-decoration:underline}

/* ---------- social & market (systems11) ---------- */
#plwin{left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(480px,calc(100% - 16px))}
#tradewin{left:50%;top:calc(60px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(620px,calc(100% - 16px))}
#mktwin{left:50%;top:calc(56px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(680px,calc(100% - 16px))}
#plwin .wb,#tradewin .wb,#mktwin .wb{padding:10px 12px;display:grid;gap:8px;max-height:min(70vh,560px);overflow:auto}
.plr,.ptbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border:1px solid var(--sysd);border-radius:4px;background:rgba(127,227,255,.05)}
.plr .nm{font-weight:600;color:#9fd8ff}.plr small{color:var(--ink-m,#9bb)}.plr em{color:#9be05a;font-style:normal;font-size:12px}.plr .sbtn:first-of-type{margin-left:auto}
.ptbox .sbtn{margin-left:auto}
#ptframe{position:fixed;left:calc(8px + env(safe-area-inset-left,0px));top:calc(132px + env(safe-area-inset-top,0px));width:170px;padding:8px;display:grid;gap:6px;z-index:3;font:12px var(--thai);color:var(--ink-s)}
#ptframe .ptm.far{opacity:.55}#ptframe .ptm span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#ptframe .bar{height:6px}
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tcol{border:1px solid var(--sysd);border-radius:4px;padding:8px;min-height:120px;display:grid;align-content:start;gap:4px}
.tcol h5{margin:0 0 4px;font:600 13px var(--thai);color:#fff}.toi{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}.toi img{width:20px;height:20px;image-rendering:pixelated}.toi small{width:100%;color:#9bb}
.tadd{display:flex;gap:6px;flex-wrap:wrap}.tadd select{flex:1 1 180px;min-width:0}.tadd input{width:80px}
.tadd select,.tadd input,.msrch input,.mdet input[type=number]{background:rgba(0,0,0,.35);color:#fff;border:1px solid var(--sysd);border-radius:4px;padding:5px 6px;font:13px var(--thai)}
.rbtn{display:flex;gap:8px;justify-content:flex-end}
.msrch{display:flex;gap:6px}.msrch input{flex:1;min-width:0}
.sinfo .up{color:#ff8a6a}.sinfo .dn{color:#6ad0ff}
.msell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px}
.mlist{display:grid;gap:4px;align-content:start;max-height:380px;overflow:auto}
.mpick{display:flex;align-items:center;gap:6px;text-align:left;padding:5px 6px;background:rgba(255,255,255,.04);border:1px solid transparent;border-radius:4px;color:var(--ink-s);font:12px var(--thai);cursor:pointer}
.mpick.on{border-color:var(--gold);background:rgba(240,200,96,.1)}.mpick img{width:22px;height:22px;image-rendering:pixelated}.mpick em{margin-left:auto;font-style:normal;color:#9bb}
.mdet{display:grid;gap:8px;align-content:start}.mdet label{display:grid;gap:4px;font-size:12px}.mdet small{color:#9bb}
.mref{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12px}.mref b{color:var(--gold)}.mref .go{margin-left:auto}
.spark{width:120px;height:28px}
@media (max-width:720px){#plwin,#tradewin,#mktwin{left:8px;right:8px;width:auto;transform:none}.msell,.tcols{grid-template-columns:1fr}#ptframe{top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px))}}

/* ---------- drop sources (systems12) ---------- */
.det .src{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.det .src small{color:#9bb}.srcb{font-size:12px}
#ptframe .where{color:#4af0ff}
.rfsrc{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 0}.rfsrc .src{margin-top:0}