/* Layout depends on available space, rather than the device's aspect ratio. */
:root {
  --page-gutter:clamp(12px,2vw,24px);
  --header-rail:170px;
}
body { overflow-wrap:anywhere; }
/* Korean wraps between words only, everywhere ('확신은 더하 / 고' left one syllable on its own line in 7-25 places per width; responsive-live-34).
   This is the only root owner of Korean word breaking (interface.css had a second copy). break-word stays the emergency break for a single
   word wider than its line without letting Korean min-content widths collapse to one syllable the way anywhere does.
   The same owner covers Korean islands on the English page (official Korean terms quoted as lang="ko" in dialogs broke '대|한' 10-34 times;
   premium-visual-live-10). */
html[lang="ko"] body,body [lang="ko"] { word-break:keep-all; line-break:strict; overflow-wrap:break-word; }
/* The page ends just under the footer, clear of the floating dock (16px + 44px + a 16px breath, plus the home indicator). A half-screen
   spacer (50dvh - 60px) left 360-490px of bare artwork below the footer; the dock's centred landing already clamps to the last scroll
   position and the section highlight still reaches the last section (responsive-live-28). */
body main { width:calc(100% - 2 * var(--page-gutter)); padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
body header.site-header {
  width:calc(100% - 2 * var(--page-gutter)); max-width:none;
  grid-template-columns:var(--header-rail) minmax(0,1fr) var(--header-rail);
  height:auto; min-height:44px; overflow:visible;
}
body .site-header .header-navigation { min-width:0; }
body .site-header nav { flex:1 1 auto; height:44px; scroll-padding-inline:8px; overflow-x:auto; overflow-y:hidden; }
body .site-header nav a { flex:0 0 auto; height:100%; min-height:0; padding-inline:10px; white-space:nowrap; }
body .site-header .home-logo,body .site-header .header-actions { height:44px; }
body .site-header .header-actions { width:44px; flex:0 0 44px; }
/* Same label type as the Log in pill beside it (account.css), so the two read as one pair (was 11px/600 next to 13px/500). */
body .site-header .header-language {
  justify-self:end; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; height:44px; min-width:100px; padding:0 13px;
  border:1px solid var(--surface-line); border-radius:var(--r-pill);
  background:rgba(8,11,16,.68); color:var(--text);
  backdrop-filter:blur(12px); font:500 13px 'DM Sans','Noto Sans KR',sans-serif; letter-spacing:0;
  white-space:nowrap; cursor:pointer;
}
body .site-header .header-language:focus-visible { color:var(--gold); border-color:var(--gold); }
@media (hover:hover) and (pointer:fine) { body .site-header .header-language:hover { color:var(--gold); border-color:var(--gold); } }
body .site-header .header-language svg { width:15px; height:15px; flex:none; }
body .site-header .language-short { display:none; }

/* Shrink text and flex/grid children inside their own column before reflowing. */
body main *,body #dialog * { min-width:0; }
body main img,body #dialog img { max-width:100%; object-fit:contain; }
body :is(input,select,textarea) { max-width:100%; }
body :is(.hero-actions,.section-heading,.refresh-cluster,.deal-toolbar,.filter-tabs,.feed-context,.art-credit) { flex-wrap:wrap; }
body :is(.hero-actions,.modal-actions) :is(.primary,.outline) {
  max-width:100%; min-width:0; white-space:normal; text-align:center;
}
body .hero { grid-template-columns:minmax(0,1fr) minmax(0,390px); gap:16px clamp(20px,3vw,40px); }
body .hero-copy { container-type:inline-size; }
body .hero h1,html[lang="ko"] body .hero h1 {
  white-space:normal; overflow-wrap:anywhere;
  font-size:clamp(28px,5vw,58px)!important;
  font-size:clamp(28px,12cqi,58px)!important;
}
body .hero-actions { align-items:stretch; white-space:normal; }
body .logo-strip { width:100%; }
body .logo-strip button { flex:1 1 0; }
body #intelligence.price-panel.glass { width:100%; max-width:440px; }
body #intelligence .panel-heading { height:auto; min-height:54px; }
body .panel-heading img { flex:0 0 38px; }
body .panel-heading>span { flex:1; }
body .panel-heading strong,body .panel-heading small { white-space:normal; }
body #intelligence :is(.metrics,.verdict-row) { grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); }
body #intelligence .metrics>div+div { padding-left:0; border-left:0; }
body #intelligence .game-signal { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
body .game-signal table { table-layout:fixed; }
body .game-signal td,body .game-signal th { overflow-wrap:anywhere; }
body .game-signal figure { max-width:100%; margin-inline:0; }
body #intelligence .signal-rate-legend { flex-wrap:wrap; }

body .games-section { display:flex; flex-wrap:wrap; }
body .games-section .section-copy { flex:1 1 230px; }
body .games-section .game-cards { flex:2 1 450px; grid-template-columns:repeat(5,minmax(0,1fr)); }
body .games-section .game-card { white-space:normal; }
/* Korean names break between words only ('명조: 워더링 / 웨이브', never '웨 / 이브'): keep-all and strict are inherited from the root rule above;
   this only puts back its break-word over interaction.css's '.game-card strong{overflow-wrap:anywhere}'. */
html[lang="ko"] body :is(.games-section,#dialog .dialog-games) .game-card strong { overflow-wrap:break-word; }
body .games-section .section-copy a { white-space:normal; }
/* Up to 800px the copy is its own row (title left, 'Request a game' right) above the cards, as interface.css intends: beside the cards at 768
   it was squeezed to 233px ('선택.' alone, 'Request a / game' crushed to 49px; responsive-live-37). The link's 44px touch box overhangs the
   title row instead of padding it, so the title sits 16px above the cards (43px of empty panel at 375; premium-visual-live-29). */
@media(max-width:800px) {
  body .games-section { row-gap:16px; }
  body .games-section .section-copy { flex-basis:100%; }
  body .games-section .section-copy a { white-space:nowrap; margin-block:-10px; }
  body .games-section .game-cards { margin-top:0; }
}
body #deals .section-heading { flex-direction:row; align-items:center; }
body .refresh-cluster { width:auto; max-width:100%; justify-content:flex-start; }
body .freshness { margin-left:0; }
body .deal-toolbar { align-items:center; gap:8px; }
body .filter-tabs { flex:1 1 410px; gap:4px; }
body .filter-tabs button { flex:1 1 auto; white-space:normal; }
body .platform-select { display:flex; flex:0 1 auto; flex-wrap:wrap; margin:0; padding:0; }
body .feed-context>span { flex:1 1 240px; }
body #deals .deal-grid,
body #deals .deal-grid:has(>[data-carrier-workspace="lgu-plus"]) {
  /* Reserve empty columns so filtering never stretches the remaining cards. */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  align-items:stretch;
}
body .deal-top { flex-wrap:wrap; }
body .deal-top .status-badge { max-width:100%; white-space:normal; }
body .carrier-key-facts { flex-wrap:wrap; }
body .carrier-facts { max-width:100%; }
body :is(.carrier-main-tabs,.promotion-event-tabs) button { white-space:normal; overflow-wrap:anywhere; }
body #deals .carrier-panel { overflow:visible; }
body .membership-facts>div { flex-wrap:wrap; gap:4px 12px; }
body .membership-facts dd { margin-left:auto; }
body .quiet-section .savings-lab { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:24px; }
body .calculator-inputs { grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
body .native-feedback-fields { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
body .native-feedback-fields label:last-child { grid-column:auto; }
body .native-feedback-footer .primary { min-width:0; max-width:100%; white-space:normal; }
body .native-feedback-footer { align-items:stretch; }

/* Bound dialogs on both axes. Long content and mobile keyboards can scroll. */
body #dialog {
  width:min(680px,calc(100% - 24px)); max-width:calc(100% - 24px);
  max-height:calc(100dvh - 24px); padding:clamp(16px,4vw,26px);
  overflow:auto; overscroll-behavior:contain; scroll-padding:16px;
}
body #dialog .close { --close-size:36px; width:var(--close-size); height:var(--close-size); line-height:1; z-index:3; }
body #dialog h2 { padding-right:24px; overflow-wrap:anywhere; }
body #dialog .dialog-games { grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
body #dialog .source-status { grid-template-columns:minmax(0,1fr); }
body #dialog .source-status>* { grid-column:1; }
body #dialog .carrier-modal-facts { grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); }
body #dialog .modal-actions { display:flex; flex-wrap:wrap; gap:10px; }
body #dialog fieldset { min-inline-size:0; max-width:100%; }
body #dialog:has(#payment-conditions) { padding:0; max-height:calc(100dvh - 24px); }
body #payment-conditions { max-height:calc(100dvh - 26px); }
body #payment-conditions .pc-body { flex:1 1 auto; }
body #payment-conditions :is(.pc-header,.pc-body,.pc-footer) { padding-inline:clamp(14px,4vw,26px); }
body #payment-conditions .pc-choice>div { flex-wrap:wrap; }
body #payment-conditions .pc-choice label { flex:1 1 80px; }
body #payment-conditions .pc-footer>div { flex-wrap:wrap; }
body #payment-conditions :is(.pc-cancel,.pc-apply) { min-width:0; max-width:100%; gap:12px; padding-inline:16px; }
/* Both start from their own label width and share the spare room 1 : 1.6, so 'Apply conditions →' stays on one line at 320px
   (a 50/50 split from 100px wrapped it and grew both buttons to 54px; responsive-live-42). */
body #payment-conditions .pc-cancel { flex:1 1 auto; }
body #payment-conditions .pc-apply { flex:1.6 1 auto; white-space:nowrap; }
body #toast { max-width:calc(100% - 24px); white-space:normal; overflow-wrap:anywhere; }

@media(max-width:1100px) {
  /* 44px: the logo and language circles are full touch targets and round (43 made them 43x44 ovals; responsive-live-29). */
  :root { --header-rail:44px; }
  body .site-header .header-language { width:44px; min-width:44px; padding:0; }
  body .site-header .header-language svg,body .site-header .language-full { display:none; }
  body .site-header .language-short { display:inline; }
  body .site-header .home-logo { 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; }
}
@media(max-width:900px) {
  body .hero { grid-template-columns:minmax(0,1fr); padding:22px 5px 10px; }
  body .hero-copy { padding-top:0; }
  body #intelligence.price-panel.glass { width:100%; justify-self:center; }
}
@media(max-width:560px) {
  body .site-header .header-navigation { gap:5px; }
  /* The title gives way (balanced over two lines) so 'Request a game' stays on the title row instead of wrapping under it. */
  body .games-section .section-copy { flex-wrap:nowrap; }
  body .games-section .section-copy h2 { flex:1 1 auto; min-width:0; text-wrap:balance; }
  body .games-section .section-copy a { flex:none; }
  body .games-section .game-cards { grid-template-columns:repeat(5,minmax(0,1fr)); }
  body .hero-actions>a { flex:1 1 150px; }
  body #deals .deal-grid>.carrier-workspace { padding:14px; }
  body .native-feedback{ padding:16px; }
  body #payment-conditions .pc-fields { grid-template-columns:minmax(0,1fr); }
  body #intelligence .game-signal>.signal-kicker,
  body #intelligence .game-signal>.signal-value { grid-column:1/-1; grid-row:auto; text-align:left; max-width:none; }
}
@media(max-width:520px) {
  body header.site-header {
    gap:4px; min-height:44px; align-items:center;
  }
  body .site-header .header-navigation { display:contents; }
  body .site-header nav {
    grid-column:2; display:flex; justify-content:space-between;
    width:100%; height:44px; padding:0 2px; overflow:hidden;
  }
  body .site-header nav a { flex:1 1 auto; justify-content:center; padding:0 2px; font-size:10px; }
  body .site-header .header-actions { grid-column:3; width:40px; height:44px; }
}
@media(max-width:385px) {
  body .site-header .header-actions { grid-column:2; grid-row:1; margin-top:0; }
  body .site-header nav { grid-column:1/-1; grid-row:2; }
}
@media(max-width:340px) {
  body .games-section .game-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:270px) {
  body .site-header nav a { font-size:9px; padding-inline:1px; }
}
@media(max-width:260px) {
  body .games-section .game-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-height:500px) {
  /* One scroll area prevents a fixed header/footer from consuming a short dialog. */
  body #dialog:has(#payment-conditions) { overflow:auto; }
  body #payment-conditions { max-height:none; }
  body #payment-conditions .pc-body { overflow:visible; }
  body #payment-conditions .pc-header { padding-top:16px; padding-bottom:12px; }
  body #payment-conditions .pc-footer { padding-top:12px; padding-bottom:12px; }
}
/* The page itself scrolls without a track (the artwork runs edge to edge). Inner scroll regions (dialogs, the conditions body, text fields)
   show a thin warm scrollbar, so a clipped Apply button or a long sources list is visibly scrollable. Strips that hide theirs on purpose
   (the header nav, the Play event-number strip) keep their own more specific rules. */
html, body { scrollbar-width:none; scrollbar-gutter:auto; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display:none; width:0; height:0; }
/* Chrome 121+ ignores ::-webkit-scrollbar once scrollbar-width/-color is set (and then draws a fading overlay bar on macOS), so Chrome and Safari get
   the always-visible 6px pseudo-element bar and only engines without it (Firefox) get the standard thin bar. */
body * { scrollbar-gutter:auto; }
@supports not selector(::-webkit-scrollbar) {
  body * { scrollbar-width:thin; scrollbar-color:rgba(223,207,170,.34) transparent; }
}
body *::-webkit-scrollbar { width:6px; height:6px; background:transparent; }
body *::-webkit-scrollbar-track { background:transparent; margin:10px; }
body *::-webkit-scrollbar-thumb { background:rgba(223,207,170,.34); border-radius:6px; }
@media (hover:hover){body *::-webkit-scrollbar-thumb:hover{ background:rgba(223,207,170,.52); }}
body *::-webkit-scrollbar-corner { background:transparent; }
/* Short windows (200 % zoom, landscape phones): Cancel/Apply stay pinned to the bottom of the one scrolling dialog. */
@media(max-height:500px) {
  body #payment-conditions .pc-footer { position:sticky; bottom:0; z-index:2; }
}

@media(pointer:coarse) {
  body :is(.filter-tabs button,.carrier-main-tabs button,.refresh-button,.profile-trigger) { min-height:44px; }
  body :is(input,select,textarea),body #payment-conditions :is(input[type=text],select) { font-size:16px; }
  /* The more specific field owners (toolbar 'Playing on', feedback fields, carrier calculator amount, login email) read this floor through
     max(var(--field-fs-floor),Npx), so no focused field computes below 16px and iOS never zooms (responsive-live-33). */
  :root { --field-fs-floor:16px; }
  body .carrier-field :is(input,select) { min-height:44px; }
  /* Same 44px floor at the ID specificity of the ui-polish desktop/tablet rules (#deals .refresh-button 36px, .freshness 24px, pills 42px,
     select 40px), so touch tablets and landscape phones wider than 800px get finger-sized targets too. */
  body #deals :is(.filter-tabs button,.refresh-button,.freshness,.platform-select select,#v1-profile-button) { min-height:44px; }
  body .logo-strip button { min-height:44px; }
}

/* Carrier cards grow with their content (the tallest of their stacked tab panels, so switching tabs never changes the height); each grid row
   stretches its cards to one height so footers line up. A fixed 380px shell left 100-150px voids in the sparse Play/Galaxy/Epic cards. */
body #deals .deal-grid { align-content:start; align-items:stretch; }
body #deals .deal-grid>.carrier-workspace {
 box-sizing:border-box;
 height:auto; min-height:312px!important; max-height:none;
 align-self:stretch; overflow:hidden;
}
@media(min-width:801px) {
  body #deals .deal-grid>.carrier-workspace { min-height:340px!important; }
}
body #deals .carrier-panels {
 flex:1 1 auto; height:auto; min-height:0; overflow:hidden;
}
body #deals .carrier-panel {
 min-height:0; overflow-y:auto; overscroll-behavior:contain;
 scrollbar-width:thin;
}

