:root { --ink:#0d1424; --paper:#f3ead7; --gold:#f6c856; --mist:#bcd1d6; --line:rgba(255,255,255,.18); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--paper); font-family:Arial,Helvetica,sans-serif; background:#0b1626; }
body::before { content:""; position:fixed; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(4,13,28,.42) 0%,rgba(4,13,28,.12) 52%,rgba(4,13,28,.05) 100%),url("Assets/AnnitGamesHeroFantasy_MageLeft.png") center/cover; }
body::after { display:none; }
main { width:min(100% - 2rem,1100px); margin:0 auto; }
.masthead { display:flex; justify-content:space-between; align-items:center; padding:1.6rem 0; }
.wordmark { display:block; line-height:0; text-decoration:none; }.wordmark img { display:block; width:112px; height:auto; }
.language-switch { display:flex; overflow:hidden; border:1px solid rgba(255,235,181,.55); border-radius:999px; background:rgba(7,13,28,.48); }.language-switch button { border:0; padding:.45rem .6rem; color:#fff4d5; background:transparent; font:800 .72rem Arial,sans-serif; cursor:pointer; }.language-switch button[aria-pressed="true"] { color:#1b1a13; background:var(--gold); }
.intro { max-width:760px; padding:4.8rem 0 3.4rem; text-wrap:balance; }.eyebrow { margin:0 0 1.2rem; color:var(--gold); font-size:.78rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }h1 { max-width:590px; margin:0; font-family:Georgia,serif; font-size:clamp(2.7rem,5.5vw,4.8rem); line-height:.98; letter-spacing:-.045em; }.intro > p:last-child { max-width:610px; margin:1.45rem 0 0; color:#d9e3e4; font-size:clamp(1.05rem,1.7vw,1.25rem); line-height:1.65; }
.games { display:grid; gap:1.5rem; padding-bottom:5rem; }.game-card { position:relative; display:grid; grid-template-columns:1.08fr .92fr; min-height:340px; overflow:hidden; color:inherit; border:1px solid var(--line); border-radius:20px; text-decoration:none; background:rgba(11,18,34,.85); box-shadow:0 18px 45px rgba(0,0,0,.3); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }.game-card:hover { transform:translateY(-5px); border-color:rgba(255,222,115,.78); box-shadow:0 25px 55px rgba(0,0,0,.42); }.card-visual { position:relative; display:grid; place-items:center; min-height:240px; overflow:hidden; }.mumble .card-visual { background:linear-gradient(135deg,#24184a,#34216a); }.deep .card-visual { background:linear-gradient(135deg,#0a2540,#163f63); }.card-visual img { position:relative; z-index:1; width:min(92%,490px); height:auto; filter:drop-shadow(0 12px 12px rgba(0,0,0,.5)); }
.card-copy { align-self:center; padding:2.8rem clamp(1.5rem,4vw,3.5rem); }.game-status { margin:0 0 .6rem; color:var(--gold); font-size:.73rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }h2 { margin:0; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.45rem); line-height:1; }.card-copy > p:not(.game-status) { color:#dce3e1; line-height:1.65; }.visit { display:inline-flex; gap:.7rem; margin-top:.7rem; padding-bottom:.35rem; border-bottom:1px solid var(--gold); color:#fff6d2; font-weight:800; }.visit b { color:var(--gold); font-size:1.2rem; transition:transform .2s ease; }.game-card:hover .visit b { transform:translateX(5px); }
footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem 0 2.5rem; border-top:1px solid var(--line); color:#c6d0d2; font-size:.82rem; }footer p { margin:0; }footer nav { display:flex; gap:1rem; flex-wrap:wrap; }footer a { color:#e8e0c7; }.legal { width:min(100% - 2rem,820px); min-height:100vh; margin:0 auto; padding:1.8rem 0 4rem; }.legal header { display:flex; justify-content:space-between; align-items:center; padding-bottom:2rem; border-bottom:1px solid var(--line); }.back { color:var(--gold); font-weight:800; text-decoration:none; }.legal article { max-width:690px; padding:2rem 0; color:#e5e9e3; line-height:1.7; }.legal h1 { max-width:590px; margin:0; font-family:Georgia,serif; font-size:clamp(2.7rem,5.5vw,4.8rem); line-height:.98; letter-spacing:-.045em; }.legal h2 { margin:2.2rem 0 .5rem; font-size:1.35rem; }.legal a { color:#ffe48a; }.language-content[hidden] { display:none; }
@media (max-width:720px) { main { width:min(100% - 1.25rem,1100px); }.masthead { padding:.9rem 0; }.wordmark img { width:96px; }.intro { max-width:760px; padding:4.8rem 0 3.4rem; text-wrap:balance; }.game-card { grid-template-columns:1fr; }.card-visual { min-height:220px; }.card-copy { padding:2rem; } footer { flex-direction:column; }.legal { width:min(100% - 1.5rem,820px); } }

/* Final landing page: studio introduction */
.intro { max-width: 760px; margin: 3.2rem 0 3.8rem; padding: clamp(2rem,5vw,4rem); border: 1px solid rgba(246,200,86,.42); border-left: 5px solid var(--gold); border-radius: 0 22px 22px 0; background: linear-gradient(110deg,rgba(8,17,35,.92),rgba(13,33,55,.70)); box-shadow: 0 22px 48px rgba(0,0,0,.28); }
.intro .eyebrow { display:inline-block; margin:0 0 1.4rem; padding:.45rem .7rem; border:1px solid rgba(246,200,86,.5); border-radius:999px; background:rgba(246,200,86,.1); font-size:.72rem; letter-spacing:.15em; }
.intro h1 { max-width: 560px; font-size:clamp(2.35rem,4.3vw,4.15rem); line-height:1.04; }
.intro > p:last-child { max-width: 560px; margin-top:1.55rem; font-size:clamp(1rem,1.55vw,1.16rem); }
@media (max-width:720px) { .intro { margin:2rem 0 3rem; padding:1.7rem 1.35rem 1.9rem; border-left-width:4px; border-radius:0 16px 16px 0; } .intro h1 { font-size:clamp(2.15rem,10vw,3rem); } }

/* Final: open editorial introduction */
.intro { max-width: 680px; margin: 4.2rem 0 3.2rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.intro .eyebrow { display:block; margin:0 0 .85rem; padding:0; border:0; border-radius:0; background:transparent; color:#f6c856; font-size:.73rem; letter-spacing:.14em; }
.intro h1 { max-width: 530px; font-size:clamp(2rem,3.3vw,3rem); line-height:1.08; letter-spacing:-.03em; }
.intro > p:last-child { max-width: 540px; margin-top:1.15rem; font-size:1.03rem; line-height:1.7; color:#d6dfdf; }
@media (max-width:720px) { .intro { margin:2.6rem 0 2.8rem; padding:0; } .intro h1 { font-size:clamp(1.85rem,8vw,2.35rem); } }
/* Final palette: subdued forest green */ :root{--ink:#101b17;--paper:#e7e6d4;--gold:#bca96b;--mist:#afc0ad;--line:rgba(214,224,198,.19)}body{background:#101c17}body::before{background:linear-gradient(90deg,rgba(9,22,16,.74),rgba(17,37,26,.42)),url("Assets/AnnitGamesHeroFantasy_MageLeft.png") center/cover}.language-switch{border-color:rgba(188,169,107,.58);background:rgba(8,25,16,.58)}.language-switch button[aria-pressed="true"]{background:var(--gold);color:#172119}.intro .eyebrow,.game-status,.visit b{color:#cdb97a}.game-card{background:rgba(15,30,22,.88);border-color:rgba(205,185,122,.22)}.mumble .card-visual{background:linear-gradient(135deg,#20382d,#294b38)}.deep .card-visual{background:linear-gradient(135deg,#3b3025,#53412d)}
/* Hero framing: reveal the mage at left and brighten the scene */ body::before{background:linear-gradient(90deg,rgba(8,26,17,.40) 0%,rgba(17,37,26,.18) 52%,rgba(17,37,26,.08) 100%),url("Assets/AnnitGamesHeroFantasy_MageLeft.png") right center/112% auto no-repeat;background-color:#102218}

/* Launching page: the background art always covers the full viewport height. */
body::before{background-position:right center;background-size:cover;background-repeat:no-repeat}

/* Slightly zoom the launch art so the left wizard sits farther from the centre. */
body::before{inset:-12.5%;background-position:right center;background-size:cover}