/* screens.css: smaller screens and reduced motion (last, so these win) */
@media (max-width:1040px) {
  .site-nav .wrap { gap:10px; min-height:60px; }
  .site-nav .wrap > nav, .site-nav .wrap > .lang { display:none; }
  .site-nav .burger { display:block; }
  .site-nav .burger > nav { display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; z-index:30; padding:4px 16px 14px; background:#0a0a0c; border-bottom:1px solid var(--line); }
  .site-nav .burger > nav a { padding:13px 0; border-bottom:1px solid var(--line); color:var(--text); font-size:16px; text-decoration:none; }
  .site-nav .burger > nav .lang { align-self:flex-start; margin-top:14px; padding:4px 14px; border:1px solid #ffffff24; border-radius:999px; font-size:14px; }
}
@media (max-width:980px) {
  .arena-in { grid-template-columns:minmax(0,1fr); gap:48px; }
  .head { display:block; }
  .head .sub { margin-top:18px; }
  .panels { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel { height:420px; }
  .panel::after { background:linear-gradient(180deg, #0a0a0c00 12%, #0a0a0cd4 48%, #0a0a0c 100%); }
  .four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .four .t:nth-child(3) { padding-left:0; border-left:0; }
  .four .t:nth-child(n+3) { border-top:1px solid var(--line); }
  .tables-in { grid-template-columns:minmax(0,1fr); gap:44px; }
}
@media (max-width:760px) {
  .wrap { padding:0 16px; }
  .site-nav { position:relative; }
  .site-foot .wrap { grid-template-columns:minmax(0,1fr); }
  /* the stage on a phone: the two cards side by side, the pot under them */
  :root { --cardW:min(calc((100vw - 42px) / 2), 210px); --cardH:calc(var(--cardW) * 7 / 5); --tileH:60px; --tileW:56px; }
  .dt { padding-top:16px; }
  .dt-head h1 { font-size:36px; margin:4px 0 4px; }
  .dt-note { display:block; font-size:12.5px; line-height:1.5; }
  .dt-note .c-tag { margin-right:6px; font-size:10px; padding:0 5px; }
  .hud { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 22px; padding:10px 0 8px; }
  .h-mid { grid-column:1 / -1; grid-row:1; min-height:0; }
  .h-mid b { display:inline; font-size:20px; }
  #rnum::before, #rnum::after { width:14px; margin:0 7px; }
  .rban { padding:6px 0; }
  .rb-row { gap:10px; }
  .rb-row b { font-size:26px; }
  .rb-row i { flex-basis:46px; }
  .rban small { margin-top:3px; font-size:13px; }
  .sd { margin:0 0 0 8px; padding:1px 6px; font-size:9px; letter-spacing:.08em; vertical-align:2px; }
  /* each side: the name, its bar, then its HP under the bar on the outer side, so the two numbers never meet */
  .h-side { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
  .h-side.r { align-items:flex-end; }
  .h-top { display:contents; }
  .h-name { order:1; max-width:100%; font-size:min(17px,4.1vw); }
  .h-bar { order:2; align-self:stretch; height:7px; margin-top:6px; }
  .h-bar::before { right:-4px; width:7px; height:7px; margin-top:-3.5px; }
  .h-side.r .h-bar::before { right:auto; left:-4px; }
  .h-hp { order:3; margin-top:4px; font-size:10.5px; }
  .h-cls { display:none; }
  .camera { padding-bottom:0; }
  /* the stage on a phone: the move tiles above the cards, the cards side by side and never covered, the pot under them */
  .ring { grid-template-columns:var(--cardW) var(--cardW); justify-content:center; gap:10px; height:auto; margin-top:calc(var(--tileH) + 24px); }
  .fighter { height:var(--cardH); grid-row:1; }
  .f0 { grid-column:1; }
  .f1 { grid-column:2; }
  .f0 .cardbox { transform:perspective(900px) rotateY(6deg); }
  .f1 .cardbox { transform:perspective(900px) rotateY(-6deg); }
  .mid { grid-column:1 / -1; grid-row:2; position:static; height:196px; } /* one height from the start, with room for the result lines: the stage never changes size in the middle of the replay */
  .tiles { position:absolute; left:0; right:0; top:calc(-1 * (var(--tileH) + 16px)); gap:10px; z-index:3; }
  .vs { display:none; }
  .bans { position:absolute; left:0; right:0; top:calc(var(--cardH) + 9px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:150px; min-height:0; margin:0; }
  .ban { font-size:11px; }
  .ban:first-child { align-items:flex-start; }
  .ban:last-child { align-items:flex-end; }
  .tag { padding:0 0 3px; margin-right:-.12em; font-size:9.5px; letter-spacing:.12em; }
  .tag::after { right:.12em; }
  .tile .mv { font-size:9.5px; letter-spacing:.05em; }
  .tile .fc { gap:4px; }
  .tile .fc.down::before { inset:4px; }
  .potspot { top:calc(var(--cardH) + 78px); bottom:auto; }
  .potread { left:0; right:0; top:calc(var(--cardH) + 84px); bottom:auto; }
  .potread b { font-size:23px; }
  /* the result: its amount where the move tiles were, the lines under the bowl */
  .bigwin { left:0; right:0; top:calc(-1 * (var(--tileH) + 24px)); }
  .bw-tag { margin-bottom:4px; }
  .bw-num { font-size:clamp(40px,12.4vw,50px); }
  .bw-who { margin-top:calc(var(--cardH) + 92px); font-size:20px; }
  .bw-sub { font-size:12.5px; margin-top:3px; }
  .bw-act { margin-top:10px; }
  .pool { height:48px; }
  .float.stake { font-size:12px; }
  .pill { left:auto; right:6px; bottom:6px; font-size:10px; }
  .pill span, .pill i { display:none; }
  .pill a { padding:3px 8px; }
  .pill .fxb { padding:2px 8px; }
  /* the pot in the sky on a phone: each tile over its own card, the pot between them, the readout and the payout under the cards.
     .mid keeps one height all through, so the stage never changes size in the middle of the replay */
  .camera.sky { --tin:calc(var(--cardW) / 2 - var(--tileW) / 2); }
  .camera.sky .bans { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:150px; padding:0; }
  .camera.sky .mid { height:236px; }
  .camera.sky .potread { top:calc(var(--cardH) + 52px); left:0; right:0; flex-wrap:nowrap; }
  .camera.sky .potread b { font-size:23px; }
  .camera.sky .bigwin { top:calc(var(--cardH) + 30px); }
  .camera.sky .bw-who { margin-top:8px; }
}
@media (max-width:680px) {
  section { padding:76px 0; }
  .panels { grid-template-columns:minmax(0,1fr); }
  .panel { height:340px; }
  .how { padding:64px 0; }
  .trio { grid-template-columns:minmax(0,1fr); }
  .t { padding-right:0; }
  .t + .t { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .four { grid-template-columns:minmax(0,1fr); }
  .c-log { height:290px; font-size:11.5px; }
  .c-log li { grid-template-columns:28px minmax(0,1fr) 54px minmax(0,1fr); gap:8px; }
  .c-f { grid-template-columns:30px minmax(0,1fr) 78px; }
  .c-f .thumb { width:30px; }
  .c-foot { flex-wrap:wrap; }
  .board li { gap:10px; }
  .board .who small { white-space:normal; line-height:1.4; }
  .dt { padding-bottom:10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .c-hp i::after { transition:none; }
  .later { transition-duration:.2s; transition-delay:0s; }
}