/* Home v3 (prototype): overrides on top of the live /portal-v2/ CSS. Each rule says why. */

/* v3.2 (HUB-15): the v3 tokens are in the live /portal-v2/tokens.css now, and the coin is the design system's .fo-coin. */

/* Play first: a shorter billboard on phones, so the first games show in the first screen (it was 30vh of art plus copy). */
@media (max-width: 767px) {
  /* v3.1.3: the top of Home on a phone, after the research on 13 Oct (NN/g, HIG, Material, App Store, Netflix):
     the header is clear over the page at rest and turns the page's colour with a hairline once content scrolls under it; the featured game is
     an inset 4:3 card (about a third of the screen) with its title and Play inside, so Continue playing shows on
     the first screen; the carousel dots sit under the card */
  body { background: var(--bg); }   /* one flat surface: Safari tints the status bar with the page colour, so a glow there reads as a seam */
  .hv-topbar { background: transparent; box-shadow: none; backdrop-filter: none; transition: background-color .15s, box-shadow .15s; }
  .hv-topbar.solid { background: var(--bg); box-shadow: 0 1px 0 rgb(255 255 255 / .08); }
  .hv-topbar::before { display: none; }
  .hv-rail { margin-top: 22px; }
}

/* The billboard art drifts once and settles: an endless zoom of the largest layer kept the phone compositing every frame. */
.hv-bb-art img { animation-iteration-count: 2; }

/* The 36px LiveOps header icons are replaced by the Today tiles on Home (one look, big targets). */
.fox-hbtns { display: none !important; }

/* The Hub's coin in place of the star: .fo-coin (bundle.css), 14px in the top bar. */
.points-pill { color: var(--gold-text); }

/* All games: category chips and a two-column grid, so every game is in view without side-scrolling. */
.v3-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--hv-gutter) 12px; scrollbar-width: none; }
.v3-chips::-webkit-scrollbar { display: none; }
.v3-chip { flex: none; min-height: 44px;   /* v3.1.1: was 40px */ padding: 0 16px; border-radius: 999px; border: 1px solid var(--control-line, rgb(255 255 255 / .22));
  background: transparent; color: var(--ink); font: 700 .9rem/1 var(--font-sans, system-ui); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.v3-chip:active { transform: scale(.96); }
.v3-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.v3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 0 var(--hv-gutter); }
.v3-grid .hv-card { flex: none; }
.v3-grid .hv-card-copy small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 600px) { .v3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .v3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; } }
@media (min-width: 1200px) { .v3-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* A category switch: the cards rise in, staggered 30ms (transform and opacity only). */
.v3-grid .hv-card.v3-in { animation: v3-in 260ms var(--ease-out) both; animation-delay: calc(var(--j, 0) * 30ms); }
@keyframes v3-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Press: the whole card answers the finger at once, not only the art. */
.hv-card { -webkit-tap-highlight-color: transparent; }
.hv-card:active .hv-card-copy { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .v3-grid .hv-card.v3-in { animation: none; }
  .v3-chip { transition: none; }
}

/* The wheel opens on a backdrop dark enough that the Home behind it can't be read through (its title sat on the billboard title). */
/* 3.4: near-opaque, so the wheel owns the screen; the jackpot's gold flash (.jp) is left to the extras (this rule hid it in 3.3) */
.fox-scrim:not(.jp) { background: radial-gradient(circle at 50% 46%, rgb(44 38 108), rgb(9 11 32) 55%, rgb(5 6 18)) !important; }

.fox-lb-title svg { color: var(--gold-text); }   /* the invite tile's gift is ink on gold (fo-extras.js) */
.hv-rail.v3-still { animation: none; }   /* a refreshed row appears in place, without the entrance rise */

/* Continue playing: recent games as big cards (172px), so a game is known by its art; one tap plays. */
.v3-continue .hv-card { flex-basis: 172px; }
.v3-continue .hv-card-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Today: the Tide Wheel, Top players and the Shop as three picture tiles, one word each. */
.v3-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 var(--hv-gutter); }
.v3-tile { position: relative; min-height: 112px; border: 0; border-radius: 24px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line, #30365e);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink); cursor: pointer;
  font: 800 1rem/1 var(--font-display-v2, system-ui); font-variant-numeric: tabular-nums; transition: transform var(--dur-press) var(--ease-out); }
.v3-tile:active { transform: scale(.96); }
/* v3.1: the painted icons (set B "Ollie") at 64px, in place of the CSS wheel and the flat SVGs. */
.v3-tile .v31-ico { display: block; width: 64px; height: 64px; }
.v3-tile.hot { background: linear-gradient(170deg, #3b2a0a, var(--tile)); box-shadow: inset 0 0 0 2px var(--gold); }
.v3-tile.hot .v31-ico { animation: v3-bob 1.4s ease-in-out 4; }
.v3-tile-dot { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--alert); box-shadow: 0 0 0 3px var(--tile); }
@keyframes v3-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-12deg); } }
@media (min-width: 768px) { .v3-today { max-width: calc(560px + 2 * var(--hv-gutter)); } }   /* the gutter grows past 1024 px; keep the tiles 560 px wide */

/* The billboard's "i" is How to play: a square outline button beside Play now. */
.hv-bb-actions .v3-info { width: 52px; padding: 0; }
.hv-bb-actions .v3-info svg { width: 22px; height: 22px; }

/* How to play: three pictures from the game, 2-3 words each, zig-zagging with gold arrows; a tap closes it.
   On a first play it covers the loading game and turns into Play when the game is ready. */
.v3-howto { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 6px; overflow-y: auto;
  padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); background: rgb(5 7 20 / .93); color: var(--ink); text-align: center;
  animation: v3-fade .3s var(--ease-out) both; }
.v3-howto[hidden] { display: none; }
.v3-howto-kicker { margin: 18px 0 0; font: 850 .73rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.v3-howto h2 { margin: 0; font: 800 clamp(2rem, 9vw, 2.6rem)/1 var(--font-display-v2, system-ui); letter-spacing: -.03em; }
.v3-steps { width: min(340px, 100%); display: grid; gap: 0; margin: 14px 0 10px; flex: 1; align-content: center; }
.v3-step { justify-self: start; width: 150px; display: grid; justify-items: center; gap: 8px; list-style: none;
  font: 800 1.1rem/1.15 var(--font-display-v2, system-ui); animation: v3-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--j, 0) * .55s + .15s); }
