/* Halonen Games — "sunny sky" theme (built on the Hyer Aviation style reference, in Halonen Games colours).
   Game-sky hero with one floating island, heavy tight headlines, blue pills, one sunny orange block per page. */
:root{
  --ink-deep:#0b2545;--white:#fff;--ash:#5e6e82;--pebble:#d9e3f0;--hull:#0a2f5c;--deck:#0e3d73;--night:#061b33;--clay:#f5891c;
  --brand-blue:#1e7bea;--brand-orange:#f5891c;--btn-blue:#1668d0;--btn-blue-hover:#0f57b3;--soft:#4a5d74;--mist:#eef5fc;
  --sky:radial-gradient(ellipse 15% 4% at 80% 17%,rgba(255,255,255,.9),transparent 72%),
    radial-gradient(ellipse 9% 5% at 76% 15%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(ellipse 12% 3.5% at 13% 58%,rgba(255,255,255,.75),transparent 72%),
    radial-gradient(ellipse 7% 4% at 16% 56%,rgba(255,255,255,.7),transparent 70%),
    linear-gradient(180deg,#a9d8ff 0%,#cdeaff 38%,#eaf6ff 68%,#fff4df 100%);
  --pad:clamp(16px,4vw,40px);
  /* names the legal pages and the cookie banner read */
  --ground:var(--white);--surface:var(--white);--cream:#f4f2ef;--cream-2:#f4f2ef;--line:var(--pebble);
  --ink:var(--ink-deep);--ink-2:var(--soft);--ink-3:var(--ash);
  --blue:var(--btn-blue);--blue-deep:var(--btn-blue-hover);--sky-1:#cdeaff;--sky-2:var(--mist);
  --orange:var(--brand-orange);--orange-deep:#c96a0a;--green:var(--ink-deep);--reddit:var(--ink-deep);
  --shadow:none;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink-deep);font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:18px;line-height:1.61;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px;border-radius:999px}
h1,h2,h3{font-family:inherit;font-weight:700;line-height:1;margin:0;text-wrap:balance;hyphens:manual;overflow-wrap:normal;word-break:normal}
p{margin:0}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)}

/* nav — transparent row over the sky */
header.wrap{position:relative;z-index:3}
.nav{display:flex;align-items:center;gap:12px 36px;min-height:80px;flex-wrap:wrap}
.nav .logo{font-weight:700;font-size:22px;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.w1{color:var(--brand-blue)}.w2{color:var(--brand-orange)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:30px;flex-wrap:wrap;font-size:18px}
.nav .menu{margin-inline-start:auto}
.nav .menu a{color:var(--ink-deep);text-decoration:none;opacity:.72}
.nav .menu a:hover,.nav .menu a[aria-current="page"]{opacity:1;text-decoration:underline}

/* pills */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 22px 16px;border-radius:1000px;border:1px solid transparent;max-width:100%;
  font:inherit;font-size:17px;font-weight:700;line-height:1.1;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn svg{width:15px;height:15px;flex:none}
.btn-blue{background:var(--btn-blue);color:var(--white)}
.btn-blue:hover{background:var(--btn-blue-hover)}
.btn-orange{background:var(--brand-orange);color:var(--ink-deep)}
.btn-orange:hover{background:#ff9d3d}
.btn-ghost{background:transparent;color:var(--ink-deep);border-color:var(--ink-deep)}
.btn-ghost:hover{background:var(--ink-deep);color:var(--white)}
[dir="rtl"] .btn svg{transform:scaleX(-1)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:400;color:var(--ash)}
.eyebrow i{display:block;width:8px;height:8px;border-radius:50%;background:var(--brand-orange)}

/* hero — sky, giant wordmark, one floating object */
.hero{position:relative;margin:-80px calc(50% - 50vw) 0;padding:calc(80px + clamp(28px,5vw,64px)) calc(50vw - 50%) clamp(48px,7vw,96px);
  background:var(--sky);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);
  grid-template-areas:"art ." "art h1" "art sub" "art btns" "art .";grid-template-rows:1fr auto auto auto 1fr;min-height:min(86vh,760px);text-align:start;overflow:hidden}
.hero .cloud,.hero .logo-big,.hero-art{display:none}
.hero .wordmark{grid-area:word;font-weight:700;font-size:clamp(64px,14.5vw,187px);line-height:.8;letter-spacing:-.02em;margin:0 0 clamp(28px,4vw,56px);
  margin-inline-start:-.05em}
.hero h1{grid-area:h1;font-size:clamp(40px,5vw,68px);letter-spacing:-.03em;line-height:.98}
.hero .sub{grid-area:sub;color:var(--soft);font-size:18px;max-width:30em;margin-top:24px}
.hero .btns{grid-area:btns;margin-top:32px}
.hero .float{grid-area:art;width:min(100%,500px);justify-self:center;align-self:center;
  filter:drop-shadow(0 30px 34px rgba(15,79,168,.18))}
@media (prefers-reduced-motion:no-preference){.hero .float{animation:hover 7s ease-in-out infinite}@keyframes hover{50%{transform:translateY(-12px)}}}
@media (max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"h1" "sub" "btns" "art";grid-template-rows:none;min-height:0}
  .hero .float{width:min(78%,340px);margin-top:40px}
}

