html, body { height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#gl.drag { cursor: grabbing; }
.hidden { display: none !important; }
.panel { background: linear-gradient(160deg, rgba(14,40,35,.78), rgba(7,17,15,.72)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 0 0 1px rgba(125,255,193,.16) inset, 0 20px 50px -20px rgba(0,0,0,.6); }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
.tl { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 10px; width: 270px; pointer-events: none; }
.tl > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { width: 40px; height: 40px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); } .brand .mark svg { width: 100%; height: 100%; display: block; }
.brand .bn { font: 800 20px/1 var(--display); letter-spacing: .01em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.status { font-size: 11px; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); display: flex; align-items: center; gap: 6px; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.status .dot.live { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.vault { padding: 12px 14px; font-size: 12px; }
.vault .ph { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .16em; font-size: 11px; color: var(--gold); }
.vault .mini { margin-left: auto; background: none; border: 0; color: var(--paper); opacity: .6; cursor: pointer; font: 700 14px var(--mono); }
.vault.collapsed .vbody { display: none; }
.vrow { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.vrow span { opacity: .65; } .vrow b { color: var(--paper); font-weight: 700; }
.vfeed-h { margin-top: 10px; font-size: 10px; letter-spacing: .18em; opacity: .55; }
.vfeed { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow: hidden; }
.vfeed li { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.22); }
.vfeed li.new { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: rgba(255,201,74,.45); transform: translateX(-6px); } 100% { background: rgba(0,0,0,.22); } }
.vfeed li .pk { width: 12px; height: 16px; border-radius: 2px; background: linear-gradient(160deg, var(--mint), #1a7a56); flex: none; }
.vfeed li .gems { margin-left: auto; display: flex; gap: 3px; } .vfeed li .gems i { width: 6px; height: 6px; transform: rotate(45deg); border-radius: 1px; }
.fine { margin-top: 8px; font-size: 9.5px; opacity: .45; letter-spacing: .04em; }
.tr { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); background: rgba(7,17,15,.7); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(125,255,193,.22) inset, 0 10px 30px -12px rgba(0,0,0,.6); }
.pill:hover { background: rgba(14,40,35,.85); }
.pill.icon { padding: 0 14px; font-size: 16px; } .pill.icon i { font-style: normal; font-size: 10px; letter-spacing: .1em; opacity: .7; }
.pill.wallet.on { background: linear-gradient(100deg, rgba(171,159,242,.35), rgba(125,255,193,.25)); box-shadow: 0 0 0 1px rgba(171,159,242,.6) inset; }
.ph-ico { width: 18px; height: 18px; border-radius: 6px; background: #ab9ff2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 13.5C4 8.8 7.6 5 12.2 5S20 8.6 20 12.6c0 2.6-1.4 4.4-3.3 4.4-1.1 0-1.6-.7-1.9-1.4-.4.8-1.2 1.4-2.2 1.4-1 0-1.6-.6-1.8-1.3-.4.8-1.2 1.3-2.3 1.3C6 17 4 15.8 4 13.5zm9.2-2.6c-.7 0-1.1.6-1.1 1.3s.4 1.3 1.1 1.3 1.1-.6 1.1-1.3-.4-1.3-1.1-1.3zm3.6 0c-.7 0-1.1.6-1.1 1.3s.4 1.3 1.1 1.3 1.1-.6 1.1-1.3-.4-1.3-1.1-1.3z'/%3E%3C/svg%3E") center/80% no-repeat; flex: none; }
.compass { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 420px; height: 34px; overflow: hidden; border-radius: 999px; background: rgba(7,17,15,.55); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(125,255,193,.18) inset; -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); pointer-events: none; }
.ctrack { position: absolute; top: 0; left: 0; height: 100%; }
.ctrack span { position: absolute; top: 9px; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: rgba(244,241,230,.75); white-space: nowrap; }
.ctrack span.card { color: var(--c); text-shadow: 0 0 8px var(--c); font-size: 13px; top: 7px; }
.ctrack span.lm { color: rgba(125,255,193,.8); font-size: 9px; top: 11px; }
.cneedle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: translateX(-50%); box-shadow: 0 0 8px var(--gold); }
.prompt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(7,17,15,.78); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(125,255,193,.35) inset, 0 0 30px rgba(125,255,193,.2); font-size: 13px; font-weight: 600; letter-spacing: .06em; animation: pop .25s ease-out; }
.prompt kbd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--mint); color: var(--ink); font: 800 14px var(--mono); }
@keyframes pop { from { transform: translateX(-50%) scale(.85); opacity: 0; } }
.hint { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; font-size: 12px; letter-spacing: .06em; background: rgba(7,17,15,.7); box-shadow: 0 0 0 1px var(--c, #7dffc1) inset; color: var(--paper); }
.toasts { position: absolute; right: 16px; top: 70px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { padding: 10px 14px; border-radius: 12px; font-size: 12px; background: rgba(7,17,15,.82); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; max-width: 320px; animation: tin .35s ease-out; }
.toast b { color: var(--c, var(--mint)); }
.toast.out { opacity: 0; transform: translateX(20px); transition: all .4s; }
@keyframes tin { from { opacity: 0; transform: translateX(20px); } }
.br { position: absolute; right: 16px; bottom: 16px; }
#minimap { width: 200px; height: 200px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px rgba(125,255,193,.35), 0 0 0 6px rgba(7,17,15,.55), 0 20px 50px -10px rgba(0,0,0,.6); }
.coords { text-align: center; font-size: 10px; letter-spacing: .14em; margin-top: 10px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.bl { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 520px; }
.bl span { font-size: 10.5px; letter-spacing: .06em; padding: 6px 9px; border-radius: 8px; background: rgba(7,17,15,.55); color: rgba(244,241,230,.85); }
.bl kbd { font-size: 10px; padding: 1px 5px; margin-right: 3px; }
kbd { font: 700 11px var(--mono); padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset; }
.touch { display: none; }
@media (pointer: coarse) {
  .touch { display: block; } .bl { display: none; } .compass { width: 240px; } .tl { width: 210px; } .vault:not(.collapsed) .vfeed { max-height: 70px; }
  .stick { position: absolute; left: 28px; bottom: 36px; width: 130px; height: 130px; border-radius: 50%; background: rgba(7,17,15,.4); box-shadow: 0 0 0 2px rgba(125,255,193,.3) inset; }
  .knob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(125,255,193,.6); box-shadow: 0 0 20px rgba(125,255,193,.5); }
  .tbtn { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 0; font: 800 20px var(--mono); color: var(--ink); background: var(--mint); box-shadow: 0 0 24px rgba(125,255,193,.4); }
  .tbtn.jump { right: 22px; bottom: 190px; } .tbtn.act { right: 96px; bottom: 160px; background: var(--gold); }
  .br { bottom: 16px; } #minimap { width: 120px; height: 120px; } .coords { font-size: 8px; }
  .compass { top: 162px; width: 70vw; height: 28px; } .brand .bn { display: none; } .ctrack span { top: 7px; }
  .pill.wallet #walletText { display: none; } .pill { height: 36px; padding: 0 12px; }
  .prompt { bottom: 250px; font-size: 12px; max-width: 86vw; }
  .dialog { bottom: 12px; padding: 12px; } .dialog canvas { width: 64px; height: 64px; } .dline { font-size: 13px; }
  .status { flex-wrap: wrap; }
}

/* dialogue */
.dialog { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 8; width: min(720px, 92vw); display: flex; gap: 18px; align-items: center; padding: 16px 22px 16px 16px; border-radius: 22px; background: linear-gradient(160deg, rgba(244,241,230,.97), rgba(225,240,232,.96)); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), 0 0 0 3px var(--ink), 0 0 0 6px var(--mint); animation: dlg .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes dlg { from { transform: translateX(-50%) translateY(30px) scale(.95); opacity: 0; } }
.dialog canvas { width: 96px; height: 96px; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #fff, #cfeee0); flex: none; box-shadow: 0 0 0 2px var(--ink) inset; }
.dname { font: 800 22px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.dline { margin-top: 8px; font-size: 15px; line-height: 1.45; font-weight: 600; min-height: 22px; }
.dsub { margin-top: 8px; font-size: 12px; color: #2b6b55; font-weight: 700; letter-spacing: .02em; }
.dclose { position: absolute; right: 16px; bottom: 10px; font-size: 10px; letter-spacing: .14em; opacity: .5; }

/* start */
.start { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 40%, rgba(7,17,15,.35), rgba(7,17,15,.88)); backdrop-filter: blur(3px); }
.start-card { width: min(520px, 92vw); text-align: center; padding: 40px 36px 30px; border-radius: 28px; background: linear-gradient(160deg, rgba(14,40,35,.86), rgba(7,17,15,.9)); box-shadow: 0 0 0 1px rgba(125,255,193,.22) inset, 0 40px 120px -30px rgba(0,0,0,.8), 0 0 80px -20px rgba(125,255,193,.25); }
.start-mark { width: 92px; height: 92px; margin: 0 auto 10px; filter: drop-shadow(0 10px 30px rgba(125,255,193,.35)); } .start-mark svg { width: 100%; height: 100%; }
.start h1 { margin: 6px 0 10px; font-size: 50px; display: flex; justify-content: center; gap: .22em; }
.start h1 .g { background: linear-gradient(100deg, var(--mint), var(--lime), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.start p { margin: 0 auto 24px; max-width: 380px; font-size: 13px; line-height: 1.6; opacity: .75; }
.field { display: block; text-align: left; margin-bottom: 16px; }
.field span { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.field input { width: 100%; height: 48px; border-radius: 14px; border: 0; padding: 0 16px; font: 700 16px var(--mono); color: var(--paper); background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px rgba(125,255,193,.25) inset; outline: none; }
.field input:focus { box-shadow: 0 0 0 2px var(--mint) inset; }
.start-row { display: flex; gap: 10px; } .start-row .btn { flex: 1; justify-content: center; height: 52px; }
.start-row .btn.play { background: linear-gradient(100deg, var(--mint), var(--lime)); letter-spacing: .2em; box-shadow: 0 0 30px rgba(125,255,193,.35); }
.start-row .btn.play:disabled { filter: grayscale(.8) brightness(.6); cursor: wait; }
.start-row .btn.on { box-shadow: 0 0 0 1px rgba(171,159,242,.7) inset; background: rgba(171,159,242,.18); }
.start-note { margin-top: 16px; font-size: 11px; line-height: 1.6; opacity: .55; }
.loading { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 10px; letter-spacing: .14em; opacity: .7; text-transform: uppercase; }
.loading .bar { width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--gold)); transition: width .3s; }

/* reveal */
.reveal { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 30%, transparent), rgba(4,10,9,.92) 60%); animation: fadein .3s; perspective: 1400px; }
@keyframes fadein { from { opacity: 0; } }
.rays { position: absolute; left: 50%; top: 45%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 22%, transparent) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); animation: rays 18s linear infinite; pointer-events: none; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.rv-top { position: relative; font: 800 15px/1 var(--mono); letter-spacing: .4em; color: var(--rc); text-shadow: 0 0 20px var(--rc); }
.rv-top span { color: var(--rc); }
.flip { position: relative; width: 300px; height: 420px; transform-style: preserve-3d; animation: flipin 1.5s cubic-bezier(.2,.9,.25,1) forwards; }
@keyframes flipin { 0% { transform: translateY(120px) rotateY(0deg) scale(.6); } 35% { transform: translateY(0) rotateY(0deg) scale(1); } 45% { transform: rotateY(0deg) rotateZ(-3deg) scale(1.02); } 55% { transform: rotateY(0deg) rotateZ(3deg); } 100% { transform: rotateY(180deg) scale(1); } }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; overflow: hidden; }
.flip .face canvas { width: 100%; height: 100%; display: block; }
.flip .front { transform: rotateY(180deg); box-shadow: 0 0 80px color-mix(in srgb, var(--rc) 70%, transparent), 0 40px 80px -20px rgba(0,0,0,.8); }
.flip .front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); background-size: 250% 100%; animation: shine 2.4s 1.4s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.rv-name { position: relative; font: 800 40px/1 var(--display); text-transform: uppercase; text-align: center; opacity: 0; animation: up .5s 1.3s forwards; }
.rv-sub { position: relative; font-size: 12px; letter-spacing: .14em; opacity: 0; animation: up .5s 1.45s forwards; color: rgba(244,241,230,.75); text-transform: uppercase; }
.reveal .btn { position: relative; opacity: 0; animation: up .5s 1.6s forwards; }
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.burst { position: fixed; width: 10px; height: 10px; border-radius: 2px; pointer-events: none; z-index: 31; }

/* binder */
.binder { position: fixed; inset: 0; z-index: 25; overflow: auto; padding: 36px 5vw 60px; background: radial-gradient(90% 80% at 50% 0%, rgba(20,60,50,.96), rgba(5,12,11,.98)); animation: fadein .25s; }
.bd-head { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 14px; }
.bd-head h2 { font-size: 54px; margin: 6px 0 0; }
.bd-head .kicker { font-size: 11px; letter-spacing: .22em; color: var(--mint); }
.bd-prog { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .1em; margin-bottom: 8px; }
.bd-bar { width: 200px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; } .bd-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--gold)); }
.bd-filters { display: flex; gap: 6px; margin-bottom: 6px; }
.bd-filters button { border: 0; cursor: pointer; padding: 8px 12px; border-radius: 999px; font: 700 10px var(--mono); letter-spacing: .14em; color: var(--paper); background: rgba(255,255,255,.06); }
.bd-filters button.on { background: var(--mint); color: var(--ink); }
#bdClose { margin-left: auto; margin-bottom: 6px; }
.bd-owner { font-size: 11px; letter-spacing: .08em; opacity: .55; margin-bottom: 22px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.slot { position: relative; aspect-ratio: 5 / 7; border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .2s; }
.slot:hover { transform: translateY(-4px) rotate(-1deg); }
.slot canvas { width: 100%; height: 100%; display: block; }
.slot.empty { cursor: default; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px), rgba(0,0,0,.25); box-shadow: 0 0 0 1.5px rgba(255,255,255,.1) inset; display: grid; place-items: center; text-align: center; }
.slot.empty:hover { transform: none; }
.slot.empty .q { font: 800 46px var(--display); opacity: .14; }
.slot.empty .nm { position: absolute; bottom: 12px; left: 0; right: 0; font-size: 10px; letter-spacing: .12em; opacity: .35; }
.slot.empty .rr { position: absolute; top: 10px; left: 0; right: 0; font-size: 9px; letter-spacing: .2em; color: var(--c); opacity: .6; }
.slot .cnt { position: absolute; top: 8px; right: 8px; font: 800 11px var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--ink); color: var(--gold); }
.slot.owned { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent), 0 16px 40px -18px var(--c); }
.bd-zoom { position: fixed; inset: 0; z-index: 26; display: grid; place-items: center; background: rgba(0,0,0,.7); }
.bd-zoom canvas { width: min(380px, 80vw); border-radius: 20px; box-shadow: 0 0 80px var(--c); }

