@font-face { font-family: 'Cinzel'; src: url(/fonts/cinzel-var.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/fonts/manrope-var.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
/* the game's own room on the ODDWIN floor: OBSIDIAN palette and type from docs/IDENTITY.md */
  :root { --ob-gold: #D9A84E; --ob-gold-hi: #F6DDA0; --ob-gold-deep: #7A5420; --ob-ember: #FF6A1F; --ob-moon: #7FE3D6; --ob-ivory: #F3EBDD; --ob-muted: #9C9384; --ob-basalt: #111318; }
  /* the room */
  .room { position: relative; overflow: hidden; color: var(--ob-ivory); isolation: isolate; }
  .room::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url(/img/games/obs_bg.webp) center 35% / cover; filter: brightness(.42) saturate(.9); }
  .room::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 110%, #FF6A1F33, transparent 70%), linear-gradient(180deg, #07080B 0%, #07080B66 30%, #07080B99 75%, #07080B 100%); }
  .room .top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: clamp(40px, 7vh, 84px); padding-bottom: clamp(56px, 9vh, 110px); }
  .mark { container-type: inline-size; }
  .mark h1 { font: 700 min(13.4cqi, 13vh, 96px)/1.05 'Cinzel', serif; letter-spacing: .1em; margin-right: -.1em;
    background: linear-gradient(180deg, var(--ob-gold-hi) 0%, var(--ob-gold) 45%, var(--ob-gold-deep) 70%, var(--ob-gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 18px #FF6A1F2e); }
  .mark .sub { display: flex; align-items: center; gap: 14px; margin-top: 22px; font: 700 clamp(11px, 1vw, 14px) 'Manrope'; letter-spacing: .6em; color: var(--ob-gold-hi); }
  .mark .sub::before, .mark .sub::after { content: ''; height: 1px; flex: 1; max-width: 90px; background: linear-gradient(90deg, transparent, var(--ob-gold)); }
  .mark .sub::after { transform: scaleX(-1); }
  .line { font: 500 clamp(17px, 1.5vw, 20px)/1.5 'Manrope'; color: var(--ob-ivory); margin-top: clamp(20px, 4vh, 36px); max-width: 40ch; }
  .gems { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
  .gems span { font: 700 12px 'Manrope'; letter-spacing: .12em; padding: 7px 11px 7px 26px; border: 1px solid #ffffff1f; background: #111318cc; position: relative; }
  .gems span::before { content: ''; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); background: var(--g); }
  .player { position: relative; border: 1px solid #D9A84E66; box-shadow: 0 0 0 6px #07080B, 0 0 0 7px #D9A84E33, 0 30px 80px #000c; }
  .player video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
  .player .play-btn { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 12px; align-items: center; font: 700 13px 'Manrope'; letter-spacing: .2em; text-transform: uppercase; color: var(--floor); background: linear-gradient(180deg, var(--ob-gold-hi), var(--ob-gold)); padding: 13px 18px; }
  .player .play-btn i { border-left: 11px solid var(--floor); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
  .player .len { position: absolute; left: 0; top: calc(100% + 14px); font: 500 11px var(--mono); color: var(--ob-muted); letter-spacing: .06em; text-transform: uppercase; }
  .keeper { position: absolute; right: -2%; bottom: 0; height: 92%; max-height: 700px; z-index: -1; opacity: .38; filter: saturate(.8); pointer-events: none; }
  .vein { display: block; width: 100%; height: 22px; }

  .mech h3 { font: 700 22px/1.1 'Cinzel', serif; letter-spacing: .06em; color: var(--ob-gold-hi); }

  @media (max-width: 860px) { .room .top { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .keeper { height: 60%; opacity: .25; } }
  @media (max-width: 760px) { .mark .sub { letter-spacing: .4em; } }
  .gems span:nth-child(1) { --g: #38D39F; } .gems span:nth-child(2) { --g: #4C8DFF; } .gems span:nth-child(3) { --g: #A86BFF; } .gems span:nth-child(4) { --g: #FF3D5A; }