@font-face{font-family:P2;src:url(/fonts/ps2p.ttf) format("truetype");font-display:swap}
*{box-sizing:border-box}
:root{--g1:#2e8b2e;--g2:#279127;--ink:#0b1030;--gold:#ffd23f;--k:.7}
html{background:#0b1030}
body{margin:0;color:#fff;font:10px/1.6 P2,monospace;background:#0b1030 repeating-linear-gradient(0deg,#0d1438 0 4px,#0b1030 4px 8px);min-height:100vh;-webkit-font-smoothing:none}
button,input,a{font:inherit;color:inherit}
.top{text-align:center;padding:18px 8px 6px}
h1{margin:0;font-size:22px;line-height:1.25;color:var(--gold);text-shadow:3px 3px 0 #c0392b,6px 6px 0 #000;letter-spacing:2px}
h1 span{color:#fff;font-size:26px}
.sub{margin:10px 0 0;color:#9fb3ff;font-size:9px}
.wrap{max-width:1180px;margin:0 auto;padding:10px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"card" "field" "side";gap:14px}
.card{grid-area:card}.fieldcol{grid-area:field}.side{grid-area:side}
@media(min-width:900px){.wrap{grid-template-columns:minmax(0,640px) minmax(0,1fr);grid-template-areas:"field card" "field side";grid-template-rows:auto 1fr;align-items:start}}
.tabs{display:flex;gap:6px;margin-bottom:8px}
.tab{flex:1;padding:9px 4px;background:#1b2559;border:3px solid #000;box-shadow:inset -3px -3px 0 #0e1640,inset 3px 3px 0 #3a4a9a;cursor:pointer;font-size:10px}
.tab.on{background:var(--gold);color:#000;box-shadow:inset -3px -3px 0 #c89b00,inset 3px 3px 0 #fff3b0}
@media(max-width:699px){.tab-both{display:none}}
.field{position:relative;width:100%;border:4px solid #fff;outline:4px solid #000;overflow:hidden;
 background:repeating-linear-gradient(180deg,var(--g1) 0 10%,var(--g2) 10% 20%)}
.field.single{aspect-ratio:375/560}
.field.both{aspect-ratio:640/1150}
.field .yl{position:absolute;left:0;right:0;height:3px;background:rgba(255,255,255,.75)}
.field .hash{position:absolute;width:10px;height:2px;background:rgba(255,255,255,.6)}
.field .los{position:absolute;left:0;right:0;height:4px;background:#3d7bff;box-shadow:0 0 0 1px #000}
.field .half{position:absolute;left:0;right:0}
.slot{position:absolute;transform:translate(-50%,-62%);display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;cursor:pointer;width:22%;max-width:130px}
.slot .sp{height:calc(84px * var(--k));display:flex;align-items:flex-end;justify-content:center}
.slot img{image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45))}
.slot .empty{width:calc(44px * var(--k) + 10px);height:calc(44px * var(--k) + 10px);border:3px dashed #fff;border-radius:50%;display:grid;place-items:center;font-size:16px;background:rgba(0,0,0,.2);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{border-color:var(--gold)}}
.slot .tag{position:relative;z-index:2;margin-top:2px;background:#000c;border:2px solid #000;outline:1px solid #ffffff55;padding:2px 3px;max-width:100%;text-align:center;line-height:1.35}
.slot .tag b{color:var(--gold);font-weight:normal}
.slot .tag i{font-style:normal;color:#7dffa0}
.slot .tag div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:7px}
.slot .tag div:first-child{font-size:8px}
.slot:hover .tag,.slot:focus-visible .tag{outline:2px solid var(--gold)}
@media(min-width:700px){.slot .tag div{font-size:8px}.slot .tag div:first-child{font-size:9px}}
.hint{text-align:center;color:#9fb3ff;font-size:8px;margin:8px 0 0}
.card{background:linear-gradient(180deg,#1d2a6b,#101848);border:4px solid #000;outline:3px solid var(--gold);padding:12px;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center}
.ovr{grid-row:span 2;background:var(--gold);color:#000;border:3px solid #000;padding:8px 10px;text-align:center;box-shadow:4px 4px 0 #000}
.ovr .n{font-size:34px;line-height:1.1}
.ovr .l{font-size:9px}
.od{display:flex;gap:10px}
.od div{flex:1;background:#000a;border:2px solid #3a4a9a;padding:6px;text-align:center}
.od b{display:block;font-size:20px;font-weight:normal;margin-top:4px}
.stars{font-size:18px;color:var(--gold);letter-spacing:2px;position:relative;display:inline-block}
.stars .bg{color:#3a4a9a}
.stars .fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.summ{grid-column:1/-1;font-size:9px;line-height:1.8;color:#dfe6ff;border-top:2px dashed #3a4a9a;padding-top:8px}
.summ em{color:var(--gold);font-style:normal}
.btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.btn{display:inline-block;text-align:center;text-decoration:none;cursor:pointer;padding:11px 6px;background:#c0392b;border:3px solid #000;box-shadow:inset -3px -3px 0 #7d1f15,inset 3px 3px 0 #ff7a6b,3px 3px 0 #000;font-size:9px}
.btn:active{transform:translate(2px,2px);box-shadow:inset -3px -3px 0 #7d1f15,inset 3px 3px 0 #ff7a6b}
.btn.gold{background:var(--gold);color:#000;box-shadow:inset -3px -3px 0 #c89b00,inset 3px 3px 0 #fff3b0,3px 3px 0 #000}
.btn.dark{background:#1b2559;box-shadow:inset -3px -3px 0 #0e1640,inset 3px 3px 0 #3a4a9a,3px 3px 0 #000}
.btn.sm{padding:8px 8px;font-size:8px}
.share{margin-top:14px;background:#000a;border:3px solid #3a4a9a;padding:10px}
.lbl{color:var(--gold);font-size:9px;margin-bottom:8px}
.row{display:flex;gap:6px;flex-wrap:wrap}
.row+.row{margin-top:8px}
#link{flex:1;min-width:0;background:#fff;color:#000;border:3px solid #000;padding:6px;font-size:8px}
.sharebtns .btn{flex:1}
.roster{margin-top:14px;background:#000a;border:3px solid #3a4a9a}
.roster h3{margin:0;padding:8px 10px;font-size:9px;font-weight:normal;color:var(--gold);background:#1b2559}
.rr{display:grid;grid-template-columns:42px 32px 1fr auto;gap:8px;align-items:center;padding:4px 10px;border-top:1px solid #1b2559;cursor:pointer;font-size:8px}
.rr:hover{background:#1b2559}
.rr .p{color:var(--gold)}
.rr img{image-rendering:pixelated;max-width:32px;max-height:28px;justify-self:center}
.rr .t{color:#9fb3ff;font-size:7px}
.rt{padding:3px 5px;border:2px solid #000;color:#000;min-width:34px;text-align:center}
.r9{background:#3dff7a}.r8{background:#b6ff3d}.r7{background:#ffd23f}.r6{background:#ff9f3d}.r5{background:#ff5d3d}
dialog{width:min(560px,96vw);max-height:88vh;padding:0;border:4px solid #000;outline:3px solid var(--gold);background:#101848;color:#fff;display:none;flex-direction:column}
dialog[open]{display:flex}
dialog::backdrop{background:#000b}
.pk-head{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#1b2559;color:var(--gold);font-size:10px}
#pk-q{margin:10px;padding:10px;border:3px solid #000;background:#fff;color:#000;font-size:10px}
.pk-attrs{padding:0 10px;font-size:7px;color:#9fb3ff}
#pk-list{list-style:none;margin:6px 0 0;padding:0;overflow:auto;flex:1}
#pk-list li{display:grid;grid-template-columns:28px 44px 1fr auto;gap:8px;align-items:center;padding:5px 10px;border-top:1px solid #1b2559;cursor:pointer;font-size:9px}
#pk-list li:hover,#pk-list li:focus{background:#1b2559;outline:none}
#pk-list li.cur{background:#2b3a85}
#pk-list img{image-rendering:pixelated;max-width:44px;max-height:36px;justify-self:center}
#pk-list .no{color:#9fb3ff;font-size:7px}
#pk-list .ty{display:block;color:#9fb3ff;font-size:7px;margin-top:3px}
#pk-list .used{color:#ff9f3d;font-size:7px}
footer{text-align:center;color:#8090c0;font-size:7px;line-height:2;padding:24px 10px 30px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));white-space:nowrap;transform:translateX(-50%);background:var(--gold);color:#000;border:3px solid #000;padding:10px 14px;font-size:9px;z-index:9}

/* ---- mobile polish (v2) ---- */
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.tab,.btn{min-height:44px}
.btn{display:inline-flex;align-items:center;justify-content:center}
#link{min-height:44px;font-size:9px}
.rr{min-height:48px}
.rr .t,#pk-list .ty,#pk-list .no,#pk-list .used,.pk-attrs{font-size:8px}
footer{font-size:8px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
.slot{min-width:44px;min-height:44px}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:#0b1030;border-top:4px solid #000;box-shadow:0 -3px 0 var(--gold);padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.bar-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center}
.bar-ovr{font-size:10px;color:var(--gold);padding:0 4px;white-space:nowrap}
.bar .btn{font-size:11px;padding:10px 6px}
.card.locked{animation:lockflash .6s steps(3) 2}
@keyframes lockflash{50%{outline-color:#fff;background:#2b3a85}}
.lockbadge{grid-column:1/-1;justify-self:start;background:#3dff7a;color:#000;border:3px solid #000;padding:4px 8px;font-size:9px;transform:rotate(-2deg)}
#lock.on{background:#3dff7a;box-shadow:inset -3px -3px 0 #1c9c45,inset 3px 3px 0 #c6ffd9,3px 3px 0 #000}
.pk-head{min-height:56px}
#pk-close{width:44px;height:44px;padding:0}
#pk-q{font-size:16px;min-height:48px}
#pk-list li{min-height:52px;font-size:10px}
@media(max-width:699px){
  .wrap{padding:8px max(8px,env(safe-area-inset-left))}
  .slot{width:19.5%}
  .slot .tag{padding:2px 2px}
  .od b{font-size:18px}
}
@keyframes sheet{from{transform:translateY(40%)}to{transform:none}}

/* ---- modes (v2) ---- */
.modes{display:flex;justify-content:center;gap:8px;margin-top:12px}
.mode{min-height:44px;min-width:44px;display:inline-flex;align-items:center;padding:0 14px;border:3px solid #000;background:#1b2559;text-decoration:none;font-size:10px;box-shadow:inset -3px -3px 0 #0e1640,inset 3px 3px 0 #3a4a9a}
.mode.on{background:var(--gold);color:#000;box-shadow:inset -3px -3px 0 #c89b00,inset 3px 3px 0 #fff3b0}
.sbbanner{margin:12px auto 0;max-width:600px;background:repeating-linear-gradient(45deg,#00e5ff 0 12px,#00b8cc 12px 24px);color:#000;border:3px solid #000;padding:8px;font-size:9px;text-shadow:1px 1px 0 #fff}
body.sandbox{--gold:#00e5ff;background:#1a0b33 repeating-linear-gradient(0deg,#22104a 0 4px,#1a0b33 4px 8px)}
body.sandbox .card{background:linear-gradient(180deg,#3a1670,#1e0b40)}
body.sandbox h1{text-shadow:3px 3px 0 #8a2be2,6px 6px 0 #000}
body.sandbox .mode.on,body.sandbox .tab.on,body.sandbox .btn.gold{background:#00e5ff;box-shadow:inset -3px -3px 0 #0097a7,inset 3px 3px 0 #b2f7ff,3px 3px 0 #000}
body.sandbox .bar{background:#1a0b33}
body.sandbox .card .ovr{background:#00e5ff}
.btns:empty{display:none}
.btns.two{grid-template-columns:1fr 1fr}
.ovr.q .n{color:#555}
.pending{grid-column:1/-1;font-size:9px;line-height:1.8;color:#dfe6ff}
.lb h3 a{color:inherit}
.lbr{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;min-height:44px;padding:4px 10px;border-top:1px solid #1b2559;font-size:9px;text-decoration:none}
.lbr .rk{color:var(--gold)}
.lbr.me{background:#2b3a85}
.lbempty{padding:12px 10px;font-size:8px;color:#9fb3ff;line-height:1.8}
.namedlg{max-width:420px}
.namedlg form{display:flex;flex-direction:column}
.nl{padding:12px 10px 0;font-size:9px;color:#9fb3ff}
#nm{margin:8px 10px;padding:10px;border:3px solid #000;font-size:16px;min-height:48px;color:#000;background:#fff}
.nrow{padding:6px 10px calc(12px + env(safe-area-inset-bottom))}
.nrow .btn{flex:1}
.slot.lockedslot{cursor:default}

.counter{margin:12px auto 0;max-width:600px;background:#000;border:3px solid var(--gold);color:var(--gold);padding:8px;font-size:9px;line-height:1.6}
.counter b{color:#fff;font-weight:normal}
.rar{grid-column:1/-1;background:#000a;border:2px solid #3dff7a;padding:8px;font-size:9px;line-height:1.8;color:#3dff7a}
.rar span{display:block;color:#dfe6ff;font-size:8px}
.sharedres{grid-column:1/-1;font-size:9px;color:#9fb3ff}

.optin{grid-column:1/-1;background:#000a;border:2px dashed var(--gold);padding:8px;font-size:8px;line-height:1.7}
.optin label{display:block;color:var(--gold);margin-bottom:6px}
.optin input{flex:1;min-width:0;min-height:44px;border:3px solid #000;padding:6px;font-size:16px;font-family:monospace;color:#000;background:#fff}
.optin small{display:block;color:#9fb3ff;margin-top:6px;font-size:8px}
.optin.done{border-style:solid;color:#3dff7a}

/* ---- picker v3: full-screen on mobile, modal on desktop ---- */
.pk-head{gap:10px;justify-content:flex-start}
.pk-back{min-width:96px;min-height:44px;width:auto!important;padding:0 10px!important;font-size:9px}
#pk-title{flex:1;text-align:right}
.pk-search{display:flex;gap:8px;padding:10px 10px 6px}
.pk-search #pk-q{flex:1;min-width:0;margin:0}
#pk-go{min-height:48px;min-width:88px;font-size:10px}
.pk-chips{display:flex;gap:6px;overflow-x:auto;padding:4px 10px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-shrink:0}
.pk-chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:36px;padding:0 10px;border:3px solid #000;background:#1b2559;font-size:8px;cursor:pointer;box-shadow:inset -2px -2px 0 #0e1640,inset 2px 2px 0 #3a4a9a}
.chip.on{background:var(--gold);color:#000;box-shadow:inset -2px -2px 0 #c89b00,inset 2px 2px 0 #fff3b0}
.chip[data-t]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--c,#888);border:1px solid #000;vertical-align:-1px}
#pk-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.pk-open{overflow:hidden}
@media(max-width:767px){
  dialog#picker{position:fixed;inset:0;width:100%;max-width:100%;height:100vh;height:100dvh;height:var(--vvh,100dvh);max-height:none;margin:0;border:0;outline:0;box-shadow:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);animation:none}
  dialog#picker[open]{display:flex;flex-direction:column}
  #picker .pk-head{position:sticky;top:0;z-index:2;padding:8px 10px;min-height:60px}
  #picker #pk-list{flex:1;min-height:0;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
}
/* ---- roster progress ---- */
body{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
.toast{bottom:calc(120px + env(safe-area-inset-bottom))}
.prog{max-width:1180px;margin:0 auto 8px;display:flex;align-items:center;gap:10px;font-size:9px;min-height:22px}
.prog-l{white-space:nowrap;color:var(--gold);min-width:118px}
.blocks{flex:1;display:grid;grid-template-columns:repeat(11,1fr) 6px repeat(11,1fr);gap:2px;height:16px}
.blk{background:#1b2559;border:2px solid #000;box-shadow:inset 1px 1px 0 #3a4a9a}
.blk.on{background:#3dff7a;box-shadow:inset -2px -2px 0 #1c9c45,inset 2px 2px 0 #c6ffd9}
.blk.d.on{background:#ff9f3d;box-shadow:inset -2px -2px 0 #b35f00,inset 2px 2px 0 #ffd9b0}
.blk.pop{animation:pop .36s steps(3)}
@keyframes pop{0%{transform:scaleY(.2)}50%{transform:scaleY(1.6);background:#fff}100%{transform:none}}
.prog.done .prog-l{color:#3dff7a;animation:blink8 .5s steps(2) infinite;min-width:0}
.prog.done .blocks{display:none}
@keyframes blink8{50%{color:#fff}}
#lock.ready{animation:pulse8 .8s steps(2) infinite}
@keyframes pulse8{50%{transform:translateY(-2px);box-shadow:inset -3px -3px 0 #c89b00,inset 3px 3px 0 #fff3b0,0 0 0 3px #fff,3px 3px 0 #000}}
.prog.hide{display:none}
@media(max-width:380px){.prog-l{min-width:104px;font-size:8px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}