/* FOM Games — simple, responsive site */
:root{--bg:#0c0e12;--panel:#13171d;--panel-dark:#101318;--line:#292e35;--text:#f3f2ed;--soft:#c5c7c9;--muted:#949aa2;--accent:#d9e8b7;--page:1150px;--ease:cubic-bezier(.2,.75,.25,1);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
::selection{background:var(--accent);color:#0c0e12}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
.container{width:min(calc(100% - 48px),var(--page));margin-inline:auto}
.skip{position:absolute;left:12px;top:-80px;background:var(--text);color:var(--bg);z-index:100;padding:10px 16px;border-radius:8px}
.skip:focus{top:10px}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.site-header{background:rgba(12,14,18,.92);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30;border-bottom:1px solid #ffffff13}
.header-layout{height:90px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{font-size:19px;font-weight:800;letter-spacing:-.9px;white-space:nowrap}.brand-period{color:var(--accent)}
nav{display:flex;align-items:center;gap:29px;font-size:13px;font-weight:650}
nav a:not(.nav-contact){color:#afb5bc;transition:color .2s}nav a:hover{color:#fff}
.nav-contact{border:1px solid #3a4147;border-radius:9px;padding:10px 15px;white-space:nowrap;transition:background .2s}
.nav-contact:hover{background:#1b2228}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);align-items:center;gap:72px;padding-top:86px;padding-bottom:95px}
.eyebrow,.section-overline,.mini-label{font-size:11px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:10px;color:#c7cbd0}.tiny-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.hero h1{font-size:clamp(58px,7vw,96px);line-height:1.05;letter-spacing:-5px;margin:19px 0 21px;font-weight:800}
.hero-content>p{font-size:17px;color:#b4b9c0;line-height:1.9;max-width:530px;margin:0}
.hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:29px}
.primary-btn{display:inline-flex;gap:26px;align-items:center;background:var(--accent);color:#11150e;border-radius:9px;padding:15px 19px;font-size:14px;font-weight:800;transition:transform .25s var(--ease),background .2s}
.primary-btn:hover{transform:translateY(-2px);background:#e4f4bf}
.quiet-link{font-size:13px;font-weight:700;color:#d8dce1;border-bottom:1px solid #545b61;padding-bottom:3px;transition:color .2s}.quiet-link:hover{color:white}
.hero-aside{border:1px solid #30363c;min-height:330px;border-radius:18px;padding:26px 28px;background:linear-gradient(135deg,#1a1f26,#101419 70%);display:flex;flex-direction:column;overflow:hidden;position:relative}
.aside-header,.aside-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}
.signal{font-size:10px;letter-spacing:.65px;color:#d2dfbe;white-space:nowrap}.signal span{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--accent)}
.aside-middle{display:flex;align-items:center;gap:20px;margin-top:28px;opacity:.22}.aside-platform{font-size:65px;line-height:1;font-weight:950;letter-spacing:-4px}.aside-rule{height:1px;flex:1;background:#bdc4be}
.hero-aside h2{font-size:28px;letter-spacing:-.9px;line-height:1.13;margin:20px 0 6px}.hero-aside p{color:#a2aab1;font-size:13px;line-height:1.75;max-width:320px;margin:0}
.aside-bottom{margin-top:auto;padding-top:30px;font-size:10px;color:#737d85;text-transform:uppercase;letter-spacing:1.1px}
.games-section{border-top:1px solid var(--line);padding:86px 0 97px;background:linear-gradient(180deg,#101217,#0c0e12)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:31px}
.section-heading h2{font-size:clamp(46px,5vw,66px);line-height:1.1;font-weight:800;letter-spacing:-2.7px;margin:12px 0 0}.section-heading h2 span{color:var(--accent)}
.section-heading p{color:var(--muted);font-size:14px;max-width:320px;line-height:1.8;margin:0 0 5px}
.games-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:17px}
.game-card{grid-column:span 2;position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid #2e343c;border-radius:16px;background:#15191f;min-width:0;transition:border-color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.game-card.featured{grid-column:span 3;display:grid;grid-template-columns:46% 54%;min-height:335px}
.game-card:hover{transform:translateY(-4px);border-color:#6a7375;box-shadow:0 16px 38px #00000032}
.game-art{position:relative;min-width:0;min-height:245px;padding:21px 12px;background:radial-gradient(ellipse at center, #222831 0%,#14191f 67%,#101318 100%);border-bottom:1px solid #262d35;display:flex;align-items:center;justify-content:center;overflow:hidden}
.game-card.featured .game-art{min-height:335px;border-bottom:0;border-right:1px solid #262d35}
.game-art:before{content:'';pointer-events:none;position:absolute;inset:0;opacity:.11;background-image:linear-gradient(#ffffff20 1px,transparent 1px),linear-gradient(90deg,#ffffff20 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,transparent,black,transparent)}
.art-topline{position:absolute;top:14px;left:16px;color:#828d98;font-size:9px;font-weight:700;letter-spacing:1.2px}
.art-dot{display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:100%;vertical-align:middle;margin-right:6px}
.art-index{position:absolute;right:14px;bottom:13px;color:#7c858d;font-size:10px;letter-spacing:1px}
.screen-wrap{height:206px;max-width:80%;aspect-ratio:9/16;position:relative;display:grid;place-items:center;filter:drop-shadow(0 8px 19px #0008);transition:transform .4s var(--ease)}
.game-card.featured .screen-wrap{height:278px;max-height:calc(100% - 44px)}
.game-image{width:100%;height:100%;object-fit:contain;border-radius:8px;box-shadow:0 0 0 4px #07090b}
.game-image.pixel-art{image-rendering:pixelated}
.game-card:hover .screen-wrap{transform:translateY(-3px) scale(1.025)}
.screenshot-fallback{display:none;font-weight:700;text-align:center;font-size:14px;padding:18px}.screenshot-fallback small{font-size:11px;font-weight:400;color:var(--muted)}
.screen-wrap.failed .game-image{display:none}.screen-wrap.failed .screenshot-fallback{display:block}
.game-info{padding:24px 23px 23px;min-width:0;display:flex;flex-direction:column;flex:1}
.game-card.featured .game-info{justify-content:center;padding:26px}
.game-type{text-transform:uppercase;letter-spacing:1.5px;font-size:10px;font-weight:750;color:#a2adad}
.game-info h3{font-size:clamp(21px,2vw,27px);font-weight:780;letter-spacing:-.9px;line-height:1.17;margin:12px 0 11px}
.game-info p{font-size:13px;line-height:1.75;color:#a5afb5;max-width:300px;margin:0 0 24px;flex:1}
.game-card.featured .game-info p{flex:0}
.game-action{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;font-size:13px;font-weight:750;border-bottom:1px solid #58626a;padding-bottom:4px;transition:color .2s,border-color .2s}.game-action:hover{color:var(--accent);border-color:var(--accent)}
.lower-section{padding-top:30px;padding-bottom:40px}
.pc-block{display:grid;grid-template-columns:1fr 230px;gap:40px;align-items:center;background:linear-gradient(120deg,#1b2223,#131719);border:1px solid #36413d;border-radius:18px;padding:43px 50px}
.pc-block h2{font-size:clamp(29px,4vw,44px);letter-spacing:-1.7px;line-height:1.14;margin:14px 0}
.pc-block p{max-width:615px;margin:0;color:#adb6b6;line-height:1.85;font-size:15px}
.status-tag{display:inline-flex;gap:9px;align-items:center;border:1px solid #566a54;color:#d9e7c8;border-radius:999px;padding:7px 12px;font-size:12px;margin-top:23px}
.status-tag .tiny-dot{width:6px;height:6px}
.pc-mark{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;border:1px solid #34403b;border-radius:15px;min-height:186px;background:linear-gradient(145deg,#29312d55,#0c110f44)}
.pc-mark img{height:80px;width:auto;max-width:90px;object-fit:contain}
.pc-mark span{font-size:10px;color:#9ba6a2;letter-spacing:1.9px}
.about-contact{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:70px 0 96px}
.about-contact>div{border-top:1px solid #394149;padding-top:24px}
.about-contact h2{font-size:29px;letter-spacing:-1px;margin:10px 0 10px}
.about-contact p{color:#aeb5bc;line-height:1.8;max-width:425px;margin:0}
.contact-copy a{display:inline-flex;gap:16px;font-weight:780;font-size:18px;border-bottom:1px solid #7d8585;padding:5px 0;margin-top:17px;transition:color .2s}.contact-copy a:hover{color:var(--accent)}
footer{border-top:1px solid #2a3038;padding:29px 0 40px;color:#7f8992;font-size:12px}
.footer-layout{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.footer-layout a{color:#c0c5c9}
/* Progressive motion: elements are always visible before JS executes */
.js [data-reveal]{opacity:0;transform:translateY(13px);transition:opacity .66s ease,transform .66s var(--ease)}
.js [data-reveal].visible{opacity:1;transform:none}
@media(max-width:1020px){.hero{gap:35px}.hero h1{font-size:70px;letter-spacing:-3px}.game-card.featured{grid-template-columns:43% 57%}.game-info{padding:21px 19px}}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding-top:55px;padding-bottom:60px}.hero-aside{min-height:260px}.game-card.featured{grid-column:span 3;display:flex;min-height:0}.game-card.featured .game-art{min-height:265px;border-right:0;border-bottom:1px solid #262d35}.game-card.featured .screen-wrap{height:230px}.game-card{grid-column:span 3}.about-contact{gap:28px}.pc-block{grid-template-columns:1fr 170px;padding:32px}}
@media(max-width:590px){.container{width:min(calc(100% - 34px),var(--page))}.header-layout{height:auto;min-height:67px;flex-wrap:wrap;padding:13px 0;gap:8px}.brand{font-size:18px}nav{gap:15px;font-size:12px}.nav-contact{padding:6px 8px}nav a[href="#about"]{display:none}.hero{padding-top:46px;padding-bottom:51px}.hero h1{font-size:55px;letter-spacing:-2.4px}.hero-content>p{font-size:16px}.hero-actions{gap:15px}.hero-aside{padding:22px}.games-section{padding:62px 0 70px}.section-heading{display:block}.section-heading p{margin-top:15px}.games-grid{grid-template-columns:1fr;gap:15px}.game-card,.game-card.featured{grid-column:auto}.game-art,.game-card.featured .game-art{min-height:260px}.screen-wrap,.game-card.featured .screen-wrap{height:233px}.game-info,.game-card.featured .game-info{padding:24px}.pc-block{grid-template-columns:1fr;gap:23px}.pc-mark{min-height:130px}.pc-mark img{height:58px}.lower-section{padding-top:15px}.about-contact{grid-template-columns:1fr;gap:38px;padding:44px 0 75px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.js [data-reveal]{opacity:1;transform:none}}

/* Compact FOM mark beside the header name */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:44px;height:47px;object-fit:contain;flex:none}
/* Both Contact controls copy the email address */
.copy-email{cursor:pointer;font:inherit}
nav .nav-contact{font-size:13px;font-weight:650;color:var(--text)}
.contact-copy .email-copy{display:inline-flex;font-size:18px;font-weight:780;color:var(--text);background:none;border:0;border-bottom:1px solid #7d8585;padding:5px 0;margin-top:17px;transition:color .2s;text-align:left}
.contact-copy .email-copy:hover{color:var(--accent)}
/* Existing PC-project card, without the repeated logo block */
.pc-block{grid-template-columns:1fr}