/* Compact provider workspaces keep their fixed shell; wheel input scrolls the page. */
body #deals .carrier-panels,
body #deals .carrier-panel {
 overflow:hidden;
 overscroll-behavior:auto;
 scrollbar-width:none;
}

/* Safari overlay scrollbars must not tint the bottom of the navigation pill. */
body .site-header nav { scrollbar-width:none; -ms-overflow-style:none; }
body .site-header nav::-webkit-scrollbar { display:none; width:0; height:0; }
body .site-header nav::-webkit-scrollbar-track,
body .site-header nav::-webkit-scrollbar-thumb { background:transparent; }

/* KO/EN share identical hero line boxes; typeface choice stays localized. */
body .hero h1,
html[lang="ko"] body .hero h1 {
 line-height:1.15;
 block-size:2.4em;
 min-block-size:2.4em;
}
body .hero-copy .intro {
 line-height:1.7;
 min-block-size:3.4em;
}

/* Dock only the menu pill and search. The logo and language control stay in the top header. */
body .site-header .header-navigation {
  position:fixed; z-index:30; left:50%; top:auto;
  /* Sits low, close to the screen edge like a native tab bar: 10px on screens without a home indicator, and just above the indicator
     (inset - 14px, at least 10px) on iPhones, instead of the full 16px plus the whole 34px inset (owner, 2026-10-17). */
  bottom:max(10px,calc(env(safe-area-inset-bottom) - 14px));
  transform:translateX(-50%);
  display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center;
  width:min(336px, calc(100vw - 32px)); max-width:calc(100vw - 32px); margin:0; gap:8px;
}
body .site-header .header-navigation > nav {
  grid-column:1; grid-row:1; justify-content:center;
  width:100%; max-width:none; min-width:0; padding-inline:6px;
  overflow:hidden;
}
body .site-header .header-navigation > nav a { flex:1 1 0; min-width:0; justify-content:center; padding-inline:0; }
/* Below 360px six 44px links no longer fit beside the 44px search pill inside 16px gutters, so the pill's 6px inner padding goes to the
   links (320: 37.3 -> 39.3px each; >=44px from 348px up, was 364px). From 312px the 32px highlight still keeps >=3px off the rim;
   narrower (fold covers, 240-311) keeps the padding so the highlight does not touch the pill edge. */
