/* Kiosk: a landscape screen in the venue, no scrolling, everything sized to the screen (vh/vw). Loaded after site.css. */
html, body { height:100%; overflow:hidden; }
body.idle, body.idle * { cursor:none; }
.kiosk { position:relative; height:100vh; max-width:none; padding:0; }
.slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility 0s .8s; }
.slide.is-on { opacity:1; visibility:visible; transition:opacity .8s ease; }
.kbar { position:absolute; left:0; right:0; bottom:0; height:.6vh; background:rgba(255,255,255,.08); z-index:5; }
/* The Escape This logo, top left on every slide, back to the home page (Hermes, thread 29182aaa50) */
.khome { position:absolute; top:1.6vh; left:1.6vw; z-index:6; line-height:0; }
.khome img { height:7vh; width:auto; filter:drop-shadow(0 .3vh 1vh rgba(0,0,0,.8)); }
.kbar i { display:block; height:100%; width:0; background:var(--red); }

/* Slide 1: every room as a tile, filling the screen */
.kgrid { display:flex; flex-direction:column; padding:2.4vh 2vw 3vh; gap:2vh; }
.kgrid header { padding-left:12vh; display:flex; justify-content:space-between; align-items:baseline; font:2.2vh/1 Inter, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.kgrid header b { color:var(--red); font-weight:800; }
.kgrid header span:first-child { color:var(--text); font-weight:600; }
.kgrid ul { flex:1; min-height:0; list-style:none; margin:0; padding:0; display:grid; gap:1.4vh;
  grid-template-columns:repeat(var(--cols), 1fr); grid-template-rows:repeat(var(--rows), 1fr); }
.kgrid li { position:relative; min-height:0; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:1vh; padding:2vh 1vw; border-radius:1.4vh; overflow:hidden;
  background:linear-gradient(180deg, rgba(7,8,12,.1) 25%, rgba(7,8,12,.92)), var(--art) center 40%/cover, var(--panel); border:1px solid var(--line); }
.kgrid li img { max-width:86%; max-height:38%; object-fit:contain; filter:drop-shadow(0 .3vh 1.2vh rgba(0,0,0,.85)); }
.kgrid li b { font:clamp(18px, 4.4vh, 64px)/1.05 Anton, sans-serif; text-align:center; text-transform:uppercase; }
.kgrid .lead { font-size:1.8vh; }
.kgrid li.has-sq { justify-content:start; padding:0 0 1.2vh; background:var(--panel); }
.kgrid li.has-sq img.sq { flex:1; min-height:0; width:100%; max-width:none; max-height:none; object-fit:contain; filter:none; } /* the whole picture: the logo is in it */
.kgrid .lead em { font-size:4.6vh; }

/* Room slides: the room page at 1400 px wide, scaled to the screen by the page script (fit()) */
.kroom { background:var(--bg); }
.kfit { position:absolute; top:0; left:50%; width:1400px; transform:translateX(-50%); transform-origin:top center; }
.kfit .room { max-width:none; padding-bottom:36px; }
.kfit .hero { padding-top:28px; }
.kfit main { padding-bottom:40px; }
.kfit h1 img.sq-hero { width:340px; }
.kfit .kicker { margin-bottom:20px; font:normal 44px/1.05 Anton, sans-serif; letter-spacing:.06em; color:var(--text); } /* the venue title, readable across the room, in the World Stats type (Bernie, thread ab66bc6904) */
.kfit .kperiod { margin:-6px 0 22px; font:600 26px Inter, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } /* under the venue title, like World Stats' line */
.kroom .none { font:40px/1.2 Anton, sans-serif; color:var(--text); }

/* World stats: the room across every venue that runs it, filling the screen below the room page */
.kworld { position:absolute; left:0; right:0; bottom:.6vh; display:flex; flex-direction:column; justify-content:center; gap:1.2vh; padding:1.2vh 4vw; overflow:hidden;
  background:linear-gradient(180deg, rgba(208,37,37,.16), rgba(16,19,27,.96) 40%); border-top:2px solid var(--red); }
.kworld h3 { margin:0; display:flex; align-items:baseline; justify-content:center; gap:1.4vw; font:600 1.8vh Inter, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.kworld h3 b { font:normal 3vh/1 Anton, sans-serif; letter-spacing:.06em; color:var(--text); }
.kworld dl { margin:0; display:flex; justify-content:center; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:1vh; overflow:hidden; }
.kworld dl div { flex:1; display:flex; flex-direction:column; justify-content:flex-start; background:var(--panel); padding:1vh 1vw; text-align:center; } /* titles and values on one line across the tiles */
.kworld dt { white-space:nowrap; font-size:1.4vh; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kworld dd { margin:.3vh 0 0; font:3.8vh/1.05 Anton, sans-serif; }
.kworld dd small { display:block; margin-top:.2vh; font:600 1.5vh Inter, sans-serif; color:var(--muted); }
.kworld .rec dd { color:var(--gold); }

/* Last slide: the rules, styled like the boards (Anton, podium colours, the venue's artwork behind). Sized by the
   smaller of the screen's height and width (--u), so it fits any window; the cards stack on a narrow or portrait one. */
.krules { --u:min(1vh, .56vw); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:calc(4 * var(--u)); padding:calc(6 * var(--u)) 5vw calc(8 * var(--u)); text-align:center; isolation:isolate; overflow:hidden; }
.krules::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--art) center 40%/cover no-repeat; filter:blur(4px) saturate(1.1); transform:scale(1.03); }
.krules::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 50% 30%, rgba(7,8,12,.72), rgba(7,8,12,.95)); }
.krules .kicker { margin:0; font-size:max(11px, calc(1.9 * var(--u))); }
.krules h2 { margin:0; font:calc(10 * var(--u))/1 Anton, sans-serif; text-transform:uppercase; letter-spacing:.01em; text-shadow:0 0 4vh rgba(0,0,0,.8); }
.krules ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(3 * var(--u)); width:100%; max-width:calc(160 * var(--u)); }
.krules li { --c:var(--gold); position:relative; padding:calc(5 * var(--u)) calc(3 * var(--u)) calc(3.6 * var(--u)); border:max(2px, calc(.4 * var(--u))) solid var(--c); border-radius:calc(1.6 * var(--u)); background:rgba(16,19,27,.9);
  box-shadow:0 2vh 5vh -2vh color-mix(in srgb, var(--c) 45%, transparent); }