.v3-step.right { justify-self: end; }
.v3-step img { width: 128px; height: 128px; border-radius: 26px; object-fit: cover; box-shadow: 0 0 0 3px rgb(255 255 255 / .16), 0 14px 30px rgb(0 0 0 / .45); background: #1d2147; }
.v3-arrow { justify-self: center; width: 72px; height: 50px; margin: -18px 0; fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 120; animation: v3-draw .5s ease-out both; animation-delay: calc(var(--j, 1) * .55s - .2s); }
.v3-howto-foot { width: min(340px, 100%); min-height: 64px; display: grid; place-items: center; }
.v3-howto-play { width: 100%; min-height: 60px; font-size: 1.2rem; animation: v3-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.v3-howto-close { border: 0; background: none; color: var(--muted); font: 800 1.05rem/1 var(--font-display-v2, system-ui); min-height: 44px; padding: 0 16px; cursor: pointer;
  animation: v3-fade .4s ease-out 1.6s both; }
.v3-howto-wait { display: grid; place-items: center; }
.v3-howto-wait[hidden] { display: none; }
.v3-spin { width: 36px; height: 36px; border-radius: 50%; border: 4px solid rgb(255 255 255 / .15); border-top-color: var(--lime); animation: v3-turn .9s linear infinite; }
.player-actions .player-howto svg { width: 20px; height: 20px; }
@keyframes v3-fade { from { opacity: 0; } }
@keyframes v3-pop { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes v3-draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes v3-turn { to { transform: rotate(360deg); } }
@media (max-height: 700px) { .v3-step img { width: 100px; height: 100px; } }
/* Under a first play's How to play the loading card is hidden: the Play button's spinner is the progress. */
body:has(.v3-howto[data-mode="first"]:not([hidden])) .player-state[data-player-state="loading"] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .v3-howto, .v3-step, .v3-arrow, .v3-howto-close, .v3-howto-play, .v3-tile.hot .v31-ico { animation: none; }
}


/* v3.1: the bell: a 44px round button before the coins, with a red count while something is unseen. */
.v31-bell { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(9 11 32 / .5); box-shadow: inset 0 0 0 1px var(--card-hover-line); -webkit-tap-highlight-color: transparent; transition: transform var(--dur-press) var(--ease-out); }
.v31-bell:active { transform: scale(.94); }
.v31-bell img { width: 30px; height: 30px; }
.v31-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--alert); color: #fff;
  font: 800 .72rem/20px var(--font-sans, system-ui); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); }
.v31-badge[hidden] { display: none; }

/* v3.1: Updates, the detail sheet's look (a bottom sheet on a phone, a centred panel from 768px): pinned tiles, then New and Earlier. */
.v31-updates h2 { margin: 0; padding: 22px 64px 12px 20px; font: 800 1.6rem/1 var(--font-display-v2, system-ui); letter-spacing: -.03em; }
.v31-pins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.v31-pins > :only-child { grid-column: 1 / -1; }
.v31-pin { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 132px; padding: 12px 10px 14px; border: 0; border-radius: 20px; cursor: pointer;
  background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-align: center; transition: transform var(--dur-press) var(--ease-out); }
