/* Shared visual system. Component data, disclosures and payment flows stay intact. */
:root {
  --surface-glass: rgba(5, 9, 16, .64);
  --surface-inset: rgba(5, 9, 16, .25);
  --surface-hover: rgba(234, 230, 219, .07);
  --surface-line: rgba(230, 231, 232, .15);
  --surface-shadow: 0 2px 6px -2px rgba(0, 0, 0, .16), 0 10px 24px -8px rgba(0, 0, 0, .22);
  --text: #f2f1ed;
  --muted: #b8bbc0;
  --gold: #dfcfaa;
  --ui-border: var(--surface-line);
  --line: var(--surface-line);
  /* One corner scale: controls and inner boxes, surfaces and dialogs, large shells, pills. */
  --r-sm: 10px;
  --r-md: 16px;
  --r-pill: 999px;
  /* One gold primary action: the hero CTA, toolbar 'Set my conditions', calculator 'Check my eligibility', reward-card 'Set tier & amount',
     the feedback submit and dialog primaries share height, pill corners, size and weight (premium-visual-live-22). */
  --cta-h: 44px;
  --cta-fs: 12px;
  --cta-fw: 600;
  /* Text fields never compute below this size. 0 on fine pointers; responsive.css raises it to 16px under pointer:coarse so iOS Safari never
     zooms the page on focus. Field owners write font-size:max(var(--field-fs-floor),Npx) (responsive-live-33). */
  --field-fs-floor: 0px;
  /* One dialog frame for login, conditions, artwork, sources and search. */
  --dialog-line: var(--surface-line);
  --dialog-radius: var(--r-md);
  --dialog-pad: 26px;
  --dialog-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
body { font-size:13px; background:#0b0e14; }
body main { max-width:1180px; width:calc(100% - 48px); margin:0 auto; padding:0 0 20px; }
body .shade { background:linear-gradient(90deg,#070b1470,#070b1430),linear-gradient(0deg,#070b14d9,transparent 80%); }
/* Phone: the copy sits over the artwork's brightest band at the top of the viewport, so the scrim is vertical and never lighter than
   the 4.5:1 floor for 11-12px text (the desktop shade left only 19-44% there). */
@media (max-width:800px) { body .shade { background:linear-gradient(180deg,rgba(7,11,20,.18) 0%,rgba(7,11,20,.42) 22%,rgba(7,11,20,.62) 55%,rgba(7,11,20,.82) 100%); } }
/* Korean word breaking has one owner: html[lang="ko"] body in responsive.css. */
/* Balanced headings and no single-word last lines in copy; longhands only, so no element's white-space wrapping mode is touched. */
/* text-wrap-style belongs to the block container and is inherited, so it is set once on body: an inline <small> note in an <article>
   or <details> wraps by its block's value (a :where(p,small,...) list left those blocks on auto and their last word alone). */
body { text-wrap-style:pretty; }
/* A hyphenated word marked in the copy never splits at its hyphen (balance made Chrome render "IN- / GAME"). */
.nobr { white-space:nowrap; }

/* A floating navigation pill, with no full-width header layer. */
body header.site-header {
  position:sticky; top:12px; left:auto; right:auto; z-index:30;
  display:grid; grid-template-columns:170px minmax(0,1fr) 170px;
  width:calc(100% - 48px);
  margin:16px auto 0; padding:0; gap:8px;
  background:none!important; border:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* #app contains the header's top margin (perf-load-43): without a new formatting context it collapsed through #app and <body>,
   so <body> moved down 16px when render() mounted the header during boot and every cold load recorded a layout shift. */
body #app { display:flow-root; }
body .site-header .home-logo {
  display:inline-flex; align-items:center; gap:7px; justify-self:start;
  min-width:0; height:44px; color:var(--text);
  font:500 15px var(--brand-display,Georgia,serif); letter-spacing:-.02em;
  white-space:nowrap;
}
body .site-header .home-logo-mark { color:var(--gold); font:18px Georgia,serif; }
body .site-header .home-logo-short { display:none; }
@media (hover:hover) and (pointer:fine) { body .site-header .home-logo:hover { color:var(--gold); } }
body .site-header .header-navigation {
  justify-self:center;
}
body .site-header nav {
  display:flex; min-width:0; max-width:100%; margin:0; gap:0; padding:0 8px;
  border:1px solid var(--surface-line); border-radius:var(--r-pill);
  background:rgba(8,11,16,.68); backdrop-filter:blur(12px);
  box-shadow:0 4px 16px #0002;
}
body .site-header nav a { display:flex; align-items:center; padding:0 14px; font-size:11px; font-weight:600; color:#b9bab8; }
body .site-header nav a.active{ color:var(--text); }@media (hover:hover){body .site-header nav a:hover{ color:var(--text); }}
body .site-header nav a.active:after { height:1px; left:14px; right:14px; bottom:6px; background:var(--gold); }
body .site-header .header-actions { display:flex; margin:0; padding:0; height:44px; gap:0; border:1px solid var(--surface-line); border-radius:var(--r-pill); background:rgba(8,11,16,.68); backdrop-filter:blur(12px); box-shadow:0 4px 16px #0002; }
body .site-header .header-actions button { display:grid; place-items:center; width:100%; height:100%; padding:0; min-height:0; color:var(--muted); background:none; font-size:10px; }
body .site-header .search-button svg { width:16px; height:16px; }

/* One dark, transparent tint across every major surface. No backdrop blur on any of them (2026-10-16, >=60 fps: a blurred card re-filters the
   artwork behind it on every tilt/scroll frame); --surface-glass is the denser tint that reads like the old 54 % + 10px blur. Only the small header pills blur. */
body .glass, body .games-section.glass, body #intelligence.price-panel.glass, body #deals .deal-grid>.carrier-workspace, body #deals .deal-card, body .quiet-section.glass, body .native-feedback, body .deal-toolbar{
  background:var(--surface-glass)!important;
  border:1px solid var(--surface-line)!important;
  border-radius:var(--r-md);
  box-shadow:var(--surface-shadow)!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body #deals { padding:10px 0 0; margin:0 0 10px; background:none!important; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; }
body .deal-toolbar { border-radius:var(--r-md); padding:6px; }
body .price-panel .price-content,body .membership-decision,
body .verdict-row>div,body .result-card {
  background:var(--surface-inset)!important; border-color:var(--surface-line); box-shadow:none;
}
body .primary,body .profile-trigger,body .membership-primary,body .pc-apply {
  background:var(--gold)!important; color:#17191c!important; border-color:transparent!important; box-shadow:none!important;
}
body .outline { background:var(--surface-inset)!important; border-color:var(--surface-line)!important; box-shadow:none; }
body .primary,body .outline { min-height:var(--cta-h); padding:9px 17px; font-size:var(--cta-fs); gap:12px; border-radius:var(--r-pill); }
body .primary { font-weight:var(--cta-fw); }
body .text-button,body .carrier-text-action,body .promotion-details-link { color:var(--gold); }
body :is(h2,h3,h4) { color:var(--text); }
body :is(input,select,textarea) { background:rgba(4,8,14,.48); border:1px solid var(--surface-line); border-radius:var(--r-sm); color:var(--text); box-shadow:none; }
/* Native controls inside premium surfaces: no browser spinner, no resize grip, and a drawn checkbox in the site palette. */
body input[type=number] { -moz-appearance:textfield; appearance:textfield; }
body input[type=number]::-webkit-inner-spin-button,body input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; appearance:none; margin:0; }
body textarea { resize:none; }
body input[type=checkbox] {
  -webkit-appearance:none; appearance:none; flex:none; display:inline-grid; place-content:center;
  width:16px; height:16px; min-width:16px; min-height:0; margin:0; padding:0;
  border:1px solid rgba(223,207,170,.42); border-radius:calc(var(--r-sm) / 2); background:var(--surface-inset); cursor:pointer;
  transition:background-color 180ms ease,border-color 180ms ease;
}
body input[type=checkbox]::before {
  content:""; width:9px; height:5px; margin-top:-2px; border:solid #17191c; border-width:0 0 2px 2px;
  transform:rotate(-45deg) scale(0); transition:transform 160ms cubic-bezier(.22,1,.36,1);
}
body input[type=checkbox]:checked { background:var(--gold); border-color:var(--gold); }
body input[type=checkbox]:checked::before { transform:rotate(-45deg) scale(1); }
@media (hover:hover){body input[type=checkbox]:hover:not(:disabled){ border-color:var(--gold); }}
body input[type=checkbox]:disabled { opacity:.45; cursor:not-allowed; }
body :is(button,a,input,select,textarea,summary):focus-visible, body :where([tabindex]:not([tabindex="-1"])):focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* Signal card grows with wrapped text and expanded evidence; no internal scroll. */
body .hero { display:grid; align-items:start; min-height:0; column-gap:40px; row-gap:6px; padding:22px 20px 10px; }
body .hero-copy { min-width:0; padding-top:24px; }
body .hero h1 { font-size:58px; line-height:1.02; margin:0 0 18px; }
body .hero h1 span { color:var(--gold); }
html[lang="ko"] body .hero h1 { font-size:50px; line-height:1.15; }
body .hero-copy .intro { font-size:13px; color:#dadbdc; margin:0 0 22px; }
body .hero-actions { gap:10px; }
body .logo-strip { margin:28px 0 0; max-width:390px; gap:20px; }
body .logo-strip button { width:66px; height:34px; }
body #intelligence.price-panel.glass {
  height:auto; min-height:408px; max-height:none;
  margin:0; padding:14px; display:flex; flex-direction:column;
  transform:none!important; rotate:none!important;
  animation:none; transition:none!important; overflow:hidden;
}
body #intelligence.price-panel.glass:after { display:none; }
body #intelligence .panel-heading { flex:none; padding:0 2px 12px; gap:11px; translate:none!important; scale:none!important; }
body .panel-heading img { width:38px; height:38px; border-radius:var(--r-sm); }
body .panel-heading strong { font-size:13px; }
body .panel-heading small { font-size:10px; color:var(--muted); margin-top:3px; }
body #intelligence .price-content {
  flex:1 0 auto; min-height:0; height:auto; padding:10px;
  overflow:visible; overscroll-behavior:auto;
  border:0; border-radius:var(--r-sm);
}
body #game-current-signal { min-height:0; position:relative; }
body .signal-status { margin:0; padding:16px 0; font-size:12px; color:var(--muted); line-height:1.7; }
/* Placeholder bars only while an answer is on its way (IDLE, LOADING, EXPIRED re-check); an error shows the message alone. */
body #game-current-signal:is([data-phase="IDLE"],[data-phase="LOADING"],[data-phase="EXPIRED"]):not([data-retrying]):after {
  content:""; display:block; height:166px; margin-top:16px; border-radius:var(--r-sm); opacity:.65;
  background:linear-gradient(#ffffff09,#ffffff09) 0 0/48% 18px no-repeat,
    linear-gradient(#ffffff07,#ffffff07) 0 38px/100% 1px no-repeat,
    linear-gradient(#ffffff06,#ffffff06) 0 58px/100% 72px no-repeat,
    linear-gradient(#ffffff07,#ffffff07) 0 150px/65% 9px no-repeat;
}
/* Error and its retry in flight (data-retrying) share one centred layout; only the Retry control turns busy, after a short
   delay, so a retry that fails at once changes nothing on screen and a slow one shows a quiet spinner, never the skeleton. */
body #intelligence .price-content:has(#game-current-signal:is([data-phase="ERROR"],[data-retrying])) { display:flex; flex-direction:column; justify-content:center; }
body #game-current-signal .signal-failure {
  display:grid; justify-items:center; gap:12px; max-width:30ch; margin:0 auto; padding:24px 8px; text-align:center; color:var(--muted);
}
body #game-current-signal .signal-failure p { margin:0; font-size:12px; line-height:1.7; color:inherit; }
body #game-current-signal .signal-retry {
  position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:36px; min-width:120px; margin:2px 0 0; padding:0 32px;
  border:1px solid rgba(223,207,170,.32); border-radius:var(--r-pill); background:rgba(223,207,170,.06); color:var(--gold);
  font-family:inherit; font-size:12px; font-weight:500; line-height:1; letter-spacing:.01em; cursor:pointer;
}
/* The spinner lives in the left padding, so the label never moves when it appears. */
body #game-current-signal .signal-retry::before {
  content:""; position:absolute; left:13px; top:50%; width:11px; height:11px; margin-top:-7px; box-sizing:content-box;
  border:1.5px solid rgba(223,207,170,.26); border-top-color:var(--gold); border-radius:var(--r-pill);
  opacity:0; transition:opacity .2s ease; animation:signal-retry-spin .9s linear infinite paused;
}
/* live-ui.js flips aria-busy on the same button (no re-render), so busy fades in after a short delay and fades out on the result. */
body #game-current-signal .signal-retry span { transition:opacity .2s ease; }
body #game-current-signal .signal-retry[aria-busy="true"] { cursor:default; }
body #game-current-signal .signal-retry[aria-busy="true"]::before { opacity:1; transition:opacity .24s ease .22s; animation-play-state:running; }
body #game-current-signal .signal-retry[aria-busy="true"] span { opacity:.62; transition:opacity .24s ease .22s; }
@keyframes signal-retry-spin { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@media (hover:hover) and (pointer:fine) {
  body #game-current-signal .signal-retry:not([aria-busy="true"]):hover { border-color:rgba(223,207,170,.55); background:rgba(223,207,170,.12); }
}
body #game-current-signal .signal-retry:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
@media (max-width:800px) { body #game-current-signal .signal-retry { min-height:44px; } }
body #game-current-signal .signal-failure::before {
  content:""; width:30px; height:30px; border:1px solid rgba(223,207,170,.42); border-radius:var(--r-pill);
  background:linear-gradient(var(--gold),var(--gold)) 50% 8px/2px 9px no-repeat,linear-gradient(var(--gold),var(--gold)) 50% 19px/2px 2px no-repeat;
}
body #intelligence .game-signal { gap:5px; }
body #intelligence .game-signal>* { grid-column:1/-1; }
body #intelligence .game-signal>.signal-kicker { grid-column:1; grid-row:1; align-self:center; }
body #intelligence .game-signal>.signal-value { grid-column:2; grid-row:1; max-width:190px; text-align:right; }
body #intelligence .signal-public-history svg { height:60px!important; }
body .game-signal .signal-value { color:var(--gold); font-size:24px; line-height:1.2; }
body .signal-meta { gap:5px 12px; font-size:10px; }
body .game-signal small,body .signal-chart-foot small { font-size:10px; line-height:1.5; }
body .game-signal details { padding-top:4px; }
/* Disclosure rows: a 40px row with a chevron and a hover tint, not a 14px native marker line. */
body .game-signal summary {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:40px; margin:0 -8px; padding:0 8px; list-style:none; border-radius:var(--r-sm);
  font-size:11px; color:var(--text); cursor:pointer; -webkit-user-select:none; user-select:none;
  transition:background-color 200ms ease,color 200ms ease;
}
body .game-signal summary::-webkit-details-marker { display:none; }
body .game-signal summary::marker { content:""; }
body .game-signal summary::after {
  content:""; flex:none; width:7px; height:7px; margin:0 3px -1px 0; border:solid var(--gold); border-width:0 1.5px 1.5px 0;
  transform:translateY(-2px) rotate(45deg); transition:transform 260ms cubic-bezier(.22,1,.36,1);
}
body .game-signal details[open]>summary::after { transform:translateY(1px) rotate(-135deg); }
@media (hover:hover) and (pointer:fine) { body .game-signal summary:hover { background:var(--surface-hover); color:var(--gold); } }
/* Evidence titles are the standard secondary link: gold text, no underline until hover, a comfortable hit box. */
body .game-signal .signal-events article a {
  display:inline-block; padding:6px 0; color:var(--gold); font-weight:500; text-decoration:none;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
@media (hover:hover){body .game-signal .signal-events article a:hover{ text-decoration:underline; }}
@media (pointer:coarse) {
  body .game-signal summary { min-height:44px; }
  body .game-signal .signal-events article a { padding:10px 0; }
  body .feed-context label { min-height:44px; display:inline-flex; align-items:center; gap:8px; }
}
body .game-signal .text-button { padding:7px 0 0; font-size:11px; }
body .art-credit { position:static; grid-column:1/-1; justify-self:end; margin:0; font-size:9px; }

/* Compact game picker and cards. */
body .games-section { min-height:124px; padding:17px 22px; margin:0 0 8px; gap:20px; }
body .games-section .section-copy h2 { font-size:25px; margin:0 0 9px; line-height:1.2; }
html[lang="ko"] body .games-section .section-copy h2 { font-size:23px; }
body .games-section .section-copy a { font-size:11px; color:var(--gold); }
body .games-section .game-cards { margin:0; gap:6px; }
/* Hover tint and shadow are driven by --depth-power (0..1, written every frame by the pointer-depth engine in smooth.js), so they rise and decay
   continuously with the tilt; with no engine value they read 0. The selected card keeps its own steady tint. */
body .games-section .game-card { min-height:88px; padding:8px 4px; border-radius:var(--r-sm); border:1px solid transparent; background:rgba(237,235,228,calc(.05 * var(--depth-power,0)))!important; box-shadow:0 3px 12px -4px rgba(0,0,0,calc(.2 * var(--depth-power,0)))!important; }
body .games-section .game-card.selected { background:rgba(237,235,228,.09)!important; border-color:rgba(237,235,228,.16); }
@media (hover:hover) { body.motion-off .games-section .game-card:not(.selected):hover { background:rgba(237,235,228,.05)!important; } }
/* The generic button:hover 0.94 dim (interaction.css) snapped back to 1 the instant the pointer left a card: game cards never dim on hover. */
@media (hover:hover){body .games-section .game-card:hover:not(:active){ opacity:1; }}
body .games-section .game-card img { width:48px; height:48px; margin-bottom:7px; border-radius:var(--r-sm); }
body .games-section .game-card strong { font-family:inherit; font-size:11px; font-weight:500; line-height:1.3; }
/* The search dialog's game picker marks the selected game exactly like the games panel: a tinted bordered box, no glow line. */
body #dialog .dialog-games .game-card { border:1px solid transparent; border-radius:var(--r-sm); background:transparent; box-shadow:none; }
body #dialog .dialog-games .game-card.selected { background:rgba(237,235,228,.09); border-color:rgba(237,235,228,.16); }
@media (hover:hover) and (pointer:fine) { body #dialog .dialog-games .game-card:not(.selected):hover { background:rgba(237,235,228,.05); } }
body #deals .section-heading { margin:0 0 10px; gap:10px; }
body .section-heading h2,html[lang="ko"] body .section-heading h2 { font-size:28px; margin:0; }
body .refresh-cluster { flex-direction:row; gap:10px; align-items:center; }
body .profile-trigger { min-height:var(--cta-h); padding:7px 18px; border-radius:var(--r-pill); font-size:var(--cta-fs); font-weight:var(--cta-fw); }
body .refresh-button { padding:8px 11px; font-size:10px; min-height:34px; border-color:var(--surface-line); }
body .freshness { font-size:9px; max-width:140px; }
body .filter-tabs button { padding:9px 13px; min-height:34px; font-size:11px; border-radius:var(--r-sm); color:var(--muted); }
body .filter-tabs button.active,body .filter-tabs button[aria-pressed="true"] { color:var(--gold); background:var(--surface-hover); border-color:var(--surface-line); }
body .platform-select { font-size:10px; }
body .platform-select select { padding:7px 11px; font-size:max(var(--field-fs-floor),11px); }
body .feed-context { font-size:10px; padding:10px 3px; }
body #deals .deal-grid { gap:8px; }
body #deals .deal-grid>.carrier-workspace { padding:16px; }
body #deals .carrier-workspace>.deal-top { min-height:40px; }
body #deals .carrier-workspace .provider-logo-tile { width:40px; height:40px; flex-basis:40px; border-radius:var(--r-sm); box-shadow:none; }
body #deals .carrier-workspace .provider-logo-tile img { width:30px; height:28px; object-fit:contain; }
body #deals .carrier-workspace .provider-logo-tile.provider-google img { width:28px; height:28px; }
body #deals .carrier-workspace .provider-logo-tile.provider-epic { background:#18181c; border-color:#ffffff26; }
body #deals .carrier-workspace .provider-logo-tile.provider-epic img { width:28px; height:28px; }
/* Keep the U+ wordmark centered inside the shared 40px logo tile. */
body #deals .carrier-workspace .provider-logo-tile.provider-lg { font:800 26px/1 Arial,sans-serif; letter-spacing:-1px; text-indent:0; white-space:nowrap; gap:0; }
body #deals .carrier-workspace .provider-logo-tile.provider-lg > span { font-size:18px; line-height:1; margin:0; flex:none; }
body .provider-identity { gap:10px; }
body .provider-identity .deal-merchant { font-size:12px; }
body .deal-top .status-badge { font-size:9px; color:var(--muted); }
body #deals .carrier-workspace>.carrier-main-tabs { margin-top:10px; }
body #deals .carrier-main-tabs button { font-size:11px; padding:8px 3px; color:var(--muted); }
body #deals .carrier-main-tabs button[aria-selected="true"] { color:var(--gold); }
body #deals .carrier-main-tabs:before { background:var(--gold); }
body #deals .carrier-panel { padding-top:12px; }
body #deals .carrier-panels { grid-template-rows:minmax(0,1fr); }
body #deals .carrier-panel { scrollbar-color:#ffffff24 transparent; }
/* Keyboard rings inside the clipping carrier panels (edge-interactions-45): .carrier-panels/.carrier-panel and the Play event-tab strip clip,
   and their controls sat flush with those edges, so the global 3px-offset ring lost its sides. The panels gain a 6px inline gutter (net 0:
   content stays on its column) and every control draws its ring inside itself (most panels have no spare height below their last action).
   The telecom text actions (owner rule below) hug their label and reach into the gutter with 6px padding so the ring clears the text. */
body #deals .carrier-panels { margin-inline:-6px; }
body #deals .carrier-panel { padding-inline:6px; }
body #deals .carrier-panel :is(button,a[href],summary,input,select,[tabindex]:not([tabindex="-1"])):focus-visible { outline-offset:-2px; }
body #deals .carrier-panel h3 { font-size:16px; margin:0 0 12px; }
body .carrier-key-facts { gap:12px; padding-bottom:12px; }
body .carrier-rate strong { font-size:39px; color:var(--gold); }
body .carrier-rate strong span { font-size:22px; }
body .carrier-facts dd { font-size:14px; }
body .carrier-facts dt,body .carrier-rate small { font-size:10px; }
body .carrier-panel-note,body .membership-description { font-size:11px; line-height:1.6; }
body .carrier-panel>.carrier-text-action { font-size:11px; padding-top:14px; }
body #deals .promotion-value { font-size:25px; color:var(--gold); }
body .source-footnote { font-size:10px; margin:4px 0; }

/* The rest of the page uses the same spacing, surfaces and accent. */
body .quiet-section { margin:0 0 8px; padding:0 18px; }
/* The fold's .glass clips its corners (overflow hidden) and cut the 5px-offset ring to a left bar. The summary reaches 12px into the
   section's 18px side padding (text stays put), so its ring can sit inside it with room around the label (edge-interactions-46). */
body .quiet-section>summary { padding:15px 12px; margin:0 -12px; font-size:12px; }
body .quiet-section>summary:focus-visible { outline-offset:-3px; border-radius:var(--r-sm); }
body .quiet-section .savings-lab { padding:4px 0 16px; margin:0; background:none!important; border:0!important; box-shadow:none!important; backdrop-filter:none; }
body .native-feedback { padding:18px 20px; margin-top:8px; }
body .native-feedback-form { gap:14px; }
body .native-feedback-fields { gap:14px; }
body .native-feedback-fields label { font-size:11px; gap:7px; }
body .native-feedback-fields textarea { min-height:82px; }
body .native-feedback-footer { padding-top:0; margin:0; border:0; justify-content:flex-end; }
body .native-feedback-footer .primary { width:auto; }
body .native-feedback h3 { font-size:17px; color:var(--text); }
body .native-feedback textarea { min-height:100px; font-size:max(var(--field-fs-floor),12px); background:var(--surface-inset); }
body .native-feedback select { font-size:max(var(--field-fs-floor),12px); background:var(--surface-inset); }
body .native-feedback .primary { min-height:var(--cta-h); font-size:var(--cta-fs); }
/* One dialog frame: login, conditions, artwork, sources and search share the warm black glass, radius, serif heading and close button. */
body dialog { background:var(--dialog-bg); background-image:none; border:1px solid var(--dialog-line); padding:var(--dialog-pad); border-radius:var(--dialog-radius); box-shadow:var(--dialog-shadow); }
body dialog h2 { font:400 27px/1.25 var(--serif,'Libre Caslon Display',Georgia,serif); letter-spacing:-.01em; }
/* The close button stays reachable while a long dialog scrolls: a sticky float whose margin box has no height, so it sits 14px from the
   top-right corner exactly where the old absolute button sat (margins undo the dialog padding) and never pushes or wraps the content.
   Its fill is opaque so scrolled text never shows through it. Size comes from --close-size (responsive.css: 36px, 44px on touch). */
body #dialog > .close {
  position:sticky; top:calc(14px - clamp(16px,4vw,26px)); right:auto; float:right; z-index:3; display:grid; place-items:center; width:var(--close-size,36px); height:var(--close-size,36px); padding:0;
  margin:calc(14px - clamp(16px,4vw,26px)) calc(14px - clamp(16px,4vw,26px)) calc(-1 * var(--close-size,36px)) 0;
  border:1px solid var(--surface-line); border-radius:var(--r-pill); background:linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)) var(--dialog-bg);
  color:var(--muted); font:300 22px/1 'DM Sans',sans-serif; cursor:pointer;
}
@media (hover:hover){body #dialog > .close:hover{ color:var(--gold); border-color:rgba(223,207,170,.45); background:linear-gradient(rgba(223,207,170,.08),rgba(223,207,170,.08)) var(--dialog-bg); }}
/* The scenario form's error line exists from the start (role=alert, filled by live-ui.js on a bad amount). Empty, it leaves the grid flow, so it
   adds neither its margins nor a second row gap above "Apply scenario" (84 px dead band, fix3); it stays in the tree, never display:none. */
body #dialog [data-signal-error]:empty { position:absolute; margin:0; }
/* The footer motion toggle keeps one label ("Gentle motion") and states on/off with aria-pressed (fix3); off reads as switched off: the moon
   dims and the label is struck through in the muted tone. */
body main>footer button[data-action="motion"] svg { transition:opacity 240ms ease; }
body main>footer button[data-action="motion"][aria-pressed="false"] { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(223,207,170,.55); text-decoration-thickness:1px; }
body main>footer button[data-action="motion"][aria-pressed="false"] svg { opacity:.4; }
body #dialog .carrier-modal .status-badge { justify-self:start; margin:0; max-width:none; padding:4px 10px; border-radius:var(--r-pill); font-size:11px; line-height:1.5; text-align:left; }
/* Official source coverage (2026-10-16): totals first, then one collapsed group per provider. Hierarchy: title 13-14px/600 in the
   text colour, meta 11px muted, notes 12px muted; links are gold text without underline, like the page's secondary links. */
body #dialog .source-summary { display:grid; gap:9px; margin:18px 0 14px; padding:15px 16px; border:1px solid var(--surface-line); border-radius:var(--r-md); background:var(--surface-inset); font-size:12px; line-height:1.5; color:var(--muted); }
body #dialog .source-summary strong { font-size:14px; font-weight:600; color:var(--text); }
body #dialog .source-summary small { font-size:11px; }
body #dialog .source-counts { display:flex; flex-wrap:wrap; gap:6px; }
body #dialog .source-count { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border:1px solid var(--surface-line); border-radius:var(--r-pill); font-size:11px; line-height:1.6; color:var(--muted); white-space:nowrap; }
body #dialog .source-count::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
body #dialog .source-count[data-state="fresh"] { color:var(--gold); }
body #dialog .source-count:is([data-state="aging"],[data-state="stale"],[data-state="blocked"]) { color:#d2a77e; }
body #dialog .source-groups { display:grid; gap:8px; }
body #dialog .source-group { border:1px solid var(--surface-line); border-radius:var(--r-md); background:rgba(255,255,255,.02); transition:border-color 200ms ease,background-color 200ms ease; }
body #dialog .source-group[open] { border-color:rgba(223,207,170,.28); background:rgba(255,255,255,.035); }
body #dialog .source-group>summary { list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px 14px; padding:12px 16px; border-radius:inherit; cursor:pointer; }
body #dialog :is(.source-group,.source-subgroup)>summary::-webkit-details-marker { display:none; }
body #dialog .source-group>summary::after { content:'+'; content:'+' / ''; grid-column:2; grid-row:1; color:var(--gold); font-size:18px; line-height:1; }
body #dialog .source-group[open]>summary::after { content:'−'; content:'−' / ''; }
body #dialog .source-group>summary:focus-visible,body #dialog .source-subgroup>summary:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
body #dialog .source-group-name { font-size:14px; font-weight:600; color:var(--text); }
body #dialog .source-group-detail { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
body #dialog .source-group-meta { font-size:11px; color:var(--muted); }
body #dialog .source-group-body { padding:0 16px 6px; border-top:1px solid var(--surface-line); }
body #dialog .source-group-note { padding:12px 0 2px; }
body #dialog :is(.source-group-note,.source-group .source-status) p { margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
body #dialog .source-group .source-status { gap:4px; margin:0; padding:12px 0; font-size:12px; }
body #dialog .source-group .source-status:first-child { border-top:0; }
body #dialog .source-group .source-status strong { font-size:13px; font-weight:600; line-height:1.4; color:var(--text); overflow-wrap:anywhere; }
body #dialog .source-group .source-status :is(span,small) { font-size:11px; line-height:1.55; color:var(--muted); }
body #dialog .source-status a { justify-self:start; font-size:11px; color:var(--gold); text-decoration:none; }
@media (hover:hover) and (pointer:fine) { body #dialog .source-status a:hover { text-decoration:underline; text-underline-offset:3px; } }
body #dialog .source-subgroup { border-top:1px solid var(--surface-line); }
body #dialog .source-subgroup>summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; cursor:pointer; font-size:12px; color:var(--gold); }
body #dialog .source-subgroup>summary::after { content:'+'; content:'+' / ''; font-size:16px; line-height:1; }
body #dialog .source-subgroup[open]>summary::after { content:'−'; content:'−' / ''; }
body #payment-conditions .pc-header { background:rgba(9,13,20,.94); padding:23px 26px 17px; }
body #payment-conditions .pc-body { background:#090d14; padding:0 26px 20px; }
body #payment-conditions .pc-footer { background:#090d14; border-color:var(--surface-line); }

/* Keep section geometry stable while the original entrance animations run. */
body .hero-copy,body #intelligence { will-change:auto; }
@media(min-width:801px) and (max-width:1050px) {
  body .hero { grid-template-columns:minmax(0,1fr) 360px; gap:24px; padding-inline:8px; }
  body #intelligence.price-panel.glass { width:360px; }
  body .hero h1 { font-size:49px; } html[lang="ko"] body .hero h1 { font-size:43px; }
  body .games-section { display:flex; }
  body .games-section .section-copy { flex-basis:26%; }
  body .games-section .section-copy h2 { font-size:22px; }
}
@media(max-width:800px) {
  body main { width:calc(100% - 28px); }
  body header.site-header { grid-template-columns:44px minmax(0,1fr) 44px; width:calc(100% - 28px); height:40px; margin-top:12px; gap:5px; }
  body .site-header .header-navigation { gap:5px; }
  body .site-header .home-logo { height:40px; gap:2px; font:600 11px 'DM Sans',sans-serif; letter-spacing:-.04em; }
  body .site-header .home-logo-mark { font-size:13px; }
  body .site-header .home-logo-wordmark { display:none; }
  body .site-header .home-logo-short { display:inline; }
  body .site-header nav { overflow-x:auto; height:40px; padding:0 5px; scrollbar-width:none; }
  body .site-header nav a { font-size:10px; padding:0 10px; }
  body .site-header nav a.active:after { left:10px; right:10px; }
  body .site-header .header-actions { width:40px; height:40px; padding:0; gap:0; }
  body .site-header .search-button { display:grid; }
  body .hero { grid-template-columns:1fr; gap:14px; padding:22px 5px 10px; }
  body .hero-copy { padding:0; }
  body .hero h1 { font-size:48px; } html[lang="ko"] body .hero h1 { font-size:42px; }
  body .hero-copy .intro { font-size:12px; margin-bottom:17px; }
  body .logo-strip { display:none; }
  body #intelligence.price-panel.glass { width:100%; max-width:440px; justify-self:center; }
  body .art-credit { margin:0; }
  body .games-section { display:block; min-height:0; padding:17px 13px; }
  body .games-section .section-copy { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  body .games-section .section-copy h2,html[lang="ko"] body .games-section .section-copy h2 { font-size:20px; margin:0; }
  body .games-section .game-cards { gap:3px; }
  body .games-section .game-card { min-height:83px; padding:7px 2px; }
  body .games-section .game-card img { width:clamp(34px,9vw,48px); height:clamp(34px,9vw,48px); }
  body #deals { padding-top:10px; }
  body #deals .section-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  body .section-heading h2,html[lang="ko"] body .section-heading h2 { font-size:25px; }
  body .refresh-cluster { width:100%; justify-content:flex-start; gap:8px; flex-wrap:wrap; }
  body .freshness { margin-left:auto; }
  body .filter-tabs { display:flex; flex-wrap:wrap; gap:2px; }
  body .filter-tabs button { flex:1; padding:8px 5px; font-size:10px; white-space:nowrap; }
  body .platform-select { margin-top:5px; padding-top:6px; }
  body .feed-context { gap:10px; font-size:9px; }
  body #deals .deal-grid { grid-template-columns:1fr; gap:8px; }
  body #deals .deal-grid>.carrier-workspace { min-height:320px!important; padding:17px; }
  body .native-feedback { padding:18px; }
  body .native-feedback-fields { grid-template-columns:1fr 1fr; gap:12px; }
  body .native-feedback-fields label:last-child { grid-column:1/-1; }
}

/* A compact moving highlight frames the icon without a separate underline. */
body .site-header nav { position:relative; }
body .site-header nav a.active:after { display:none; }
body .site-header nav .nav-indicator {
 position:absolute; left:0; top:0; bottom:auto; height:var(--lens-h,36px); width:var(--lens-w,76px);
 border-radius:var(--r-sm); pointer-events:none; transform-origin:0 0;
 z-index:0;
 transition:none; will-change:transform;
}
body .site-header nav a { position:relative; z-index:1; }
/* The dock clips its 44px row (overflow hidden), so an outside ring lost its top and bottom and read as two separator bars: the ring sits
   inside the link and frames the 32px highlight instead (edge-interactions-46). */
body .site-header nav a:focus-visible { outline-offset:-3px; border-radius:12px; }
body .site-header nav .nav-icon { transition:color .25s ease; }
body .site-header nav a.active .nav-icon { color:var(--gold); }

/* Desktop: the brand sits at the left edge of the viewport; main content keeps its 1180px column. */
@media (min-width:1000px) {
  body header.site-header { max-width:none; width:calc(100% - 40px); }
}

/* No band behind the header (owner decision 2026-10-17: the black top band read as a heavy blur). The pills carry their own glass;
   the artwork and content stay visible edge to edge at every scroll position. */
/* Focus and anchor scrolling stop below the header pills plus the 5px focus ring, so a control reached by Shift+Tab or a fragment
   never lands under the pills. Sole owner of html scroll-padding-top. */
html { scroll-padding-top:calc(100px + env(safe-area-inset-top,0px)); }
@media (max-width:800px) {
  html { scroll-padding-top:calc(80px + env(safe-area-inset-top,0px)); }
}
/* Phones: the menu pill fills the row and fits as many items as possible; the rest scrolls inside it. */
@media (max-width:480px) {
  body header.site-header { grid-template-columns:44px minmax(0,1fr); }
  body .site-header .header-navigation { width:100%; }
  body .site-header nav { flex:1 1 auto; min-width:0; padding:0 3px; scroll-snap-type:x proximity; overscroll-behavior-x:contain; }
  body .site-header nav a { flex:0 0 auto; padding:0 7px; font-size:10px; white-space:nowrap; scroll-snap-align:center; }
}
@media (max-width:400px) {
  body .site-header nav a { padding:0 5px; font-size:9.5px; }
}

/* The floating header rests where it sticks: margin-top and sticky top must match, or it jumps on first scroll. */
@media (min-width:801px) {
  body header.site-header { top:16px; }
}

/* Optical alignment: glyph centers sit on the menu pill's center line (header is 44px, centered at 22px). */
body .site-header .home-logo-mark { position:relative; top:-.3px; }
body .site-header .home-logo-wordmark { position:relative; top:.9px; }

/* Language changes fade only content, never a glass backdrop or its ancestor. The fade value itself is written inline (!important) on each
   .language-content block by app.js/smooth.js; a stylesheet opacity here could only ever resolve to the non-inherited initial 1. */
html:is(.language-switching,.scene-entering) .language-content { transition:none!important; animation:none!important; }
/* First entrances belong to the ready event, not DOM creation behind the loader. */
html body:not(.motion-off) :is(.hero h1,.hero-copy>.eyebrow,.hero .intro,.hero-actions,.hero .logo-strip,.hero #intelligence) { animation:none!important; }
body .reveal { opacity:1; transform:none; }
/* Opacity rises with the translate: the keyframe used to move only translate, so .motion-pending (opacity 0) cut to 1 in one frame and then slid.
   No opacity in `to`: it ends on the element's own value (an ended deal card rests at .62). */
@keyframes stable-card-rise { from { translate:0 32px; opacity:0; } to { translate:0 0; } }
html body:not(.motion-off) :is(.motion-enter,.game-card.motion-enter,.deal-card.motion-enter) { animation:stable-card-rise 800ms cubic-bezier(.22,1,.36,1) var(--entrance-delay,0ms) backwards!important; }
html.language-switching body .motion-pending { opacity:1; }
html.language-switching body .motion-enter { animation:none!important; }
/* The switch restores the reader's scroll position itself. Chrome's scroll anchoring then re-anchored on content that quiet-ui.js folds
   into <details> right after the rebuild, and a switch near the bottom of the page jumped ~1000 px up (2281 → 1301 at 1440x900). */
html.language-switching { overflow-anchor:none; }
/* After the switch app.js keeps holding the reader's place while the off-screen blocks are released (pinPlace/keepPlace, fix3); native
   anchoring stays off until then so a height change is never corrected twice. */
html.holding-place { overflow-anchor:none; }
/* Applying new conditions rebuilds the page under the closing dialog; live-ui.js holds the reader's place itself for those frames.
   WebKit's native anchoring re-anchored on the rebuilt hero and scrolled 224 px (iPhone 13, edge-interactions-54 recheck). */
html.conditions-applying { overflow-anchor:none; }
#boot-screen button { margin-top:24px; padding:10px 18px; background:#ffffff0d; border:1px solid #d9cba955; border-radius:20px; color:#d9cba9; }

/* Keep the next feed hidden from its first painted frame, then reveal it. */
body #deal-grid.feed-entering > * > * { opacity:var(--feed-opacity,0)!important; }

/* Artwork transitions are owned by one cancelable animation, not CSS breathing. */
body #artwork-stage .backdrop { transform:none!important; }

/* Keep hover/focus depth soft too: no solid extrusion or dark bottom rim. */
body #deals .deal-grid>.carrier-workspace:focus-within,
body #deals .deal-grid>.carrier-card.carrier-workspace.depth-active,
body #intelligence.price-panel.glass.depth-active {
 box-shadow:var(--surface-shadow)!important;
}
/* Game-card hover tint and shadow follow smooth.js's per-frame --depth-power (base rule above), never the .depth-active class: the class
   used to hold a .05 tint, a 0.92 dim and this shadow for ~450 ms after the pointer left and then drop them in one frame. The transform of
   every depth surface has a single owner in ui-polish.css (same 3D list at rest and in motion), so no :hover rule here flips it. */

/* Shared event actions keep titles and essential qualifiers on distinct lines. */
body .promotion-slide[data-store-event] .carrier-text-action > span:first-child, body .promotion-slide[data-epic-reviewed] .carrier-text-action > span:first-child { display:grid; gap:4px; min-width:0; text-align:left; }
body .promotion-slide[data-store-event] .carrier-text-action strong { font-size:14px; line-height:1.4; }
/* The trailing arrow never shrinks below its glyph; the text column wraps instead (Epic top-ups clipped ↗ at 1024px, 2026-10-14). */
body .carrier-text-action > span[aria-hidden="true"]:last-child { flex:none; }
/* Telecom card actions (SKT, KT, LG U+): one treatment, a gold 12px text link with the trailing arrow right after its label. */
body #deals :is([data-carrier-workspace="skt"],[data-carrier-workspace="kt"],[data-carrier-workspace="lgu-plus"]) .carrier-panel :is(.carrier-text-action,.promotion-details-link) {
  display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; width:auto; max-width:calc(100% + 12px);
  align-self:flex-start; justify-self:start; margin-inline:-6px; border-radius:6px;
  padding:8px 6px 4px; border:0; background:none; color:var(--gold); font-size:12px; font-weight:500; line-height:1.5;
  text-align:left; text-decoration:none; cursor:pointer; transition:color 200ms ease;
}
body #deals :is([data-carrier-workspace="skt"],[data-carrier-workspace="kt"],[data-carrier-workspace="lgu-plus"]) .carrier-panel :is(.carrier-text-action,.promotion-details-link) > span[aria-hidden="true"]:last-child {
  flex:none; font-size:12px; line-height:1; transition:transform 240ms cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine) {
  body #deals :is([data-carrier-workspace="skt"],[data-carrier-workspace="kt"],[data-carrier-workspace="lgu-plus"]) .carrier-panel :is(.carrier-text-action,.promotion-details-link):hover { color:#ecdcb8; }
  body #deals :is([data-carrier-workspace="skt"],[data-carrier-workspace="kt"],[data-carrier-workspace="lgu-plus"]) .carrier-panel :is(.carrier-text-action,.promotion-details-link):hover > span[aria-hidden="true"]:last-child { transform:translate(2px,-2px); }
}
body .promotion-slide[data-store-event] .carrier-text-action small, body .promotion-slide[data-epic-reviewed] .carrier-text-action small { font-size:10px; line-height:1.45; white-space:normal; }
body [data-carrier-workspace="galaxy-store"] .carrier-panel-note { margin:6px 0; }
/* Keep the partial-source notice inside the shared fixed-height event card. */
body [data-carrier-workspace="galaxy-store"] .carrier-panel > .carrier-panel-note { margin:2px 0; font-size:10px; line-height:1.3; }

/* Galaxy events use the same single navigation row and fixed shell as providers. */
body #deals [data-carrier-workspace="galaxy-store"] .provider-galaxy { background:transparent; border:0; box-shadow:none; overflow:hidden; }
body #deals [data-carrier-workspace="galaxy-store"] .provider-galaxy img { width:40px; height:40px; object-fit:contain; }
body #deals [data-carrier-workspace="galaxy-store"] > .carrier-main-tabs { display:none; }
body #deals [data-carrier-workspace="galaxy-store"] .carrier-panel { padding-top:10px; display:flex; flex-direction:column; }
body #deals [data-carrier-workspace="galaxy-store"] [data-promotion-company] { flex:1; min-height:0; display:flex; flex-direction:column; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-event-tabs { position:relative; display:flex; flex:none; gap:0; padding:0; margin:0 0 12px; border-bottom:1px solid #ffffff12; }
/* Galaxy's event row is its top-level tab row (its main tabs are hidden), so it wears the main-tab treatment: 13px labels, 13px padding
   (43px row, 44px on touch), the same muted/selected colours and the same 2px sliding bar (ui-polish.css .carrier-main-tabs). */
body #deals [data-carrier-workspace="galaxy-store"] .promotion-event-tabs button { position:relative; padding:13px 2px; border:0; border-radius:0; background:none; box-shadow:none; color:#9d9b96; font-size:13px; transition:color 240ms ease!important; }
@media (pointer:coarse) { body #deals [data-carrier-workspace="galaxy-store"] .promotion-event-tabs button { min-height:44px; } }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-event-tabs::before { content:""; position:absolute; inset:auto auto -1px 0; width:calc(100% / var(--event-tab-count,2)); height:2px; border:0; border-radius:1px; background:#e5c78f; transform:translateX(calc(var(--event-tab-index,0) * 100%)); transition:transform 420ms cubic-bezier(.25,.8,.25,1)!important; pointer-events:none; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-event-tabs button[aria-selected="true"] { color:#f0d39c; background:none; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-tab-number { display:none; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-pages { display:grid; flex:1; min-height:0; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-slide { grid-area:1 / 1; position:relative; min-width:0; justify-content:flex-start; cursor:pointer; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-slide[hidden] { display:flex!important; pointer-events:none; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-slide .carrier-text-action { margin:-4px -6px; padding:4px 6px; border-radius:8px; align-items:flex-start; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-slide .carrier-text-action > span:first-child { gap:6px; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-slide .carrier-text-action strong { color:var(--text); font-size:16px; line-height:1.5; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-slide .carrier-text-action > span:last-child { color:var(--gold); padding-top:3px; }
body #deals [data-carrier-workspace="galaxy-store"] .promotion-slide .carrier-panel-note { margin:12px 0 0; padding-top:12px; border-top:1px solid #ffffff12; }
/* Epic's reviewed row reads like the Galaxy slide: no 26px band above it, the ↗ on the first text line instead of floating mid-height, and the
   'checked by hand' note pinned to the foot of the panel, so a row of equal-height cards no longer leaves a 58-92px void under it
   (premium-visual-live-29). The note is always the last line (epic-events-ui.mjs). */
body #deals [data-carrier-workspace="epic"] .promotion-slide[data-epic-reviewed] { flex:1 1 auto; }
body #deals [data-carrier-workspace="epic"] .promotion-slide[data-epic-reviewed] .carrier-text-action { flex:1 1 auto; margin:-4px -6px 0; padding:4px 6px; border-radius:8px; align-items:stretch; }
body #deals [data-carrier-workspace="epic"] .promotion-slide[data-epic-reviewed] .carrier-text-action > span:first-child { display:flex; flex-direction:column; gap:4px; }
body #deals [data-carrier-workspace="epic"] .promotion-slide[data-epic-reviewed] .carrier-text-action > span:first-child > small:last-child { margin-top:auto; padding-top:12px; border-top:1px solid #ffffff12; }
body #deals [data-carrier-workspace="epic"] .promotion-slide[data-epic-reviewed] .carrier-text-action > span:last-child { align-self:flex-start; color:var(--gold); padding-top:1px; }
/* Epic official content feed summary (2026-10-18): same face as the hand-checked top-up card. */
body .promotion-slide[data-epic-feed] .carrier-text-action > span:first-child { display:flex; flex-direction:column; gap:4px; min-width:0; text-align:left; }
body .promotion-slide[data-epic-feed] .carrier-text-action strong { font-size:14px; line-height:1.4; }
body .promotion-slide[data-epic-feed] .carrier-text-action small { font-size:10px; line-height:1.45; white-space:normal; }
body #deals [data-carrier-workspace="epic"] .promotion-slide[data-epic-feed] .carrier-text-action { margin:-4px -6px 0; padding:4px 6px; border-radius:8px; align-items:stretch; }
body #deals [data-carrier-workspace="epic"] .promotion-slide[data-epic-feed] .carrier-text-action > span:last-child { align-self:flex-start; color:var(--gold); padding-top:1px; }
body #deals [data-carrier-workspace="galaxy-store"] .carrier-panel > .carrier-panel-note { flex:none; }
body #deals [data-carrier-workspace="galaxy-store"] .carrier-panel > .carrier-panel-note:first-of-type { padding-top:8px; border-top:1px solid #ffffff12; }

/* Google Play card (2026-10-14): Points holds the whole calculator, Tiers a compact table whose notes open in a dialog,
   Events one event at a time behind numbered tabs, all inside the fixed card panel. */
body #deals [data-carrier-workspace="google-play"] [data-carrier-panel="points"] > * { flex:none; }
body #deals [data-carrier-workspace="google-play"] [data-carrier-panel="points"] .provider-points-value { margin:0; min-height:0; }
body #deals [data-carrier-workspace="google-play"] [data-carrier-panel="points"] .provider-points-value p { margin:6px 0 0; }
body #deals [data-carrier-workspace="google-play"] [data-carrier-panel="points"] .points-not-cash { margin:6px 0 10px; }
body #deals [data-carrier-workspace="google-play"] [data-carrier-panel="points"] .provider-input-action { min-height:44px; padding:10px 14px; }
body #deals [data-carrier-workspace="google-play"] [data-carrier-panel="points"] .provider-program-link { margin-top:auto; padding-top:6px; }
body #deals [data-carrier-workspace="google-play"] [data-carrier-panel="points"] .provider-program-link button { min-height:32px; }
/* Play text controls (edge-interactions-45): Play Pass, Point rules and Tier details had no inline padding, so the inset panel ring
   (outline-offset -2px/-3px) cut their first and last glyphs. Like the telecom actions they reach 6px into the panel gutter: the label
   stays on its column, the ring hugs it with rounded corners and clears the text on every side. */
body #deals [data-carrier-workspace="google-play"] .carrier-panel :is(.provider-program-link button,.carrier-panel>.carrier-text-action) {
  margin-inline:-6px; padding-inline:6px; border-radius:6px;
}
/* Tier details is the last line of a full panel (no spare height below it): the 14px top padding becomes 5px above and below the
   label, so the ring is even on both sides; the panel's auto margin takes the freed space above it. */
body #deals [data-carrier-workspace="google-play"] .carrier-panel>.carrier-text-action { align-self:flex-start; width:auto; max-width:calc(100% + 12px); padding-block:5px; }
body #deals [data-carrier-workspace="google-play"] .play-points-caption { margin:0 0 6px; }
body #deals .play-points-table { width:100%; border-collapse:collapse; font-size:12px; line-height:1.35; font-variant-numeric:tabular-nums; }
body #deals .play-points-table th, body #deals .play-points-table td { padding:3px 0; text-align:left; font-weight:400; border-bottom:1px solid #ffffff0d; }
body #deals .play-points-table thead th { padding-top:0; font-size:10px; font-weight:500; color:var(--muted); border-bottom-color:#ffffff1a; }
body #deals .play-points-table tbody th { color:var(--text); }
body #deals .play-points-table td { color:var(--muted); }
body #deals .play-points-table :is(th,td):last-child { text-align:right; }
body #deals .play-points-table tbody td:last-child { color:#ecd09b; }
/* 2026-10-14: the disputed 15,000 boundary is footnoted on the table face; one compact line keeps the fixed card height. */
body #deals [data-carrier-workspace="google-play"] .play-points-boundary { margin:4px 0 0; font-size:10px; line-height:1.3; color:var(--muted); }
body .play-points-detail .membership-scope, body .play-points-detail .membership-limit { margin:0 0 12px; }
body #deals [data-carrier-workspace="google-play"] [data-carrier-panel="events"] { display:flex; flex-direction:column; }
body #deals [data-carrier-workspace="google-play"] [data-promotion-company="google-store"] { flex:1; min-height:0; display:flex; flex-direction:column; }
/* Number tabs wrap; past three rows the strip scrolls on its own, so the selected event below is never pushed out. */
body #deals [data-carrier-workspace="google-play"] .promotion-event-tabs { display:flex; flex:none; flex-wrap:wrap; gap:2px; max-height:102px; padding:0; margin:0 0 10px; border:0; border-bottom:1px solid #ffffff12; border-radius:0; background:none; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
body #deals [data-carrier-workspace="google-play"] .promotion-event-tabs::-webkit-scrollbar { display:none; }
body #deals [data-carrier-workspace="google-play"] .promotion-event-tabs button { flex:0 0 auto; min-width:34px; padding:7px 8px 6px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; box-shadow:none; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; transition:color 240ms ease,border-color 240ms ease!important; }
@media (pointer:coarse) { body #deals [data-carrier-workspace="google-play"] .promotion-event-tabs button { min-width:44px; min-height:44px; } }
body #deals [data-carrier-workspace="google-play"] .promotion-event-tabs button[aria-selected="true"] { color:var(--gold); background:none; border-bottom-color:var(--gold); box-shadow:none; }
body #deals [data-carrier-workspace="google-play"] .promotion-pages { display:grid; flex:1; min-height:0; }
body #deals [data-carrier-workspace="google-play"] .promotion-slide { grid-area:1 / 1; position:relative; min-width:0; justify-content:flex-start; }
body #deals [data-carrier-workspace="google-play"] .promotion-slide[hidden] { display:flex!important; pointer-events:none; }
/* Event-card actions keep their text on the column but reach 4px/6px past it (net margin 0), so the inset keyboard ring clears the text. */
body #deals [data-carrier-workspace="google-play"] .promotion-slide .carrier-text-action { margin:-4px -6px; padding:4px 6px; border-radius:8px; align-items:flex-start; }
body #deals [data-carrier-workspace="google-play"] .carrier-panel > .carrier-panel-note { flex:none; margin:8px 0 0; padding-top:8px; border-top:1px solid #ffffff12; font-size:10px; line-height:1.4; }
/* Card panels never squeeze a heading or label to zero height; a tall panel scrolls instead. */
body #deals .carrier-panel > * { flex-shrink:0; }
/* Telecom calculator: the answer for a typed amount fits the fixed card height. */
body #deals [data-carrier-panel="calculate"] .carrier-field { margin-bottom:10px; gap:6px; }
/* One money-field height on every pointer (fix3): the carrier calculators, the LG card, the platform select and the calculator amount are all
   44 px (they were 38, 42 and 45 at 1440). */
body #deals [data-carrier-panel="calculate"] .carrier-field input { height:44px; padding:0 12px; }
body .calculator-inputs input { height:44px; padding-top:0; padding-bottom:0; }
body #deals [data-carrier-panel="calculate"] .carrier-calculation-output { padding:6px 0; margin-bottom:4px; }
body #deals [data-carrier-panel="calculate"] .carrier-calculation-output strong { font-size:24px; margin:3px 0 4px; font-variant-numeric:tabular-nums; }
body #deals [data-carrier-panel="calculate"] .carrier-calculation-output p { font-size:11px; line-height:1.55; }
/* A plan the provider ended or closed to new members (2026-10-14): a plain status box, not an error. */
body #deals .carrier-closed { border:1px solid #9c9a9540; border-radius:var(--r-sm); padding:10px 12px; margin:2px 0 10px; color:#c6c4bf; line-height:1.55; }
body #deals .carrier-closed strong { display:block; font-size:14px; color:#efede8; }
body #deals .carrier-closed p { font-size:12px; margin:4px 0 0; }
body #deals .carrier-closed-actions { display:flex; flex-wrap:wrap; column-gap:18px; }
body #deals .carrier-closed-actions > .carrier-text-action { width:auto; margin-top:6px; }
/* LG U+ events tab (2026-10-14): an event slide (title, amount, dates, details link) fits the fixed card panel. */
body #deals [data-carrier-workspace="lgu-plus"] .promotion-period { margin:8px 0 0; }
body #deals [data-carrier-workspace="lgu-plus"] .promotion-slide .promotion-details-link { margin-top:10px; }
/* Source titles (copy review 2026-10-17): in English a provider's own Korean title is quoted, muted metadata under an
   English headline, never the headline. The id/attribute selectors only out-rank the older blanket `small` rules
   (#calculation small 10px blue-grey, .carrier-calculation-output small, store-row small 10px). */
body .source-title, body #calculation .source-title, body #deals .carrier-calculation-output .source-title, body #deals .promotion-slide .carrier-text-action .source-title, body .game-signal .source-title { display:block; margin:3px 0 0; font-size:12px; line-height:1.5; font-weight:400; font-style:normal; letter-spacing:0; text-transform:none; color:#a59c8c; quotes:'\201C' '\201D'; overflow-wrap:anywhere; word-break:keep-all; }
body .source-title::before { content:open-quote; }
body .source-title::after { content:close-quote; }
body .carrier-modal h2 + .source-title { margin-top:-12px; font-size:13px; }
body #deals .promotion-slide .carrier-text-action .source-title { order:1; font-size:11px; margin:1px 0 0; }
body #deals .promotion-slide .carrier-text-action .source-title ~ small:not(.store-event-meta) { order:2; }
body .store-event-sep { display:none; }
/* A calculator row names its benefit, then states its answer on its own line (never "title: sentence" or run together). */
body #calculation .calculation-line { display:grid; gap:4px; margin-bottom:16px; }
body #calculation .calculation-source { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#cabb9d; font-weight:600; }
body #calculation .calculation-answer { font-size:12px; line-height:1.65; color:#cccac5; }

/* Registered NOT inherited: the variable is still written on <html> by the fade code, but it no longer invalidates the style of every element below it. */
@property --language-opacity { syntax:'<number>'; inherits:false; initial-value:1; }

/* Forced colours (Windows contrast themes) drop backgrounds and box-shadows, which is how pressed filters, selected tabs and the
   selected game are drawn. Selection and focus use two different channels so they never look alike and a focused selected control
   shows both: selected = the native system fill (Highlight behind HighlightText) on filters and tabs, a 4px Highlight ring inside the
   selected game card (its background and box-shadow are owned by !important motion rules) and a Highlight underline on the logo-only
   buttons; focus = a 3px CanvasText ring outside the control. The :is(html,#a#b) prefix only lifts these rules above the id-scoped focus
   and selected rules ('#deals :is(button,select,input):focus-visible' and the like) in this mode; it matches <html> and adds no other condition. */
@media (forced-colors:active) {
  :is(html,#fc-a#fc-b) body :is([data-filter][aria-pressed="true"],[role="tab"][aria-selected="true"]) { forced-color-adjust:none; background:Highlight; color:HighlightText; border-color:Highlight; }
  :is(html,#fc-a#fc-b) body :is([data-filter][aria-pressed="true"],[role="tab"][aria-selected="true"]) * { color:inherit; }
  :is(html,#fc-a#fc-b) body .game-card.selected { border-color:Highlight; }
  :is(html,#fc-a#fc-b) body .game-card.selected::before { content:""; position:absolute; inset:0; z-index:1; border:3px solid Highlight; border-radius:inherit; pointer-events:none; }
  :is(html,#fc-a#fc-b) body .logo-strip button[aria-pressed="true"] { border-bottom:3px solid Highlight; }
  body .site-header nav .nav-indicator { border:2px solid Highlight; }
  body #deals [data-carrier-workspace] :is(.carrier-main-tabs,.promotion-event-tabs)::before { background:Highlight; forced-color-adjust:none; }
  :is(html,#fc-a#fc-b) body :is(button,a,summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible { outline:3px solid CanvasText; outline-offset:2px; }
  :is(html,#fc-a#fc-b) body #deals .carrier-panel :is(button,a[href],summary,input,select,[tabindex]:not([tabindex="-1"])):focus-visible { outline-offset:-3px; }
  :is(html,#fc-a#fc-b) body :is(.site-header nav a,.quiet-section>summary):focus-visible { outline-offset:-3px; }
}

/* Price trend (owner's minimum features, 2026-10-17): now vs average, green when now beats the average (buy), red when below. */
:root { --trend-up:#7fd6a0; --trend-down:#ff8a7a; --trend-flat:var(--gold); }
body .game-signal>.price-trend { grid-column:1/-1; display:grid; gap:10px; min-width:0; }
body .game-signal>[hidden] { display:none !important; }
.price-trend { --trend:var(--trend-flat); }
.price-trend.trend-up { --trend:var(--trend-up); }
.price-trend.trend-down { --trend:var(--trend-down); }
.price-trend .trend-figures { display:flex; align-items:flex-end; gap:28px; }
.price-trend .trend-figures>div { display:grid; gap:2px; }
.price-trend .trend-figures span { font-size:11px; color:var(--muted); letter-spacing:.04em; }
.price-trend .trend-now { line-height:1.05; color:var(--trend); font-variant-numeric:tabular-nums; }
.price-trend .trend-avg { font-size:clamp(18px,2vw,22px); line-height:1.2; color:var(--text); opacity:.82; font-variant-numeric:tabular-nums; }
.price-trend .trend-verdict { color:var(--trend); font-size:13px; font-weight:600; }
.price-trend .trend-saving { color:var(--text); }
.price-trend .trend-chart { margin:0; display:grid; }
.price-trend .trend-ranges { display:flex; gap:4px; justify-self:start; padding:3px; border-radius:var(--r-pill); background:var(--surface-inset); border:1px solid var(--surface-line); }
.price-trend .trend-ranges button { border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); font:inherit; font-weight:600; cursor:pointer; transition:background-color .2s ease,color .2s ease; }
.price-trend .trend-ranges button[aria-pressed="true"] { background:color-mix(in srgb,var(--trend) 18%,transparent); color:var(--trend); }
@media (hover:hover){.price-trend .trend-ranges button:not([aria-pressed="true"]):hover{ color:var(--text); }}
.price-trend .trend-stage { position:relative; }
.price-trend .trend-plot { width:100%; height:auto; display:block; touch-action:pan-y; color:var(--muted); -webkit-tap-highlight-color:transparent; }
.price-trend .trend-grid { stroke:var(--text); stroke-opacity:.12; stroke-width:1; vector-effect:non-scaling-stroke; }
.price-trend .trend-tick { fill:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }
.price-trend .trend-area { fill:url(#trend-fill); stroke:none; }
.price-trend .trend-line { fill:none; stroke:var(--trend); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.price-trend .trend-average { stroke:var(--text); stroke-opacity:.5; stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.price-trend .trend-average-label { fill:var(--text); fill-opacity:.78; font-size:9px; font-variant-numeric:tabular-nums; paint-order:stroke; stroke:rgba(5,9,16,.85); stroke-width:3px; }
.price-trend .trend-halo { fill:var(--trend); fill-opacity:.2; }
.price-trend .trend-dot { fill:var(--trend); stroke:rgba(5,9,16,.9); stroke-width:1.5; }
.price-trend .trend-cross { stroke:var(--text); stroke-opacity:.55; stroke-width:1; vector-effect:non-scaling-stroke; }
.price-trend .trend-hover-dot { fill:var(--text); stroke:var(--trend); stroke-width:2; vector-effect:non-scaling-stroke; }
.price-trend .trend-hit { cursor:crosshair; }
.price-trend .trend-tip { position:absolute; top:-2px; transform:translate(-50%,-100%); display:grid; gap:1px; padding:7px 10px; border-radius:var(--r-sm); background:var(--dialog-bg); border:1px solid var(--surface-line); box-shadow:var(--surface-shadow); font-size:12px; white-space:nowrap; pointer-events:none; z-index:2; }
.price-trend .trend-tip[hidden] { display:none; }
.price-trend .trend-tip small { color:var(--muted); font-size:10.5px; }
.price-trend .trend-tip b { color:var(--trend); font-size:15px; font-variant-numeric:tabular-nums; }
.price-trend .trend-tip span { color:var(--text); font-size:11px; }
.price-trend .trend-note { color:var(--muted); }

/* Dialogs (owner, 2026-10-17): clearly see-through, one window with no scrollbar. The page shows through the panel and a lighter
   veil; app.js fitDialog() shrinks a tall dialog's content to fit the screen instead of scrolling. */
:root { --dialog-bg: rgba(9, 13, 20, .6); }
html body dialog { max-height:calc(100dvh - 24px); overflow:auto; scrollbar-width:none; -ms-overflow-style:none; text-shadow:0 1px 3px rgba(0,0,0,.55); }
html body dialog::-webkit-scrollbar { display:none; width:0; height:0; }
html body dialog::backdrop { background:rgba(7, 14, 27, .55); }
html body dialog :is(input,select,textarea) { background:rgba(4, 8, 14, .45); }
body #dialog { --dialog-pad:clamp(16px,3vh,26px); }
/* Compact dialog forms so one window holds them: two columns at every width, tighter labels and fields. */
body #dialog .lg-conditions { grid-template-columns:1fr 1fr; gap:10px 12px; margin:14px 0; }
body #dialog .lg-conditions label { gap:4px; font-size:11.5px; line-height:1.35; }
body #dialog .lg-conditions :is(select,input:not([type=checkbox])) { height:40px; min-height:40px; }
body #dialog .signal-scenario-event { margin:10px 0; padding:10px 12px; }
body #dialog .carrier-modal>p { margin-block:6px; }
@media (min-width:640px) { body #dialog .lg-conditions { grid-template-columns:repeat(3,1fr); } }
@media (max-height:700px) { body #dialog #signal-scenario>p:not([data-signal-error]) { display:none; } }
@media (max-width:640px) { :root { --dialog-bg: rgba(9, 13, 20, .76); } }
/* Liquid glass dock (owner reference, 2026-10-17): a clear, softly lit glass bar and a glass lens that slides under the selected icon
   and magnifies it, with a bright top edge and a faint warm/cool dispersion at its rim. Only the bar and the lens are glass (small
   surfaces); the rest of the page stays blur-free. */
body .site-header .header-navigation > :is(nav,.header-actions) {
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035)),rgba(22,24,28,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.7) brightness(1.08); backdrop-filter:blur(16px) saturate(1.7) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 18px rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.4);
}
body .site-header nav .nav-indicator {
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-pill);
  background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.28),rgba(255,255,255,.08) 55%,rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(2px) saturate(2) brightness(1.25); backdrop-filter:blur(2px) saturate(2) brightness(1.25);
  box-shadow:inset 2px 2px 3px rgba(255,255,255,.55),inset -2px -3px 4px rgba(255,255,255,.16),inset 4px 0 8px -2px rgba(255,120,150,.32),inset -4px 0 8px -2px rgba(110,180,255,.32),0 2px 12px rgba(0,0,0,.35);
}
body .site-header nav a .nav-icon { transition:color .25s ease,transform .38s cubic-bezier(.22,1,.36,1); transform-origin:center; }
body .site-header nav a.active .nav-icon { transform:scale(1.14); }
@media not all { body .site-header nav a .nav-icon { transition:color .25s ease; } }

/* Footer (owner, 2026-10-17): only the brand line, Gentle motion and Artwork & sources remain, as one quiet row of small muted text. */
body main > footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:2px 22px; margin-top:32px; padding:22px 4px 10px; border-top:1px solid var(--surface-line); color:var(--muted); font-size:12px; line-height:1.6; text-align:left; }
body main > footer > span:first-child { flex:1 1 100%; margin:0 0 6px; color:var(--muted); }
body main > footer button { display:inline-flex; align-items:center; gap:6px; min-height:32px; margin:0; padding:0; border:0; background:none; box-shadow:none; color:var(--muted); font:inherit; font-size:12px; transition:color .2s ease; }
@media (hover:hover){body main > footer button:hover{ color:var(--text); }}
body main > footer button svg { width:14px; height:14px; }
@media (pointer:coarse) { body main > footer button { min-height:44px; } }
/* Beta mark: a small gold tag on the logo's corner. */
body .site-header .home-logo { position:relative; }
body .site-header .beta-badge { position:absolute; top:-7px; right:-8px; padding:1px 6px; border:1px solid rgba(223,207,170,.55); border-radius:var(--r-pill); background:rgba(9,13,20,.85); color:var(--gold); font-size:8.5px; font-weight:700; letter-spacing:.12em; line-height:1.5; pointer-events:none; }
/* Phones (owner, 2026-10-17: blurred strip under the status bar): iOS Safari fades and blurs page content under a sticky element that sits
   at the top edge. The pill header therefore scrolls away with the page on touch phones; the bottom dock stays fixed. */
@media (max-width:800px) and (pointer:coarse) { body header.site-header { position:relative; top:auto; } }

/* iOS 26 tab bar (owner reference, 2026-10-17): one wide glass bar holding Home, Games, Deals and Search, each an icon over a short
   label, and a liquid-glass lens that is taller than the bar, slides under the selected item, magnifies it and tints it gold.
   Labels come from each link's title / the search button's language (no extra markup). Not in the short-landscape top-bar mode. */
@media not all and (max-height:500px) and (min-width:521px) {
  html body .site-header .header-navigation {
    width:min(440px,calc(100vw - 24px)); max-width:calc(100vw - 24px); height:62px; gap:0; padding:0;
    grid-template-columns:minmax(0,3fr) minmax(0,1fr); border-radius:var(--r-pill);
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(30,31,34,.62);
    -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.45);
  }
  html body .site-header .header-navigation > :is(nav,.header-actions) { height:62px; width:100%; padding:0; border:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; overflow:visible; }
  html body .site-header .header-navigation > nav { --lens-w:104px; --lens-h:54px; --lens-inset:8px; --lens-fit:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  html body .site-header .header-navigation > nav a,html body .site-header .header-navigation .search-button {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:100%; min-width:0; padding:0;
    color:rgba(255,255,255,.92); font-size:11px; font-weight:600; letter-spacing:0; line-height:1.15; border:0; background:none; border-radius:var(--r-pill);
  }
  html body .site-header .header-navigation > nav a::after { content:attr(title); position:static; display:block; width:auto; height:auto; background:none; color:inherit; white-space:nowrap; }
  html body .site-header .header-navigation .search-button { width:100%; }
  html body .site-header .header-navigation .search-button::after { content:'Search'; white-space:nowrap; }
  html[lang="ko"] body .site-header .header-navigation .search-button::after { content:'검색'; }
  html body .site-header .header-navigation :is(.nav-icon,.search-button svg) { width:22px; height:22px; }
  html body .site-header .header-navigation > nav a.active { color:var(--gold); }
  html body .site-header .header-navigation > nav a.active .nav-icon { transform:scale(1.12); }
  html body .site-header nav .nav-indicator {
    border:1px solid rgba(255,255,255,.34); border-radius:var(--r-pill);
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 45%,rgba(255,255,255,.07));
    -webkit-backdrop-filter:blur(1.5px) saturate(1.9) brightness(1.18); backdrop-filter:blur(1.5px) saturate(1.9) brightness(1.18);
    box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55),inset 0 -1.5px 1px rgba(255,255,255,.22),inset 6px 0 10px -6px rgba(255,120,160,.45),inset -6px 0 10px -6px rgba(110,190,255,.45),0 6px 18px rgba(0,0,0,.45);
  }
  html body .site-header nav .nav-indicator::after {
    content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none;
    background:conic-gradient(from 200deg,rgba(255,110,150,.65),rgba(255,220,140,.35),rgba(120,255,200,.35),rgba(110,170,255,.65),rgba(200,140,255,.45),rgba(255,110,150,.65));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    opacity:.75;
  }
  html { scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  html body main { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
}
/* The lens always takes its item's width and sits centred on it, in the top bar too. */
body .site-header nav { --lens-fit:1; }
/* Compact signal card (owner, 2026-10-17: "too long"): range tabs share the kicker row, a shorter chart, and conditions, per-provider
   rates and sources folded into one "Details" row. */
.price-trend { position:relative; gap:6px; }
.price-trend .trend-chart { gap:0; }
.price-trend .trend-ranges { position:absolute; top:-4px; right:0; }
.price-trend .trend-ranges button { min-height:24px; min-width:36px; padding:0 9px; font-size:11px; }
.price-trend .trend-plot { max-height:118px; }
.price-trend .trend-saving { font-size:12.5px; line-height:1.45; }
.price-trend .trend-saving small { font-size:11px; }
.price-trend .trend-now { font-size:clamp(28px,3vw,36px); }
body .game-signal .signal-more>summary { display:flex; align-items:center; justify-content:space-between; }
body .game-signal .signal-more>.trend-note { display:block; margin:8px 0 4px; }
body .game-signal .signal-more details { margin-top:8px; }
@media (pointer:coarse) { .price-trend .trend-ranges button { min-height:32px; } }
/* SVG ignores the hidden attribute: the hover crosshair and dot stay invisible until a pointer is over the chart. */
.price-trend :is(.trend-cross,.trend-hover-dot)[hidden] { display:none; }
/* Phones (owner, 2026-10-17: "laggy"): a live backdrop blur under the fixed tab bar is re-filtered on every scrolled frame in iOS Safari.
   On touch screens the bar and its lens keep the same glass look from tints and highlights only, with no backdrop blur. */
@media (hover:none),(pointer:coarse) {
  html body .site-header .header-navigation { -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(26,27,30,.97); }
  body .site-header nav .nav-indicator { -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 45%,rgba(255,255,255,.1)); }
}
/* Information-only supporting facts (2026-10-18): SKT's standard plan on the SKT card, Google's point rules on the Google card. */
body .carrier-related-plan { margin:12px 0; padding-top:12px; border-top:1px solid #ffffff12; font-size:12px; line-height:1.6; }
body .carrier-related-plan h4 { margin:0 0 4px; font-size:12px; font-weight:600; }
body .carrier-related-plan p { margin:2px 0; overflow-wrap:anywhere; }
body .google-guide-rules { margin:0 0 12px; font-size:11px; line-height:1.55; color:var(--muted,#c6c4bf); }
body .google-guide-rules summary { cursor:pointer; min-height:28px; }
body .google-guide-rules ul { margin:4px 0 6px; padding-left:16px; }
body .google-guide-rules li { overflow-wrap:anywhere; }