/* SHATTER · premium finishing layer (loaded after site.css): split-flap digits, odometer, card backs, ceremony, live trade
   toasts, mobile carousel + bottom sheet, scroll reveal, grain/vignette, selection, focus, scrollbar, gold headings, line
   icons, card-shaped skeletons, error state. Motion = transform/opacity only; every item has a reduced-motion fallback. */

/* English: Latin text in Inter first (the CJK font's punctuation is full-width) */
html[lang="en"]{--f-cn:"Inter","Shatter SC","Noto Sans SC",system-ui,sans-serif;--f-ui:"Inter","Shatter SC","Noto Sans SC",system-ui,sans-serif}
/* ---------- details ---------- */
::selection{background:rgba(242,194,48,.38);color:#fffaf0}
:focus-visible{outline:2px solid #F2C230;outline-offset:3px;box-shadow:0 0 0 6px rgba(242,194,48,.16);border-radius:6px}
html{scrollbar-width:thin;scrollbar-color:#7d6020 #0b0906}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0906}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a87a12,#6e5212);border-radius:10px;border:2px solid #0b0906}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#d9a72a,#8c6814)}
/* vignette + faint film grain over the whole page (static layers: no repaint on scroll) */
body::before{content:"";position:fixed;inset:0;z-index:55;pointer-events:none;background:radial-gradient(135% 100% at 50% 42%,transparent 60%,rgba(0,0,0,.38) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:56;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.bar{z-index:60}
/* headings: subtle gold gradient fill with a soft inner highlight */
.sh h2,.lstep h3,.cmd h3,.agentw h3,.t-head h3,.ar-h h3{background:linear-gradient(180deg,#fffdf6 0%,#fbefd0 50%,#e3c57c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 -1px 0 rgba(0,0,0,.55)) drop-shadow(0 1px 0 rgba(255,244,214,.10))}
h1{background:linear-gradient(180deg,#fffdf7 0%,#f9efd6 64%,#e6cf94 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
h1 .gt{background:var(--gold-v);-webkit-background-clip:text;background-clip:text}
/* line icons */
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
i[data-ic]{display:inline-flex;font-style:normal}
.copy{display:inline-flex;align-items:center;gap:5px}
.copy .ic{width:13px;height:13px}
.copy.ok{color:var(--up);border-color:rgba(47,208,138,.45)}
.lang{display:inline-flex;align-items:center;gap:6px}
.lang .ic{width:15px;height:15px;opacity:.75}
.wbtn .ic{width:16px;height:16px}
.pool-cap button{display:inline-flex;align-items:center;gap:5px}
.pc-btns{display:inline-flex;gap:14px;flex:none}
.pool-cap button .ic{width:14px;height:14px}
.dl a .ic{width:14px;height:14px;color:var(--g)}
.dl a::before{display:none}
.gtile .lk a{display:inline-flex;align-items:center;gap:3px}
.gtile .lk .ic{width:12px;height:12px}
.c-name .l2{display:flex;align-items:center;gap:6px;min-width:0}

/* ---------- split-flap digits (翻牌) ---------- */
.flap{display:inline-flex;align-items:center;white-space:nowrap}
.fc{position:relative;display:inline-block;width:.7em;height:1.16em;margin:0 .028em;border-radius:.1em;perspective:6em;box-shadow:0 .08em .18em rgba(0,0,0,.75),0 0 0 1px rgba(255,226,150,.08)}
.fc .fh,.fc .ff{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fc .t{top:0;border-radius:.1em .1em 0 0;background:linear-gradient(180deg,#261e13,#18130b)}
.fc .b{bottom:0;border-radius:0 0 .1em .1em;background:linear-gradient(180deg,#110d08,#1b150d)}
.fc .fh.b::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(0,0,0,.9);z-index:1}
.fc i{display:block;height:1.16em;line-height:1.16em;font-style:normal;text-align:center;color:#f6f1e6}
.fc .b i{transform:translateY(-50%)}
.fc .ff.t{transform-origin:50% 100%;z-index:2;transform:rotateX(0)}
.fc .ff.b{transform-origin:50% 0;z-index:2;transform:rotateX(90deg)}
.fc.go .ff.t{animation:flipT .26s cubic-bezier(.4,0,.8,.4) forwards}
.fc.go .ff.b{animation:flipB .28s cubic-bezier(.2,.6,.4,1) .26s forwards}
.fc.go.fast .ff.t{animation-duration:.075s}
.fc.go.fast .ff.b{animation-duration:.075s;animation-delay:.075s}
@keyframes flipT{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes flipB{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
.fsep{display:inline-block;padding:0 .04em;color:var(--text-3)}
.cd.flap{letter-spacing:0}
.cdf .fc.fsec i{color:#FFE27A;text-shadow:0 0 18px rgba(242,194,48,.35)}
.cnt{display:block;margin-top:12px;font:800 clamp(18px,6.2vw,29px)/1 var(--f-ui);letter-spacing:0;text-align:center;white-space:nowrap}
.cnt.flap{display:flex;justify-content:center}
.cnt.flap .fc i{color:#FFE27A;text-shadow:0 0 14px rgba(242,194,48,.4)}
.cnt.flap .fc.lz i{color:#4a3f2a;text-shadow:none}
.cnt.flap .fsep{color:#7a6538;padding:0;width:.26em;text-align:center}
.pool-top .cnt-u{margin-left:auto}
.pool .tube{margin-top:14px}

/* ---------- odometer ---------- */
.odo{display:inline-flex;align-items:baseline;white-space:nowrap}
.odo .od{display:inline-block;height:1.15em;overflow:hidden;vertical-align:bottom;line-height:1.15em}
.odo .ods{display:block;white-space:pre;line-height:1.15em;transition:transform .7s cubic-bezier(.2,.75,.25,1)}
.odo .odc{line-height:1.15em}

/* ---------- card flip (front = card, back = QR + numbers) ---------- */
.cflip{position:relative;display:block;perspective:1100px;cursor:pointer;container-type:inline-size;outline:none;border-radius:8px}
.cf-in{position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.cflip.flipped .cf-in{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){.cflip.hov:hover .cf-in{transform:rotateY(180deg)}}
.cf-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cf-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;align-items:stretch;padding:7cqw 8cqw 6cqw;gap:3cqw;clip-path:polygon(9% 0,96% 0,100% 2.86%,100% 93.57%,91% 100%,4% 100%,0 97.14%,0 6.43%);background:radial-gradient(120% 80% at 20% 0%,rgba(255,226,150,.16),transparent 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),linear-gradient(160deg,#2c251b 0%,#17130c 55%,#0d0b08 100%);color:var(--text);font-size:6.4cqw;line-height:1.25}
.cb-rim{position:absolute;inset:1.6cqw;clip-path:polygon(9% 0,96% 0,100% 2.86%,100% 93.57%,91% 100%,4% 100%,0 97.14%,0 6.43%);box-shadow:inset 0 0 0 1px rgba(242,194,48,.5),inset 0 0 0 2px rgba(0,0,0,.5);pointer-events:none}
.cb-top{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;position:relative}
.cb-t{font:800 1.2em/1.1 var(--f-disp);background:var(--gold-v);-webkit-background-clip:text;background-clip:text;color:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-k{font:600 .66em/1 var(--f-cn);color:var(--text-3);letter-spacing:.12em;white-space:nowrap}
.cb-qr{position:relative;align-self:center;width:56cqw;aspect-ratio:1;border-radius:3cqw;background:#f6efd9;color:#1a1204;padding:1.2cqw;box-shadow:0 0 0 1px rgba(242,194,48,.55),0 2cqw 5cqw rgba(0,0,0,.6)}
.cb-qr svg{display:block;width:100%;height:100%}
.cb-qr.none{display:grid;place-items:center;background:repeating-linear-gradient(45deg,rgba(255,226,150,.05) 0 4px,transparent 4px 8px),#120e09;color:var(--text-3)}
.cb-qr.none .pending{font-size:.62em;padding:.3em .6em;letter-spacing:.08em}
.cb-ad{position:relative;display:flex;flex-direction:column;gap:1.2cqw;text-align:center}
.cb-al{font:500 .62em/1.2 var(--f-cn);color:var(--text-3)}
.cb-ar{display:flex;justify-content:center;align-items:center;gap:2cqw}
.cb-ar code{font:500 .74em/1 var(--f-mono);color:var(--text)}
.cb-copy{display:inline-flex;align-items:center;gap:1cqw;font:700 .62em/1 var(--f-cn);color:var(--g);padding:1.4cqw 2.6cqw;border-radius:999px;border:1px solid var(--g-a35)}
.cb-copy .ic{width:1.1em;height:1.1em}
.cb-rows{position:relative;display:flex;flex-direction:column;gap:1.6cqw;margin-top:auto;padding-top:2.4cqw;border-top:1px solid rgba(255,226,150,.12)}
.cb-rows div{display:flex;justify-content:space-between;gap:2cqw}
.cb-rows dt{font:500 .64em/1.2 var(--f-cn);color:var(--text-3)}
.cb-rows dd{font:700 .7em/1.2 var(--f-ui);white-space:nowrap}
.cb-rows dd.pending{font-size:.55em;padding:.1em .4em}
.ab-row{display:flex;align-items:center;gap:16px;margin-top:14px}
.ab-card{width:118px;flex:none}
.ab-card .cf-front .gc{filter:drop-shadow(0 8px 14px rgba(0,0,0,.7))}
.ab-hint{display:flex;gap:8px;align-items:flex-start;font:400 12.5px/1.65 var(--f-cn);color:var(--text-2)}
.ab-hint .ic{color:var(--g);width:16px;height:16px;margin-top:2px}
.gtile .cardw .cflip{margin:0 auto}

/* ---------- card-shaped skeletons + designed error state ---------- */
.skcard{display:block;width:100%;aspect-ratio:100/140;clip-path:polygon(9% 0,96% 0,100% 2.86%,100% 93.57%,91% 100%,4% 100%,0 97.14%,0 6.43%);background:linear-gradient(110deg,rgba(255,226,150,.05) 30%,rgba(255,226,150,.17) 45%,rgba(255,226,150,.05) 60%),#14100a;background-size:250% 100%;animation:skel 1.6s ease-in-out infinite}
.skchart{display:block;width:min(560px,90%);height:120px;border-radius:12px;background:linear-gradient(110deg,rgba(255,226,150,.04) 30%,rgba(255,226,150,.11) 45%,rgba(255,226,150,.04) 60%);background-size:250% 100%;animation:skel 1.6s ease-in-out infinite}
.errstate{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.errstate .es-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:#ff8394;background:rgba(255,84,104,.08);box-shadow:0 0 0 1px rgba(255,84,104,.35),0 0 26px rgba(255,84,104,.18)}
.errstate .es-ic .ic{width:22px;height:22px}
.errstate b{font:800 16px/1.3 var(--f-cn);color:#ffd0d6}
.errstate .es-d{font:400 12.5px/1.6 var(--f-cn);color:var(--text-2);display:inline-flex;align-items:center;gap:8px}
.errstate .es-d::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid #ff8394;border-right-color:transparent;animation:spin .9s linear infinite}
.errstate .es-t{font:400 11.5px/1.5 var(--f-ui);color:var(--text-3)}

/* ---------- live trade toasts ---------- */
#ttoasts{position:fixed;left:16px;bottom:16px;z-index:61;display:flex;flex-direction:column;gap:8px;width:min(300px,calc(100vw - 32px));pointer-events:none}
.trt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(30,25,16,.97),rgba(14,11,7,.97));border:1px solid var(--hair-2);box-shadow:0 14px 34px rgba(0,0,0,.6);transform:translateX(-110%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.trt.in{transform:none;opacity:1}
.trt.out{transform:translateX(-30px);opacity:0}
.trt.buy{box-shadow:0 14px 34px rgba(0,0,0,.6),inset 3px 0 0 rgba(47,208,138,.75)}
.trt.sell{box-shadow:0 14px 34px rgba(0,0,0,.6),inset 3px 0 0 rgba(255,84,104,.75)}
.trt-c{width:26px;flex:none}
.trt-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.trt-l1{display:flex;align-items:center;gap:8px;font:700 13px/1.2 var(--f-cn);white-space:nowrap}
.trt-l1 b{font:800 13px/1 var(--f-disp)}
.trt-k{display:inline-flex;align-items:center;gap:3px}
.trt.buy .trt-k{color:var(--up)}.trt.sell .trt-k{color:var(--down)}
.trt-k .ic{width:13px;height:13px}
.trt-l1 .ag{margin-left:0}
.trt-l2{font:500 11.5px/1.2 var(--f-ui);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- settlement ceremony ---------- */
.cer{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;background:radial-gradient(60% 60% at 50% 46%,rgba(80,56,8,.6),rgba(3,2,1,.95) 70%);opacity:0;transition:opacity .4s}
.cer.on{opacity:1}
.cer.out{opacity:0}
.cer-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.cer-stage{position:relative;width:min(92vw,860px);height:min(80vh,660px)}
.cer-seat{position:absolute;left:50%;top:44%;width:clamp(56px,9vmin,92px);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r)) scale(.7);opacity:0;transition:transform .95s cubic-bezier(.6,0,.35,1) var(--d),opacity .55s var(--d)}
.cer-seat .gc{filter:drop-shadow(0 10px 16px rgba(0,0,0,.75))}
.cer-seat.in{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}
.cer-seat.fly{opacity:0;transform:translate(-50%,-50%) translate(0,0) rotate(0) scale(.25)}
.cer-king{position:absolute;left:50%;top:44%;width:clamp(150px,27vmin,250px);transform:translate(-50%,-50%);perspective:1300px;z-index:2}
.cer-turn{position:relative;transform-style:preserve-3d}
.cer-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cer-back{position:absolute;inset:0;transform:rotateY(180deg)}
.cer-turn.spin{animation:kingturn 2.6s cubic-bezier(.45,0,.2,1) both}
@keyframes kingturn{0%{transform:rotateY(0) scale(.96)}55%{transform:rotateY(200deg) scale(1.06)}100%{transform:rotateY(360deg) scale(1)}}
.cer-king .gc{filter:drop-shadow(0 0 30px rgba(255,206,64,.5)) drop-shadow(0 26px 30px rgba(0,0,0,.7))}
.cer-king.glow .gc{filter:drop-shadow(0 0 64px rgba(255,206,64,.85)) drop-shadow(0 26px 30px rgba(0,0,0,.7))}
.cer-shadow{position:absolute;left:12%;right:12%;bottom:-9%;height:12%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.8),transparent 70%);transform:scale(1.15);opacity:.5;transition:transform .35s,opacity .35s}
.cer-king.pressed .cer-shadow{transform:scale(.9);opacity:.95}
.cer-king .gc .stp{transition:opacity .2s,transform .55s cubic-bezier(.25,1.6,.45,1);filter:drop-shadow(0 1.4px 1.2px rgba(0,0,0,.45))}
.cer-cap{position:absolute;left:0;right:0;bottom:6vh;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 16px;opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.cer-cap.in{opacity:1;transform:none}
.cer-cap b{font:900 clamp(22px,3.4vw,34px)/1.25 var(--f-cn);background:linear-gradient(180deg,#fffdf6,#e8cd8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cer-sub{font:400 14px/1.6 var(--f-cn);color:var(--text-2)}
.cer-x{position:absolute;top:18px;right:18px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--hair-3);color:var(--text-2);font:600 13px/1 var(--f-cn);background:rgba(0,0,0,.4);z-index:4}
.cer.rm .cer-cap{opacity:1;transform:none}

/* ---------- scroll reveal + glow parallax ---------- */
.rv-on .rv:not(.in){opacity:0;transform:translateY(22px)}
.rv-on .rv{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv-on .rv.now{transition:none}
.hglow{position:absolute;right:-14%;bottom:-34%;width:900px;height:720px;max-width:120vw;background:radial-gradient(closest-side,rgba(150,104,14,.28),rgba(120,80,8,.08) 60%,transparent);pointer-events:none;will-change:transform}
.halo{will-change:transform}

/* ---------- mobile carousel + bottom sheet (desktop: hidden) ---------- */
.carousel,.tradebar,.sheet-h{display:none}
.sheet-bg{position:fixed;inset:0;z-index:84;background:rgba(0,0,0,.62);opacity:0;transition:opacity .3s}
.sheet-bg.on{opacity:1}
@media (max-width:760px){
  body.sheet-open .mcta{opacity:0;pointer-events:none}
  .carousel{display:block;margin:0 calc(var(--gut) * -1) var(--s3)}
  .cs-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cs-track::-webkit-scrollbar{display:none}
  .cs{flex:0 0 78%;scroll-snap-align:center;display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;border:1px solid var(--hair);background:radial-gradient(240px 180px at 20% 30%,rgba(242,194,48,.08),transparent 70%),var(--panel);text-decoration:none;min-width:0}
  .cs.first{border-color:rgba(242,194,48,.32);background:radial-gradient(240px 180px at 20% 30%,rgba(242,194,48,.16),transparent 70%),var(--panel)}
  .cs-c{width:36%;flex:none}
  .cs-c .gc{filter:drop-shadow(0 8px 12px rgba(0,0,0,.7))}
  .cs-t{display:flex;flex-direction:column;gap:2px;min-width:0}
  .cs-r{font:700 11px/1.3 var(--f-cn);color:var(--g);letter-spacing:.08em}
  .cs-k{font:800 18px/1.2 var(--f-disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}
  .cs-l{font:500 11px/1.3 var(--f-cn);color:var(--text-3);margin-top:6px}
  .cs-v,.cs-m{font:700 clamp(14px,4.4vw,17px)/1.15 var(--f-ui);white-space:nowrap}
  .cs-v{color:var(--g-hi)}
  .cs .pending{font-size:11px}
  .cs.ghost .cs-c{opacity:.5}
  .cs-dots{display:flex;justify-content:center;gap:6px}
  .cs-dots i{width:6px;height:6px;border-radius:6px;background:rgba(255,255,255,.18);transition:background .3s,width .3s}
  .cs-dots i.on{width:18px;background:var(--gold-h)}
  .tradebar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tradebar .btn{height:50px;font-size:15px}
  #trade{position:fixed;left:0;right:0;bottom:0;z-index:85;max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;border-bottom:0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s;box-shadow:0 -20px 50px rgba(0,0,0,.7);background:linear-gradient(180deg,#1a150e,#0e0b07)}
  #trade.open{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
  .sheet-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 12px;position:relative}
  .sheet-h .grab{position:absolute;left:50%;top:-2px;width:40px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);transform:translateX(-50%)}
  .sheet-h b{font:800 16px/1.3 var(--f-cn);margin-top:10px}
  .sheet-x{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--hair-2);color:var(--text-2);margin-top:8px}
  .sheet-x .ic{width:16px;height:16px}
  .ab-card{width:96px}
  #ttoasts{top:112px;bottom:auto;left:16px;right:16px;width:auto}
  .trt{transform:translateY(-14px)}
  .trt.in{transform:none}
  .trt.out{transform:translateY(-10px)}
  .cer-cap{bottom:4vh}
}
@media (prefers-reduced-motion:reduce){
  .rv-on .rv:not(.in){opacity:1;transform:none}
  .cflip.flipped .cf-in,.cflip.hov:hover .cf-in{transform:none}
  .cflip.flipped .cf-back,.cflip.hov:hover .cf-back{transform:none;z-index:2}
  .cflip.flipped .cf-front,.cflip.hov:hover .cf-front{visibility:hidden}
  .trt{transform:none;opacity:1}
  .fc .ff{display:none}
}