.v31-pin:active { transform: scale(.97); }
.v31-pin.app { background: linear-gradient(160deg, #20306b, var(--tile) 75%); }
.v31-pin.invite { background: linear-gradient(160deg, #3a2a12, var(--tile) 75%); }
.v31-pin img { width: 56px; height: 56px; margin-bottom: 4px; }
.v31-pin b { font: 800 1rem/1.15 var(--font-display-v2, system-ui); }
.v31-pin small { font-size: .78rem; line-height: 1.3; color: var(--muted); }
.v31-pin.invite small { color: var(--gold-text); font-weight: 700; }
.v31-list h3 { margin: 20px 20px 8px; font: 850 .73rem/1.2 var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.v31-list ul { display: grid; gap: 8px; margin: 0; padding: 0 16px; list-style: none; }
.v31-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 8px 8px 8px; border-radius: 18px; background: var(--tile); }
.v31-item img { flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.v31-item span { flex: 1; min-width: 0; font-weight: 700; line-height: 1.25; }
.v31-act { flex: none; min-width: 72px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); cursor: pointer;
  font: 800 .92rem/1 var(--font-display-v2, system-ui); transition: transform var(--dur-press) var(--ease-out); }
.v31-act:active { transform: scale(.96); }

/* v3.1: new-player cards after Today: the app (navy) and invites (gold). Each leaves for good once tapped or closed. */
/* v3.1.4: the app and invite asks as one slim row of two tiles inside All games */
.v31-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v31-card { position: relative; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.v31-card.app { background: linear-gradient(120deg, #20306b, var(--tile) 85%); }
.v31-card.invite { background: linear-gradient(120deg, #3a2a12, var(--tile) 85%); }
.v31-go { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 68px; padding: 10px 26px 10px 8px; border-radius: inherit; }
.v31-go:focus-visible { outline: 2px solid var(--ink, #fff); outline-offset: 2px; }
.v31-go img { flex: none; width: 40px; height: 40px; }
.v31-card-copy { display: grid; gap: 2px; min-width: 0; }
.v31-card-copy b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 800 14px/1.15 var(--font-display-v2, system-ui); letter-spacing: -.01em; color: var(--ink, #f8f8ff); }
.v31-card-copy small { font-size: 12px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v31-card.invite .v31-card-copy small { color: var(--gold-text); font-weight: 700; }
.v31-x { position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); padding: 0; cursor: pointer; }
.v31-x svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .v31-bell, .v31-pin, .v31-act { transition: none; } }

/* v3.1: a phone held sideways (short side up to 500px, a touch screen; tablets and desktops never) gets one
   card over Home and the player: games are portrait and iOS can't be locked upright. A landscape game is exempt. */
.v31-turn { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .v31-turn { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left)); background: var(--bg); color: var(--ink); text-align: center; }
  .v31-turn img { width: 120px; height: 120px; margin-bottom: 8px; animation: v31-turn 2.4s var(--ease-out) infinite; }
  .v31-turn h2 { margin: 0; font: 800 1.6rem/1.1 var(--font-display-v2, system-ui); letter-spacing: -.02em; }
  .v31-turn p { margin: 0; color: var(--muted); }
  .v31-turn-ok .v31-turn { display: none; }
}
@keyframes v31-turn { 0%, 20% { transform: rotate(-90deg); } 55%, 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .v31-turn img { animation: none; } }

/* v3.1.1: grid cards start at the top and keep their art square, so every title sits on one line across a row
   (a card stretched to its row's height grew its rows); no play dot over the art: the whole card plays. */
.v3-grid { align-items: start; }
.v3-grid .hv-card { align-content: start; }

/* v3.1.1: a soft shade behind the floating top bar, so the coins and the bell read on any billboard art. */
.hv-topbar::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(9 11 32 / .72), rgb(9 11 32 / .38) 60%, rgb(9 11 32 / 0)); transition: opacity var(--dur-base, .2s) var(--ease-out, ease-out); }
.hv-topbar.solid::before { opacity: 0; }

/* v3.1.1: 44px tap targets: the footer links and the extras' Install and sheet buttons. */
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.fox-cta, .fox-get, .fox-modal .fox-skip { min-height: 44px; }

/* v3.1.1: the footer waits for the rows, so it doesn't jump down when they arrive (layout shift). */
.v2-home:has([data-rails]:empty) .v2-foot { display: none; }
[data-rails]:empty { min-height: 60vh; }

/* v3.1.1: no pull-to-refresh or bounce under a game; Home's sheets keep their scroll to themselves. */
html.v311-playing, html.v311-playing body { overscroll-behavior-y: none; }
.hv-sheet, .v3-howto, .fox-lb, .fox-sheet { overscroll-behavior: contain; }

/* v3.1.1: How to play pictures crop in on their action (home.js: zoom and focus) and show the gesture. */
.v311-shot { position: relative; display: block; width: 128px; height: 128px; border-radius: 26px; overflow: hidden; background: #1d2147;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .16), 0 14px 30px rgb(0 0 0 / .45); }
.v311-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; border-radius: 0; box-shadow: none; }
.v3-step.only { justify-self: center; }
.v3-step.only .v311-shot { width: 168px; height: 168px; }
@media (max-height: 700px) { .v311-shot { width: 100px; height: 100px; } }
.v311-gesture { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  background: rgb(255 255 255 / .55); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgb(0 0 0 / .45); }
.v311-gesture::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; }
.v311-gesture.tap { animation: v311-tap 1.4s ease-out infinite; }
.v311-gesture.tap::after { animation: v311-ring 1.4s ease-out infinite; }
.v311-gesture.hold::after { opacity: 1; animation: v311-hold 1.6s ease-in-out infinite; }
.v311-gesture.drag { animation: v311-drag-up 1.6s ease-in-out infinite; }
.v311-gesture.drag.down { animation-name: v311-drag-down; }
.v311-gesture.drag.left { animation-name: v311-drag-left; }
.v311-gesture.drag.right { animation-name: v311-drag-right; }
@keyframes v311-tap { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(.78); } }
@keyframes v311-ring { 0%, 15% { opacity: 0; transform: scale(.8); } 25% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes v311-hold { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes v311-drag-up { 0%, 15% { transform: translate(0, 12px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translate(0, -18px); opacity: 1; } 100% { transform: translate(0, -18px); opacity: 0; } }
@keyframes v311-drag-down { 0%, 15% { transform: translate(0, -12px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translate(0, 18px); opacity: 1; } 100% { transform: translate(0, 18px); opacity: 0; } }
@keyframes v311-drag-left { 0%, 15% { transform: translate(12px, 0); opacity: 0; } 25% { opacity: 1; } 80% { transform: translate(-18px, 0); opacity: 1; } 100% { transform: translate(-18px, 0); opacity: 0; } }
@keyframes v311-drag-right { 0%, 15% { transform: translate(-12px, 0); opacity: 0; } 25% { opacity: 1; } 80% { transform: translate(18px, 0); opacity: 1; } 100% { transform: translate(18px, 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .v311-gesture, .v311-gesture::after { animation: none !important; }
  .v311-gesture.hold::after { opacity: 1; }
  .hv-topbar::before { transition: none; }
}

/* v3.1.1: the guest's free spin: the prompt to keep the coins carries Google's own sign-in button. */
.fox-modal .v311-gsi { display: flex; justify-content: center; min-height: 44px; margin: 4px 0 6px; }
.v3-tile-label { text-align: center; line-height: 1.1; padding: 0 6px; }

/* v3.1.5: Get the app and Invite friends: the Updates sheet's family (its title, tiles and close), the body and
   buttons in the system face, the action at the thumb (48px). Steps are small drawings of what to tap. */
.v315-flow { font-family: var(--font-sans, system-ui); }
.v315-flow .hv-sheet-close { z-index: 3; }
.v315-head { display: grid; justify-items: center; gap: 8px; padding: 22px 20px 0; text-align: center; }
.v315-flow .v315-head h2 { padding: 0 36px; text-wrap: balance; }
.v315-head .v31-ico { width: 88px; height: 88px; }
.v315-line { margin: 0; color: var(--muted); line-height: 1.35; text-wrap: balance; }
.v315-note { margin: 12px 20px 0; color: var(--muted); line-height: 1.4; text-align: center; }
.v315-actions { display: grid; gap: 10px; padding: 18px 16px 0; }
.v315-actions .hv-play, .v315-actions .hv-info { width: 100%; min-height: 48px; font-family: inherit; text-decoration: none; }
.v315-actions svg { width: 20px; height: 20px; }
.v315-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.v315-actions .hv-info.done { color: var(--lime); border-color: var(--lime); }
.v315-wa { background: #25d366; color: #04210f; box-shadow: 0 12px 30px rgb(37 211 102 / .22); }
.v315-wait { display: grid; place-items: center; min-height: 112px; }

/* the steps: three numbered tiles, each a drawing and two to four words */
.v315-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0 16px; list-style: none; }
.v315-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 12px 6px; border-radius: 18px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.v315-steps li b { line-height: 1.2; text-wrap: balance; }
.v315-n { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font-weight: 850; line-height: 1; }
.v315-mock { display: grid; place-items: center; width: 100%; height: 58px; }
.v315-bar { display: flex; align-items: center; gap: 4px; width: 88%; height: 30px; padding: 0 4px; border-radius: 999px; background: #e9ebf3; color: #1c2033; box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
.v315-bar.tool { justify-content: space-between; border-radius: 10px; padding: 0 8px; }
.v315-bar i { width: 8px; height: 8px; border-radius: 2px; background: #b4b9cc; }
.v315-url { flex: 1; height: 8px; border-radius: 4px; background: #c4c8d8; }
.v315-key { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.v315-key svg { width: 16px; height: 16px; }
.v315-menu { display: grid; gap: 5px; width: 80%; padding: 7px; border-radius: 10px; background: #e9ebf3; color: #1c2033; box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
.v315-menu > i, .v315-row i { display: block; height: 6px; border-radius: 3px; background: #c4c8d8; }
.v315-row { display: flex; align-items: center; gap: 5px; height: 18px; padding: 0 4px; border-radius: 6px; }
.v315-row i { flex: 1; }
.v315-row svg { flex: none; width: 13px; height: 13px; }
.v315-row.top { justify-content: space-between; padding: 0; }
.v315-row.top i { flex: 0 0 40%; }
.v315-add { color: #0a7cff; font-weight: 800; padding: 0 4px; border-radius: 6px; }
.v315-flow .hot { position: relative; background: #fff4c2; box-shadow: 0 0 0 2px var(--gold); }
.v315-flow .hot::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--gold); animation: v315-ring 1.6s ease-out infinite; }
@keyframes v315-ring { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(var(--ring, 1.6)); } }
.v315-row.hot, .v315-key.both { --ring: 1.15; }
/* the pointer: Safari's bar is under the sheet (iOS 26: its ••• at the left of the floating bar; older: Share mid-toolbar) */
.v315-point { display: flex; padding: 10px 26px 0; color: var(--gold); }
.v315-point.center { justify-content: center; }
.v315-point svg { width: 34px; height: 34px; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .5)); animation: v315-bob 1s ease-in-out infinite; }
@keyframes v315-bob { 50% { transform: translateY(7px); } }

/* the guest's invite: the reward first, then one Google button (Google's own lies over ours) */
/* the sign-in sheet: Google's own button (its branding untouched), in a same-size placeholder until it is drawn */
.v315-gsi { display: flex; justify-content: center; min-height: 44px; }
.v315-gsi.is-loading { border-radius: 999px; background: linear-gradient(90deg, rgb(255 255 255 / .06), rgb(255 255 255 / .14), rgb(255 255 255 / .06)) 0 0 / 200% 100%; animation: v315-shimmer 1.2s linear infinite; }
@keyframes v315-shimmer { to { background-position: -200% 0; } }
.v315-later { display: block; min-height: 44px; margin: 6px auto 0; padding: 0 20px; border: 0; background: none; color: var(--muted); font-family: inherit; font-weight: 700; cursor: pointer; }
/* the header's Sign in is our button now (it opens the sheet) */
.auth .gfake { font-family: inherit; cursor: pointer; }
/* arrived with a friend's link: one slim row on Home */
.v315-ref { display: flex; align-items: center; gap: 12px; margin: 0 var(--hv-gutter) 18px; padding: 8px 8px 8px 10px; border-radius: 18px;
  background: linear-gradient(120deg, #3a2a12, var(--tile) 85%); box-shadow: inset 0 0 0 1px var(--line); }
.v315-ref .v31-ico { flex: none; width: 40px; height: 40px; }
.v315-ref span { flex: 1; min-width: 0; font-weight: 700; line-height: 1.25; }
@media (prefers-reduced-motion: reduce) { .v315-flow .hot::after, .v315-point svg, .v315-gsi.is-loading { animation: none; } }
.v315-key.both { display: flex; align-items: center; width: auto; gap: 2px; padding: 0 5px; border-radius: 999px; }
.v315-key.both svg { width: 14px; height: 14px; }
.v315-key.both svg + svg { padding-left: 3px; border-left: 1px solid #b4b9cc; }

/* v3.1.5: the phone type scale (design system "Phone scale v3.1", audit of 13 Oct 2026). Seven roles: display 34,
   title 26, section 24, headline 16/700, body 15, caption 13, label 12 (the floor). Bricolage is for headings only;
   tile labels, card titles and panel buttons use the system face. One sans stack for everyone (Inter is never loaded). */
:root { --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: var(--font-sans); }
.hv-rail-head h2 { font-size: 1.5rem; letter-spacing: -.025em; }
.hv-rail-head span { font-size: .8125rem; font-weight: 500; }
@media (max-width: 767px) {
  .hv-bb-title { font-size: clamp(2.125rem, 9vw, 2.75rem); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
  .hv-bb-tagline { font-size: .9375rem; }
}
.v3-tile-label { font: 700 1rem/1.15 var(--font-sans); letter-spacing: -.01em; }
.hv-card-copy strong { font-size: 1rem; line-height: 1.25; letter-spacing: -.01em; }
.hv-card-copy small, .hv-card-copy span { font-size: .8125rem; }
.v31-card-copy b { font: 700 .9375rem/1.2 var(--font-sans); }
.v31-card-copy small { font-size: .8125rem; }
.v31-pin b { font: 700 1rem/1.2 var(--font-sans); }
.v31-act, .v3-howto-close, .fox-buy, .fox-cta, .fox-get, .fox-wa { font-family: var(--font-sans); }
.points-pill { font: 800 1rem/1 var(--font-display-v2, system-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* the bell badge: white on a darker red passes 4.5:1, at the 12px floor */
.v31-badge { background: #c4223a; font-size: .75rem; }
/* no text below 12px: kickers, LiveOps tabs, ranks, shop headings and notes, the wheel's "free!" */
.fox-items h4, .fox-item small, .fox-tabs button, .fox-rank, .v3-howto-kicker, .v31-list h3 { font-size: .75rem; }
.fox-x2 { font-size: .75rem; }
/* the extras inject their styles after this file, so the floor needs a stronger selector there */
html body .fox-lb .fox-rank, html body .fox-lb .fox-tabs button, html body .fox-lb .fox-tabs span, html body .fox-items h4, html body .fox-item small, html body .fox-x2 { font-size: .75rem; }

/* v3.1.6: each sheet says why first. Sign in: three gains; Invite: both sides' coins and how it works; Get the app: three
   perks. 16px gutters, 20px between sections, the actions stuck to the bottom when a sheet scrolls. Type stays the
   3.1.5 phone scale (title, headline 16/700, body 15, caption 13). */
.v315-head { padding: 20px 16px 0; }
.v315-head .v31-ico { width: 64px; height: 64px; }
.v316-gold { color: var(--gold-text); }
.v315-flow .v315-steps { margin-top: 20px; }
.v315-flow .v315-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 20px; padding: 12px 16px 0; background: var(--feature-surface); }
.v315-actions .v315-later { margin-top: 0; }
.v316-caption { margin: 8px 16px 0; color: var(--muted); font-size: .8125rem; line-height: 1.35; text-align: center; text-wrap: balance; }
.v315-actions .v316-caption { margin: 0; }
/* sign in: the gains, a list of tiles */
.v316-gains { display: grid; gap: 12px; margin: 20px 16px 0; padding: 0; list-style: none; }
.v316-gains li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--tile); font-weight: 600; line-height: 1.3; text-align: left; }
.v316-gains .v31-ico { flex: none; width: 40px; height: 40px; }
/* invite: both sides' coins, how it works, the fun of it, how far you've got */
.v316-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v316-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; font: 700 1rem/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.v316-pill.you { color: var(--gold-text); background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.v316-pill.friend { color: var(--lime); background: color-mix(in srgb, var(--lime) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 40%, transparent); }
.v316-how li { padding: 14px 6px 12px; }
.v316-how .v31-ico, .v316-step-ico { width: 40px; height: 40px; }
.v316-step-ico { display: grid; place-items: center; border-radius: 12px; background: rgb(255 255 255 / .08); color: var(--ink); }
.v316-step-ico svg { width: 22px; height: 22px; }
.v316-fun { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 16px 0; color: var(--muted); font-size: .8125rem; }
.v316-fun .v31-ico { flex: none; width: 24px; height: 24px; }
.v316-progress { margin: 20px 16px 0; text-align: center; font-weight: 700; }
.v316-progress b { color: var(--gold-text); }
.v316-wa { color: #25d366; }
/* get the app: three perks as chips, and a guest's coins before the install */
.v316-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 16px 0; padding: 0; list-style: none; }
.v316-perks li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); font-size: .8125rem; font-weight: 700; }
.v316-perks svg { width: 16px; height: 16px; color: var(--lime); }
.v316-coins-first { display: flex; align-items: center; gap: 10px; margin: 20px 16px 0; padding: 8px 8px 8px 12px; border-radius: 14px; font-size: .8125rem; line-height: 1.3;
  background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); }
.v316-coins-first > span:nth-child(2) { flex: 1; min-width: 0; }
.v316-link { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 .8125rem/1 var(--font-sans); cursor: pointer; }
.v316-lead { margin: 0; text-align: center; font-weight: 700; }   /* the line just above a guest's Google button */
/* v3.1.6: the bell's inbox: a row is title, an optional line and when; the whole row is its action. */
.v31-item[data-bell-item] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.v31-item > span > b { display: block; font-weight: 700; }
.v31-item > span > small { display: block; margin-top: 2px; color: var(--muted); font-size: .8125rem; font-weight: 500; line-height: 1.3; }
.v31-item > span > .v316-when { font-size: .75rem; }
.v316-empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 16px 8px; color: var(--muted); }
.v316-empty .v31-ico { width: 28px; height: 28px; opacity: .6; filter: grayscale(.4); }

/* v3.6 (HUB-31): Gully's Fry Run as a panel over Home, on the Lucky Wheel's stage: under the top bar, the wheel's
   rise curve, its painted plaque and X, the game below. Four Today tiles when Fry Run is live. */
.v3-today.v36-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v3-today.v36-four .v3-tile-label { font-size: .9rem; }
@media (max-width: 359px) { .v3-today.v36-four .v31-ico { width: 52px; height: 52px; } }
.v36-mini { position: fixed; left: 0; right: 0; top: var(--mini-top, 64px); bottom: 0; z-index: 50; display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 30%, rgb(52 44 120), rgb(9 11 32) 60%, rgb(5 6 18)); transform: translateY(102%);
  transition: transform .55s cubic-bezier(.2, 1.1, .3, 1.08); will-change: transform; }
.v36-mini.up { transform: none; }
html.v36-mini-on { overflow: hidden; }
html.v36-mini-on .hv-topbar { z-index: 53; }
.v36-mini-head { position: relative; flex: 0 0 auto; display: grid; place-items: center; padding: 6px 56px 4px; }
.v36-mini-plaque { width: min(240px, 100%); aspect-ratio: 640 / 222; display: grid; place-items: center;
  background: url("/portal-v2/wheel/plaque-1.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .45)); }
.v36-mini-plaque b { margin-top: 6%; font: 800 clamp(1.05rem, 5vw, 1.3rem) / 1 var(--font-display-v2, system-ui); color: #fff3b0;
  text-shadow: 0 2px 0 #7a4a00, 0 0 18px rgb(255 201 40 / .35); white-space: nowrap; }
.v36-mini-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgb(255 210 74 / .7); background: rgb(12 14 40 / .85); color: #fff; font: 700 18px/1 system-ui; display: grid; place-items: center; cursor: pointer; }
.v36-mini-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.v36-mini-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.v36-mini-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; transition: opacity .3s; }
/* v3.9.1: Safari paints a loading frame white; the frame stays unseen on the navy panel until the game is ready (or the 8 s slow-load point), then fades in */
.v36-mini:not(.ready):not(.v391-show) .v36-mini-stage iframe { opacity: 0; }
.v36-mini-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; pointer-events: none;
  color: var(--muted, #b4b7d2); font: 700 .95rem/1.2 var(--font-sans, system-ui); transition: opacity .25s; }
.v36-mini-wait img { animation: v36-bob 1.2s ease-in-out infinite; }
.v36-mini.ready .v36-mini-wait { opacity: 0; }
@keyframes v36-bob { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .v36-mini { transition: none; } .v36-mini-wait img { animation: none; } .v36-mini-stage iframe { transition: none; } }
.v3-tile-label small { display: block; margin-top: 2px; font: 700 .78rem/1.1 var(--font-sans); color: var(--gold, #ffc928); }

/* ---------- v3.7 (HUB-35): the luck minis as one daily loop, and wide screens ---------- */
/* H2: two big luck tiles right under the billboard: the picture, the name, what is waiting */
.v37-luck-rail { margin-top: 18px; }
.v3-today.v37-luck-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v3-today.v37-luck-row.v37-one { grid-template-columns: minmax(0, 1fr); }
.v37-luck { min-height: 148px; padding: 12px 10px 14px; gap: 6px; }
.v37-luck .v31-ico { width: 84px; height: 84px; }
.v37-luck .v3-tile-label b { display: block; font: 800 1.08rem/1.1 var(--font-display-v2, system-ui); letter-spacing: -.01em; color: var(--ink); }
.v37-luck .v3-tile-label small { margin-top: 4px; font-size: .86rem; }
.v37-luck .v3-tile-dot { top: 12px; right: 12px; }
@media (min-width: 600px) {
  .v3-today.v37-luck-row { max-width: calc(760px + 2 * var(--hv-gutter)); gap: 14px; }
  .v37-luck { flex-direction: row; justify-content: flex-start; min-height: 128px; padding: 14px 22px; gap: 18px; }
  .v37-luck .v31-ico { width: 96px; height: 96px; flex: 0 0 auto; }
  .v37-luck .v3-tile-label { text-align: left; padding: 0; }
  .v37-luck .v3-tile-label b { font-size: 1.3rem; }
  .v37-luck .v3-tile-label small { font-size: .95rem; }
}
/* the coin pill is a button: Top players and the Shop */
.points-pill[role="button"] { cursor: pointer; }
.points-pill[role="button"]:focus-visible { outline: 3px solid var(--focus, #fff); outline-offset: 2px; }
.v37-coinmenu { position: fixed; z-index: 60; display: grid; gap: 4px; min-width: 210px; padding: 8px; border-radius: 18px; background: var(--panel, #141735);
  box-shadow: inset 0 0 0 1px var(--line, #30365e), 0 16px 40px rgb(0 0 0 / .5); opacity: 0; translate: 0 -6px; transition: opacity .16s ease-out, translate .16s ease-out; }
.v37-coinmenu.on { opacity: 1; translate: 0 0; }
.v37-coinmenu button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 8px; border-radius: 12px; cursor: pointer;
  font: 700 1rem/1 var(--font-sans); color: var(--ink); }
.v37-coinmenu button:hover, .v37-coinmenu button:focus-visible { background: var(--tile, #1d2147); }
.v37-coinmenu button:focus-visible { outline: 2px solid var(--focus, #fff); outline-offset: -2px; }
.v37-coinmenu .v31-ico { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) { .v37-coinmenu { transition: none; } }
/* wide screens: the billboard's next card stops at the 1240px column instead of filling the rest of the window */
@media (min-width: 1300px) {
  .hv-bb-track {
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--hv-gutter) - 40px), #000 calc(var(--hv-gutter) - 4px), #000 calc(100% - var(--hv-gutter) + 4px), transparent calc(100% - var(--hv-gutter) + 40px));
    mask-image: linear-gradient(90deg, transparent calc(var(--hv-gutter) - 40px), #000 calc(var(--hv-gutter) - 4px), #000 calc(100% - var(--hv-gutter) + 4px), transparent calc(100% - var(--hv-gutter) + 40px));
  }
}
/* H1, H5: the Fry Run panel's bottom bar, between rounds: the one next thing, or the guest's sign-in ask */
.v37-mini-bar { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 2; width: min(420px, calc(100% - 32px)); }
.v37-mini-bar.ask { top: 64px; bottom: auto; }   /* below the game's ticket pill, clear of PLAY and Take it! */
.v37-mini-go { all: unset; box-sizing: border-box; width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 18px;
  border-radius: 18px; background: var(--lime, #d9ff57); color: var(--lime-ink, #121500); box-shadow: 0 5px 0 #93b52a, 0 14px 30px rgb(0 0 0 / .45); cursor: pointer;
  font: 800 1.25rem/1 var(--font-display-v2, system-ui); }
.v37-mini-go .v31-ico { width: 40px; height: 40px; }
.v37-mini-go:active { translate: 0 3px; box-shadow: 0 2px 0 #93b52a; }
.v37-mini-go:focus-visible, .v37-mini-later:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.v37-mini-ask { display: grid; justify-items: center; gap: 10px; padding: 16px 16px 12px; border-radius: 20px; background: var(--panel, #141735);
  box-shadow: inset 0 0 0 1px var(--line, #30365e), 0 14px 34px rgb(0 0 0 / .5); text-align: center; }
.v37-mini-ask p { margin: 0; font: 800 1.1rem/1.2 var(--font-display-v2, system-ui); color: var(--ink); }
.v37-mini-ask [data-gsi] { min-height: 44px; display: grid; place-items: center; }
.v37-mini-later { all: unset; cursor: pointer; padding: 6px 10px; font: 600 .9rem/1 var(--font-sans); color: var(--muted, #b4b7d2); }

/* ---------- v3.8: Top players and the Shop in sight, the logo goes Home, a bigger coin pill ---------- */
/* L1: on a phone, a slim row of two under the luck tiles; from 768 px, round icons beside the bell instead */
.v38-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 var(--hv-gutter); margin-top: 10px; }
.v38-slim { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 12px 8px 8px; border: 0; border-radius: 18px; background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--line, #30365e); color: var(--ink); text-align: left; cursor: pointer; transition: transform var(--dur-press) var(--ease-out); }
.v38-slim:active { transform: scale(.96); }
.v38-slim:focus-visible { outline: 3px solid var(--focus, #fff); outline-offset: 3px; }
.v38-slim .v31-ico { flex: none; width: 40px; height: 40px; }
.v38-slim span { min-width: 0; }
.v38-slim b { display: block; font: 700 1rem/1.15 var(--font-sans); letter-spacing: -.01em; }
.v38-slim small { display: block; margin-top: 2px; font: 600 .8rem/1.15 var(--font-sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v38-hbtn { display: none; position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px var(--card-hover-line, #3b4272); transition: transform var(--dur-press) var(--ease-out); }
.v38-hbtn:active { transform: scale(.94); }
.v38-hbtn:focus-visible { outline: 3px solid var(--focus, #fff); outline-offset: 2px; }
.v38-hbtn .v31-ico { width: 30px; height: 30px; }
.v38-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) {
  .v38-more { display: none; }
  .v38-hbtn { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .v38-slim, .v38-hbtn { transition: none; } }
/* F5: the coin pill keeps its look and gets a 44 px tap area */
.points-pill[role="button"] { position: relative; }
.points-pill[role="button"]::after { content: ""; position: absolute; inset: -10px -4px; }
/* F1: the player's Home button: a chevron and the mark */
.player-view .player-back .v38-chev { font-size: 1.5rem; line-height: 1; margin-top: -2px; }

/* ---------- v3.10: Me, the player's card ---------- */
.v310-me-btn, [data-me] { --v310-cream: var(--game-cream, #fff7e9); --v310-ink: var(--game-ink, #24405a); }
[data-me] { position: relative; flex: none; width: 44px; height: 44px; margin-left: 2px; padding: 0; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
[data-me]:active { transform: scale(.94); }
[data-me]:focus-visible { outline: 3px solid var(--focus, #fff); outline-offset: 1px; }
[data-me] .v310-face { width: 36px; height: 36px; border-radius: 50%; background: #142141; overflow: hidden; box-shadow: 0 0 0 2.5px var(--v310-cream), 0 0 0 4px #05071a; display: block; }
[data-me] .v310-face img, [data-me] .v310-face svg { width: 100%; height: 100%; display: block; object-fit: cover; }
[data-me] .v310-letter, .v310-frame .v310-letter { width: 100%; height: 100%; display: grid; place-items: center; background: #7fe3ff; color: #090b20; font: 800 1.15em/1 var(--font-display-v2, system-ui); }
[data-me] .v310-lvl { position: absolute; right: -3px; bottom: -3px; min-width: 20px; height: 22px; padding: 0 3px; box-sizing: border-box; display: grid; place-items: center; font: 800 11px/1 var(--font-display-v2, system-ui); color: var(--v310-ink); background: var(--v310-cream);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
[data-me].pop { animation: v310-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes v310-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
/* the signed-in link (avatar and name) gives way to the face: the sheet has the account link */
.auth-user[data-auth-user] { display: none !important; }

.v310-me, .v310-moment { --cream: var(--game-cream, #fff7e9); --ink2: var(--game-ink, #24405a); --edge: #05071a; --well: #0b0e2a; --stage: #142141; }
.v310-me { --cream: var(--game-cream, #fff7e9); --ink2: var(--game-ink, #24405a); --edge: #05071a; --well: #0b0e2a; --stage: #142141; display: grid; gap: 16px; padding: 14px 16px 24px; font-family: var(--font-sans, system-ui); }
.v310-top { display: grid; grid-template-columns: 48px 1fr 48px; align-items: start; padding-top: 4px; }
.v310-who { display: grid; justify-items: center; gap: 30px; padding-top: 8px; }
.v310-rbtn { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 #b9a98c, 0 6px 12px rgb(0 0 0 / .35); }
.v310-rbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b9a98c; }
.v310-rbtn svg { width: 24px; height: 24px; }
.v310-rbtn.pen { position: absolute; right: -12px; top: -8px; width: 40px; height: 40px; }
.v310-rbtn.pen svg { width: 18px; height: 18px; }
.v310-frame { position: relative; flex: none; width: 132px; height: 132px; border-radius: 50%; background: var(--stage); box-shadow: 0 0 0 5px var(--cream), 0 0 0 8px var(--edge), 0 10px 20px rgb(0 0 0 / .5); }
.v310-frame > img, .v310-frame > svg, .v310-frame > .v310-letter { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.v310-frame.sel { box-shadow: 0 0 0 5px var(--lime, #d9ff57), 0 0 0 8px var(--edge), 0 10px 20px rgb(0 0 0 / .5); }
.v310-frame.mini { width: 34px; height: 34px; box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--edge); }
.v310-frame.sm { width: 56px; height: 56px; box-shadow: 0 0 0 4px var(--cream), 0 0 0 6px var(--edge); font-size: 26px; }
.v310-frame.sm.sel { box-shadow: 0 0 0 4px var(--lime, #d9ff57), 0 0 0 6px var(--edge); }
.v310-frame.locked > img { filter: grayscale(1) brightness(.7); }
.v310-frame .lock { position: absolute; inset: 0; border-radius: 50%; background: rgb(5 7 26 / .62); display: grid; place-items: center; }
.v310-frame.mini img { width: 100%; height: 100%; border-radius: 50%; filter: grayscale(1) brightness(.7); }
.v310-lv { flex: none; width: 40px; height: 44px; display: grid; place-items: center; font: 800 19px/1 var(--font-display-v2, system-ui); color: var(--ink2); background: var(--cream);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.v310-lv.badge { position: absolute; left: 50%; bottom: -24px; width: 46px; height: 50px; font-size: 22px; transform: translateX(-50%); }
.v310-lv.dim { width: 34px; height: 38px; font-size: 16px; opacity: .55; }
.v310-lv.sm { width: 26px; height: 28px; font-size: 13px; }
.v310-name { margin: 0; font: 800 1.9rem/1 var(--font-display-v2, system-ui); letter-spacing: -.02em; text-shadow: 0 3px 0 var(--edge); text-align: center; }
.v310-name.left { text-align: left; padding: 6px 56px 0 0; }
.v310-xp { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.v310-xp .bar { position: relative; flex: 1; height: 22px; border-radius: 99px; background: var(--well); box-shadow: inset 0 3px 0 rgb(0 0 0 / .45), 0 0 0 2px var(--feature-line, #3b4272); overflow: hidden; }
.v310-xp .bar i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 22px; border-radius: 99px; background: linear-gradient(#fff, #c9cdea); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .15); }
.v310-xp .bar i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .8); }
.v310-xpn { display: flex; justify-content: space-between; align-items: center; margin-top: -6px; padding: 0 6px; font: 800 .8rem/1 var(--font-display-v2, system-ui); color: var(--muted, #b4b7d2); font-variant-numeric: tabular-nums; }
.v310-xpn .nx { display: flex; align-items: center; gap: 8px; }
.v310-ctr-wrap { display: flex; justify-content: center; }
.v310-ctr { display: inline-flex; align-items: center; height: 48px; padding: 0 6px 0 0; border-radius: 99px; background: var(--well); box-shadow: inset 0 3px 0 rgb(0 0 0 / .45), 0 0 0 2px var(--feature-line, #3b4272); }
.v310-ctr .fo-coin { width: 46px; height: 46px; margin: 0 0 0 -6px; background-size: cover; }
.v310-ctr b { padding: 0 12px 0 10px; font: 800 1.6rem/1 var(--font-display-v2, system-ui); color: var(--gold-text, #ffd24a); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--edge); }
.v310-ctr .plus { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--gold, #ffc928); color: #3a2600; font: 800 22px/1 var(--font-display-v2, system-ui); box-shadow: 0 3px 0 var(--gold-deep, #c98a00); cursor: pointer; display: grid; place-items: center; }
.v310-panel { display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: var(--panel, #141735); box-shadow: inset 0 2px 0 rgb(255 255 255 / .07), 0 0 0 2px var(--feature-line, #3b4272), 0 5px 0 var(--edge); }
.v310-panel.gold { box-shadow: inset 0 2px 0 rgb(255 255 255 / .07), 0 0 0 2px var(--gold, #ffc928), 0 5px 0 var(--edge); }
.v310-panel h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 800 1.1rem/1.1 var(--font-display-v2, system-ui); }
.v310-panel.gold h3 { justify-content: center; font-size: 1.6rem; text-align: center; text-shadow: 0 3px 0 var(--edge); }
.v310-panel .v316-gains { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.v310-panel .v315-gsi { min-height: 50px; }
.v310-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v310-slots .slot { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 18px; background: var(--well); box-shadow: inset 0 3px 0 rgb(0 0 0 / .45), 0 0 0 2px var(--feature-line, #3b4272); display: grid; place-items: center; color: var(--feature-line, #3b4272); }
.v310-slots .slot.dim { opacity: .5; }
.v310-slots .slot.empty { background: none; box-shadow: inset 0 0 0 2px var(--feature-line, #3b4272); opacity: .6; cursor: pointer; }
.v310-slots .slot .cnt { position: absolute; right: 6px; bottom: 2px; font: 800 1.5rem/1 var(--font-display-v2, system-ui); color: #fff; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; }
.v310-slots .slab { margin-top: 6px; text-align: center; font-weight: 700; font-size: .8rem; color: var(--muted, #b4b7d2); }
.v310-play { width: 100%; min-height: 48px; margin-top: 4px; font-family: inherit; }
.v310-well { margin: 0; padding: 2px 12px; list-style: none; border-radius: 16px; background: var(--well); box-shadow: inset 0 3px 0 rgb(0 0 0 / .4); }
.v310-row { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid #1c2149; font-size: .95rem; font-weight: 700; }
.v310-row:first-child { border-top: 0; }
.v310-pic { flex: none; width: 34px; height: 34px; border-radius: 10px; object-fit: cover; background: linear-gradient(145deg, #2f86e9, #11182c); box-shadow: 0 2px 0 var(--edge); }
.v310-row .w { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v310-row .w small { display: block; color: var(--muted, #b4b7d2); font-size: .8rem; font-weight: 600; }
.v310-amt { display: inline-flex; align-items: center; gap: 5px; font: 800 1rem/1 var(--font-display-v2, system-ui); font-variant-numeric: tabular-nums; color: var(--gold-text, #ffd24a); }
.v310-amt.out { color: var(--muted, #b4b7d2); }
.v310-none { margin: 0; padding: 12px 4px; color: var(--muted, #b4b7d2); font-size: .9rem; }
.v310-foot { display: flex; align-items: center; gap: 10px; padding: 0 4px; font-weight: 700; font-size: .9rem; color: var(--muted, #b4b7d2); flex-wrap: wrap; }
.v310-foot > span { flex: 1; min-width: 100px; }
.v310-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--control-line, #6972ad); border-radius: 99px; background: none; color: var(--ink, #f8f8ff); font: 700 .88rem var(--font-sans, system-ui); text-decoration: none; cursor: pointer; }
.v310-eyebrow { margin: 6px 0 0; font: 700 .75rem var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #b4b7d2); }
.v310-cast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; justify-items: center; }
.v310-pick { display: grid; justify-items: center; gap: 12px; padding: 8px 0 0; border: 0; background: none; color: var(--ink, #f8f8ff); font: 700 .9rem var(--font-sans, system-ui); cursor: pointer; min-height: 44px; }
.v310-pick:disabled { cursor: default; }
.v310-pick .v310-frame { width: 84px; height: 84px; }
.v310-pick .v310-frame.sm { width: 56px; height: 56px; }
.v310-pick b { font-weight: 700; }
.v310-pick .v310-lv.sm { filter: drop-shadow(0 3px 0 var(--edge)); }
.v310-pieces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; justify-items: center; padding-top: 8px; }
.v310-moment { display: grid; justify-items: center; gap: 22px; padding: 34px 20px 8px; text-align: center; }
.v310-moment h2 { margin: 18px 0 0; font: 800 1.9rem/1.1 var(--font-display-v2, system-ui); text-shadow: 0 3px 0 var(--edge); }
.v310-moment .v315-line { margin: -12px 0 0; }
.v310-moment .v310-frame { width: 104px; height: 104px; animation: v310-pop .7s cubic-bezier(.3, 1.6, .5, 1); }
.v310-moment .v310-lv.badge { width: 40px; height: 44px; font-size: 19px; bottom: -20px; }
.v310-moment .v315-actions { width: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { [data-me].pop, .v310-moment .v310-frame { animation: none; } }
/* the top bar on a phone holds the face too: the wordmark and the Sign in button give a little */
@media (max-width: 420px) {
  /* the mark stays, the wordmark is read aloud and indexed but not drawn (it needs the room); the H1 keeps its text */
  .hv-topbar .fo-brand-h1 .brand span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .auth .gfake { white-space: nowrap; padding-inline: 12px; font-size: .88rem; }
  .hv-topbar { gap: 6px; }
  [data-me] { margin-left: 0; }
}