/* Shared visual language for the catalogue and information pages. */
:root {
  color-scheme: dark;
  font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
  color: #eff5f4;
  background: #0c1822;
  --muted: #b6c6ca;
  --accent: #8ce4d2;
  --line: #344950;
}
body {
  min-width: 320px;
  background: radial-gradient(ellipse 75% 520px at 50% -150px, #20484b, transparent 78%), #0c1822;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline-color: #8ce4d2; }
.header { max-width: 1240px; min-height: 82px; padding: 18px 28px; border-bottom-color: #38545b; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px 22px; }
.header .main-menu { margin-left:0; }
.header .account-entry { grid-column:1/-1; width:100%; margin:2px 0 0; padding:16px 20px; display:grid; grid-template-columns:minmax(170px,.8fr) minmax(220px,1fr) minmax(280px,1.2fr); align-items:center; gap:12px 22px; }
.header .account-entry .eyebrow { margin-bottom:5px; }
.header .account-entry h2 { font-size:18px; }
.header .account-entry #account-message { margin:4px 0 0; font-size:13px; color:#cbdde0; }
.header .account-entry .account-providers .button { min-height:40px; padding:8px 12px; }
.header .account-entry .account-economy { margin:8px 0 0; color:#b9cacf; font-size:12px; }
.header .account-entry .account-providers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.header .account-entry .account-providers .button { text-align:center; white-space:nowrap; }
.header .account-details { grid-column:1/-1; }
.brand { gap: 12px; font-size: 22px; font-weight: 750; letter-spacing: -.035em; color: #f4faf8; }
.brand img { border-radius: 10px; }
.main-menu summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 17px;
  background: #193039; border: 1px solid #43616a; border-radius: 999px;
  color: #f0f8f6; font-weight: 650;
}
.main-menu summary::after { content: "⌄"; font-size: 18px; line-height: 1; }
.main-menu[open] summary::after { transform: rotate(180deg); }
.header .main-menu nav {
  min-width: 220px; padding: 9px; background: #1b3039; border-color: #49636a;
  border-radius: 15px; box-shadow: 0 20px 50px #030f18b8;
}
.header .main-menu nav a { padding: 11px 14px; border-radius: 9px; color: #e9f3f2; }
.header .main-menu nav a:hover { background: #2c4850; color: #fff; }
.language { padding: 4px; background: #10232d; border-color: #405860; border-radius: 999px; }
.language button { min-height: 36px; padding: 6px 13px; border-radius: 999px; }
.language button[aria-pressed=true] { background: #8ce4d2; color: #102a30; font-weight: 700; }
.games-section, .faq-section, .section-inner { max-width: 1240px; }
.games-section { padding-top: clamp(46px,7vw,94px); padding-bottom: 76px; }
.eyebrow {
  margin-bottom: 13px; color: #91e5d2; font-size: 11px; font-weight: 750;
  line-height: 1.35; letter-spacing: .16em; text-transform: uppercase;
}
.section-heading h1 { font-size: clamp(46px,7vw,82px); line-height: 1.03; letter-spacing: -.065em; font-weight: 750; }
.lead { max-width: 650px; margin-top: 19px; color: #cad8d9; font-size: clamp(18px,2vw,22px); line-height: 1.5; }
h2 { font-size: clamp(26px,3vw,38px); letter-spacing: -.035em; }
h3 { letter-spacing: -.025em; }
.featured-game {
  min-height: 360px; margin-top: 43px; border-color: #567078; border-radius: 18px;
  box-shadow: 0 24px 75px #030e18a6; isolation: isolate;
}
.featured-media { min-height: 360px; max-height: 500px; }
.featured-copy {
  gap: 8px; padding: clamp(28px,5vw,52px);
  background: linear-gradient(0deg,#06131aef,#06131aa6 46%,transparent);
}
.featured-copy strong { font-size: clamp(30px,4vw,48px); line-height: 1.05; letter-spacing: -.045em; }
.featured-copy span { color: #e2eeee; font-size: clamp(15px,1.6vw,18px); }
.account-entry {
  max-width: none; margin: 26px 0 0; padding: clamp(22px,3vw,34px);
  background: #162c35; border-color: #405a62; border-radius: 16px;
  box-shadow: inset 0 1px #ffffff10;
}
.account-entry h2 { font-size: clamp(23px,2.6vw,31px); }
.account-entry>p[role=status] { margin: 9px 0 20px; }
.account-providers { gap: 10px; }
.account-providers .button {
  min-height: 45px; background: #243e46; border-color: #55717a; color: #f2faf8; font-size: 14px;
}
.account-providers .button:hover { background: #32525a; }
.catalog-toolbar { gap: 16px; margin: 36px 0 22px; }
.catalog-toolbar label { gap: 9px; color: #d0dddf; font-size: 13px; font-weight: 650; }
.catalog-toolbar input, .catalog-toolbar select {
  height: 52px; padding: 10px 15px; color: #f4f9f7; background: #172b35;
  border-color: #506970; border-radius: 10px;
}
.catalog-toolbar input:focus, .catalog-toolbar select:focus { border-color: #8ce4d2; }
.games-grid { gap: 20px; }
.game-card {
  background: linear-gradient(165deg,#203b43,#142b37 68%); border-color: #47717a; border-radius: 16px;
  box-shadow: 0 10px 28px #06131b65, inset 0 1px #ffffff14;
}
.game-card:hover,.game-card:focus-within { border-color:#9ce5d1; box-shadow:0 16px 40px #06131b96,0 0 0 2px #81dbbd32; }
.game-card[data-game="plotlord"] { border-top:3px solid #9acfff; }
.game-card[data-game="island-climb"] { border-top:3px solid #ffd27f; }
.game-card[data-game="castle-front"] { border-top:3px solid #ee9d79; }
.game-card[data-game="sky-arcade"] { border-top:3px solid #76daf1; }
.game-card.temporarily-unavailable { border-color:#e6b83b; }
.game-card.temporarily-unavailable .game-cover img { filter:saturate(.75) brightness(.78); }
.game-release-status,.release-coming-soon {
  position:absolute;z-index:3;top:12px;right:12px;padding:6px 10px;
  border-radius:5px;background:#18372eee;color:#f3fff9;font-size:12px;
  font-weight:800;line-height:1.2;pointer-events:none;
}
.release-coming-soon { background:#ffe9a8;color:#302506; }
.game-release-status ~ .online-badge { top:47px; }
.beta-ribbon {
  position:absolute; z-index:2; top:20px; left:-42px; width:180px;
  transform:rotate(-29deg); padding:8px 20px; background:#65e59b;
  color:#083421; border:2px solid #b4f9cd; box-shadow:0 5px 17px #0007;
  text-align:center; font-size:15px; font-weight:900; letter-spacing:.14em;
  line-height:1.2; pointer-events:none;
}
.new-star {
  position:absolute; z-index:3; top:10px; left:132px; width:49px; height:49px;
  display:grid; place-items:center; background:linear-gradient(135deg,#fff4ad,#ffc642 70%);
  color:#493000; font-size:10px; font-weight:950; letter-spacing:.025em;
  clip-path:polygon(50% 0,62% 25%,88% 12%,77% 39%,100% 50%,77% 62%,88% 89%,61% 77%,50% 100%,38% 77%,12% 89%,24% 62%,0 50%,24% 39%,12% 12%,38% 25%);
  pointer-events:none;
}
.maintenance-ribbon {
  position:absolute; z-index:2; top:18px; left:-38px; width:260px;
  transform:rotate(-29deg); padding:10px 20px; background:#ffd54f;
  color:#302506; border:2px solid #fff0b2; box-shadow:0 5px 17px #0009;
  text-align:center; font-size:13px; font-weight:900; letter-spacing:.08em;
  line-height:1.2; pointer-events:none;
}
.temporarily-unavailable .game-tags>span:last-child { color:#ffdf73; }
.game-card[data-game="atlas-dominion"] { border-top:3px solid #96d3ac; }
.game-card[data-game="tower-defence"] { border-top:3px solid #c8e487; }
.game-card[data-game="pacific-43"] { border-top:3px solid #88bce9; }
.game-card[data-game="skakplot"] { border-top:3px solid #ecc499; }
.game-card[data-game="backgammon"] { border-top:3px solid #d4ae7f; }
.sharing-dialog{max-width:min(520px,calc(100vw - 30px));border:1px solid #7aa59f;border-radius:18px;padding:26px;background:#12252b;color:#ecf5ee;box-shadow:0 25px 75px #06131fbb;font:inherit}
.sharing-dialog::backdrop{background:#07131bc9}
.sharing-dialog h2{margin:8px 0 12px;font-size:1.55rem}.sharing-dialog p{line-height:1.5}.sharing-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.sharing-actions button{flex:1;min-width:170px;min-height:46px;border:1px solid #9cbbb6;border-radius:9px;padding:10px;background:#223e43;color:#f1f8f3;font:inherit;font-weight:800;cursor:pointer}.sharing-actions #leaderboard-sharing-yes{background:#9ce7cb;color:#102726;border-color:#9ce7cb}.sharing-dialog button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.game-card { display: flex; flex-direction: column; }
.game-card > .game-link { flex: 1; height: auto; }
.game-card > .game-play-action { margin: 0 22px 23px; min-height: 44px; }
.game-link { transition: background .2s ease, transform .2s ease; }
.game-link:hover { background: #203942; transform: translateY(-3px); }
.game-cover { background: #233e48; }
.game-cover .card-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#071920; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.game-cover .card-preview.preview-active { opacity:1; }
.game-card[data-game="pacific-43"] .card-preview { object-fit:contain; }
.game-info { padding: 21px 22px 23px; gap: 10px; }
.game-info h3 { font-size: 22px; }
.game-info p { color: #d5e2e2; line-height: 1.55; }
.game-info small { color: #b9cacf; }
.game-tags { color: #8ce4d2; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.game-tags>span:last-child { color: #f5ce9c; }
.coming-soon { background: #14242d; }
.coming-soon .game-info p, .coming-soon .game-info small { color: #aebdc1; }
.online-badge {
  background: #10252ee8; border: 1px solid #74918d; border-radius: 999px;
  color: #e5fcf6; backdrop-filter: blur(8px);
}
.button {
  min-height: 49px; padding: 11px 20px; background: #8ce4d2; border-color: #8ce4d2;
  border-radius: 10px; color: #102a30; font-weight: 750;
  transition: background .2s ease, transform .2s ease;
}
.button:hover { background: #b2f1e4; border-color: #b2f1e4; transform: translateY(-2px); }
.download-section { margin-top: 0; background: #e7f0ed; border-block: 0; color: #102831; }
.download-layout { gap: clamp(30px,6vw,90px); padding-block: clamp(52px,6vw,84px); }
.download-copy h2 { max-width: 540px; font-size: clamp(30px,3.8vw,48px); line-height: 1.12; }
.download-section .eyebrow { color: #1f665d; }
.download-section .muted { color: #47616a; }
.section-copy { max-width: 560px; font-size: 18px; line-height: 1.6; }
.download-panel {
  padding: clamp(22px,3vw,36px); background: #f8fbf9; border: 1px solid #bdd2cf;
  border-radius: 16px; box-shadow: 0 18px 45px #35595324;
}
.mobile-title { font-size: 20px; letter-spacing: -.025em; }
.android-download>img { border: 1px solid #c8d9d5; border-radius: 9px; }
.download-section .button { background: #174a4c; border-color: #174a4c; color: #fff; }
.download-section .button:hover { background: #236466; border-color: #236466; }
.checksum-link { color: #205a5d; font-weight: 650; }
.status-note { color: #f4d6aa; }
.faq-section { gap: clamp(32px,5vw,76px); padding-block: 30px 78px; }
.faq-section h2 { font-size: clamp(28px,3vw,38px); }
.faq-section details { padding: 21px 0; border-color: #3c555d; }
.faq-section details:first-child { padding-top: 0; }
.faq-section summary { color: #f0f7f5; font-size: 17px; }
.faq-section details[open] summary { color: #8ce4d2; }
.faq-section details p { color: #beccce; }
footer { max-width: 1176px; padding: 31px 0 39px; border-color: #3a5058; color: #adbdc1; }
footer .brand { font-size: 18px; }
.footer-links a:hover, .quiet-link:hover { color: #8ce4d2; }
.legal {
  max-width: 900px; margin-block: clamp(25px,5vw,60px) 80px; padding: clamp(26px,5vw,60px);
  background: #142630; border: 1px solid #38525b; border-radius: 18px;
  box-shadow: 0 20px 65px #06131b4f;
}
.legal h1 { font-size: clamp(34px,4.5vw,54px); line-height: 1.08; letter-spacing: -.05em; }
.legal h2 { margin: 34px 0 12px; padding-top: 10px; font-size: 23px; }
.legal p { margin-top: 13px; color: #c7d5d7; line-height: 1.76; }
.legal address {
  margin: 20px 0; padding: 17px 20px; background: #1e3740;
  border-left: 3px solid #8ce4d2; color: #d4e1e0; font-style: normal; line-height: 1.7;
}
.legal a:not(.brand) { color: #a4eddd; text-decoration-color: #79b9ac; }
.legal ol { color: #d0dcdd; }
.legal li+li { margin-top: 12px; }
.quiet-link { margin-left: auto; color: #c4d5d4; font-weight: 650; }
.header:has(.quiet-link) .language { margin-left: 0; }
@media (min-width:701px) and (max-width:950px) {
  .header .account-entry { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .header .account-actions { grid-column:1/-1; }
  .header .account-entry .account-providers { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .header { gap: 10px; padding: 14px 20px; grid-template-columns:minmax(0,1fr) auto auto; }
  .brand { font-size: 20px; }
  .main-menu { margin-left: auto; }
  .language { margin-left: 0; }
  .header:has(.quiet-link) .quiet-link { order: 3; width: 100%; margin-left: 0; }
  .games-section { padding-top: 46px; padding-bottom: 52px; }
  .featured-game, .featured-media { min-height: 250px; }
  .featured-game { margin-top: 31px; }
  .featured-copy { padding: 24px; }
  .header .account-entry { margin:0; padding:12px; grid-template-columns:1fr; gap:9px; }
  .header .account-entry .account-providers .button { flex:1 1 130px; }
  .games-grid { gap: 16px; }
  .download-layout { gap: 28px; }
  .faq-section { padding-bottom: 56px; }
  .legal { margin: 22px 20px 60px; padding: 27px 22px; }
}
@media (max-width: 440px) {
  .featured-game, .featured-media { min-height: 225px; }
  .section-heading h1 { font-size: 48px; }
  .game-info { padding: 20px; }
  .download-panel { padding: 22px; }
  .android-download { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .game-link, .button { transition: none; }
  .game-link:hover, .button:hover { transform: none; }
}

/* Account controls are a header popover, leaving the library in view. */
.header:has(.account-menu) { position:relative; grid-template-columns:minmax(0,1fr) auto auto auto; }
.header .account-menu { border:0; padding:0; margin:0; }
.header:has(.account-menu) .main-menu { border:0; padding:0; }
.account-menu>summary { width:44px; height:44px; padding:4px; display:flex; align-items:center; justify-content:center; border:1px solid #54777d; border-radius:50%; background:#17333d; cursor:pointer; list-style:none; }
.account-menu>summary::-webkit-details-marker { display:none; }
.account-menu>summary::after { content:none; }
.account-menu>summary:hover,.account-menu[open]>summary { background:#2a5057; border-color:#91e3d5; }
.account-menu>summary:focus-visible { outline:3px solid #9eeada; outline-offset:3px; }
.account-person { width:25px; height:25px; }
#account-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.header .account-menu .account-entry { position:absolute; z-index:35; right:20px; top:calc(100% - 4px); width:min(540px,calc(100vw - 32px)); max-height:calc(100dvh - 105px); overflow:auto; overscroll-behavior:contain; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:20px; margin:0; background:#142e38; border:1px solid #5b7e84; box-shadow:0 20px 60px #0008; border-radius:18px; }
.account-menu .account-details,.account-menu .account-finances,.account-menu .account-actions { min-width:0; }
.account-menu .account-actions { display:flex; flex-wrap:wrap; gap:8px; }
.account-menu .account-providers { width:100%; }
.header .account-menu .account-providers { grid-template-columns:repeat(2,minmax(0,1fr)); }
.header .account-menu .account-providers .button { white-space:normal; }
.games-section { padding-top:28px; }
.games-section .section-heading h1 { font-size:38px; }
.games-section .lead { margin-top:8px; }
.games-section .catalog-toolbar { margin-top:22px; }
@media(max-width:700px) {
 .header:has(.account-menu) { padding:12px 16px; gap:8px; }
 .header:has(.account-menu) .brand { font-size:18px; gap:7px; }
 .header:has(.account-menu) .brand img { width:28px; height:28px; }
 .header:has(.account-menu) .main-menu summary { padding:10px 12px; }
 .header:has(.account-menu) .language button { padding:8px; }
 .header .account-menu .account-entry { position:fixed; top:86px; right:16px; padding:16px; }
 .games-section { padding-top:22px; }
}
@media(max-width:360px) {
 .header:has(.account-menu) .brand span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}

/* Expandable search beside the account icon; no catalogue intro or toolbar. */
.header:has(.search-menu) { grid-template-columns:minmax(0,1fr) auto auto auto auto; }
.header .search-menu { margin:0; padding:0; border:0; }
.search-menu>summary { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:9px; border:1px solid #54777d; border-radius:50%; background:#17333d; cursor:pointer; list-style:none; }
.search-menu>summary::-webkit-details-marker { display:none; }
.search-menu>summary::after { content:none; }
.search-menu>summary svg { width:24px; height:24px; }
.search-menu>summary:hover,.search-menu[open]>summary { border-color:#91e3d5; background:#2a5057; }
.search-menu>summary:focus-visible { outline:3px solid #9eeada; outline-offset:3px; }
.search-menu.has-query>summary::before { content:''; position:absolute; right:3px; top:3px; width:8px; height:8px; border-radius:50%; background:#8ae4cf; }
#header-search { position:absolute; z-index:36; top:calc(100% + 4px); right:20px; width:min(420px,calc(100vw - 32px)); padding:16px; border:1px solid #5b7e84; border-radius:16px; background:#142e38; box-shadow:0 15px 40px #0007; }
#header-search label { display:block; margin-bottom:8px; font-size:13px; font-weight:650; }
#game-search { width:100%; min-height:46px; padding:10px 14px; border:1px solid #70969c; border-radius:10px; color:#f2faf9; background:#10252f; font:inherit; }
#game-search:focus { outline:2px solid #9eeada; outline-offset:2px; }
@media(max-width:700px) {
 .header:has(.search-menu) { gap:7px; }
 #header-search { position:fixed; top:86px; right:16px; }
}
@media(max-width:440px) {
 .header:has(.search-menu) .brand span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .header:has(.search-menu) { padding:12px; gap:6px; }
 .header:has(.search-menu) .main-menu summary { padding:8px 10px; font-size:13px; }
 .header:has(.search-menu) .language button { padding:6px; font-size:12px; }
 .header:has(.search-menu) .account-menu>summary,.header .search-menu>summary { width:40px; height:40px; }
}

/* Arcade light: per-game colours, with movement only on the active card. */
@property --neon-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
body { background:radial-gradient(ellipse at 8% 3%,#17465866,transparent 34%),radial-gradient(ellipse at 94% 32%,#46216d45,transparent 38%),radial-gradient(ellipse at 12% 78%,#175c5140,transparent 36%),#091620; }
.header { background:linear-gradient(110deg,#163a4466,#131f3666); border-bottom-color:#64d9d342; }
.game-card { --card-light:#55dbff; position:relative; isolation:isolate; background:linear-gradient(145deg,#203a46,#132632 75%); box-shadow:0 9px 30px #020d164d; transition:box-shadow .25s,border-color .25s,transform .25s; }
.game-card:nth-child(6n+2) { --card-light:#b4f784; }
.game-card:nth-child(6n+3) { --card-light:#bfa1ff; }
.game-card:nth-child(6n+4) { --card-light:#75e9ed; }
.game-card:nth-child(6n+5) { --card-light:#ffc77b; }
.game-card:nth-child(6n) { --card-light:#ff9cba; }
.game-card::after { content:''; position:absolute; inset:0; z-index:4; border-radius:inherit; padding:2px; pointer-events:none; background:conic-gradient(from var(--neon-angle),transparent 0deg,var(--card-light) 38deg,#fff 49deg,transparent 74deg,transparent 175deg,var(--card-light) 220deg,transparent 250deg); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; opacity:0; transition:opacity .25s; }
.game-card:not(.coming-soon):hover,.game-card:not(.coming-soon):focus-within { border-color:var(--card-light); box-shadow:0 16px 42px #010916a0,0 0 24px color-mix(in srgb,var(--card-light) 28%,transparent); transform:translateY(-3px); }
.game-card:not(.coming-soon):hover::after,.game-card:not(.coming-soon):focus-within::after { opacity:1; animation:neon-orbit 2.8s linear infinite; }
.game-card .game-link:hover { transform:none; background:linear-gradient(135deg,color-mix(in srgb,var(--card-light) 9%,transparent),transparent 65%); }
.game-card .game-tags { color:var(--card-light); }
.game-card h3 { text-shadow:0 0 22px color-mix(in srgb,var(--card-light) 18%,transparent); }
.game-card .game-cover { box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--card-light) 35%,transparent); }
.game-card.coming-soon { box-shadow:none; }
.search-menu[open]>summary,.account-menu[open]>summary { box-shadow:0 0 20px #6fe7d833; }
.download-section { background:radial-gradient(ellipse at 85% 0,#e0d4ff66,transparent 55%),linear-gradient(120deg,#e0f4ee,#e6edf8); }
@keyframes neon-orbit { to { --neon-angle:360deg; } }
@media(prefers-reduced-motion:reduce) {
 .game-card { transition:none; }
 .game-card:not(.coming-soon):hover,.game-card:not(.coming-soon):focus-within { transform:none; }
 .game-card:not(.coming-soon):hover::after,.game-card:not(.coming-soon):focus-within::after { animation:none; opacity:.65; }
}

.account-menu>summary{width:auto;min-width:44px;border-radius:24px;padding:4px 9px;gap:7px}.account-menu>summary .account-person,.account-menu>summary #account-avatar{width:30px;height:30px;flex:0 0 30px}.account-menu>summary #account-name{flex:0 1 auto;min-width:0;max-width:105px}
@media(max-width:440px){.account-menu>summary{padding:4px 6px;gap:4px}.account-menu>summary #account-name{max-width:45px}}

.header:has(.search-menu) .account-menu>summary{width:auto;min-width:44px;height:44px}.header .account-menu>summary [hidden]{display:none!important}
@media(max-width:440px){.header .account-menu>summary{height:40px}.header .account-menu>summary #account-name{max-width:40px;font-size:11px}}

@media(max-width:360px){.header:has(.search-menu){gap:4px}.header:has(.search-menu) .account-menu>summary #account-name{max-width:30px}}

/* Phone panels follow the actual header, including larger text and rotation. */
.main-menu>summary { background:linear-gradient(145deg,#ffe5a4,#edba67); border-color:#fff1c5; color:#32250e; box-shadow:0 3px 0 #9c6527,0 5px 14px #0004; }
.main-menu[open]>summary { background:#fff0b9; }
.account-menu>summary,.account-menu>summary:hover,.account-menu[open]>summary { background:linear-gradient(145deg,#b5f2d6,#75d7b7); border-color:#d5ffea; color:#123c32; box-shadow:0 3px 0 #287565,0 5px 14px #0004; }
.search-menu>summary,.search-menu>summary:hover,.search-menu[open]>summary { background:transparent; border:0; border-radius:0; color:#9ed8ff; box-shadow:none; }
.search-menu>summary svg { width:28px; height:28px; }
.header .language-menu { display:block; margin:0; padding:0; border:0; background:none; }
.language-menu>summary { display:grid; place-items:center; width:44px; height:44px; padding:8px; color:#dfc6ff; list-style:none; }
.language-menu>summary::-webkit-details-marker { display:none; }
.language-menu>summary::after { content:none; }
.language-menu>summary svg { width:27px; height:27px; }
#language-options { position:absolute; right:12px; top:calc(100% + 8px); z-index:36; width:180px; padding:8px; border:1px solid #b5a0d0; border-radius:14px; background:#30263f; box-shadow:0 12px 35px #0008; }
#language-options button { display:block; min-height:44px; width:100%; text-align:left; padding:8px 14px; }
.header .language button { color:#f2eaff; }
.header .language button[aria-pressed=true] { background:#e1caff; color:#302144; }
.header .main-menu nav,.header .account-menu .account-entry,#header-search {
 max-height:min(var(--header-panel-room,calc(100dvh - 120px)),calc(100dvh - var(--header-panel-top,108px) - 12px));
 overflow:auto; overscroll-behavior:contain;
}
.account-panel-tools { position:sticky; top:-20px; z-index:1; display:flex; justify-content:flex-end; margin:-20px -20px 0; padding:8px 16px; background:#142e38; border-bottom:1px solid #54777d; }
#account-panel-close { min-height:44px; padding:8px 16px; border:1px solid #6a9697; border-radius:12px; background:#234950; color:#efffff; font:inherit; font-weight:650; }
.account-deletion-link { display:inline-flex; align-items:center; min-height:44px; color:#eacbd0; text-decoration:underline; text-underline-offset:3px; font-size:13px; }
/* One compact row on phones, including short touch-screen landscape views. */
@media(max-width:700px), (max-width:950px) and (max-height:500px) and (pointer:coarse) {
 #games { scroll-margin-top:var(--phone-header-height,68px); }
 .header:has(.search-menu) { position:sticky; top:0; z-index:40; min-height:60px; background:#102832; padding:7px 8px; grid-template-columns:minmax(0,1fr) auto repeat(3,44px); grid-template-areas:'brand menu account search language'; gap:4px; }
 .header:has(.search-menu) .brand { grid-area:brand; min-width:0; min-height:44px; gap:4px; }
 .header:has(.search-menu) .brand img { width:24px; height:24px; flex:none; }
 .header:has(.search-menu) .brand span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; font-size:15px; white-space:nowrap; }
 .header:has(.search-menu) .main-menu { grid-area:menu; justify-self:start; margin:0; }
 .header:has(.search-menu) .main-menu summary { min-width:54px; min-height:44px; padding:6px 7px; gap:4px; font-size:13px; white-space:nowrap; }
 .header:has(.search-menu) .main-menu summary::after { font-size:13px; }
 .header:has(.search-menu) .account-menu { grid-area:account; }
 .header:has(.search-menu) .search-menu { grid-area:search; justify-self:end; }
 .header:has(.search-menu) .language { grid-area:language; justify-self:end; }
 .header:has(.search-menu) .account-menu>summary,.header:has(.search-menu) .search-menu>summary { width:44px; min-width:44px; height:44px; padding:6px; }
 .header:has(.search-menu) .account-menu>summary #account-name { display:none; }
 .header .main-menu nav,.header .account-menu .account-entry,#header-search { position:fixed; top:var(--header-panel-top,68px); left:8px; right:8px; width:auto; min-width:0; margin:0; }
 .header .main-menu nav { z-index:36; left:var(--header-menu-left,8px); right:auto; width:var(--header-menu-width,230px); max-width:calc(100vw - 16px); padding:6px; gap:0; font-size:15px; }
 .header .main-menu nav a { display:flex; align-items:center; min-height:44px; padding:8px 12px; }
 #language-options { position:fixed; top:var(--header-panel-top,68px); right:8px; max-height:var(--header-panel-room); overflow:auto; }
 .header .account-menu .account-entry { padding:16px; }
 .account-panel-tools { top:-16px; margin:-16px -16px 0; padding:6px 12px; }
}