/* sections */
.section{padding-block:clamp(64px,8vw,120px) 0}
.section-head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,52px)}
.section-head h2{font-size:clamp(38px,4.6vw,63px);letter-spacing:-.02em}

/* games — one sunny orange feature, one plain white card */
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:760px){.games{grid-template-columns:1fr}}
.game-card{display:grid;grid-template-rows:auto 1fr;background:var(--white);border-top:1px solid var(--pebble)}
.game-card .art{aspect-ratio:16/9;overflow:hidden;background:var(--mist)}
.game-card .art img{width:100%;height:100%;object-fit:cover}
.game-card .body{display:grid;gap:14px;padding:28px 0 0;align-content:start}
.game-card .kicker{font-size:15px;color:var(--ash);line-height:1.4}
.game-card h3{font-size:clamp(30px,3vw,37px);letter-spacing:-.01em}
.game-card h3 a{text-decoration:none}
.game-card p{color:var(--ash);font-size:18px}
.game-card .btns{margin-top:6px;gap:10px}
.game-card .more{font-weight:700;font-size:17px;justify-self:start}
[dir="rtl"] .game-card .more span{display:inline-block;transform:scaleX(-1)}
/* the featured orange card (first game) — navy ink on orange keeps the text readable */
.games .game-card:first-child{background:var(--clay);color:var(--ink-deep);border-top:0}
.games .game-card:first-child .body{padding:clamp(28px,4vw,53px) clamp(24px,4vw,59px) clamp(32px,4vw,53px)}
.games .game-card:first-child .kicker,.games .game-card:first-child p{color:rgba(11,37,69,.84)}
.games .game-card:first-child h3 a,.games .game-card:first-child .more{color:var(--ink-deep)}
.games .game-card:first-child .btn-blue{background:var(--ink-deep);color:var(--white)}
.games .game-card:first-child .btn-blue:hover{background:#163a63}
.games .game-card:first-child .btn-ghost{color:var(--ink-deep);border-color:var(--ink-deep)}
.games .game-card:first-child .btn-ghost:hover{background:var(--ink-deep);color:var(--clay)}

/* daily — dark band, content pulled right */
.daily{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(64px,8vw,120px);
  padding-block:clamp(64px,8vw,110px);background:var(--hull);box-shadow:0 0 0 100vmax var(--hull);clip-path:inset(0 -100vmax);color:var(--white)}
.daily > div:first-child{order:2}
.daily .phones{order:1}
@media (max-width:760px){.daily{grid-template-columns:1fr}.daily > div:first-child{order:1}.daily .phones{order:2}}
.daily .eyebrow{color:#9fc3ea}
.daily h2{font-size:clamp(38px,4.6vw,63px);letter-spacing:-.02em;margin-top:16px!important}
.daily p{color:rgba(255,255,255,.86);margin-top:20px;max-width:32em}
.daily ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px;color:#bcd3ec;font-size:17px}
.daily li{border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
.daily .btns{margin-top:32px}
.daily .btn-orange,.daily .btn-blue{background:var(--brand-orange);color:var(--ink-deep)}
.daily .btn-orange:hover,.daily .btn-blue:hover{background:#ff9d3d}
.daily .btn-ghost{color:var(--white);border-color:var(--white)}
.daily .btn-ghost:hover{background:var(--white);color:var(--ink-deep)}
.daily .phones{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end}
.daily .phones figure{margin:0;aspect-ratio:430/852;overflow:hidden;border-radius:45px;background:var(--deck)}
.daily .phones figure:first-child{transform:translateY(-28px)}
.daily .phones img{width:100%;height:100%;object-fit:cover}

/* game page */
.game-hero{position:relative;margin:-80px calc(50% - 50vw) 0;padding:calc(80px + clamp(40px,7vw,96px)) calc(50vw - 50%) clamp(40px,5vw,64px);
  background:var(--sky);display:grid;gap:22px;justify-items:start;text-align:start;grid-template-columns:minmax(0,1fr)}
.game-hero h1{font-size:clamp(52px,10vw,131px);letter-spacing:-.02em;line-height:.88;max-width:10em}
.game-hero h1 .greek{display:block;font-size:.26em;font-weight:400;color:var(--soft);margin-top:18px;letter-spacing:0;line-height:1.2}
.game-hero .lede{font-size:clamp(20px,2vw,23px);color:var(--soft);max-width:28em;line-height:1.4;letter-spacing:-.01em}
.game-hero .btns{margin-top:8px}
.banner{margin:0 calc(50% - 50vw);background:#fff4df}
.banner img{width:100%;height:auto;max-height:84vh;object-fit:cover}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;margin-top:clamp(64px,8vw,120px)}
@media (max-width:760px){.about{grid-template-columns:1fr}}
.about h2{font-size:clamp(38px,4.6vw,52px);letter-spacing:-.01em;margin-bottom:24px}
.about p{color:var(--ash);max-width:34em}
.about p + p{margin-top:16px}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:36px 40px}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
.facts li{display:grid;gap:14px;align-content:start;border-top:1px solid var(--pebble);padding-top:20px}
.facts .ico{width:24px;height:24px;display:block}
.facts .ico svg{width:24px;height:24px;stroke-width:1.6}
.facts b{display:block;font-weight:700;font-size:23px;letter-spacing:-.01em;line-height:1.15;margin-bottom:8px;color:var(--ink-deep)}
.facts span{font-size:18px;line-height:1.61;color:var(--ash)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(64px,8vw,120px)}
@media (max-width:620px){.shots{grid-template-columns:repeat(2,1fr)}.shots figure:nth-child(3){display:none}}
.shots figure{margin:0;border-radius:45px;overflow:hidden;background:var(--mist)}
/* the featured orange block on the game page: "new in the latest update" */
section.about[aria-labelledby="new-title"]{background:var(--clay);color:var(--ink-deep);border-radius:0;padding:clamp(32px,5vw,59px);align-items:center;gap:clamp(28px,4vw,59px)}
section.about[aria-labelledby="new-title"] h2{color:var(--ink-deep)}
section.about[aria-labelledby="new-title"] p,section.about[aria-labelledby="new-title"] .eyebrow{color:rgba(11,37,69,.84)}
section.about[aria-labelledby="new-title"] .eyebrow i{background:var(--ink-deep)}
section.about[aria-labelledby="new-title"] .pic img{border-radius:24px}
.pic{margin:0}
.legal{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(64px,8vw,96px);padding-top:22px;border-top:1px solid var(--pebble);font-size:17px}
.legal a{color:var(--ink-deep);text-decoration:none}
.legal a:hover{text-decoration:underline}
.section:has(> .daily){padding-block:0}

/* contact */
.contact .card{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;padding-block:clamp(16px,3vw,40px) clamp(64px,8vw,110px);border-top:1px solid var(--pebble);padding-top:clamp(28px,4vw,48px)}
@media (max-width:640px){.contact .card{grid-template-columns:1fr}}
.contact h2{font-size:clamp(44px,6vw,63px);letter-spacing:-.02em}
.contact p{color:var(--ash);margin-top:16px;max-width:32em}
.daily + .contact{padding-top:clamp(64px,8vw,110px)}

/* footer terminal */
footer.site{background:var(--night);box-shadow:0 0 0 100vmax var(--night);clip-path:inset(0 -100vmax);color:#8fa6c2;padding-block:clamp(56px,7vw,96px) 64px;font-size:17px}
footer.site .wordmark{display:block;margin:0;font-weight:700;font-size:clamp(52px,10vw,131px);letter-spacing:-.02em;line-height:.85;margin-bottom:clamp(40px,6vw,80px)}
footer.site .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;border-top:1px solid #16314f;padding-top:22px}
footer.site .links{display:flex;flex-wrap:wrap;gap:8px 26px}
footer.site a{color:#b5c7dc;text-decoration:none}
footer.site a:hover{color:var(--white)}
footer.site .note{margin-top:14px;font-size:15px}
main.wrap:has(.legal) + footer.site{margin-top:clamp(64px,8vw,96px)}

/* language menu */
.lang{position:relative;font-size:17px}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ink-deep);border-radius:1000px;color:var(--ink-deep);user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:17px;height:17px}
.lang summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-inline-start:3px}
.lang summary:hover,.lang[open] summary{background:var(--ink-deep);color:var(--white)}
.nav .lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:20;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px;
  width:max-content;max-width:min(380px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;padding:10px;margin:0;
  background:var(--white);border:1px solid var(--pebble);border-radius:24px;font-size:16px}
.nav .lang ul a{display:block;padding:8px 14px;border-radius:1000px;color:var(--ink-deep);white-space:nowrap;text-decoration:none}
.nav .lang ul a:hover{background:var(--mist)}
.nav .lang ul a[aria-current="true"]{background:var(--ink-deep);color:var(--white)}
@media (max-width:620px){
  .nav{gap:6px 16px;min-height:64px}
  .nav .menu{order:3;width:100%;margin-inline-start:0;gap:4px 20px;font-size:16px;padding-bottom:6px}
  .lang{margin-inline-start:auto}
  .hero,.game-hero{margin-top:-108px;padding-top:calc(108px + 36px)}
}

/* cookie notice */
body .hg-consent{left:auto;right:0;max-width:440px;padding:0 16px 16px}
body .hg-consent .box{grid-template-columns:1fr;gap:16px;border-radius:24px;padding:20px 22px;box-shadow:none;border:1px solid var(--pebble);background:var(--white)}
body .hg-consent p{font-size:15px;color:var(--soft)}
body .hg-consent button{border-radius:1000px;font-weight:700;font-size:15px;padding:11px 20px}
body .hg-consent .yes{background:var(--btn-blue);color:#fff}
body .hg-consent .no{border:1px solid var(--ink-deep);color:var(--ink-deep)}
[dir="rtl"] body .hg-consent{right:auto;left:0}

:lang(ar) body,:lang(fa) body,:lang(ur) body,:lang(he) body,:lang(hi) body,:lang(bn) body,:lang(th) body,
:lang(ja) body,:lang(ko) body,:lang(zh-Hans) body,:lang(zh-Hant) body{line-height:1.75}
:lang(ar) h1,:lang(fa) h1,:lang(ur) h1,:lang(hi) h1,:lang(bn) h1,:lang(th) h1,:lang(ja) h1,:lang(ko) h1,:lang(zh-Hans) h1,:lang(zh-Hant) h1,
:lang(ar) h2,:lang(fa) h2,:lang(ur) h2,:lang(hi) h2,:lang(bn) h2,:lang(th) h2,:lang(ja) h2,:lang(ko) h2,:lang(zh-Hans) h2,:lang(zh-Hant) h2{line-height:1.2;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
@media (max-width:520px){
  .game-hero h1{font-size:clamp(40px,11.5vw,52px)}
  .hero .wordmark{font-size:clamp(56px,19vw,96px)}
}
footer.site .w1{color:#5aa6ff}
/* Ela page: the odd last fact (Ela Plus) becomes that page's one orange block */
.facts li:last-child:nth-child(odd){grid-column:1/-1;background:var(--clay);border-top:0;padding:28px 30px;color:var(--ink-deep)}
.facts li:last-child:nth-child(odd) span{color:rgba(11,37,69,.84)}
.facts li:last-child:nth-child(odd) .ico svg{stroke:var(--ink-deep)}

/* own logo */
.nav .logo{display:inline-flex;align-items:center}
.nav .logo img{height:42px;width:auto}
.hero .wordmark{font-size:0;line-height:0;margin-inline-start:-.6%}
.hero .wordmark img{width:clamp(250px,50vw,660px);height:auto;filter:drop-shadow(0 18px 26px rgba(15,79,168,.22))}
footer.site .wordmark{font-size:0;line-height:0}
footer.site .wordmark img{width:clamp(220px,36vw,460px);height:auto}
@media (max-width:620px){.nav .logo img{height:34px}}

/* headings never hyphenate: sizes are tuned so the longest word in every language fits */
@media (max-width:1000px){.about{grid-template-columns:1fr}}
.facts b{font-size:clamp(19px,1.9vw,23px)}
@media (max-width:420px){
  .game-hero h1{font-size:clamp(30px,10vw,44px)}
  .hero h1{font-size:clamp(32px,10.4vw,44px)}
  .section-head h2,.daily h2,.about h2,.contact h2{font-size:clamp(28px,9vw,38px)}
  section.about[aria-labelledby="new-title"]{padding:28px 22px}
  .game-card h3{font-size:clamp(26px,8vw,30px)}
}