/* OLYMPUS 99 — immersive poster layout */
:root {
    --paper: #08121e;
    --ink: #e5e8ec;
    --wine: #bd7954;
    --deep: #050c15;
    --gold: #df9d70;
    --line: #293643;
    --muted: #91a0ae;
}
body { background: #08121e; color: #e5e8ec; }
.access-note { background: #bd7954; color: #130e0c; font-size: 8px; font-weight: bold; }
.site-header { background: #0b1724; border-bottom: 1px solid #2a3946; padding: 24px 5%; }
.site-header nav { gap: 35px; }
.site-header nav a { color: #aebbc7; text-transform: uppercase; font-size: 9px; letter-spacing: 1.4px; }
.header-button { border: 1px solid #bd7954; color: #f3bd93; border-radius: 3px; font-size: 10px; padding: 12px 22px; }
.header-button:hover { background: #bd7954; color: #0b1724; }
.hero { min-height: 730px; background: #0a1724; padding: 80px 6% 65px; grid-template-columns: 1.15fr 1fr; gap: 0; isolation: isolate; }
.hero::before { z-index: -1; border-color: #a16f3e40; width: 930px; height: 930px; right: -330px; top: -70px; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#07121ef5 0%,#07121ee6 29%,#07121e44 56%,#07121e00 100%),linear-gradient(0deg,#08121e 0%,transparent 35%); }
.hero-atmosphere { position: absolute; inset: 0; z-index: -2; background: url('hero.webp') no-repeat right 33%; background-size: auto 125%; }
.hero-atmosphere > span { position: absolute; font: 900 190px Arial,sans-serif; letter-spacing: -10px; color: #ffffff08; bottom: -20px; left: 3%; }
.hero-copy { z-index: 2; }
.hero .eyebrow { font-size: 8px; color: #d59a73; border-left: 18px solid #c3865f; padding-left: 12px; }
.edition { display: inline-block; font-size: 7px; letter-spacing: 2px; color: #7f92a4; margin-bottom: 25px; }
.edition b { padding: 4px 6px; margin-left: 12px; border: 1px solid #405063; color: #c28b63; font-size: 7px; }
.hero h1 { font: 900 clamp(60px,6.8vw,106px)/.94 Arial,Helvetica,sans-serif; letter-spacing: -5px; margin-bottom: 27px; color: #eff1f3; }
.hero h1 em { color: #da9970; font-style: normal; }
.hero-copy > p { max-width: 370px; font-size: 13px; color: #9baebc; line-height: 1.9; }
.hero-actions { gap: 23px; margin: 32px 0; }
.hero .button { background: #c58b63; color: #111923; border: 0; border-radius: 3px; font-size: 10px; padding: 16px 23px; position: relative; overflow: hidden; }
.hero .button::after { content: ''; position: absolute; inset: -20% auto -20% -80px; width: 40px; background: #ffffff4a; transform: skewX(-20deg); animation: glint 7s ease-in-out infinite; }
.hero .button:hover { background: #e5b28b; }
.quiet-link { border-color: #4a5a6c; font-size: 9px; color: #9facb9; }
.hero-facts { color: #758a9c; font-size: 8px; }
.hero-visual { position: absolute; right: 5%; bottom: 80px; width: 200px; padding: 0; }
.visual-frame { display: none; }
.visual-stamp { position: relative; width: 100px; height: 100px; bottom: auto; left: auto; margin-left: auto; background: #091a2ccc; color: #e8b087; border: 4px double #b48760; backdrop-filter: blur(8px); }
.visual-stamp b { font: 900 22px Arial,sans-serif; }
.visual-note { color: #d4af90; font-size: 6px; }
.hero-index { left: auto; right: 6%; bottom: 26px; color: #8b7763; }
.experience-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #334251; border-bottom: 1px solid #334251; background: #0f1d2a; padding: 0 6%; }
.experience-strip > div,.experience-strip > a { padding: 28px 25px; border-right: 1px solid #334251; text-decoration: none; }
.experience-strip > :first-child { padding-left: 0; }
.experience-strip > :last-child { border: 0; }
.experience-strip span { display: inline-block; color: #c99470; font: 10px monospace; margin-right: 16px; }
.experience-strip strong { font-size: 10px; letter-spacing: .7px; color: #d4d9de; }
.experience-strip p { font-size: 10px; color: #788fa2; margin: 6px 0 0 34px; }
.experience-strip b { float: right; color: #d59a73; }
.ticker { background: #08121e; border-color: #263849; color: #8a6c52; font: 8px Arial,sans-serif; letter-spacing: 3px; padding: 17px 0; }
.page-body { max-width: 1450px; padding: 0 6%; }
h2 { font-family: Arial,Helvetica,sans-serif; font-weight: 800; }
.section-title h2 { font-size: 39px; letter-spacing: -1.7px; }
.eyebrow { color: #bc8961; font-size: 8px; }
.section-title > p { color: #6f8496; }
.game-grid { grid-template-columns: repeat(12,1fr); gap: 18px; }
.game-card { position: relative; grid-column: span 4; border: 1px solid #344453; background: #0f1e2c; overflow: hidden; min-height: 380px; }
.game-card:nth-child(4),.game-card:nth-child(5) { grid-column: span 6; min-height: 285px; display: grid; grid-template-columns: .8fr 1fr; }
.game-card:hover { box-shadow: 0 22px 38px #0005; border-color: #bc8961; }
.poster-number { position: absolute; top: 12px; left: 18px; font: 10px monospace; color: #b9c6d2; z-index: 2; }
.game-art { height: 230px; background: radial-gradient(ellipse at 50% 80%,#95613a,#1d2932 70%); color: #efbf82; }
.game-art::before { width: 190px; height: 190px; border-radius: 0; transform: rotate(45deg); border-color: #d7a56a44; }
.game-art::after { width: 145px; height: 145px; border-radius: 0; transform: rotate(45deg); border-color: #d7a56a44; }
.game-card:hover .game-art::before { transform: rotate(135deg); }
.game-art span { font-size: 70px; text-shadow: 0 8px 15px #0008; }
.game-card:nth-child(4) .game-art,.game-card:nth-child(5) .game-art { height: 100%; }
.card-1 .game-art { background: radial-gradient(ellipse at 50% 80%,#5a748d,#142736 70%); color: #d3e0e7; }
.card-2 .game-art { background: radial-gradient(ellipse at 50% 80%,#9e7236,#262a28 70%); }
.card-3 .game-art { background: radial-gradient(ellipse at 50% 80%,#4f837f,#142b32 70%); color: #a4d0c9; }
.card-4 .game-art { background: radial-gradient(ellipse at 50% 80%,#7d6074,#242331 70%); color: #d2b5c2; }
.game-info h3 { font: 800 25px Arial,sans-serif; letter-spacing: -.7px; color: #dce4eb; }
.game-info p { color: #8297a7; font-size: 11px; }
.game-info b { color: #cf9b74; border-color: #2e4052; }
.manifesto { background: #142332; border-color: #425362; margin: 65px 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 25px; padding: 45px; }
.manifesto > .eyebrow { grid-column: 1/-1; }
.manifesto::after { color: #c68c5f; top: -28px; right: 32px; font-size: 50px; }
.manifesto h2 { font: 800 35px/1.17 Arial,sans-serif; letter-spacing: -1.2px; margin: 0; }
.manifesto em { font-style: normal; color: #be8c69; }
.manifesto-bottom { gap: 20px; }
.manifesto-bottom p { color: #8b9fad; font-size: 12px; }
.circle-link { border-color: #6b5b4d; color: #c8966e; width: 55px; height: 55px; }
.circle-link:hover { background: #2f3539; }
.banner-section { border-color: #3b4350; }
.banner-section > div { background: #12202d; }
.banner-section strong { color: #ca9b77; }
.banner-section p { color: #8395a5; }
.banner-section a { color: #caa17e; }
.page-title { background: radial-gradient(ellipse at 100% 100%,#29445a,#0d1a28 65%); color: #e8edf1; border-bottom: 1px solid #3a4a58; }
.page-title h1 { font: 900 62px/1.06 Arial,sans-serif; letter-spacing: -2px; }
.page-title p { color: #93a9bc; }
.breadcrumb { color: #bc926e; font-size: 8px; }
.page-ornament { color: #57768c; opacity: .25; }
.article-section { border-color: #2d3c49; }
.article-section h2 { color: #dbe2e8; font-size: 30px; }
article p { color: #92a3b3; }
article h3 { color: #c18f6a; }
.article-intro h2 { font-size: 36px; }
.table-frame { border-color: #3b4b59; }
caption { color: #cda383; background: #172938; }
thead { background: #243b4d; color: #dce3e9; }
tbody th { background: #122332; border-color: #304352; }
tbody h3 { color: #d1a07b; font: 700 19px/1.4 Arial,sans-serif; }
tbody th,td { border-color: #304352; }
tbody tr:nth-child(even) td { background: #0e1b28; }
td p { color: #9eafbd; }
.faq-section h2 { font-size: 32px; color: #dbe2e8; }
.faq-section p,details p { color: #879cad; }
.risk-note { border-color: #6b5542; }
.risk-note h2 { font-size: 23px; color: #d1a07b; }
.risk-note > span { border-color: #a27353; color: #d1a07b; }
.risk-note a { color: #c99b79; }
footer { background: #050d16; color: #8197aa; }
.footer-top { border-color: #2a3948; }
.footer-top p { font: 700 23px/1.4 Arial,sans-serif; color: #a5b6c5; }
.footer-top a { color: #c29371; }
.footer-links h2 { color: #bf9472; }
.footer-links a { color: #7790a3; }
.footer-bottom { border-color: #253544; color: #596e80; }
.utility-bar { background: #102232; border-color: #32495c; color: #ba987b; }
.playpanel { background: radial-gradient(ellipse at 50% 0%,#23435b,#0b1e2d); border-color: #6a6a57; color: #dbe6ef; }
.playpanel h2 { font: 800 32px Arial,sans-serif; }
.play-caption { color: #ad9375; }
.playpanel #result { color: #9db2c2; }
.playpanel .button { border-radius: 3px; background: #c59068; color: #101b25; border-color: #c59068; }
.display > span { background: #dce5e9; color: #15334b; box-shadow: 0 6px 0 #5e7787; }
.memorycard { color: #183b52; background: #b8cdd7; border-color: #637e8e; }
.memorycard:disabled { background: #d3ad79; }
.timer-panel { background: #112b3e; border-color: #516579; }
.timer-panel select { background: #0d1d2a; color: #d9e6ef; border-color: #557085; }
.timer-panel .button { border-radius: 3px; background: #c9936a; color: #091722; }
.directory h2 { color: #b6c9d6; font-size: 23px; }
dialog { background: #102638; color: #e1e9f0; border-color: #ad8763; }
dialog p { color: #9cafbf; }
dialog::backdrop { background: #030c16eb; }
@keyframes glint { 0%,75% { left: -80px; } 100% { left: 150%; } }
@media (max-width: 1000px) {
    .hero { min-height: 650px; }
    .hero h1 { font-size: 75px; }
    .game-art { height: 190px; }
    .game-art span { font-size: 50px; }
    .game-card:nth-child(4),.game-card:nth-child(5) { display: block; }
    .game-card:nth-child(4) .game-art,.game-card:nth-child(5) .game-art { height: 190px; }
    .manifesto { gap: 20px; padding: 30px; }
    .manifesto h2 { font-size: 30px; }
    .experience-strip strong { font-size: 8px; }
    .experience-strip > div,.experience-strip > a { padding: 20px 15px; }
}
@media (max-width: 700px) {
    .site-header { padding: 18px 5% 13px; }
    .site-header nav { border-color: #304759; }
    .site-header nav a { font-size: 8px; letter-spacing: .4px; }
    .hero { display: block; min-height: 750px; padding: 40px 5% 260px; }
    .hero h1 { font-size: 60px; letter-spacing: -3px; line-height: .96; }
    .hero::after { background: linear-gradient(180deg,#07121ef5 0%,#07121ed9 38%,#07121e30 66%,#08121eaa 100%),linear-gradient(90deg,#08121e7a,transparent); }
    .hero-atmosphere { background-size: auto 85%; background-position: 65% bottom; }
    .hero-atmosphere span { display: none; }
    .hero-copy > p { font-size: 12px; max-width: 290px; }
    .hero .eyebrow { font-size: 7px; }
    .edition { margin-bottom: 22px; font-size: 6px; }
    .hero-actions { gap: 15px; margin: 25px 0; }
    .hero .button { padding: 13px 18px; font-size: 9px; gap: 17px; }
    .quiet-link { font-size: 8px; }
    .hero-facts { gap: 10px; font-size: 7px; }
    .hero-visual { bottom: 38px; right: 5%; width: 150px; }
    .visual-stamp { width: 80px; height: 80px; font-size: 8px; }
    .visual-stamp b { font-size: 18px; }
    .visual-note { font-size: 5px; letter-spacing: 1px; }
    .hero-index { font-size: 6px; left: 5%; right: auto; bottom: 26px; }
    .experience-strip { display: block; padding: 0 5%; }
    .experience-strip > div,.experience-strip > a { display: block; padding: 17px 0; border-right: 0; border-bottom: 1px solid #2b4051; }
    .experience-strip strong { font-size: 9px; }
    .experience-strip p { font-size: 9px; }
    .ticker { font-size: 7px; padding: 14px 0; }
    .section-title h2 { font-size: 32px; }
    .game-grid { grid-template-columns: 1fr 1fr; gap: 13px; }
    .game-card,.game-card:nth-child(4) { grid-column: span 1; min-height: 0; }
    .game-card:nth-child(5) { grid-column: span 2; display: grid; grid-template-columns: .75fr 1fr; }
    .game-card:nth-child(5) .game-art { height: 100%; }
    .game-art,.game-card:nth-child(4) .game-art { height: 160px; }
    .game-art span { font-size: 40px; }
    .game-art::before { width: 140px; height: 140px; }
    .game-art::after { width: 100px; height: 100px; }
    .poster-number { font-size: 8px; left: 12px; top: 9px; }
    .game-info h3 { font-size: 20px; }
    .game-info p { font-size: 10px; }
    .game-info b { font-size: 9px; }
    .manifesto { display: block; margin: 40px 0; padding: 25px; }
    .manifesto h2 { font-size: 29px; margin-bottom: 24px; }
    .manifesto-bottom p { font-size: 11px; }
    .page-title h1 { font-size: 43px; }
    .article-intro h2 { font-size: 29px; }
    .article-section h2,.faq-section h2 { font-size: 29px; }
    .footer-top p { font-size: 21px; }
    tbody h3 { font-size: 18px; }
}