/* Screen-size fixes for every page. Loaded last so it wins over page styles.
   Checked at 320, 360, 390, 414, 600, 768, 820, 1024, 1180, 1280, 1366, 1440, 1920 and 2560 px wide. */

/* Grid and flex children may shrink below their content width (stops long text or selects pushing the page wide). */
.co>*,.ogrid>*,.hstep>*,.fgrid>*,.opts>*,.calc>*,.sum>*,.bento>*,.how>*,.faq>*{min-width:0}
.sel select{width:100%;min-width:0;text-overflow:ellipsis}
.how,.lcsec{overflow-x:clip}

/* Header: the featured game chips go first, then the language pill, before the burger takes over at 1000px. */
@media(max-width:1300px){.top .feat{display:none}}
@media(max-width:1140px){.top{gap:18px}.top .tr .lang:not(.trk){display:none}}

/* Very wide screens: keep the header items from drifting to the far edges. */
@media(min-width:2000px){.top{padding-left:calc((100vw - 1880px)/2);padding-right:calc((100vw - 1880px)/2)}}

/* Phones */
@media(max-width:600px){
  .wrap{width:calc(100% - 32px)}
  .fgrid{gap:28px 18px}
  .fgrid .help,.fgrid>div:first-child{grid-column:1/-1}
  .help .row .btn{flex:1}
  .tot b#total{font-size:30px}
  .sum .tot b#total{font-size:30px}
}
@media(max-width:420px){
  .sum .tot{flex-wrap:wrap}
  .sum .tot .tl{width:100%}
  .sum .tot b#total{margin-left:auto}
  .pr>*{min-width:0}
  .pr .pt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pr b{font-size:14px}
}
@media(max-width:380px){
  .opts{grid-template-columns:1fr}
  .opts .sel:first-child{grid-column:auto}
  .h2{font-size:28px}
  .hero h1{font-size:36px}
  .co h1{font-size:28px}
  .tot .tl{font-size:14px}
  .lc-stats b{font-size:17px}
}

/* Menus open right under their button (left edge set in site.js), and the button area fills the
   header height so moving the mouse down never crosses a gap that closes the menu. */
.top .nav{align-self:stretch}
.dd{display:flex;align-items:center}
.mega{left:var(--mx,50%);transform:translate(0,8px)}
.dd.open .mega{transform:translate(0,0)}

/* Site-wide ambience: soft brand-colour light and a faint dot texture, fixed behind every page */
body{background:transparent;position:relative}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:
  radial-gradient(ellipse 45% 40% at 8% 0%,rgba(47,123,255,.22),transparent 70%),
  radial-gradient(ellipse 35% 45% at 100% 40%,rgba(143,211,255,.11),transparent 70%),
  radial-gradient(ellipse 40% 35% at 20% 100%,rgba(255,210,63,.075),transparent 70%),
  radial-gradient(ellipse 30% 30% at 75% 95%,rgba(47,123,255,.13),transparent 70%)}
body::after{background:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.6px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 85%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 85%);opacity:.9}
@media(prefers-reduced-motion:no-preference){body::before{animation:amb 26s ease-in-out infinite alternate}}
@keyframes amb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,2%,0) scale(1.06)}}
@media print{body::before,body::after{display:none}}

/* Form controls, site-wide: dropdowns with a yellow chevron, square yellow checkboxes, round radios.
   Same look on every page (pattern: GameBoost / Eloking checkout and calculator controls). */
select:not([multiple]){-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd23f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:16px!important;padding-right:42px!important;cursor:pointer;min-height:46px;border-radius:12px;color:#fff;font-family:Outfit,system-ui,sans-serif;font-weight:600}
select:not([multiple]):hover{border-color:rgba(255,210,63,.45)!important}
select:not([multiple]):focus{outline:0;border-color:var(--sun)!important;box-shadow:0 0 0 3px rgba(255,210,63,.16)}
select option,select optgroup{background:#0e1424;color:#fff;font-weight:600}
select:disabled{opacity:.5;cursor:not-allowed}
input[type=checkbox]:not(.adds input){-webkit-appearance:none;appearance:none;flex:none;width:22px!important;height:22px!important;margin:0;border-radius:7px;border:2px solid rgba(255,255,255,.3);background:#0e1424 center/15px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s,transform .1s;vertical-align:middle}
input[type=checkbox]:not(.adds input):hover{border-color:rgba(255,210,63,.7)}
input[type=checkbox]:not(.adds input):checked{background-color:var(--sun);border-color:var(--sun);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1300' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
input[type=checkbox]:not(.adds input):active{transform:scale(.92)}
input[type=checkbox]:not(.adds input):focus-visible{outline:2px solid var(--sun);outline-offset:2px}
input[type=checkbox]:not(.adds input):disabled{opacity:.45;cursor:not-allowed}
input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:#0e1424;cursor:pointer;transition:border-color .15s,box-shadow .15s}
input[type=radio]:checked{border-color:var(--sun);box-shadow:inset 0 0 0 5px #0e1424;background:var(--sun)}
input[type=radio]:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.check{display:flex!important;align-items:flex-start;gap:12px;padding-left:0!important;font-size:15px;line-height:1.45;color:#d5dcef;cursor:pointer}
.check input{position:static!important;margin-top:0!important}
.check a{color:var(--sky)}
.check[hidden],[hidden]{display:none!important}

/* Our dropdown list (app.js), replacing the browser's white option list on every select */
.ddl{position:fixed;z-index:10000;max-height:320px;overflow:auto;padding:6px;border-radius:14px;background:#0e1424;border:1px solid rgba(255,210,63,.35);box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 0 4px rgba(255,210,63,.06);font:600 15.5px Outfit,system-ui,sans-serif;color:#e6ecfb;animation:ddlin .14s ease-out;scrollbar-width:thin;scrollbar-color:#2a3350 transparent}
.ddl.up{animation-name:ddlup}
@keyframes ddlin{from{opacity:0;transform:translateY(-6px)}}
@keyframes ddlup{from{opacity:0;transform:translateY(6px)}}
.ddl-o{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.ddl-o.hi{background:rgba(255,210,63,.12);color:#fff}
.ddl-o.on{color:var(--sun)}
.ddl-o.on::after{content:"";width:16px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd23f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ddl-o[data-dis]{opacity:.4;cursor:default}
.ddl-g{padding:10px 14px 4px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8d98b8}
select[aria-expanded=true]{border-color:var(--sun)!important;box-shadow:0 0 0 3px rgba(255,210,63,.16)}
/* Number boxes without the browser's up/down arrows, everywhere */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Language and currency panel: the dropdowns sized inside the panel (their padding used to push them past its edge). */
.pref-pop{width:280px;box-sizing:border-box;grid-template-columns:minmax(0,1fr);white-space:normal}
.pref-pop label,.mn-pref label{min-width:0;font-size:13px}
.pref-pop label select,.mn-pref label select{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.pref-pop p,.mn-pref p{font-size:13px}
.mn-pref{grid-template-columns:minmax(0,1fr);white-space:normal}

/* Deep test fix (design, 30 Oct): price-table rank names wrap to two lines on phones instead of being clipped mid-word
   ("Distinguished M", "Legendary Eagl"). Replaces the one-line rule above for .pr .pt. */
@media(max-width:600px){.pr .pt{white-space:normal;overflow:visible;line-height:1.2;overflow-wrap:break-word}}

/* Cloudflare Turnstile box, only when Cloudflare asks for a click (server/antibot.js) */
.ts-box{margin:10px 0;min-height:0}
.ts-box:empty{display:none}