/* Game skin palette (wp-G1, taken over by wp-E0 for design language v4): ink black, vermilion for actions, gold for identity.
   <html data-skin="game"> re-points the page's own variables (front.css :root) on the root element, so U0's --ui-* aliases
   (computed on :root) and every tab that uses variables change with it. v4.css (loaded right after) adds the --v4-* tokens
   and the v4 classes; this file maps the paper-era class names onto them:
     .card .kpi .acct ... -> B plate "墨玉板"     .quota-big, the sign-in form -> A "主卡" (gold frame, one per screen)
     .tbl-wrap, .empty, lists -> C (dividers only) .btn -> vermilion solid / gold hairline / text only
   A panel look is five variables (--v4-p-bg, -bd, -r, -frame, -sh); buttons use --v4-btn-bg and --v4-btn-edge. Layout
   and the /me shell are in shell.css. The contract for all of this is /home/ubuntu/wp/E0/V4.txt. */

html[data-skin^="game"]{
  color-scheme:dark;
  /* same values as the --v4-s* / --v4-fg* tokens in v4.css, as wp-U5's home / docs palette and the admin ops variant */
  --bg:#0b0907;--bg2:#100d0a;--panel:#15110d;--card:var(--panel);--card2:#1c1712;
  --line:#2e261b;--line-strong:#4c3e29;--line2:var(--line-strong);
  --fg:#efe6d3;--fg2:#d0c4ac;--muted:#9c907a;--info:#9c907a;
  --ink:#efe6d3;--ink-1:#efe6d3;--ink-2:#d6cab2;--ink-3:#a89c85;
  --red:#d9343e;--red-hover:#e8464f;--red-press:#a8222b;--red-ink:#2b1013;--red-line:#5c1d22;
  --gold:#d8a648;--gold-ink:#2a2112;--gold-hi:#f1d08a;
  --ok:#5fc28a;--ok-ink:#10261a;--warn:#d8a648;--warn-ink:#2a2112;--err:#e2606a;--err-ink:#2b1013;
  --paper:#0f0c09;--paper-2:#16120e;--wash:#2e261b;
  --hair:rgba(216,166,72,.16);--hair-2:rgba(216,166,72,.3);
  --shadow-1:0 1px 0 rgba(0,0,0,.5),0 16px 32px -24px rgba(0,0,0,.9);
  --focus:0 0 0 3px rgba(216,166,72,.22);
  --r-md:6px;
  --t3-ink:#0b0907;--t3-full:#0b0907;--t3-paper:#15110d;--t3-fog:#1c1712;--t3-edge:#d8a648;
  /* wp-G1 tokens that shell.css still reads */
  --gs-red-text:#f2666d;           /* vermilion for small text on dark (6.2:1 on --panel); --red stays the fill colour (white 4.66:1) */
  --gs-rim:rgba(216,166,72,.4);
  --gs-rim-soft:rgba(216,166,72,.18);
  scrollbar-color:#4c3e29 #0b0907;
}
html[data-skin^="game"] body{background:var(--bg);color:var(--fg)}
html[data-skin^="game"] ::selection{background:rgba(217,52,62,.5);color:#fff}

/* ---------- vermilion as small text: the lighter text tone (fills keep --red) ---------- */
html[data-skin^="game"] :is(.side a.nav.on,.side a.nav.on .no,.card h3 a.more:hover,.pill.err,.kpi.hot b,.cf-x:hover,
  .rrow.click:hover b,.rth,.rrow.bad b,.work.bad .work-wait b,.btn.sm.quiet:hover,.keyblock .btn.sm.danger:hover,
  .auth-support .sup-go,.seal-badge.err,.mall-badge,.mall-addr-code,.mall-price b,.mall-url,.mall-total,
  .pool-cap b,.pool-stat.end b,.pool-me-cap,a.txt,.doc p a,.doc li a,.doc dd a,.feat a,.foot-nav a,
  .doc section h2 .h-anchor:hover,.doc .codebox .copy-btn:hover){color:var(--gs-red-text)}
html[data-skin^="game"] :is(.f em.bad,.bad-msg){color:var(--gs-red-text)!important}
html[data-skin^="game"] a[style*="color:var(--red)"]{color:var(--gs-red-text)!important}
html[data-skin^="game"] a[style*="color:var(--red)"],html[data-skin^="game"] .doc p a,html[data-skin^="game"] .doc li a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html[data-skin^="game"] .meme-seal.zhu{color:var(--gs-red-text);border-color:var(--gs-red-text);box-shadow:inset 0 0 0 1.5px rgba(242,102,109,.25)}
/* the current place (chip, segment, toggle) is gold, not red: it is where you are, not something to press */
html[data-skin^="game"] :is(.chip.on,.seg a.on,.btn.sm.ghost.tog.on){color:var(--gold-hi)}
html[data-skin^="game"] .quota-big .lbl{color:var(--fg2)}

/* ---------- panels: brush frames and paper washes become the three v4 levels ---------- */
html[data-skin^="game"] :is(.card,.kpi,.acct,.modal,.drawer,.empty,.note,.auth-card,.mall-card,.mall-banner,.mall-hero,.usage-tip,.doc .toc,
  .tbl-wrap,.kmodels,.mall-detail-box,.mall-secret-box,.doc pre.code,.doc dl.kv,.pool-card){border-image:none;border:1px solid var(--line)}
/* B "墨玉板": the default for every card */
html[data-skin^="game"] :is(.card,.kpi,.acct,.auth-card,.mall-card,.usage-tip,.pool-card,.kmodels){
  --v4-p-bg:var(--v4-b-bg);--v4-p-bd:var(--v4-b-bd);--v4-p-r:var(--v4-r-3);--v4-p-frame:none;--v4-p-sh:var(--v4-b-sh);
  border:var(--v4-p-bd);border-radius:var(--v4-p-r);background:var(--v4-p-bg);border-image:var(--v4-p-frame);box-shadow:var(--v4-p-sh)}
/* A "主卡": the balance card on /me and the sign-in form. One per screen; nothing else gets the gold frame. */
html[data-skin^="game"] :is(.quota-big,.auth .auth-form form){
  --v4-p-bg:var(--v4-a-bg);--v4-p-bd:var(--v4-a-bd);--v4-p-r:0;--v4-p-frame:var(--v4-a-frame);--v4-p-sh:var(--v4-a-sh);
  border:var(--v4-p-bd);border-radius:var(--v4-p-r);background:var(--v4-p-bg);border-image:var(--v4-p-frame);box-shadow:var(--v4-p-sh)}
html[data-skin^="game"] .quota-big::before,html[data-skin^="game"] .auth .auth-form form::before{display:none}
html[data-skin^="game"] .quota-big{padding:var(--v4-sp-1) var(--v4-sp-2)}
html[data-skin^="game"] .quota-big .ink-ring{top:var(--v4-sp-1);right:var(--v4-sp-2)}
html[data-skin^="game"] .kpi.hot{--v4-p-bd:1px solid var(--v4-hair-2)}
html[data-skin^="game"] .kpi.hot::before{background:var(--gold)}
/* C: tables, bare empty states and notes carry no frame */
html[data-skin^="game"] .tbl-wrap{border:0;border-top:1px solid var(--v4-line-2);border-bottom:1px solid var(--v4-line-2);border-radius:0;background:none;box-shadow:none}
html[data-skin^="game"] .empty:not(.card){border:0;background:none;box-shadow:none}
html[data-skin^="game"] .note{border:0;border-left:2px solid var(--gold);border-radius:0 var(--v4-r-1) var(--v4-r-1) 0;background:var(--v4-gold-soft);box-shadow:none;color:#f3d38c}
html[data-skin^="game"] .note.red{border-left-color:var(--red);background:var(--v4-red-soft);color:#ffb4b8}
html[data-skin^="game"] :is(thead tr,.tabs,.drawer-h){background:linear-gradient(var(--v4-line-2),var(--v4-line-2)) left bottom/100% 1px no-repeat}
html[data-skin^="game"] td{border-top-color:var(--v4-line)}
html[data-skin^="game"] table tbody tr:hover td{background:rgba(239,230,211,.04)}
html[data-skin^="game"] :is(tr.click:hover td,.keyrow.click:hover){background:rgba(239,230,211,.055)}
html[data-skin^="game"] .keyrow{border-top-color:var(--v4-line)}
html[data-skin^="game"] :is(.sec,.doc section)::before{height:1px;background:linear-gradient(90deg,var(--v4-hair-2),transparent);opacity:1}
html[data-skin^="game"] hr,html[data-skin^="game"] .rule{background:var(--line)}
/* overlays (L2): opaque, one step up, a stronger hairline */
html[data-skin^="game"] :is(.modal,.drawer){border:1px solid var(--v4-hair-2);background:var(--card2);box-shadow:var(--v4-hi),var(--v4-shadow-3)}
html[data-skin^="game"] .modal{border-radius:var(--v4-r-3)}
html[data-skin^="game"] .modal h2{background:linear-gradient(var(--v4-line-2),var(--v4-line-2)) left bottom/100% 1px no-repeat}
html[data-skin^="game"] .modal-wrap{background:rgba(5,4,3,.72)}
html[data-skin^="game"] .modal-wrap::before{display:none}
html[data-skin^="game"] .scrim{background:rgba(0,0,0,.6)}
html[data-skin^="game"] .toast{border:1px solid var(--v4-hair-2);border-left:2px solid var(--ok);border-radius:var(--v4-r-2);background:var(--v4-s3);color:var(--fg);box-shadow:var(--v4-shadow-3)}
html[data-skin^="game"] .toast.bad{border-left-color:var(--v4-err)}
html[data-skin^="game"] .pool-card,html[data-skin^="game"].tod-night .home .pool-card{background:var(--v4-b-bg)}
html[data-skin^="game"] :is(.doc .toc,.doc dl.kv){background:rgba(21,17,13,.82)}
html[data-skin^="game"] .doc .codebox .copy-btn{background:rgba(21,17,13,.92)}
html[data-skin^="game"] .toc a.on{color:var(--gold-hi);border-left-color:var(--gold)}
@media (max-width:980px){
  html[data-skin^="game"] .toc{background:rgba(11,9,7,.94)}
  html[data-skin^="game"] .toc a{background:rgba(28,23,18,.9);color:var(--ink-2)}
  html[data-skin^="game"] .toc a.on{color:var(--gold-hi);background:var(--v4-s3);border-color:var(--gold)}
}

/* ---------- tags: the ink seals become one status dot ---------- */
html[data-skin^="game"] .pill{height:22px;padding:0 8px;border-radius:var(--v4-r-1);background:rgba(239,230,211,.07);box-shadow:none;color:var(--fg2)}
html[data-skin^="game"] :is(.pill,.seal-badge):is(.ok,.err,.warn,.wait,.paid,.queue){padding-left:8px;border-radius:var(--v4-r-1);box-shadow:none}
html[data-skin^="game"] :is(.pill,.seal-badge):is(.ok,.err,.warn,.wait,.paid,.queue)::before{width:6px;height:6px;border-radius:50%;background:currentColor!important}
/* wp-X1 A-EB-02: .paid (已发卡 / 已付款) is a success = green; red is only .err (失败 / 退回) */
html[data-skin^="game"] :is(.pill,.seal-badge):is(.ok,.paid){background:var(--v4-ok-soft);color:var(--ok)}
html[data-skin^="game"] :is(.pill,.seal-badge):is(.warn,.wait,.queue){background:var(--v4-warn-soft);color:var(--v4-warn)}
html[data-skin^="game"] :is(.pill,.seal-badge).err{background:var(--v4-red-soft);color:var(--gs-red-text)}
html[data-skin^="game"] .chip{border-color:var(--v4-line-2);border-radius:var(--v4-r-1);color:var(--fg2)}
html[data-skin^="game"] .chip:hover{border-color:var(--muted)}
html[data-skin^="game"] .chip.on{border-color:var(--v4-hair-2)}
html[data-skin^="game"] .seg{border-color:var(--v4-line-2);border-radius:var(--v4-r-2);background:var(--v4-well)}
html[data-skin^="game"] :is(.chip.on,.seg a.on)::before{-webkit-mask-box-image:none;border-radius:inherit;background:var(--v4-gold-soft);box-shadow:none}

/* ---------- fields: a well below the surface, an edge you can see, gold focus ---------- */
html[data-skin^="game"] :is(input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],input[type=url],select,textarea){
  border-image:none;border:1px solid var(--v4-edge);border-radius:var(--v4-r-2);background-color:var(--v4-well);color:var(--fg)}
html[data-skin^="game"] :is(input,select,textarea):focus{border-color:var(--gold);box-shadow:var(--focus)}
html[data-skin^="game"] :is(input,select,textarea):disabled{border-color:var(--v4-line-2);background-color:var(--panel);color:var(--muted)}
html[data-skin^="game"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d0c4ac' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-skin^="game"] ::placeholder{color:var(--muted);opacity:1}
html[data-skin^="game"] label.f>span{color:var(--fg2)}
html[data-skin^="game"] :is(pre.code,.secret){background:var(--v4-well);color:#ece4d0}
html[data-skin^="game"] .secret{color:var(--gold)}
html[data-skin^="game"] .doc .langs.seg a.on{background:var(--v4-s3);color:var(--gold-hi)}
html[data-skin^="game"] :focus-visible{outline-color:var(--gold)}
html[data-skin^="game"] .btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* dark-ink pictures: shown as pale ink on the dark plate (seals keep their colour) */
html[data-skin^="game"] .empty::before,html[data-skin^="game"] .skel.long::after,html[data-skin^="game"] .work-brush,html[data-skin^="game"] .cf::after{filter:invert(.86) sepia(.2)}
html[data-skin^="game"] .skel i{background:rgba(239,230,211,.07);-webkit-mask:none;mask:none;border-radius:var(--v4-r-1)}   /* wp-E5: the v4 skeleton bar (ui-skel-line), not the 54 KB ink-stroke mask on the first screen */
html[data-skin^="game"] .ink-ring .fill{background:var(--gold)}
html[data-skin^="game"] .ink-ring.hi .fill{background:var(--v4-err)}
html[data-skin^="game"] .work::after{background:var(--gold)}
html[data-skin^="game"] .sd-fx :is(.dot,.fk){background:var(--gold)}
/* the balance bar: a plain 6px track, gold for the balance, amber / red when it runs low */
html[data-skin^="game"] .quota-big .qbar.ink-brush{height:6px;border-radius:var(--v4-r-pill);background:rgba(239,230,211,.09);overflow:hidden}
html[data-skin^="game"] .qbar.ink-brush::before{display:none}
html[data-skin^="game"] .quota-big .qbar.ink-brush i{-webkit-mask:none;mask:none;border-radius:inherit;background:linear-gradient(90deg,var(--v4-gold-3),var(--v4-gold-2) 60%,var(--v4-gold-1))}
html[data-skin^="game"] .quota-big .qbar.ink-brush.mid i{background:var(--v4-warn)}
html[data-skin^="game"] .quota-big .qbar.ink-brush.hi i{background:var(--v4-err)}

/* ---------- buttons: plain rounded plates. primary = vermilion solid, .ghost / .gold = gold hairline, .quiet = text only ---------- */
html[data-skin^="game"] .btn:not(.enter){--v4-btn-bg:var(--v4-red-fill);--v4-btn-edge:var(--v4-red-edge);border-radius:var(--v4-r-2);color:#fff;text-shadow:none;letter-spacing:.04em}
html[data-skin^="game"] .btn:not(.enter):hover{--v4-btn-bg:var(--v4-red-fill-2)}
html[data-skin^="game"] .btn:not(.enter):active{--v4-btn-bg:var(--v4-red-3)}
html[data-skin^="game"] .btn:not(.enter)::before{-webkit-mask-box-image:none;mask:none;border:0;border-image:none;border-radius:inherit;transform:none;background:var(--v4-btn-bg);box-shadow:var(--v4-btn-edge)}
html[data-skin^="game"] :is(.btn.ghost,.btn.gold,.btn.danger,.btn.quiet):not(.enter){--v4-btn-bg:rgba(239,230,211,.03);--v4-btn-edge:inset 0 0 0 1px var(--v4-hair-2),var(--v4-hi);color:var(--fg)}
html[data-skin^="game"] :is(.btn.ghost,.btn.gold):not(.enter):hover{--v4-btn-bg:rgba(216,166,72,.09);--v4-btn-edge:inset 0 0 0 1px var(--gold),var(--v4-hi)}
html[data-skin^="game"] .btn.gold:not(.enter){color:var(--gold-hi)}
html[data-skin^="game"] .btn.quiet:not(.enter){--v4-btn-bg:transparent;--v4-btn-edge:none;color:var(--fg2)}
html[data-skin^="game"] .btn.quiet:not(.enter):hover{--v4-btn-bg:rgba(239,230,211,.07)}
html[data-skin^="game"] .btn.danger:not(.enter){--v4-btn-edge:inset 0 0 0 1px var(--red-line);color:var(--gs-red-text)}
html[data-skin^="game"] .btn.danger:not(.enter):hover,html[data-skin^="game"] .modal .acts .btn.danger:not(.enter){--v4-btn-bg:var(--v4-red-fill);--v4-btn-edge:var(--v4-red-edge);color:#fff}
/* the confirm dialog's danger button (wp-E5: the one place for it; shell.css, topup.css and this file each patched a piece before):
   the plain red plate, never front.css's ink-brush mask (that rule is (0,4,1), these are heavier) */
html[data-skin^="game"] .modal .acts .btn.danger:not(.enter){color:var(--v4-on-red)}
html[data-skin^="game"] .modal .acts .btn.danger.btn:not(.enter):hover{--v4-btn-bg:var(--v4-red-fill-2)}
html[data-skin^="game"] .modal .acts .btn.danger:not(.enter)::before,html[data-skin^="game"] .btn.gold:not(.enter):hover::before{-webkit-mask-box-image:none;-webkit-mask:none;mask:none;border-radius:inherit}
html[data-skin^="game"] .btn.tog.on:not(.enter){--v4-btn-bg:var(--v4-gold-soft);--v4-btn-edge:inset 0 0 0 1px var(--gold)}
html[data-skin^="game"] .btn.is-loading::after{color:#fff}
html[data-skin^="game"] .btn.ghost{background:transparent}

/* ---------- top bar of /docs and the home page (shell.css dresses the /me one) ---------- */
html[data-skin^="game"] .me-top,html[data-skin^="game"] .me-top.is-scrolled{background:rgba(11,9,7,.92);border-bottom-color:var(--gs-rim-soft)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-skin^="game"] .me-top.is-scrolled{background:rgba(11,9,7,.97)}
}

/* ---------- the lobby skin only (not /docs): paper landscapes and ink-only animation layers step aside ---------- */
html[data-skin="game"] :is(.ink-bg,.ink-scene,.pan-art,.ink-wave,.fx2-fluid,.fx2-dragon,.fx2-burst,.crane,.tabs-ink,.t3-mist){display:none!important}

@supports not (-webkit-mask-box-image:url("x") 1 fill){
  html[data-skin^="game"] .btn:not(.enter){background:var(--v4-btn-bg);box-shadow:var(--v4-btn-edge)}
}
@media (prefers-reduced-motion:reduce){
  html[data-skin^="game"] .btn:not(.enter)::before,html[data-skin^="game"] .btn:not(.enter){transition:none!important;animation:none!important}
}