/* qqq.1212.is: the 12:12am yellow on black (owner, 15 Nov: "the theme should match the current black and yellow theme").
   Loaded after gd-menu.css on a store only. It re-points Golden Dragon's tokens, so every screen of the storefront
   (menu, item, bag, checkout, members area) takes the store's colours without a second stylesheet to keep in step.
   Yellow #F0C419 is measured off 1212.is's own "進入世界" button. */
:root{
  --ink:#000000; --ink-2:#0B0B0B; --ink-3:#151515; --line:#242424; --line-2:#343434;
  --cream:#F7F5EE; --cream-dim:rgba(247,245,238,.68); --cream-faint:rgba(247,245,238,.42);
  --gold:#F0C419; --gold-soft:#FFD94D; --oxblood:#F0C419; --jade:#3FD2C7;
  --good:#5BD07A; --warn:#F0C419; --bad:#FF5A4E;
  --t1:#F0C419; --t2:#3FD2C7; --t3:#8FA8FF;
  --display:"Archivo Black","Archivo",system-ui,"Noto Sans TC",sans-serif;
  --body:"Archivo","Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --qy:#F0C419; --qk:#000;
}
html,body.gd{background:#000}
body.gd{font-family:var(--body)}
.wm{font-family:var(--display);letter-spacing:.02em;text-transform:none}
.wm em{color:#fff}.wm b{color:var(--qy)}

/* The cut-corner buttons become the 1212.is pill: solid yellow, black type. */
.add,.ptsgo,.gate-card .add{background:var(--qy)!important;color:#000!important;border-radius:999px!important;clip-path:none!important;
  font-weight:800;letter-spacing:.01em}
.add.off{background:#2a2a2a!important;color:rgba(255,255,255,.55)!important}
.alt{border-radius:999px!important;clip-path:none!important}
.cell,.panel,.fopt,.sgb,.slot{border-radius:14px!important;clip-path:none!important}
.cell.on,.fopt.on,.slot.on,.sgb.on{border-color:var(--qy)!important;box-shadow:0 0 0 1px var(--qy) inset!important}
.bagchip{background:var(--qy);color:#000;border-radius:999px}
.bagchip .bn{background:#000;color:var(--qy)}

/* the two doors under the header: the 3D store and the auction */
.qqq-doors{position:relative;z-index:6;display:flex;gap:8px;padding:6px 12px 8px;overflow-x:auto;scrollbar-width:none}
.qqq-doors::-webkit-scrollbar{display:none}
.qqq-door{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 6px;border-radius:999px;
  background:#0d0d0d;border:1px solid #2b2b2b;color:#fff;text-decoration:none;font:600 13px/1 var(--body)}
.qqq-door b{display:grid;place-items:center;min-width:34px;height:28px;padding:0 8px;border-radius:999px;background:var(--qy);color:#000;
  font:900 11px/1 var(--display);letter-spacing:.04em}
.qqq-door-auction b{background:#ff3b30;color:#fff;animation:qqqLive 1.6s ease-in-out infinite}
.qqq-door i{font-style:normal;display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;border-radius:9px;background:#ff3b30;color:#fff;font:700 11px/1 var(--body)}
.qqq-door:focus-visible{outline:2px solid var(--qy);outline-offset:2px}
@keyframes qqqLive{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.6)}50%{box-shadow:0 0 0 6px rgba(255,59,48,0)}}

/* ---- checkout: how you want it ---- */
.qq-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 12px}
.qq-method{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border-radius:16px;background:#0d0d0d;
  border:1px solid #2a2a2a;color:#fff;text-align:left;cursor:pointer;min-height:76px}
.qq-method b{font:800 14px/1.15 var(--body)}
.qq-method i{font-style:normal;font:500 12px/1.2 var(--body);color:var(--cream-dim)}
.qq-method .fee{position:absolute;top:10px;right:10px;font:700 12px/1 var(--body);color:var(--qy)}
.qq-method.on{border-color:var(--qy);box-shadow:0 0 0 1px var(--qy) inset;background:#151204}
.qq-method .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font:900 11px/1 var(--display);margin-bottom:2px}
.qq-method[data-m=pickup] .logo{background:var(--qy);color:#000}
.qq-method[data-m=unimart] .logo{background:#007a4d;color:#fff}
.qq-method[data-m=fami] .logo{background:#00a0e9;color:#fff}
.qq-method[data-m=tcat] .logo{background:#f2b705;color:#000}
.qq-store{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;border:1px dashed #3a3a3a;background:#0a0a0a;margin:4px 0 12px}
.qq-store b{display:block;font:700 14px/1.2 var(--body)}
.qq-store span{display:block;font:500 12px/1.3 var(--body);color:var(--cream-dim)}
.qq-store .alt{margin-left:auto;white-space:nowrap}
.qq-sum{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 2px;border-top:1px solid #222;margin-top:6px;font:500 14px/1.3 var(--body)}
.qq-sum b{font-weight:800}.qq-sum .tot{font:900 18px/1 var(--display);color:var(--qy)}
.qq-note{font:500 12px/1.4 var(--body);color:var(--cream-faint);margin:6px 2px}
.qq-ecpay{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--body);color:var(--cream-dim);letter-spacing:.06em;text-transform:uppercase}
.qq-ecpay em{font-style:normal;color:#00c06b}

/* ---- members: the story and the quests ---- */
.qq-q-hero{position:relative;overflow:hidden;border-radius:20px;padding:16px;background:radial-gradient(120% 120% at 100% 0%,#2a2304 0%,#0b0b0b 60%);border:1px solid #2b2b2b;margin-bottom:12px}
.qq-q-hero h3{margin:0 0 4px;font:900 20px/1.1 var(--display);color:#fff}
.qq-q-hero p{margin:0;color:var(--cream-dim);font:500 13px/1.4 var(--body)}
.qq-q-hero .lvl{display:flex;align-items:center;gap:10px;margin-top:12px}
.qq-q-hero .lvl b{font:900 28px/1 var(--display);color:var(--qy)}
.qq-bar{position:relative;height:8px;border-radius:4px;background:#222;overflow:hidden;flex:1}
.qq-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#f0c419,#ffe27a);border-radius:4px;transition:width .5s ease}
.qq-story{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:#0d0d0d;border:1px solid var(--qy);margin-bottom:14px;cursor:pointer;color:#fff;width:100%;text-align:left}
.qq-story .ell{flex:0 0 54px;height:54px;border-radius:50%;background:conic-gradient(from 0deg,#f0c419,#000 40%,#f0c419 60%,#000);animation:qqSpin 6s linear infinite;box-shadow:0 0 22px rgba(240,196,25,.35)}
.qq-story b{display:block;font:900 15px/1.2 var(--display)}
.qq-story span{display:block;font:500 12px/1.3 var(--body);color:var(--cream-dim)}
.qq-sparks{display:flex;gap:5px;margin-top:6px}.qq-sparks i{width:16px;height:6px;border-radius:3px;background:#2a2a2a}.qq-sparks i.on{background:var(--qy)}
.qq-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qq-list li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#0d0d0d;border:1px solid #232323}
.qq-list li.done{opacity:.62}
.qq-list .ic{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#171717;color:var(--qy);font:900 16px/1 var(--display)}
.qq-list li.done .ic{background:var(--qy);color:#000}
.qq-list .nm{flex:1;min-width:0}.qq-list .nm b{display:block;font:700 14px/1.2 var(--body)}.qq-list .nm i{font-style:normal;display:block;font:500 12px/1.3 var(--body);color:var(--cream-faint)}
.qq-list .pt{font:900 13px/1 var(--display);color:var(--qy);white-space:nowrap}
.qq-go{display:block;margin:14px 0 4px;text-align:center}
@keyframes qqSpin{to{transform:rotate(360deg)}}

/* ---- toasts ---- */
.qq-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:9999;opacity:0;
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:var(--qy);color:#000;font:800 14px/1.2 var(--body);
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:opacity .25s ease,transform .25s ease;pointer-events:none;max-width:92vw}
.qq-toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.qq-story .ell,.qqq-door-auction b{animation:none}.qq-toast{transition:none}}

/* desktop: the doors sit in the header bar, centred, not in the grid's first cell */
@media (min-width:1024px){
  .qqq-doors{position:absolute;top:8px;left:50%;transform:translateX(-50%);padding:0;z-index:20}
}
.fld small{display:block;margin:4px 0 10px;color:var(--cream-faint);font:500 12px/1.3 var(--body)}