@media (min-width:312px) and (max-width:359px) {
  body .site-header .header-navigation > nav { padding-inline:0; }
  /* With no inner padding the end links touch the pill's 22px end caps, which clipped the outer side of their inset focus ring
     (edge-interactions-46). Their outer corners take the pill's radius so the -3px ring runs concentric with the cap. */
  body .site-header .header-navigation > nav a:first-of-type:focus-visible { border-radius:22px 12px 12px 22px; }
  body .site-header .header-navigation > nav a:last-of-type:focus-visible { border-radius:12px 22px 22px 12px; }
}
body .site-header .header-navigation > .header-actions { grid-column:2; grid-row:1; width:44px; }
/* The dock's 1px rim is an inset ring, not a border, so its links and the search button fill the whole 44px pill (they were 42px inside the
   border; responsive-live-39). The touch variant of the shadow is in the (hover:none),(pointer:coarse) block below. */
body .site-header .header-navigation > :is(nav,.header-actions) { border:0; box-shadow:inset 0 0 0 1px var(--surface-line),0 4px 16px #0002; }
/* Keyboard focus never lands behind the floating dock: focus scrolling keeps its band (16px gap + 44px pill + 16px air) clear at the bottom
   (a Tab-focused filter or the rating select sat under the pill; edge-interactions-74, WCAG 2.4.11). */
html { scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
/* Short landscape windows (phones on their side): the dock moves into the top bar between the logo and the language pill. Floating at the
   bottom it covered the hero intro and both CTAs at scroll 0 (568x320, 667x375, 844x390; responsive-live-41). */
@media (max-height:500px) and (min-width:521px) {
  body .site-header .header-navigation { position:relative; left:auto; bottom:auto; transform:none; z-index:auto; grid-column:2; grid-row:1; justify-self:center; }
  html { scroll-padding-bottom:16px; }
}
/* 521-700px wide: the centred pill would touch the account pill (13px overlap at 568x320), so it starts right after the logo instead. */
@media (max-height:500px) and (min-width:521px) and (max-width:700px) {
  body .site-header .header-navigation { justify-self:start; }
}
@media (min-width:521px) {
  body .site-header .header-language { grid-column:3; }
}
@media (max-width:520px) {
  body header.site-header { grid-template-columns:44px minmax(0,1fr) 44px; }
  body .site-header .header-language { grid-column:3; }
}
@media (max-width:385px) {
  body header.site-header {
    grid-template-columns:minmax(0,1fr) 44px;
    grid-template-rows:44px; min-height:44px;
  }
  body .site-header .home-logo { grid-column:1; grid-row:1; }
  body .site-header .header-language { grid-column:2; grid-row:1; }
}

/* One consistent icon dock at every viewport width. Names remain localized. */
body .site-header nav .nav-icon,
body .site-header .search-button .nav-search-icon {
  display:block; width:20px; height:20px; flex:none; stroke-width:2;
}
@media (max-width:270px) {
  body .site-header .header-navigation { width:calc(100vw - 24px); max-width:calc(100vw - 24px); }
}

/* The header has no background, so the brand floated raw over page text once the header stuck. Same glass pill as the other header controls. */
body .site-header .home-logo { padding:0 16px 0 13px; border:1px solid var(--surface-line); border-radius:var(--r-pill); background:rgba(8,11,16,.68); backdrop-filter:blur(12px); }
/* One resting shadow for every desktop header pill (Log in and the language pill had none beside the shadowed logo and menu; premium-visual-live-11).
   Touch screens replace it in the (hover:none),(pointer:coarse) block below. */
body .site-header .home-logo,body .site-header .header-language,body .site-header #account-button { box-shadow:0 4px 16px #0002; }
@media (max-width:800px) {
  body .site-header .home-logo { width:44px; padding:0; justify-content:center; }
}
/* The 13px artwork-source icon keeps its layout and gets a finger-sized hit area (edge-interactions-57). The visible box is a 21px circle
   hugging the icon (4px padding, net margin 0), so its inset focus ring sits on the credit pill instead of floating as a tall square,
   and stays inside the viewport at 390px. The 44x44 target comes from an invisible ::before, weighted upward (19 top / 4 bottom):
   the hero ends ~5px below the icon and the later .games-section paints over anything that overhangs it. The upward part reaches into
   the positioned .price-panel's bottom padding, so the button is lifted above it (z-index stays inside the hero's isolation context). */
body .art-credit button { position:relative; z-index:1; display:inline-grid; place-items:center; padding:4px; margin:-4px; border-radius:999px; }
body .art-credit button::before { content:""; position:absolute; inset:-19px -11.5px -4px; }
body .art-credit button:focus-visible { outline-offset:-2px; }

/* Toasts sat under the floating menu dock (bottom 16–60px, z-index 30) and were unreadable. */
body #toast { bottom:calc(76px + env(safe-area-inset-bottom)); z-index:31; }
/* viewport-fit=cover (index.html) makes the env() offsets above real on iPhone and lets the artwork run edge to edge;
   page content keeps clear of the landscape notch and rounded corners. All insets are 0 elsewhere. */
body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }

/* Hover tints stuck after a tap on touch screens: the tapped game looked unselected, filter pills kept their hover tint.
   The header pills (logo, language, Log in) guard their own :hover with (hover:hover) and (pointer:fine) at the owner rule instead. */
@media (hover:none) {
  body .games-section .game-card:hover { background:transparent!important; }
  body .games-section .game-card.selected:hover { background:rgba(237,235,228,.09)!important; }
  #deals .filter-tabs button:hover { background:none; color:var(--muted); }
  #deals .filter-tabs button[aria-pressed=true]:hover { color:#f1d7a7; background:#e6c99612; }
}

/* Finger-sized targets for the small text actions; in-card event tabs grow less so the compact carrier cards stay compact. */
@media(pointer:coarse) {
  body :is(.carrier-text-action,.promotion-details-link,.text-button,.freshness,main footer button,.games-section .section-copy a) { min-height:44px; display:inline-flex; align-items:center; }
  /* Every remaining touch target reaches 44px (responsive-live-39): the Play event-number and Galaxy event tabs (34x36 / 36 tall), the signal
     'official terms' links (37-39), the coverage cards (40), the 'show ended' label (40) and the stacked hero pills (40 next to 46 at 320). */
  body #deals :is(.promotion-event-tabs,.promotion-tabs) button { min-height:44px; min-width:44px; }
  body #dialog .close { --close-size:44px; }
  /* The conditions dialog's language link was 33-39 x 27 (responsive-live-30); its underline is text-decoration (ui-polish.css), so the taller box does not move it. */
  body #payment-conditions .pc-language { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; margin-block:-8.5px; }
  body .game-signal .signal-events article a { display:inline-flex; align-items:center; min-height:44px; }
  /* The artwork-sources dialog's 'Official source ↗' links were 16px-tall blocks (responsive-live-31); they keep their start-aligned width,
     and -6px block margins let the 44px target overhang the 9px row gaps so the text rhythm stays as tight as on desktop. */
  body #dialog .source-status a { display:inline-flex; align-items:center; justify-self:start; min-height:44px; margin-block:-6px; }
  body .hero-actions :is(.primary,.outline) { min-height:46px; }
}

/* Safari < 17 drew its own disclosure triangle next to the "+" on quiet sections. */
.quiet-details summary::-webkit-details-marker,.quiet-section>summary::-webkit-details-marker { display:none; }

/* Pointer users never see the keyboard focus ring (a click, or a dialog's autofocus after a click, drew a gold box). Tab/arrow keys bring it back.
   Text fields are exempt: a clicked input, select or textarea keeps its designed focus ring, since that is where typing goes. */
html.using-pointer :is(:focus,:focus-visible):not(textarea,select,[contenteditable]:not([contenteditable="false"]),input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit],[type=reset],[type=file],[type=color],[type=image])) { outline:none!important; }
/* The header pills' drop shadow is their resting look, not a focus ring: clicking the logo, Log in or the language pill no longer drops it.
   Same for a section focused by an in-page link (smooth.js marks it [data-anchor-target]): its glass drop shadow is resting chrome, so a dock or
   CTA click no longer strips it until focus leaves (recheck3-motion). */
