:root{color-scheme:dark;--oc-action:#c92a26;--oc-logo:'Anton','Impact','Arial Black',sans-serif;--oc-ui:'Barlow Condensed','Arial Narrow',Arial,sans-serif;--gold:#e5ca8f}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#121e1a;color:#fff;font-family:system-ui,-apple-system,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #fff0b9;outline-offset:5px}[hidden]{display:none!important}
.title-screen{min-height:100svh;display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden}.backdrop{position:absolute;inset:-30px;z-index:-2;background:linear-gradient(#111b19a8,#111b19e6),url('assets/accueil/salle-des-cartes.png') center/cover;filter:blur(22px)}
.title-scene{position:relative;isolation:isolate;width:min(100%,calc(100svh * 1672 / 941));aspect-ratio:1672/941;min-height:620px;max-width:1800px;overflow:hidden;background:#173039;box-shadow:0 0 70px #0009}
.room{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.title-scene::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,#09171005 20%,#09212622 35%,#081a23ae 52%,#081a23e8 100%)}
.title-content{position:absolute;left:10%;right:10%;bottom:7%;text-align:center;text-shadow:0 2px 14px #000b}.chapter{color:#f0d9a1;text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700;margin:0 0 10px}h1{margin:0;line-height:1}.brand{display:block;font-family:var(--oc-logo);font-weight:400;font-size:clamp(38px,5vw,78px);letter-spacing:.09em}.brand::after{content:'';display:block;background:var(--gold);height:3px;width:100px;margin:12px auto 14px}.game-title{display:block;color:#ffe0a0;font-family:var(--oc-ui);font-weight:700;font-size:clamp(24px,3.1vw,43px);letter-spacing:.06em;text-transform:uppercase}.promise{font-size:clamp(14px,1.5vw,18px);margin:16px 0 21px;color:#e9eeeb}.title-actions{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}.entry{min-height:48px;min-width:220px;display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:13px 23px;border-radius:7px;border:1px solid #d0c29a;text-decoration:none;font-weight:750;font-size:15px;text-shadow:none;box-shadow:0 4px 10px #0004}.primary{background:var(--gold);color:#20382c}.primary:hover{background:#f6dfae}.secondary{background:#182b2be6;color:#fff3d8}.secondary:hover{background:#284140}.library{flex-basis:100%;margin-top:5px;color:#e8dcbf;font-size:14px;text-underline-offset:5px;padding:4px}.access-note{font-size:11px;color:#d2dbd3;margin:16px 0 0}.title-footer{position:absolute;left:24px;right:24px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:10px;color:#e5dfcf;text-shadow:0 1px 5px #000}.replay{cursor:pointer;color:inherit;background:#142321dd;border:1px solid #afac9480;border-radius:5px;font-size:11px;padding:8px 12px;min-height:36px}.title-ready .title-content{animation:ocTitleIn .65s ease both}@keyframes ocTitleIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Splash OCTOGONE D-026 : tracé, couleurs et repères de l'original. */
.oc-splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 50%,#2a1710 0%,#0b0705 70%);color:#fff}.oc-splash .mark{position:relative;width:min(64vmin,540px);aspect-ratio:1;display:grid;place-items:center}.oc-splash svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.oc-splash .oct-ghost{fill:none;stroke:#ffffff1c;stroke-width:1.2}.oc-splash .oct-fill{fill:#f3d9a4;opacity:calc(var(--flash,0) * .35)}.oc-splash .oct{fill:none;stroke:var(--oc-action);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 calc(var(--glow,0) * 7px) #ff5a3c)}.oc-splash .word{position:relative;font-family:var(--oc-logo);font-size:min(10.5vmin,90px);letter-spacing:calc(.03em + var(--p,0) * .09em);opacity:calc(.1 + var(--p,0) * .9);transform:scale(calc(.9 + var(--p,0) * .1));text-shadow:0 0 calc(var(--glow,0) * 28px) #ff7a50,0 3px 12px #000}.oc-splash .presents{position:absolute;top:calc(50% + min(8.5vmin,74px));font-family:var(--oc-ui);font-weight:700;letter-spacing:.45em;text-transform:uppercase;font-size:min(3vmin,20px);color:#efd9b4;opacity:var(--pres,0)}.oc-splash .gate{position:absolute;bottom:12%;font-family:var(--oc-ui);font-weight:700;font-size:clamp(15px,2vmin,20px);letter-spacing:.06em;padding:.5em 1.2em;border:1px solid #ffffff70;border-radius:999px;background:#ffffff0d;color:#fff;cursor:pointer;min-height:44px}.oc-splash .oc-skip{position:absolute;right:max(3%,env(safe-area-inset-right));bottom:max(3%,env(safe-area-inset-bottom));font-family:var(--oc-ui);font-weight:700;font-size:18px;padding:.5em 1em;border:1px solid #ffffff60;border-radius:8px;background:#0006;color:#fff;cursor:pointer;min-height:44px}
body[data-ui="splash"]{overflow:hidden}body[data-ui="splash"] .title-screen{visibility:hidden}
@media(max-width:900px){.title-scene{min-height:100svh;aspect-ratio:auto;width:100%}.room{object-position:54% center}.title-scene::after{background:linear-gradient(to bottom,#09212600 20%,#081a2360 35%,#081a23f2 64%,#081a23 100%)}.title-content{left:7%;right:7%;bottom:11%}.brand{font-size:64px}.game-title{font-size:35px}.title-actions{flex-direction:column;gap:12px}.entry{width:min(100%,350px)}.library{flex-basis:auto;margin-top:6px}.title-footer{left:18px;right:18px}.access-note{margin-top:14px}}
@media(max-width:520px){.title-scene{min-height:max(100svh,690px)}.title-content{bottom:12%;left:6%;right:6%}.brand{font-size:49px}.game-title{font-size:29px}.chapter{font-size:11px}.promise{max-width:260px;margin:16px auto 20px;line-height:1.5}.title-footer{font-size:9px;gap:8px}.replay{font-size:10px;padding:8px}.room{object-position:54% 20%}.oc-splash .mark{width:80vmin}.oc-splash .word{font-size:12vmin}}
@media(min-width:901px) and (max-height:720px){.title-scene{min-height:100svh;aspect-ratio:auto;width:100%;height:100svh}.title-content{bottom:9%}.brand{font-size:43px}.game-title{font-size:28px}.chapter{margin-bottom:7px}.promise{margin:12px 0}.access-note{margin-top:8px}.title-scene::after{background:linear-gradient(to bottom,#09212600 8%,#081a2370 25%,#081a23dc 70%)}}
@media(prefers-reduced-motion:reduce){.title-ready .title-content{animation:none}}