/* ------------------------------------------------ the single-player ladder's home (js/ladder.js), inside
   #home: pages slide in from the right over the home page; the live 3D table stays behind them */
#home.ladder { padding: 0; overflow: hidden; display: block; z-index: 4; } /* over the table characters' comic words (#comics, before it in the page): they show round the stickers, never on them */
#home.ladder > .home-top, #home.ladder > .foot { display: none; }
#home.ladder .practice-row { display: none; }
.ld { position: absolute; inset: 0; }
.ld-pg { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; overflow: hidden;
  padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l));
  transition: translate .32s cubic-bezier(.3, 1.2, .5, 1), opacity .2s; }
.ld-pg.off { translate: 105% 0; opacity: 0; pointer-events: none; }
.ld-pg.away { translate: -40% 0; opacity: 0; pointer-events: none; }
.ld-pg:not([data-pg=home]) { background: linear-gradient(rgba(var(--scrim), .55), rgba(var(--scrim), .8)); }
.ld .ic { flex: none; }

/* me: a paper sticker, slightly crooked, and my coins */
.ld-top { display: flex; align-items: center; gap: 8px; }
.ld-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 10px 6px 5px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--wob); box-shadow: var(--shadow), var(--cel); rotate: -1.5deg; color: var(--ink); }
.ld-ava { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: #f6c8c8; box-shadow: 0 2px 0 var(--ink); }
.ld-ava .ic { width: 28px; height: 28px; }
.ld-who { min-width: 0; flex: 1; }
.ld-who b { display: block; font: 900 16px/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-lvl { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font: 900 11px/1.1 var(--display); color: var(--ink2); }
.ld-lvl > span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.ld-lvl .ic { width: 16px; height: 16px; }
.ld-coins { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px 4px 4px; border: 3px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--yellow); font: 900 17px/1 var(--display); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); rotate: 2deg; }
.ld-coins .ic { width: 26px; height: 26px; }

/* the title over the table, the two big stickers, the round ones */
.ld .brand { margin: 10px 0 0; }
.ld .brand .logo h1 { font-size: clamp(44px, 14vw, 66px); }
.ld .brand p { margin-top: 8px; font-size: 13px; padding: 6px 28px 9px; }
.ld-grow { flex: 1; }
/* the space left over: most of it under the title, a little between the two big stickers and under 约人开房, so both sit up nearer the title */
.ld-grow.low { flex: .3; }
.ld-grow.base { flex: .45; }
.ld-go { position: relative; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; width: 100%; min-height: 76px; padding: 8px 14px 9px 10px; text-align: left;
  border: 3.5px solid var(--ink); border-radius: var(--wob); box-shadow: 0 6px 0 var(--ink), var(--cel); color: #fff; cursor: pointer; transition: scale .08s; font: inherit; }
.ld-go:active { scale: 1.05 .9; }
.ld-go.solo { background: var(--pink); rotate: -1.2deg; }
.ld-go.multi { background: var(--purple, #8b6cf0); rotate: 1deg; }
.ld-go > .ic { width: 58px; height: 58px; filter: drop-shadow(0 3px 0 var(--ink)); margin: -14px 0 -10px -6px; }
.ld-go b { display: block; font: 900 27px/1.1 var(--display); letter-spacing: 1px; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.ld-go small { display: block; margin-top: 3px; font: 800 12px/1.2 var(--font); opacity: .95; }
.ld-burst { position: absolute; display: grid; place-items: center; clip-path: var(--burst); background: var(--ink); }
.ld-burst > span { display: grid; place-items: center; width: calc(100% - 6px); height: calc(100% - 6px); clip-path: var(--burst); background: var(--yellow); color: var(--ink); font: 900 12px/1 var(--display); rotate: -12deg; text-align: center; }
.ld-go .ld-burst { right: -10px; top: -22px; width: 62px; height: 62px; animation: ld-pulse 1.2s ease-in-out infinite; }
@keyframes ld-pulse { 50% { scale: 1.1; } }
.ld-row3 { display: flex; justify-content: space-around; gap: 8px; margin-top: 4px; }
.ld-round { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: #fff; font: 900 12px/1 var(--display); text-shadow: 0 2px 0 var(--ink); }
.ld-round > span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 4px 0 var(--ink), var(--cel); transition: scale .08s; }
.ld-round:active > span { scale: 1.08 .86; }
.ld-round .ic { width: 32px; height: 32px; }
.ld-pow { position: fixed; z-index: 90; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; animation: ld-pow .38s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.ld-pow > span { font-size: 26px; }
@keyframes ld-pow { 0% { scale: .2; opacity: 0; } 30% { opacity: 1; } 70% { scale: 1.1; opacity: 1; } 100% { scale: 1.2; opacity: 0; } }

/* a page's title bar: it rides over the start of the page, the rows slide under it */
.ld-hd { display: flex; align-items: center; gap: 10px; flex: none; }
.ld-back { width: 44px; height: 44px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); padding: 0; cursor: pointer; color: var(--ink); }
.ld-back svg { width: 22px; height: 22px; }
.ld-hd h2 { min-width: 0; margin: 0; font-size: 34px; white-space: nowrap; transform: rotate(-2deg); color: #fff; }
/* the longer titles of other languages stay on one line */
html:not([lang^=zh]) .ld-hd h2 { font-size: clamp(22px, 7vw, 30px); }
.ld-hd .ld-coins { margin-left: auto; }
[data-pg=solo] .ld-hd { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) 22px calc(14px + var(--safe-l));
  background: linear-gradient(rgba(var(--scrim), .92) 64%, rgba(var(--scrim), 0)); }

/* the venues: one a row, up and down; the button stays at the bottom over the list's end */
.ld-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; overscroll-behavior: contain;
  margin: calc(-10px - var(--safe-t)) -14px calc(-14px - var(--safe-b)); padding: calc(78px + var(--safe-t)) 14px calc(118px + var(--safe-b)); }
.ld-list::-webkit-scrollbar { display: none; }
.ld-fightbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l));
  background: linear-gradient(rgba(var(--scrim), 0), rgba(var(--scrim), .92) 34%); }