html.using-pointer :is(:focus,:focus-visible):not(textarea,select,[contenteditable]:not([contenteditable="false"]),input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit],[type=reset],[type=file],[type=color],[type=image]),.site-header :is(.home-logo,.header-language,#account-button),[data-anchor-target]) { box-shadow:none!important; }

/* 2026-10-16 "at least 60 fps": backdrop blur on every card, section and dialog over the artwork re-filters the whole backdrop each frame a card moves
   (hover tilt measured 60 fps with 62 ms stalls on a 165 Hz Mac display). Every card, section, panel and dialog is now an unblurred --surface-glass tint
   (interface.css owns it, desktop and touch alike); only the small header pills keep blur. */
body #dialog:not(:has(.account-signin)){ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
/* Same surface as the hero panel and the carrier cards: --surface-glass, no blur, no extra sheen gradient on top
   (the games panel and the filter bar stacked a second translucent gradient and read as solid). */
body .games-section.glass,body .deal-toolbar {
  background:var(--surface-glass)!important; background-image:none!important;
  border:1px solid var(--surface-line)!important; box-shadow:var(--surface-shadow);
}

/* Phones and tablets: the header pills and the floating dock carry no blur (re-filtered while the page scrolls and while the glide runs, which made
   the dock click clunky), so they need a real backdrop of their own: at 86 % (and still faintly at 97 %) page text read through the dock between the
   icons. An opaque warm-black gradient hides it completely and keeps the pill's top-light, matching the desktop pills. The large surfaces are unblurred everywhere (interface.css). */
@media (hover:none),(pointer:coarse) {
  body .site-header .header-language,body .site-header .home-logo,body .site-header #account-button {
    backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
    background:linear-gradient(180deg,#121419,#08090d)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.34);
  }
  /* The dock is one liquid-glass bar (interface.css, owner 2026-10-17); its nav and search sit on it with no fill of their own. */
}

/* Game picker: the card you leave drops its highlight at once (it used to fade for 240 ms, a ghost outline beside the new one); the new one eases in. */
body .games-section .game-card { transition:transform 320ms var(--homepage-motion-ease,ease),box-shadow 200ms ease,border-color 0s,background-color 0s!important; }
body .games-section .game-card.selected { transition:transform 320ms var(--homepage-motion-ease,ease),box-shadow 200ms ease,border-color 200ms ease,background-color 200ms ease!important; }

/* Native selects, one owner rule. WebKit's menulist ignores author padding, min-height and radius: the toolbar 'Playing on' select and both feedback
   selects drew as 21px Aqua popups in Safari and on iPhone while Chrome drew them 40-44px. Every single-line select is now drawn by the page in every
   engine (no native chrome, a warm gold chevron with room on the right); height, radius and colours stay with each select's own rule.
   (0,1,2) outranks the class-level owners (.native-feedback select, .platform-select select, .carrier-field select, .lg-conditions select). */
:root { --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23dfcfaa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body select:not([multiple]) {
  -webkit-appearance:none; appearance:none;
  background-image:var(--select-chevron); background-repeat:no-repeat; background-position:right 13px center; background-size:12px 8px;
  padding-right:36px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;
}
@media (hover:hover){body select:not([multiple]):hover:not(:disabled,:focus){ border-color:rgba(223,207,170,.42); }}
body select:not([multiple]):disabled { cursor:not-allowed; opacity:.55; }
body select option { background-color:#14161b; color:var(--text); }
body .native-feedback select { min-height:44px; }
body #dialog .account-grid select:not([multiple]) { padding-right:36px; }

/* Legacy cool-blue leftovers in the warm system: the toast was navy (#29374b) with a blue rim. */
body #toast { color:var(--text); } /* surface, gold rim and radius live in the owner rule (refinement.css #toast) */

/* Phone scale pass (owner, 2026-10-17): one consistent, compact scale on phones. Filter chips wrap as compact chips, the platform
   picker is a slim inline row, "Show ended" shares the context line, and single-column cards size to their content (no voids). */
@media (max-width:600px) {
  body #deals .deal-toolbar { gap:10px; padding:10px 12px; }
  body #deals .filter-tabs { display:flex; flex-wrap:wrap; gap:6px; }
  body #deals .filter-tabs button { flex:0 0 auto; width:auto; min-width:0; min-height:38px; height:38px; padding:0 14px; font-size:13px; white-space:nowrap; }
  body #deals .platform-select { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; font-size:12px; }
  body #deals .platform-select select { width:auto; min-width:150px; height:40px; min-height:40px; padding:0 36px 0 14px; }
  body #deals .feed-context { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; line-height:1.5; }
  body #deals .feed-context label { flex:none; display:inline-flex; align-items:center; gap:6px; margin:0; white-space:nowrap; }
  body #deals .deal-grid>.carrier-workspace { min-height:0!important; }
  body .native-feedback :is(select,textarea) { min-height:44px; }
  body .native-feedback textarea { min-height:96px; }
}

/* Compact logo (owner, 2026-10-17): where the wordmark folds to the short form, the pill shows the app icon instead of "✦ WTY". */
body .site-header .home-logo-icon { display:none; }
@media(max-width:1100px) {
  body .site-header .home-logo :is(.home-logo-mark,.home-logo-short) { display:none; }
  body .site-header .home-logo-icon { display:block; width:30px; height:30px; border-radius:9px; flex:none; box-shadow:0 1px 4px rgba(0,0,0,.35); }
  body .site-header .home-logo { justify-content:center; padding:0; }
}
/* The compact logo is the icon alone: no pill behind it (owner, 2026-10-17). */
@media(max-width:1100px) {
  html body .site-header .home-logo { background:none!important; border:0!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
  html body .site-header .home-logo-icon { width:38px; height:38px; border-radius:11px; }
}