/* HERCULES99 — Burgundy Theatre. No external fonts or animation libraries. */
:root {
    --wine: #4a1225;
    --deep: #290d19;
    --paper: #f3eee5;
    --ink: #382630;
    --muted: #786c70;
    --line: #d8cfc4;
    --gold: #b38a4e;
    --rose: #dcb8ad;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.75 Arial, Helvetica, sans-serif; }
button, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
:focus-visible { outline: 3px solid #b38a4e; outline-offset: 5px; }
.skip { position: absolute; top: -100px; z-index: 20; background: white; padding: 15px; }
.skip:focus { top: 0; }
.access-note { padding: 8px 4%; background: var(--deep); color: #d6b98c; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 1.5px; }
.access-note strong { font-weight: 400; letter-spacing: .6px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 25px 4%; background: var(--wine); color: #efe0d1; border-bottom: 1px solid #7d3f50; }
.brand { display: flex; align-items: center; }
.brand img { width: 218px; height: auto; }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a { font-size: 12px; text-decoration: none; position: relative; }
.site-header nav a::after { content: ''; display: block; height: 1px; background: #d6b98c; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.site-header nav a:hover::after { transform: scaleX(1); }
.header-button { border: 1px solid #b58f78; border-radius: 30px; text-decoration: none; padding: 10px 22px; font-size: 11px; white-space: nowrap; transition: background .25s, color .25s; }
.header-button:hover { background: #ead4b1; color: var(--wine); }
.hero { position: relative; background: var(--wine); color: #f3e8d7; padding: 62px 6% 80px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; overflow: hidden; }
.hero::before { content: ''; position: absolute; width: 650px; height: 650px; border: 1px solid #7f4556; border-radius: 50%; right: -120px; top: -100px; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; animation: entrance .8s ease-out both; }
.eyebrow { display: block; font-size: 9px; letter-spacing: 2.4px; font-weight: 700; margin-bottom: 22px; color: var(--gold); }
.hero .eyebrow { color: #d7b68a; }
h1 { font-size: clamp(52px, 6.8vw, 94px); letter-spacing: -4px; line-height: 1.03; margin-bottom: 28px; }
.hero-copy > p { max-width: 370px; font-size: 15px; color: #d4b8bb; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; margin: 35px 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; background: var(--wine); color: #fff4e0; padding: 14px 25px; border: 1px solid var(--wine); border-radius: 30px; font-size: 12px; font-weight: 700; text-decoration: none; transition: transform .25s, background .25s; }
.button:hover { background: #74233e; transform: translateY(-3px); }
.hero .button { background: #ead4b1; color: #42172b; border-color: #ead4b1; }
.hero .button:hover { background: white; }
.quiet-link { text-decoration: none; font-size: 11px; border-bottom: 1px solid #9e6c73; padding-bottom: 4px; }
.hero-facts { display: flex; gap: 22px; font-size: 9px; letter-spacing: .4px; color: #d8bca7; }
.hero-facts span::before { content: '✦'; margin-right: 7px; font-size: 8px; color: #cfa461; }
.hero-visual { position: relative; padding: 0 16px 0 10px; animation: entrance 1s .1s ease-out both; }
.visual-frame { border-radius: 240px 240px 3px 3px; overflow: hidden; border: 1px solid #d7ae72; padding: 8px; position: relative; }
.visual-frame img { display: block; width: 100%; height: auto; border-radius: 230px 230px 0 0; }
.visual-stamp { position: absolute; bottom: 35px; left: -32px; width: 115px; height: 115px; border-radius: 50%; background: #ead9ba; color: #4a1225; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; line-height: 1.35; border: 5px double #9c7a51; transform: rotate(-12deg); animation: gentle-float 6s ease-in-out infinite; }
.visual-stamp b { font: 28px Georgia, serif; }
.visual-stamp span { font-size: 6px; letter-spacing: 1px; margin-top: 6px; }
.visual-note { display: block; text-align: right; font-size: 7px; letter-spacing: 2px; color: #d3ada7; margin-top: 15px; }
.hero-index { position: absolute; bottom: 22px; left: 6%; font-size: 8px; letter-spacing: 2px; color: #aa7c83; }
.ticker { overflow: hidden; background: #e4cba6; border-bottom: 1px solid #b69872; padding: 13px 0; color: #4f2230; font: 10px Georgia, serif; letter-spacing: 2px; }
.ticker > div { white-space: nowrap; width: max-content; animation: marquee 38s linear infinite; }
.ticker i { margin: 0 35px; font-style: normal; }
.page-body { max-width: 1340px; margin: auto; padding: 0 6%; }
.game-section { padding: 70px 0 30px; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
h2 { font-size: 43px; letter-spacing: -1.4px; line-height: 1.15; }
.section-title h2 { margin-bottom: 0; }
.section-title > p { color: var(--muted); font-size: 12px; margin: 0 0 5px; }
.game-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 23px; }
.game-card { grid-column: span 2; text-decoration: none; border: 1px solid var(--line); background: #faf6ef; transition: transform .3s, box-shadow .3s; }
.game-card:nth-child(4), .game-card:nth-child(5) { grid-column: span 3; }
.game-card:hover { transform: translateY(-7px); box-shadow: 0 18px 25px #3e102514; }
.game-art { position: relative; overflow: hidden; height: 200px; background: radial-gradient(ellipse at 50% 120%, #ad776c, #572539); color: #efd7b3; display: flex; align-items: center; justify-content: center; }
.game-art::before, .game-art::after { content: ''; position: absolute; width: 160px; height: 160px; border: 1px solid #ffffff25; border-radius: 50%; transition: transform .6s; }
.game-art::after { width: 210px; height: 210px; }
.game-art span { position: relative; z-index: 1; font: 64px Georgia, serif; transition: transform .4s; text-shadow: 0 4px 4px #29101955; }
.game-card:hover .game-art span { transform: scale(1.1) rotate(-5deg); }
.game-card:hover .game-art::before { transform: scale(1.2); }
.game-art i { position: absolute; right: 15px; bottom: 12px; font: 9px Georgia, serif; letter-spacing: 3px; opacity: .6; }
.card-1 .game-art { background: radial-gradient(ellipse at 50% 120%, #687c93, #26394d); }
.card-2 .game-art { background: radial-gradient(ellipse at 50% 120%, #b59565, #6f4b37); }
.card-3 .game-art { background: radial-gradient(ellipse at 50% 120%, #727e6e, #344b42); }
.card-4 .game-art { background: radial-gradient(ellipse at 50% 120%, #a494a6, #56445f); }
.game-info { padding: 25px; }
.game-info .eyebrow { font-size: 8px; margin-bottom: 12px; }
.game-info h3 { font: 27px Georgia, serif; margin: 0 0 13px; }
.game-info p { font-size: 12px; line-height: 1.8; color: var(--muted); min-height: 64px; }
.game-info b { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; font-size: 11px; color: var(--wine); }
.manifesto { padding: 55px; border: 1px solid #c9b395; margin: 50px 0; position: relative; background: #eae0d1; }
.manifesto::after { content: '✦'; position: absolute; top: 25px; right: 35px; color: #ba9767; font-size: 45px; }
.manifesto h2 { font-size: 49px; max-width: 800px; }
.manifesto em { color: #8c5e62; }
.manifesto-bottom { display: flex; align-items: center; gap: 45px; justify-content: space-between; }
.manifesto-bottom p { max-width: 600px; color: #766360; font-size: 14px; margin-bottom: 0; }
.circle-link { flex-shrink: 0; width: 70px; height: 70px; border: 1px solid #a98861; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 25px; transition: transform .3s, background .3s; }
.circle-link:hover { transform: rotate(45deg); background: #d9bf97; }
.banner-section { margin: 55px 0; border: 1px solid var(--line); }
.banner-section img { display: block; width: 100%; height: auto; }
.banner-section > div { padding: 20px 25px; background: #e9dfd3; }
.banner-section strong { font-size: 10px; letter-spacing: 1px; }
.banner-section p, .banner-section a { font-size: 12px; }
.banner-section p { margin: 7px 0; color: #766467; }
.page-title { position: relative; padding: 55px 6% 60px; background: var(--wine); color: #f4e6d1; overflow: hidden; }
.breadcrumb { display: block; font-size: 9px; letter-spacing: 2px; text-decoration: none; color: #cda99a; margin-bottom: 35px; }
.page-title h1 { font-size: 65px; position: relative; z-index: 1; margin-bottom: 22px; max-width: 900px; }
.page-title > p { max-width: 600px; color: #d1b5b7; position: relative; z-index: 1; margin-bottom: 0; }
.page-ornament { position: absolute; right: 7%; bottom: 5px; font-size: 220px; color: #784154; opacity: .6; animation: slow-turn 40s linear infinite; }
.article-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 65px; padding: 65px 0; border-bottom: 1px solid var(--line); }
.article-section h2 { font-size: 34px; }
article p { color: #716568; font-size: 15px; line-height: 1.95; }
article h3 { font-size: 16px; color: #6a3046; margin: 30px 0 15px; }
.longread { margin: 70px 0; }
.article-intro { max-width: 800px; margin-bottom: 32px; }
.article-intro > p { color: var(--muted); }
.table-frame { border: 1px solid #c8b8a6; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
caption { padding: 18px 24px; text-align: left; font-size: 12px; background: #e7d9c8; color: #6f4a46; }
thead { background: var(--wine); color: #f2dfc2; }
thead th { font-size: 11px; letter-spacing: 1px; padding: 15px 25px; text-align: left; }
thead th:first-child { width: 27%; }
tbody th, td { padding: 27px 25px; vertical-align: top; text-align: left; border-top: 1px solid #d5c6b6; }
tbody th { background: #eee3d6; border-right: 1px solid #d5c6b6; }
tbody th > span { color: #a77e49; font: 11px monospace; letter-spacing: 2px; }
tbody h3 { font: 23px/1.3 Georgia, serif; color: #652d40; margin: 12px 0 0; }
tbody tr:nth-child(even) td { background: #f8f2e9; }
td p { font-size: 14px; line-height: 1.95; margin: 0; color: #6e5e61; overflow-wrap: anywhere; }
.faq-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 65px; padding: 50px 0 65px; }
.faq-section h2 { font-size: 37px; }
.faq-section > div > p { max-width: 300px; font-size: 12px; color: var(--muted); }
details { padding: 18px 0; border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.6; }
details p { font-size: 13px; color: var(--muted); padding-top: 17px; margin-bottom: 0; animation: entrance .25s ease-out; }
.risk-note { display: flex; gap: 25px; border-top: 1px solid #bda18a; border-bottom: 1px solid #bda18a; padding: 30px 0; margin-bottom: 65px; }
.risk-note > span { display: flex; align-items: center; justify-content: center; border: 1px solid #9d6c61; color: #9d6c61; border-radius: 50%; height: 40px; width: 40px; flex-shrink: 0; font: 25px Georgia, serif; }
.risk-note h2 { font-size: 25px; letter-spacing: -.5px; margin-bottom: 12px; }
.risk-note p { font-size: 12px; max-width: 850px; color: var(--muted); margin-bottom: 10px; }
.risk-note a { font-size: 11px; font-weight: bold; color: #712f48; text-underline-offset: 5px; }
footer { background: var(--deep); color: #ddc9c4; padding: 50px 6% 90px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 35px; border-bottom: 1px solid #633447; }
.footer-top img { width: 210px; height: auto; }
.footer-top p { font: 22px/1.4 Georgia, serif; margin-bottom: 0; color: #d9b8a9; }
.footer-top > a:last-child { font-size: 11px; text-underline-offset: 7px; }
.footer-links { display: grid; grid-template-columns: 1fr 3fr; gap: 50px; padding: 35px 0; }
.footer-links h2 { font: 12px Arial, sans-serif; color: #d8b78b; letter-spacing: .5px; }
.footer-links a { display: block; font-size: 11px; text-decoration: none; color: #bca1a6; padding: 4px 0; }
.footer-links a:hover { color: white; }
.footer-directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
.footer-bottom { border-top: 1px solid #633447; padding-top: 20px; font-size: 9px; display: flex; justify-content: space-between; color: #a7808d; }
.utility-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: 12px 4%; background: #fffaf0; border-top: 1px solid #ccb8a1; color: #612a3e; z-index: 9; font-size: 9px; }
.utility-bar > span { margin-right: auto; font-size: 8px; letter-spacing: 1px; }
.utility-bar i { margin: 0 10px; color: #ad8a56; }
.utility-bar button { background: none; border: 0; padding: 0; color: inherit; font-size: 9px; }
.utility-bar a { font-size: 9px; text-underline-offset: 4px; }
dialog { background: #f3eee5; color: #4a1225; border: 1px solid #b38a4e; padding: 35px; border-radius: 5px; max-width: 470px; }
dialog::backdrop { background: #290d19dc; }
dialog h2 { font-size: 35px; }
dialog p { font-size: 14px; color: #776467; }
.playpanel { margin: 55px 0; padding: 35px; text-align: center; background: var(--wine); color: #f2e2cc; border: 6px double #b49875; }
.play-caption { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 1px; color: #d8ac94; margin-bottom: 25px; }
.playpanel h2 { font-size: 35px; }
.display { display: flex; justify-content: center; align-items: center; gap: 15px; min-height: 115px; }
.display > span { background: #f5e5cc; color: #4a1225; padding: 10px 23px; border-radius: 4px; font: 47px Georgia, serif; box-shadow: 0 6px 0 #aa8564; }
.playpanel #result { margin: 28px 0 15px; font-size: 13px; color: #e3c6b4; min-height: 25px; }
.controls { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.playpanel .button { background: #ead5b1; color: #4a1225; border-color: #d5b082; }
.playpanel .button:disabled { opacity: .4; cursor: default; transform: none; }
.playpanel small { font-size: 10px; color: #c59994; }
.display.memory { display: grid; grid-template-columns: repeat(4, 65px); gap: 12px; }
.memorycard { height: 80px; color: #4a1225; background: #ebd9ba; border: 1px solid #b48c5b; border-radius: 5px; font-size: 27px; transition: transform .25s; }
.memorycard:hover { transform: translateY(-4px); }
.memorycard:disabled { background: #d9bc89; opacity: .8; cursor: default; }
.timer-panel { border: 1px solid #c5a67f; padding: 40px; margin: 50px 0; background: #ede1d1; }
.timer-panel label { display: block; font-size: 12px; margin-bottom: 10px; }
.timer-panel select { padding: 12px; margin-right: 15px; background: #fff8ef; color: #4a1225; border: 1px solid #a77f66; border-radius: 4px; }
.timer-panel p { margin-top: 25px; }
.timer-panel small { color: var(--muted); }
.directory { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; padding: 45px 0; }
.directory a { text-decoration: none; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding: 22px 0; }
.directory h2 { font-size: 25px; margin: 0; }
.directory a > span { font: 10px monospace; color: #a17c50; }
.directory b { margin-left: auto; color: #a17c50; }
/* Progressive enhancement: content stays visible if JavaScript is unavailable. */
.motion-enabled .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.motion-enabled .reveal.in-view { opacity: 1; transform: translateY(0); }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.motion-off .reveal { opacity: 1 !important; transform: none !important; }
@keyframes entrance { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gentle-float { 0%,100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-7px) rotate(-8deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes slow-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .motion-enabled .reveal { opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
    .site-header { gap: 20px; }
    .site-header nav { gap: 17px; }
    .site-header nav a { font-size: 10px; }
    .brand img { width: 170px; }
    .hero { gap: 25px; padding-left: 5%; padding-right: 5%; }
    .hero h1 { font-size: 69px; }
    .hero-facts { gap: 12px; font-size: 8px; }
    .game-info { padding: 20px; }
    .game-art { height: 165px; }
    .game-art span { font-size: 49px; }
    .article-section, .faq-section { gap: 30px; }
    .manifesto { padding: 35px; }
    .manifesto h2 { font-size: 40px; }
}
@media (max-width: 700px) {
    .access-note { justify-content: center; font-size: 8px; }
    .access-note > span { display: none; }
    .site-header { flex-wrap: wrap; padding: 20px 5% 12px; gap: 15px; }
    .brand img { width: 170px; }
    .header-button { font-size: 9px; padding: 9px 14px; }
    .site-header nav { order: 3; width: 100%; justify-content: space-between; gap: 10px; border-top: 1px solid #764050; padding-top: 14px; }
    .hero { grid-template-columns: 1fr; padding: 35px 6% 55px; gap: 35px; }
    .hero h1 { font-size: 65px; letter-spacing: -3px; }
    .hero .eyebrow { font-size: 8px; letter-spacing: 1.7px; }
    .hero-copy > p { font-size: 14px; }
    .hero-actions { margin: 28px 0; gap: 20px; }
    .hero-visual { padding-left: 10px; max-width: 450px; justify-self: center; }
    .visual-stamp { left: -5px; width: 95px; height: 95px; bottom: 30px; }
    .visual-stamp b { font-size: 23px; }
    .hero-index { bottom: 16px; font-size: 7px; }
    .page-body { padding: 0 5%; }
    .game-section { padding-top: 45px; }
    .section-title { display: block; }
    h2 { font-size: 35px; }
    .section-title > p { margin-top: 18px; font-size: 11px; }
    .game-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .game-card, .game-card:nth-child(4), .game-card:nth-child(5) { grid-column: span 1; }
    .game-card:nth-child(5) { grid-column: span 2; }
    .game-art { height: 145px; }
    .game-art span { font-size: 38px; }
    .game-info { padding: 16px; }
    .game-info .eyebrow { font-size: 7px; letter-spacing: 1px; }
    .game-info h3 { font-size: 23px; }
    .game-info p { font-size: 11px; min-height: 105px; }
    .game-card:nth-child(5) .game-info p { min-height: 0; }
    .manifesto { padding: 27px; margin: 30px 0; }
    .manifesto::after { display: none; }
    .manifesto h2 { font-size: 32px; }
    .manifesto-bottom { gap: 20px; }
    .manifesto-bottom p { font-size: 12px; }
    .circle-link { width: 45px; height: 45px; font-size: 20px; }
    .banner-section { margin: 35px 0; }
    .banner-section > div { padding: 17px; }
    .banner-section strong { font-size: 9px; }
    .page-title { padding: 35px 5% 40px; }
    .page-title h1 { font-size: 45px; letter-spacing: -2px; }
    .page-title p { font-size: 13px; }
    .page-ornament { font-size: 140px; opacity: .25; }
    .breadcrumb { font-size: 8px; letter-spacing: 1px; margin-bottom: 24px; }
    .article-section, .faq-section { display: block; padding: 35px 0; }
    .article-section h2, .faq-section h2 { font-size: 32px; }
    article p { font-size: 14px; }
    .faq-section > div > p { max-width: none; }
    .longread { margin: 40px 0; }
    .article-intro h2 { font-size: 31px; }
    .article-intro p { font-size: 13px; }
    table, tbody, tr, tbody th, td { display: block; width: 100%; }
    thead { display: none; }
    caption { display: block; padding: 17px; }
    tbody th { border-right: 0; padding: 20px 18px 15px; }
    tbody h3 { font-size: 22px; margin-top: 7px; }
    td { padding: 18px; border-top: 0; }
    td p { font-size: 13px; }
    .risk-note { gap: 15px; margin-bottom: 40px; }
    .risk-note h2 { font-size: 24px; }
    .risk-note > span { width: 30px; height: 30px; font-size: 20px; }
    .footer-top { display: block; }
    .footer-top p { margin: 20px 0; }
    .footer-links { grid-template-columns: 1fr; gap: 20px; }
    .footer-directory { grid-template-columns: 1fr 1fr; }
    .footer-bottom { display: block; }
    .footer-bottom > span { display: block; padding: 3px 0; }
    .utility-bar { gap: 15px; padding: 12px 5%; justify-content: space-between; }
    .utility-bar > span { display: none; }
    .utility-bar button, .utility-bar a { font-size: 9px; }
    .playpanel { padding: 20px 12px; margin: 35px 0; }
    .playpanel h2 { font-size: 30px; }
    .play-caption { font-size: 6px; letter-spacing: .5px; }
    .display { gap: 10px; }
    .display > span { padding: 10px 18px; font-size: 33px; }
    .display.memory { grid-template-columns: repeat(4, 52px); gap: 8px; }
    .memorycard { height: 66px; }
    .timer-panel { padding: 25px; }
    .timer-panel h2 { font-size: 31px; }
    .timer-panel .button { margin-top: 15px; }
    .directory { grid-template-columns: 1fr; padding: 25px 0; }
    .directory h2 { font-size: 24px; }
    dialog { margin: auto 20px; padding: 28px; }
}