@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/roboto-400.woff2') format('woff2') }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/roboto-500.woff2') format('woff2') }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/roboto-600.woff2') format('woff2') }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/roboto-700.woff2') format('woff2') }
:root {
  --color-bg: #ffffff; --color-text: #00050a; --color-body: #484d53; --color-muted: #49525a;
  --color-accent: #3499fe; --color-accent-hover: #2a84fe; --color-on-accent: #ffffff; --color-accent-ink: #145a9d;
  --color-surface: #f3f6f9; --color-selected: #dbe3eb; --color-border: #c9d6e3; --color-footer: rgba(243,246,249,.5);
  --font-display: 'Roboto', sans-serif; --font-body: 'Roboto', sans-serif;
  --fs-body: 16px; --fs-small: .875rem; --fs-section-title: 1.5625rem; --fs-subtitle: 1.25rem; --fs-hero: 2.441rem;
  --header-h: 64px; --sidebar-w: 212px; --section-gap: 40px; --section-gap-mob: 32px;
  --hero-padding-v: 24px; --footer-padding-v: 40px; --radius: 16px; --radius-small: 10px;
  --ease-enter: cubic-bezier(.16,1,.3,1); --ease-exit: cubic-bezier(.7,0,.84,0); --ease-toggle: cubic-bezier(.65,0,.35,1);
  --t-fast: .2s; --t-slow: .32s;
}
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px) }
body { margin: 0; background: var(--color-bg); color: var(--color-body); font: 400 var(--fs-body)/1.6 var(--font-body) }
button { background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer }
a { color: var(--color-accent-ink) }
img { max-width: 100%; height: auto }
.container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 16px }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 120; padding: 10px 16px; background: white; color: var(--color-accent-ink); transform: translateY(-160%) }
.skip-link:focus { transform: translateY(0) }
:focus-visible { outline: 0; box-shadow: 0 0 0 3px white, 0 0 0 6px var(--color-accent-ink) }
@media (min-width: 768px) { .container { padding-inline: 24px } }
@media (min-width: 1180px) { :root { --header-h: 72px } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
.mast { position:sticky; top:0; z-index:60; background:var(--color-bg); border-bottom:1px solid var(--color-border) }
.mast__inner { max-width:1440px; margin:auto; height:var(--header-h); padding-inline:16px; display:flex; align-items:center; gap:16px }
.mast__brand { display:flex; flex-shrink:0; width:93px }
.mast__brand img,.foot__brand img { width:100%; height:36px; object-fit:contain }
.mast__actions { margin-left:auto; display:flex; align-items:center; gap:12px }
.mast__cta { white-space:nowrap; font-size:14px }
.mast__burger { width:44px; height:44px; display:flex; flex-direction:column; justify-content:space-between; padding:14px 9px }
.mast__burger span { height:2px; width:26px; background:var(--color-text) }
.mast__burger span:last-child { width:18px; align-self:flex-end }
.action { display:inline-flex; justify-content:center; align-items:center; gap:14px; min-height:44px; padding:11px 18px; border-radius:8px; color:var(--color-on-accent); background:var(--color-accent); text-decoration:none; font-weight:600; position:relative; overflow:hidden; isolation:isolate; transition:background .2s var(--ease-toggle) }
.action::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.3) 50%,transparent 80%); transform:translateX(-110%); transition:transform .3s var(--ease-enter); z-index:-1 }
.action:hover,.action:focus-visible,.action:active { color:var(--color-on-accent); background:var(--color-accent-hover) }
.action:hover::before,.action:focus-visible::before { transform:translateX(110%) }
.icon { display:block; width:20px; height:20px; flex-shrink:0 }
.action__arrow { display:inline-flex; transition:transform .2s var(--ease-enter) }
.mast__burger .icon { width:26px; height:20px }
.menu__toggle .icon,.drawer__close .icon { margin:auto }
.action:hover .action__arrow,.action:focus-visible .action__arrow { transform:translateX(4px) }
.menu { font-size:14px; color:var(--color-text) }
.menu a { text-decoration:none; color:inherit; min-height:44px; display:flex; align-items:center; padding:10px 8px; border-radius:6px; transition:background .2s var(--ease-toggle),color .2s var(--ease-toggle) }
.menu a:hover,.menu a:focus-visible,.menu a.is-active { background:var(--color-surface); color:var(--color-accent-ink) }
.menu__parent { display:flex; align-items:center }
.menu__toggle { flex-shrink:0; min-width:30px; height:44px }
.menu__group { position:relative }
.menu__children { visibility:hidden; opacity:0; pointer-events:none; transition:opacity .2s var(--ease-enter),visibility 0s linear .2s; background:var(--color-bg); color:var(--color-text) }
.menu__group.is-open>.menu__children { visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s }
.menu--desktop { position:absolute; visibility:hidden; pointer-events:none }
.drawer-shade { position:fixed; inset:0; background:rgba(0,5,10,.4); z-index:80; opacity:0; visibility:hidden; transition:opacity .25s var(--ease-exit),visibility 0s linear .25s }
.drawer { position:fixed; inset:0 auto 0 0; width:min(350px,90%); z-index:90; background:var(--color-bg); color:var(--color-text); padding:20px; overflow-y:auto; transform:translateX(-102%); visibility:hidden; transition:transform .32s var(--ease-exit),visibility 0s linear .32s }
.drawer.is-open { transform:translateX(0); visibility:visible; transition:transform .32s var(--ease-enter),visibility 0s linear 0s }
.drawer-shade.is-open { visibility:visible; opacity:1; transition-delay:0s }
.drawer__top { display:flex; align-items:center; justify-content:space-between; font-weight:700; padding-bottom:12px; border-bottom:1px solid var(--color-border) }
.drawer__close { width:44px; height:44px; font-size:28px }
.menu--drawer { padding-block:12px 20px }
.menu--drawer .menu__parent>a { flex:1 }
.menu--drawer .menu__children { max-height:0; overflow:hidden; padding-left:16px }
.menu--drawer .menu__group.is-open>.menu__children { max-height:220px }
.page-shell { padding-block:24px var(--section-gap); display:block }
.page-main { min-width:0; container-type:inline-size }
.page-main>*+* { margin-top:var(--section-gap-mob) }
.contents { position:absolute; visibility:hidden; pointer-events:none; width:var(--sidebar-w) }
.contents__label { font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--color-text); margin-bottom:10px }
.contents__links { display:flex; flex-direction:column; gap:3px }
.contents__links a { display:block; padding:7px 10px; border-left:2px solid var(--color-border); text-decoration:none; color:var(--color-muted); font-size:13px; line-height:1.45 }
.contents__links a:hover,.contents__links a.is-current { border-color:var(--color-accent); background:var(--color-surface); color:var(--color-accent-ink) }
.contents__related { border-top:1px solid var(--color-border); margin-top:20px; padding-top:16px }
.contents__related>a { display:block; padding-block:7px; font-size:13px; text-decoration:none }
.crumb { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--color-muted) }
.stage { display:flex; flex-direction:column; border-radius:var(--radius); background:var(--color-surface); padding:0 0 8px; position:relative }
.stage__track { position:relative; overflow:hidden; touch-action:pan-y }
.stage__slide { width:100%; min-width:0; display:flex; flex-direction:column; position:absolute; top:0; left:0; padding:0 0 4px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s var(--ease-toggle),visibility 0s linear .28s }
.stage__slide.is-active { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s }
.stage__media { border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; background:var(--color-surface) }
.stage__media img { display:block; width:100%; height:auto }
.stage__deck { position:relative; z-index:2; margin:-8px 12px 0; border-radius:12px; background:var(--color-bg); padding:18px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; border:1px solid var(--color-border) }
.stage__deck>div { flex:1 1 230px; min-width:0 }
.stage__title { font-size:clamp(1.4rem,3vw,2rem); line-height:1.2; font-weight:700; color:var(--color-text); hyphens:auto }
.stage__deck p { margin:10px 0 0; font-size:14px; line-height:1.5 }
.stage__controls { position:absolute; top:8px; right:8px; z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:2px; padding:0; border-radius:10px; background:rgba(255,255,255,.92); box-shadow:0 2px 10px rgba(0,20,40,.12) }
.stage__dot { width:44px; height:44px; padding:17px; border-radius:50%; flex-shrink:0; background-color:var(--color-border); background-clip:content-box }
.stage__dot.is-active { background-color:var(--color-accent) }
.stage__arrow { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; background:var(--color-bg); color:var(--color-accent-ink) }
.fan { position:relative; width:100%; height:218px; isolation:isolate; flex-shrink:0 }
.fan img { position:absolute; object-fit:contain; border-radius:10px; filter:drop-shadow(0 8px 10px rgba(0,5,10,.16)); animation:drift 5s var(--ease-toggle) infinite alternate }
.fan__main { width:110px; height:auto; left:calc(50% - 55px); top:20px; z-index:3; --tilt:2deg }
.fan__side { width:72px; height:auto; top:55px; z-index:1 }
.fan__side--left { left:calc(50% - 106px); --tilt:-15deg; animation-delay:-2s }
.fan__side--right { left:calc(50% + 34px); --tilt:15deg; animation-delay:-3s }
.fan--landscape .fan__main { width:min(190px,68%); left:50%; margin-left:max(-95px,-34%); top:40px }
.fan--landscape .fan__side { width:min(135px,43%); top:60px }
.fan--landscape .fan__side--left { left:max(6%,calc(50% - 139px)) }
.fan--landscape .fan__side--right { right:max(6%,calc(50% - 139px)); left:auto }
@keyframes drift { from { transform:translateY(0) rotate(var(--tilt)) } to { transform:translateY(-5px) rotate(calc(var(--tilt) + 2deg)) } }
.reading-band { margin-block-start:var(--section-gap-mob) }
.text-wrapper { color:var(--color-body); font-size:16px; line-height:1.65 }
.text-wrapper h1 { margin:0 0 24px; font-size:clamp(1.75rem,3vw,2.45rem); line-height:1.2; color:var(--color-text); font-weight:700; hyphens:auto }
.text-wrapper h2 { font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.3; color:var(--color-text); font-weight:700; margin:0 0 20px; scroll-margin-top:calc(var(--header-h) + 20px); hyphens:auto }
.text-wrapper h3 { font-size:1.3rem; line-height:1.4; color:var(--color-text); margin:28px 0 14px; font-weight:600 }
.text-wrapper h4 { font-size:1.05rem; line-height:1.6; color:var(--color-text); font-weight:600; margin:18px 0 10px }
.text-wrapper p { margin:0 0 18px }
.text-wrapper ul,.text-wrapper ol { padding-left:24px; margin:16px 0 24px }
.text-wrapper li { padding-left:3px; margin-bottom:10px }
.text-wrapper strong { font-weight:700 }
.text-wrapper blockquote { margin:24px 0; padding:16px 20px; border-left:3px solid var(--color-accent); background:var(--color-surface) }
.text-wrapper img { max-width:100%; height:auto }
.text-wrapper a { color:var(--color-accent-ink); text-underline-offset:3px }
.text-wrapper__table-wrap { overflow-x:auto; margin-block:24px; border:1px solid var(--color-border); border-radius:10px }
.text-wrapper table { width:100%; min-width:520px; border-collapse:collapse; font-size:14px; line-height:1.5 }
.text-wrapper th,.text-wrapper td { padding:14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--color-border) }
.text-wrapper th { background:var(--color-surface); color:var(--color-text) }
.text-wrapper tr:last-child td { border-bottom:0 }
.reading-pair__screen { margin:24px 0 0; align-self:start; border:1px solid var(--color-border); border-radius:12px; overflow:hidden }
.reading-pair__screen img { width:100%; height:auto; display:block }
.shelf__heading { color:var(--color-text); font-size:1.25rem; font-weight:600; margin-bottom:16px }
.shelf__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.game-card { display:block; min-width:0; text-decoration:none; color:var(--color-text); border-radius:10px; background:var(--color-surface) }
.game-card__media { position:relative; border-radius:10px; overflow:hidden; min-height:100px }
.game-card__media img { display:block; width:100%; height:auto }
.game-card__wash { position:absolute; inset:0; opacity:0; background:linear-gradient(90deg,rgba(52,153,254,.65),transparent 22%,transparent 78%,rgba(52,153,254,.65)); transition:opacity .25s var(--ease-toggle) }
.game-card:hover .game-card__wash,.game-card:focus-visible .game-card__wash { opacity:1 }
.game-card__caption { position:relative; padding:15px 10px 12px; font-size:13px; line-height:1.4; font-weight:500 }
.game-card__play { position:absolute; right:8px; top:-23px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--color-accent); color:var(--color-on-accent); border:2px solid var(--color-bg); border-radius:7px }
.shelf__rail { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:8px; padding:8px; scrollbar-width:none }
.shelf__rail .game-card { flex:0 0 43%; scroll-snap-align:start }
.promo { padding:18px; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-surface); display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:center }
.promo__media { min-width:0 }
.promo__media img { width:100%; height:auto; display:block; border-radius:10px }
.promo__copy { min-width:0 }
.promo__title { font-size:1.5rem; font-weight:700; color:var(--color-text); line-height:1.3 }
.promo__copy p,.offers__copy p { margin:12px 0 18px; line-height:1.5; font-size:15px }
.offers { padding:18px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius) }
.offers__tabs { display:flex; gap:6px; border-bottom:1px solid var(--color-border); padding-bottom:12px; flex-wrap:wrap }
.offers__tab { min-height:44px; padding:10px 14px; border-radius:8px; font-size:14px; color:var(--color-text) }
.offers__tab[aria-pressed="true"] { background:var(--color-selected); color:var(--color-accent-ink) }
.offers__body { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-top:18px; align-items:center }
.offers__media img { display:block; border-radius:10px; width:100%; height:auto }
.faq-item { border-bottom:1px solid var(--color-border) }
.text-wrapper .faq-item__q { position:relative; margin:0; padding:20px 34px 20px 0; color:var(--color-text); font-size:17px; line-height:1.5; font-weight:600; cursor:pointer }
.faq-item__q>.icon { position:absolute; right:4px; top:22px; color:var(--color-accent-ink) }
.faq-item.is-open .icon__vertical { opacity:0 }
.faq-item__collapse { display:grid; grid-template-rows:0fr; visibility:hidden; transition:visibility 0s linear .25s }
.faq-item__answer { min-height:0; overflow:hidden; color:var(--color-body); background:var(--color-bg); font-size:16px; font-weight:400 }
.faq-item.is-open .faq-item__collapse { grid-template-rows:1fr; visibility:visible; transition-delay:0s }
.text-wrapper .faq-item__answer p { font-size:16px; font-weight:400; line-height:1.65 }
.help-note { display:flex; gap:24px; flex-wrap:wrap; padding:24px; background:var(--color-surface); border-radius:12px }
.foot { padding:var(--footer-padding-v) 0 96px; background:var(--color-footer); border-top:1px solid var(--color-border) }
.foot__top { display:flex; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:28px }
.foot__brand { width:100px }
.foot__age { width:48px; height:48px; flex-shrink:0; border:2px solid var(--color-muted); border-radius:50%; display:flex; justify-content:center; align-items:center; font-weight:700 }
.foot__nav { display:grid; grid-template-columns:minmax(0,1fr); gap:24px }
.foot__label { font-weight:700; color:var(--color-text); margin-bottom:12px }
.foot__column>a { display:block; padding-block:7px; color:var(--color-muted); text-decoration:none; font-size:14px }
.foot__column>a:hover { color:var(--color-accent-ink); text-decoration:underline }
.foot__logos { margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:24px; padding:24px 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border) }
.foot__logos>a { display:flex; width:135px; height:64px; align-items:center; justify-content:center }
.foot__logos img { width:auto; max-width:135px; height:auto; max-height:60px; object-fit:contain }
.foot__logos>a[href="https://www.anonymoitzogadoroi.gr/"] { background:#26384b; border-radius:8px; padding:8px }
.foot__logos>a[href="https://www.anonymoitzogadoroi.gr/"] img { max-width:100%; max-height:100% }
.foot__copyright { margin-top:24px; font-size:13px }
.floating-action { position:fixed; z-index:50; right:16px; bottom:16px; box-shadow:0 6px 22px rgba(0,5,10,.18) }
.error-page { padding-block:70px; min-height:50vh }
.error-page__code { font-size:72px; color:var(--color-accent-ink); font-weight:700 }
@media (min-width:600px) { .foot__nav { grid-template-columns:repeat(3,minmax(0,1fr)) } .mast__inner { padding-inline:24px } .stage__deck { margin:-20px 24px 0; padding:24px } }
@container (min-width:680px) {
 .shelf__grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
 .shelf__grid--four { grid-template-columns:repeat(4,minmax(0,1fr)) }
 .shelf__rail .game-card { flex-basis:23% }
 .promo { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:20px; gap:24px }
 .offers__body { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
 .stage__slide--category-fan,.stage__slide--same-game-fan { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; padding:20px; min-height:340px }
 .stage__slide--category-fan .stage__deck,.stage__slide--same-game-fan .stage__deck { margin:0; border:0; background:transparent; padding:16px; order:-1 }
 .stage__slide--category-fan .fan,.stage__slide--same-game-fan .fan { height:285px }
 .stage .fan__main { width:155px; left:calc(50% - 77px); top:25px }
 .stage .fan__side { width:106px; top:65px }
 .stage .fan__side--left { left:calc(50% - 159px) }
 .stage .fan__side--right { left:calc(50% + 53px) }
 .stage .fan--landscape .fan__main { width:215px; left:calc(50% - 107px); margin-left:0; top:55px }
 .stage .fan--landscape .fan__side { width:140px; top:82px }
 .stage .fan--landscape .fan__side--left { left:calc(50% - 170px) }
 .stage .fan--landscape .fan__side--right { left:calc(50% + 30px); right:auto }
}
@container (min-width:900px) { .reading-pair { display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,.56fr); gap:24px; align-items:start } .reading-pair__screen { margin:0; position:sticky; top:calc(var(--header-h) + 24px) } }
@container (min-width:1020px) { .shelf__grid:not(.shelf__grid--four) { grid-template-columns:repeat(6,minmax(0,1fr)) } }
@media (min-width:1180px) {
 .mast__inner { gap:18px }
 .mast__brand { width:100px }
 .mast__burger { display:none }
 .menu--desktop { position:static; visibility:visible; pointer-events:auto; display:flex; align-items:center; gap:2px; font-size:12px }
 .menu--desktop .menu__children { position:absolute; left:0; top:100%; min-width:220px; padding:8px; border:1px solid var(--color-border); border-radius:0 0 10px 10px; box-shadow:0 10px 25px rgba(0,5,10,.1) }
 .menu--desktop .menu__group:not(.is-dismissed):hover>.menu__children,.menu--desktop .menu__group:not(.is-dismissed):focus-within>.menu__children { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s }
 .page-shell { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); gap:24px; align-items:start }
 .contents { position:sticky; top:calc(var(--header-h) + 16px); align-self:start; width:auto; max-height:calc(100dvh - var(--header-h) - 32px); overflow-y:auto; scrollbar-width:thin; visibility:visible; pointer-events:auto; padding:4px 12px 8px 0 }
 .page-main>*+* { margin-top:var(--section-gap) }
 .drawer,.drawer-shade { display:none }
}
@media (prefers-reduced-motion:reduce) { .fan img { animation:none; transform:rotate(var(--tilt)) } .stage__slide,.action::before,.action__arrow,.drawer,.drawer-shade,.menu__children { transition:none } }
.contents__progress { display:block; width:100%; height:3px; border:0; margin:12px 0 16px; accent-color:var(--color-accent) }
.contents__group-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; text-align:left; font-weight:600; font-size:13px }
.contents__group-toggle>.icon { color:var(--color-accent-ink) }
.contents__group-toggle[aria-expanded="true"] .icon__vertical { opacity:0 }
.contents__group { visibility:hidden; max-height:0; overflow:hidden; transition:visibility 0s linear .2s }
.contents__group.is-open { visibility:visible; max-height:800px; transition-delay:0s }
.reading-band>.promo { margin-block:var(--section-gap) }