@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400&family=Noto+Serif+KR:wght@300;400;500&display=swap');
.beta-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}.beta-actions button{font-size:12px;padding:9px 14px}.beta-note{font-size:11px;color:#bcc7db;margin-top:10px}.beta-form label{display:block;margin:14px 0 6px}.beta-form textarea,.beta-form select{width:100%;background:#1d293c;color:#edf1ff;border:1px solid #63718b;border-radius:9px;padding:12px;font:inherit}.beta-form textarea{min-height:110px}.beta-form button{margin-top:14px}.beta-status{min-height:20px;font-size:13px}.beta-consent{font-size:11px;max-width:650px}.beta-consent button{font-size:11px;text-decoration:underline;margin:6px 12px 0 0}.beta-empty{grid-column:1/-1;padding:22px;border:1px solid #7384a54d;border-radius:14px}.beta-empty p{margin:8px 0 0;font-size:13px;color:#bcc7db}
/* Fit the longer product name without changing the header structure. */
header .brand{white-space:nowrap}
footer{flex-wrap:wrap}
footer>.beta-note,footer>.beta-consent{flex-basis:100%}
@media(max-width:800px){header .brand{font-size:20px}header{gap:10px}.header-actions{gap:10px}.header-actions .small{white-space:nowrap;font-size:10px;padding:8px}.brand-star{display:none}}
body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* Korean uses a display face for the brand and headings; body copy stays legible. */
html[lang=ko] .brand,html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] .step h3,html[lang=ko] dialog h2{font-family:'Noto Serif KR','Gowun Batang','Batang','Malgun Myeong',serif!important;font-weight:300!important;letter-spacing:-.07em!important}
html[lang=ko] h1{font-size:clamp(40px,4vw,62px)!important;line-height:1.18!important;white-space:normal}
html[lang=ko] h1 span{background:linear-gradient(110deg,#fff5df,#d6b274 48%,#f2e4bc);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
html[lang=ko] .brand{font-size:clamp(20px,2.35vw,32px)!important;font-weight:400!important;letter-spacing:-.09em!important;min-width:0}
@media(max-width:800px){header{justify-content:space-between;gap:8px}.brand{flex:1 1 auto}.header-actions{flex:0 0 auto}.header-actions .small{padding-left:11px;padding-right:11px}html[lang=ko] .brand{font-size:clamp(17px,5.5vw,25px)!important}}
@media(max-width:460px){.header-actions .small{display:none}}
@media(min-width:801px) and (max-width:1120px){header{gap:14px}.brand{font-size:clamp(25px,3.2vw,32px)}nav{margin-left:0}.header-actions{gap:10px}.header-actions .small{padding-left:12px;padding-right:12px}}
/* The glass surface reaches both screen edges; only its contents use a gutter. */
header{max-width:none;margin-left:0!important;margin-right:0!important;padding-left:clamp(18px,5vw,72px);padding-right:clamp(18px,5vw,72px)}
/* Lightweight liquid-glass finishing: transform and opacity only for motion. */
:root{--glass-ease:cubic-bezier(.16,1,.3,1);--glass-sheen:linear-gradient(115deg,#ffffff1c 0%,#ffffff06 28%,transparent 52%)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header,.glass,dialog{background-image:var(--glass-sheen),linear-gradient(125deg,#2831428c,#18213182);backdrop-filter:blur(18px) saturate(128%);-webkit-backdrop-filter:blur(18px) saturate(128%)}
  .price-panel{background-image:var(--glass-sheen),linear-gradient(125deg,#354052a8,#202a3aa0)}
  .community,.insights{background-image:var(--glass-sheen),linear-gradient(125deg,#1622379d,#101a2c96)}
}
header{background-image:linear-gradient(115deg,#ffffff0b 0%,#ffffff03 28%,transparent 52%),linear-gradient(125deg,#1b273866,#131d2c60)!important}
.form-embed{display:grid;gap:13px}.form-embed h2{margin-bottom:0}.form-embed p{margin:0}.form-embed iframe{width:100%;height:min(68dvh,680px);border:0;border-radius:10px;background:#fff}.form-fallback{justify-self:start}
.native-feedback{display:grid;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid #c7d4e62b}.native-feedback-head h3{font:20px/1.3 var(--serif);margin:3px 0}.native-feedback-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.native-feedback label{display:grid;gap:6px;color:#bec9dc;font-size:10px}.native-feedback select,.native-feedback input,.native-feedback textarea{width:100%;border:1px solid #c9d6ea35;border-radius:8px;background:#0e182766;color:#f0f3fa;padding:10px;font:inherit}.native-feedback input{color:#aebbd0}.native-feedback textarea{min-height:96px;resize:vertical;line-height:1.6}.native-feedback-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.native-feedback-footer small,.native-feedback-status{font-size:10px;color:#aebbd0}.native-feedback-status{min-height:16px;margin:0}.native-feedback .primary{font-size:11px;white-space:nowrap}@media(max-width:600px){.native-feedback-fields{grid-template-columns:1fr}.native-feedback-footer{align-items:flex-start;flex-direction:column}.native-feedback .primary{width:100%}}
.hero-actions .outline{min-width:154px;justify-content:space-between;gap:10px;padding-left:18px;padding-right:14px}.hero-actions .play{flex:0 0 24px;margin:0}
@media (prefers-reduced-motion:no-preference){
  .reveal,.reveal.revealed{opacity:1!important;transform:none!important;transition:none!important}
  header,.glass,.deal-card,.game-card,.insight-row,.native-feedback{position:relative;overflow:hidden}
  header::after,.glass::after,.deal-card::after,.game-card::after,.native-feedback::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0%,transparent 36%,#ffffff16 49%,transparent 62%,transparent 100%);transform:translateX(-130%);animation:surface-shine 6.5s cubic-bezier(.22,.61,.36,1) infinite}
  .deal-card:nth-child(2n)::after,.game-card:nth-child(2n)::after{animation-delay:1.1s}
  .deal-card:nth-child(3n)::after,.game-card:nth-child(3n)::after{animation-delay:2.2s}
  .price-panel::before{content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 28% 0%,#ffffff18,transparent 38%),linear-gradient(140deg,transparent,#d8e8ff10,transparent);opacity:.55;animation:panel-glow 7s ease-in-out infinite}
  .art-credit{animation:soft-float 6.5s ease-in-out infinite}
  .merchant,.step-icon,.search-button{animation:soft-pulse 4.2s ease-in-out infinite}
  .glass,header,.deal-card,.game-card,.insight-row{transition:transform 720ms var(--glass-ease),background-color 720ms var(--glass-ease),border-color 720ms var(--glass-ease),box-shadow 900ms var(--glass-ease)}
  .primary,.outline,.text-button{transition:transform 600ms var(--glass-ease),box-shadow 700ms var(--glass-ease),background-color 600ms var(--glass-ease),border-color 600ms var(--glass-ease)}
  .deal-card:hover,.game-card:hover,.insight-row:hover{will-change:transform}
  .compare-row i{transition:width 900ms var(--glass-ease)!important}
  .game-card.selected{animation:premium-select 760ms var(--glass-ease)}
  @media(hover:hover) and (pointer:fine){
    .deal-card:hover{transform:translate3d(0,-9px,0);box-shadow:0 34px 70px #05091450}
    .game-card:hover{transform:translate3d(0,-7px,0)}
    .primary:hover,.outline:hover{transform:translate3d(0,-3px,0);box-shadow:0 18px 42px #11182f48}
  }
}
@keyframes premium-select{0%{transform:translate3d(0,5px,0) scale(.985);opacity:.72}60%{transform:translate3d(0,-1px,0) scale(1.012);opacity:1}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes surface-shine{0%,16%{transform:translateX(-130%)}52%,100%{transform:translateX(130%)}}
@keyframes panel-glow{0%,100%{opacity:.42}50%{opacity:.72}}
@keyframes soft-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
@keyframes soft-pulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.045);opacity:1}}
/* Only these two selectors receive the moving glass treatment. */
.liquid-selector{position:relative;isolation:isolate}
.liquid-selector>.selector-glass{position:absolute;left:0;top:0;pointer-events:none;z-index:0;border:1px solid #edf4ff55;border-radius:11px;background:linear-gradient(125deg,#f3f7ff24,#bacde610 45%,#ecf5ff1d);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -1px 0 #d4e5ff24,0 8px 24px #080e1a24;backdrop-filter:blur(6px) saturate(135%);overflow:hidden;will-change:transform,width,height}
.selector-glass::before,.selector-glass::after{content:'';position:absolute;inset:-35%;border-radius:inherit;pointer-events:none}
.selector-glass::before{background:radial-gradient(circle at 30% 20%,#ffffff2d,transparent 34%),radial-gradient(circle at 75% 85%,#c9e3ff20,transparent 38%);mix-blend-mode:screen;animation:liquid-drift 7.5s cubic-bezier(.37,0,.63,1) infinite alternate}
.selector-glass::after{background:linear-gradient(115deg,transparent 18%,#ffffff1b 38%,transparent 57%,#dcefff13 78%,transparent);transform:translateX(-30%);animation:liquid-sheen 5.8s cubic-bezier(.22,.61,.36,1) infinite}
.liquid-selector>button{position:relative;z-index:1}
.liquid-selector .game-card.selected,.liquid-selector button[aria-pressed=true]{background:transparent;border-color:transparent;box-shadow:none;animation:none}
.liquid-selector .selection-line{opacity:0}
.liquid-selector .game-card,.liquid-selector .game-card:hover{transform:none;transition:background-color 900ms ease,color 600ms ease}
.liquid-selector .game-card img{transition:transform 1100ms cubic-bezier(.16,1,.3,1)}
.filter-tabs.liquid-selector>.selector-glass{border-radius:8px}
/* JS owns these transforms and opacities; CSS must not chase each animation frame. */
.hero-copy>.eyebrow,.hero h1,.hero .intro,.hero-actions,.logo-strip,.price-panel,
.section-heading,h2,footer,#deal-grid,dialog{transition-property:color,border-color!important}
dialog[open]{animation:none!important}
.game-card.selected{animation:none!important}
.deal-card,.game-card,.insight-row{transition:transform 750ms cubic-bezier(.22,.61,.36,1),border-color 600ms ease,background-color 600ms ease!important}
.deal-card:hover{box-shadow:0 18px 55px #03071325,inset 0 1px 0 #ffffff05}
@media(prefers-reduced-motion:reduce){.deal-card,.game-card,.insight-row{transition:none!important}}
body.motion-off .deal-card,body.motion-off .game-card,body.motion-off .insight-row{transition:none!important}
@keyframes liquid-drift{from{transform:translate3d(-2%,1%,0) rotate(-2deg)}to{transform:translate3d(3%,-2%,0) rotate(2deg)}}
@keyframes liquid-sheen{0%,18%{transform:translateX(-42%)}62%,100%{transform:translateX(42%)}}
@media(prefers-reduced-motion:reduce){.selector-glass::before,.selector-glass::after,header::after,.glass::after,.deal-card::after,.game-card::after,.native-feedback::after{animation:none!important}}
body.motion-off .selector-glass::before,body.motion-off .selector-glass::after,body.motion-off header::after,body.motion-off .glass::after,body.motion-off .deal-card::after,body.motion-off .game-card::after,body.motion-off .native-feedback::after{animation:none!important}

/* Motion brief: preserve the visual design, reduce it to quiet feedback. */
@media (prefers-reduced-motion:no-preference){
  header::after,.glass::after,.deal-card::after,.game-card::after,.native-feedback::after,.price-panel::before{display:none!important}
  .art-credit,.merchant,.step-icon,.search-button{animation:none!important}
  .glass,header,.deal-card,.game-card,.insight-row{transition:transform 420ms var(--glass-ease),background-color 420ms var(--glass-ease),border-color 420ms var(--glass-ease),box-shadow 420ms var(--glass-ease)}
  .primary,.outline,.text-button{transition:transform 240ms var(--glass-ease),box-shadow 300ms var(--glass-ease),background-color 300ms var(--glass-ease),border-color 300ms var(--glass-ease)}
  @media(hover:hover) and (pointer:fine){
    .deal-card:hover{transform:translate3d(0,-3px,0);box-shadow:0 22px 55px #03071332}
    .game-card:hover{transform:translate3d(0,-3px,0)}
    .primary:hover,.outline:hover{transform:translate3d(0,-2px,0);box-shadow:0 12px 30px #11182f32}
  }
  .primary:active,.outline:active,.text-button:active,.deal-card:active,.game-card:active{transform:scale(.99)}
}
.liquid-selector>.selector-glass{display:none!important}
.liquid-selector .game-card.selected,.liquid-selector button[aria-pressed=true]{background:#d0d9f215;border-color:#d6def71e;box-shadow:none}
.liquid-selector .game-card.selected{background:#bbc7e810;border-color:#cbd9f12d}
.liquid-selector .selection-line{opacity:1}

/* Keep the hero's secondary action self-contained at every width. */
.hero-actions{flex-wrap:wrap}
.hero-actions .outline{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:0;width:auto;white-space:nowrap}
.hero-actions .outline .play{display:block;flex:0 0 24px;width:24px;height:24px;margin:0;border:0;font-size:0;line-height:1}
.hero-actions .outline .play svg{display:block;width:100%;height:100%;fill:none;stroke:none}
.hero-actions .outline .play circle{stroke:currentColor;stroke-width:1;opacity:.65}
.hero-actions .outline .play path{fill:currentColor}
@media(max-width:420px){.hero-actions .outline{min-width:0;padding-left:14px;padding-right:14px;gap:10px}.hero-actions .outline .play{flex-basis:22px;width:22px;height:22px}}

/* Official merchant artwork, preserved proportions inside the existing badges. */
.merchant{flex:0 0 30px;overflow:hidden;background:transparent}
.merchant img{display:block;width:100%;height:100%;object-fit:contain}
.merchant-kt{background:#fff;padding:4px}