/* qqq.1212.is 3D store: the screens over the scene. Yellow #F0C419 on black, the 1212.is pill buttons. */
:root{--y:#F0C419;--k:#000;--t:#F7F5EE;--d:rgba(247,245,238,.66);--f:rgba(247,245,238,.42);--r:#ff3b30;
  --body:Archivo,"Noto Sans TC",system-ui,-apple-system,sans-serif;--disp:"Archivo Black",Archivo,"Noto Sans TC",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--t);font:500 15px/1.4 var(--body);overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
#world{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none;z-index:2}
#ui>*{pointer-events:auto}
button{font:inherit;color:inherit;cursor:pointer}
.top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  background:linear-gradient(#000c,#0000);pointer-events:none}
.top>*{pointer-events:auto}
.back{display:inline-flex;align-items:center;height:38px;padding:0 12px;border-radius:999px;background:#0d0d0dd9;border:1px solid #2a2a2a;color:#fff;text-decoration:none;font-weight:800}
.where{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.05;padding-left:4px}
.where b{font:900 15px/1 var(--disp);color:var(--y)}
.where span{font:600 12px/1.2 var(--body);color:var(--d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ico,.pts,.bag{height:38px;min-width:38px;padding:0 10px;border-radius:999px;border:1px solid #2a2a2a;background:#0d0d0dd9;display:inline-flex;align-items:center;gap:6px;font-weight:800}
.ico span{font-size:13px}
.ico.live{color:var(--r)}
.pts{color:var(--y)}.pts i{font-style:normal}.pts.pop{animation:pop .5s ease}
.bag{background:var(--y);color:#000;border-color:var(--y)}
.bag b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:#000;color:var(--y);font-size:12px}
@media (max-width:560px){.ico span,.bag span,.back span{display:none}.where b{font-size:13px}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

.story{position:absolute;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(560px,94vw);display:flex;align-items:center;gap:12px;
  padding:10px 14px 10px 10px;border-radius:18px;background:#0b0b0bee;border:1px solid var(--y);text-align:left;box-shadow:0 10px 30px #0008}
.story .ell,.loading .ell,.sheet .story .ell{flex:0 0 40px;height:40px;border-radius:50%;background:conic-gradient(var(--y),#000 40%,var(--y) 60%,#000);animation:spin 5s linear infinite}
.story b{display:block;font:800 13px/1.25 var(--body)}
.story i{display:block;font-style:normal;font:600 12px/1.3 var(--body);color:var(--y);margin-top:2px}
.act{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);min-height:52px;padding:0 24px;border-radius:999px;border:0;
  background:var(--y);color:#000;font:900 16px/1 var(--body);box-shadow:0 8px 30px #f0c41955;animation:breathe 2s ease-in-out infinite;max-width:92vw;white-space:nowrap}
@keyframes breathe{50%{box-shadow:0 8px 40px #f0c419aa}}
.stick{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid #ffffff40;background:#ffffff10;opacity:0;pointer-events:none;transition:opacity .15s}
.stick.on{opacity:1}.stick i{position:absolute;left:36px;top:36px;width:48px;height:48px;border-radius:50%;background:var(--y);box-shadow:0 0 20px #f0c41980}
.help{position:absolute;bottom:calc(88px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:#000b;color:var(--d);font:600 12px/1.3 var(--body);white-space:nowrap;transition:opacity .6s;pointer-events:none}
.help.gone{opacity:0}.help .touch{display:none}
@media (hover:none){.help .desk{display:none}.help .touch{display:inline}}
.fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:5;transition:opacity .3s}.fade.on{opacity:1}
.loading{position:fixed;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:14px;background:#000;transition:opacity .5s}
.loading .ell{width:84px;height:84px;flex:none}
.loading p{margin:0;font:800 14px/1.3 var(--body);color:var(--y)}
.loading.gone{opacity:0;pointer-events:none}.loading.err .ell{animation:none;filter:grayscale(1)}
.loading a{color:var(--y)}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;padding:11px 16px;border-radius:999px;background:var(--y);color:#000;
  font:700 14px/1.25 var(--body);box-shadow:0 10px 30px #0009;transition:opacity .25s,transform .25s;max-width:92vw;text-align:center;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.burst{position:absolute;left:50%;top:42%;width:0;height:0;pointer-events:none}
.burst i{position:absolute;width:8px;height:8px;margin:-4px;border-radius:2px;background:var(--y);transform:rotate(var(--a)) translateX(0);animation:fly .85s ease-out forwards}
@keyframes fly{to{transform:rotate(var(--a)) translateX(var(--d)) scale(.2);opacity:0}}

.sheet{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;background:#0007;opacity:0;transition:opacity .2s;z-index:4}
.sheet.on{opacity:1}
.sheet-card{position:relative;width:min(560px,100vw);max-height:86vh;overflow:auto;padding:20px 18px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;
  background:#0b0b0b;border:1px solid #262626;border-bottom:0;transform:translateY(24px);transition:transform .22s;user-select:text;-webkit-user-select:text;touch-action:pan-y}
.sheet.on .sheet-card{transform:none}
@media (min-width:900px){.sheet{align-items:center}.sheet-card{border-radius:24px;border-bottom:1px solid #262626}}
.sheet h2{margin:0 36px 10px 0;font:900 21px/1.15 var(--disp);color:#fff}
.sheet .x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid #333;background:#151515}
.muted{color:var(--d)}.small{font-size:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;border:0;background:var(--y);color:#000;font:900 15px/1 var(--body);text-decoration:none}
.btn.alt{background:#151515;color:#fff;border:1px solid #333}.btn:disabled{background:#2a2a2a;color:#777}
.row{display:flex;gap:8px;margin-top:12px}.row .btn{flex:1}
.link{display:inline-block;margin-top:12px;color:var(--y);font-weight:700}
.prod{display:grid;gap:14px}
@media (min-width:640px){.prod{grid-template-columns:200px 1fr}}
.prod .ph{aspect-ratio:1;border-radius:16px;background:#fff center/contain no-repeat}.prod .ph.none{background:#151515}
.prod h2{margin-top:0}.zh{margin:0 0 6px;color:var(--d)}
.price{margin:4px 0 8px;font:900 26px/1 var(--disp);color:var(--y)}
.vs{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid #333;background:#121212;font:700 13px var(--body)}
.chip i{width:14px;height:14px;border-radius:50%;border:1px solid #fff4}.chip.on{border-color:var(--y);box-shadow:0 0 0 1px var(--y) inset}.chip.off{opacity:.45;text-decoration:line-through}
.stock{margin:8px 0 0;font:700 13px var(--body);color:var(--d)}
.lines{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.lines li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#121212;border:1px solid #222}
.lines li>span:first-child{flex:1;min-width:0}.lines b{display:block}.lines i{font-style:normal;display:block;color:var(--f);font-size:12px}
.lines .rm{border:1px solid #333;background:#181818;border-radius:999px;min-height:32px;padding:0 10px;font-size:12px}
.sum{font:900 18px var(--disp);color:var(--y)}.sum i{font:500 12px var(--body);color:var(--f)}
.fl{display:grid;gap:4px;font:700 13px var(--body);margin:8px 0}
.fl input{height:44px;border-radius:12px;border:1px solid #333;background:#111;color:#fff;padding:0 12px;font:600 15px var(--body)}
.lb{margin:12px 0 6px;font:800 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--d)}
.sw{display:flex;flex-wrap:wrap;gap:8px}.sw button{width:36px;height:36px;border-radius:50%;border:2px solid #333}.sw button.on{border-color:var(--y);box-shadow:0 0 0 3px #f0c41955}
.lots{display:grid;gap:8px}
.lot{padding:12px;border-radius:16px;background:#121212;border:1px solid #262626;display:grid;gap:4px}
.lot .pr{font:900 22px var(--disp);color:var(--y)}.lot .mt{font-size:12px;color:var(--d)}.lot em{color:var(--y);font-style:normal}
.bidrow{display:flex;gap:8px;margin-top:6px}.bidrow input{flex:1;height:44px;border-radius:12px;border:1px solid #333;background:#0b0b0b;color:#fff;padding:0 12px;font:700 16px var(--body)}
.msg{margin:4px 0 0;font-size:13px;color:var(--y)}.msg a{color:var(--y)}
.sheet .story{position:static;transform:none;width:100%;margin:4px 0 12px}
.qs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.qs li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-radius:14px;background:#121212;border:1px solid #222}
.qs li b{font-size:14px}.qs li i{grid-column:1;font-style:normal;font-size:12px;color:var(--f)}.qs li span{grid-row:1/3;grid-column:2;align-self:center;font:900 14px var(--disp);color:var(--y)}
.qs li.done{opacity:.55}.qs li.done span::before{content:'✓ '}
@media (prefers-reduced-motion:reduce){.story .ell,.loading .ell,.act{animation:none}.toast,.sheet,.sheet-card,.fade{transition:none}}
[hidden]{display:none!important}