/* =====================================================================================================================
   FINISH LAYER: design system v6 "Nocturne" (2026-10-20, owner: "change the whole UI ... bulletproof").
   Loaded last; visual only. Undo: delete the finish.css link in dist/index.html (and 'finish.css' in scripts/build.mjs).

   Intent
   A quiet working surface over the game's own key art. The art is the only colour field; the interface is ink, paper-white
   type and one champagne accent. Grouping is done with space, alignment and type weight, not with boxes: only surfaces that
   sit over the art (the price card, the tiles, sheets) get a fill, and none of them carries a visible border.

   Palette (all text pairs measured on the darkest and on the brightest composite they can sit on)
     --wt-canvas    #0c0d10   page ink (cool, not pure black)
     --wt-surface   #121318   tiles, sheets         --wt-panel   rgba(14,15,19,.95)  cards over the art
     --wt-raise     #1a1b21   pressed / selected    --wt-line    rgba(255,255,255,.08) the only rule weight
     --wt-text      #f3f1ed   primary type (16.9:1 on canvas)
     --wt-text-2    #cfcbc4   secondary (11.7:1)    --wt-text-3  #aaa69f  tertiary, captions (7.6:1; >= 4.6:1 on the
                                                                           brightest art behind a card)
     --wt-accent    #e4c9a6   champagne: the active state, the one primary action, the "flat" trend (12.4:1)
     --wt-title     #efd6b2   the owner's title champagne (brand, unchanged)
     --wt-up #6fd6ad  --wt-down #ff8f86  data only (a discount above / below its average)
   Type roles
     title     'Monsieur La Doulaise' (EN) / 'MapoFlowerIsland' (KO), owner's brand choice, kept
     display   'Bodoni Moda'  the headline figure and Latin display only, at 24px and up, opsz pinned
     text      'IBM Plex Sans KR' every word of UI in both languages; tabular lining figures for every number
     Scale (px): 12 caption . 13 small . 14 ui . 15 body . 17 lead . 20 . 26 . 34 . 48 figure
     Korean: keep-all, line-height 1.6 for running text, 1.35 for UI labels; never below 12px.
   Space (4-pt): 4 8 12 16 20 24 32 40 56 72 96
   Radii by role: control 12 . chip 999 . tile 20 . card/panel 24 . sheet 24
   Elevation: e0 flat . e1 lit top edge (inset 0 1px 0 #ffffff0d) . e2 card = e1 + 0 40px 80px -40px #000c
   Motion: transform/opacity only. ease-out cubic-bezier(.22,1,.36,1) (long, soft landing); in-out (.65,0,.35,1).
     fast 180ms (press) . ui 320ms (hover, tabs) . surface 560ms (sheets, entrances) . film 900ms (scene change)
     chart rise 1100ms (atelier.js, unchanged). Reduced motion and the footer toggle (body.motion-off) drop all of it.
   Targets: >= 32px on a fine pointer, >= 44px on touch / narrow screens. Focus: 2px champagne ring, 3px offset.
   Bulletproofing (base): every text node may wrap anywhere it must (long unbroken titles), no fixed text heights,
     surfaces grow with their content, nothing scrolls inside a card.
   ===================================================================================================================== */
/* Layer order: wt-fix is declared first so its !important rules (fix round 1, at the end of this file) outrank wt-deals and wt-tools. */
@layer wt-r3, wt-r2, wt-fix;
:root{
  --wt-canvas:#0c0d10;--wt-surface:#121318;--wt-raise:#1a1b21;--wt-panel:rgba(14,15,19,.95);
  --wt-line:rgba(255,255,255,.08);--wt-line-2:rgba(255,255,255,.14);
  --wt-text:#f3f1ed;--wt-text-2:#cfcbc4;--wt-text-3:#aaa69f;
  --wt-accent:#e4c9a6;--wt-accent-hi:#efd9bc;--wt-accent-ink:#17130e;--wt-accent-soft:rgba(228,201,166,.12);
  --wt-title:#efd6b2;--wt-up:#6fd6ad;--wt-down:#ff8f86;
  --wt-font-text:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',system-ui,sans-serif;
  --wt-font-display:'Bodoni Moda','IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',Georgia,serif;
  --wt-s1:4px;--wt-s2:8px;--wt-s3:12px;--wt-s4:16px;--wt-s5:20px;--wt-s6:24px;--wt-s7:32px;--wt-s8:40px;--wt-s9:56px;--wt-s10:72px;
  --wt-r-control:12px;--wt-r-chip:999px;--wt-r-tile:20px;--wt-r-card:24px;
  --wt-e1:inset 0 1px 0 rgba(255,255,255,.05);
  --wt-e2:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.8);
  --wt-ease:cubic-bezier(.22,1,.36,1);--wt-ease-io:cubic-bezier(.65,0,.35,1);
  --wt-t-fast:180ms;--wt-t-ui:320ms;--wt-t-surface:560ms;--wt-t-film:900ms;
  --wt-target:32px;
  /* The older layers read these names: they now resolve to the system above. */
  --at-canvas:var(--wt-canvas);--at-surface:var(--wt-surface);--at-raised:var(--wt-raise);--at-glass:var(--wt-panel);
  --at-hair:var(--wt-line);--at-hair-2:var(--wt-line-2);--at-edge:var(--wt-e1);
  --at-text:var(--wt-text);--at-muted:var(--wt-text-3);--at-faint:var(--wt-text-3);
  --at-accent:var(--wt-accent);--at-accent-ink:var(--wt-accent-ink);--at-accent-soft:var(--wt-accent-soft);
  --at-up:var(--wt-up);--at-down:var(--wt-down);--at-ease:var(--wt-ease);
  --at-font:var(--wt-font-text);
  --text:var(--wt-text);--muted:var(--wt-text-3);--gold:var(--wt-accent);
  --surface-line:var(--wt-line);--line:var(--wt-line);--ui-border:var(--wt-line);
  --trend-up:var(--wt-up);--trend-down:var(--wt-down);--trend-flat:var(--wt-accent);
  --dialog-bg:#15161b;
}
@media (pointer:coarse),(hover:none),(max-width:820px){:root{--wt-target:44px}}

