/* No Rush · #/play: the live status strip (price and the prize a take locks side by side), the trade line, the
   take-the-key ticket (ETH or NORUSH), the receipt with the share cards, the keeper buttons and the rules in five
   lines. Scoped to .page-play (set on #view by pages/play.js). Infinite animations are compositor-only or stepped, and
   pause when the header is off screen. */

.page-play .pl { padding-top: 36px; }

/* ---------------------------------------------------------------- head */
.page-play .pl-head { max-width: 760px; }
.page-play .pl-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 5px 12px 5px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  font: 600 11px/1.2 var(--nr-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: var(--plate);
}
.page-play .pl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: plPulse 2.2s ease-in-out infinite; }
@keyframes plPulse { 50% { opacity: .35; transform: scale(.8); } }
.page-play .pl-kicker.pre .pl-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.page-play .pl-title {
  margin: 18px 0 0; font: 900 clamp(40px, 6vw, 72px)/1.02 var(--font-serif); letter-spacing: .04em;
  background: var(--foil); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 16s steps(64) infinite; filter: drop-shadow(0 0 20px color-mix(in srgb, var(--cyan) 24%, transparent));
}
.page-play .pl-title.en { font-family: var(--nr-display); font-weight: 700; letter-spacing: -.015em; font-size: clamp(36px, 4.4vw, 56px); }
.page-play.head-off .pl-title, .page-play.head-off .pl-dot { animation-play-state: paused; }
.page-play .pl-sub { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; max-width: 62ch; }

/* ---------------------------------------------------------------- status strip */
.page-play .pl-status {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .85fr) minmax(0, .95fr); margin: 28px 0 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  background: linear-gradient(90deg, color-mix(in srgb, var(--plate-2) 100%, transparent), transparent);
}
.page-play .pl-st { min-width: 0; padding: 14px 18px 12px; border-left: 1px solid var(--line); position: relative; }
.page-play .pl-st-price { background: linear-gradient(180deg, color-mix(in srgb, var(--seal) 9%, transparent), transparent 80%); }
.page-play .pl-st-prize { background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 9%, transparent), transparent 80%); }
.page-play .pl-st-price::after {
  /* the trade: what you burn, then the prize you lock */
  content: "\2192"; position: absolute; z-index: 1; right: -12px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%);
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-2); font: 700 13px/1 var(--font-sans);
}
.page-play .pl-approx { font: 600 clamp(16px, 1.6vw, 22px)/1 var(--nr-mono); font-style: normal; color: var(--muted); }
.page-play .pl-approx[hidden] { display: none; }
.page-play .pl-hlink { display: inline-flex; align-items: center; min-height: 32px; }
.page-play .pl-st:first-child { border-left: 0; padding-left: 4px; }
.page-play .pl-st-v { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; min-height: 34px; flex-wrap: wrap; }
.page-play .pl-st-v .flap { font: 600 clamp(19px, 1.9vw, 26px)/1 var(--nr-mono); gap: 2px; }
.page-play .pl-st-v .flap.tba { font: 700 15px/1.3 var(--font-sans); color: var(--muted); }
.page-play .pl-st-v .flap.is-ready { color: var(--ok); font: 800 19px/1.2 var(--font-sans); letter-spacing: .06em; text-shadow: 0 0 18px color-mix(in srgb, var(--ok) 50%, transparent); }
.page-play .pl-st-v em { font: 700 11px/1 var(--nr-mono); font-style: normal; color: var(--muted); letter-spacing: .14em; }
.page-play .pl-st-v a { font-size: 15px; }
.page-play .pl-st-v .tba { font: 700 15px/1.3 var(--font-sans); color: var(--muted); }
.page-play .pl-st small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; min-height: 1.35em; color: var(--muted); font: 500 12px/1.35 var(--nr-mono); }
.page-play #pRound { display: block; }
.page-play #pRound span { display: block; overflow-wrap: anywhere; }
.page-play .pl-you { color: var(--green); font-weight: 800; text-shadow: 0 0 12px color-mix(in srgb, var(--green) 50%, transparent); }
.page-play .pl-st .fc {
  min-width: .64em; padding: .07em .06em .05em; border-radius: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 86%, var(--cyan) 7%) 0 49.4%, color-mix(in srgb, var(--bg-2) 92%, #000) 50.6% 100%);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 12px -8px rgba(0, 0, 0, .8);
}
.page-play .pl-st .fc-sep { background: none; box-shadow: none; min-width: .3em; color: var(--muted); }
:root[data-theme="day"] .page-play .pl-st .fc { background: linear-gradient(180deg, #fffdf7 0 49.4%, #ece5d3 50.6% 100%); }
:root[data-theme="day"] .page-play .pl-st .fc-sep { background: none; }

.page-play .pl-live { margin: 10px 0 0; padding: 8px 12px; font: 600 13px/1.4 var(--font-sans); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: var(--r); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.page-play .pl-live[hidden] { display: none; }
.page-play .pl-trade { margin: 0 0 22px; }
.page-play .pl-vs, .page-play .pl-ph { margin: 0; padding: 10px 4px 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.page-play .pl-ratio { color: var(--ink); font-weight: 700; }
.page-play .pl-ph { padding-top: 4px; color: var(--muted); font-size: 13px; }
.page-play .pl-notes:empty { display: none; }
.page-play .pl-notes { margin: 0 0 18px; }
.page-play .pl-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--line-2); border-left: 3px solid var(--amber); border-radius: var(--r); background: color-mix(in srgb, var(--amber) 7%, transparent); }
.page-play .pl-notice p { margin: 0; font-size: 14px; line-height: 1.5; }
.page-play .pl-notice .btn { min-height: 44px; }

/* ---------------------------------------------------------------- posted shutdown (the .closing notice is in app.css) */
.page-play .pl-closing:empty { display: none; }
.page-play .pl-closing { margin: -4px 0 18px; }
.page-play .pl-st-v .flap.is-closing { color: var(--amber); font: 800 19px/1.2 var(--font-sans); letter-spacing: .06em; text-shadow: 0 0 18px color-mix(in srgb, var(--amber) 40%, transparent); }

/* ---------------------------------------------------------------- the ticket and the receipt */
.page-play .pl-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.page-play .pl-ticket { padding: 0; isolation: isolate; border-color: var(--line-2); }
.page-play .pl-ticket::after {
  /* the perforation down the right edge */
  content: ""; position: absolute; z-index: 2; top: 18px; bottom: 18px; right: 0; width: 7px; pointer-events: none;
  background: radial-gradient(circle at 100% 50%, var(--bg) 0 3px, transparent 3.5px) 0 0 / 7px 14px repeat-y;
}
.page-play .pl-paper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .6; }
/* one column that never grows with its content (a long button label used to push the ticket past its card) */
.page-play .pl-in { position: relative; z-index: 1; padding: 22px 26px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.page-play .pl-in > * { min-width: 0; }

.page-play .pl-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.page-play .pl-tabs button {
  display: grid; gap: 3px; padding: 12px 16px; text-align: left; cursor: pointer; background: transparent; border: 0; color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast); position: relative;
}
.page-play .pl-tabs button + button { border-left: 1px solid var(--line-2); }
.page-play .pl-tabs button b { font: 800 15px/1.2 var(--font-sans); letter-spacing: .02em; }
.page-play .pl-tabs button small { font-size: 12px; color: var(--muted); }
.page-play .pl-tabs button:hover { color: var(--ink); background: var(--plate); }
.page-play .pl-tabs button.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.page-play .pl-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); box-shadow: var(--glow); }