.ld-ven { position: relative; flex: none; display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--wob);
  box-shadow: 0 4px 0 var(--ink), var(--cel); cursor: pointer; text-align: left; color: var(--ink); transition: scale .1s, rotate .1s; font: inherit; }
.ld-ven.on { background: var(--yellow); rotate: -1deg; scale: 1.02; }
.ld-ven.poor .tk { background: var(--red) !important; color: #fff; text-shadow: 0 1px 0 var(--ink); }
.ld-ven.soon { background: #e2d6c4; }
.ld-ven.soon.on { background: #efe2ca; }
.ld-ven.soon .ld-th { filter: grayscale(.6) brightness(.7); }
.ld-th { position: relative; height: 96px; border: 2.5px solid var(--ink); border-radius: 11px; background-color: #444; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
.ld-th::before, .ld-th::after { scale: .6; transform-origin: 50% 0; }
.ld-n { position: absolute; left: 4px; top: 4px; z-index: 1; padding: 2px 6px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); font: 900 11px/1 var(--display); }
.ld-vb { min-width: 0; }
.ld-vb > b { display: block; margin: 0 0 5px; font: 900 19px/1.1 var(--display); }
.ld-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.ld-chips > span { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 3px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; font: 900 12px/1 var(--display); }
.ld-chips .ic { width: 16px; height: 16px; }
.ld-chips .str { padding: 2px 4px 2px 3px; }
.ld-gl { display: inline-flex; }
.g1 { position: relative; width: 12px; height: 15px; }
.g1 .ic { position: absolute; left: -1px; top: 0; width: 15px !important; height: 15px !important; filter: grayscale(1); opacity: .22; }
.g1.f .ic { filter: none; opacity: 1; }
.g1.h .ic.top { filter: none; opacity: 1; clip-path: inset(0 50% 0 0); }
.ld-pz { display: flex; gap: 4px; margin-top: 6px; }
.ld-pz span { flex: 1; padding: 3px 2px; border: 2px solid var(--ink); border-radius: 8px; text-align: center; font: 900 12px/1.1 var(--display); }
.ld-pz small { display: block; font: 800 9px/1 var(--font); margin-bottom: 1px; }
.m1 { background: #ffd75e; } .m2 { background: #dfe3ea; } .m3 { background: #f0b27a; }
.ld-fight { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 8px 0 10px; border: 3.5px solid var(--ink); border-radius: var(--wob); background: var(--yellow); box-shadow: 0 6px 0 var(--ink), var(--cel); cursor: pointer;
  font: 900 24px/1 var(--display); color: var(--ink); letter-spacing: 2px; transition: scale .08s; }
.ld-fight:active { scale: 1.05 .9; }
.ld-fight > .ic { width: 32px; height: 32px; animation: jab 1.6s infinite; }
.ld-fight small { font: 800 12px/1.2 var(--font); letter-spacing: 0; display: block; margin-top: 3px; }
.ld-fight.no { background: #c9bfae; color: var(--ink2); cursor: default; }
.ld-fight.no:active { scale: 1; }
.ld-fight.no > .ic { animation: none; filter: grayscale(1); opacity: .5; }

/* the room page: the old home card as it was */
[data-pg=multi] .home-card { align-self: center; margin-top: 8px; }

/* my record */
.ld-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ld-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 13px; box-shadow: 0 3px 0 var(--ink); color: var(--ink); text-align: center; }
.ld-stats > div:nth-child(odd) { rotate: -.8deg; } .ld-stats > div:nth-child(even) { rotate: .8deg; }
.ld-stats .ic { width: 24px; height: 24px; }
.ld-stats b { font: 900 20px/1.1 var(--display); } .ld-stats b.sm { font-size: 14px; line-height: 1.6; }
.ld-stats small { font: 800 10.5px/1.1 var(--font); color: var(--ink2); }
.ld-stats .gold { background: var(--yellow); }
.ld-sub { font: 900 15px/1.2 var(--display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.ld-recent { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; min-height: 0; }
.ld-rr { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 13px; box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.ld-vth { position: relative; flex: none; width: 46px; height: 36px; border: 2px solid var(--ink); border-radius: 8px; background-color: #444; background-size: cover; background-position: center; overflow: hidden; }
.ld-vth::before, .ld-vth::after { scale: .3; transform-origin: 50% 0; }
.ld-vn { flex: 1; min-width: 0; font: 900 14px/1.15 var(--display); }
.ld-vn small { display: block; font: 800 10.5px/1.2 var(--font); color: var(--ink2); }
.ld-place { flex: none; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; font: 900 12px/1 var(--display); }
.ld-place.p1 { background: #ffd75e; } .ld-place.p2 { background: #dfe3ea; } .ld-place.p3 { background: #f0b27a; }
.ld-rr em { min-width: 52px; text-align: right; font: 900 14px/1 var(--display); font-style: normal; color: var(--ink2); }
.ld-rr em.win { color: #1d8a62; }
.ld-empty { margin: 0; padding: 14px; text-align: center; font: 800 13px/1.5 var(--font); color: #fff; text-shadow: 0 1px 0 var(--ink); }

/* how to play */
.ld-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; scrollbar-width: none; }
.ld-scroll::-webkit-scrollbar { display: none; }
.ld-panel { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--wob); box-shadow: 0 4px 0 var(--ink), var(--cel); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.ld-pt { display: flex; align-items: center; gap: 5px; font: 900 15px/1.2 var(--display); }
.ld-pt .ic { width: 22px; height: 22px; }
.ld-panel p, .ld-panel li { margin: 0; font: 800 13px/1.55 var(--font); color: var(--ink2); }
.ld-panel ul { margin: 0; padding-left: 18px; }
.ld-panel li b { color: var(--ink); }
.ld-hands { margin: 0; padding-left: 26px; columns: 2; column-gap: 12px; }
.ld-panel .ld-hands li { font: 900 13px/1.7 var(--display); color: var(--ink); }
.ld-wide { width: 100%; min-height: 46px; font-size: 17px; }

/* the end of a tournament for me: top three, a prize card; otherwise thanks, and home */
.ld-result { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 0 16px; background: rgba(20, 10, 6, .72); animation: ld-fade .2s both; }
@keyframes ld-fade { from { opacity: 0; } }
.ld-rcard { position: relative; width: min(300px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 16px 16px; background: var(--paper); border: 3.5px solid var(--ink); border-radius: var(--wob); box-shadow: 0 6px 0 var(--ink), var(--cel); color: var(--ink); animation: ld-popin .45s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes ld-popin { from { scale: .5; opacity: 0; } }
.ld-rcard .ld-burst { top: -58px; width: 112px; height: 112px; }
.ld-rcard .ld-burst > span { font-size: 24px; }
.ld-rcard h3 { margin: 0; font-size: 40px; }
.ld-vn2 { font: 800 13px/1.2 var(--font); color: var(--ink2); }
.ld-prize { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border: 3px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--yellow); font: 900 30px/1 var(--display); }
.ld-prize .ic { width: 36px; height: 36px; }
.ld-rcard .btn { width: 100%; min-height: 50px; font-size: 20px; }
/* 单人开打 with a game kept (ladder.js ask): resume, or abandon it (the ticket not back) */
.ld-rcard.ask { padding-top: 22px; }
.ld-rcard.ask h3 { font-size: 30px; text-align: center; }
.ld-rcard .ld-abandon { font-size: 17px; }
.ld-rcard.bye { padding-top: 18px; }
.ld-rcard.bye h3 { font-size: 34px; }
.ld-rcard.bye small { font: 800 12px/1.2 var(--font); color: var(--ink2); }

/* drawn stand-ins for the venues that have no 3D room yet */
.a-garage { background: linear-gradient(#2d2a2e, #4a4448 70%, #5a5255); }
.a-garage::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 46px; background: #111; animation: ld-swing 2.4s ease-in-out infinite; transform-origin: 50% 0; }
.a-garage::after { content: ''; position: absolute; left: calc(50% - 11px); top: 42px; width: 24px; height: 24px; border-radius: 50%; background: #ffe68a; box-shadow: 0 0 40px 18px rgba(255, 220, 120, .5); animation: ld-swing 2.4s ease-in-out infinite; transform-origin: 12px -42px; }
@keyframes ld-swing { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
.a-market { background: radial-gradient(circle at 20% 30%, #ff5a3c 0 12px, transparent 13px), radial-gradient(circle at 45% 22%, #ff5a3c 0 12px, transparent 13px), radial-gradient(circle at 72% 32%, #ff5a3c 0 12px, transparent 13px), radial-gradient(circle at 90% 20%, #ff5a3c 0 10px, transparent 11px), linear-gradient(#1d2547, #3a2a4a); }
.a-gym { background: repeating-linear-gradient(180deg, transparent 0 34px, #e8e2d6 34px 38px, transparent 38px 44px), radial-gradient(ellipse at 50% 120%, #c0392b, #5a1a14 70%); }
.a-neon { background: radial-gradient(circle at 25% 40%, rgba(255, 60, 200, .8), transparent 40%), radial-gradient(circle at 75% 35%, rgba(60, 220, 255, .8), transparent 40%), linear-gradient(#150a2a, #2b0f45); }
.a-roof { background: linear-gradient(transparent 55%, #0c1022 55%), repeating-linear-gradient(90deg, #1d2547 0 26px, #2a3360 26px 44px, #151b38 44px 58px), linear-gradient(#0a0f2a, #24305e); }
.a-moon { background: radial-gradient(circle at 78% 30%, #4ea8ff 0 22px, #2a7a3a 23px 26px, transparent 27px), radial-gradient(ellipse at 50% 130%, #b9b5ae 0 55%, transparent 56%), linear-gradient(#05060f, #141833); }
@media (prefers-reduced-motion: reduce) { .ld-pg { transition: none; } .a-garage::before, .a-garage::after, .ld-go .ld-burst, .ld-fight > .ic { animation: none; } }
html.rm .ld-pg { transition: none; }
/* a page in the middle of a wide screen (the Duo opened, a desktop), not stretched across it */
@media (min-width: 640px) { .ld-pg, .ld-fightbar, [data-pg=solo] .ld-hd { padding-left: max(calc(14px + var(--safe-l)), calc(50% - 300px)); padding-right: max(calc(14px + var(--safe-r)), calc(50% - 300px)); } }
/* a table on the device (js/local.js): nobody can join it, so no room code to share */
body.local-room #topbar .chip-btn.code { display: none; }
/* 约人开房 in the app (main.js gcSetup): the nickname and one button; the server's create, join and recent rooms are the web's */
.home-card.gc > [data-a=create], .home-card.gc .practice-row, .home-card.gc .join-row, .home-card.gc #recent { display: none; }
.home-card .gc-go { display: flex; align-items: center; justify-content: center; gap: 10px; padding-block: 8px; }
.home-card .gc-go .ic { width: 30px; height: 30px; flex: none; }
.home-card .gc-go span { display: flex; flex-direction: column; align-items: flex-start; text-align: start; line-height: 1.15; min-width: 0; }
.home-card .gc-go b { font-size: clamp(16px, 4.8vw, 20px); white-space: normal; overflow-wrap: anywhere; }
.home-card .gc-go small { font-size: 12px; font-weight: 800; opacity: .85; }
.home-card .gc-hint { margin: 0; font: 700 13px/1.5 var(--font); color: var(--ink2); }
/* my Game Center table: the top bar's code chip is 邀请 */
body.gc-host #topbar .chip-btn.code { display: inline-flex; }
/* the Duo's outer display in the app (html.duo-outer, js/hold.js): its camera strip is at the top of the
   right edge only, so below the top row the pages keep the same margin on both sides */
html.duo-outer .ld-pg, html.duo-outer .ld-fightbar { padding-right: calc(14px + var(--safe-l)); }
html.duo-outer .ld-top, html.duo-outer .ld-pg:not([data-pg=solo]) > .ld-hd { margin-right: calc(var(--safe-r) - var(--safe-l)); } /* the venue page's bar spans the width, its own padding clears the camera */
/* on the ladder's pages past the home one, the background characters' gag words stay out of the way */
body.ld-paged #comics { visibility: hidden; }
/* the outer display in the app: the coins sit a little further right, still clear of the camera at the
   top of the strip (it starts about 16 points in) */
html.duo-outer [data-pg=solo] .ld-hd { padding-right: max(calc(14px + var(--safe-l)), calc(var(--safe-r) - 8px)); }
html.duo-outer .ld-top { margin-right: max(0px, calc(var(--safe-r) - 22px - var(--safe-l))); }
/* the fight button sits low, half into the home-indicator margin where there is one (the Duo folded
   or opened, other iPhones), not a whole margin up */
.ld-fightbar { padding-bottom: max(10px, calc(4px + var(--safe-b) / 2)); }

/* ------------------------------------------------ the top bar at a ladder table (js/ladder.js ladderBar):
   players left with my place, the blinds with a ring counting hands to the next level */
.ld-bar { display: none; }
body.ld-table #topbar .tb-info, body.ld-table #topbar .chip-btn.code, body.ld-table #topbar .universe-link { display: none; }
body.ld-table .ld-bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ld-chip { display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 9px 0 5px; box-sizing: border-box; border: 2.5px solid var(--ink); border-radius: 13px;
  background: var(--paper); box-shadow: 0 3px 0 var(--ink); color: var(--ink); white-space: nowrap; }
.ld-chip .ic { width: 24px; height: 24px; flex: none; }
.ld-stand { flex: none; font: 900 17px/1 var(--display); }
.ld-stand i { font: 900 12px/1 var(--display); font-style: normal; color: var(--ink2); }
.ld-stand em { padding: 3px 6px; border-radius: 8px; background: var(--ink); color: var(--yellow); font: 900 12px/1 var(--display); font-style: normal; }
.ld-stand.bub { background: var(--red); color: #fff; animation: ld-bub .9s ease-in-out infinite; }
.ld-stand.bub i { color: #ffd7cf; }
.ld-stand.itm { background: var(--yellow); }
@keyframes ld-bub { 50% { scale: 1.06; } }
.ld-blinds { flex: 0 1 240px; min-width: 0; gap: 6px; }
.ld-bl { min-width: 0; }
.ld-bl b { display: block; font: 900 15px/1.05 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-bl small { display: block; font: 800 10px/1.2 var(--font); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-ring { flex: none; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink);
  background: conic-gradient(var(--orange, #f2913d) calc(var(--p, 1) * 360deg), rgba(var(--ink-rgb), .12) 0); }
.ld-ring b { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font: 900 11px/1 var(--display); }
/* the bubble and the money: a ribbon under the bar for a few seconds */
.ld-moment { position: fixed; z-index: 12; left: 50%; top: calc(var(--hud-top, 60px) + 8px); translate: -50% 0; padding: 5px 14px 6px; border: 2.5px solid var(--ink); border-radius: 10px;
  font: 900 13px/1.2 var(--display); white-space: nowrap; box-shadow: 0 3px 0 var(--ink); animation: ld-drop .35s cubic-bezier(.3, 1.6, .5, 1) both; pointer-events: none; }
.ld-moment[hidden] { display: none; }
.ld-moment.bub { background: var(--red); color: #fff; }
.ld-moment.itm { background: var(--yellow); color: var(--ink); }
@keyframes ld-drop { from { translate: -50% -14px; opacity: 0; } }
/* narrow screens: the players chip drops its icon so the blinds keep room */
@media (max-width: 440px) { body.ld-table .ld-bar { gap: 4px; } .ld-stand { padding: 0 7px; gap: 4px; } .ld-stand > .ic { display: none; } }
/* the twinkle a player broke at a ladder table leaves where it flew off to (main.js twinkleAt): an
   inked four-point star that pops, spins and shrinks away */
.ko-twinkle { position: fixed; z-index: 8; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none;
  background: var(--ink); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: ko-tw .9s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.ko-twinkle::after { content: ""; position: absolute; inset: 7px; background: #ffe24a;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes ko-tw { 0% { scale: 0; rotate: 0deg; } 30% { scale: 1.3; } 60% { scale: 1; } 100% { scale: 0; rotate: 200deg; } }
html.rm .ko-twinkle { animation-duration: .45s; }
/* broke at a ladder table, I rocket off (main.js rocketMe): my flame licks up from the bottom of the screen,
   the table's HUD steps out of the way, and the end card comes up over a lighter veil to see the ride */
#meJet { position: fixed; left: 50%; bottom: -60px; z-index: 7; width: 230px; height: 322px; translate: -50% 0; rotate: 180deg; pointer-events: none; display: none; }
body.me-rocket #meJet { display: block; }
/* it shakes with the ride (scene.rocketCam's rumble) */
@media (prefers-reduced-motion: no-preference) { html:not(.rm) body.me-rocket #meJet { animation: me-jet-shake .13s linear infinite; } }
@keyframes me-jet-shake { 25% { translate: calc(-50% + 3px) 2px; } 50% { translate: calc(-50% - 3px) -1px; } 75% { translate: calc(-50% + 1px) 3px; } }
body.me-rocket :is(#dock, #hold, #fxbar, #atk, #banner, #toasts, #overlay, #topbar, .ld-moment) { visibility: hidden; }
body.me-rocket .ld-result { background: rgba(20, 10, 6, .3); }
/* the outer display held sideways (html.duo-side, about 594 × 445, js/hold.js): the home in two columns,
   me across the top, the title on the left, the two big stickers and the round ones on the right */
/* 单人开打 where it was, 约人开房 a little under it, the round ones lower still (the space under them taken up) */
html.duo-side .ld-pg[data-pg=home] { display: grid; grid-template-columns: .9fr 1.35fr; grid-template-rows: auto 1fr auto auto auto .38fr; gap: 10px 16px; }
html.duo-side [data-pg=home] > .ld-top { grid-column: 1 / -1; }
html.duo-side [data-pg=home] > .brand { grid-column: 1; grid-row: 2 / -1; align-self: center; margin: 0; position: relative; left: -26px; }
html.duo-side [data-pg=home] > .brand .logo h1 { font-size: 48px; }
html.duo-side [data-pg=home] > .brand p { font-size: 11px; padding: 5px 18px 7px; }
html.duo-side [data-pg=home] > .ld-grow { display: none; }
html.duo-side [data-pg=home] > .ld-go { grid-column: 2; min-height: 66px; }
html.duo-side [data-pg=home] > .ld-go.solo { grid-row: 3; }
html.duo-side [data-pg=home] > .ld-go.multi { grid-row: 4; margin-top: 12px; }
html.duo-side [data-pg=home] > .ld-row3 { grid-column: 2; grid-row: 5; margin-top: 24px; }
html.duo-side [data-pg=home] .ld-go b { font-size: 21px; }
html.duo-side [data-pg=home] .ld-go .ld-burst { width: 52px; height: 52px; top: -26px; right: -14px; } /* up on its corner, clear of the words */
html.duo-side [data-pg=home] .ld-go .ld-burst > span { font-size: 10px; }
html.duo-side [data-pg=home] .ld-round > span { width: 50px; height: 50px; }