/* ---------------------------------------------------------------- base elements */
html,html body{background-color:var(--wt-canvas)!important}
html body{color:var(--wt-text);font-family:var(--wt-font-text);font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
html body :is(button,input,select,textarea,summary,a){font-family:inherit}
html body :is(button,input,select,textarea){font-family:var(--wt-font-text)}
/* Selection is a soft champagne wash under the text's own colour, so selected text stays as legible as it was. */
html body ::selection{background:rgba(228,201,166,.2);color:inherit;-webkit-text-fill-color:currentColor}
html body :focus-visible{outline:2px solid var(--wt-accent)!important;outline-offset:3px}
html[lang=ko] body{line-height:1.6}
/* Korean pages keep words whole (responsive.css, keep-all + break-word for running text). Inside these short-label components a single
   unbroken run longer than its line (a long title, a long name) must still wrap in place instead of widening its box, so the
   emergency break here is "anywhere" (it changes nothing for normal text: words still break between words first). */
html body :is(.site-header,.hero-copy,.art-credit,#intelligence),html body :is(.site-header,.hero-copy,.art-credit,#intelligence) *{overflow-wrap:anywhere!important}
html body :is(.site-header,.hero-copy,.art-credit,#intelligence) :is(span,strong,small,b,a,button,p){min-width:0}

/* ---------------------------------------------------------------- the stage (art stays still; the copy column gets a dark field) */
html body .shade{background:
  linear-gradient(90deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.84) 34%,rgba(8,9,11,.64) 50%,rgba(8,9,11,.22) 64%,rgba(8,9,11,0) 76%),
  linear-gradient(0deg,var(--wt-canvas) 0%,rgba(12,13,16,.62) 22%,rgba(12,13,16,0) 52%)!important}
@media (max-width:899px){html body .shade{background:
  linear-gradient(180deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.74) 40%,rgba(8,9,11,.5) 70%,rgba(8,9,11,.3) 100%),
  linear-gradient(0deg,var(--wt-canvas) 0%,rgba(12,13,16,0) 40%)!important}}

/* ---------------------------------------------------------------- header: brand left, two quiet chips right; it scrolls away with
   the page (the dock is the navigation that stays), so it never sits over content and needs no band behind it. */
@media not all and (max-height:500px) and (min-width:521px){
  html body header.site-header{position:relative!important;top:auto!important;display:flex!important;align-items:flex-start;gap:var(--wt-s2);
    flex-wrap:nowrap;min-height:44px;height:auto!important;margin-top:var(--wt-s4)}
  html body .site-header .home-logo{margin-right:auto}
  html body .site-header #account-button.header-account{position:relative!important;top:auto!important;right:auto!important;order:2}
  html body .site-header .header-language{order:3}
}
/* Short landscape: the dock sits in the top bar between the brand and the chips (responsive.css). Every item gets its own cell, so
   nothing is positioned over anything else, and the two sides stay equal so the dock stays centred. */
@media (max-height:500px) and (min-width:521px){
  html body header.site-header{grid-template-columns:minmax(0,1fr) auto minmax(0,.5fr) minmax(0,.5fr)!important;column-gap:0!important;align-items:start;height:auto!important}
  html body .site-header .home-logo{grid-column:1;grid-row:1;justify-self:start;margin-right:var(--wt-s2)!important}
  html body .site-header #account-button.header-account{position:relative!important;top:auto!important;right:auto!important;grid-column:3;grid-row:1;justify-self:end;margin-right:var(--wt-s2)!important}
  html body .site-header .header-language{grid-column:4!important;grid-row:1;justify-self:end}
}
/* 521-700px: no room to centre the dock, so it starts after the brand (responsive.css) and the chips take what is left. */
@media (max-height:500px) and (min-width:521px) and (max-width:700px){
  html body header.site-header{grid-template-columns:auto auto minmax(0,1fr) auto!important}
  html body .site-header .home-logo{position:relative!important}
  html body .site-header .home-logo .beta-badge{position:absolute!important;left:12px;bottom:-6px;padding:0 5px!important;font-size:0.5625rem!important;letter-spacing:.08em!important;white-space:nowrap!important;overflow-wrap:normal!important}
  html body .site-header #account-button.header-account{margin-left:var(--wt-s2)!important}
}
html body .site-header .home-logo{display:inline-flex!important;align-items:center;flex:0 1 auto;width:auto!important;min-width:0;max-width:100%;height:auto!important;min-height:44px;
  gap:10px!important;padding:0 2px!important;color:var(--wt-text)!important;font:600 0.9375rem/1.25 var(--wt-font-text)!important;letter-spacing:-.005em!important;
  font-variation-settings:normal!important;text-decoration:none}
html body .site-header .home-logo .home-logo-wordmark{font:inherit!important;letter-spacing:inherit!important;min-width:0;font-variation-settings:normal!important}
html body .site-header .home-logo .home-logo-short{display:none!important}
html body .site-header .home-logo .home-logo-icon{width:32px!important;height:32px!important;border-radius:9px!important}
html body .site-header .beta-badge{position:static!important;align-self:center;flex:0 1 auto;min-width:0;margin:0;padding:2px 7px!important;border:0!important;border-radius:var(--wt-r-chip)!important;
  background:#2a2621!important;color:var(--wt-accent)!important;font:600 0.625rem/1.4 var(--wt-font-text)!important;letter-spacing:.12em!important;text-shadow:none;white-space:normal!important}
html body .site-header :is(#account-button.header-account,.header-language){display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  flex:0 1 auto;min-width:44px!important;width:auto!important;max-width:min(50vw,320px);height:auto!important;min-height:44px!important;padding:10px 16px!important;
  border:0!important;border-radius:22px!important;background:rgba(14,15,19,.82)!important;box-shadow:var(--wt-e1)!important;
  -webkit-backdrop-filter:blur(14px) saturate(120%)!important;backdrop-filter:blur(14px) saturate(120%)!important;
  color:var(--wt-text)!important;font:500 0.875rem/1.3 var(--wt-font-text)!important;letter-spacing:0!important;white-space:normal!important;text-align:center;
  transition:background-color var(--wt-t-ui) var(--wt-ease),color var(--wt-t-ui) var(--wt-ease)}
html body .site-header :is(#account-button.header-account,.header-language) *{font:inherit;white-space:normal!important}
html body .site-header .home-logo *{white-space:normal!important}
html body .site-header .header-language svg{width:16px;height:16px;flex:none;color:var(--wt-text-2)}
@media (hover:hover) and (pointer:fine){html body .site-header :is(#account-button.header-account,.header-language):hover{background:rgba(30,31,37,.9)!important;color:var(--wt-accent-hi)!important}}
html body .site-header :is(#account-button.header-account,.header-language):active{background:rgba(36,37,44,.92)!important}
html body .site-header #account-button.signed-in{box-shadow:var(--wt-e1),inset 0 0 0 1px rgba(111,214,173,.35)!important}
@media (max-width:1100px){
  html body .site-header .header-language{padding:10px 12px!important}
}

/* ---------------------------------------------------------------- hero: title + one line + one action, then the price card */
html body .hero{row-gap:var(--wt-s6)!important;height:auto!important;max-height:none!important}
html body .hero-copy{min-width:0;max-width:100%}
html body .hero h1,html body .hero h1 span{overflow-wrap:anywhere;max-width:100%}
/* responsive.css fixed the title box at 2.4em so KO/EN swap without a jump; it keeps that as a floor but grows with its text. */
html body .hero h1,html[lang] body .hero h1{block-size:auto!important;min-block-size:2.4em}
html body .hero h1{text-wrap:balance}
html body .hero .intro{color:var(--wt-text)!important;font:400 1.0625rem/1.55 var(--wt-font-text)!important;letter-spacing:-.005em;max-width:30ch!important;margin:0 0 var(--wt-s7)!important}
html[lang=ko] body .hero .intro{font-size:1rem!important;line-height:1.6!important;max-width:24em!important}
html body .hero-actions{gap:var(--wt-s3)!important}
html body .hero-actions .primary{flex:0 1 auto!important;width:auto;max-width:100%}

/* Buttons: one champagne action per view; everything else is type. */
html body :is(.primary,.membership-primary,.provider-input-action,#v1-profile-button,.native-feedback button[type=submit],.pc-apply){
  background:var(--wt-accent)!important;color:var(--wt-accent-ink)!important;border:0!important;box-shadow:none!important;
  transition:background-color var(--wt-t-ui) var(--wt-ease),transform var(--wt-t-fast) var(--wt-ease)!important}
@media (hover:hover){html body :is(.primary,.membership-primary,.provider-input-action,#v1-profile-button,.native-feedback button[type=submit],.pc-apply):hover{background:var(--wt-accent-hi)!important}}
html body :is(.primary,.membership-primary,.provider-input-action,#v1-profile-button,.native-feedback button[type=submit],.pc-apply):active{transform:scale(.98)}
/* With motion on, the press is the shared 96% scale dip (wt-r3 press feel); a transform here as well snapped 2% in one frame on press and on release. */
@media (min-width:0){html:not(.language-switching) body:not(.motion-off) :is(.primary,.membership-primary,.provider-input-action,#v1-profile-button,.native-feedback button[type=submit],.pc-apply):active{transform:none}}
html body .hero-actions .primary{min-height:48px!important;height:auto!important;padding:12px 22px!important;border-radius:var(--wt-r-chip)!important;
  font:600 0.9375rem/1.35 var(--wt-font-text)!important;letter-spacing:0!important;white-space:normal!important;text-align:left;gap:12px!important}
html body .hero-actions .primary svg{flex:none}

/* Art credit: a small caption chip at the hero's foot; the source button is a real target. */
html[lang] body .hero .art-credit{display:inline-flex!important;align-items:center;gap:6px;max-width:min(100%,420px);margin:0!important;padding:0 0 0 14px!important;
  border-radius:var(--wt-r-chip);background:rgba(12,13,16,.8);color:var(--wt-text-2)!important;font:500 0.75rem/1.4 var(--wt-font-text)!important;letter-spacing:0!important;flex-wrap:nowrap!important}
html body .art-credit>span:not(.art-index){min-width:0;padding:6px 0}
html body .art-credit button{flex:none;display:inline-grid!important;place-items:center;width:var(--wt-target);height:var(--wt-target);min-width:var(--wt-target);margin:0!important;padding:0!important;
  border:0;border-radius:var(--wt-r-chip)!important;background:transparent;color:var(--wt-text-2)}
html body .art-credit button::before{content:none!important}
@media (hover:hover){html body .art-credit button:hover{color:var(--wt-accent-hi)}}
html body .art-credit button svg{width:15px;height:15px}
html body .art-credit button:focus-visible{outline-offset:-2px!important}

/* Phones: the whole answer (title, verdict, graph) fits above the dock. */
@media (max-width:899px){
  html body .hero{padding-top:8px!important;row-gap:var(--wt-s5)!important}
  html body .hero h1{margin-bottom:12px!important}
  html body .hero .intro{font-size:0.9375rem!important;margin-bottom:var(--wt-s4)!important;max-width:none!important}
  html[lang=ko] body .hero .intro{font-size:0.9375rem!important}
  html body .hero-actions .primary{min-height:44px!important;padding:10px 20px!important;font-size:0.875rem!important}
}

/* ---------------------------------------------------------------- price card: one still, solid card; no inner boxes */
html body #intelligence.price-panel.glass{background:var(--wt-panel)!important;border:0!important;border-radius:var(--wt-r-card)!important;box-shadow:var(--wt-e2)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible!important;padding:var(--wt-s5) var(--wt-s6) var(--wt-s3)!important;
  height:auto!important;max-height:none!important;opacity:1!important}
/* Still: no pointer tilt, no lift or fade on leave. The first screen simply scrolls; the art behind it never moves. */
html body:not(.motion-off) #intelligence.price-panel.glass,html body #intelligence.price-panel.glass.depth-active,html body .hero>#intelligence{transform:none!important;will-change:auto!important}
html body #intelligence.price-panel.glass.depth-active{box-shadow:var(--wt-e2)!important}
html body .hero>.hero-copy,html body .hero>#intelligence{opacity:1!important;translate:none!important;will-change:auto!important}
@media (hover:hover){html body #intelligence.price-panel.glass:hover{transform:none!important}}
html body #intelligence .price-content{padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;height:auto!important;max-height:none!important}

/* Heading: the game, where the numbers come from, and "next game". */
html body #intelligence .panel-heading{display:flex!important;align-items:center;gap:var(--wt-s3)!important;width:100%;min-height:48px;height:auto!important;
  padding:0 0 var(--wt-s4)!important;margin:0 0 var(--wt-s4)!important;border:0!important;border-bottom:1px solid var(--wt-line)!important;background:none!important;
  color:var(--wt-text)!important;text-align:left;border-radius:0!important}
html body #intelligence .panel-heading img{width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:11px!important}
html body #intelligence .panel-heading>span:not(.sr-only){display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
html body #intelligence .panel-heading strong{font:600 1rem/1.3 var(--wt-font-text)!important;letter-spacing:-.01em!important;color:var(--wt-text)!important;font-variation-settings:normal!important;white-space:normal!important}
html body #intelligence .panel-heading small{font:400 0.8125rem/1.4 var(--wt-font-text)!important;color:var(--wt-text-2)!important;margin:0!important;white-space:normal!important}
html body #intelligence .panel-heading>svg{flex:none;width:18px;height:18px;color:var(--wt-text-3);transition:transform var(--wt-t-ui) var(--wt-ease),color var(--wt-t-ui) var(--wt-ease)}
@media (hover:hover) and (pointer:fine){html body #intelligence .panel-heading:hover>svg{transform:translateX(3px);color:var(--wt-accent)}}
html body #intelligence .panel-heading:focus-visible{outline-offset:2px!important;border-radius:12px!important}

@media (max-width:899px){
  html body #intelligence.price-panel.glass{padding:var(--wt-s4) var(--wt-s4) var(--wt-s2)!important;border-radius:22px!important}
  html body #intelligence .panel-heading{padding-bottom:var(--wt-s3)!important;margin-bottom:var(--wt-s3)!important;min-height:44px}
  html body #intelligence .trend-saving{margin-bottom:var(--wt-s3)!important}
}
/* The signal block. */
html body #intelligence .game-signal{display:flex!important;flex-direction:column;gap:0!important;min-width:0}
html body #intelligence .game-signal>.price-trend{display:flex!important;flex-direction:column;gap:0!important;position:relative;min-width:0;width:100%}
html body #intelligence .price-trend>.signal-kicker{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;margin:0!important}
html body #intelligence .trend-figures{display:grid!important;grid-template-columns:fit-content(62%) minmax(0,1fr);align-items:end;gap:var(--wt-s1) var(--wt-s7)!important;margin:0 0 var(--wt-s3)}
html body #intelligence .trend-figures>div{display:flex!important;flex-direction:column;gap:6px!important;min-width:0}
html body #intelligence .trend-now{font-family:var(--wt-font-display)!important;font-size:clamp(40px,4vw,52px)!important;font-weight:500!important;line-height:1!important;letter-spacing:-.02em!important;
  font-variation-settings:"opsz" 18!important;color:var(--trend)!important;contain:none!important}
html body #intelligence .trend-avg{font-family:var(--wt-font-display)!important;font-size:clamp(24px,2.2vw,28px)!important;font-weight:500!important;line-height:1.05!important;letter-spacing:-.01em!important;
  font-variation-settings:"opsz" 18!important;color:var(--wt-text)!important;opacity:1!important}
html body #intelligence .trend-figures span{display:flex;align-items:baseline;gap:8px;font:400 0.8125rem/1.35 var(--wt-font-text)!important;letter-spacing:0!important;color:var(--wt-text-3)!important;opacity:1!important}
/* Legend marks: the figures name the chart's dot (now) and its dashed line (average). */
html body #intelligence .trend-figures>div>span::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--trend);transform:translateY(-1px)}
html body #intelligence .trend-figures>div+div>span::before{width:14px;height:0;border-radius:0;background:none;border-top:1.5px dashed rgba(255,255,255,.55);transform:translateY(-4px)}
html body #intelligence .trend-verdict{margin:0 0 var(--wt-s1)!important;color:var(--trend)!important;font:600 0.875rem/1.45 var(--wt-font-text)!important;letter-spacing:0!important}
html body #intelligence .trend-saving{margin:0 0 var(--wt-s4)!important;color:var(--wt-text)!important;font:400 0.875rem/1.5 var(--wt-font-text)!important}
html body #intelligence .trend-saving small{display:inline-block;margin-top:2px;color:var(--wt-text-3)!important;font:400 0.8125rem/1.45 var(--wt-font-text)!important}
html[lang=ko] body #intelligence :is(.trend-saving,.trend-verdict){line-height:1.6!important}

/* Chart: range tabs as type, the plot full-bleed in the card, dates as an HTML row under it. */
html body #intelligence .trend-chart{display:flex!important;flex-direction:column;margin:0!important;gap:0!important;min-width:0}
html body #intelligence .price-trend .trend-ranges{order:3;position:static!important;align-self:flex-start;display:flex!important;flex-wrap:nowrap;align-items:stretch;gap:2px!important;max-width:calc(100% + 10px);
  margin:var(--wt-s2) 0 0 -10px;padding:0!important;border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important}
html body #intelligence .price-trend .trend-ranges button{display:block!important;flex:0 1 auto;min-width:var(--wt-target)!important;min-height:var(--wt-target)!important;height:auto!important;
  padding:7px 10px!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;
  color:var(--wt-text-3)!important;font:500 0.8125rem/1.125rem var(--wt-font-text)!important;letter-spacing:0!important;text-align:center;white-space:normal!important;
  transition:color var(--wt-t-ui) var(--wt-ease),background-color var(--wt-t-ui) var(--wt-ease)!important}
@media (pointer:coarse),(hover:none),(max-width:820px){html body #intelligence .price-trend .trend-ranges button{padding:13px 12px!important}}
@media (hover:hover){html body #intelligence .price-trend .trend-ranges button:hover{color:var(--wt-text)!important}}
html body #intelligence .price-trend .trend-ranges button[aria-pressed=true]{color:var(--wt-text)!important;background:rgba(255,255,255,.07)!important}
html body #intelligence .price-trend .trend-ranges button:focus-visible{outline-offset:-2px!important}
html body #intelligence .price-trend .trend-stage{order:1;position:relative;padding:0!important;margin:0!important}
html body #intelligence .price-trend .trend-plot{display:block;width:100%;height:auto!important;max-height:none!important;overflow:visible}
html body #intelligence .price-trend .trend-grid{stroke:#fff!important;stroke-opacity:.08!important;stroke-dasharray:1 5}
html body #intelligence .price-trend .trend-area{opacity:.55}
html body #intelligence .price-trend .trend-line{stroke-width:2.2!important;filter:none!important}
html body #intelligence .price-trend .trend-average{stroke:#fff!important;stroke-opacity:.5!important;stroke-dasharray:3 4!important;stroke-width:1.5!important}
html body #intelligence .price-trend .trend-dot{stroke:#0e0f13!important;stroke-width:2!important}
html body #intelligence .price-trend .trend-halo{fill-opacity:.18}
html body #intelligence .price-trend :is(.trend-now-label,.trend-avg-tag,.trend-tick,.trend-average-label){display:none!important}
html body #intelligence .price-trend .trend-axis{order:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:6px 0 0;color:var(--wt-text-3);font:400 0.75rem/1.35 var(--wt-font-text)}
html body #intelligence .price-trend .trend-axis>span{min-width:0}
html body #intelligence .price-trend .trend-axis>span:nth-child(1){grid-column:1;text-align:left}
html body #intelligence .price-trend .trend-axis>span:nth-child(2){grid-column:2/span 2;text-align:center}
html body #intelligence .price-trend .trend-axis>span:nth-child(3){grid-column:4/span 2;text-align:center}
html body #intelligence .price-trend .trend-axis>span:nth-child(4){grid-column:6;text-align:right}
/* Hover reading: a small dark label that wraps instead of spilling. */
html body #intelligence .price-trend .trend-tip{position:absolute!important;top:0!important;left:0!important;transform:translateX(-50%)!important;display:flex!important;flex-wrap:wrap;align-items:baseline;
  gap:2px 8px;max-width:100%;white-space:normal!important;padding:7px 11px!important;border-radius:12px!important;background:#1b1c22!important;border:0!important;
  box-shadow:0 12px 30px rgba(0,0,0,.55)!important;pointer-events:none;z-index:3}
html body #intelligence .price-trend .trend-tip[hidden]{display:none!important}
html body #intelligence .price-trend .trend-tip b{font:600 0.875rem/1.3 var(--wt-font-text)!important;color:var(--trend)!important}
html body #intelligence .price-trend .trend-tip span{font:400 0.8125rem/1.35 var(--wt-font-text)!important;color:var(--wt-text)!important}
html body #intelligence .price-trend .trend-tip small{font:400 0.75rem/1.35 var(--wt-font-text)!important;color:var(--wt-text-2)!important}

/* Looking back: three readings on one line, separated by space only. */
html body #intelligence .price-trend .trend-back{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:var(--wt-s3)!important;list-style:none;
  margin:var(--wt-s4) 0 0!important;padding:var(--wt-s4) 0 0!important;border-top:1px solid var(--wt-line)!important}
html body #intelligence .price-trend .trend-back li{display:flex!important;flex-direction:column;justify-content:flex-start;gap:3px!important;min-width:0}
html body #intelligence .price-trend .trend-back span{font:400 0.75rem/1.35 var(--wt-font-text)!important;color:var(--wt-text-3)!important}
html body #intelligence .price-trend .trend-back b{font:500 0.9375rem/1.3 var(--wt-font-text)!important;color:var(--wt-text)!important;font-variant-numeric:lining-nums tabular-nums}
html body #intelligence .price-trend .trend-back-up b{color:var(--wt-up)!important}
html body #intelligence .price-trend .trend-back-down b{color:var(--wt-down)!important}
html body #intelligence .price-trend .trend-preview-note{margin:var(--wt-s3) 0 0!important;color:var(--wt-text-3)!important;font:400 0.75rem/1.5 var(--wt-font-text)!important;opacity:1!important}
html[lang=ko] body #intelligence .price-trend .trend-preview-note{line-height:1.6!important}

/* The card's one action, as its closing row. */
html body #intelligence [data-signal-conditions]{display:flex!important;align-items:center;justify-content:space-between;gap:var(--wt-s3);width:100%;min-height:var(--wt-target)!important;height:auto!important;
  margin:var(--wt-s3) 0 0!important;padding:10px 6px 10px 0!important;border:0!important;border-top:1px solid var(--wt-line)!important;border-radius:0!important;background:none!important;
  color:var(--wt-accent)!important;font:500 0.875rem/1.4 var(--wt-font-text)!important;text-align:left;white-space:normal!important;opacity:1!important}
html body #intelligence [data-signal-conditions]>span{flex:0 1 auto;min-width:0;transition:transform var(--wt-t-ui) var(--wt-ease)}
@media (hover:hover) and (pointer:fine){html body #intelligence [data-signal-conditions]:hover{color:var(--wt-accent-hi)!important}html body #intelligence [data-signal-conditions]:hover>span{transform:translateX(3px)}}
html body #intelligence [data-signal-conditions]:focus-visible{outline-offset:2px!important;border-radius:8px!important}

/* Loading / error states of the card. */
html body #intelligence .signal-status{color:var(--wt-text-2)!important;font:400 0.875rem/1.5 var(--wt-font-text)!important}
html body #intelligence .signal-failure .signal-retry{display:inline-flex!important;align-items:center;gap:8px;min-height:var(--wt-target)!important;padding:8px 16px!important;border:0!important;
  border-radius:var(--wt-r-chip)!important;background:rgba(255,255,255,.07)!important;color:var(--wt-text)!important;font:500 0.875rem/1.3 var(--wt-font-text)!important;opacity:1!important}
html body #intelligence .signal-failure .signal-retry *{color:inherit!important;opacity:1!important}

/* ---------------------------------------------------------------- dock: same geometry (tests pin it), calmer glass, one gold lens */
@media not all and (max-height:500px) and (min-width:521px){
  html body .site-header .header-navigation{background:rgba(18,19,24,.86)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -12px rgba(0,0,0,.7)!important;
    -webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important}
  html body .site-header .header-navigation>nav a,html body .site-header .header-navigation .search-button{color:var(--wt-text-2)!important;font:500 0.6875rem/1.15 var(--wt-font-text)!important}
  html body .site-header .header-navigation>nav a.active{color:var(--wt-accent)!important}
}
html body .site-header nav .nav-indicator{border:0!important;background:rgba(228,201,166,.1)!important;box-shadow:inset 0 0 0 1px rgba(228,201,166,.22),inset 0 1px 0 rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .site-header nav .nav-indicator::after{content:none!important;display:none!important}
html body .site-header nav a.active .nav-icon{color:var(--wt-accent)!important}
@media (hover:none),(pointer:coarse){html body .site-header .header-navigation{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(20,21,26,.97)!important}}
@media (max-height:500px) and (min-width:521px){
  html body .site-header .header-navigation>:is(nav,.header-actions){background:rgba(18,19,24,.9)!important}
}

/* ---------------------------------------------------------------- motion off / reduced */
@media not all{html body :is(.site-header *,#intelligence *,.art-credit *){transition-duration:1ms!important}}
html body.motion-off :is(.site-header *,#intelligence *,.art-credit *){transition-duration:1ms!important}

/* >>> step2: game row + deals */
/* =====================================================================================================================
   STEP 2: GAME ROW + DEALS (2026-10-21). Owner: "change the whole UI ... absolutely bulletproof ... every single element space
   in cards". Visual only: no markup, id, class or data-* attribute changed.

   Why a cascade layer. Five older layers style these components (atelier alone with ~400 "!important" two-class selectors).
   Everything below sits in @layer wt-deals and every declaration is !important: an important declaration in a layer beats
   every unlayered one regardless of specificity, so this block owns the subtree without a specificity race. The stress
   harness's own text-hiding layer is inserted first in <head>, so it still wins over this one (as it must).
   Never set here: opacity / translate / transform on .deal-card's direct children, .language-content, #games, #deals,
   .motion-enter elements. app.js and smooth.js animate those with WAAPI, and an !important value would freeze them.

   Grammar
   - No boxes inside a tile. A tile is one quiet surface; inside it, grouping is space, weight and one hairline.
   - Every tile is the same machine: identity row / tab row / panel. The deal grid is a grid of row tracks and each tile
     takes three of them through subgrid, so in any row of tiles the identity rows, the tab rows and the panels share one
     height: tiles are equal, first lines of every slot sit on one baseline, and nothing is clipped (tracks grow).
   - All panels of a tile (and all events of a carousel) are stacked in one grid cell. Switching a tab or an event never
     changes a tile's size, so nothing below it moves.
   - A panel's closing action rests on the tile's bottom edge, so actions line up across a row.
   - Event carousels are a pager under the event (numbered chapters that wrap), never a sideways scroller.
   - Champagne is reserved for the selected state and for links. No mono type, no eyebrows, no capitals.
   ===================================================================================================================== */
@layer wt-deals{

/* ---------------------------------------------------------------- 0. ownership: clear the older layers' decoration */
#games :where(*):not(.sr-only,svg,svg *,img,input,select,.provider-logo-tile,.provider-logo-tile *,.deal-skeleton *,.wt-game-lens,.wt-game-lens *,wt-glass,wt-glass *,.wt-glass-gl),
#deals :where(*):not(.sr-only,svg,svg *,img,input,select,.provider-logo-tile,.provider-logo-tile *,.deal-skeleton *,template *,wt-glass,wt-glass *,.wt-glass-gl){
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;
  margin:0!important;padding:0!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;height:auto!important;width:auto!important;aspect-ratio:auto!important;
  overflow:visible!important;text-overflow:clip!important;-webkit-line-clamp:unset!important;
  letter-spacing:normal!important;text-transform:none!important;font-style:normal!important;text-decoration:none!important;
  font-family:inherit!important;font-feature-settings:normal!important;font-variation-settings:normal!important;white-space:normal!important;flex-shrink:1!important;flex-wrap:nowrap!important;columns:auto!important;
  will-change:auto!important}
#games :where(*):not(.game-card,.section-copy,.motion-enter,.language-content,svg,svg *),
#deals :where(*):not(.deal-card,.section-heading,.motion-enter,.language-content,svg,svg *,.deal-skeleton,.deal-skeleton *,.carrier-panel,.promotion-slide){
  transition:none!important}
#deals .deal-card :where(*):not(svg,svg *,.deal-skeleton *){animation:none!important}
#games :where(*,*::before,*::after),#deals :where(*,*::before,*::after){box-sizing:border-box!important}
#games :where(*)::before,#games :where(*)::after,
#deals :where(*):not(.source-title,[data-alt],.deal-skeleton *)::before,#deals :where(*):not(.source-title,.deal-skeleton *)::after{content:none!important}
#games,#deals{font-family:var(--wt-font-text)!important;font-variant-numeric:lining-nums tabular-nums!important;overflow-wrap:anywhere!important;color:var(--wt-text)!important}
#games :where(*),#deals :where(*){overflow-wrap:anywhere!important;font-variant-numeric:lining-nums tabular-nums!important}
html[lang=ko] #games,html[lang=ko] #deals{word-break:keep-all!important;line-height:1.6!important}
html:not([lang=ko]) #games,html:not([lang=ko]) #deals{line-height:1.5!important}
#deals [hidden]:not(.carrier-panel,.promotion-slide){display:none!important}
#deals :is(h2,h3,h4,p,dl,dd,dt,ul,li,table){font-family:var(--wt-font-text)!important}
#games :is(button,a),#deals :is(button,a){font:inherit!important;color:inherit!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important}
#games :is(button,a,input,select):focus-visible,#deals :is(button,a,input,select,[tabindex]):focus-visible{outline:2px solid var(--wt-accent)!important;outline-offset:3px!important}
#games .eyebrow,#deals .section-heading .eyebrow{display:none!important}

/* ---------------------------------------------------------------- 1. section headings (one voice for both sections) */
#games .section-copy h2,#deals .section-heading h2{
  font-family:var(--wt-font-display)!important;font-weight:500!important;font-size:clamp(26px,2.1vw + 12px,36px)!important;line-height:1.15!important;letter-spacing:-.012em!important;
  color:var(--wt-text)!important;font-variation-settings:'opsz' 48!important;text-wrap:balance!important}
html[lang=ko] #games .section-copy h2,html[lang=ko] #deals .section-heading h2{font-family:var(--wt-font-text)!important;font-weight:600!important;font-size:clamp(23px,1.6vw + 12px,30px)!important;letter-spacing:-.02em!important;line-height:1.3!important}
#games .section-copy>p:not(.eyebrow),#deals .section-heading>div>p:not(.eyebrow){margin-top:10px!important;font-size:0.9375rem!important;line-height:1.55!important;color:var(--wt-text-3)!important;max-width:46ch!important;text-wrap:pretty!important}
html[lang=ko] :is(#games .section-copy>p,#deals .section-heading>div>p){line-height:1.6!important}

/* Text links (accent, never boxed) */
#games .text-button,
#deals :is(.carrier-text-action,.promotion-details-link,.provider-input-action,.provider-program-link>button,.text-button){
  display:inline-flex!important;align-items:center!important;gap:6px!important;align-self:flex-start!important;max-width:100%!important;min-height:var(--wt-target)!important;
  font-size:0.875rem!important;font-weight:600!important;line-height:1.4!important;color:var(--wt-accent)!important;text-align:left!important;
  text-decoration:underline!important;text-decoration-color:transparent!important;text-underline-offset:4px!important;text-decoration-thickness:1px!important}
@media (hover:hover){#games .text-button:hover,#deals :is(.carrier-text-action,.promotion-details-link,.provider-input-action,.provider-program-link>button,.text-button):hover{text-decoration-color:currentColor!important;color:var(--wt-accent-hi)!important}}
#deals :is(.carrier-text-action,.promotion-details-link,.provider-input-action,.provider-program-link>button)>span[aria-hidden=true]{flex:0 1 auto!important;min-width:0!important;display:inline-block!important;transition:translate var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){#deals :is(.carrier-text-action,.promotion-details-link,.provider-input-action,.provider-program-link>button):hover>span[aria-hidden=true]{translate:2px -1px!important}}

/* ---------------------------------------------------------------- 1b. the plate
   Below the first screen the key art gives way to ink. With motion on, atelier.js already recedes the art by here; with reduced motion
   (or the footer toggle) the art stays at full strength, so the two sections carry their own full-bleed ink plate. It is painted with
   border-image outset, which is ink overflow: it reaches both screen edges without ever widening the page. The game row fades in
   inside its own top padding, so nothing of the hero above is covered. */
#games.games-section,#deals.deals-section{position:relative!important;isolation:isolate!important}
#games.games-section::before,#deals.deals-section::before,#deals.deals-section::after{content:''!important;position:absolute!important;z-index:-1!important;pointer-events:none!important;left:0!important;right:0!important}
/* Solid from its first pixel (owner 2026-10-22, "why is there a line in the middle"): the hero's own fade already ends on the canvas, so a
   second fade here let a strip of art show between them. */
#games.games-section::before{top:-1px!important;bottom:0!important;border-image:linear-gradient(var(--wt-canvas),var(--wt-canvas)) fill 0 / 0 / 0 100vmax!important}
#deals.deals-section::before{top:-1px!important;bottom:0!important;border-image:linear-gradient(var(--wt-canvas),var(--wt-canvas)) fill 0 / 0 / 0 100vmax!important}
#deals.deals-section::after{top:100%!important;height:clamp(40px,4vw,64px)!important;border-image:linear-gradient(var(--wt-canvas),var(--wt-canvas)) fill 0 / 0 / 0 100vmax!important}

/* ---------------------------------------------------------------- 2. game row */
#games.games-section{overflow:visible!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)!important;align-items:center!important;gap:24px 56px!important;
  padding:clamp(40px,4vw,64px) 0 clamp(16px,2vw,28px)!important;margin:0!important}
#games .section-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important}
#games .section-copy .text-button{margin-top:6px!important}
#games .game-cards{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;align-items:stretch!important;min-width:0!important}
#games .game-card{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;min-width:0!important;
  padding:12px 4px 12px!important;border-radius:16px!important;text-align:center!important;position:relative!important;transform:none!important;cursor:pointer!important}
#games .game-card img{display:block!important;flex:none!important;width:min(52px,100%)!important;height:auto!important;aspect-ratio:1!important;border-radius:15px!important;object-fit:cover!important;opacity:.62!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.1)!important;transition:opacity var(--wt-t-surface) var(--wt-ease),scale var(--wt-t-surface) var(--wt-ease)!important}
#games .game-card strong{display:block!important;max-width:100%!important;font-size:0.8125rem!important;font-weight:500!important;line-height:1.35!important;color:var(--wt-text-3)!important}
@media (hover:hover){#games .game-card:hover img{opacity:.9!important}}
@media (hover:hover){#games .game-card:hover strong{color:var(--wt-text-2)!important}}
#games .game-card:active img{scale:.96!important}
/* The chosen game: full colour, a champagne ring set off by a hairline of page ink. */
#games .game-card.selected img,#games .game-card[aria-pressed=true] img{opacity:1!important;box-shadow:0 0 0 2px var(--wt-canvas),0 0 0 3.5px var(--wt-accent)!important}
#games .game-card.selected strong,#games .game-card[aria-pressed=true] strong{color:var(--wt-text)!important;font-weight:600!important}
#games .game-card:focus-visible{outline-offset:0!important}

/* ---------------------------------------------------------------- 3. deals heading + controls */
#deals.deals-section{overflow:visible!important;background:none!important;border:0!important;box-shadow:none!important;padding:clamp(24px,3vw,40px) 0 0!important;margin:0 0 clamp(40px,4vw,64px)!important}
#deals .section-heading{display:flex!important;flex-wrap:wrap!important;align-items:flex-end!important;justify-content:space-between!important;gap:20px 40px!important;margin:0 0 28px!important}
#deals .section-heading>div:first-child{flex:1 1 340px!important;min-width:0!important}
#deals .refresh-cluster{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-end!important;gap:4px 8px!important;flex:0 1 auto!important;min-width:0!important;max-width:100%!important}
#deals .refresh-cluster>.freshness{flex:1 0 100%!important;contain:inline-size!important;justify-content:flex-end!important;text-align:right!important}
#deals :is(#v1-profile-button,.refresh-button){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:var(--wt-target)!important;max-width:100%!important;
  padding:calc((var(--wt-target) - 20px)/2) 18px!important;border-radius:999px!important;font-size:0.875rem!important;font-weight:600!important;line-height:1.25rem!important;text-align:left!important}
#deals #v1-profile-button{background:var(--wt-raise)!important;color:var(--wt-text)!important;box-shadow:var(--wt-e1)!important}
@media (hover:hover){#deals #v1-profile-button:hover{background:#22232a!important}}
#deals #v1-profile-button svg{flex:none!important;width:16px!important;height:16px!important;color:var(--wt-accent)!important;transition:translate var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){#deals #v1-profile-button:hover svg{translate:2px 0!important}}
#deals .refresh-button{color:var(--wt-text-2)!important;padding-inline:12px!important}
@media (hover:hover){#deals .refresh-button:hover{color:var(--wt-text)!important}}
#deals .refresh-button svg{flex:none!important;width:16px!important;height:16px!important}
#deals .refresh-button>span[data-alt]{display:inline-block!important;min-width:0!important}
#deals .refresh-button>span[data-alt]::before{content:attr(data-alt)!important;display:block!important;height:0!important;overflow:hidden!important;visibility:hidden!important;white-space:normal!important}
#deals .refresh-button:is([aria-disabled=true],[aria-busy=true]){color:var(--wt-text-3)!important;cursor:default!important}
#deals .freshness{display:inline-flex!important;align-items:center!important;min-height:var(--wt-target)!important;font-size:0.75rem!important;line-height:1.5!important;color:var(--wt-text-3)!important;
  text-decoration:underline!important;text-decoration-color:rgba(255,255,255,.18)!important;text-underline-offset:4px!important}
@media (hover:hover){#deals .freshness:hover{color:var(--wt-text-2)!important;text-decoration-color:currentColor!important}}

#deals .deal-toolbar{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:12px 24px!important;margin:0!important}
#deals .filter-tabs{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;gap:4px!important;min-width:0!important;flex:1 1 auto!important}
#deals .filter-tabs>button{flex:0 1 auto!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;min-width:0!important;max-width:100%!important;
  padding:calc((var(--wt-target) - 20px)/2) 16px!important;border-radius:calc(var(--wt-target)/2)!important;
  font-size:0.875rem!important;font-weight:500!important;line-height:1.25rem!important;color:var(--wt-text-3)!important;text-align:center!important}
@media (hover:hover){#deals .filter-tabs>button:hover{color:var(--wt-text)!important}}
#deals .filter-tabs>button[aria-pressed=true]{background:var(--wt-raise)!important;color:var(--wt-text)!important;box-shadow:var(--wt-e1)!important}
#deals .platform-select{display:inline-flex!important;align-items:center!important;gap:12px!important;min-width:0!important;max-width:100%!important;font-size:0.8125rem!important;line-height:1.4!important;color:var(--wt-text-3)!important}
#deals .platform-select select{
  -webkit-appearance:none!important;appearance:none!important;min-width:0!important;max-width:100%!important;min-height:var(--wt-target)!important;margin:0!important;
  padding:0 40px 0 16px!important;border:0!important;border-radius:12px!important;background-color:var(--wt-raise)!important;box-shadow:var(--wt-e1)!important;
  background-image: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 1.5l5 5 5-5' fill='none' stroke='%23e4c9a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:12px 8px!important;
  font-family:var(--wt-font-text)!important;font-size:0.875rem!important;font-weight:500!important;color:var(--wt-text)!important;cursor:pointer!important;text-overflow:ellipsis!important}
@media (hover:hover){#deals .platform-select select:hover{background-color:#22232a!important}}
#deals .platform-select select option{background:#15161b!important;color:var(--wt-text)!important}

#deals .feed-context{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:4px 24px!important;margin:12px 0 20px!important;
  padding:4px 0 0!important;border-top:1px solid var(--wt-line)!important}
#deals .feed-context>span{flex:1 1 320px!important;min-width:0!important;font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-3)!important}
#deals .feed-context>label{flex:0 1 auto!important;display:inline-flex!important;align-items:center!important;gap:10px!important;min-height:var(--wt-target)!important;font-size:0.875rem!important;line-height:1.4!important;color:var(--wt-text-2)!important;cursor:pointer!important}
#deals #show-ended{-webkit-appearance:none!important;appearance:none!important;flex:none!important;width:18px!important;height:18px!important;margin:0!important;border-radius:5px!important;
  border:1.5px solid var(--wt-text-3)!important;background:transparent no-repeat center/12px 10px!important;cursor:pointer!important;transition:background-color var(--wt-t-fast) var(--wt-ease)!important}
#deals #show-ended:checked{border-color:var(--wt-accent)!important;background-color:var(--wt-accent)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' fill='none' stroke='%2317130e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
#deals #show-ended:focus-visible{outline-offset:3px!important}

#deals .source-footnote{margin:4px 0 0!important;max-width:80ch!important;font-size:0.75rem!important;line-height:1.6!important;color:var(--wt-text-3)!important}
#deals .provider-load-notice{grid-column:1/-1!important;margin:0 0 16px!important;font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-3)!important}

/* ---------------------------------------------------------------- 4. the deal grid */
#deals #deal-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;column-gap:16px!important;row-gap:0!important;grid-auto-rows:auto!important;align-items:stretch!important;align-content:start!important;grid-auto-flow:row!important}
#deals #deal-grid>:is(.feed-empty,.provider-load-notice,.sr-only){grid-column:1/-1!important}
@media (min-width:681px){
  #deals #deal-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #deals #deal-grid>.deal-card{grid-column:span 2!important}
  #deals #deal-grid>.deal-card:nth-child(odd of .deal-card):last-of-type{grid-column:2/span 2!important}
}
@media (min-width:1000px){
  #deals #deal-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  #deals #deal-grid>.deal-card{grid-column:span 2!important}
  #deals #deal-grid>.deal-card:nth-child(odd of .deal-card):last-of-type{grid-column:span 2!important}
  #deals #deal-grid>.deal-card:nth-child(3n+1 of .deal-card):nth-last-child(2 of .deal-card){grid-column:2/span 2!important}
  #deals #deal-grid>.deal-card:nth-child(3n+1 of .deal-card):nth-last-child(1 of .deal-card){grid-column:3/span 2!important}
}

/* The tile: one surface, three shared row tracks (identity / tabs / panel). */
#deals #deal-grid>.deal-card{
  --pad:24px!important;
  grid-row:span 3!important;display:grid!important;grid-template-rows:subgrid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:0!important;align-content:stretch!important;
  position:relative!important;min-width:0!important;width:auto!important;max-width:none!important;height:auto!important;aspect-ratio:auto!important;overflow:visible!important;
  margin:0 0 16px!important;padding:var(--pad)!important;border:0!important;border-radius:var(--wt-r-tile)!important;
  background:var(--wt-surface)!important;box-shadow:var(--wt-e1)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;cursor:auto!important}
@media (max-width:680px){#deals #deal-grid>.deal-card{--pad:20px!important;margin-bottom:12px!important}}
@supports not (grid-template-rows:subgrid){#deals #deal-grid>.deal-card{display:flex!important;flex-direction:column!important}#deals #deal-grid>.deal-card>.carrier-panels{flex:1 1 auto!important}}
#deals #deal-grid>.deal-card::before,#deals #deal-grid>.deal-card::after,#games .game-card::before,#games .game-card::after,#games.games-section::after{content:none!important}
@media (hover:hover){#deals button:not(.language-content):hover,#games button:not(.language-content):hover{opacity:1!important}}
#deals #deal-grid>.deal-card>.deal-top{grid-row:1!important}
#deals #deal-grid>.deal-card>.carrier-main-tabs{grid-row:2!important}
#deals #deal-grid>.deal-card>.carrier-panels{grid-row:3!important}
#deals #deal-grid>.deal-card.deal-skeleton{display:flex!important;flex-direction:column!important;gap:16px!important}

/* Identity row */
#deals .deal-card>.deal-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;min-width:0!important;margin:0 0 20px!important}
#deals .deal-card .provider-identity{display:flex!important;align-items:flex-start!important;gap:12px!important;flex:1 1 0!important;min-width:0!important}
#deals .deal-card .provider-logo-tile{flex:none!important;width:40px!important;height:40px!important;margin:0!important;border-radius:11px!important;overflow:hidden!important}
/* SKT and LG U+ are typeset marks. The letters in the markup are aria-hidden decoration; the mark is drawn from fixed
   generated text so it is identical whatever text ends up in the node (it can never reflow, wrap or spill). */
#deals .deal-card .provider-logo-tile:is(.provider-skt,.provider-lg){display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;
  background:#fff!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)!important;font-size:0!important;line-height:0!important;color:transparent!important;
  font-family:Arial,'Helvetica Neue',Helvetica,sans-serif!important;font-weight:800!important}
#deals .deal-card .provider-logo-tile:is(.provider-skt,.provider-lg)>span{display:contents!important;font-size:0!important}
#deals .deal-card .provider-logo-tile.provider-skt::before{content:'SK'!important;font-size:0.9375rem!important;line-height:1!important;letter-spacing:-.6px!important;color:#e51b2b!important}
#deals .deal-card .provider-logo-tile.provider-skt::after{content:'T'!important;font-size:0.9375rem!important;line-height:1!important;letter-spacing:-.6px!important;color:#ef7b20!important}
#deals .deal-card .provider-logo-tile.provider-lg::before{content:'U'!important;font-size:1.625rem!important;line-height:1!important;letter-spacing:-1px!important;color:#bd0065!important}
#deals .deal-card .provider-logo-tile.provider-lg::after{content:'+'!important;font-size:1.125rem!important;line-height:1!important;letter-spacing:-1px!important;color:#bd0065!important;align-self:flex-start!important;margin-top:8px!important}
#deals .deal-card .deal-merchant{display:flex!important;flex-direction:column!important;min-width:0!important;font-size:0.9375rem!important;font-weight:600!important;line-height:1.25rem!important;color:var(--wt-text)!important}
#deals .deal-card .deal-merchant small{display:block!important;margin-top:2px!important;font-size:0.75rem!important;font-weight:400!important;line-height:1.125rem!important;color:var(--wt-text-3)!important}
#deals .deal-card .status-badge{flex:0 1 auto!important;max-width:45%!important;min-width:0!important;font-size:0.75rem!important;font-weight:500!important;line-height:1.25rem!important;color:var(--wt-text-3)!important;text-align:right!important}
#deals .deal-card[data-carrier-workspace=kt] .status-badge{color:var(--wt-text-2)!important}

/* Tab row: equal columns, top-set labels (a two-line label never lowers its neighbours' first line), one champagne bar. */
#deals .deal-card>.carrier-main-tabs{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:0!important;
  position:relative!important;margin:0 0 22px!important;border-bottom:1px solid var(--wt-line)!important}
#deals .deal-card>.carrier-main-tabs:has(>[role=tab]:only-child){grid-auto-columns:minmax(0,max-content)!important}
#deals .deal-card>.carrier-main-tabs>button{display:flex!important;align-items:flex-start!important;justify-content:center!important;position:relative!important;min-width:var(--wt-target)!important;
  padding:calc((var(--wt-target) - 20px)/2) 6px!important;font-size:0.875rem!important;font-weight:500!important;line-height:1.25rem!important;color:var(--wt-text-3)!important;text-align:center!important}
#deals .deal-card>.carrier-main-tabs>button:only-child{justify-content:flex-start!important;padding-inline:0!important}
@media (hover:hover){#deals .deal-card>.carrier-main-tabs>button:hover{color:var(--wt-text-2)!important}}
#deals .deal-card>.carrier-main-tabs>button[aria-selected=true]{color:var(--wt-text)!important;font-weight:600!important}
#deals .deal-card>.carrier-main-tabs>button::after{content:''!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:2px!important;border-radius:2px!important;
  background:var(--wt-accent)!important;opacity:0!important;scale:.4 1!important;transition:opacity var(--wt-t-ui) var(--wt-ease),scale var(--wt-t-surface) var(--wt-ease)!important}
#deals .deal-card>.carrier-main-tabs>button[aria-selected=true]::after{opacity:1!important;scale:1 1!important}
#deals .deal-card>.carrier-main-tabs>button:focus-visible{outline-offset:-2px!important;border-radius:8px!important}

/* Panels: stacked in one cell; the tallest decides the tile, switching never resizes it. */
#deals .deal-card>.carrier-panels{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;align-content:stretch!important;align-items:stretch!important;min-width:0!important}
#deals .deal-card .carrier-panel{grid-area:1/1!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;min-width:0!important;
  font-size:0.875rem!important;line-height:1.55!important;color:var(--wt-text-2)!important;
  visibility:visible!important;opacity:1!important;translate:0 0!important;transition:opacity var(--wt-t-surface) var(--wt-ease),translate var(--wt-t-surface) var(--wt-ease),visibility 0s!important}
#deals .deal-card .carrier-panel[hidden]{display:flex!important;visibility:hidden!important;opacity:0!important;translate:0 6px!important;pointer-events:none!important;
  transition:opacity var(--wt-t-fast) ease-out,translate 0s var(--wt-t-fast),visibility 0s var(--wt-t-fast)!important}
#deals .deal-card .carrier-panel>*{flex:none!important;min-width:0!important}
#deals .deal-card .carrier-panel>h3{order:-2!important}
#deals .deal-card .carrier-panel>.membership-kicker{order:-1!important;margin-top:-8px!important}
/* The panel's closing action sits on the tile's bottom edge. */
#deals .deal-card .carrier-panel>:is(.carrier-text-action,.carrier-closed-actions,.provider-input-action,.carrier-event-list+.carrier-text-action):not(:has(~ :not(template,.provider-program-link))){margin-top:auto!important}
#deals .deal-card .carrier-panel>.provider-input-action{margin-top:auto!important}

/* Text roles inside a panel */
#deals .deal-card h3{font-size:1.0625rem!important;font-weight:600!important;line-height:1.35!important;color:var(--wt-text)!important;letter-spacing:-.005em!important;text-wrap:pretty!important}
#deals .deal-card h4{font-size:0.875rem!important;font-weight:600!important;line-height:1.45!important;color:var(--wt-text)!important}
#deals .deal-card :is(.carrier-panel-note,.membership-limit,.membership-scope,.points-not-cash,.promotion-period,.play-points-caption,.play-points-boundary){font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-3)!important}
html[lang=ko] #deals .deal-card :is(.carrier-panel,.carrier-panel-note,.membership-limit,.membership-scope,.points-not-cash,.promotion-period,p){line-height:1.6!important}
#deals .deal-card .source-title{display:block!important;font-size:0.75rem!important;line-height:1.55!important;color:var(--wt-text-3)!important}
#deals .deal-card small{font-size:0.75rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
#deals .deal-card .membership-kicker{font-size:0.75rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
#deals .deal-card .membership-description{font-size:0.875rem!important;color:var(--wt-text-2)!important}

/* Headline figure + facts (SKT benefits) */
#deals .deal-card .carrier-key-facts{display:grid!important;grid-template-columns:minmax(0,auto) minmax(0,1fr)!important;gap:12px 28px!important;align-items:start!important}
#deals .deal-card .carrier-rate{display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important}
#deals .deal-card .carrier-rate strong{display:block!important;font-family:var(--wt-font-display)!important;font-size:3.25rem!important;font-weight:500!important;line-height:1!important;letter-spacing:-.02em!important;
  color:var(--wt-text)!important;font-variation-settings:'opsz' 18!important}
#deals .deal-card .carrier-rate strong span{font-size:.5em!important;margin-left:2px!important;letter-spacing:0!important}
#deals .deal-card .carrier-rate small{max-width:16ch!important}
#deals .deal-card :is(.carrier-facts,.membership-facts){display:grid!important;gap:12px!important;min-width:0!important}
#deals .deal-card .membership-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 20px!important}
#deals .deal-card :is(.carrier-facts,.membership-facts)>div{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
#deals .deal-card :is(.carrier-facts,.membership-facts) dt{font-size:0.75rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
#deals .deal-card .carrier-facts dd{font-size:1rem!important;font-weight:600!important;line-height:1.35!important;color:var(--wt-text)!important}
#deals .deal-card .membership-facts dd{font-size:0.875rem!important;line-height:1.45!important;color:var(--wt-text)!important}

/* Related plan: one hairline, no box */
#deals .deal-card .carrier-related-plan{display:flex!important;flex-direction:column!important;gap:6px!important;padding-top:16px!important;border-top:1px solid var(--wt-line)!important}
#deals .deal-card .carrier-related-plan>p{font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}
#deals .deal-card .carrier-related-plan>p.carrier-panel-note{color:var(--wt-text-3)!important}
#deals .deal-card .carrier-related-plan>.carrier-text-action{margin-top:2px!important}

/* Calculated / headline values */
#deals .deal-card .carrier-calculation-output{display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important}
#deals .deal-card .carrier-calculation-output strong{display:block!important;font-size:1.625rem!important;font-weight:600!important;line-height:1.25!important;letter-spacing:-.015em!important;color:var(--wt-text)!important}
#deals .deal-card .carrier-calculation-output p{font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}
#deals .deal-card .carrier-calculation-output .source-title{margin-top:4px!important}
#deals .deal-card .carrier-field{display:flex!important;flex-direction:column!important;gap:8px!important;font-size:0.8125rem!important;line-height:1.5!important;color:var(--wt-text-2)!important}
#deals .deal-card .carrier-field input{display:block!important;width:100%!important;min-width:0!important;height:48px!important;margin:0!important;padding:0 16px!important;border:1px solid var(--wt-line-2)!important;border-radius:12px!important;
  background:var(--wt-raise)!important;box-shadow:none!important;color:var(--wt-text)!important;font-family:var(--wt-font-text)!important;font-size:1.0625rem!important;font-weight:500!important;
  font-variant-numeric:lining-nums tabular-nums!important;caret-color:var(--wt-accent)!important;-webkit-appearance:none!important;appearance:none!important}
#deals .deal-card .carrier-field input::placeholder{color:#8d8a84!important;opacity:1!important}
@media (hover:hover){#deals .deal-card .carrier-field input:hover{border-color:rgba(255,255,255,.24)!important}}
#deals .deal-card .carrier-field input:focus-visible{outline:2px solid var(--wt-accent)!important;outline-offset:2px!important;border-color:transparent!important}

/* Empty / ended states: a line of weight, no box */
#deals .deal-card :is(.carrier-empty,.carrier-closed){display:flex!important;flex-direction:column!important;gap:4px!important}
#deals .deal-card :is(.carrier-empty,.carrier-closed)>strong{font-size:0.9375rem!important;font-weight:600!important;line-height:1.45!important;color:var(--wt-text)!important}
#deals .deal-card .carrier-empty>p{font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-3)!important}
#deals .deal-card .carrier-closed>p{font-size:0.875rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}
#deals .deal-card .carrier-closed>strong{display:flex!important;align-items:center!important;gap:10px!important}
#deals .deal-card .carrier-closed>strong::before{content:''!important;flex:none!important;width:7px!important;height:7px!important;border-radius:50%!important;box-shadow:inset 0 0 0 1.5px var(--wt-text-3)!important}
#deals .deal-card .carrier-closed-actions{display:flex!important;flex-wrap:wrap!important;gap:0 24px!important}

/* Rows that open a detail sheet (store events, Epic, SKT events): text left, arrow right, the row is the target. */
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button){
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:4px 16px!important;align-items:start!important;width:100%!important;max-width:100%!important;
  min-height:var(--wt-target)!important;color:var(--wt-text)!important;font-weight:400!important;text-decoration:none!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button)>span:first-child{display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button) strong{display:block!important;font-size:1.0625rem!important;font-weight:600!important;line-height:1.35!important;color:var(--wt-text)!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button) small{display:block!important;font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-3)!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button) .source-title{font-size:0.75rem!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button)>span[aria-hidden=true]{color:var(--wt-accent)!important;line-height:1.5rem!important}
@media (hover:hover){#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button):hover strong{color:var(--wt-accent-hi)!important}}
#deals .deal-card .carrier-event-list{display:flex!important;flex-direction:column!important;gap:12px!important}
#deals .deal-card .carrier-event-list>button>span{font-size:0.8125rem!important;color:var(--wt-text-3)!important}
#deals .deal-card .store-event-meta{display:block!important}
#deals .deal-card .store-event-sep{margin:0 .3em 0 0!important}
#deals .deal-card .store-offer-condition{font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}

/* Event carousels: event first, then a wrapping pager of numbered chapters. */
#deals .deal-card .carrier-panel>[data-promotion-company]{display:contents!important}
#deals .deal-card .promotion-pages{order:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;min-width:0!important;min-height:0!important}
#deals .deal-card .promotion-slide{grid-area:1/1!important;display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important;
  visibility:visible!important;opacity:1!important;transition:opacity var(--wt-t-surface) var(--wt-ease),visibility 0s!important}
#deals .deal-card .promotion-slide[hidden]{display:flex!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;transition:opacity var(--wt-t-fast) ease-out,visibility 0s var(--wt-t-fast)!important}
#deals .deal-card .promotion-slide>h3{margin-bottom:2px!important}
#deals .deal-card .promotion-value{display:block!important;font-size:1.5rem!important;font-weight:600!important;line-height:1.3!important;letter-spacing:-.01em!important;color:var(--wt-text)!important}
#deals .deal-card .promotion-qualifier{font-size:0.8125rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}
#deals .deal-card .promotion-slide>.promotion-details-link{margin-top:4px!important}
#deals .deal-card .promotion-event-tabs{order:2!important;margin-top:auto!important;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,124px),1fr))!important;
  align-items:stretch!important;gap:0 16px!important;border-top:1px solid var(--wt-line)!important}
#deals .deal-card .promotion-event-tabs>button{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;gap:6px!important;position:relative!important;min-width:0!important;
  padding:calc((var(--wt-target) - 20px)/2) 0!important;font-size:0.8125rem!important;font-weight:500!important;line-height:1.25rem!important;color:var(--wt-text-3)!important;text-align:left!important}
#deals .deal-card .promotion-event-tabs>button>*{min-width:0!important}
@media (hover:hover){#deals .deal-card .promotion-event-tabs>button:hover{color:var(--wt-text-2)!important}}
#deals .deal-card .promotion-event-tabs>button[aria-selected=true]{color:var(--wt-text)!important}
#deals .deal-card .promotion-event-tabs>button::before{content:''!important;position:absolute!important;left:0!important;right:0!important;top:-1px!important;height:2px!important;border-radius:2px!important;background:var(--wt-accent)!important;
  opacity:0!important;scale:.4 1!important;transform-origin:left center!important;transition:opacity var(--wt-t-ui) var(--wt-ease),scale var(--wt-t-surface) var(--wt-ease)!important}