.krules .r2 { --c:var(--silver); } .krules .r3 { --c:var(--bronze); }
.krules .medal { position:absolute; left:50%; top:-1px; translate:-50% 0; width:calc(6 * var(--u)); aspect-ratio:1; display:grid; place-items:center; border-radius:0 0 50% 50%;
  background:var(--c); color:#14110a; font:calc(3.6 * var(--u))/1 Anton, sans-serif; }
.krules li b { display:block; margin-top:calc(2 * var(--u)); white-space:nowrap; font:calc(4.3 * var(--u))/1.05 Anton, sans-serif; text-transform:uppercase; color:var(--c); }
.krules li p { margin:calc(1.6 * var(--u)) 0 0; font-size:max(12px, calc(2.3 * var(--u))); line-height:1.45; color:#d6dbe8; }
.krules .kbook { margin:0; font-size:max(12px, calc(2.4 * var(--u))); color:var(--muted); }
.krules .kbook b { color:var(--text); }
@media (max-aspect-ratio:4/3) {
  .krules { --u:min(.8vh, 1vw); gap:calc(3 * var(--u)); }
  .krules h2 { font-size:calc(9 * var(--u)); }
  .krules ol { grid-template-columns:1fr; max-width:calc(90 * var(--u)); gap:calc(4 * var(--u)); }
  .krules li { padding-top:calc(6 * var(--u)); }
  .krules li b { font-size:calc(5 * var(--u)); }
  .krules li p { font-size:max(13px, calc(2.8 * var(--u))); }
}
.kicker a { color:inherit; text-decoration:none; }
.kicker a:hover, .kicker a:focus-visible { text-decoration:underline; }

/* Portrait (the venue screens are 1080 × 1920): tiles in the portrait grid, world stats as two rows of two */
@media (orientation:portrait) {
  .kgrid ul { grid-template-columns:repeat(var(--pcols), 1fr); grid-template-rows:repeat(var(--prows), 1fr); }
  .kgrid header { padding:5vh 0 0; flex-direction:column; align-items:center; gap:1vh; font-size:1.6vh; }
  .khome img { height:4.4vh; }
  .kgrid li img { max-height:30%; }
  .kgrid li b { font-size:clamp(18px, 3.4vh, 64px); }
  .kworld { padding:1.4vh 5vw 1.6vh; gap:1.2vh; }
  .kworld h3 { flex-direction:column; align-items:center; gap:.6vh; font-size:1.5vh; }
  .kworld h3 b { font-size:2.8vh; }
  .kworld dl { flex-wrap:wrap; }
  .kworld dl div { flex:1 1 calc(50% - 1px); padding:1vh 1vw; }
  .kworld dt { font-size:1.3vh; }
  .kworld dd { font-size:3.6vh; }
}