.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.mcard { width: min(440px, 90vw); padding: 28px; border-radius: 22px; background: var(--deep); box-shadow: 0 0 0 1px rgba(171,159,242,.4) inset; }
.mcard h3 { font: 800 26px var(--display); margin: 0 0 10px; } .mcard p { font-size: 13px; line-height: 1.6; opacity: .75; }
.mrow { display: flex; gap: 10px; margin-top: 18px; }
.live-tag { font: 800 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink); background: var(--mint); padding: 4px 6px; border-radius: 4px; }
.vrow a { color: var(--mint); text-decoration: none; font-weight: 700; } .vrow a:hover { text-decoration: underline; }
.linkbtn { background: none; border: 0; color: var(--mint); font: 700 10px var(--mono); letter-spacing: .1em; cursor: pointer; float: right; padding: 0; }
.vfeed li .ev { flex: 1; line-height: 1.35; } .vfeed li .ev b { color: var(--c, var(--mint)); font-weight: 700; }
.vfeed li .dotr { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); flex: none; background: var(--c, var(--mint)); }
.vfeed .empty { opacity: .6; font-style: italic; background: none; padding: 4px 0; }
.status .dot.warn { background: var(--coral); box-shadow: 0 0 10px var(--coral); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.conn { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 9px 16px; border-radius: 999px; background: rgba(40,12,8,.85); box-shadow: 0 0 0 1px rgba(255,122,89,.5) inset; font-size: 12px; letter-spacing: .06em; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--coral); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.announce { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); text-align: center; padding: 14px 26px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(14,40,35,.92), rgba(7,17,15,.9)); box-shadow: 0 0 0 1.5px var(--c, var(--mint)) inset, 0 0 60px color-mix(in srgb, var(--c, #7dffc1) 45%, transparent); animation: annIn .5s cubic-bezier(.2,1.4,.4,1); max-width: 86vw; }
.announce .an-k { font: 800 11px var(--mono); letter-spacing: .3em; color: var(--c, var(--mint)); }
.announce .an-t { font: 800 22px/1.15 var(--display); margin-top: 6px; text-transform: uppercase; }
@keyframes annIn { from { transform: translateX(-50%) translateY(-20px) scale(.9); opacity: 0; } }
.rv-how, .bd-how { position: relative; max-width: 560px; text-align: center; font-size: 12px; line-height: 1.6; color: rgba(244,241,230,.72); opacity: 0; animation: up .5s 1.5s forwards; }
.rv-how a, .bd-how a { color: var(--mint); }
.bd-how { text-align: left; opacity: 1; animation: none; margin: 0 0 22px; max-width: 760px; }
.slot .st { position: absolute; left: 8px; bottom: 8px; font: 800 9px var(--mono); letter-spacing: .12em; padding: 4px 7px; border-radius: 6px; background: var(--ink); color: var(--gold); text-transform: uppercase; }
.slot .st.shipped, .slot .st.sent, .slot .st.delivered { color: var(--mint); }
.bd-empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; border-radius: 18px; background: rgba(0,0,0,.25); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.bd-empty b { display: block; font: 800 28px var(--display); margin-bottom: 8px; }
.flog { width: 100%; border-collapse: collapse; font-size: 13px; }
.flog th { text-align: left; font-size: 10px; letter-spacing: .16em; opacity: .55; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.flog td { padding: 12px 10px; border-bottom: 1px dashed rgba(255,255,255,.07); vertical-align: middle; }
.flog .r { font: 800 10px var(--mono); letter-spacing: .12em; color: var(--c); }
.flog .stt { font: 800 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.flog .thumb { width: 34px; height: 48px; border-radius: 4px; object-fit: cover; background: #0b1f1c; vertical-align: middle; margin-right: 10px; }
.pill.xbtn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; }
.pill.xbtn .x-ico { width: 15px; height: 15px; }
.start-x { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--mint, #7dffc1); text-decoration: none; opacity: .85; }
.start-x:hover { opacity: 1; }