#deals .deal-card .promotion-event-tabs>button[aria-selected=true]::before{opacity:1!important;scale:1 1!important}
#deals .deal-card .promotion-event-tabs>button:focus-visible{outline-offset:-2px!important;border-radius:6px!important}
#deals .deal-card .promotion-tab-number{flex:none!important;color:inherit!important}
#deals .deal-card .promotion-tab-ended{color:var(--wt-text-3)!important;font-weight:400!important}
#deals .deal-card .promotion-ended :is(.promotion-value,h3){color:var(--wt-text-2)!important}

/* Google Play points and tiers */
#deals .deal-card .provider-points-value{display:flex!important;flex-direction:column!important;gap:6px!important}
#deals .deal-card .provider-points-value>strong{font-size:1.0625rem!important;font-weight:600!important;line-height:1.35!important;color:var(--wt-text)!important}
#deals .deal-card .provider-points-value>p{font-size:0.875rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}
#deals .deal-card .provider-program-link{display:flex!important;flex-wrap:wrap!important;gap:0 24px!important;margin-top:-6px!important}
#deals .deal-card .provider-program-link>button{color:var(--wt-text-2)!important;font-weight:500!important}
@media (hover:hover){#deals .deal-card .provider-program-link>button:hover{color:var(--wt-text)!important}}
#deals .deal-card .play-points-table{width:100%!important;border-collapse:collapse!important;table-layout:fixed!important;font-size:0.8125rem!important;line-height:1.45!important}
#deals .deal-card .play-points-table :is(th,td){padding:9px 12px 9px 0!important;text-align:left!important;vertical-align:top!important;border-bottom:1px solid var(--wt-line)!important;min-width:0!important}
#deals .deal-card .play-points-table :is(th,td):last-child{padding-right:0!important;text-align:right!important}
#deals .deal-card .play-points-table thead th{padding-top:0!important;font-size:0.75rem!important;font-weight:500!important;color:var(--wt-text-3)!important}
#deals .deal-card .play-points-table tbody th{font-weight:600!important;color:var(--wt-text)!important}
#deals .deal-card .play-points-table td{color:var(--wt-text-2)!important}
#deals .deal-card .play-points-table tbody tr:last-child :is(th,td){border-bottom:0!important}

/* Empty / failed feed */
#deals .feed-empty{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;margin:0 0 16px!important;padding:32px 24px!important;border-radius:var(--wt-r-tile)!important;
  background:var(--wt-surface)!important;box-shadow:var(--wt-e1)!important}
#deals .feed-empty h3{font-size:1.0625rem!important;font-weight:600!important;line-height:1.35!important;color:var(--wt-text)!important}
#deals .feed-empty p{font-size:0.875rem!important;line-height:1.55!important;color:var(--wt-text-2)!important;max-width:60ch!important}
#deals .feed-empty>span svg{width:22px!important;height:22px!important;color:var(--wt-text-3)!important}
#deals .feed-empty .outline{display:inline-flex!important;align-items:center!important;min-height:var(--wt-target)!important;padding:0 18px!important;border-radius:999px!important;background:var(--wt-raise)!important;font-size:0.875rem!important;font-weight:600!important;color:var(--wt-text)!important}

/* ---------------------------------------------------------------- 5. narrow screens */
@media (max-width:900px){
  #games.games-section{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  #games .section-copy{flex-direction:row!important;flex-wrap:wrap!important;align-items:baseline!important;justify-content:space-between!important;gap:4px 16px!important}
  #games .section-copy>h2{flex:1 1 220px!important}
  #games .section-copy>p:not(.eyebrow){display:none!important}
  #games .section-copy .text-button{margin-top:0!important}
}
@media (max-width:680px){
  #games .game-card{padding:8px 0 10px!important;gap:8px!important}
  #games .game-card img{width:min(44px,100%)!important;border-radius:13px!important}
  #games .game-card strong{font-size:0.75rem!important}
  #deals .section-heading{margin-bottom:20px!important}
  #deals .refresh-cluster{justify-content:flex-start!important;flex:1 1 100%!important}
  #deals .refresh-cluster>:is(#v1-profile-button,.refresh-button){flex:1 1 140px!important}
  #deals .refresh-cluster>.freshness{justify-content:flex-start!important;text-align:left!important}
  #deals .filter-tabs>button{padding-inline:12px!important}
  #deals .platform-select{flex:1 1 100%!important;justify-content:space-between!important}
  #deals .platform-select select{flex:1 1 auto!important;max-width:65%!important}
  #deals .deal-card .carrier-rate strong{font-size:2.875rem!important}
}
@media (max-width:360px){
  #deals .deal-card .carrier-key-facts{grid-template-columns:minmax(0,1fr)!important}
  #deals .deal-card .membership-facts{grid-template-columns:minmax(0,1fr)!important}
}