.page-play .pl-pane { display: grid; gap: 12px; }
.page-play .pl-pane[hidden] { display: none !important; }
.page-play .pl-row-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.page-play .pl-amount { position: relative; }
.page-play .pl-amount .input { height: 60px; padding: 0 74px 0 16px; font: 600 28px/1 var(--nr-mono); letter-spacing: -.01em; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.page-play .pl-amount span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 700 14px/1 var(--nr-mono); letter-spacing: .14em; color: var(--muted); pointer-events: none; }
.page-play .pl-fill { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.page-play .pl-fill .chip { height: 36px; font-size: 12px; color: var(--accent); }
.page-play .pl-fill .chip:disabled { opacity: .45; cursor: not-allowed; }

.page-play .pl-q, .page-play .pl-r { margin: 0; display: grid; gap: 0; }
.page-play .pl-qr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
.page-play .pl-qr:last-child { border-bottom: 0; }
.page-play .pl-qr dt { color: var(--muted); font-size: 13px; flex: none; }
.page-play .pl-qr dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.page-play .pl-qr dd b { font: 600 16px/1.2 var(--nr-mono); color: var(--ink); }
.page-play .pl-qr dd em { font: 700 10.5px/1 var(--nr-mono); font-style: normal; color: var(--muted); letter-spacing: .12em; }
.page-play .pl-qr dd small { font-size: 12px; }
.page-play .pl-qr-burn dd b { color: var(--seal); text-shadow: 0 0 12px color-mix(in srgb, var(--seal) 40%, transparent); }
.page-play .pl-qr-ok dd b { color: var(--ok); }
.page-play .pl-qr-bad dd { color: var(--err); }
.page-play .pl-qr-warn { display: block; border-bottom: 0; padding: 8px 10px; margin-top: 6px; border-left: 2px solid var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.page-play .pl-qr-warn dd { text-align: left; color: var(--amber); font-size: 12.5px; }
.page-play .pl-fee { margin: 0; }
.page-play .pl-qr-max dd b { color: var(--amber); }
.page-play .pl-opentol {
  margin: 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  border: 1px dashed var(--line-2); border-left: 2px solid var(--amber); border-radius: var(--r); background: color-mix(in srgb, var(--amber) 5%, transparent);
}
.page-play .pl-opentol[hidden] { display: none; }

.page-play .pl-tol { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--bg) 40%, transparent); }
/* the real checkbox covers the whole row, so the tap target is the row */
.page-play .pl-tol input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.page-play .pl-box { width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--line-2); border-radius: 3px; display: grid; place-items: center; transition: border-color var(--t-fast), background var(--t-fast); }
.page-play .pl-tol input:checked + .pl-box { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: var(--glow); }
.page-play .pl-tol input:checked + .pl-box::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-1px) rotate(-45deg); }
.page-play .pl-tol input:focus-visible + .pl-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-play .pl-tol input:disabled + .pl-box { opacity: .4; }
.page-play .pl-tol b { display: block; font-size: 14px; }
.page-play .pl-tol small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.page-play .pl-note { display: grid; gap: 8px; }
.page-play .pl-note .input { font-family: var(--font-sans); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.page-play .input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-play .pl-toltip { margin: 0; padding: 8px 10px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.page-play .pl-toltip[hidden] { display: none; }
.page-play .pl-note .hint { margin: 0; }
.page-play .pl-bytes { font-size: 11.5px; color: var(--muted); }
.page-play .pl-bytes.err { color: var(--err); }

.page-play .pl-warn:empty { display: none; }
.page-play .pl-warn { display: grid; gap: 8px; }
.page-play .pl-w { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.5; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.page-play .pl-w.amber { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); color: var(--amber); }
.page-play .pl-w.err { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err); }

.page-play .pl-go { display: grid; gap: 10px; }
/* why the button is off, in full contrast above it */
.page-play .pl-why { margin: 0; font: 600 14px/1.45 var(--font-sans); color: var(--ink); }
.page-play .pl-why[hidden] { display: none; }
.page-play .pl-go .pl-btn { width: 100%; justify-content: space-between; height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; font-size: 16px; line-height: 1.25; position: relative; overflow: hidden; }
.page-play .pl-go .pl-btn span { min-width: 0; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.page-play .pl-go .pl-btn.is-busy { cursor: progress; }
/* The shared rose action fill keeps white labels readable in the logo palette. */
:root:not([data-theme="day"]) .page-play .pl-btn.btn-seal, :root:not([data-theme="day"]) .page-play .pbar .btn-seal { --b: var(--seal-btn); color: #fff; }
.page-play .pl-go .pl-btn svg { width: 22px; height: 22px; flex: none; transition: transform var(--t-fast) var(--ease); }
.page-play .pl-go .pl-btn:hover:not(:disabled) svg { transform: translateX(4px); }
.page-play .pl-go .pl-btn[data-go="connect"], .page-play .pl-go .pl-btn[data-go="switch"], .page-play .pl-go .pl-btn:disabled { justify-content: center; }
.page-play .pl-go .btn-seal:not(:disabled)::after {
  content: ""; position: absolute; inset: -2px auto -2px -40%; width: 30%; transform: translateX(0) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); animation: plSheen 4.8s var(--ease) infinite;
}
/* compositor-only: the sheen moves by transform, never by left */
@keyframes plSheen { 0%, 62% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(567%) skewX(-20deg); } }
.page-play .pl-msg { margin: -4px 0 0; min-height: 1.2em; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.page-play .pl-msg a { text-decoration: underline; }
.page-play .pl-msg.ok { color: var(--ok); }
.page-play .pl-msg.err { color: var(--err); }

/* receipt */
.page-play .pl-receipt { padding: 24px 24px 22px; border-style: solid; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)); }
.page-play .pl-receipt::after {
  /* torn top edge */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 8px; pointer-events: none;
  background: linear-gradient(135deg, var(--bg) 4px, transparent 0) 0 0 / 10px 8px repeat-x, linear-gradient(225deg, var(--bg) 4px, transparent 0) 0 0 / 10px 8px repeat-x;
}
.page-play .pl-h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.page-play .pl-h2 b { font: 800 19px/1.2 var(--font-serif); letter-spacing: .04em; }
.page-play .pl-h2 i { font: 600 10.5px/1 var(--nr-mono); font-style: normal; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }
.page-play .pl-r .pl-qr dd b { font-size: 15px; }
.page-play .pl-qr-prize dd b { color: var(--ok); }
.page-play .pl-k-creator { margin-top: 12px !important; line-height: 1.6; }
.page-play .pl-get { margin: 14px 0 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: var(--r); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.page-play .pl-risk { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); padding-left: 12px; border-left: 2px solid var(--seal); }
.page-play .pl-share { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.page-play .pl-share h3 { margin: 0 0 10px; }
.page-play .pl-share #pShare { display: grid; gap: 8px; }
.page-play .pl-share .hint { margin: 0; line-height: 1.6; }
.page-play .pl-sharebtn {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; cursor: pointer; text-align: left;
  color: var(--ink); background: linear-gradient(90deg, var(--plate-2), var(--plate)); border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.page-play .pl-sharebtn:hover { border-color: var(--magenta); transform: translateY(-1px); }
.page-play .pl-sharebtn .stamp { font-size: 10px; padding: 3px 7px; }
.page-play .pl-sharebtn b { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-play .pl-sharebtn i { font: 700 11px/1 var(--nr-mono); font-style: normal; color: var(--magenta); letter-spacing: .1em; }

/* ---------------------------------------------------------------- lower row */
.page-play .pl-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; margin-top: 18px; }
.page-play .pl-lower .plate { padding: 22px 24px; }
.page-play .pl-keeper .keeper-list { margin-top: 0; }
.page-play .pl-keeper p { margin: 0; }
.page-play .pl-keeper .tba { font-size: 17px; }
.page-play .pl-keeper .keeper-btn { min-height: 44px; }
.page-play .pl-keeper-pre { margin-top: 10px !important; font-size: 13px; line-height: 1.7; }
.page-play .pl-rl { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.page-play .pl-rl li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.page-play .pl-rn {
  width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid var(--seal); border-radius: 50%;
  color: var(--seal); font-size: 12px; font-weight: 700; transform: rotate(-6deg); text-shadow: 0 0 8px color-mix(in srgb, var(--seal) 50%, transparent);
}

/* ---------------------------------------------------------------- mobile bar */
.page-play .pbar { display: none; }

/* ---------------------------------------------------------------- daylight */
:root[data-theme="day"] .page-play .pl-title { background: none; color: var(--ink); filter: none; animation: none; }
:root[data-theme="day"] .page-play .pl-ticket::after { background: radial-gradient(circle at 100% 50%, var(--bg) 0 3px, transparent 3.5px) 0 0 / 7px 14px repeat-y; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .page-play .pl-status { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-play .pl-st:nth-child(3) { border-left: 0; padding-left: 4px; }
  .page-play .pl-st-price::after { top: 34px; transform: none; }
  .page-play .pl-st:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .page-play .pl-grid, .page-play .pl-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .page-play .pl { padding-top: 22px; padding-bottom: 84px; }
  .page-play .pl-title { font-size: clamp(36px, 11vw, 48px); }
  .page-play .pl-status { margin: 20px 0 16px; }
  .page-play .pl-st { padding: 12px 10px 10px; }
  .page-play .pl-in { padding: 18px 16px 20px; }
  .page-play .pl-receipt, .page-play .pl-lower .plate { padding: 18px 16px; }
  .page-play .pl-tabs button { padding: 10px 12px; min-height: 52px; }
  .page-play .pl-fill .chip, .page-play .pl-more { min-height: 44px; height: auto; }
  .page-play .pl-hlink { min-height: 44px; }
  .page-play #pTicket { scroll-margin-top: 112px; }
  .page-play .pl-amount .input { height: 54px; font-size: 24px; }
  .page-play .pl-qr { flex-wrap: wrap; gap: 4px 12px; }
  .page-play .pl-qr dd { margin-left: auto; }
  body:has(#view[data-page="play"]) .foot { padding-bottom: 104px; }
  .page-play .pbar {
    display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; gap: 12px; align-items: center; justify-content: space-between;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-2); box-shadow: 0 -14px 34px -14px rgba(0, 0, 0, .7);
    transition: transform var(--t-med) var(--ease), opacity var(--t-med);
  }
  .page-play.ticket-in-view .pbar { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .page-play .pbar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--foil); background-size: 300% 100%; animation: foil 9s steps(36) infinite; opacity: .8; }
  .page-play .pbar-info { display: grid; min-width: 0; gap: 1px; }
  .page-play .pbar-info .label { font-size: 11px; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-play .pbar-info b { font: 600 20px/1.1 var(--nr-mono); color: var(--ink); }
  .page-play .pbar-info b.tba { font: 700 14px/1.3 var(--font-sans); color: var(--muted); }
  .page-play .pbar-info b.is-ready { color: var(--ok); font-family: var(--font-sans); font-size: 16px; }
  .page-play .pbar-info small { font: 500 11px/1.3 var(--nr-mono); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .page-play .pbar .btn { flex: none; height: 46px; padding: 0 16px; }
  .page-play .pbar .btn:disabled { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-play .pl-title, .page-play .pl-dot, .page-play .pbar::before, .page-play .pl-go .btn-seal::after { animation: none !important; }
}