@font-face { font-family: 'Bangers'; src: url(/fonts/bangers.woff2) format('woff2'); font-display: swap; }
/* the game's own room on the ODDWIN floor: PAGE BREAKER palette from docs/GDD.md */
  :root { --pb-red: #C8102E; --pb-ink: #141414; --pb-paper: #F2E6CC; --pb-yellow: #FFD23F; }
  /* the room: the page takes the game's identity */
  .room { background: var(--pb-paper); color: var(--pb-ink); position: relative; overflow: hidden;
    background-image: radial-gradient(#1414141f 1px, transparent 1.2px); background-size: 7px 7px; }
  .room .top { display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; padding-top: clamp(28px, 5vh, 56px); padding-bottom: 64px; align-items: center; }
  .room h1 { font: 400 clamp(64px, min(10vw, 17vh), 128px)/.85 'Bangers', sans-serif; color: var(--pb-red); letter-spacing: .01em;
    text-shadow: 5px 5px 0 var(--pb-ink); -webkit-text-stroke: 3px var(--pb-ink); }
  .bubble { position: relative; background: #fff; border: 3px solid var(--pb-ink); border-radius: 26px; padding: 16px 20px; font: 500 clamp(16px, 1.4vw, 19px)/1.4 var(--text); max-width: 440px; margin-top: clamp(18px, 3.5vh, 30px); box-shadow: 6px 6px 0 var(--pb-ink); }
  .bubble::after { content: ''; position: absolute; left: 46px; bottom: -22px; border: 11px solid transparent; border-top: 14px solid var(--pb-ink); }
  .fight { margin-top: 22px; max-width: 46ch; font-size: 16px; }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
  .tags span { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; border: 2px solid var(--pb-ink); padding: 6px 10px; background: var(--pb-yellow); }
  .player { position: relative; border: 4px solid var(--pb-ink); box-shadow: 10px 10px 0 var(--pb-ink); transform: rotate(.6deg); background: var(--pb-ink); }
  .player video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
  .player .play-btn { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 12px; background: var(--pb-red); color: #fff; border: 3px solid var(--pb-ink); padding: 12px 18px; font: 400 26px 'Bangers'; letter-spacing: .04em; box-shadow: 4px 4px 0 var(--pb-ink); }
  .player .play-btn i { width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
  .player .len { position: absolute; left: 0; top: calc(100% + 16px); font: 500 11px var(--mono); color: #141414aa; letter-spacing: .06em; text-transform: uppercase; }
  .rip { position: absolute; right: 2%; top: 4px; height: 300px; pointer-events: none; filter: drop-shadow(6px 6px 0 #14141455); }
  .tear { height: 26px; background: var(--floor); clip-path: polygon(0 100%, 0 40%, 3% 70%, 6% 30%, 9% 64%, 13% 20%, 16% 58%, 20% 36%, 24% 72%, 27% 26%, 31% 60%, 35% 32%, 38% 68%, 42% 22%, 46% 62%, 50% 34%, 53% 70%, 57% 28%, 61% 58%, 64% 24%, 68% 66%, 72% 38%, 75% 72%, 79% 30%, 83% 62%, 86% 26%, 90% 60%, 94% 36%, 97% 66%, 100% 30%, 100% 100%); }

  .mech h3 { font-size: 22px; font-stretch: 112%; }
  .crumb { padding-bottom: 18px; }

  @media (max-width: 860px) { .room .top { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .rip { height: 200px; } }
  @media (max-width: 760px) {
    .room .top { gap: 30px; padding-top: 30px; } .room h1 { font-size: 76px; -webkit-text-stroke: 2px var(--pb-ink); text-shadow: 3px 3px 0 var(--pb-ink); }
    .rip { height: 170px; top: 40px; right: -10px; }
  }