/* ---------------------------------------------------------------- 6. motion off */
@media not all{
  :is(#games,#deals):not(#_) *,:is(#games,#deals):not(#_) *::before,:is(#games,#deals):not(#_) *::after{transition:none!important}
  #deals .deal-card .carrier-panel[hidden]{translate:0 0!important}
}
body.motion-off :is(#games,#deals):not(#_) *,body.motion-off :is(#games,#deals):not(#_) *::before,body.motion-off :is(#games,#deals):not(#_) *::after{transition:none!important}
body.motion-off #deals .deal-card .carrier-panel[hidden]{translate:0 0!important}
}
/* <<< step2 */

/* >>> step3: tools + surfaces */
/* =====================================================================================================================
   STEP 3: TOOLS AND SURFACES (2026-10-21): calculator, feedback, footer, the one dialog and everything it shows (game picker,
   payment conditions, login / account, source coverage, artwork, carrier / event / provider sheets, purchase scenario), the toast,
   field errors, focus. Visual only: no id, class, data-* or behaviour changed.

   Same ownership rule as step 2: everything below is in @layer wt-tools with every declaration !important, so it outranks every
   unlayered rule (atelier, account, ui-polish ...) without a specificity race. The reset is wrapped in :where() (zero
   specificity), so any rule after it wins. Never set here, on any element JS animates: opacity, transform / translate,
   height, overflow (#dialog: app.js fades it, swaps its height and sets overflow inline; details.quiet-section: quiet-ui.js
   slides its height; .language-content and .motion-pending: app.js / smooth.js fade them). Those few rules live, unlayered
   and soft, in the block after this one.

   Grammar of the close of the page ("closure", BRIEF)
   - One ink plate under calculator, feedback and footer (border-image outset: full bleed, never widens the page), so the art
     never shows behind small text in any motion setting.
   - No boxes. The calculator is a row that opens; the feedback form is a heading over its fields; the footer is a line.
     Separation is one hairline and space.
   - Fields are the only filled shapes: a quiet raised well, no border, 48 px tall (52 on phones), 16 px text on touch.

   Grammar of sheets
   - One solid surface (no glass), no visible border, a deep soft shadow, radius 24. A dark veil, not a tinted one.
   - Title first (the decorative capitalised eyebrows are not shown; a kicker that names something, like the provider,
     stays, in sentence weight). Facts are rows of label / value, not boxes. Callouts are a line of accent text, not a panel.
   - One filled champagne action per sheet; secondary actions are raised chips; links are champagne text.
   ===================================================================================================================== */
@layer wt-tools{
/* ---------------------------------------------------------------- 0. ownership: clear the older layers' decoration */
:where(#dialog *:not(svg,svg *,img,.sr-only,.auth-skeleton,.auth-skeleton *,.account-provider-kakao,.account-provider-naver,.account-dot,input[type=checkbox],input[type=radio]),
 details.quiet-section,details.quiet-section *:not(svg,svg *,img,.sr-only),
 #native-feedback,#native-feedback *:not(svg,svg *,.sr-only),
 #home>footer,#home>footer *:not(svg,svg *)){
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;
  letter-spacing:normal!important;text-transform:none!important;font-family:inherit!important;font-feature-settings:normal!important;font-variation-settings:normal!important;min-width:0!important;max-width:none!important;
  text-decoration:none!important;-webkit-text-fill-color:currentColor!important;outline-color:var(--wt-accent)!important;will-change:auto!important}
:where(#dialog,details.quiet-section,#native-feedback,#home>footer){
  font-family:var(--wt-font-text)!important;font-variant-numeric:lining-nums tabular-nums!important;overflow-wrap:anywhere!important;color:var(--wt-text)!important}
:where(#dialog,details.quiet-section,#native-feedback,#home>footer) :where(*){overflow-wrap:anywhere!important;font-variant-numeric:lining-nums tabular-nums!important}
:where(html[lang=ko]) :where(#dialog,details.quiet-section,#native-feedback,#home>footer){word-break:keep-all!important;line-height:1.6!important}
:where(html:not([lang=ko])) :where(#dialog,details.quiet-section,#native-feedback,#home>footer){line-height:1.5!important}
:where(#dialog,details.quiet-section,#native-feedback,#home>footer) :where(h2,h3,h4,p,dl,dt,dd,ul,ol,li,label,legend,small,strong,span,b,em,a,button,summary,input,select,textarea){font-family:inherit!important}
:where(#dialog,details.quiet-section,#native-feedback,#home>footer) :where(button,summary,a,select,label:has(input[type=radio],input[type=checkbox])){cursor:pointer!important;-webkit-tap-highlight-color:transparent!important}
:where(#dialog,details.quiet-section,#native-feedback,#home>footer) :where(button,a,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--wt-accent)!important;outline-offset:3px!important}
:is(#dialog,details.quiet-section,#native-feedback,#home>footer) [hidden]:not(#_,.dialog-swap-ghost){display:none!important}
:where(#dialog,details.quiet-section,#native-feedback) :where(summary){list-style:none!important}
:where(#dialog,details.quiet-section,#native-feedback) :where(summary)::-webkit-details-marker{display:none!important}

#dialog :is(button,a,summary,input,select,textarea,[tabindex]):focus-visible,details.quiet-section :is(button,a,summary,input,select,textarea):focus-visible,
#native-feedback :is(button,input,select,textarea):focus-visible,#home>footer button:focus-visible{outline:2px solid var(--wt-accent)!important;outline-offset:3px!important}

/* ---------------------------------------------------------------- 1. shared parts: fields, buttons, links, fold rows */
/* Fields: one raised well; the hairline inside it brightens on hover and turns champagne on focus. */
:where(#dialog,details.quiet-section,#native-feedback) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea){
  -webkit-appearance:none!important;appearance:none!important;display:block!important;width:100%!important;max-width:100%!important;min-height:48px!important;margin:0!important;padding:12px 16px!important;
  border:0!important;border-radius:var(--wt-r-control)!important;background-color:var(--wt-raise)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;
  color:var(--wt-text)!important;font:400 0.9375rem/1.45 var(--wt-font-text)!important;font-variant-numeric:lining-nums tabular-nums!important;text-align:left!important;
  transition:box-shadow var(--wt-t-ui) var(--wt-ease),background-color var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){:where(#dialog,details.quiet-section,#native-feedback) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea):hover{background-color:#1f2027!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important}}
:where(#dialog,details.quiet-section,#native-feedback) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea):focus{background-color:#1f2027!important;box-shadow:inset 0 0 0 1px rgba(228,201,166,.55)!important}
:where(#dialog,details.quiet-section,#native-feedback) :is(input,textarea)::placeholder{color:#8d8a84!important;opacity:1!important}
:where(#dialog,details.quiet-section,#native-feedback) :is(input,select,textarea)[aria-invalid=true]{box-shadow:inset 0 0 0 1px rgba(255,143,134,.7)!important}
:where(#dialog,details.quiet-section,#native-feedback) select{padding-right:44px!important;text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;
  background-image: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 1.5l5 5 5-5' fill='none' stroke='%23e4c9a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 18px center!important;background-size:12px 8px!important}
:where(#dialog,details.quiet-section,#native-feedback) select option{background:#15161b!important;color:var(--wt-text)!important}
:where(#dialog,details.quiet-section,#native-feedback) textarea{min-height:132px!important;resize:vertical!important;line-height:1.6!important}
:where(#dialog,details.quiet-section,#native-feedback) input[type=number]{-moz-appearance:textfield!important}
:where(#dialog,details.quiet-section,#native-feedback) input[type=number]::-webkit-inner-spin-button,
:where(#dialog,details.quiet-section,#native-feedback) input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}
#dialog input:is([type=date],[type=time]):focus{outline:2px solid var(--wt-accent)!important;outline-offset:3px!important}
:where(#dialog,details.quiet-section,#native-feedback) input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.85) sepia(.3)!important;cursor:pointer!important}
/* Checkboxes: the same square as "Show ended". */
#dialog input[type=checkbox]{-webkit-appearance:none!important;appearance:none!important;flex:none!important;width:18px!important;height:18px!important;margin:3px 0 0!important;border-radius:5px!important;border:1.5px solid var(--wt-text-3)!important;
  background:transparent no-repeat center/12px 10px!important;cursor:pointer!important;transition:background-color var(--wt-t-fast) var(--wt-ease),border-color var(--wt-t-fast) var(--wt-ease)!important}
#dialog input[type=checkbox]:checked{border-color:var(--wt-accent)!important;background-color:var(--wt-accent)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' fill='none' stroke='%2317130e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
@media (pointer:coarse),(hover:none),(max-width:820px){
  :where(#dialog,details.quiet-section,#native-feedback) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea){min-height:52px!important;font-size:1rem!important}
}

/* The one filled action of a surface. */
#dialog :is(.primary,.pc-apply,.auth-btn-primary,.provider-input-action,.membership-primary),#native-feedback button[type=submit]{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:48px!important;max-width:100%!important;padding:12px 24px!important;border:0!important;border-radius:var(--wt-r-chip)!important;
  background:var(--wt-accent)!important;color:var(--wt-accent-ink)!important;font:600 0.9375rem/1.35 var(--wt-font-text)!important;text-align:center!important;text-decoration:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:background-color var(--wt-t-ui) var(--wt-ease),scale var(--wt-t-fast) var(--wt-ease),box-shadow var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){#dialog :is(.primary,.pc-apply,.auth-btn-primary,.provider-input-action,.membership-primary):hover,#native-feedback button[type=submit]:hover{background:var(--wt-accent-hi)!important}}
#dialog :is(.primary,.pc-apply,.auth-btn-primary,.provider-input-action,.membership-primary):active,#native-feedback button[type=submit]:active{scale:.98!important}
#dialog :is(.primary,.pc-apply,.auth-btn-primary,.provider-input-action,.membership-primary) *{color:inherit!important}
#dialog :is(.primary,.pc-apply,.auth-btn-primary,.provider-input-action,.membership-primary)>span[aria-hidden=true]{flex:none!important;transition:translate var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){#dialog :is(.primary,.pc-apply,.auth-btn-primary,.provider-input-action,.membership-primary):hover>span[aria-hidden=true]{translate:3px 0!important}}
#dialog :is(.primary,.pc-apply,.auth-btn-primary,.membership-primary):disabled,#native-feedback button[type=submit]:disabled{background:#3a352e!important;color:#c9c3ba!important;cursor:progress!important}
/* Secondary: a raised chip. */
#dialog :is(.outline,.pc-cancel,.auth-btn:not(.auth-btn-primary),.signal-retry),details.quiet-section .membership-primary{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:48px!important;max-width:100%!important;padding:12px 22px!important;border:0!important;border-radius:var(--wt-r-chip)!important;
  background:var(--wt-raise)!important;color:var(--wt-text)!important;font:600 0.9375rem/1.35 var(--wt-font-text)!important;text-align:center!important;box-shadow:var(--wt-e1),inset 0 0 0 1px rgba(255,255,255,.06)!important;
  transition:background-color var(--wt-t-ui) var(--wt-ease),scale var(--wt-t-fast) var(--wt-ease)!important}
@media (hover:hover){#dialog :is(.outline,.pc-cancel,.auth-btn:not(.auth-btn-primary),.signal-retry):hover,details.quiet-section .membership-primary:hover{background:#23242b!important}}
#dialog :is(.outline,.pc-cancel,.auth-btn:not(.auth-btn-primary),.signal-retry):active,details.quiet-section .membership-primary:active{scale:.98!important}
#dialog .account-danger{color:var(--wt-down)!important}
#dialog .account-danger-fill{background:#ff8f86!important;color:#1c0d0b!important}
@media (hover:hover){#dialog .account-danger-fill:hover{background:#ffa59d!important}}
/* Text links. */
#dialog :is(.text-button,.account-link,.auth-link,.pc-language,.source-status a,.source-group-body a),#home>footer button{
  display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:var(--wt-target)!important;max-width:100%!important;padding:0!important;color:var(--wt-accent)!important;font:600 0.875rem/1.4 var(--wt-font-text)!important;text-align:left!important;
  text-decoration:underline!important;text-decoration-color:transparent!important;text-underline-offset:4px!important;text-decoration-thickness:1px!important;transition:text-decoration-color var(--wt-t-ui) var(--wt-ease),color var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){#dialog :is(.text-button,.account-link,.auth-link,.pc-language,.source-status a,.source-group-body a):hover{text-decoration-color:currentColor!important;color:var(--wt-accent-hi)!important}}
#dialog .account-danger-text{color:var(--wt-down)!important}
#dialog .account-link{justify-content:center!important;min-width:var(--wt-target)!important;padding:0 6px!important}
#dialog :is(.text-button,.account-link,.source-status a)>span[aria-hidden=true]{flex:none!important}

/* Fold rows (terms, details, source groups): a full-width row with a + / − mark; the row is the target. */
#dialog :is(.carrier-modal-terms,.auth-privacy,.pc-details,.source-subgroup)>summary,details.quiet-section .membership-details>summary{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;min-height:var(--wt-target)!important;padding:10px 36px 10px 0!important;
  font:500 0.875rem/1.45 var(--wt-font-text)!important;color:var(--wt-text-2)!important;text-align:left!important;transition:color var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){#dialog :is(.carrier-modal-terms,.auth-privacy,.pc-details,.source-subgroup)>summary:hover,details.quiet-section .membership-details>summary:hover{color:var(--wt-text)!important}}
#dialog :is(.carrier-modal-terms,.auth-privacy,.pc-details,.source-subgroup)>summary::after,details.quiet-section .membership-details>summary::after{
  content:'+'!important;position:absolute!important;right:0!important;top:50%!important;width:24px!important;height:24px!important;margin-top:-12px!important;display:grid!important;place-items:center!important;border:0!important;box-shadow:none!important;border-radius:999px!important;
  background:rgba(255,255,255,.06)!important;color:var(--wt-accent)!important;font:400 1rem/1 var(--wt-font-text)!important;transform:none!important;rotate:0deg!important;transition:rotate var(--wt-t-ui) var(--wt-ease)!important}
#dialog :is(.carrier-modal-terms,.auth-privacy,.pc-details,.source-subgroup)[open]>summary::after,details.quiet-section .membership-details[open]>summary::after{content:'−'!important}
#dialog :is(.carrier-modal-terms,.auth-privacy,.pc-details,.source-subgroup)>summary::before,details.quiet-section .membership-details>summary::before{content:none!important;display:none!important}

/* ---------------------------------------------------------------- 2. the sheet (dialog#dialog) */
#dialog{border:0!important;border-radius:var(--wt-r-card)!important;background:var(--wt-surface)!important;color:var(--wt-text)!important;padding:32px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.05),0 48px 120px -24px rgba(0,0,0,.9),0 12px 32px -12px rgba(0,0,0,.6)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;scrollbar-width:none!important}
#dialog::-webkit-scrollbar{display:none!important}
/* Targets inside the sheet are sized for the sheet's fit-to-screen zoom (app.js fitDialog: never below .7 with a fine pointer, .92 on
   touch): 36 x .7 >= 24 px on a desktop, 48 x .92 >= 44 px on a phone. */
#dialog{--wt-target:36px!important}
@media (pointer:coarse),(hover:none){#dialog{--wt-target:48px!important}}
#dialog::backdrop{background:rgba(5,6,8,.78)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#dialog>.close{
  float:right!important;position:sticky!important;top:0!important;z-index:3!important;width:var(--wt-target)!important;height:var(--wt-target)!important;min-width:40px!important;min-height:40px!important;margin:-14px -14px 0 16px!important;padding:0!important;
  display:grid!important;place-items:center!important;border:0!important;border-radius:999px!important;background:var(--wt-raise)!important;color:var(--wt-text-2)!important;box-shadow:var(--wt-e1),inset 0 0 0 1px rgba(255,255,255,.06)!important;
  font:300 1.5rem/1 var(--wt-font-text)!important;text-indent:0!important;cursor:pointer!important;transition:background-color var(--wt-t-ui) var(--wt-ease),color var(--wt-t-ui) var(--wt-ease),rotate var(--wt-t-surface) var(--wt-ease)!important}
@media (hover:hover){#dialog>.close:hover{background:#25262d!important;color:var(--wt-text)!important;rotate:90deg!important}}
#dialog>.close::before,#dialog>.close::after{content:none!important;display:none!important}
#dialog-content{color:var(--wt-text)!important;font-family:var(--wt-font-text)!important}
#dialog-content>*:first-child{margin-top:0!important}
/* Type */
#dialog :is(#dialog-title,h2){margin:0 0 12px!important;font:500 1.875rem/1.18 var(--wt-font-display)!important;font-variation-settings:'opsz' 48!important;letter-spacing:-.012em!important;color:var(--wt-text)!important;text-wrap:balance!important}
html[lang=ko] #dialog :is(#dialog-title,h2){font:600 1.5rem/1.38 var(--wt-font-text)!important;letter-spacing:-.02em!important}
#dialog h3{margin:0 0 6px!important;font:600 0.9375rem/1.45 var(--wt-font-text)!important;color:var(--wt-text)!important}
#dialog p{margin:0 0 12px!important;font:400 0.9375rem/1.6 var(--wt-font-text)!important;color:var(--wt-text-2)!important;max-width:62ch!important}
#dialog small{font-size:0.8125rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
#dialog strong,#dialog b{font-weight:600!important;color:var(--wt-text)!important}
#dialog :is(ul,ol){margin:0 0 12px!important;padding:0 0 0 1.25em!important;color:var(--wt-text-2)!important;font-size:0.9375rem!important;line-height:1.6!important}
#dialog li{margin:0 0 6px!important;padding-left:.25em!important}
#dialog li::marker{color:var(--wt-text-3)!important}
#dialog .eyebrow,#dialog .pc-header>p:first-child,#dialog .membership-eyebrow{display:none!important}
#dialog :is(.carrier-modal-kicker){display:block!important;margin:0 0 10px!important;font:600 0.8125rem/1.4 var(--wt-font-text)!important;color:var(--wt-accent)!important;max-width:calc(100% - 56px)!important}
#dialog .fine-print{margin:24px 0 0!important;padding-top:16px!important;border-top:1px solid var(--wt-line)!important;font-size:0.8125rem!important;line-height:1.6!important;color:var(--wt-text-3)!important}
#dialog .source-title{display:block!important;margin:2px 0 10px!important;font:400 0.875rem/1.55 var(--wt-font-text)!important;color:var(--wt-text-3)!important}
#dialog [role=alert],#dialog .pc-error,#dialog .auth-status,#dialog [data-signal-error]{color:var(--wt-down)!important;font-size:0.8125rem!important;line-height:1.5!important}
#dialog [role=alert]:empty,#dialog .pc-error:empty,#dialog .auth-status:empty,#dialog [data-signal-error]:empty{margin:0!important}

/* 2a. Game picker */
#dialog #game-search{min-height:52px!important;margin:20px 0 20px!important;padding-left:44px!important;font-size:1rem!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5.25' fill='none' stroke='%23aaa69f' stroke-width='1.5'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%23aaa69f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:16px center!important;background-size:16px 16px!important}
#dialog #game-search::-webkit-search-cancel-button{-webkit-appearance:none!important}
#dialog .dialog-games{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;gap:4px!important;margin:0!important}
#dialog .dialog-games>p{grid-column:1/-1!important;margin:8px 0!important;color:var(--wt-text-3)!important}
#dialog .dialog-games .game-card{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;min-width:0!important;min-height:var(--wt-target)!important;margin:0!important;padding:14px 6px 12px!important;
  border:0!important;border-radius:18px!important;background:transparent!important;text-align:center!important;transition:background-color var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){#dialog .dialog-games .game-card:hover{background:rgba(255,255,255,.04)!important}}
#dialog .dialog-games .game-card img{display:block!important;width:64px!important;height:64px!important;max-width:100%!important;border-radius:17px!important;object-fit:cover!important;opacity:.7!important;box-shadow:0 0 0 1px rgba(255,255,255,.1)!important;
  transition:opacity var(--wt-t-surface) var(--wt-ease),scale var(--wt-t-surface) var(--wt-ease)!important}
@media (hover:hover){#dialog .dialog-games .game-card:hover img{opacity:.95!important;scale:1.04!important}}
#dialog .dialog-games .game-card strong{display:block!important;max-width:100%!important;font:500 0.8125rem/1.4 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
#dialog .dialog-games .game-card:is(.selected,[aria-pressed=true]) img{opacity:1!important;box-shadow:0 0 0 2px var(--wt-surface),0 0 0 3.5px var(--wt-accent)!important}
#dialog .dialog-games .game-card:is(.selected,[aria-pressed=true]) strong{color:var(--wt-text)!important;font-weight:600!important}

/* 2b. Payment conditions */
#dialog #payment-conditions{display:block!important;margin:0!important}
#dialog .pc-header{margin:0 0 20px!important;padding:0!important}
#dialog .pc-header-bottom{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:4px 16px!important;margin:0!important}
#dialog .pc-header-bottom>span{flex:1 1 220px!important;min-width:0!important;font-size:0.9375rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}
#dialog .pc-language{flex:none!important;justify-content:center!important;min-width:var(--wt-target)!important;padding:0 8px!important;margin-right:-8px!important;font-weight:500!important;color:var(--wt-text-2)!important;text-decoration-color:rgba(255,255,255,.25)!important}
#dialog .pc-body{margin:-6px!important;padding:6px!important}
#dialog :is(.pc-section,.pc-details){margin:0!important;padding:20px 0!important;border-top:1px solid var(--wt-line)!important}
#dialog .pc-section-heading{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;justify-content:space-between!important;gap:2px 16px!important;margin:0 0 14px!important}
#dialog .pc-section-heading h3{margin:0!important;font-size:0.9375rem!important}
#dialog .pc-section-heading>span{font-size:0.8125rem!important;color:var(--wt-text-3)!important}
#dialog .pc-details>summary{font-weight:600!important;color:var(--wt-text)!important}
#dialog .pc-details>summary small{display:block!important;margin-left:auto!important;font-weight:400!important;font-size:0.8125rem!important;color:var(--wt-text-3)!important}
#dialog .pc-details[open]>summary{margin-bottom:12px!important}
#dialog .pc-fields{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;gap:18px 16px!important;margin:0!important}
#dialog .pc-field{display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important;margin:0!important;padding:0!important}
#dialog .pc-field.pc-wide{grid-column:1/-1!important}
#dialog .pc-field>label,#dialog .pc-choice>legend{display:block!important;padding:0!important;font:500 0.8125rem/1.45 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
#dialog .pc-field>small{display:block!important;margin:0!important;font-size:0.7812rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
#dialog .pc-field>small:empty{display:none!important}
#dialog .pc-money{position:relative!important;display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
#dialog .pc-money>input{flex:1 1 auto!important;min-width:0!important}
#dialog .pc-money>span[aria-hidden=true]{flex:none!important;font-size:0.9375rem!important;color:var(--wt-text-3)!important}
#dialog .pc-unit{flex:none!important;font-size:0.875rem!important;color:var(--wt-text-3)!important}
#dialog .pc-choice{margin:0!important;padding:0!important;border:0!important;min-width:0!important}
#dialog .pc-choice>legend{margin:0 0 8px!important}
#dialog .pc-choice>div{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
#dialog .pc-choice label{position:relative!important;display:inline-flex!important;min-width:0!important;max-width:100%!important}
#dialog .pc-choice input[type=radio]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;opacity:0!important;cursor:pointer!important}
#dialog .pc-choice label>span{display:inline-flex!important;align-items:center!important;min-height:var(--wt-target)!important;padding:8px 16px!important;border-radius:999px!important;background:var(--wt-raise)!important;color:var(--wt-text-2)!important;
  font:500 0.875rem/1.4 var(--wt-font-text)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;transition:background-color var(--wt-t-ui) var(--wt-ease),color var(--wt-t-ui) var(--wt-ease),box-shadow var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){#dialog .pc-choice label:hover>span{color:var(--wt-text)!important;background:#1f2027!important}}
#dialog .pc-choice label:has(input:checked)>span{background:var(--wt-accent-soft)!important;color:var(--wt-text)!important;box-shadow:inset 0 0 0 1.5px var(--wt-accent)!important}
#dialog .pc-choice label:has(input:focus-visible)>span{outline:2px solid var(--wt-accent)!important;outline-offset:3px!important}
#dialog :is(.pc-empty,.pc-info){margin:0!important;padding:20px 0 0!important;border-top:1px solid var(--wt-line)!important;font-size:0.875rem!important;color:var(--wt-text-2)!important}
#dialog .pc-footer{display:flex!important;flex-direction:column!important;gap:14px!important;margin:4px 0 0!important;padding:20px 0 0!important;border-top:1px solid var(--wt-line)!important}
#dialog .pc-footer>small{font-size:0.8125rem!important;color:var(--wt-text-3)!important}
#dialog .pc-footer>div{width:100%!important;margin:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;gap:10px!important}
#dialog .pc-footer>div>button{width:100%!important}
#dialog .pc-apply{justify-content:space-between!important}
#payment-conditions.conditions-applying .pc-apply{background:#3a352e!important;color:#c9c3ba!important}

/* 2c. Login / account */
#dialog .account-dialog{display:block!important;margin:0!important}
#dialog .auth-sub{margin:0 0 24px!important;font-size:0.9375rem!important;color:var(--wt-text-2)!important}
#dialog .auth-providers{display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important}
#dialog .auth-btn{width:100%!important;justify-content:center!important}
#dialog .account-provider{gap:12px!important}
#dialog .account-provider .account-logo,#dialog .account-provider svg{flex:none!important;width:18px!important;height:18px!important}
#dialog .account-provider-kakao{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;width:100%!important;min-height:48px!important;padding:12px 22px!important;border:0!important;border-radius:var(--wt-r-chip)!important;
  background:#FEE500!important;color:#191600!important;font:600 0.9375rem/1.35 var(--wt-font-text)!important;box-shadow:none!important}
#dialog .account-provider-naver{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;width:100%!important;min-height:48px!important;padding:12px 22px!important;border:0!important;border-radius:var(--wt-r-chip)!important;
  background:#03C75A!important;color:#fff!important;font:600 0.9375rem/1.35 var(--wt-font-text)!important;box-shadow:none!important}
#dialog .auth-or{display:flex!important;align-items:center!important;gap:14px!important;margin:6px 0!important;font-size:0.8125rem!important;color:var(--wt-text-3)!important;max-width:none!important}
#dialog .auth-or::before,#dialog .auth-or::after{content:''!important;flex:1 1 0!important;height:1px!important;background:var(--wt-line)!important}
#dialog .auth-or span{flex:none!important;text-transform:lowercase!important}
#dialog .auth-email{display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important}
#dialog .auth-email .auth-status{margin:0!important}
#dialog .auth-legal{margin:24px 0 0!important;padding-top:16px!important;border-top:1px solid var(--wt-line)!important;font-size:0.8125rem!important;line-height:1.65!important;color:var(--wt-text-3)!important;max-width:none!important}
/* An inline link inside a sentence: its target reaches the minimum size without moving the line (padding paid back in margin). */
#dialog .auth-legal .auth-link{display:inline-block!important;min-height:0!important;padding:calc((var(--wt-target) - 1.65em)/2) 2px!important;margin:calc((var(--wt-target) - 1.65em)/-2) -2px!important;
  font:600 0.8125rem/1.65 var(--wt-font-text)!important;color:var(--wt-accent)!important;vertical-align:baseline!important;text-decoration:underline!important;text-decoration-color:rgba(228,201,166,.4)!important;text-underline-offset:3px!important}
#dialog .auth-privacy{margin:8px 0 0!important}
#dialog .auth-privacy>summary{color:var(--wt-text-3)!important;font-size:0.8125rem!important}
#dialog :is(.account-privacy-list,.account-identities){display:grid!important;gap:12px!important;margin:8px 0 0!important;padding:0!important}
#dialog .account-privacy-list>div{display:grid!important;gap:2px!important;padding:0 0 12px!important;border-bottom:1px solid var(--wt-line)!important}
#dialog .account-privacy-list>div:last-child{border-bottom:0!important}
#dialog .account-privacy-list dt{font:600 0.8125rem/1.5 var(--wt-font-text)!important;color:var(--wt-text)!important}
#dialog .account-privacy-list dd{margin:0!important;font:400 0.8125rem/1.6 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
#dialog .auth-note,#dialog .account-note{font-size:0.875rem!important;line-height:1.6!important;color:var(--wt-text-3)!important}
#dialog .auth-skeleton{display:grid!important;gap:10px!important;margin:0!important}
#dialog .auth-skeleton-row{height:48px!important;border-radius:999px!important;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04)) 0 0/200% 100% var(--wt-raise)!important;box-shadow:none!important}
/* Signed in */
#dialog .account-section{margin:0!important;padding:20px 0!important;border-top:1px solid var(--wt-line)!important}
#dialog .account-section>h3{margin:0 0 10px!important}
#dialog .account-dialog>h2+.account-section{padding-top:8px!important;border-top:0!important}
#dialog .account-identities{list-style:none!important;padding:0!important;gap:4px!important}
#dialog .account-identities li{padding:0!important;margin:0!important;font-size:0.875rem!important;color:var(--wt-text-2)!important}
#dialog :is(.account-status,.account-plan,.account-email-mask){font-size:0.875rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}
#dialog .account-dot{display:inline-block!important;flex:none!important;width:8px!important;height:8px!important;border-radius:999px!important;margin-right:6px!important;vertical-align:middle!important}
#dialog .account-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;gap:14px 12px!important;margin:0 0 14px!important}
#dialog .account-grid-wide{grid-column:1/-1!important}
#dialog .account-grid label,#dialog .account-spending-form label{display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important;font:500 0.8125rem/1.45 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
#dialog .account-grid label>span{color:var(--wt-text-2)!important}
#dialog .account-check{display:flex!important;align-items:flex-start!important;gap:12px!important;min-height:var(--wt-target)!important;padding:4px 0!important;font-size:0.875rem!important;line-height:1.55!important;color:var(--wt-text-2)!important;cursor:pointer!important}
#dialog :is(.modal-actions,.account-actions){display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:14px 0 0!important}
#dialog :is(.modal-actions,.account-actions)>*{flex:1 1 180px!important}
#dialog .account-wide{width:100%!important}
#dialog .account-spending-summary{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;gap:16px 24px!important;margin:0 0 16px!important}
#dialog .account-spending-summary>div{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important;padding:0!important}
#dialog .account-spending-summary span{font-size:0.8125rem!important;color:var(--wt-text-3)!important}
#dialog .account-spending-summary strong{font:500 1.625rem/1.2 var(--wt-font-display)!important;font-variation-settings:'opsz' 48!important;color:var(--wt-text)!important}
html[lang=ko] #dialog .account-spending-summary strong{font:600 1.375rem/1.3 var(--wt-font-text)!important}
#dialog .account-spending-list ul{list-style:none!important;margin:0!important;padding:0!important}
#dialog .account-entry{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;margin:0!important;padding:14px 0!important;border-top:1px solid var(--wt-line)!important}
#dialog .account-entry-main{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important;flex:1 1 auto!important}
#dialog .account-entry-main span{font-size:0.8125rem!important;color:var(--wt-text-3)!important}
#dialog .account-entry-side{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:2px!important;flex:0 1 auto!important;min-width:0!important;text-align:right!important}
#dialog .account-entry-side b{font-size:0.9375rem!important;color:var(--wt-text)!important}
#dialog .account-confirm{display:inline-flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:4px 12px!important}
#dialog .account-diff{font-size:0.875rem!important;color:var(--wt-text-2)!important}
#dialog :is(.account-dev,.account-delete){margin:0!important;padding:20px 0 0!important;border-top:1px solid var(--wt-line)!important}

/* 2d. Source coverage and artwork */
#dialog .source-summary{display:flex!important;flex-direction:column!important;gap:10px!important;margin:20px 0 8px!important;padding:0 0 20px!important;border-bottom:1px solid var(--wt-line)!important}
#dialog .source-summary>strong{font:600 1.0625rem/1.45 var(--wt-font-text)!important;color:var(--wt-text)!important}
#dialog .source-counts{display:flex!important;flex-wrap:wrap!important;gap:6px 16px!important;margin:0!important}
#dialog .source-count{display:inline-flex!important;align-items:center!important;gap:8px!important;font:500 0.8125rem/1.5 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
#dialog .source-count::before{content:''!important;flex:none!important;width:6px!important;height:6px!important;border-radius:999px!important;background:var(--wt-text-3)!important}
#dialog .source-count[data-state=fresh]::before{background:var(--wt-up)!important}
#dialog .source-count[data-state=aging]::before{background:var(--wt-accent)!important}
#dialog .source-count[data-state=stale]::before{background:#d8a26a!important}
#dialog .source-count[data-state=blocked]::before{background:var(--wt-down)!important}
#dialog .source-summary>small{font-size:0.8125rem!important;color:var(--wt-text-3)!important}
#dialog .source-groups{display:flex!important;flex-direction:column!important;margin:0!important}
#dialog .source-group{margin:0!important;padding:0!important;border-bottom:1px solid var(--wt-line)!important}
#dialog .source-group>summary{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:4px!important;min-height:var(--wt-target)!important;padding:16px 44px 16px 0!important;cursor:pointer!important}
#dialog .source-group>summary::after{content:'+'!important;position:absolute!important;right:0!important;top:16px!important;width:28px!important;height:28px!important;display:grid!important;place-items:center!important;border:0!important;box-shadow:none!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;
  color:var(--wt-accent)!important;font:400 1.0625rem/1 var(--wt-font-text)!important;transition:background-color var(--wt-t-ui) var(--wt-ease)!important}
#dialog .source-group[open]>summary::after{content:'−'!important}
@media (hover:hover){#dialog .source-group>summary:hover::after{background:rgba(255,255,255,.1)!important}}
#dialog .source-group-name{font:600 1rem/1.4 var(--wt-font-text)!important;color:var(--wt-text)!important}
#dialog .source-group-detail{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:4px 16px!important;min-width:0!important}
#dialog .source-group-meta{font-size:0.8125rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
#dialog .source-group-body{display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important;padding:0 0 12px!important}
#dialog .source-group-note{margin:0 0 4px!important;padding:0!important}
#dialog .source-group-note p{font-size:0.8125rem!important;color:var(--wt-text-3)!important;margin:0 0 4px!important}
#dialog .source-subgroup{margin:4px 0 0!important;border-top:1px solid var(--wt-line)!important}
#dialog .source-subgroup>summary{color:var(--wt-text)!important}
#dialog .source-status{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;margin:0!important;padding:16px 0!important;border-top:1px solid var(--wt-line)!important}
#dialog :is(.source-group-body,.source-subgroup)>.source-status:first-child,#dialog .source-group-note+.source-status{border-top:0!important}
#dialog .source-status>strong{font:600 0.9375rem/1.45 var(--wt-font-text)!important;color:var(--wt-text)!important}
#dialog .source-status>p{margin:0!important;font-size:0.875rem!important;line-height:1.55!important;color:var(--wt-text-2)!important}
#dialog .source-status>span{font-size:0.8125rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
#dialog .source-status>small{font-size:0.8125rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
#dialog .source-status>a{margin-top:2px!important;padding:0 2px!important;margin-left:-2px!important;font-size:0.875rem!important}
/* Artwork credits: each game is a row (title, then the credit, then the source link). */
#dialog #dialog-content>.source-status{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:baseline!important;gap:4px 24px!important;padding:18px 0!important;border-top:1px solid var(--wt-line)!important}
#dialog #dialog-content>.source-status>strong{grid-column:1!important;grid-row:1!important}
#dialog #dialog-content>.source-status>small{grid-column:1!important;grid-row:2!important;font-size:0.875rem!important;line-height:1.6!important;color:var(--wt-text-2)!important}
#dialog #dialog-content>.source-status>a{grid-column:2!important;grid-row:1/span 2!important;align-self:center!important;margin:0!important;padding:0 4px!important;justify-content:flex-end!important;min-width:var(--wt-target)!important;white-space:nowrap!important}
#dialog #dialog-content>p:not([class]){font-size:0.9375rem!important;color:var(--wt-text-2)!important;margin-bottom:16px!important}

/* 2e. Carrier / event / provider sheets */
#dialog .carrier-modal{display:block!important;margin:0!important;padding:0!important}
#dialog .carrier-modal-intro{margin:0 0 20px!important;color:var(--wt-text-2)!important}
#dialog .carrier-modal-facts{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))!important;gap:16px 24px!important;margin:0 0 8px!important;padding:18px 0!important;border-top:1px solid var(--wt-line)!important;border-bottom:1px solid var(--wt-line)!important}
#dialog .carrier-modal-facts>div{display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important;padding:0!important}
#dialog .carrier-modal-facts span{font-size:0.8125rem!important;line-height:1.45!important;color:var(--wt-text-3)!important}
#dialog .carrier-modal-facts strong{font:500 1.625rem/1.15 var(--wt-font-display)!important;font-variation-settings:'opsz' 48!important;color:var(--wt-text)!important}
html[lang=ko] #dialog .carrier-modal-facts strong{font:600 1.3125rem/1.3 var(--wt-font-text)!important;letter-spacing:-.01em!important}
#dialog .carrier-modal-section{margin:0!important;padding:20px 0 6px!important}
#dialog .carrier-modal-section>p{font-size:0.9375rem!important}
#dialog .carrier-modal-callout{display:flex!important;flex-direction:column!important;gap:4px!important;margin:4px 0 0!important;padding:16px 0 4px!important;border-top:1px solid var(--wt-line)!important}
#dialog .carrier-modal-callout strong{font:600 0.875rem/1.5 var(--wt-font-text)!important;color:var(--wt-accent)!important}
#dialog .carrier-modal-callout span{font-size:0.875rem!important;line-height:1.6!important;color:var(--wt-text-2)!important}
#dialog .carrier-modal-terms{margin:16px 0 0!important;padding:0!important;border-top:1px solid var(--wt-line)!important;border-bottom:1px solid var(--wt-line)!important}
#dialog .carrier-modal-terms>p{margin:0 0 12px!important;font-size:0.8125rem!important;line-height:1.7!important;color:var(--wt-text-3)!important;max-width:none!important}
#dialog .carrier-modal>a.primary{margin:24px 0 0!important;width:100%!important}
#dialog .carrier-modal>a.text-button{display:flex!important;margin:8px 0 0!important;font-weight:500!important;color:var(--wt-text-3)!important}
@media (hover:hover){#dialog .carrier-modal>a.text-button:hover{color:var(--wt-text-2)!important}}
#dialog .promotion-value{display:block!important;margin:16px 0 6px!important;font:600 1.5rem/1.3 var(--wt-font-text)!important;letter-spacing:-.01em!important;color:var(--wt-text)!important}
#dialog .promotion-economics{list-style:none!important;margin:0 0 4px!important;padding:0!important}
#dialog .promotion-economics li{margin:0!important;padding:0!important;font-size:0.9375rem!important;color:var(--wt-text-2)!important}
#dialog .promotion-facts{display:grid!important;gap:0!important;margin:20px 0 0!important;padding:0!important;border-top:1px solid var(--wt-line)!important}
#dialog .promotion-facts>div{display:grid!important;grid-template-columns:minmax(0,11em) minmax(0,1fr)!important;gap:4px 20px!important;padding:12px 0!important;border-bottom:1px solid var(--wt-line)!important}
#dialog .promotion-facts dt{font:400 0.8125rem/1.55 var(--wt-font-text)!important;color:var(--wt-text-3)!important}
#dialog .promotion-facts dd{margin:0!important;font:500 0.9375rem/1.5 var(--wt-font-text)!important;color:var(--wt-text)!important}
#dialog .promotion-facts dd small{display:block!important;margin-top:2px!important;font-weight:400!important}
#dialog :is(.promotion-conditions,.store-event-detail,.promotion-detail-body){margin:0!important;padding:20px 0 0!important}
#dialog .promotion-conditions>p{font-size:0.875rem!important}
#dialog .carrier-modal>footer{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin:24px 0 0!important;padding:0!important}
#dialog .carrier-modal>footer small{text-align:left!important}
#dialog .status-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:24px!important;padding:2px 10px!important;border-radius:999px!important;background:var(--wt-raise)!important;font:500 0.7812rem/1.4 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
#dialog :is(.supplemental-rewards,.provider-load-notice){margin:16px 0 0!important;padding:16px 0 0!important;border-top:1px solid var(--wt-line)!important;font-size:0.875rem!important;color:var(--wt-text-2)!important}
#dialog :is(.membership-limit,.membership-scope){font-size:0.875rem!important;color:var(--wt-text-2)!important}
#dialog .play-points-detail table{width:100%!important;border-collapse:collapse!important;font-size:0.875rem!important}
#dialog .play-points-detail :is(th,td){padding:10px 12px 10px 0!important;text-align:left!important;border-bottom:1px solid var(--wt-line)!important;color:var(--wt-text-2)!important}
#dialog .play-points-detail th{color:var(--wt-text)!important;font-weight:600!important}
/* Legacy deal sheet (before live data) */
#dialog .modal-price{font:500 2rem/1.15 var(--wt-font-display)!important;color:var(--wt-text)!important}
#dialog .guide-heading{margin-top:16px!important}
#dialog .redemption-steps{padding-left:1.25em!important}

/* 2f. Purchase scenario and LG conditions */
#dialog #signal-scenario{display:block!important}
#dialog #signal-scenario>.text-button{margin:0 0 12px!important}
#dialog .lg-conditions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))!important;gap:16px!important;align-items:end!important;margin:0 0 8px!important}
#dialog .lg-conditions>label{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;gap:8px!important;min-width:0!important;font:500 0.8125rem/1.45 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
#dialog .signal-scenario-event{margin:16px 0 0!important;padding:18px 0 0!important;border:0!important;border-top:1px solid var(--wt-line)!important;min-width:0!important}
#dialog .signal-scenario-event>legend{float:left!important;width:100%!important;margin:0 0 14px!important;padding:0!important;font:600 0.9375rem/1.45 var(--wt-font-text)!important;color:var(--wt-text)!important}
#dialog .signal-scenario-event>legend+*{clear:both!important}
#dialog .signal-scenario-event>legend .source-title{margin:2px 0 0!important;font-weight:400!important}
#dialog #signal-scenario>button.primary{width:100%!important;margin:20px 0 0!important}
#dialog .lg-check,#dialog .lg-result{font-size:0.875rem!important;color:var(--wt-text-2)!important}

/* ---------------------------------------------------------------- 3. the close of the page: one ink plate, no boxes */
/* (The plate is declared inside each block's own rule, after its "border" shorthand, which would otherwise reset border-image.) */

/* The hairlines that open each block are drawn by a child or a pseudo-element: the plate (border-image fill) paints over the block's
   own inset shadow. */
details.quiet-section>summary{box-shadow:inset 0 1px 0 var(--wt-line-2)!important}
#native-feedback,#home>footer{position:relative!important}
#native-feedback::before,#home>footer::before{content:''!important;position:absolute!important;left:0!important;right:0!important;top:0!important;height:1px!important;margin:0!important;padding:0!important;border:0!important;background:var(--wt-line-2)!important;pointer-events:none!important}
#home>footer::before{background:var(--wt-line)!important}
#home>footer::after{content:none!important;display:none!important}
/* 3a. Calculator: a row that opens into the tool. */
details.quiet-section{display:block!important;position:relative!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:inset 0 1px 0 var(--wt-line-2)!important;
  border-image:linear-gradient(var(--wt-canvas),var(--wt-canvas)) fill 0 / 0 / 0 100vmax!important}
details.quiet-section>summary{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;min-height:72px!important;margin:0!important;padding:18px 64px 18px 0!important;
  font:600 1.125rem/1.4 var(--wt-font-text)!important;color:var(--wt-text)!important;letter-spacing:-.005em!important;cursor:pointer!important;transition:color var(--wt-t-ui) var(--wt-ease)!important}
details.quiet-section>summary::after{content:'+'!important;position:absolute!important;right:0!important;top:50%!important;width:44px!important;height:44px!important;margin-top:-22px!important;display:grid!important;place-items:center!important;border:0!important;border-radius:999px!important;
  background:var(--wt-raise)!important;box-shadow:var(--wt-e1),inset 0 0 0 1px rgba(255,255,255,.06)!important;color:var(--wt-accent)!important;font:300 1.375rem/1 var(--wt-font-text)!important;transform:none!important;
  transition:background-color var(--wt-t-ui) var(--wt-ease),rotate var(--wt-t-surface) var(--wt-ease)!important}
details.quiet-section[open]:not([data-folding=closing])>summary::after{content:'−'!important;rotate:180deg!important}
@media (hover:hover){details.quiet-section>summary:hover::after{background:#25262d!important}}
details.quiet-section>summary::before{content:none!important;display:none!important}
details.quiet-section>summary:focus-visible{outline-offset:6px!important;border-radius:4px!important}
details.quiet-section #calculator{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)!important;gap:24px clamp(32px,5vw,80px)!important;align-items:start!important;margin:0!important;padding:8px 0 clamp(40px,4vw,64px)!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
details.quiet-section #calculator>div:first-child{display:flex!important;flex-direction:column!important;gap:12px!important;min-width:0!important;margin:0!important;padding:0!important}
details.quiet-section #calculator .eyebrow{display:none!important}
details.quiet-section #calculator h2{margin:0!important;font:500 clamp(1.625rem,1.6vw + 12px,32px)/1.18 var(--wt-font-display)!important;font-variation-settings:'opsz' 48!important;letter-spacing:-.012em!important;color:var(--wt-text)!important;text-wrap:balance!important}
html[lang=ko] details.quiet-section #calculator h2{font:600 clamp(1.3125rem,1vw + 12px,26px)/1.38 var(--wt-font-text)!important;letter-spacing:-.02em!important}
details.quiet-section #calculator>div:first-child>p{margin:0!important;font-size:0.9375rem!important;line-height:1.6!important;color:var(--wt-text-2)!important;max-width:44ch!important}
details.quiet-section #calculator>div:first-child>small{display:block!important;margin:0!important;font-size:0.8125rem!important;line-height:1.6!important;color:var(--wt-text-3)!important;max-width:44ch!important}
details.quiet-section .calculator-inputs{display:flex!important;flex-direction:column!important;gap:0!important;min-width:0!important;margin:0!important;padding:0!important}
details.quiet-section .calculator-inputs>label{display:flex!important;flex-direction:column!important;gap:8px!important;max-width:360px!important;margin:0 0 8px!important;font:500 0.8125rem/1.45 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
details.quiet-section #amount{min-height:56px!important;font:500 1.25rem/1.3 var(--wt-font-text)!important;letter-spacing:.005em!important}
details.quiet-section .calculator-field-error{display:block!important;min-height:1.5em!important;font-size:0.8125rem!important;line-height:1.5!important;color:var(--wt-down)!important}
details.quiet-section #calculation{display:flex!important;flex-direction:column!important;gap:0!important;margin:8px 0 0!important;padding:0!important;min-width:0!important}
details.quiet-section #calculation .calculation-line{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:4px!important;margin:0!important;padding:16px 0!important;border-top:1px solid var(--wt-line)!important}
details.quiet-section #calculation .calculation-source{display:block!important;font:600 0.875rem/1.5 var(--wt-font-text)!important;color:var(--wt-text)!important}
details.quiet-section #calculation .calculation-source .source-title{display:block!important;margin-top:2px!important;font:400 0.8125rem/1.55 var(--wt-font-text)!important;color:var(--wt-text-3)!important}
details.quiet-section #calculation .calculation-answer{display:block!important;font:400 0.9375rem/1.55 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
details.quiet-section #calculation .calculation-answer strong{font-size:0.9375rem!important;font-weight:600!important;color:var(--wt-text)!important}
details.quiet-section #calculation .calculation-ended .calculation-answer{color:var(--wt-text-3)!important}
details.quiet-section .membership-comparison{display:flex!important;flex-direction:column!important;gap:14px!important;margin:0!important;padding:20px 0!important;border-top:1px solid var(--wt-line)!important}
details.quiet-section .membership-provider{margin:0!important;font:600 0.9375rem/1.45 var(--wt-font-text)!important;color:var(--wt-text)!important}
details.quiet-section .membership-offer{display:grid!important;grid-template-columns:minmax(0,auto) minmax(0,1fr)!important;align-items:end!important;gap:12px 40px!important;margin:0!important}
details.quiet-section .membership-rate{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
details.quiet-section #calculation .membership-rate>strong{display:flex!important;align-items:baseline!important;gap:2px!important;font:500 3.5rem/1 var(--wt-font-display)!important;font-variation-settings:'opsz' 72!important;letter-spacing:-.02em!important;color:var(--wt-text)!important}
details.quiet-section #calculation .membership-rate>strong>span{font-size:.5em!important;font-weight:500!important;color:var(--wt-text-2)!important}
details.quiet-section .membership-rate>span{font-size:0.8125rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
details.quiet-section .membership-facts{display:grid!important;gap:0!important;margin:0!important;padding:0!important;min-width:0!important}
details.quiet-section .membership-facts>div{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;justify-content:space-between!important;gap:2px 16px!important;padding:8px 0!important;border-bottom:1px solid var(--wt-line)!important}
details.quiet-section .membership-facts>div:last-child{border-bottom:0!important}
details.quiet-section .membership-facts dt{font-size:0.8125rem!important;line-height:1.5!important;color:var(--wt-text-3)!important}
details.quiet-section .membership-facts dd{margin:0!important;font:600 0.9375rem/1.45 var(--wt-font-text)!important;color:var(--wt-text)!important}
details.quiet-section #calculation .membership-facts strong{font-size:0.9375rem!important}
details.quiet-section .membership-scope{margin:0!important;font-size:0.8125rem!important;line-height:1.6!important;color:var(--wt-text-3)!important}
details.quiet-section .membership-decision{display:flex!important;flex-direction:column!important;gap:4px!important;margin:4px 0 0!important;padding:0!important}
details.quiet-section .membership-eyebrow{display:none!important}
details.quiet-section .membership-decision h3{margin:0!important;font:600 1.0625rem/1.45 var(--wt-font-text)!important;color:var(--wt-text)!important}
details.quiet-section .membership-decision p{margin:0!important;font-size:0.875rem!important;line-height:1.6!important;color:var(--wt-text-2)!important;max-width:56ch!important}
details.quiet-section .membership-primary{align-self:flex-start!important;justify-content:space-between!important;min-width:min(100%,260px)!important}
details.quiet-section .membership-primary>span[aria-hidden=true]{color:var(--wt-accent)!important;transition:translate var(--wt-t-ui) var(--wt-ease)!important}
@media (hover:hover){details.quiet-section .membership-primary:hover>span[aria-hidden=true]{translate:3px 0!important}}
details.quiet-section .membership-bonus-note{margin:0!important;font-size:0.8125rem!important;line-height:1.6!important;color:var(--wt-text-3)!important}
details.quiet-section .membership-details{margin:0!important;border-top:1px solid var(--wt-line)!important;border-bottom:1px solid var(--wt-line)!important}
details.quiet-section .membership-detail-body{display:flex!important;flex-direction:column!important;gap:8px!important;padding:4px 0 16px!important}
details.quiet-section .membership-detail-body p{margin:0!important;font-size:0.875rem!important;line-height:1.6!important;color:var(--wt-text-2)!important}
details.quiet-section .membership-detail-body>div{display:flex!important;flex-direction:column!important;gap:0!important;margin:8px 0!important}
details.quiet-section .skt-value{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;justify-content:space-between!important;gap:2px 16px!important;padding:8px 0!important;border-bottom:1px solid var(--wt-line)!important}
details.quiet-section .skt-value span{font-size:0.8125rem!important;color:var(--wt-text-3)!important}
details.quiet-section #calculation .skt-value strong{font-size:0.9375rem!important;font-weight:600!important;color:var(--wt-text)!important}
details.quiet-section .membership-detail-body aside{display:flex!important;flex-direction:column!important;gap:6px!important;margin:8px 0 0!important;padding:14px 0 0!important;border-top:1px solid var(--wt-line)!important}
details.quiet-section #calculation .membership-detail-body aside strong{font-size:0.875rem!important;color:var(--wt-accent)!important}
details.quiet-section .membership-net{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:4px 12px!important;margin:0!important}
details.quiet-section #calculation .membership-net strong{font:500 1.8125rem/1.15 var(--wt-font-display)!important;color:var(--wt-text)!important}
details.quiet-section #google-points-result:not([hidden]){display:block!important;margin:0!important;padding:16px 0!important;border-top:1px solid var(--wt-line)!important}
details.quiet-section .google-points-number{font:500 1.75rem/1.15 var(--wt-font-display)!important;color:var(--wt-text)!important}
details.quiet-section #provider-programs{grid-column:1/-1!important;display:flex!important;flex-direction:column!important;margin:0!important;padding:0!important}
details.quiet-section #provider-programs:empty{display:none!important}
details.quiet-section #provider-programs .source-status{display:flex!important;flex-direction:column!important;gap:4px!important;padding:16px 0!important;border-top:1px solid var(--wt-line)!important;font-size:0.875rem!important;color:var(--wt-text-2)!important}
details.quiet-section #provider-programs .source-status strong{color:var(--wt-text)!important}
details.quiet-section #provider-programs a{color:var(--wt-accent)!important;font-weight:600!important;min-height:var(--wt-target)!important;display:inline-flex!important;align-items:center!important}

/* 3b. Feedback: a heading over its fields. */
#native-feedback{display:block!important;margin:0!important;padding:clamp(40px,4vw,64px) 0 clamp(40px,4vw,56px)!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:inset 0 1px 0 var(--wt-line-2)!important;
  border-image:linear-gradient(var(--wt-canvas),var(--wt-canvas)) fill 0 / 0 / 0 100vmax!important}
#native-feedback .native-feedback-form{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)!important;gap:20px clamp(32px,5vw,80px)!important;align-items:start!important;margin:0!important;padding:0!important}
#native-feedback .native-feedback-head{grid-column:1!important;grid-row:1/span 2!important;display:block!important;margin:0!important;padding:0!important}
#native-feedback .native-feedback-head .eyebrow{display:none!important}
#native-feedback .native-feedback-head h3{margin:0!important;font:500 clamp(1.625rem,1.6vw + 12px,32px)/1.18 var(--wt-font-display)!important;font-variation-settings:'opsz' 48!important;letter-spacing:-.012em!important;color:var(--wt-text)!important;text-wrap:balance!important}
html[lang=ko] #native-feedback .native-feedback-head h3{font:600 clamp(1.3125rem,1vw + 12px,26px)/1.38 var(--wt-font-text)!important;letter-spacing:-.02em!important}
#native-feedback .native-feedback-fields{grid-column:2!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"type rating" "message message"!important;gap:18px 16px!important;margin:0!important;padding:0!important}
#native-feedback .native-feedback-fields>label{display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important;margin:0!important}
#native-feedback .native-feedback-fields>label:nth-child(1){grid-area:type!important}
#native-feedback .native-feedback-fields>label:nth-child(2){grid-area:rating!important}
#native-feedback .native-feedback-fields>label:nth-child(3){grid-area:message!important}
#native-feedback .native-feedback-fields>label>span{display:block!important;font:500 0.8125rem/1.45 var(--wt-font-text)!important;color:var(--wt-text-2)!important}
#native-feedback .native-feedback-fields textarea{min-height:140px!important}
#native-feedback .native-feedback-footer{grid-column:2!important;display:flex!important;justify-content:flex-end!important;margin:0!important;padding:0!important}
#native-feedback .native-feedback-footer button[type=submit]{min-width:min(100%,200px)!important}
#native-feedback .native-feedback-status{grid-column:2!important;margin:0!important;font-size:0.875rem!important;line-height:1.55!important;color:var(--wt-text-2)!important;text-align:right!important}
#native-feedback .native-feedback-status:empty{display:none!important}

/* 3c. Footer: a line. */
#home>footer{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:4px 24px!important;margin:0!important;padding:24px 0 0!important;border:0!important;box-shadow:inset 0 1px 0 var(--wt-line)!important;background:none!important;border-image:linear-gradient(var(--wt-canvas),var(--wt-canvas)) fill 0 / 0 / 0 100vmax 100vh!important;
  font:400 0.8125rem/1.55 var(--wt-font-text)!important;color:var(--wt-text-3)!important}
#home>footer>span{flex:1 1 280px!important;min-width:0!important;color:var(--wt-text-3)!important;font-size:0.8125rem!important;line-height:1.6!important}
#home>footer>span i{display:inline!important;margin:0 .45em!important;font-style:normal!important;color:var(--wt-text-3)!important}
#home>footer>button{flex:0 1 auto!important;gap:8px!important;padding:0 4px!important;font:500 0.8125rem/1.45 var(--wt-font-text)!important;color:var(--wt-text-2)!important;text-decoration-color:transparent!important}
@media (hover:hover){#home>footer>button:hover{color:var(--wt-text)!important;text-decoration:underline!important;text-decoration-color:rgba(255,255,255,.3)!important}}
#home>footer>button svg{flex:none!important;width:15px!important;height:15px!important;color:var(--wt-text-3)!important}
#home>footer>button[data-action=motion][aria-pressed=true] svg{color:var(--wt-accent)!important}
#home>footer>button[data-action=motion]{margin-left:auto!important}

/* ---------------------------------------------------------------- 4. the toast: a calm ink pill above the dock */
#toast{position:fixed!important;left:50%!important;bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;z-index:40!important;width:max-content!important;max-width:min(520px,calc(100% - 32px))!important;margin:0!important;padding:14px 20px!important;
  border:0!important;border-radius:16px!important;background:rgba(26,27,33,.97)!important;color:var(--wt-text)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.06),0 24px 60px -16px rgba(0,0,0,.8)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;font:500 0.875rem/1.5 var(--wt-font-text)!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:keep-all!important;pointer-events:none!important}

/* ---------------------------------------------------------------- 5. narrow screens */
@media (max-width:860px){
  details.quiet-section #calculator,#native-feedback .native-feedback-form{grid-template-columns:minmax(0,1fr)!important}
  #native-feedback .native-feedback-head,#native-feedback .native-feedback-fields,#native-feedback .native-feedback-footer,#native-feedback .native-feedback-status{grid-column:1!important;grid-row:auto!important}
}
@media (max-width:520px){
  #dialog{padding:24px 20px!important}
  #dialog>.close{margin:-10px -8px 0 12px!important}
  #dialog :is(#dialog-title,h2){font-size:1.625rem!important}
  html[lang=ko] #dialog :is(#dialog-title,h2){font-size:1.375rem!important}
  #dialog .pc-footer>div{grid-template-columns:minmax(0,1fr)!important}
  #dialog .pc-footer>div>.pc-cancel{order:2!important}
  #dialog .promotion-facts>div{grid-template-columns:minmax(0,1fr)!important}
  #dialog #dialog-content>.source-status{grid-template-columns:minmax(0,1fr)!important}
  #dialog #dialog-content>.source-status>a{grid-column:1!important;grid-row:auto!important;justify-content:flex-start!important;padding:0!important}
  #native-feedback .native-feedback-fields{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"type" "rating" "message"!important}
  #native-feedback .native-feedback-footer button[type=submit]{width:100%!important}
  #native-feedback .native-feedback-status{text-align:left!important}
  details.quiet-section .membership-offer{grid-template-columns:minmax(0,1fr)!important}
  details.quiet-section .calculator-inputs>label{max-width:none!important}
  details.quiet-section>summary{min-height:64px!important}
  #home>footer{justify-content:flex-start!important;gap:0 20px!important}
  #home>footer>span{flex:1 1 100%!important;margin:0 0 4px!important}
  #home>footer>button,#home>footer>button[data-action=motion]{margin-left:-4px!important}
  #toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
}
@media (max-height:500px) and (min-width:521px){
  #toast{bottom:16px!important}
}

/* ---------------------------------------------------------------- 6. motion off / reduced */
@media not all{
  :is(#dialog,details.quiet-section,#native-feedback,#home>footer,#toast):not(#_),:is(#dialog,details.quiet-section,#native-feedback,#home>footer):not(#_) :is(*,*::before,*::after){transition-duration:1ms!important;animation-duration:1ms!important}
}
body.motion-off :is(#dialog,details.quiet-section,#native-feedback,#home>footer,#toast):not(#_),body.motion-off :is(#dialog,details.quiet-section,#native-feedback,#home>footer):not(#_) :is(*,*::before,*::after){transition-duration:1ms!important;animation-duration:1ms!important}
}
/* Step 3, soft rules (unlayered, not important): properties that JS also drives, so an inline style or a WAAPI animation must still win.
   The sheet rises 14px while app.js fades it in (opacity is app.js's; the rise is transform-only and never changes the measured height).
   The toast keeps refinement.css's own show/hide (opacity + translate) on a longer, softer curve. */
#dialog[open]{transition:translate 640ms cubic-bezier(.22,1,.36,1)}
@starting-style{#dialog[open]{translate:0 14px}}
#toast{transition:opacity 420ms cubic-bezier(.22,1,.36,1),transform 640ms cubic-bezier(.22,1,.36,1)}
@media not all{#dialog[open],#toast{transition:none}@starting-style{#dialog[open]{translate:none}}}
body.motion-off #dialog[open],body.motion-off #toast{transition:none}
@starting-style{body.motion-off #dialog[open]{translate:none}}
/* The older .glass rule (beta-integration.css) clips these blocks, which cut the focus ring of a control at their edge. quiet-ui.js still
   clips the calculator inline while it slides (inline beats this). */
html body details.quiet-section,html body #calculator.savings-lab,html body #native-feedback{overflow:visible}
/* <<< step3 */

/* >>> fix1: stress fix round 1 (2026-10-21)
   Every rule here answers one harness finding; all in @layer wt-fix (declared first in this file), every declaration !important, so
   for important declarations it outranks wt-deals, wt-tools and every unlayered stylesheet.
   ---------------------------------------------------------------------------------------------------------------------------- */
@layer wt-fix{
:root{--wt-field-edge:#7b7770}

/* Event tabs (Google Play, Galaxy Store): a wrapping row of compact tabs ABOVE the event they control, so the visual order matches
   the DOM/focus order (tablist, then panel) and 40 events take a few rows instead of one full-width row each. */
#deals .deal-card .promotion-event-tabs{order:0!important;margin:0 0 var(--wt-s3)!important;display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;
  gap:0 20px!important;border-top:0!important;border-bottom:1px solid var(--wt-line)!important}
#deals .deal-card .promotion-event-tabs>button{flex:0 1 auto!important;min-width:var(--wt-target)!important;max-width:100%!important;justify-content:flex-start!important}
#deals .deal-card .promotion-event-tabs>button::before{top:auto!important;bottom:-1px!important}
#deals .deal-card .promotion-pages{order:1!important}

/* Selection shown by more than colour (WCAG 1.4.1): chart ranges and route filters carry the same champagne underline as the tile tabs. */
html body #intelligence .price-trend .trend-ranges button,#deals .filter-tabs>button{position:relative!important}
html body #intelligence .price-trend .trend-ranges button[aria-pressed=true]{background:transparent!important}
#deals .filter-tabs>button[aria-pressed=true]{background:transparent!important;box-shadow:none!important}
html body #intelligence .price-trend .trend-ranges button::after,#deals .filter-tabs>button::after{content:''!important;position:absolute!important;left:8px!important;right:8px!important;bottom:0!important;
  height:3px!important;border-radius:2px!important;background:var(--wt-accent)!important;opacity:0!important;scale:.4 1!important;
  transition:opacity var(--wt-t-ui) var(--wt-ease),scale var(--wt-t-surface) var(--wt-ease)!important;pointer-events:none!important}
#deals .filter-tabs>button::after{left:12px!important;right:12px!important}
html body #intelligence .price-trend .trend-ranges button[aria-pressed=true]::after,#deals .filter-tabs>button[aria-pressed=true]::after{opacity:1!important;scale:1 1!important}

/* Field boundaries (WCAG 1.4.11): the filled well keeps its fill and gains one bottom rule at >= 3:1 against ink and sheet.
   Drawn as an inset shadow 2 screen px tall: a sheet that is zoomed to fit (app.js fitDialog, --dialog-fit) would otherwise snap a
   2px border down to 1 device pixel. */
:where(#dialog,details.quiet-section,#native-feedback,#deals) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea){
  box-shadow:inset 0 calc(-2px / var(--dialog-fit,1)) 0 var(--wt-field-edge),inset 0 0 0 1px rgba(255,255,255,.07)!important}
@media (hover:hover){:where(#dialog,details.quiet-section,#native-feedback,#deals) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea):hover{
  box-shadow:inset 0 calc(-2px / var(--dialog-fit,1)) 0 var(--wt-field-edge),inset 0 0 0 1px rgba(255,255,255,.12)!important}}
:where(#dialog,details.quiet-section,#native-feedback,#deals) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea):focus{
  box-shadow:inset 0 calc(-2px / var(--dialog-fit,1)) 0 var(--wt-accent),inset 0 0 0 1px rgba(228,201,166,.55)!important}
:where(#dialog,details.quiet-section,#native-feedback,#deals) :is(input,select,textarea)[aria-invalid=true]{
  box-shadow:inset 0 calc(-2px / var(--dialog-fit,1)) 0 #ff8f86,inset 0 0 0 1px rgba(255,143,134,.7)!important}

/* Payment-conditions sheet: the footer is part of the sheet's own scroll (it was pinned with no fill and covered the content on short
   screens, 390-430px tall and at 250-400% zoom). The whole sheet scrolls as one; Apply is reached by scrolling, never covered. */
#dialog .pc-footer,#dialog .pc-header{position:static!important}

/* Small landscape phones: the logo shrinks to its mark; keep a full 44px target. */
html body .site-header .home-logo{min-width:44px!important}

/* Dock: clear of the home-indicator inset (viewport-fit=cover makes env() real on iPhone); 10px elsewhere, as before. */
@media (max-width:520px),(min-height:501px){body .site-header .header-navigation{bottom:max(10px,env(safe-area-inset-bottom))!important}}
/* Very short screens (400% zoom, 180px tall): a slimmer dock leaves three quarters of the screen to read. */
@media (max-height:260px) and (max-width:520px){
  body .site-header .header-navigation,body .site-header .header-navigation>*,body .site-header .header-navigation nav a,body .site-header .header-navigation .search-button{height:44px!important;min-height:44px!important}
  /* icons only (each keeps its aria-label); the moving highlight fits the slimmer bar */
  html body .site-header .header-navigation>nav a::after,html body .site-header .header-navigation .search-button::after{content:none!important;display:none!important}
  html body .site-header nav .nav-indicator{display:none!important}
}

/* Reduced transparency: the chips over the art become solid. */
@media (prefers-reduced-transparency:reduce){
  html body .site-header :is(#account-button.header-account,.header-language),html body .site-header .header-navigation,html body .site-header .header-navigation>*{
    background:#16171c!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html[lang] body .hero .art-credit{background:#16171c!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* Windows contrast themes: selected items use the system Highlight pair; every control and field draws a system-colour edge. */
@media (forced-colors:active){
  :is([role=tab][aria-selected=true],.header-navigation nav a[aria-current],.game-card[aria-pressed=true]){
    forced-color-adjust:none!important;background:Highlight!important;color:HighlightText!important}
  :is([role=tab][aria-selected=true],.header-navigation nav a[aria-current],.game-card[aria-pressed=true]) *{color:HighlightText!important;fill:currentColor}
  /* Pressed toggles keep their own edge like their siblings and add a heavy Highlight ring inside it. */
  :is(.filter-tabs [aria-pressed],.trend-ranges [aria-pressed]){forced-color-adjust:auto!important}
  :is(.filter-tabs [aria-pressed=true],.trend-ranges [aria-pressed=true]){text-decoration:underline!important;text-decoration-thickness:3px!important;text-underline-offset:7px!important}
  :is(select,input:not([type=hidden],[type=checkbox],[type=radio]),textarea){border-width:2px!important}
  :is(button:not([role=tab]),select,input:not([type=hidden],[type=checkbox],[type=radio]),textarea,summary){border:2px solid ButtonText!important}
  :is(select,input:not([type=hidden],[type=checkbox],[type=radio]),textarea){border-color:FieldText!important}
  .header-navigation nav .nav-indicator{display:none!important}
  /* The ink plates are border-image gradients, which contrast themes keep: drop them so the theme's Canvas shows. */
  :is(#games.games-section,#deals.deals-section)::before,#deals.deals-section::after,details.quiet-section,#native-feedback,#home>footer{border-image:none!important}
}
/* Sheets: the close button sits in its own top row and only .dialog-scroll (around #dialog-content) scrolls, so scrolled text never passes under the close
   (it was sticky over the scrolling text). app.js fitDialog measures the content scroller for the same fit-to-screen zoom as before. */
#dialog[open]{display:flex!important;flex-direction:column!important;overflow:hidden!important;padding:0!important}
#dialog[open]>.close{position:relative!important;float:none!important;top:auto!important;right:auto!important;flex:none!important;align-self:flex-end!important;margin:16px 16px 0 0!important}
#dialog[open]>.dialog-scroll{flex:0 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  padding:4px 32px 32px!important;scrollbar-width:none!important}
#dialog[open]>.dialog-scroll::-webkit-scrollbar{display:none!important}
@media (max-width:520px){#dialog[open]>.close{margin:12px 12px 0 0!important}#dialog[open]>.dialog-scroll{padding:2px 20px 24px!important}}
/* Carousels whose events open with a heading (LG U+): heading, then the event tabs, then the event body. The heading stays the
   panel's first line (aligned with the other tiles' panel headings) and every focusable part of the event comes after the tabs,
   on screen and in the Tab order. The tab row is placed under the heading line; each heading reserves the tallest heading's height
   and the tab row's height below it. live-ui.js measures both (--event-head, --event-tabs). (A subgrid version collapsed in WebKit.) */
#deals .deal-card .carrier-panel:has(>.promotion-event-tabs+.promotion-pages>.promotion-slide>h3:first-child){position:relative!important;--event-head:28px;--event-tabs:45px}
#deals .deal-card .carrier-panel:has(>.promotion-event-tabs+.promotion-pages>.promotion-slide>h3:first-child)>.promotion-event-tabs{
  position:absolute!important;top:calc(var(--event-head) + var(--wt-s2))!important;left:0!important;right:0!important;margin:0!important;z-index:1!important}
#deals .deal-card .carrier-panel:has(>.promotion-event-tabs+.promotion-pages>.promotion-slide>h3:first-child)>.promotion-pages>.promotion-slide>h3:first-child{
  min-height:var(--event-head)!important;margin:0 0 calc(var(--event-tabs) + var(--wt-s2) + var(--wt-s3) - 8px)!important}

/* Refresh: "Checking sources… ·" is prefixed to the status line while a check runs; the line reserves the extra line it can need,
   so pressing Refresh never moves the page (it wrapped 1 -> 2 lines and pushed everything below down 4px). */
#deals .refresh-cluster>.freshness{min-height:max(var(--wt-target),3em)!important}
@media (max-width:400px){#deals .refresh-cluster>.freshness{min-height:4.5em!important}}

/* Larger default text sizes (browser setting): controls grow with their label instead of a fixed height. */
#dialog .auth .auth-btn{height:auto!important;min-height:var(--wt-target)!important;padding-block:10px!important}
#deals .deal-card .carrier-field input{height:auto!important;min-height:48px!important}

/* Sheet scroller: keep focus rings and scrolled-to controls clear of its edges. */
#dialog[open]>.dialog-scroll{scroll-padding:16px!important;padding-top:8px!important}
}
/* <<< fix1 */

/* >>> r2: lead-designer pass (2026-10-21), answering the creative-director review (out-look.md) point by point.
   Same ownership rule as the earlier sections, one step higher: @layer wt-r2 is declared first in this file (before wt-fix), and every
   declaration is !important, so for important declarations it outranks wt-fix, wt-deals, wt-tools and every unlayered stylesheet.
   Decisions
   - Tiles are not objects: no fill, no radius, no shadow. Columns are set apart by gutters, each tile opens with one hairline, and the
     content sets the rhythm. Equal row heights stay (subgrid), so the closing link of each tile sits on one shared bottom line.
   - The price card is not a card: its ink is a soft local scrim (a blurred pool) behind the text, feathered into the art, no edge.
   - The art feathers into the ground at the foot of the hero, under its content, so no rectangle of art shows while scrolling.
   - One numeric system: tabular lining figures everywhere; Bodoni Moda only for the two hero figures and the display titles.
   - Glass is gone: the header chips and the dock are solid ink, no backdrop blur.
   ---------------------------------------------------------------------------------------------------------------------------- */
@layer wt-r2{

/* The ink pool behind text over the art: a radial falloff nine-sliced by border-image, so its interior is solid ink and only the
   border band fades (a feathered rectangle without a blur filter, which cost a repaint on every scrolled frame in software raster). */
:root{--wt-pool:radial-gradient(closest-side,rgba(11,12,15,.86) 0%,rgba(11,12,15,.86) 8%,rgba(11,12,15,.7) 40%,rgba(11,12,15,.32) 72%,rgba(11,12,15,0) 100%)!important}
/* ---------------------------------------------------------------- 0. figures: one system */
:is(#app,#dialog,#toast) :where(*){font-variant-numeric:lining-nums tabular-nums!important}
#deals .deal-card .carrier-rate strong{font-family:var(--wt-font-text)!important;font-weight:500!important;font-size:2.75rem!important;line-height:1!important;letter-spacing:-.035em!important;font-variation-settings:normal!important}
/* The facts column never collapses under a long rate caption (it narrowed to 0 and its text ran past the tile). */
#deals .deal-card .carrier-key-facts{grid-template-columns:minmax(0,auto) minmax(min(8.5rem,50%),1fr)!important}
@media (max-width:360px){#deals .deal-card .carrier-key-facts{grid-template-columns:minmax(0,1fr)!important}}
#deals .deal-card .carrier-rate strong span{font-size:.55em!important;margin-left:1px!important;letter-spacing:-.01em!important}
#dialog .account-spending-summary strong,#dialog .carrier-modal-facts strong{font:500 1.5rem/1.2 var(--wt-font-text)!important;letter-spacing:-.02em!important;font-variation-settings:normal!important}
#dialog .modal-price{font:500 1.875rem/1.15 var(--wt-font-text)!important;letter-spacing:-.025em!important;font-variation-settings:normal!important}
details.quiet-section #calculation .membership-rate>strong{font:500 3rem/1 var(--wt-font-text)!important;letter-spacing:-.035em!important;font-variation-settings:normal!important}
details.quiet-section #calculation .membership-net strong,details.quiet-section .google-points-number{font:500 1.625rem/1.2 var(--wt-font-text)!important;letter-spacing:-.02em!important;font-variation-settings:normal!important}

/* An empty value ("—" in the data) reads as a quiet en rule in the value's place; the data and its text are unchanged (atelier.js tags it). */
.wt-novalue{position:relative!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.wt-novalue::after{content:'–' / ''!important;position:absolute!important;left:0!important;top:0!important;color:var(--wt-text-3)!important;-webkit-text-fill-color:var(--wt-text-3)!important;font-weight:400!important}
:is(.trend-now,.trend-avg).wt-novalue::after{left:0!important}

/* ---------------------------------------------------------------- 1. header and dock: solid ink, no glass */
html body .site-header :is(#account-button.header-account,.header-language){background:rgba(14,15,19,.88)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
@media (hover:hover) and (pointer:fine){html body .site-header :is(#account-button.header-account,.header-language):hover{background:rgba(28,29,35,.94)!important}}
html body .site-header #account-button.signed-in{box-shadow:inset 0 0 0 1px rgba(111,214,173,.35)!important}
@media not all and (max-height:500px) and (min-width:521px){
  html body .site-header .header-navigation{background:rgba(17,18,22,.95)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px -14px rgba(0,0,0,.7)!important}
}
@media (max-height:500px) and (min-width:521px){
  html body .site-header .header-navigation>:is(nav,.header-actions){background:rgba(17,18,22,.95)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-transparency:reduce){
  html body .site-header :is(#account-button.header-account,.header-language),html body .site-header .header-navigation,html body .site-header .header-navigation>*{background:#16171c!important}
}
/* Phones: nothing behind the dock (owner 2026-10-26: "why is the block back of the task bar there"); the capsule floats over the page. */
/* Phones: the brand keeps its name when there is room; BETA is a small tag after it, not a lone pill. */
@media (max-width:520px){
  html body .site-header .home-logo{gap:8px!important}
  html body .site-header .home-logo .home-logo-icon{width:30px!important;height:30px!important;border-radius:8px!important}
  html body .site-header .beta-badge{padding:0!important;background:transparent!important;color:var(--wt-accent)!important;font:600 0.5625rem/1 var(--wt-font-text)!important;letter-spacing:.16em!important}
}
@media (max-width:520px) and (min-width:380px){
  html body .site-header .home-logo .home-logo-wordmark{display:inline!important;min-width:0!important;font:600 0.8125rem/1.25 var(--wt-font-text)!important;letter-spacing:-.01em!important;color:var(--wt-text)!important;white-space:normal!important;overflow-wrap:anywhere!important}
}

/* ---------------------------------------------------------------- 2. hero: the art feathers into the ground; the English script keeps its swash inside the gutter */
html body .hero{position:relative!important;isolation:isolate!important}
html body .hero::after{content:''!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:min(40vh,340px)!important;z-index:-1!important;pointer-events:none!important;
  border-image:linear-gradient(to bottom,rgba(12,13,16,0) 0%,rgba(12,13,16,.55) 45%,var(--wt-canvas) 100%) fill 0 / 0 / 0 100vmax!important}
@media (max-width:899px){html body .hero::after{height:min(30vh,260px)!important}}
@media (max-width:899px){html[lang=en] body .hero h1{padding-left:.14em!important}}

/* Art credit: a caption in the same soft shadow as the price card, no chip. */
html[lang] body .hero .art-credit{position:relative!important;isolation:isolate!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0 0 0 2px!important;gap:4px!important;color:var(--wt-text-2)!important}
html body .hero .art-credit::before{content:''!important;position:absolute!important;z-index:-1!important;pointer-events:none!important;inset:-14px -22px!important;border-image:var(--wt-pool) fill 49% / 14px 22px / 0!important}
html body .hero .art-credit>span:not(.art-index){letter-spacing:.01em!important}

/* ---------------------------------------------------------------- 3. price card: a local scrim, not a slab */
html body #intelligence.price-panel.glass,html body #intelligence.price-panel.glass.depth-active{background:transparent!important;box-shadow:none!important;border-radius:0!important;isolation:isolate!important}
html body #intelligence.price-panel.glass::before{content:''!important;display:block!important;position:absolute!important;z-index:-1!important;pointer-events:none!important;inset:-60px -24px -60px -60px!important;
  border-image:var(--wt-pool) fill 49% / 70px 36px 70px 70px / 0!important}
@media (max-width:899px){html body #intelligence.price-panel.glass{border-radius:0!important}html body #intelligence.price-panel.glass::before{inset:-14px max(-40px,calc((100% - 100vw) / 2)) -44px!important;border-image-width:26px 0 56px 0!important}}
@media (prefers-reduced-transparency:reduce){html body #intelligence.price-panel.glass::before{inset:0!important;border-image:none!important;border-radius:24px!important;background:#0e0f13!important}
  html body .hero .art-credit::before{inset:-4px -10px!important;border-image:none!important;border-radius:999px!important;background:#16171c!important}}
@media (forced-colors:active){html body #intelligence.price-panel.glass::before,html body .hero .art-credit::before,html body .hero::after{display:none!important}
  html body #intelligence.price-panel.glass,html[lang] body .hero .art-credit{background:Canvas!important}}
/* The hero copy (title, line, action) paints above the card's scrim where they meet on narrow screens. */
html body .hero>.hero-copy{position:relative!important;z-index:1!important}
/* Chart: a soft wash under the line, a gentle break at gaps (game-signal-ui.mjs feathers the fill there), a solid hairline for the average. */
html body #intelligence .price-trend .trend-area{opacity:1!important}
html body #intelligence .price-trend #trend-fill>stop:first-child{stop-opacity:.16!important}
html body #intelligence .price-trend #trend-fill>stop:last-child{stop-opacity:0!important}
html body #intelligence .price-trend .trend-line{stroke-linecap:round!important;stroke-linejoin:round!important}
html body #intelligence .price-trend .trend-average{stroke-dasharray:none!important;stroke-opacity:.34!important;stroke-width:1!important}
/* Legend: a dot for now, a short hairline rule for the average (it was a dashed border that read as "---"). */
html body #intelligence .trend-figures>div+div>span::before{width:16px!important;height:1px!important;border:0!important;border-radius:1px!important;background:rgba(255,255,255,.5)!important;transform:translateY(-4px)!important}
/* The card's closing action fades in with the rest of a game switch (atelier.js animates --wt-cut-o; its opacity is pinned). */
html body #intelligence [data-signal-conditions]{opacity:var(--wt-cut-o,1)!important}
/* Fine pointers: the range tabs are a comfortable 40px target. */
@media (hover:hover) and (pointer:fine){html body #intelligence .price-trend .trend-ranges button{min-height:40px!important;padding:10px 12px!important}}

/* ---------------------------------------------------------------- 4. game row (phones) */
@media (max-width:900px){
  #games .section-copy{flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:6px!important}
  #games .section-copy>h2{flex:none!important}
}
@media (max-width:680px){
  #games .game-card strong{display:block!important;line-height:1.35!important;min-height:2.7em!important;text-wrap:balance!important}
}

/* ---------------------------------------------------------------- 5. deals toolbar */
#deals #v1-profile-button{background:transparent!important;box-shadow:none!important;border:0!important;padding-inline:0!important;color:var(--wt-accent)!important}
@media (hover:hover){#deals #v1-profile-button:hover{background:transparent!important;color:var(--wt-accent-hi)!important}}
#deals .refresh-button{background:transparent!important;box-shadow:none!important;border:0!important;padding-inline:0!important;color:var(--wt-text-2)!important}
#deals .refresh-cluster{column-gap:28px!important}
#deals .refresh-cluster>.freshness{text-decoration:none!important;color:var(--wt-text-3)!important;gap:7px!important}
#deals .refresh-cluster>.freshness::before{content:''!important;flex:none!important;width:13px!important;height:13px!important;background:no-repeat center / contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa69f' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5l3 2'/%3E%3C/svg%3E")!important}
@media (hover:hover){#deals .refresh-cluster>.freshness:hover{color:var(--wt-text-2)!important;text-decoration:underline!important;text-decoration-color:rgba(255,255,255,.3)!important;text-underline-offset:4px!important}}
#deals #show-ended{width:22px!important;height:22px!important}
@media (max-width:680px){
  #deals .refresh-cluster{justify-content:flex-start!important}
  #deals .refresh-cluster>:is(#v1-profile-button,.refresh-button){flex:0 1 auto!important}
  #deals .filter-tabs{gap:0!important}
  #deals .filter-tabs>button{flex:1 1 auto!important;min-width:var(--wt-target)!important;padding-inline:6px!important;font-size:0.8125rem!important}
  #deals .filter-tabs>button::after{left:6px!important;right:6px!important}
  #deals .platform-select{justify-content:flex-start!important;gap:12px!important}
  #deals .platform-select select{flex:0 1 auto!important;max-width:none!important;min-width:min(200px,60%)!important}
}

/* ---------------------------------------------------------------- 6. deal tiles: gutters and one hairline, no slabs */
#deals #deal-grid{column-gap:40px!important}
@media (min-width:1000px){#deals #deal-grid{column-gap:48px!important}}
#deals #deal-grid>.deal-card,#deals #deal-grid>.deal-card.glass{--pad:0px!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;
  padding:22px 0 0!important;margin:0 0 40px!important;border:0!important;border-top:1px solid var(--wt-line-2)!important}
@media (min-width:1000px){#deals #deal-grid>.deal-card,#deals #deal-grid>.deal-card.glass{margin-bottom:48px!important}}
@media (max-width:680px){#deals #deal-grid>.deal-card,#deals #deal-grid>.deal-card.glass{padding-top:20px!important}}
#deals .feed-empty{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:24px 0!important;border-top:1px solid var(--wt-line-2)!important}
/* Tile calculator fields: with no tile fill behind them, the field draws its whole outline at >= 3:1 against the ink (WCAG 1.4.11). */
#deals .deal-card .carrier-field input{box-shadow:inset 0 0 0 1px #6a6761,inset 0 -2px 0 var(--wt-field-edge)!important}
@media (hover:hover){#deals .deal-card .carrier-field input:hover{box-shadow:inset 0 0 0 1px #84807a,inset 0 -2px 0 var(--wt-field-edge)!important}}
#deals .deal-card .carrier-field input:focus{box-shadow:inset 0 0 0 1px rgba(228,201,166,.7),inset 0 -2px 0 var(--wt-accent)!important}
#deals .deal-card .carrier-field input[aria-invalid=true]{box-shadow:inset 0 0 0 1px rgba(255,143,134,.8),inset 0 -2px 0 #ff8f86!important}
/* The closing link of a panel sits on the row's shared bottom line, set off by a little air. */
#deals .deal-card .carrier-panel>:is(.carrier-text-action,.carrier-closed-actions,.provider-input-action):last-child{padding-top:4px!important}
/* Event pagers are chapters, not a second tab bar: no rule under them, the chosen chapter keeps its champagne mark. */
#deals .deal-card .promotion-event-tabs{border-bottom:0!important;margin-bottom:var(--wt-s2)!important}
/* Store carousels (Galaxy Store, Google Play): the event first, then its notes (the notes sat between the pager and the event). */
#deals .deal-card .carrier-panel:has(>[data-promotion-company]>.promotion-pages)>:not([data-promotion-company],h3,.membership-kicker){order:3!important}
/* A heading followed by a single row (Epic): the row's title is one step below the heading. */
#deals .deal-card .carrier-panel>h3~.promotion-slide>.carrier-text-action strong{font-size:0.9375rem!important;line-height:1.45!important}
/* ---------------------------------------------------------------- 7. the switch: the new art settles as it dissolves in (atelier.js times the card after it) */
@media (min-width:0){
  body:not(.motion-off) #artwork-stage .backdrop{animation:wt-art-settle 1800ms cubic-bezier(.22,1,.36,1) both!important;transform-origin:50% 40%!important;will-change:opacity,scale!important}
}
}
@keyframes wt-art-settle{from{scale:1.035}to{scale:1}}
@property --wt-cut-o{syntax:'<number>';inherits:false;initial-value:1}
/* <<< r2 */

/* >>> r3: final polish (2026-10-21), answering the creative director's second review (worst first).
   Same ownership rule one step higher: @layer wt-r3 is declared first in this file and every declaration is !important, so it
   outranks wt-r2, wt-fix and every older layer and stylesheet. Presentation only.
   Decisions
   - The card's ink is one large elliptical falloff, darkest near the card's upper right and fading continuously into the art over
     about 250px: no flat middle, no edge, no corner. Every line of card text still sits on at least .8 ink (contrast holds on the
     brightest art). During a game switch the pool dims toward the art and returns with the heading (atelier.js), so the cut never
     shows an empty dark shape.
   - A record that barely moves is drawn in a shorter frame with a fainter wash and one baseline (game-signal-ui.mjs tags it).
   - Phones: one gutter (about 20px at 390) for the header, the hero title, the card text, the sections and the tiles; the first
     screen is tightened so the look-back readout clears the dock at 390x844.
   - Tiles: content is set from the top, the closing link follows the content (no empty well above it).
   - Desktop controls share one 40px rhythm with the chart's range buttons; the page-level form fields are hairlines, not wells.
   ---------------------------------------------------------------------------------------------------------------------------- */
@layer wt-r3{

/* ---------------------------------------------------------------- 1. price card pool */
:root{--wt-pool-ell:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,12,15,0.93) 0%,rgba(11,12,15,0.91) 30%,rgba(11,12,15,0.88) 50%,rgba(11,12,15,0.82) 66%,rgba(11,12,15,0.72) 72%,rgba(11,12,15,0.58) 78%,rgba(11,12,15,0.42) 84%,rgba(11,12,15,0.27) 89%,rgba(11,12,15,0.12) 94%,rgba(11,12,15,0.05) 97%,rgba(11,12,15,0) 100%)!important}
/* Side by side (the card at the right of the title): the ellipse is drawn past the card by border-image outsets, which paint but never
   widen the page; its centre sits a little up and to the right of the card's centre. */
@media (min-width:901px){
  html body #intelligence.price-panel.glass::before{inset:0!important;border-radius:0!important;background:none!important;
    border-image:var(--wt-pool-ell) fill 0 / 0 / 463px 270px 403px 230px!important}
}
/* Tablets (the card under the title): the same ellipse, centred on the card. */
@media (min-width:520px) and (max-width:900px){
  html body #intelligence.price-panel.glass::before{inset:0!important;border-radius:0!important;background:none!important;
    border-image:var(--wt-pool-ell) fill 0 / 0 / 300px 260px 300px 260px!important}
}
/* Phones (the card spans the column): a full-width wash with a long soft top, a gently darker middle and a soft foot. */
@media (max-width:519px){
  html body #intelligence.price-panel.glass::before{inset:-72px calc((100% - 100vw) / 2) -48px!important;border-radius:0!important;border-image:none!important;
    background:linear-gradient(to bottom,rgba(11,12,15,0) 0,rgba(11,12,15,.34) 30px,rgba(11,12,15,.7) 60px,rgba(11,12,15,.86) 88px,rgba(11,12,15,.9) 50%,
      rgba(11,12,15,.86) calc(100% - 92px),rgba(11,12,15,.5) calc(100% - 40px),rgba(11,12,15,0) 100%)!important}
}
@media (prefers-reduced-transparency:reduce){html body #intelligence.price-panel.glass::before{inset:0!important;border-image:none!important;border-radius:24px!important;background:#0e0f13!important}}
@media (forced-colors:active){html body #intelligence.price-panel.glass::before{display:none!important}}

/* ---------------------------------------------------------------- 3. a level record: a shorter frame, a fainter wash, one baseline */
html body #intelligence .price-trend .trend-chart[data-trend-shape=level] .trend-plot{aspect-ratio:360 / 104!important;height:auto!important;overflow:hidden!important}
html body #intelligence .price-trend .trend-chart[data-trend-shape=level] .trend-grid:nth-of-type(n+2){stroke-opacity:0!important}
html body #intelligence .price-trend .trend-chart[data-trend-shape=level] #trend-fill>stop:first-child{stop-opacity:.07!important}
html body #intelligence .price-trend .trend-chart[data-trend-shape=level] .trend-grid{stroke-opacity:.1!important}

/* ---------------------------------------------------------------- 4. phones: one gutter */
@media (max-width:899px){
  :root{--page-gutter:clamp(16px,5.2vw,20px)!important}
  html body .hero{padding-left:0!important;padding-right:0!important}
}
@media (max-width:519px){
  html body #intelligence.price-panel.glass{padding-left:0!important;padding-right:0!important}
}

/* ---------------------------------------------------------------- 5. phones: the first screen ends above the dock
   Title, verdict, graph, range tabs and the look-back readout all clear the dock at 390x844 (Korean and English): the slack is taken
   from spacing only (the intro's reserved second line already gives the call to action its air), never from type or targets. */
@media (max-width:519px){
  html body header.site-header{margin-top:12px!important}
  html body .hero{padding-top:4px!important;row-gap:14px!important}
  html[lang=en] body .hero h1{margin-bottom:16px!important}
  html body .hero .intro{margin-bottom:0!important}
  html body #intelligence.price-panel.glass{padding-top:12px!important}
  html body #intelligence .panel-heading{padding-bottom:10px!important;margin-bottom:12px!important}
  html body #intelligence .trend-figures{margin-bottom:10px!important}
  html body #intelligence .trend-saving{margin-bottom:12px!important}
  html body #intelligence .price-trend .trend-axis{margin-top:4px!important}
  html body #intelligence .price-trend .trend-ranges{margin-top:2px!important}
  html body #intelligence .price-trend .trend-back{margin-top:8px!important;padding-top:12px!important}
  html body #intelligence .price-trend .trend-preview-note{margin-top:24px!important}
}

/* Tablets and small laptops: the brand keeps its name beside the mark (only "BETA" showed); the short-landscape top bar, where the dock
   sits between the brand and the chips, keeps the mark alone. */
@media (min-width:521px) and (max-width:1100px) and (min-height:501px){
  html body .site-header .home-logo .home-logo-wordmark{display:inline!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
}

/* ---------------------------------------------------------------- 6. tiles: set from the top; the closing link follows the content */
#deals .deal-card .carrier-panel>:is(.carrier-text-action,.carrier-closed-actions,.provider-input-action,.carrier-event-list+.carrier-text-action):not(:has(~ :not(template,.provider-program-link))){margin-top:0!important;padding-top:0!important}
#deals .deal-card .carrier-panel>.provider-input-action{margin-top:0!important}

/* ---------------------------------------------------------------- 7. tab rows */
/* A tile with one main tab: the tab takes one cell of a four-cell row, like its neighbours' cells (it hugged its text). */
#deals .deal-card>.carrier-main-tabs:has(>[role=tab]:only-child){grid-auto-columns:minmax(25%,max-content)!important}
#deals .deal-card>.carrier-main-tabs>button:only-child{justify-content:center!important;padding-inline:6px!important}
/* Event chapters inside a tile (Galaxy Store, Google Play, LG U+): a plain text toggle under the tab bar, not a second bar. No rule;
   the chosen chapter is brighter and carries a small champagne dot (selection is never colour alone). The dot keeps its place
   when not chosen, so choosing never moves the text. */
#deals .deal-card .promotion-event-tabs{border:0!important;gap:0 22px!important}
#deals .deal-card .promotion-event-tabs>button{gap:8px!important;color:var(--wt-text-3)!important;font-weight:500!important}
#deals .deal-card .promotion-event-tabs>button::before{position:static!important;inset:auto!important;flex:none!important;align-self:flex-start!important;width:5px!important;height:5px!important;
  margin-top:7.5px!important;border-radius:50%!important;background:var(--wt-accent)!important;opacity:0!important;scale:.4!important;transform-origin:50% 50%!important}
#deals .deal-card .promotion-event-tabs>button[aria-selected=true]{color:var(--wt-text)!important}
#deals .deal-card .promotion-event-tabs>button[aria-selected=true]::before{opacity:1!important;scale:1!important}
@media (hover:hover){#deals .deal-card .promotion-event-tabs>button:not([aria-selected=true]):hover{color:var(--wt-text-2)!important}}
@media (hover:hover) and (pointer:fine) and (min-width:821px){#deals .deal-card .promotion-event-tabs>button{padding-block:8px!important}}
@media (forced-colors:active){#deals .deal-card .promotion-event-tabs>button::before{background:ButtonText!important;forced-color-adjust:none!important}
  #deals .deal-card .promotion-event-tabs>button[aria-selected=true]::before{background:Highlight!important}}

/* ---------------------------------------------------------------- 8. rows that open a detail sheet: the arrow follows the words */
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button){grid-template-columns:minmax(0,max-content) minmax(1.25em,1fr)!important;column-gap:8px!important;justify-items:start!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button)>span:first-child{display:contents!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button)>span:first-child>*{grid-column:1 / -1!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button)>span:first-child>.source-title{order:-3!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button)>span:first-child>strong{grid-column:1!important;order:-2!important}
#deals .deal-card :is(.promotion-slide>.carrier-text-action,.carrier-event-list>button)>span[aria-hidden=true]{grid-column:2!important;order:-1!important;justify-self:start!important}
/* A row under the panel's own heading (Epic): its title is body text, not a second heading. */
#deals .deal-card .carrier-panel>h3~.promotion-slide>.carrier-text-action strong{font-size:0.875rem!important;font-weight:500!important;line-height:1.55!important;color:var(--wt-text-2)!important}
@media (hover:hover){#deals .deal-card .carrier-panel>h3~.promotion-slide>.carrier-text-action:hover strong{color:var(--wt-accent-hi)!important}}

/* ---------------------------------------------------------------- 9. game names on phones: one fixed two-line label block */
@media (max-width:680px){
  #games .game-card strong{width:100%!important;max-width:100%!important;min-height:2.7em!important;margin-inline:auto!important;text-align:center!important;
    font-size:0.75rem!important;line-height:1.35!important;letter-spacing:-.01em!important;text-wrap:balance!important}
}

/* ---------------------------------------------------------------- 10. one 40px rhythm on desktop; hairline fields on the page */
@media (hover:hover) and (pointer:fine) and (min-width:821px){:root{--wt-target:40px!important}}
:where(details.quiet-section,#native-feedback) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea){
  background-color:transparent!important;border-radius:10px!important;box-shadow:inset 0 0 0 1px #6a6761!important}
@media (hover:hover){:where(details.quiet-section,#native-feedback) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea):hover{
  background-color:transparent!important;box-shadow:inset 0 0 0 1px #8a867f!important}}
:where(details.quiet-section,#native-feedback) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea):focus{
  background-color:transparent!important;box-shadow:inset 0 0 0 1px var(--wt-accent)!important}
:where(details.quiet-section,#native-feedback) :is(input,select,textarea)[aria-invalid=true]{box-shadow:inset 0 0 0 1px #ff8f86!important}

}
/* <<< r3 */

/* Owner fixes of 2026-10-22, in the strongest layer for !important declarations (wt-r3 is declared first), so they win over the earlier layered rules they correct. */
@layer wt-r3 {
/* Tab glide (atelier.js, owner 2026-10-22): while the overlay underline travels, the tabs' own underlines are hidden with no fade, so
   only one line is ever seen and the selected tab's line is simply there when the overlay is removed. */
:is(.carrier-main-tabs,.promotion-event-tabs,.trend-ranges,.filter-tabs).wt-gliding>button::after,
:is(.carrier-main-tabs,.promotion-event-tabs,.trend-ranges,.filter-tabs).wt-gliding>button::before{opacity:0!important;transition:none!important}
:is(.carrier-main-tabs,.promotion-event-tabs,.trend-ranges,.filter-tabs)>button[aria-selected=true]::after,
:is(.carrier-main-tabs,.promotion-event-tabs,.trend-ranges,.filter-tabs)>button[aria-pressed=true]::after{transition:none!important}

/* Chart finish (owner 2026-10-22, "the graph is too shity"): the line runs straight across a gap in the record (game-signal-ui.mjs; the tooltip still says there is no record there), the
   wash under the line is short and clean instead of a grey smudge, the line carries a soft glow of its own colour, and the now dot
   breathes slowly. Presentation only: the series, scale and coordinates are unchanged. */
html body #intelligence .price-trend .trend-bridge{stroke:var(--trend)!important;stroke-width:2.2!important;stroke-linecap:round!important;fill:none!important}
html body #intelligence .price-trend #trend-fill>stop:first-child{stop-opacity:.22!important}
html body #intelligence .price-trend #trend-fill>stop:nth-child(2){offset:.62!important}
html body #intelligence .price-trend .trend-chart[data-trend-shape=level] #trend-fill>stop:first-child{stop-opacity:.14!important}
html body #intelligence .price-trend :is(.trend-line,.trend-bridge){filter:none!important}
/* A level record has no wash at all: under a flat line it only read as a blur. */
html body #intelligence .price-trend .trend-chart[data-trend-shape=level] .trend-area{opacity:0!important}
html body #intelligence .price-trend .trend-grid{stroke-dasharray:none!important;stroke-opacity:.07!important}
html body #intelligence .price-trend .trend-halo{transform-box:fill-box!important;transform-origin:center!important;animation:wt-breathe 2.8s cubic-bezier(.45,0,.55,1) infinite!important}
@keyframes wt-breathe{0%,100%{scale:1;fill-opacity:.22}50%{scale:1.9;fill-opacity:0}}
@media not all{html body #intelligence .price-trend .trend-halo{animation:none!important}}
body.motion-off #intelligence .price-trend .trend-halo{animation:none!important}

/* Game arrows (owner 2026-10-22: "make a arrow so that i can go back and forth with the games"): previous / next sit at the right of the
   card heading; the heading row carries the rule under it, so the line runs under the arrows too. */
html body #intelligence .panel-head-row{display:flex!important;align-items:center!important;gap:6px!important;padding:0 0 12px!important;margin:0 0 14px!important;border-bottom:1px solid var(--wt-line)!important}
html body #intelligence .panel-head-row>.panel-heading{flex:1 1 auto!important;min-width:0!important;width:auto!important;padding:0!important;margin:0!important;border:0!important}
html body #intelligence .panel-head-row>.panel-heading>svg{display:none!important}
html body #intelligence .game-step{display:flex!important;gap:4px!important;flex:none!important}
html body #intelligence .game-step>button{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;padding:0!important;border:1px solid var(--wt-line)!important;border-radius:50%!important;background:rgba(255,255,255,.03)!important;color:var(--wt-text-2)!important;cursor:pointer!important;transition:background-color .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),border-color .25s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.22,1,.36,1),opacity .18s cubic-bezier(.22,1,.36,1),scale .42s cubic-bezier(.22,1,.36,1)!important}
html body #intelligence .game-step>button>svg{width:18px!important;height:18px!important}
html body #intelligence .game-step>button:first-child>svg{transform:scaleX(-1)!important}
@media (hover:hover) and (pointer:fine){html body #intelligence .game-step>button:hover{background:rgba(228,201,166,.1)!important;border-color:rgba(228,201,166,.45)!important;color:var(--wt-accent)!important}}
html body #intelligence .game-step>button:active{transform:scale(.92)!important}
/* With motion on, the arrows take the shared press (96% dip, spring back) on their own clock: the .92 transform on top of it sank them to 88%
   and the scale, missing from this transition list, jumped 4% in one frame on press and on release. */
@media (min-width:0){html:not(.language-switching) body:not(.motion-off) #intelligence .game-step>button:active{transform:none!important;transition-duration:.25s,.25s,.25s,.18s,.18s,.09s!important;transition-timing-function:cubic-bezier(.16,1,.3,1),cubic-bezier(.16,1,.3,1),cubic-bezier(.16,1,.3,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.3,0,.5,1)!important}}
html body #intelligence .game-step>button:focus-visible{outline:2px solid var(--wt-accent)!important;outline-offset:2px!important}
@media (pointer:coarse){html body #intelligence .game-step>button{width:44px!important;height:44px!important}}
/* The arrows sit above the hero title's swash and the heading text, which overlap them on phones. */
html body #intelligence .game-step{position:relative!important;z-index:5!important}
html body #intelligence .panel-head-row{position:relative!important;z-index:4!important}

/* Draggable glass (smooth.js dragGlass, owner 2026-10-22): sideways drags on the bar belong to the bubble, vertical ones still scroll the
   page. While held, the bubble lifts (brighter rim, soft shadow) and the icon under it lights up. */
html body .site-header .header-navigation nav{touch-action:pan-y!important}
html body .site-header nav.nav-dragging .nav-indicator{background:rgba(228,201,166,.16)!important;box-shadow:inset 0 0 0 1px rgba(228,201,166,.42),inset 0 1px 0 rgba(255,255,255,.18),0 6px 22px rgba(0,0,0,.45)!important}
html body .site-header nav.nav-dragging a{-webkit-user-select:none!important;user-select:none!important}
html body .site-header nav.nav-dragging a.nav-drag-over{color:var(--wt-accent)!important}

/* See the art all the way down (owner 2026-10-22: "its to dark and blocked i can't see anything but the cards ... making it darker is ok
   but not full black"). The scroll dim stops at half, and the section plates are a tint instead of solid ink; the hero's fade ends on the
   same tint, so there is still no seam between them. */
/* The scroll dim runs as a scroll-linked animation where the browser has one (owner 2026-10-22: "the scroll animation makes the black
   blurer strange ... cranky ... a little flicker"): the compositor moves it with the scroll itself, with no script writing a value per
   frame. Same curve as before: from 5% to 50% of a screen of scroll. Elsewhere the script-written --at-recede still drives it. */
@supports not (animation-timeline:scroll()){html body .ambient-light{opacity:calc(var(--at-recede) * .72)!important}}
@supports (animation-timeline:scroll()){
 html body .ambient-light{opacity:0;animation:wt-dim linear both!important;animation-timeline:scroll(root block)!important;animation-range:5vh 50vh!important;will-change:opacity}
 html body .shade{opacity:1;animation:wt-shade-lift linear both!important;animation-timeline:scroll(root block)!important;animation-range:5vh 50vh!important;will-change:opacity}
}
/* The left-hand reading shade (for the hero title) lifts by 40% as you scroll down, so the art shows across the whole width. */
@supports not (animation-timeline:scroll()){html body .shade{opacity:calc(1 - var(--at-recede) * .4)!important}}
html body .hero::after{border-image:linear-gradient(to bottom,rgba(12,13,16,0) 0%,rgba(12,13,16,.3) 100%) fill 0 / 0 / 0 100vmax!important}
#games.games-section::before{border-image:linear-gradient(rgba(12,13,16,.3),rgba(12,13,16,.3)) fill 0 / 0 / 0 100vmax!important}
/* Where the deal text is long, the tint deepens to 60% over the first 160 px, so small text stays readable over bright art. */
#deals.deals-section::before{border-image:linear-gradient(rgba(12,13,16,.3) 0,rgba(12,13,16,.58) 160px) fill 0 / 0 / 0 100vmax!important}
#deals.deals-section::after{border-image:linear-gradient(rgba(12,13,16,.58),rgba(12,13,16,.58)) fill 0 / 0 / 0 100vmax!important}
details.quiet-section,#native-feedback{border-image:linear-gradient(rgba(12,13,16,.58),rgba(12,13,16,.58)) fill 0 / 0 / 0 100vmax!important}
#home>footer{border-image:linear-gradient(rgba(12,13,16,.58),rgba(12,13,16,.58)) fill 0 / 0 / 0 100vmax 100vh!important}
@media (forced-colors:active){:is(#games.games-section,#deals.deals-section)::before,#deals.deals-section::after,details.quiet-section,#native-feedback,#home>footer,html body .hero::after{border-image:none!important}}

/* A switch waiting for the next game's answer (live-ui.js): the shown answer is blurred and dimmed under the new heading (so no old figure reads as the new game's) instead of a loading placeholder. */
#game-current-signal.signal-awaiting{filter:opacity(.28) blur(7px)!important;transition:filter .3s ease-out!important;pointer-events:none!important}
/* First screen shows the whole picture (owner 2026-10-22: "make it the full picture in the first page and make it a little darker in the
   other lower pages"): the reading shade is a light veil (32%), the price card keeps a soft dark pool behind its own text (85%), and the hero text carries its
   own soft halo instead. Lower sections add the scroll dim (up to 62%) and a 30-58% tint, so the art stays visible on every screen. */
html body #intelligence.price-panel.glass::before{opacity:.85!important}
}
@layer wt-r3 {
/* No seams (owner 2026-10-22: "why the fuck is there a line in the page"): the see-through section plates overlapped by a pixel (or by
   the deals tail) and doubled into dark lines. They are gone; the lower screens are darkened only by the one fixed scroll dim above, which
   cannot leave a line. The first screen keeps the reading fade (.shade) at full strength so the title reads cleanly. */
html body .hero::after,#games.games-section::before,#deals.deals-section::before,#deals.deals-section::after,details.quiet-section,#native-feedback,#home>footer{border-image:none!important}
}
@layer wt-r3 {
/* No dark glows anywhere (owner 2026-10-22: "delete all black glowing thing"): no text shadow on any text, and the blurred ink pools behind
   the price card and the art credit are gone. The card reads from a clean dark glass panel instead (a shape, not a glow). */
html body *,html body *::before,html body *::after{text-shadow:none!important}
html body #intelligence.price-panel.glass::before,html body .hero .art-credit::before{display:none!important}
html body #intelligence.price-panel.glass{background:rgba(13,14,18,.74)!important;-webkit-backdrop-filter:blur(18px) saturate(1.1)!important;backdrop-filter:blur(18px) saturate(1.1)!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:24px!important;padding:20px 24px 12px!important;box-shadow:none!important}
@media (max-width:899px){html body #intelligence.price-panel.glass{border-radius:20px!important;padding:16px 16px 8px!important}}
html body .hero .art-credit{background:rgba(13,14,18,.66)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;border-radius:999px!important}
}
@layer wt-r3 {
/* Shorter, even tiles (owner 2026-10-22: "these are too long not in the same length has toooo mutch info and text and i said to delete the
   show all kind of thing"). Each tile keeps its offer, its figures, one condition line and its official link; the "Full conditions"
   buttons, the repeated coverage disclaimers, quoted source titles and secondary explanations are not shown. The data is unchanged. */
#deals .deal-card [data-v1-benefit]{display:none!important}
#deals .deal-card .carrier-panel-note{display:none!important}
#deals .deal-card[data-carrier-workspace=lgu-plus] .carrier-panel[data-carrier-panel=benefit]>.carrier-panel-note{display:block!important}
#deals .deal-card .source-title{display:none!important}
#deals .deal-card .carrier-related-plan>p:not(:first-of-type),#deals .deal-card .carrier-related-plan>a{display:none!important}
#deals .deal-card[data-carrier-workspace=google-play] .carrier-panel[data-carrier-panel=events] strong+p{display:none!important}
}
@layer wt-r3 {
/* Google Play tiers: a compact table and one scope line, so the tallest tab no longer sets a tall row. */
#deals .deal-card .play-points-table :is(th,td){padding-top:5px!important;padding-bottom:5px!important;line-height:1.35!important}
#deals .deal-card [data-carrier-panel=tiers]>.membership-scope~.membership-scope{display:none!important}
}
@layer wt-r3 {
/* No in-app "more" openers on the tiles either (the detail dialogs); a tile's only link is the provider's own official page. */
/* Only bare openers (a label and an arrow) are hidden; in the Galaxy Store and Epic tiles the offer itself, with its headline, is a
   [data-promotion-detail] button, and that is the tile's content (audit 2026-10-22: both tiles showed an empty body). */
#deals .deal-card [data-promotion-detail]:not(:has(strong)){display:none!important}
#deals .deal-card :is([data-play-tier-detail],[data-provider-detail]){display:none!important}
}
@layer wt-r3 {
/* ₩ inside the amount field no longer sits on the digits (owner 2026-10-22: "the won mark and the numbers overlap"): the sign is pinned at
   the field's left edge and the input text starts after it; a trailing unit gets the same room on the right. */
html body .pc-money{position:relative!important;display:block!important}
html body .pc-money>span[aria-hidden=true]:first-child{position:absolute!important;left:16px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;z-index:1!important;pointer-events:none!important}
html body .pc-money:has(>span[aria-hidden=true]:first-child)>input{padding-left:38px!important;width:100%!important}
html body .pc-money>.pc-unit{position:absolute!important;right:16px!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;pointer-events:none!important}
html body .pc-money:has(>.pc-unit)>input{padding-right:44px!important;width:100%!important}
}
@layer wt-r3 {
/* The now dot is still (no breathing ring): a constant pulse read as flicker. */
html body #intelligence .price-trend .trend-halo{animation:none!important}
}
@layer wt-r3 {
/* No live blur behind the card or the credit: it had to be recomputed on every frame of the art dissolve (~100 ms of a game switch on a
   slower PC). A slightly denser plain panel reads the same. */
html body #intelligence.price-panel.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(13,14,18,.84)!important}
html body .hero .art-credit{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(13,14,18,.78)!important}
}
@layer wt-r3 {
/* Calculator: less text (owner 2026-10-22: "to mutch text on the price calculator"). It keeps the figures, the one action per offer and
   the result; the secondary notes, quoted source titles, scope and bonus lines and the long "Calculation details & full requirements"
   fold-out are not shown. The data and the calculation are unchanged. */
details.quiet-section .source-title,
details.quiet-section h2+p+small,details.quiet-section h2+small,
details.quiet-section .membership-scope,
details.quiet-section .membership-bonus-note,
details.quiet-section .membership-details,
details.quiet-section .google-points-summary>small,
details.quiet-section .google-points-summary>p:last-of-type{display:none!important}
details.quiet-section .membership-eyebrow~p{display:none!important}
}
@layer wt-r3 {
/* Chart hover label: no dark drop shadow over the text above it (owner 2026-10-22); a hairline edge separates it instead. */
html body #intelligence .trend-tip{box-shadow:none!important;border:1px solid rgba(255,255,255,.12)!important;background:rgb(24,25,31)!important}
}
@layer wt-r3 {
/* Game names never move (owner 2026-10-22: "why does the text place change ... so that it does not move clacky"): selected and unselected
   names use the same weight (the selected one is brighter, not bolder, so it never gets wider and re-wraps), every name sits in the same
   two-line box, centred top-aligned under its icon, and long names break evenly. */
#games .game-card strong,#games .game-card.selected strong,#games .game-card[aria-pressed=true] strong{font-weight:600!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;
  min-height:2.7em!important;line-height:1.35!important;text-align:center!important;text-wrap:balance!important;letter-spacing:0!important;transition:color .25s ease!important}
#games .game-card{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important}
/* Art credit pill: the name and the link icon on one centred line with even padding. */
html[lang] body .hero .art-credit{display:inline-flex!important;align-items:center!important;gap:10px!important;padding:8px 10px 8px 16px!important;border-radius:999px!important;line-height:1.3!important}
html body .art-credit>span:not(.art-index){padding:0!important;line-height:1.3!important}
html body .hero .art-credit :is(a,button){display:inline-grid!important;place-items:center!important;margin:0!important}
/* Audit 2026-10-22 visual pass. Inactive labels over bright art reach AA (3.4-4.4 before). */
#deals .deal-card .carrier-main-tabs>button:not([aria-selected=true]),#games .game-card:not(.selected):not([aria-pressed=true]) strong{color:#c2beb6!important}
/* Reduced motion: the waiting card is only dimmed, never blurred. */
@media not all{#game-current-signal.signal-awaiting{filter:opacity(.35)!important;transition:none!important}}
body.motion-off #game-current-signal.signal-awaiting{filter:opacity(.35)!important;transition:none!important}
/* Narrow English screens: words never break in the middle; game names get a third line and labels a smaller size instead. */
@media (max-width:379px){
 html:not([lang=ko]) #games .game-card strong{overflow-wrap:normal!important;word-break:normal!important;-webkit-line-clamp:3!important;min-height:4.05em!important;font-size:0.6875rem!important;hyphens:none!important}
 html:not([lang=ko]) #deals .deal-card .carrier-main-tabs>button{overflow-wrap:normal!important;word-break:normal!important;font-size:0.75rem!important;padding-inline:2px!important}
 html body #intelligence .panel-heading strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;min-height:2.6em!important}
}
/* The search dialog keeps its top while results shrink as you type. */
html body #dialog:has(.dialog-games){margin-top:min(12vh,96px)!important;margin-bottom:auto!important}
/* English title: the script face draws a 50 px-wide apostrophe, so "Why’s" read as "Why ’ s"; it is pulled in to sit on the word. */
html:not([lang=ko]) body .hero h1 .hero-apos{display:inline!important;padding:0!important;margin:0 -.12em 0 -.3em!important;letter-spacing:0!important}
/* Audit 2026-10-22, stress pass. Game names on phones up to 379 px, in both languages: never broken mid-word, up to three lines. */
@media (max-width:379px){#games .game-card strong{overflow-wrap:normal!important;word-break:keep-all!important;-webkit-line-clamp:3!important;min-height:4.05em!important;font-size:0.6875rem!important}}
/* Very narrow screens (≤ 340 px): the game arrows move under the game name, so the name is never squeezed or clipped. */
@media (max-width:340px){html body #intelligence .panel-head-row{flex-wrap:wrap!important;row-gap:8px!important}html body #intelligence .game-step{margin-left:auto!important}
 html body #intelligence .panel-head-row>.panel-heading{flex-basis:100%!important}html body #intelligence .panel-heading strong{-webkit-line-clamp:3!important;min-height:0!important}}
/* Muted text over the art meets 4.5:1: the third ink tone is lifted wherever it sits on the art (sections, card and controls). */
#games,#deals,html body #intelligence,details.quiet-section,#native-feedback,#home>footer{--wt-text-3:#c4bfb7!important}
#deals :is(.freshness,label.platform-select,.filter-tabs>button:not([aria-pressed=true])){color:#c4bfb7!important}
/* A provider logo that fails to load shows its name instead of a broken image (atelier.js swaps it). */
.provider-logo-tile .logo-fallback{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;font:700 0.6875rem/1.1 var(--wt-font-text)!important;color:#16171c!important;text-align:center!important;padding:2px!important}
}
@layer wt-r3 {
/* Stress round 1 (2026-10-22). Game names wrap freely in their two-line box (taller names grow it); nothing is cut or clamped. */
#games .game-card strong,#games .game-card.selected strong,#games .game-card[aria-pressed=true] strong{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;min-height:2.7em!important;overflow-wrap:normal!important;word-break:keep-all!important}
/* Muted labels over bright art reach 4.5:1 (3.9:1 measured on hover over the brightest art). */
#games .game-card:not(.selected):not([aria-pressed=true]) strong,#deals .deal-card .carrier-main-tabs>button:not([aria-selected=true]),#deals :is(.freshness,label.platform-select,.filter-tabs>button:not([aria-pressed=true])){color:#dcd8d0!important}
/* Calculator and feedback fields: a visible edge (3:1) and a readable placeholder (4.5:1). */
html body :is(details.quiet-section,#native-feedback,#dialog) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea){box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)!important}
html body :is(details.quiet-section,#native-feedback,#dialog) :is(input,textarea)::placeholder{color:#b9b5ae!important;opacity:1!important}
/* Reduce transparency: the card and the credit are solid. */
@media (prefers-reduced-transparency:reduce){html body #intelligence.price-panel.glass{background:#0e0f13!important}html body .hero .art-credit{background:#16171c!important}}
/* The plot keeps one height whatever the line's shape, so switching 1W/2W/1M never moves the page (16 px in WebKit). */
html body #intelligence .price-trend .trend-chart[data-trend-shape] .trend-plot{aspect-ratio:360 / 136!important;height:auto!important;overflow:visible!important}
}
@layer wt-r3 {
/* Axis dates never wrap ("10월 15일" took two lines in its 53 px slot on a phone, so the card grew 16 px on 1W). */
html body #intelligence .price-trend .trend-axis>span{white-space:nowrap!important;overflow-wrap:normal!important;word-break:keep-all!important}
}
@layer wt-r3 {
/* Selected game (owner 2026-10-22: "make it real premium and luxurious, clean and fancy, not AI slop"): no ring. The other worlds rest
   muted and slightly desaturated; the chosen one is in full colour, lifted 3 px, and a fine champagne rule draws out under its name.
   Motion is one slow ease; nothing glows. */
#games .game-card img{box-shadow:none!important;outline:0!important;border-radius:22%!important;
  filter:saturate(.45) brightness(.72)!important;opacity:1!important;transform:translateY(0) scale(.94)!important;
  transition:filter .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)!important}
@media (hover:hover){#games .game-card:hover img{filter:saturate(.8) brightness(.9)!important;transform:translateY(-1px) scale(.97)!important}}
#games .game-card:is(.selected,[aria-pressed=true]) img{filter:none!important;transform:translateY(-3px) scale(1)!important;box-shadow:0 10px 22px -12px rgba(0,0,0,.7)!important}
#games .game-card strong{padding-bottom:9px!important;background:linear-gradient(var(--wt-accent),var(--wt-accent)) no-repeat 50% 100% / 0 1px!important;
  transition:background-size .6s cubic-bezier(.22,1,.36,1),color .4s ease!important}
#games .game-card:is(.selected,[aria-pressed=true]) strong{background-size:22px 1px!important;color:#f6efe4!important;font-weight:600!important;letter-spacing:.01em!important}
#games .game-card:focus-visible{outline:none!important}
#games .game-card:focus-visible img{box-shadow:0 0 0 2px var(--wt-canvas),0 0 0 3px var(--wt-accent)!important}
@media not all{#games .game-card img,#games .game-card strong{transition:none!important}}
}
@layer wt-r3 {
/* With the travelling frame and rule (atelier.js), the name's own drawn rule is not shown, so only one rule is ever seen. */
#games .game-cards:is(.wt-has-glide,.wt-has-lens,.wt-glass-host) .game-card strong{background-size:0 0!important}
}
@layer wt-r3 {
/* Stress round 2 (2026-10-22). All game icons keep one size (the chosen one only lifts), the motion switch stops their fades, names grow
   their own box, fields and labels reach contrast, and axis dates fit on one line. */
#games .game-card img,#games .game-card:is(.selected,[aria-pressed=true]) img{scale:1!important}
#games .game-card img{transform:translateY(0)!important}
@media (hover:hover){#games .game-card:hover img{transform:translateY(-1px)!important}}
#games .game-card:is(.selected,[aria-pressed=true]) img{transform:translateY(-3px)!important}
body.motion-off #games .game-card :is(img,strong){transition:none!important}
#games .game-card strong{height:auto!important;max-height:none!important}
#games .game-card:not(.selected):not([aria-pressed=true]) strong,#deals .deal-card .carrier-main-tabs>button:not([aria-selected=true]),#deals :is(.freshness,label.platform-select,.filter-tabs>button:not([aria-pressed=true])),html body #v1-profile-button{color:#ebe7df!important}
html body :is(details.quiet-section,#native-feedback,#dialog) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea){box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)!important}
@media (max-width:420px){html body #intelligence .price-trend .trend-axis>span{font-size:0.6875rem!important;letter-spacing:-.01em!important}}
}
@layer wt-r3 {
/* Stress round 3 (2026-10-22). A name longer than its column breaks inside the word only as a last resort (never past its box). */
#games .game-card strong{overflow-wrap:break-word!important}
/* On the narrowest phones the chart's axis keeps only its first date and "now", so no two labels touch. */
@media (max-width:360px){html body #intelligence .price-trend .trend-axis>span:nth-child(2),html body #intelligence .price-trend .trend-axis>span:nth-child(3){visibility:hidden!important}}
/* Second ink tone over the art reaches 4.5:1 too. */
#games,#deals,html body #intelligence,details.quiet-section,#native-feedback,#home>footer{--wt-text-2:#e4e0d8!important}
#deals .refresh-button span{color:#e4e0d8!important}
/* The selected filter carries a champagne rule under it (its ::after underline is removed inside #deals), not colour alone. */
#deals .filter-tabs>button[aria-pressed=true]{background:linear-gradient(var(--wt-accent),var(--wt-accent)) no-repeat 50% 100% / calc(100% - 24px) 2px!important}
}
@keyframes wt-dim{from{opacity:0}to{opacity:.72}}
@keyframes wt-shade-lift{from{opacity:1}to{opacity:.6}}
/* 2026-10-23 copy trim: notes that repeat a line already on screen */
@layer wt-r3{
 html body #intelligence .trend-preview-note,html body #deals .feed-context>span,html body #deals .source-footnote{display:none!important}
}
/* 2026-10-23 stress: hover/press lighten the tile, so this small text and link carry brighter ink at all times (≥ 4.5:1 in every state,
   and no hover-only colour that would stick after a tap on phones) */
@layer wt-r3{
 html body #deal-grid .promotion-slide .carrier-text-action small,html body #deal-grid .promotion-slide .carrier-text-action:is(:hover,:active,:focus-visible) small{color:#e6e2db!important;transition:none!important}
 html body #deal-grid .carrier-closed-actions .carrier-text-action,html body #deal-grid .carrier-closed-actions .carrier-text-action span,html body #deal-grid .carrier-closed-actions .carrier-text-action:is(:hover,:active,:focus-visible),html body #deal-grid .carrier-closed-actions .carrier-text-action:is(:hover,:active,:focus-visible) span{color:#f4e4cc!important;transition:none!important}
 /* very narrow screens (≤340px): long English names may use the gap beside their icon instead of spilling out of the name box */
 @media (max-width:340px){html body #games .game-cards .game-card strong.language-content{margin-inline:-2px!important;width:calc(100% + 4px)!important;max-width:none!important;font-size:.5625rem!important;letter-spacing:-.01em!important;overflow-wrap:anywhere!important}}
}

/* 2026-10-23 one-tap amounts under the calculator field: four equal pills in one row, champagne when chosen; 44 px targets */
@layer wt-r3{
 html body details.quiet-section .amount-presets{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin:-2px 0 14px!important;max-width:360px!important}
 html body details.quiet-section .amount-presets>button{min-height:44px!important;padding:0 4px!important;border-radius:999px!important;white-space:nowrap!important;min-width:0!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.04)!important;color:#ebe7df!important;font-family:inherit!important;font-size:0.75rem!important;font-weight:500!important;line-height:1!important;font-variant-numeric:tabular-nums!important;cursor:pointer!important;transition:border-color .2s,background-color .2s,color .2s!important}
 html body details.quiet-section .amount-presets>button:focus-visible{outline:2px solid #efd6b2!important;outline-offset:2px!important}
 html body details.quiet-section .amount-presets>button[aria-pressed=true]{border-color:#efd6b2!important;background:rgba(239,214,178,.14)!important;color:#efd6b2!important}
 @media (hover:hover){html body details.quiet-section .amount-presets>button:hover{border-color:rgba(239,214,178,.6)!important}}
 @media (max-width:640px){html body details.quiet-section .amount-presets{max-width:none!important}}
}
@layer wt-r3{html body #deal-grid .promotion-slide>.carrier-text-action>span[aria-hidden=true]{color:#efd6b2!important}@media (hover:hover){html body #deal-grid .promotion-slide>.carrier-text-action:is(:hover,:focus-visible)>span{color:#f6ead8!important}}}
@layer wt-r3{@media (forced-colors:active){
 /* Windows contrast themes (stress b4, 2026-10-24): every selected tab, filter, chart range and game is a Highlight fill with a CanvasText
    ring, and its text is HighlightText; later !important author colours had left a game name at 1.45:1 on the fill. */
 html body :is(.filter-tabs>button[aria-pressed=true],.trend-ranges>button[aria-pressed=true],#deal-grid [role=tab][aria-selected=true],.game-cards .game-card[aria-pressed=true]){forced-color-adjust:none!important;background:Highlight!important;color:HighlightText!important;border-color:Highlight!important;text-decoration:none!important}
 html body :is(.filter-tabs>button[aria-pressed=true],.trend-ranges>button[aria-pressed=true],.game-cards .game-card[aria-pressed=true]){outline:3px solid CanvasText!important;outline-offset:-3px!important}
 /* The page-wide game scene behind every section is decoration; contrast themes show plain Canvas (it had counted as ink behind text). */
 html body .backdrop{display:none!important}
 html body :is(.filter-tabs>button[aria-pressed=true],.trend-ranges>button[aria-pressed=true],#deal-grid [role=tab][aria-selected=true],.game-cards .game-card[aria-pressed=true]) *{color:HighlightText!important;fill:currentColor!important}
 html body:not(#wt-fc1):not(#wt-fc2) :is(.filter-tabs>button[aria-pressed=true],.trend-ranges>button[aria-pressed=true],#deal-grid [role=tab][aria-selected=true],.game-cards .game-card[aria-pressed=true]){color:HighlightText!important;background-color:Highlight!important}
 /* Focus beats every selected/normal rule above (two id-weight :not()s): a ring outside the item, Highlight; CanvasText on a selected one. */
 html body:not(#wt-fc1):not(#wt-fc2) :is(.game-cards .game-card,#deal-grid [role=tab],.filter-tabs>button,.trend-ranges>button):focus-visible{outline:3px solid Highlight!important;outline-offset:2px!important}
 html body:not(#wt-fc1):not(#wt-fc2) :is(.game-cards .game-card[aria-pressed=true],#deal-grid [role=tab][aria-selected=true],.filter-tabs>button[aria-pressed=true],.trend-ranges>button[aria-pressed=true]):focus-visible{outline-color:CanvasText!important}
}}
@layer wt-r3{html body #deal-grid .deal-card .provider-identity .deal-merchant small{color:#ddd8d0!important;transition:none!important}}
@layer wt-r3{
 /* Large minimum font sizes (stress b2 font32, 2026-10-24): a date label may wrap at its space inside its grid cell instead of running into the next one, and a game name breaks inside a word only when that word alone is wider than its card. At normal sizes neither ever applies. */
 html body #intelligence .price-trend .trend-axis>span{white-space:normal!important}
 html body #games .game-cards .game-card strong.language-content{overflow-wrap:anywhere!important;min-width:0!important}
}
@layer wt-r3{
 /* 2026-10-24 (owner screenshot): the selected icon lifted 3 px over 0.6 s while the champagne frame was placed at the start of that lift, so the frame sat 3 px off-centre. The frame and rule mark the choice; the icon stays still. */
 html body #games .game-cards .game-card:is(.selected,[aria-pressed=true]) img{transform:none!important;translate:none!important}
}
@layer wt-r3{
 /* 2026-10-24 (owner: "if i hover a mouse over a button its very clacky and not smooth"): the ownership reset above sets transition:none on
    everything in #games/#deals, and the header controls had none either, so every hover colour, fill, underline and arrow nudge snapped.
    Controls and their inner text/icons ease these paint-only properties over 180 ms. Mouse devices only (no tap flashes on phones), never
    with reduced motion or motion off, and never while the language switch writes opacity frame by frame. */
 @media (hover:hover) and (min-width:0){
  html:not(.language-switching) body:not(.motion-off) :is(button,a[href],[role=tab],summary,select,label.platform-select,.text-button,.carrier-text-action),
  html:not(.language-switching) body:not(.motion-off) :is(button,a[href],[role=tab],summary,.text-button,.carrier-text-action) :is(span,strong,small,b,i,em,svg,path,img){
   transition-property:color,background-color,border-color,text-decoration-color,outline-color,box-shadow,opacity,translate,fill,stroke!important;
   transition-duration:.18s!important;transition-timing-function:cubic-bezier(.22,1,.36,1)!important;transition-delay:0s!important}
  /* Arrows inside links nudge with transform; the KT closed-plan link's own rule (no hover-only colour on phones) is kept, eased here. */
  html:not(.language-switching) body:not(.motion-off) :is(button,a[href],.text-button,.carrier-text-action)>span[aria-hidden=true],
  html:not(.language-switching) body:not(.motion-off) #deal-grid .carrier-closed-actions .carrier-text-action:not(#_),
  html:not(.language-switching) body:not(.motion-off) #deal-grid .carrier-closed-actions .carrier-text-action:not(#_) span{
   transition-property:color,text-decoration-color,opacity,translate,transform!important;transition-duration:.18s!important;transition-timing-function:cubic-bezier(.22,1,.36,1)!important;transition-delay:0s!important}
 }
}
/* 2026-10-25 game selection lens (owner: "a better niche and clean, luxurious style"): the glass plate behind the chosen game marks it
   (dist/atelier.js), so the chosen icon carries no ring, only a soft shadow; the other games rest a little quieter and come up on hover. */
@layer wt-r3{
 html body #games .game-cards.wt-glass-host .game-card:is(.selected,[aria-pressed=true]) img{box-shadow:0 8px 20px -10px rgba(0,0,0,.75)!important;opacity:1!important;filter:none!important}
 html body #games .game-cards.wt-glass-host .game-card:not(.selected):not([aria-pressed=true]) img{opacity:.62!important;filter:saturate(.72)!important}
 @media (hover:hover){html body #games .game-cards.wt-glass-host .game-card:not(.selected):not([aria-pressed=true]):hover img{opacity:.9!important;filter:saturate(.95)!important}}
 @media (min-width:0){html:not(.language-switching) body:not(.motion-off) #games .game-cards.wt-glass-host .game-card img{transition:opacity .45s cubic-bezier(.32,.72,0,1),filter .45s cubic-bezier(.32,.72,0,1),box-shadow .45s cubic-bezier(.32,.72,0,1)!important}}
 @media (forced-colors:active){html body .wt-game-lens{display:none!important}}
}
/* ---------------------------------------------------------------- 2026-10-25 owner UI pass (streamer visit): "the graph card is a little long
   ... too much info", "why is the feedback page like this", "the selection choosing looks shit", "the calculator tab is too long", "the
   tab outline ... I hate it". One glass language with the game-picker lens: translucent champagne-tinted fills, a bright top edge. */
@layer wt-r3{
 /* Price card: the look-back row repeats what the line shows and the second saving line repeats the basis, so both rest out of sight
    (they stay in the DOM for screen readers and the truth checks); the plot is trimmed of headroom and the ranges become a small glass switch. */
 html body #intelligence #game-current-signal .trend-back{display:none!important}
 html body #intelligence #game-current-signal .trend-saving br,html body #intelligence #game-current-signal .trend-saving small{display:none!important}
 html body #intelligence #game-current-signal .trend-saving{margin-top:2px!important}
 html body #intelligence #game-current-signal .trend-chart[data-trend-shape] .trend-plot{aspect-ratio:360 / 108!important}
 html body #intelligence #game-current-signal .price-trend .trend-ranges{display:inline-flex!important;width:max-content!important;gap:2px!important;margin:12px 0 0 0!important;padding:3px!important;
   border-radius:999px!important;background:rgba(255,250,240,.04)!important;border:1px solid rgba(239,214,178,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;align-self:flex-start}
 html body #intelligence #game-current-signal .price-trend .trend-ranges button{min-height:30px!important;min-width:44px!important;padding:4px 14px!important;border-radius:999px!important;
   color:#cfc8bc!important;font:600 12px/1 var(--wt-font-text)!important;letter-spacing:.02em!important;background:transparent!important;border:1px solid transparent!important}
 html body #intelligence #game-current-signal .price-trend .trend-ranges button::after{display:none!important}
 html body #intelligence #game-current-signal .price-trend .trend-ranges button[aria-pressed=true]{color:#f6efe4!important;
   background:linear-gradient(180deg,rgba(255,250,240,.16),rgba(239,214,178,.07))!important;border-color:rgba(239,214,178,.28)!important;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 4px 12px -6px rgba(0,0,0,.6)!important}
 @media (hover:hover){html body #intelligence #game-current-signal .price-trend .trend-ranges button:not([aria-pressed=true]):hover{color:#f6efe4!important;background:rgba(255,250,240,.06)!important}}

 /* Feedback: heading on the left, the form on the right; the two menus are now chip rows (one tap, all choices in view). */
 html body #native-feedback{padding:clamp(40px,6vw,72px) 0!important}
 html body #native-feedback .native-feedback-form{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)!important;column-gap:clamp(24px,5vw,72px)!important;row-gap:18px!important;align-items:start!important}
 html body #native-feedback .native-feedback-head{grid-column:1!important;grid-row:1 / span 3!important}
 html body #native-feedback .native-feedback-fields{grid-column:2!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
 html body #native-feedback .native-feedback-fields>*{grid-column:1!important;grid-row:auto!important;order:0!important}
 html body #native-feedback .native-feedback-footer,html body #native-feedback .native-feedback-status{grid-column:2!important;margin:0!important}
 html body #native-feedback .native-feedback-footer{display:flex!important;justify-content:flex-end!important}
 html body #native-feedback .fb-group{border:0!important;margin:0!important;padding:0!important;min-width:0!important}
 html body #native-feedback .fb-group legend,html body #native-feedback .fb-message>span{display:block!important;padding:0!important;margin:0 0 10px!important;color:#cfc8bc!important;font:600 12px/1.2 var(--wt-font-text)!important;letter-spacing:.06em!important;text-transform:uppercase!important}
 html body #native-feedback .fb-chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
 html body #native-feedback .fb-chip{position:relative!important;display:inline-flex!important;margin:0!important;cursor:pointer!important}
 html body #native-feedback .fb-chip input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;opacity:1!important;-webkit-appearance:none!important;appearance:none!important;background:transparent!important;border:0!important;border-radius:999px!important;cursor:pointer!important;z-index:1!important}
 html body #native-feedback .fb-chip span{display:inline-flex!important;align-items:center!important;min-height:38px!important;padding:0 16px!important;border-radius:999px!important;
   color:#e6e0d6!important;font:500 14px/1 var(--wt-font-text)!important;background:rgba(255,250,240,.04)!important;border:1px solid rgba(239,214,178,.16)!important;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important}
 html body #native-feedback .fb-chip input:checked+span{color:#f6efe4!important;background:linear-gradient(180deg,rgba(255,250,240,.17),rgba(239,214,178,.08))!important;
   border-color:rgba(239,214,178,.42)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 16px -8px rgba(0,0,0,.65),0 0 0 1px rgba(239,214,178,.10)!important}
 @media (hover:hover){html body #native-feedback .fb-chip:hover input:not(:checked)+span{background:rgba(255,250,240,.08)!important;border-color:rgba(239,214,178,.26)!important}}
 html body #native-feedback .fb-message{display:block!important;margin:0!important}
 html body #native-feedback textarea{display:block!important;width:100%!important;min-height:104px!important;padding:14px 16px!important;border-radius:16px!important;resize:vertical!important;
   color:#f6efe4!important;font:400 15px/1.5 var(--wt-font-text)!important;background:rgba(10,10,12,.42)!important;border:1px solid rgba(239,214,178,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;outline:none!important}
 html body #native-feedback textarea::placeholder{color:#9d978d!important}
 @media (max-width:760px){html body #native-feedback .native-feedback-form{grid-template-columns:minmax(0,1fr)!important}
  html body #native-feedback :is(.native-feedback-head,.native-feedback-fields,.native-feedback-footer,.native-feedback-status){grid-column:1!important;grid-row:auto!important}
  html body #native-feedback .native-feedback-footer{justify-content:stretch!important}html body #native-feedback .native-feedback-footer button{width:100%!important}}
 @media (min-width:0){html:not(.language-switching) body:not(.motion-off) #native-feedback .fb-chip span,html:not(.language-switching) body:not(.motion-off) #game-current-signal .trend-ranges button{transition:background .3s cubic-bezier(.32,.72,0,1),border-color .3s cubic-bezier(.32,.72,0,1),color .3s cubic-bezier(.32,.72,0,1),box-shadow .3s cubic-bezier(.32,.72,0,1)!important}}

 /* Calculator: the amount and its presets share one row; each answer is one line (provider left, result right); the membership block
    shrinks to the same rhythm, its big figure to a line figure and its button to a quiet link. */
 html body details.quiet-section .calculator-inputs{display:grid!important;grid-template-columns:minmax(160px,220px) minmax(0,1fr)!important;column-gap:16px!important;row-gap:14px!important;align-items:start!important}
 html body details.quiet-section .calculator-inputs>label{grid-column:1!important;margin:0!important}
 html body details.quiet-section .calculator-inputs>label input{min-height:44px!important;height:44px!important;font-size:16px!important;border-radius:12px!important}
 html body details.quiet-section .calculator-inputs>.amount-presets{grid-column:2!important;align-self:start!important;margin:32px 0 0!important;flex-wrap:wrap!important;gap:6px!important}
 html body details.quiet-section .membership-comparison .membership-decision,html body details.quiet-section .membership-comparison .membership-decision *{font-size:13px!important;line-height:1.4!important;font-weight:500!important;color:#cfc8bc!important;flex:1 1 100%!important;order:3!important}
 html body details.quiet-section .calculator-inputs>.amount-presets button{min-height:34px!important;height:34px!important;padding:0 12px!important;font-size:12px!important;border-radius:999px!important}
 html body details.quiet-section .calculator-inputs>div:not(.amount-presets){grid-column:1 / -1!important}
 html body details.quiet-section .calculation-line{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;padding:10px 0!important;margin:0!important;min-height:0!important}
 html body details.quiet-section .calculation-line .calculation-answer{text-align:left!important;font-size:14px!important}
 html body details.quiet-section .membership-comparison{display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;column-gap:16px!important;row-gap:6px!important;padding:12px 0!important;margin:0!important;align-items:center!important;min-width:0!important}
 html body details.quiet-section .membership-comparison>.membership-provider{flex:1 1 140px!important;min-width:0!important;order:0!important}
 html body details.quiet-section .membership-comparison>*{margin:0!important}
 html body details.quiet-section .membership-comparison .membership-offer{flex:1 1 100%!important;order:2!important;display:flex!important;flex-wrap:wrap!important;gap:4px 20px!important;align-items:baseline!important;min-height:0!important;padding:0!important}
 html body details.quiet-section .membership-comparison .membership-offer *{font-size:13px!important;line-height:1.35!important;padding:0!important;margin:0!important;min-height:0!important;border:0!important}
 html body details.quiet-section .membership-comparison .membership-offer :is(strong,b,big,.membership-rate,[class*=rate]){font-size:18px!important}
 html body details.quiet-section .membership-comparison .membership-primary{flex:0 0 auto!important;order:1!important;max-width:100%!important;min-height:32px!important;height:32px!important;padding:0 14px!important;font-size:12px!important;border-radius:999px!important;width:auto!important}
 html body details.quiet-section .savings-lab>div:first-child h2{font-size:clamp(22px,2.4vw,30px)!important}
 @media (max-width:640px){html body details.quiet-section .calculator-inputs{grid-template-columns:minmax(0,1fr)!important}
  html body details.quiet-section .calculator-inputs>:is(label,.amount-presets){grid-column:1!important}
  html body details.quiet-section .calculator-inputs>.amount-presets{margin:-6px 0 0!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(82px,1fr))!important}
  html body details.quiet-section .calculator-inputs>.amount-presets button{padding:0 6px!important;min-width:0!important;width:100%!important}}

 /* Keyboard focus (owner: "the shitty outline"): one soft champagne ring hugging the control and a faint halo, no offset gap, so it reads
    as a glow, not a double frame. It still marks focus clearly (WCAG 2.4.7); Windows contrast themes keep their own system outline. */
 @media (forced-colors:none){
  html body :is(a[href],button,summary,[role=tab],[role=button],input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
    outline:none!important;box-shadow:0 0 0 1.5px rgba(239,214,178,.85),0 0 0 5px rgba(239,214,178,.14),0 0 24px -4px rgba(239,214,178,.4)!important}
  html body #native-feedback .fb-chip input:focus-visible+span{box-shadow:0 0 0 1.5px rgba(239,214,178,.85),0 0 0 5px rgba(239,214,178,.14),0 0 24px -4px rgba(239,214,178,.4)!important}
  html body :is(input,textarea,select):focus:not(:focus-visible){outline:none!important}
 }
}

/* 2026-10-25 liquid glass (dist/atelier.js): one glass body per selector, beneath its controls. Light is drawn in three layers: the body
   (a faint warm fill and a soft contact shadow), the rim (a 1 px gradient edge, bright where light falls top-left, warm bottom-right)
   and a specular hotspot that leans into the motion (--lean). Chromium adds refraction of what lies behind (backdrop-filter, set inline). */
@layer wt-r3{
 wt-glass{position:absolute!important;left:0!important;top:0!important;display:block!important;max-width:100%!important;z-index:-1!important;pointer-events:none!important;box-sizing:border-box!important;
   margin:0!important;padding:0!important;border-radius:var(--r,999px)!important;opacity:0;transition:opacity .35s cubic-bezier(.32,.72,0,1);will-change:transform,width,height;
   background:linear-gradient(180deg,rgba(255,250,240,.12) 0%,rgba(255,250,240,.035) 46%,rgba(239,214,178,.06) 100%)!important;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 1px rgba(239,214,178,.10),inset 0 -10px 18px -14px rgba(0,0,0,.55),0 12px 26px -14px rgba(0,0,0,.75),0 2px 6px -3px rgba(0,0,0,.45)!important}
 wt-glass.refracts{background:linear-gradient(180deg,rgba(255,250,240,.10) 0%,rgba(255,250,240,.02) 50%,rgba(239,214,178,.05) 100%)!important}
 wt-glass.is-on{opacity:1}
 wt-glass>wt-glass-rim{position:absolute!important;inset:0!important;display:block!important;border-radius:inherit!important;padding:1px!important;pointer-events:none!important;
   background:linear-gradient(calc(135deg + var(--lean,0) * 25deg),rgba(255,255,255,.62) 0%,rgba(255,255,255,.10) 32%,rgba(255,255,255,.04) 58%,rgba(239,214,178,.42) 100%)!important;
   -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important}
 wt-glass>wt-glass-spec{position:absolute!important;inset:0!important;display:block!important;border-radius:inherit!important;pointer-events:none!important;
   background-color:transparent!important;background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:0 0!important;opacity:.95;transition:opacity .3s cubic-bezier(.32,.72,0,1)}
 /* The body marks the choice, so the controls drop their own selected fills and underlines where it is present. */
 @media (forced-colors:none){html body .wt-glass-host>:is(button[aria-pressed=true],a[aria-current],a.active){background:transparent!important;background-image:none!important;border-color:transparent!important;box-shadow:none!important}}
 @media (forced-colors:none){html body:not(#wt-g1) :is(#deals,#deal-grid,#intelligence,#game-current-signal) :is(.filter-tabs,.trend-ranges,.carrier-main-tabs,.promotion-event-tabs).wt-glass-host>:is(button,[role=tab]):is([aria-pressed],[role=tab],button){background-image:none!important;background-color:transparent!important;box-shadow:none!important;border-color:transparent!important}}
 html body :is(.filter-tabs,.trend-ranges,.carrier-main-tabs,.promotion-event-tabs).wt-glass-host>button::after,html body :is(.filter-tabs,.trend-ranges,.carrier-main-tabs,.promotion-event-tabs).wt-glass-host>button::before{opacity:0!important}
 @media (forced-colors:none){html body .wt-glass-host>[role=tab][aria-selected=true]{background:transparent!important;border-color:transparent!important;box-shadow:none!important;text-decoration:none!important}}
 html body .site-header .header-navigation nav.wt-glass-host .nav-indicator{opacity:0!important;visibility:hidden!important}
 html body #native-feedback .fb-chips.wt-glass-host .fb-chip input:checked+span{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
 html body #game-current-signal .trend-ranges.wt-glass-host button[aria-pressed=true]{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
 html body #native-feedback .fb-chips.wt-glass-host,html body #game-current-signal .trend-ranges.wt-glass-host{position:relative!important;isolation:isolate!important}
 @media (forced-colors:active){wt-glass{display:none!important}}
 /* The art credit chip under the hero is gone (owner 2026-10-25: "delete this"); the source stays in the footer's artwork & sources. */
 html[lang] body .hero .art-credit,html[lang] body .hero .art-credit:is(:hover,:focus-within){display:none!important}
}

/* 2026-10-25 stress tab-walk: the glass hosts' and the feedback form's own rules (id selectors) had out-ranked the focus glow, so Tab showed
   nothing there. The glow is restated at id strength and wins on every control in those areas. */
@layer wt-r3{@media (forced-colors:none){
 html body:not(#wt-g1):not(#wt-g2) :is(#deals,#deal-grid,#intelligence,#game-current-signal,#native-feedback,#games,.site-header) :is(a[href],button,summary,[role=tab],input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
   outline:none!important;box-shadow:0 0 0 1.5px rgba(239,214,178,.85),0 0 0 5px rgba(239,214,178,.14),0 0 24px -4px rgba(239,214,178,.4)!important}
}}
/* The bottom menu clips what lies outside its bar (stress zoom 200%): its items take the glow inside their own edge. */
@layer wt-r3{@media (forced-colors:none){
 html body:not(#wt-g1):not(#wt-g2):not(#wt-g3) .site-header .header-navigation :is(nav a,.search-button):focus-visible{outline:none!important;box-shadow:inset 0 0 0 1.5px rgba(239,214,178,.9),inset 0 0 16px rgba(239,214,178,.22)!important}
}}
/* Touch screens had no colour transition on the dock links (the hover-only wt-r3 list never applies there): the label lit up champagne in
   one frame while the glass took ~250 ms to arrive under it. The tint now eases with the lens; the icon takes its colour from the link
   (WebKit restarts a child colour transition on every inherited step, which left the outgoing icon lit for ~400 ms). */
@layer wt-r3{@media (min-width:0) and (hover:none){
 html:not(.language-switching) body:not(.motion-off) .site-header .header-navigation nav a{transition:transform 300ms var(--homepage-motion-ease),opacity 280ms ease,box-shadow 320ms ease,border-color 220ms ease,color 340ms cubic-bezier(.32,.72,0,1)!important}
 html:not(.language-switching) body:not(.motion-off) .site-header .header-navigation nav a .nav-icon{color:inherit!important;transition:transform .38s cubic-bezier(.22,1,.36,1)!important}
}}
/* Press feel (owner 2026-10-25: "no clicking animations"): every control dips to 96% while pressed and eases back to 100% on release (owner 2026-10-26: "too bouncy", so no overshoot).
   The independent scale property is used, so no control's own transform is overwritten. */
@layer wt-r3{@media (min-width:0){
 html:not(.language-switching) body:not(.motion-off) :is(button,a[href],[role=tab],summary,.fb-chip,.game-card,label.platform-select):not(.wt-glass-host>*):not([role=tab]):not(:is(.filter-tabs,.trend-ranges,.carrier-main-tabs,.promotion-event-tabs,.fb-chips,.game-cards,.header-navigation nav)>*){transition-property:color,background-color,border-color,text-decoration-color,outline-color,box-shadow,opacity,translate,fill,stroke,scale!important;scale:1}
 html:not(.language-switching) body:not(.motion-off) :is(button,a[href],[role=tab],summary,.fb-chip,.game-card):not(.wt-glass-host>*):not([role=tab]):not(:is(.filter-tabs,.trend-ranges,.carrier-main-tabs,.promotion-event-tabs,.fb-chips,.game-cards,.header-navigation nav)>*):active{scale:.96!important;transition-duration:.09s!important;transition-timing-function:cubic-bezier(.3,0,.5,1)!important}
 html:not(.language-switching) body:not(.motion-off) :is(button,a[href],[role=tab],summary,.fb-chip,.game-card):not(.wt-glass-host>*):not([role=tab]):not(:is(.filter-tabs,.trend-ranges,.carrier-main-tabs,.promotion-event-tabs,.fb-chips,.game-cards,.header-navigation nav)>*):not(:active){transition-duration:.18s,.18s,.18s,.18s,.18s,.18s,.18s,.18s,.18s,.18s,.32s!important;transition-timing-function:cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1)!important}
}}

/* 2026-10-25 Apple Liquid Glass pass: the rim light is now the computed specular image (dist/atelier.js specMap); the old gradient rim stays
   only as a faint edge. The body is nearly clear (Apple's glass is a lens, not a tint): a whisper of white, a soft contact shadow. Pressed,
   the glass lifts: brighter rim, a little more light inside, a deeper shadow. */
@layer wt-r3{
 wt-glass>wt-glass-rim{opacity:.35!important}
 wt-glass{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 55%,rgba(255,255,255,.045))!important;
   box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10),0 10px 24px -12px rgba(0,0,0,.7),0 2px 5px -3px rgba(0,0,0,.4)!important;transition:opacity .35s cubic-bezier(.32,.72,0,1),box-shadow .3s cubic-bezier(.32,.72,0,1),background .3s cubic-bezier(.32,.72,0,1)}
 wt-glass.refracts{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 55%,rgba(255,255,255,.03))!important}
 wt-glass.is-pressed{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 55%,rgba(255,255,255,.07))!important;
   box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),0 16px 34px -14px rgba(0,0,0,.8),0 3px 8px -4px rgba(0,0,0,.45)!important}
 wt-glass.is-pressed>wt-glass-spec{opacity:1}
}

/* 2026-10-25 Liquid glass, Apple model (dist/atelier.js sets --lift 0..1, --lean -1..1, --px/--py = fingertip). At rest a frosted pill;
   lifted, a clear lens: the fill thins, the rim and inner top line brighten, a glow rises under the fingertip and the contact shadow deepens.
   The rim is a 1 px ring lit from the upper left with a counter-light lower right (a masked conic gradient, so it follows the corners at any
   size and turns slightly with the motion). Other engines take a light frost (Chromium refracts instead, set inline). */
@layer wt-r3{
 html body wt-glass:is(*,.refracts,.is-pressed){position:absolute!important;left:0!important;top:0!important;display:block!important;z-index:-1!important;pointer-events:none!important;box-sizing:border-box!important;
   margin:0!important;padding:0!important;border:0!important;border-radius:var(--r,999px)!important;contain:layout style;max-width:100%!important;opacity:0;transition:opacity .3s cubic-bezier(.32,.72,0,1)!important;will-change:transform,width,height;
   background:linear-gradient(180deg,rgba(255,255,255,calc(.13 - .09 * var(--lift,0))) 0%,rgba(255,255,255,calc(.045 - .03 * var(--lift,0))) 52%,rgba(255,255,255,calc(.07 - .04 * var(--lift,0))) 100%)!important;
   box-shadow:inset 0 1px .5px rgba(255,255,255,calc(.30 + .30 * var(--lift,0))),inset 0 -1px .5px rgba(255,255,255,calc(.07 + .08 * var(--lift,0))),inset 0 0 0 .5px rgba(255,255,255,.10),
     0 calc(5px + 5px * var(--lift,0)) calc(12px + 12px * var(--lift,0)) -7px rgba(0,0,0,calc(.42 + .28 * var(--lift,0))),0 1px 3px -1px rgba(0,0,0,.35)!important}
 html body wt-glass:not(.refracts){-webkit-backdrop-filter:blur(2px) saturate(1.6) brightness(1.06)!important;backdrop-filter:blur(2px) saturate(1.6) brightness(1.06)!important}
 html body wt-glass.is-on{opacity:1}
 html body wt-glass>wt-glass-rim{position:absolute!important;inset:0!important;display:block!important;border-radius:inherit!important;padding:1px!important;pointer-events:none!important;opacity:1!important;
   background:conic-gradient(from calc(var(--lean,0) * 18deg),rgba(255,255,255,.10) 0deg,rgba(255,255,255,.08) 45deg,rgba(255,255,255,.30) 110deg,rgba(255,255,255,calc(.42 + .2 * var(--lift,0))) 140deg,rgba(255,255,255,.18) 175deg,rgba(255,255,255,.06) 225deg,rgba(255,255,255,.30) 285deg,rgba(255,255,255,calc(.78 + .2 * var(--lift,0))) 318deg,rgba(255,255,255,.30) 345deg,rgba(255,255,255,.10) 360deg)!important;
   -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important}
 html body wt-glass>wt-glass-spec{position:absolute!important;inset:0!important;display:block!important;border-radius:inherit!important;pointer-events:none!important;overflow:hidden!important;opacity:1!important;background-image:none;
   background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,255,255,calc(.24 * var(--lift,0))) 0,rgba(255,255,255,calc(.10 * var(--lift,0))) 28%,rgba(255,255,255,0) 62%),
     radial-gradient(70% 55% at calc(30% + var(--lean,0) * 22%) 0%,rgba(255,255,255,calc(.16 + .10 * var(--lift,0))),rgba(255,255,255,0) 70%)!important}
 html body .wt-glass-host{touch-action:pan-y pinch-zoom}
 /* Under the glass a choice never dims on hover or press: the lens lifts and brightens, so its label stays at full strength. */
 html body .wt-glass-host>:is(button,a,[role=tab],.fb-chip,.game-card):not(:disabled):is(:hover,:active){opacity:1!important}
 html body .wt-glass-host>*,html body .wt-glass-host img,html body .wt-glass-host a{-webkit-user-drag:none!important;user-select:none!important;-webkit-user-select:none!important}
 @media (forced-colors:active){html body wt-glass{display:none!important}}
}

/* 2026-10-25 glass lighting pass: the lit bezel (dist/atelier.js lightMap) is the glass's light; the conic ring stays only as a faint
   hairline. Under a glass body the tab marks (event dots, underline bars) are gone and every label is centred in its pill. */
@layer wt-r3{
 html body wt-glass>wt-glass-light{position:absolute!important;inset:0!important;display:block!important;pointer-events:none!important;box-sizing:border-box!important;
   border-style:solid!important;border-width:0!important;border-color:transparent!important;background:none!important;opacity:calc(.82 + .18 * var(--lift,0))!important}
 html body wt-glass>wt-glass-rim{opacity:.32!important}
 html body:not(#wt-g1):not(#wt-g2) :is(#deals,#deal-grid,#intelligence,#game-current-signal,#native-feedback) :is(.filter-tabs,.trend-ranges,.carrier-main-tabs,.promotion-event-tabs).wt-glass-host>:is(button,[role=tab])::before,
 html body:not(#wt-g1):not(#wt-g2) :is(#deals,#deal-grid,#intelligence,#game-current-signal,#native-feedback) :is(.filter-tabs,.trend-ranges,.carrier-main-tabs,.promotion-event-tabs).wt-glass-host>:is(button,[role=tab])::after{content:none!important;display:none!important}
 html body:not(#wt-g1):not(#wt-g2) #deal-grid .promotion-event-tabs.wt-glass-host>[role=tab]{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:6px!important;padding-left:14px!important;padding-right:14px!important}
}

/* 2026-10-25 stress fixes: 44 px touch targets for the chart range (its pill stays 30 px; the glass sits inside) and the feedback chips;
   the feedback form sits on a dark glass panel so its labels read over the brightest art; focus glow restated for dialogs; the Motion
   switch shows On/Off from aria-pressed. */
@layer wt-r3{
 html body:not(#wt-g1) #game-current-signal .price-trend .trend-ranges>button{min-height:44px!important;height:44px!important;margin:-7px 0!important}
 html body #native-feedback .fb-chip span{min-height:44px!important}
 html body #native-feedback .native-feedback-fields{padding:clamp(18px,2.4vw,26px)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(14,15,19,.78),rgba(10,11,14,.86))!important;
   border:1px solid rgba(239,214,178,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px -30px rgba(0,0,0,.8)!important}
 html body [data-action=motion] .motion-state{margin-left:6px;opacity:.75}
 html[lang=en] body [data-action=motion][aria-pressed=true] .motion-state::after{content:'On'}
 html[lang=en] body [data-action=motion][aria-pressed=false] .motion-state::after{content:'Off'}
 html[lang=ko] body [data-action=motion][aria-pressed=true] .motion-state::after{content:'켜짐'}
 html[lang=ko] body [data-action=motion][aria-pressed=false] .motion-state::after{content:'꺼짐'}
 @media (forced-colors:none){
  html body:not(#wt-g1):not(#wt-g2) :is(dialog,#dialog,.pc-body) :is(a[href],button,summary,[role=tab],input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
    outline:none!important;box-shadow:0 0 0 1.5px rgba(239,214,178,.85),0 0 0 5px rgba(239,214,178,.14),0 0 24px -4px rgba(239,214,178,.4)!important}
  html body:not(#wt-g1):not(#wt-g2):not(#wt-g3) #dialog.pointer-open>.close:focus-visible{outline:none!important;box-shadow:var(--wt-e1),inset 0 0 0 1px rgba(255,255,255,.06)!important}
 }
}

@layer wt-r3{
 /* 44 px touch targets in the calculator (stress tap-target): the amount presets and the membership action. */
 html body details.quiet-section .calculator-inputs>.amount-presets button{min-height:44px!important;height:44px!important}
 html body details.quiet-section .membership-comparison .membership-primary{min-height:44px!important;height:44px!important}
 html body details.quiet-section .calculator-inputs>.amount-presets{margin-top:28px!important}
}

/* 2026-10-25 WebGL glass (dist/atelier.js GL): where the GPU draws the lens, the CSS body only carries the geometry (its rect is what the
   engine and the checks measure) and paints nothing; its light layers are off. Contrast themes hide the canvas like the body. */
@layer wt-r3{
 html.wt-glass-gl body wt-glass.gl:is(*,.refracts,.is-pressed){background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;opacity:0!important}
 html.wt-glass-gl body wt-glass.gl>*{display:none!important}
 @media (forced-colors:active){html body canvas.wt-glass-gl{display:none!important}}
}

/* Dock as Apple's tab bar (owner's reference 2026-10-26, iOS 26 Apple Music, dark): a full capsule in a mid grey, a clear step lighter than
   the page, with graded rims measured on the reference: along the top a 1 px rim brightest in its outer half (~2x the fill) and a sheen
   falling off over ~7 px; along the bottom the same a little dimmer and cool, rising over ~4 px; no rim on the rounded ends (the rims are
   inset shadows offset by y, so they thin to nothing round the ends, as Apple's do), and a soft dark outline.
   The fill is painted by an inset ::after so it sits above the phones' backing band (a negative-z layer of the same bar that used to cover
   the bar's lower half and flatten it); atelier.js reads this fill, its radius and its current inset to rebuild the bar inside the lens.
   While a finger holds the lens the bar grows slightly and lightens, as in the reference ("the task bar gets slightly bigger and shows that
   we are moving it"): the fill grows, not the box, so the items, their hit areas and the glass geometry stay where they are. */
@layer wt-r3{@media not all and (max-height:500px) and (min-width:521px){
 html:root body .site-header .header-navigation,html:root body .site-header .header-navigation>:is(nav,.header-actions){background:transparent!important;box-shadow:none!important}
 html:root body .site-header .header-navigation::after{content:''!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;border-radius:inherit!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.049) 1.5px,rgba(255,255,255,.029) 3.5px,rgba(255,255,255,.016) 5.5px,rgba(255,255,255,.007) 8.5px,rgba(255,255,255,0) 12px,
   rgba(225,235,255,0) calc(100% - 9px),rgba(225,235,255,.008) calc(100% - 6px),rgba(225,235,255,.019) calc(100% - 3.5px),rgba(225,235,255,.036) calc(100% - 1.5px),rgba(225,235,255,.06)) rgb(36,36,39)!important;
  /* no inset rim lines: they followed the rounded ends as a white outline (owner 2026-10-26: "the ends ... a shity white outline"); the
     top and bottom light lives in the vertical gradient above, which fades out along the ends by itself */
  box-shadow:0 0 0 .5px rgba(0,0,0,.6),0 14px 34px -10px rgba(0,0,0,.8)!important}
}}

/* Without WebGL the CSS body draws the glass (atelier.js): the same two materials as the shader, no glossy highlight layers, no glow
   (owner 2026-10-26: "goofy and plastic looking"). The dock's choice rests as a matte pill darker than its bar, sunk into it (reference
   2026-10-26), and lifts into a clear body with a fine lit rim; the game plate rests as smoked glass with a fine lip over the art and
   clears as it lifts. Contrast themes still hide it (rule above). */
@layer wt-r3{
 html body wt-glass[data-glass=dock]:is(*,.refracts,.is-pressed){background:rgba(6,6,8,calc(.95 - .9 * var(--lift,0)))!important;
   box-shadow:inset 0 .5px 0 rgba(255,255,255,calc(.32 * var(--lift,0))),inset 0 -.5px 0 rgba(255,255,255,calc(.12 * var(--lift,0))),inset 0 0 0 .5px rgba(255,255,255,calc(.16 * var(--lift,0))),0 1px 3px rgba(0,0,0,calc(.45 * var(--lift,0)))!important}
 html body wt-glass[data-glass=dock]:not(.refracts){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html body wt-glass[data-glass=games]:is(*,.refracts,.is-pressed){background:rgba(6,7,10,calc(.55 - .5 * var(--lift,0)))!important;
   box-shadow:inset 0 .5px 0 rgba(255,255,255,calc(.26 + .1 * var(--lift,0))),inset 0 0 0 .5px rgba(255,255,255,calc(.14 + .06 * var(--lift,0))),0 2px 6px -2px rgba(0,0,0,calc(.4 * var(--lift,0)))!important}
 html body wt-glass[data-glass=games]:not(.refracts){-webkit-backdrop-filter:blur(6px) saturate(1.1)!important;backdrop-filter:blur(6px) saturate(1.1)!important}
 html body wt-glass:is([data-glass=dock],[data-glass=games])>:is(wt-glass-spec,wt-glass-rim){display:none!important}
 html body wt-glass:is([data-glass=dock],[data-glass=games])>wt-glass-light{opacity:calc(.85 * var(--lift,0))!important}
}

/* 2026-10-26 selection glide (dist/atelier.js, last IIFE; owner: "i only want the game selection tab and the task bar to use liquid glass
   animations other elements need a animation for them not all liquid glass"). The chart range, deal filters, tile tabs and feedback chips
   are off the glass: one matte plate per row (wt-sel) travels between the choices: a champagne hairline pill with a warm champagne wash (not
   a grey fill), a faint top light and a soft shadow. Where a row is marked (wt-sel-host) the chosen item's own fill, ring, underline or dot
   steps aside; without the script, or in Windows contrast themes, each item marks itself (its CSS look, or the system Highlight).
   Two levels, one family (judges 2026-10-26): the event pager inside a tile is the second level and wears a quieter mark (a smaller soft
   champagne tint: no ring, no shadow) under the main tabs' ringed plate; the feedback chips, whose unchosen chips are outlined pills, wear
   a brighter wash and ring so the choice reads as filled against outlines. */
@layer wt-r3{
 html body:not(#wt-s1):not(#wt-s2) :is(#game-current-signal .trend-ranges,#deals .filter-tabs,#deal-grid .carrier-main-tabs,#deal-grid .promotion-event-tabs,#native-feedback .fb-chips).wt-sel-host{isolation:isolate!important}
 /* positioned for the plate, except an event pager that an earlier rule already places absolutely under the event heading (stress tile-baseline 2026-10-26) */
 html body:not(#wt-s1):not(#wt-s2) :is(#game-current-signal .trend-ranges,#deals .filter-tabs,#deal-grid .carrier-main-tabs,#deal-grid .promotion-event-tabs:not(.carrier-panel:has(>.promotion-event-tabs+.promotion-pages>.promotion-slide>h3:first-child)>*),#native-feedback .fb-chips).wt-sel-host{position:relative!important}
 html body wt-sel{position:absolute!important;left:0!important;top:0!important;z-index:-1!important;display:block!important;box-sizing:border-box!important;margin:0!important;padding:0!important;
   min-width:0!important;min-height:0!important;max-width:none!important;pointer-events:none!important;opacity:0;transform-origin:50% 50%!important;contain:layout style!important;animation:none}
 html body wt-sel.is-on{opacity:1}
 html body wt-sel{border-radius:999px!important;border:1px solid rgba(239,214,178,.42)!important;
   background:linear-gradient(180deg,rgba(239,214,178,.15),rgba(239,214,178,.07))!important;
   box-shadow:inset 0 1px 0 rgba(255,246,232,.16),0 1px 2px rgba(0,0,0,.28),0 8px 18px -12px rgba(0,0,0,.7)!important}
 /* Event pager: a tint, no ring and no shadow, so it sits a level under the tile's main tabs; over the brightest art it still lifts the
    chosen name off the art (stress b4 ink check). */
 html body #deal-grid .promotion-event-tabs>wt-sel{border-color:transparent!important;background:rgba(239,214,178,.16)!important;box-shadow:inset 0 .5px 0 rgba(255,246,232,.08)!important}
 /* Feedback chips: every chip is an outlined pill, so the chosen one is filled: twice the wash, a brighter ring and top light. */
 html body #native-feedback .fb-chips>wt-sel{border-color:rgba(239,214,178,.72)!important;background:linear-gradient(180deg,rgba(239,214,178,.3),rgba(239,214,178,.19))!important;
   box-shadow:inset 0 1px 0 rgba(255,246,232,.24),0 1px 2px rgba(0,0,0,.3),0 8px 18px -12px rgba(0,0,0,.7)!important}
 @media (forced-colors:active){html body wt-sel{display:none!important}}
 /* The chosen item's own mark steps aside where the row is marked. */
 @media (forced-colors:none){
  html body:not(#wt-s1):not(#wt-s2) #intelligence #game-current-signal .price-trend .trend-ranges.wt-sel-host>button[aria-pressed=true],
  html body:not(#wt-s1):not(#wt-s2) #deals .filter-tabs.wt-sel-host>button[aria-pressed=true]{background:transparent!important;background-image:none!important;border-color:transparent!important;box-shadow:none!important}
  html body:not(#wt-s1):not(#wt-s2) #deals .filter-tabs.wt-sel-host>button::after{opacity:0!important}
  html body:not(#wt-s1):not(#wt-s2) #deals .deal-card>.carrier-main-tabs.wt-sel-host>button::after,
  html body:not(#wt-s1):not(#wt-s2) #deals .deal-card .promotion-event-tabs.wt-sel-host>button::before{opacity:0!important;transition:none!important;display:none!important}
  /* A marked pager's tab takes 12 px around its name, in the room the hidden dot and the gap had (1 px in, 12 px into the gap): the same
     footprint (max(target, name + 13 px)), so lines wrap and names sit where they did, and the plate is the tab's own box (it overhung a
     tab by 12 px). A short name (a page number) is centred in its target; the focus glow follows the pill. */
  html body:not(#wt-s1):not(#wt-s2) #deals .deal-card .promotion-event-tabs.wt-sel-host>button{padding-inline:12px!important;margin:0 -12px 0 1px!important;
    min-width:calc(var(--wt-target) + 11px)!important;max-width:calc(100% - 1px)!important;justify-content:center!important;border-radius:999px!important}
  html body:not(#wt-s1):not(#wt-s2) #native-feedback .fb-chips.wt-sel-host .fb-chip input:checked+span{background:rgba(255,250,240,0)!important;border-color:rgba(239,214,178,0)!important;box-shadow:none!important}
  /* The chosen main tab keeps the others' weight: the face swap (static 500/600 files) jumped the label at the start of the glide. */
  html body:not(#wt-s1):not(#wt-s2) #deals .deal-card>.carrier-main-tabs.wt-sel-host>button[aria-selected=true]{font-weight:500!important}
  /* Unmarked (before the script runs): the chosen filter is a plate in CSS, the same look the glide draws; every filter is pill-shaped so the
     focus glow follows the same outline. */
  html body:not(#wt-s1) #deals .filter-tabs>button{border-radius:999px!important}
  html body:not(#wt-s1) #deals .filter-tabs:not(.wt-sel-host)>button[aria-pressed=true]{background:linear-gradient(180deg,rgba(239,214,178,.15),rgba(239,214,178,.07))!important;
    box-shadow:inset 0 0 0 1px rgba(239,214,178,.42),inset 0 2px 0 -1px rgba(255,246,232,.16)!important}
 }
 /* The new label's colour eases in with the mark (280 ms); the touched choice dips to 97% and comes back without overshoot. */
 @media (min-width:0){
  html:not(.language-switching) body:not(.motion-off):not(#wt-s1):not(#wt-s2) .wt-sel-host>:is(button,[role=tab],.fb-chip){
    transition:color .28s cubic-bezier(.22,1,.36,1),background-color .28s cubic-bezier(.22,1,.36,1),border-color .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1),scale .26s cubic-bezier(.22,1,.36,1)!important;scale:1!important}
  html:not(.language-switching) body:not(.motion-off):not(#wt-s1):not(#wt-s2) .wt-sel-host>:is(button,[role=tab],.fb-chip).wt-sel-press{scale:.97!important;
    transition-duration:.28s,.28s,.28s,.28s,.1s!important;transition-timing-function:cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.22,1,.36,1),cubic-bezier(.3,0,.5,1)!important}
  html:not(.language-switching) body:not(.motion-off):not(#wt-s1):not(#wt-s2) #native-feedback .fb-chips.wt-sel-host .fb-chip span{
    transition:color .28s cubic-bezier(.22,1,.36,1),background-color .28s cubic-bezier(.22,1,.36,1),border-color .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1)!important}
  /* The chosen chip's own ring fades only as the plate arrives over it (the plate is ~75% of the way there at 130 ms), never leaving a bare chip. */
  html:not(.language-switching) body:not(.motion-off):not(#wt-s1):not(#wt-s2) #native-feedback .fb-chips.wt-sel-host .fb-chip input:checked+span{transition-delay:0s,.13s,.13s,.13s!important;transition-duration:.28s,.18s,.18s,.18s!important}
  html:not(.language-switching) body:not(.motion-off) wt-sel{transition:scale .26s cubic-bezier(.22,1,.36,1)!important;scale:1!important}
  html:not(.language-switching) body:not(.motion-off) wt-sel.is-pressed{scale:.97!important;transition-duration:.1s!important;transition-timing-function:cubic-bezier(.3,0,.5,1)!important}
 }
 /* Windows contrast themes: the chosen feedback chip is a Highlight pill too (the other selectors already are, see the forced-colors block above). */
 @media (forced-colors:active){
  html body:not(#wt-s1) #native-feedback .fb-chip input:checked+span{forced-color-adjust:none!important;background:Highlight!important;color:HighlightText!important;border-color:Highlight!important}
 }
}

/* The selection glide rows dip to 97% on press; the old :active dim (premium-motion.css, opacity .82) stacked on it and flickered the
   label before the mark arrived (judges 2026-10-26). The game picker's glass already shows the press. */
@layer wt-r3{html body .wt-sel-host>:is(button,[role=tab],.fb-chip):active,html body #games .game-card:active{opacity:1!important}
 /* ...and the old :active press (interaction.css, transform scale(.99), untransitioned under the glide) snapped 1% on press and back on
    release on top of the eased dip (2026-10-26). */
 html body .wt-sel-host>:is(button,[role=tab],.fb-chip):active{transform:none!important}}
/* Footer Motion switch: the old footer rule (refinement.css, main > footer span{flex-basis:100%}) took the On/Off state span to a full
   line, so "Motion" broke letter by letter (audit 2026-10-26). */
@layer wt-r3{html body #home>footer>button .motion-state{flex:none!important}}
/* Keyboard focus on the selection-glide rows: the focus glow used to be restated for glass hosts only, and the chosen item's own-mark reset
   (box-shadow none) removed it from the chosen button (stress tab-walk 2026-10-26). */
@layer wt-r3{@media (forced-colors:none){
 html body:not(#wt-s1):not(#wt-s2):not(#wt-s3):not(#wt-s4):not(#wt-s5) .wt-sel-host>:is(button,[role=tab]):focus-visible,
 html body:not(#wt-s1):not(#wt-s2):not(#wt-s3):not(#wt-s4) #native-feedback .fb-chips.wt-sel-host .fb-chip input:focus-visible+span{outline:none!important;
  box-shadow:0 0 0 1.5px rgba(239,214,178,.85),0 0 0 5px rgba(239,214,178,.14),0 0 24px -4px rgba(239,214,178,.4)!important}
 /* The main tabs' glow is a pill, like the plate inside it and every other glide row's glow (it was an 8 px rectangle around the plate). */
 html body:not(#wt-s1):not(#wt-s2) #deals .deal-card>.carrier-main-tabs.wt-sel-host>button:focus-visible{border-radius:999px!important}
}}
/* No link preview, URL callout or text selection on a long press of the dock's icons (owner 2026-10-26; atelier.js cancels the menu). */
@layer wt-r3{html body .site-header .header-navigation :is(nav a,.search-button),html body .site-header .header-navigation :is(nav a,.search-button) *{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}}

/* Selection marks after Vercel's Geist tabs (owner 2026-10-26: no bubbles, then "too ai slopy", then "find a good design on the internet").
   The chosen item gets one solid line in the text colour: on the row's divider for a tile's main tabs, under the label for the route
   filters, the chart ranges and the event pager. No gradient, glow, fill or ring. A soft rounded block follows the mouse between choices
   (wt-hover, atelier.js). The glide (wt-sel) still carries the line. The game picker, the dock and the feedback chips are unchanged. */
@layer wt-r3{
 html body:not(#wt-q1):not(#wt-q2) :is(#deals .filter-tabs,#game-current-signal .trend-ranges,#deal-grid .carrier-main-tabs,#deal-grid .promotion-event-tabs)>wt-sel{
   border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
 html body:not(#wt-q1):not(#wt-q2) :is(#deals .filter-tabs,#game-current-signal .trend-ranges,#deal-grid .carrier-main-tabs,#deal-grid .promotion-event-tabs)>wt-sel::before{
   content:''!important;position:absolute!important;display:block!important;pointer-events:none!important;height:2px!important;background:#f2eee6!important;border-radius:0!important}
 html body:not(#wt-q1):not(#wt-q2) #deals .filter-tabs>wt-sel::before{left:16px!important;right:16px!important;bottom:2px!important}
 html body:not(#wt-q1):not(#wt-q2) #game-current-signal .trend-ranges>wt-sel::before{left:8px!important;right:8px!important;bottom:1px!important}
 html body:not(#wt-q1):not(#wt-q2) #deal-grid .carrier-main-tabs>wt-sel::before{left:12px!important;right:12px!important;bottom:-1px!important}
 html body:not(#wt-q1):not(#wt-q2) #deal-grid .promotion-event-tabs>wt-sel::before{left:12px!important;right:12px!important;bottom:0!important;height:1px!important}
 html body:not(#wt-q1):not(#wt-q2) #deals .deal-card>.carrier-main-tabs.wt-sel-host>button:focus-visible{border-radius:6px!important}
 html body:not(#wt-q1):not(#wt-q2) :is(#deals .filter-tabs>button[aria-pressed=true],#game-current-signal .trend-ranges>button[aria-pressed=true],#deal-grid :is(.carrier-main-tabs,.promotion-event-tabs)>[role=tab][aria-selected=true]){color:#f2eee6!important}

 html body wt-hover{position:absolute!important;left:0!important;top:0!important;z-index:-1!important;display:block!important;box-sizing:border-box!important;margin:0!important;padding:0!important;
   min-width:0!important;min-height:0!important;max-width:none!important;border:0!important;border-radius:6px!important;background:rgba(255,255,255,.06)!important;
   pointer-events:none!important;opacity:0}
 html body wt-hover.is-on{opacity:1}
 @media (min-width:0){
  html:not(.language-switching) body:not(.motion-off) wt-hover{transition:opacity .15s ease,transform .15s cubic-bezier(.2,0,0,1),width .15s cubic-bezier(.2,0,0,1),height .15s cubic-bezier(.2,0,0,1)!important}
  html:not(.language-switching) body:not(.motion-off) wt-hover.is-placing{transition:none!important}
 }
 @media not all{html body wt-hover{transition:opacity .12s linear!important}}
 body.motion-off wt-hover{transition:opacity .12s linear!important}

 /* Before the script marks the row, the chosen filter draws the same line in CSS. */
 @media (forced-colors:none){
  html body:not(#wt-q1):not(#wt-q2) #deals .filter-tabs:not(.wt-sel-host)>button[aria-pressed=true]{box-shadow:none!important;
    background:linear-gradient(#f2eee6,#f2eee6) no-repeat 50% calc(100% - 2px)/calc(100% - 32px) 2px!important}
 }
 @media (forced-colors:active){html body wt-sel::before,html body wt-hover{display:none!important}}
}

/* The script title's white outline (atelier.css, -webkit-text-stroke: 1.5px #fff) is off. Unlayered so it beats that rule. */
html:not([lang=ko]) body .hero h1,
html[lang=ko] body .hero h1,
html body .hero h1 span{
  -webkit-text-stroke:0 transparent!important;
}

/* First screen (desktop): the graph card sits centred between the page's top edge and the bottom dock (gap above = gap below). The hero
   fills the window below the 60 px header block; its bottom padding reserves the dock (62 px, 10 px or the home-indicator inset above
   the edge) plus the header's 60 px, so the centre lands on the midpoint of the window above the dock. */
@media (min-width:900px){
  html body .hero{min-height:calc(100svh - 60px)!important;align-items:center!important;
    padding-top:0!important;padding-bottom:calc(62px + max(10px, env(safe-area-inset-bottom)) + 60px)!important}
}

/* First screen (desktop): the title block, its buttons and the graph card are 12% smaller. Nothing outside the hero is touched. */
@media (min-width:900px){
  html body .hero .hero-copy{transform:scale(.88)!important;transform-origin:0 50%!important}
  html body .hero #intelligence{transform:scale(.88)!important;transform-origin:100% 50%!important}
}
/* Phone dock spacing (owner 2026-10-26: "the space between each icons are too big", then "too small ... like the apple music task bar"): measured on the owner's Apple Music screenshot, a 348 px capsule with 4 px
   padding, four 85 px items, 26 px icons, 600-weight labels, and the selected pill wider than its item (glass inset -1 x 5 in atelier.js)
   (was 92 px), the capsule hugging them and centred, so the icons sit close like Apple's tab bar. Targets stay >= 44 px. */
@layer wt-r3{@media not all and (max-height:500px) and (min-width:521px){
 html:root body .site-header .header-navigation{width:min(348px,calc(100% - 24px))!important;max-width:calc(100% - 24px)!important;right:auto!important;padding:0 4px!important;box-sizing:border-box!important}
 html:root body .site-header .header-navigation>nav{display:flex!important;flex:3 1 0!important;min-width:0!important;width:auto!important;gap:0!important;grid-template-columns:none!important}
 html:root body .site-header .header-navigation>.header-actions{flex:1 1 0!important;min-width:0!important;width:auto!important}
 html:root body .site-header .header-navigation :is(nav>a,.search-button){flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important}
 html:root body .site-header .header-navigation :is(nav>a,.search-button) :is(.nav-icon,svg){width:26px!important;height:26px!important}
 html:root body .site-header .header-navigation :is(nav>a,.search-button){font:600 11.5px/1.15 var(--wt-font-text)!important;letter-spacing:0!important}
}}
/* Personal information terms in the sign-in sheet (owner 2026-10-26: "it opens with a very unsmooth animation and it has too mutch words i
   cant even read them"). The legal text itself must stay; it is set to read: larger type, more air between the parts, the labels as clear
   headings, a measure of ~60 characters, and the panel eases in (height in engines that animate details, a soft rise everywhere). */
@layer wt-r3{
 html body #dialog .auth .auth-privacy .account-privacy-list{gap:18px!important;margin:14px 0 4px!important}
 html body #dialog .auth .auth-privacy .account-privacy-list>div{gap:4px!important;padding:0 0 16px!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
 html body #dialog .auth .auth-privacy .account-privacy-list>div:last-child{border-bottom:0!important;padding-bottom:0!important}
 html body #dialog .auth .auth-privacy .account-privacy-list dt{font:600 13px/1.35 var(--wt-font-text)!important;letter-spacing:.01em!important;color:#f3f1ed!important}
 html body #dialog .auth .auth-privacy .account-privacy-list dd{font:400 14px/1.7 var(--wt-font-text)!important;color:#c9c4ba!important;max-width:60ch!important}
 @media (min-width:0){
  html body:not(.motion-off) #dialog .auth .auth-privacy[open]>:not(summary){animation:wt-privacy-in .6s cubic-bezier(.22,1,.36,1) both}
  @supports (interpolate-size:allow-keywords){
   html body:not(.motion-off) #dialog .auth .auth-privacy{interpolate-size:allow-keywords}
   html body:not(.motion-off) #dialog .auth .auth-privacy::details-content{height:0;overflow:clip;transition:height .6s cubic-bezier(.22,1,.36,1),content-visibility .6s allow-discrete}
   html body:not(.motion-off) #dialog .auth .auth-privacy[open]::details-content{height:auto}
  }
 }
}
@keyframes wt-privacy-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}


/* Spotlight search (owner 2026-10-26: "like apple spotlight ... i want to see the background entirely not blured ... nothing in under
   unless i search it and the selection type on the right side"): one frosted capsule and round category buttons beside it, over the page
   as it is; results appear under it only once something is typed (or a category is chosen), as Spotlight rows with icons. */
html.spot-open{overflow:hidden}
#spotlight{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:max(12vh,calc(env(safe-area-inset-top) + 24px)) 16px 24px;background:transparent;opacity:0;transition:opacity .3s cubic-bezier(.22,1,.36,1)}
#spotlight.is-open{opacity:1}
#spotlight .spot-panel{width:min(680px,100%);display:grid;gap:10px;transform:translateY(-8px) scale(.985);transition:transform .45s cubic-bezier(.22,1,.36,1)}
#spotlight.is-open .spot-panel{transform:none}
#spotlight .spot-row{display:flex;gap:10px;align-items:center}
#spotlight .spot-bar,#spotlight .spot-kind,#spotlight .spot-list{background:rgba(40,40,46,.5);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
 box-shadow:inset 0 .5px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(255,255,255,.14),0 16px 44px -16px rgba(0,0,0,.65)}
#spotlight .spot-bar{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:28px;cursor:text}
#spotlight .spot-bar:focus-within{box-shadow:inset 0 .5px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.26),0 16px 44px -16px rgba(0,0,0,.65)}
#spotlight .spot-bar svg{width:22px;height:22px;flex:none;color:rgba(255,255,255,.7)}
#spotlight #site-search::placeholder{color:rgba(255,255,255,.5)}
#spotlight #site-search::-webkit-search-cancel-button{display:none}
#spotlight .spot-kind{flex:none;display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;color:rgba(255,255,255,.82);transition:background-color .3s,color .3s}
#spotlight .spot-kind svg{width:22px;height:22px}
#spotlight .spot-kind[aria-pressed=true]{background:rgba(255,255,255,.26);color:#fff}
#spotlight .spot-kind:focus-visible,#spotlight .spot-hit:focus-visible{outline:none;box-shadow:0 0 0 1.5px rgba(239,214,178,.85),0 0 0 5px rgba(239,214,178,.14)}
#spotlight .spot-list{display:grid;gap:2px;padding:8px;border-radius:22px;max-height:min(60vh,520px);overflow:auto}
#spotlight .spot-list:empty{display:none}
#spotlight .spot-hit{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:6px 10px;border:0;border-radius:14px;background:transparent;color:#fff;text-align:left;cursor:pointer}
#spotlight .spot-hit:first-child,#spotlight .spot-hit:hover{background:rgba(255,255,255,.1)}
#spotlight .spot-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
#spotlight .spot-icon.is-setting{background:linear-gradient(180deg,#4a4a52,#2c2c33);color:#f2eee6}
#spotlight .spot-icon.is-setting svg{width:20px;height:20px}
#spotlight .spot-icon .spot-logo{display:grid;place-items:center;width:100%;height:100%;overflow:hidden}
#spotlight .spot-text{display:grid;gap:1px;min-width:0}
#spotlight .spot-label{font:500 16px/1.3 var(--wt-font-text,system-ui);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#spotlight .spot-sub{font:400 12.5px/1.3 var(--wt-font-text,system-ui);color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#spotlight .search-empty{margin:10px;color:rgba(255,255,255,.6);font-size:14px}
@media (max-width:520px){#spotlight{padding-top:max(8vh,calc(env(safe-area-inset-top) + 16px))}#spotlight .spot-bar{height:50px;padding:0 16px}#spotlight .spot-kind{width:50px;height:50px}html body #spotlight #site-search{font-size:18px!important}}
@media (prefers-reduced-transparency:reduce){#spotlight .spot-bar,#spotlight .spot-kind,#spotlight .spot-list{background:#26262c;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media not all{#spotlight,#spotlight .spot-panel{transition:none}}
body.motion-off #spotlight,body.motion-off #spotlight .spot-panel{transition:none}
@layer wt-r3{html body:not(#sp1):not(#sp2):not(#sp3):not(#sp4):not(#sp5):not(#sp6) #spotlight #site-search:is(*,:focus,:focus-visible,:hover){flex:1!important;min-width:0!important;width:auto!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important;height:100%!important;min-height:0!important;color:#fff!important;font:400 21px/1 var(--wt-font-text,system-ui)!important}}
@layer wt-r3{html body:not(#sp1):not(#sp2):not(#sp3) #spotlight .spot-bar{min-width:0!important;width:auto!important;flex:1 1 0!important;margin:0!important}html body:not(#sp1):not(#sp2):not(#sp3) #spotlight .spot-panel{min-width:0!important;max-width:100%!important}}
@media (max-width:520px){#spotlight .spot-row{gap:8px}#spotlight .spot-kind{width:46px;height:46px}#spotlight .spot-bar{height:46px}}
@layer wt-r3{html body:not(#sp1):not(#sp2):not(#sp3):not(#sp4):not(#sp5):not(#sp6):not(#sp7) #spotlight #site-search{width:0!important;flex:1 1 0!important}html body #spotlight .spot-row{min-width:0!important}}
#spotlight .spot-icon{clip-path:inset(0 round 10px);-webkit-clip-path:inset(0 round 10px);box-shadow:none!important}
#spotlight .spot-icon.is-setting{box-shadow:none}
/* No scroll bars anywhere (owner rule, repeated 2026-10-26: "delete all the scroll bars ... never add them"). Every page, sheet, list
   and search result still scrolls by touch, wheel, trackpad and keyboard; no bar is ever drawn. */
@layer wt-r3{html,html *,html *::before,html *::after{scrollbar-width:none!important;-ms-overflow-style:none!important}}
html::-webkit-scrollbar,html *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}
/* Spotlight legibility does not depend on backdrop blur (live check 2026-10-26: Safari drew the page text through the results). Near-opaque
   dark glass everywhere; on touch screens no backdrop filter at all, like the dock (smooth on phones), and fully legible. */
#spotlight .spot-bar,#spotlight .spot-kind{background:rgba(34,34,40,.92)}
#spotlight .spot-kind[aria-pressed=true]{background:rgba(92,92,100,.92)}
#spotlight .spot-list{background:rgba(24,24,28,.96)}
@media (hover:none),(pointer:coarse){#spotlight .spot-bar,#spotlight .spot-kind,#spotlight .spot-list{-webkit-backdrop-filter:none;backdrop-filter:none}#spotlight .spot-bar,#spotlight .spot-kind{background:rgba(36,36,42,.97)}#spotlight .spot-list{background:rgba(24,24,28,.97)}}