/* =============================================================================
   style.css – look of "Mark My Words! – A ReMARKable Quiz"
   -----------------------------------------------------------------------------
   Unit system: all sizes use var(--pt) = one point of the original Illustrator
   slides (1280 × 1024 pt). The stage is treated as a 1600 × 900 pt canvas (16:9),
   scaled to fit the browser window, so the quiz looks the same on the TV
   (1920 × 1080), on a MacBook (16:10) and in any window size – without scrolling.
   ============================================================================= */

/* --- Design tokens (exact colours from the slides) -------------------------- */
:root {
  --pt: min(calc(100vw / 1600), calc(100vh / 900));
  --red: #D9646A;
  --yellow: #F9B226;
  --blue: #8FB9E4;
  --green: #93C460;
  --title-red: #D2435D;
  --line: calc(var(--pt) * 2.1);                         /* black outline of every shape */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-light: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --xp-font: Tahoma, Verdana, "Segoe UI", sans-serif;     /* Windows XP dialogs */
}

/* --- Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;            /* TV presentation: never scroll */
  overscroll-behavior: none;   /* a two-finger trackpad swipe must not trigger "browser back" */
  background: #fff;
  color: #000;
  font-family: var(--font);
}
body {
  -webkit-user-select: none;   /* no accidental text selection while clicking fast */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
img { -webkit-user-drag: none; }
button { font: inherit; color: inherit; }
button:focus { outline: none; }
button:focus-visible { outline: calc(var(--pt) * 3) dashed #000; outline-offset: calc(var(--pt) * 3); }

/* Colour helpers used by the board and question screens */
.c-red { background: var(--red); }
.c-yellow { background: var(--yellow); }
.c-blue { background: var(--blue); }
.c-green { background: var(--green); }

/* =============================================================================
   STAGE + PHOTO COLLAGE
   Left/right photos are anchored to their screen edge, the bottom strip is
   centred and spread with the window width (positions measured from the PDF).
   ============================================================================= */
.stage { position: fixed; inset: 0; overflow: hidden; }

.collage { position: absolute; inset: 0; z-index: 1; }
.collage .r {
  position: absolute;
  height: auto;
  cursor: pointer;              /* photos react to clicks (wobble + sound) */
}
/* top row + side columns */
.r00 { left: calc(var(--pt) * -5.4);   top: calc(var(--pt) * 25.1);  width: calc(var(--pt) * 307.5); }
.r01 { right: calc(var(--pt) * -16.3); top: calc(var(--pt) * 10.7);  width: calc(var(--pt) * 393.0); }
.r02 { left: calc(var(--pt) * -4.9);   top: calc(var(--pt) * 307);   width: calc(var(--pt) * 170.1); }
.r03 { left: calc(var(--pt) * 0.5);    bottom: calc(var(--pt) * 161); width: calc(var(--pt) * 104.7); }
.r04 { right: calc(var(--pt) * -8.9);  top: calc(var(--pt) * 193);   width: calc(var(--pt) * 176.6); }
.r06 { right: calc(var(--pt) * -95.9); bottom: calc(var(--pt) * -21); width: calc(var(--pt) * 265.0); }
.r07 { right: calc(var(--pt) * -4.5);  bottom: calc(var(--pt) * -108.4); width: calc(var(--pt) * 219.6); }
.r08 { left: calc(var(--pt) * -56.2);  bottom: calc(var(--pt) * 5.2); width: calc(var(--pt) * 296.6); }
/* bottom strip: x offset from the screen centre, spread a little with the window width */
.r09 { left: calc(50% + (164.3 - 640) * 100vw / 1280 * 0.9); bottom: calc(var(--pt) * 0.5);   width: calc(var(--pt) * 241.3); }
.r10 { left: calc(50% + (337.4 - 640) * 100vw / 1280 * 0.9); bottom: calc(var(--pt) * -49.7); width: calc(var(--pt) * 215.1); }
.r05 { left: calc(50% + (948.3 - 640) * 100vw / 1280 * 0.9); bottom: calc(var(--pt) * -11.1); width: calc(var(--pt) * 175.9); }
.pair {
  position: absolute; bottom: 0;
  left: calc(50% + (530.4 - 640) * 100vw / 1280 * 0.9);
  width: calc(var(--pt) * 437.2); height: calc(var(--pt) * 266.4);
  pointer-events: none;         /* only the photos themselves are clickable */
}
.pair .r { pointer-events: auto; }
.r11 { left: 0; bottom: calc(var(--pt) * -70.4); width: calc(var(--pt) * 394.1); }
.r12 { left: calc(var(--pt) * 202.6); bottom: calc(var(--pt) * -91); width: calc(var(--pt) * 234.6); }

/* =============================================================================
   CENTRE COLUMN: title + screens
   ============================================================================= */
.content {
  position: absolute; z-index: 2;
  left: 50%; top: calc(50% - var(--pt) * 380);   /* 70 pt from the top on a 16:9 screen */
  width: calc(var(--pt) * 1050.8);
  transform: translateX(-50%);
  pointer-events: none;          /* empty areas let clicks through to the photos */
}
.title {
  display: block;
  width: calc(var(--pt) * 664.5);
  height: auto;
  margin: 0 auto calc(var(--pt) * 45);
}

/* Only the active screen is visible (body[data-screen] is set by quiz.js).
   Hard cut like a slide change – no fade, so nothing can ever hang half-transparent. */
.screen { display: none; }
body[data-screen="board"] .screen-board,
body[data-screen="question"] .screen-question,
body[data-screen="bonus"] .screen-bonus,
body[data-screen="birthday"] .screen-birthday { display: block; }

/* =============================================================================
   BOARD (front_page): exact positions from the slides
   ============================================================================= */
.screen-board { position: relative; height: calc(var(--pt) * 453); }

.cat-label, .tile {
  position: absolute;
  border: var(--line) solid #000;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.cat-label {
  left: 0;
  width: calc(var(--pt) * 388.1); height: calc(var(--pt) * 74.7);
  border-radius: calc(var(--pt) * 9.5);
  font: 300 calc(var(--pt) * 40)/1.15 var(--font-light);
}
/* the long first category: smaller regular font, left aligned, two lines (as in the design) */
.cat-label.small {
  justify-content: flex-start; text-align: left;
  padding-left: calc(var(--pt) * 9.7);
  font: 400 calc(var(--pt) * 27)/1.2 var(--font);
}
.tile {
  width: calc(var(--pt) * 113.4); height: calc(var(--pt) * 74.4);
  border-radius: calc(var(--pt) * 31);
  font: 300 calc(var(--pt) * 43)/1 var(--font-light);
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .12s ease-out, filter .12s;
}
.tile:hover { transform: scale(1.07); filter: brightness(1.05); }
.tile:active { transform: scale(0.97); }
.tile.done { visibility: hidden; pointer-events: none; }   /* played tile = gone, others stay in place */

/* =============================================================================
   QUESTION SCREEN (Question_for_100 / right_answer)
   ============================================================================= */
.screen-question {
  position: relative;
  display: none;
  flex-direction: column; align-items: center;
}
body[data-screen="question"] .screen-question { display: flex; }

.bar {
  border: var(--line) solid #000;
  border-radius: calc(var(--pt) * 9);
  max-width: calc(var(--pt) * 1050);
}
.q-cat {
  font: 400 calc(var(--pt) * 27)/1.2 var(--font);
  padding: calc(var(--pt) * 7.5) calc(var(--pt) * 16);
}
.q-text {
  margin-top: calc(var(--pt) * 19.5);
  font: 400 calc(var(--pt) * 35)/1.2 var(--font);
  padding: calc(var(--pt) * 9) calc(var(--pt) * 15.5);
  text-align: center;
}
.q-text.long { font-size: calc(var(--pt) * 31); }

.q-body {
  margin-top: calc(var(--pt) * 44);
  width: calc(var(--pt) * 1000);
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--pt) * 40);
}

/* 2 × 2 answers like the design: A,B left column – C,D right column */
.answers {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  column-gap: calc(var(--pt) * 22.8);
  row-gap: calc(var(--pt) * 28.6);
}
.answer {
  display: flex; align-items: center;
  gap: calc(var(--pt) * 11.7);
  margin: 0; padding: 0; border: 0; background: none;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}
.answer .letter {
  flex: none;
  width: calc(var(--pt) * 68.3); height: calc(var(--pt) * 62.2);
  border: var(--line) solid #000; border-radius: 50%;
  display: grid; place-items: center;
  font: 400 calc(var(--pt) * 50)/1 var(--font);
}
.answer .atext {
  flex: 1; align-self: stretch;
  display: flex; align-items: center;
  min-height: calc(var(--pt) * 52.3);
  border: var(--line) solid #000; border-radius: calc(var(--pt) * 9);
  padding: calc(var(--pt) * 4) calc(var(--pt) * 18);
  font: 400 calc(var(--pt) * 35)/1.15 var(--font);
  transition: filter .12s;
}
.answers.long .answer .atext { font-size: calc(var(--pt) * 30); }
.answer:hover .atext, .answer:hover .letter { filter: brightness(1.07); }
.answer.gone { visibility: hidden; pointer-events: none; }      /* exploded / not the right one */
.answer.fade-out { opacity: 0; transition: opacity .35s ease-in; pointer-events: none; }
.answer.correct { cursor: default; animation: correct-pulse .9s ease-in-out 3; }
@keyframes correct-pulse { 50% { transform: scale(1.04); } }

/* photo questions (Alan: photo big and further left, may cover the collage photos):
   two columns – the photo fills the left column from top to bottom, category bar,
   question and the stacked answers sit in the right column */
body[data-screen="question"] .screen-question.has-photo {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: calc(var(--pt) * 40);
  align-items: start;
  width: calc(var(--pt) * 1235);
  margin-left: calc(var(--pt) * -185);   /* reaches out over the left photo column */
}
.has-photo .q-photo { grid-column: 1; grid-row: 1 / span 3; }
.has-photo .q-cat, .has-photo .q-text { grid-column: 2; justify-self: center; max-width: 100%; }
.has-photo .q-body { grid-column: 2; width: auto; margin-top: calc(var(--pt) * 30); }
.has-photo .answers {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  grid-auto-flow: row;
  row-gap: calc(var(--pt) * 16);
}

/* =============================================================================
   FAKE WINDOWS XP WINDOWS (photo viewer, dial-up, reset dialog)
   Pure CSS look-alike, no Microsoft graphics.
   ============================================================================= */
.xp-window {
  margin: 0;
  background: #ece9d8;
  border: calc(var(--pt) * 2) solid #0831d9;
  border-radius: calc(var(--pt) * 8) calc(var(--pt) * 8) 0 0;
  box-shadow: calc(var(--pt) * 6) calc(var(--pt) * 6) 0 rgba(0, 0, 0, .25);
  font-family: var(--xp-font);
}
.xp-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--pt) * 30);
  padding: 0 calc(var(--pt) * 6) 0 calc(var(--pt) * 9);
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 9%, #0050ee 18%, #0066ff 50%, #0050ee 85%, #0042cc 100%);
  border-radius: calc(var(--pt) * 6) calc(var(--pt) * 6) 0 0;
  color: #fff;
  font: 700 calc(var(--pt) * 15)/1 var(--xp-font);
  text-shadow: calc(var(--pt) * 1) calc(var(--pt) * 1) 0 #0a1e6e;
}
.xp-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-buttons { display: flex; gap: calc(var(--pt) * 3); flex: none; }
.xp-buttons i {
  width: calc(var(--pt) * 22); height: calc(var(--pt) * 22);
  display: grid; place-items: center;
  font: 700 calc(var(--pt) * 13)/1 var(--xp-font); font-style: normal;
  color: #fff; text-shadow: none;
  background: linear-gradient(180deg, #3c8cff, #0f5fe0);
  border: calc(var(--pt) * 1.5) solid #fff; border-radius: calc(var(--pt) * 4);
}
.xp-buttons .xp-close { background: linear-gradient(180deg, #e9785a, #c43a1a); }

/* photo viewer inside a question */
.q-photo { flex: none; pointer-events: auto; cursor: zoom-in; }
.q-photo img {
  display: block;
  height: calc(var(--pt) * 600); width: auto; max-width: calc(var(--pt) * 520);
  object-fit: contain;
  margin: calc(var(--pt) * 4);
  background: #000;
}
.q-photo.revealed img { animation: photo-reveal .5s steps(5); }
@keyframes photo-reveal { 0% { filter: brightness(3) saturate(0); } 100% { filter: none; } }

/* =============================================================================
   BONUS + BIRTHDAY: big words in the title style (coloured letters, black outline)
   ============================================================================= */
.screen-bonus, .screen-birthday { position: relative; height: calc(var(--pt) * 453); }
.big-words {
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  width: max-content; max-width: calc(var(--pt) * 1300);
  text-align: center;
  font: 800 calc(var(--pt) * 112)/1.05 var(--font);
  letter-spacing: calc(var(--pt) * 2);
  -webkit-text-stroke: calc(var(--pt) * 3) #000;
  paint-order: stroke fill;
}
.big-words .w-line { display: block; white-space: nowrap; }
.big-words .l-red { color: var(--title-red); }
.big-words .l-yellow { color: var(--yellow); }
.big-words .l-blue { color: var(--blue); }
.big-words .l-green { color: var(--green); }
.big-words .l-black { color: #000; }
.big-words .w-line > span { display: inline-block; animation: letter-bounce 1.2s steps(4) infinite; }
@keyframes letter-bounce { 50% { transform: translateY(calc(var(--pt) * -10)) rotate(-3deg); } }
.screen-birthday .big-words { font-size: calc(var(--pt) * 104); }

/* Bonus screen: "BONUS QUESTION" on one line at the top (flames, police lights and heads
   follow it), the question + 2×2 answers below – leaving room for the orbiting heads */
body[data-screen="bonus"] .screen-bonus { display: flex; }
.screen-bonus { flex-direction: column; align-items: center; height: auto; }
.screen-bonus .big-words {
  position: relative; left: auto; top: auto; transform: none;
  font-size: calc(var(--pt) * 84);
  padding-bottom: calc(var(--pt) * 42);   /* the flames burn below the letters, not over them */
}
.bonus-q { margin-top: calc(var(--pt) * 105); }
.bonus-answers { flex: none; margin-top: calc(var(--pt) * 36); width: calc(var(--pt) * 1000); }

/* =============================================================================
   SMALL CONTROLS
   ============================================================================= */
.toolbar {
  position: fixed; z-index: 50;
  top: calc(var(--pt) * 10); right: calc(var(--pt) * 10);
  display: flex; gap: calc(var(--pt) * 8);
}
.tool {
  padding: calc(var(--pt) * 5) calc(var(--pt) * 10);
  border: calc(var(--pt) * 1.5) solid #000; border-radius: calc(var(--pt) * 999);
  background: rgba(255, 255, 255, .85);
  font: 500 calc(var(--pt) * 13)/1 var(--font);
  cursor: pointer;
  opacity: .35;                       /* small and discreet, as requested */
  transition: opacity .15s;
}
.tool:hover, .tool:focus-visible { opacity: 1; }
/* The end (black DVD screensaver): Reset + Fullscreen stay reachable on top of it
   (Alan: restart the game from there), a bit more visible on black */
body.finale .toolbar { z-index: 9100; }
body.finale .tool { opacity: .7; }
body.finale #reset-dialog { z-index: 9200; }
.back {
  position: fixed; z-index: 50;
  top: calc(var(--pt) * 10); left: calc(var(--pt) * 10);
  display: none;
}
body[data-screen="question"]:not(.revealed) .back { display: block; }

.continue-hint {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(var(--pt) * 14);
  transform: translateX(-50%);
  padding: calc(var(--pt) * 6) calc(var(--pt) * 16);
  background: #000; color: #fff;
  border-radius: calc(var(--pt) * 999);
  font: 700 calc(var(--pt) * 16)/1 var(--xp-font);
  pointer-events: none;
  animation: hint-blink 1.1s steps(1) infinite;
}
@keyframes hint-blink { 50% { opacity: .35; } }

/* =============================================================================
   OVERLAYS: dial-up / reset dialog / photo lightbox
   ============================================================================= */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
}
#reset-dialog { background: rgba(0, 0, 0, .18); }
/* dial-up overlay: only the window catches clicks, so "Fullscreen" stays usable before starting */
#connect { pointer-events: none; }
#connect .xp-window { pointer-events: auto; }

.xp-dialog { width: calc(var(--pt) * 520); max-width: 94vw; }
.xp-body { padding: calc(var(--pt) * 16) calc(var(--pt) * 18); font: 400 calc(var(--pt) * 16)/1.35 var(--xp-font); }
.xp-actions {
  display: flex; justify-content: flex-end; gap: calc(var(--pt) * 8);
  padding: 0 calc(var(--pt) * 18) calc(var(--pt) * 16);
}
.xp-button {
  min-width: calc(var(--pt) * 92);
  padding: calc(var(--pt) * 5) calc(var(--pt) * 12);
  font: 400 calc(var(--pt) * 15)/1.2 var(--xp-font);
  background: linear-gradient(180deg, #fff, #ecebe6 85%, #d6d0c5);
  border: calc(var(--pt) * 1.5) solid #003c74; border-radius: calc(var(--pt) * 4);
  cursor: pointer;
}
.xp-button:hover:not(:disabled) { box-shadow: inset 0 0 0 calc(var(--pt) * 2) #f8b636; }
.xp-button:disabled { color: #a0a0a0; border-color: #c9c7ba; cursor: default; }
.xp-button.xp-default { box-shadow: inset 0 0 0 calc(var(--pt) * 2) #98b8f8; }

/* dial-up window */
.connect-window { width: calc(var(--pt) * 560); }
.connect-banner {
  display: flex; align-items: center; gap: calc(var(--pt) * 12);
  margin: calc(var(--pt) * -16) calc(var(--pt) * -18) calc(var(--pt) * 14);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 18);
  background: linear-gradient(90deg, #f9b226, #d9646a 55%, #8fb9e4);
  color: #000; border-bottom: calc(var(--pt) * 1.5) solid #8a8a8a;
}
.connect-icon { width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); image-rendering: pixelated; }
.connect-headline { font: 700 calc(var(--pt) * 19)/1.2 var(--xp-font); }
.connect-sub { font: 400 calc(var(--pt) * 13)/1.2 var(--xp-font); }
.xp-field { display: flex; align-items: center; gap: calc(var(--pt) * 10); margin: calc(var(--pt) * 8) 0; }
.xp-field > span:first-child { width: calc(var(--pt) * 92); }
.xp-input {
  flex: 1; padding: calc(var(--pt) * 4) calc(var(--pt) * 6);
  background: #fff; border: calc(var(--pt) * 1.5) solid #7f9db9;
}
.xp-check { display: flex; align-items: center; gap: calc(var(--pt) * 8); margin: calc(var(--pt) * 6) 0 calc(var(--pt) * 6) calc(var(--pt) * 102); }
.xp-box {
  width: calc(var(--pt) * 15); height: calc(var(--pt) * 15);
  display: grid; place-items: center;
  background: #fff; border: calc(var(--pt) * 1.5) solid #1c5180;
  font: 700 calc(var(--pt) * 12)/1 var(--xp-font); color: #21a121;
}
.connect-form .xp-actions { padding: calc(var(--pt) * 10) 0 0; }
.connect-window.shake { animation: window-shake .4s steps(6); }
@keyframes window-shake { 25% { transform: translateX(calc(var(--pt) * -12)); } 50% { transform: translateX(calc(var(--pt) * 12)); } 75% { transform: translateX(calc(var(--pt) * -6)); } }

/* loading bar (segmented green blocks like Windows XP) */
.loading-title { font: 700 calc(var(--pt) * 18)/1.3 var(--xp-font); margin-bottom: calc(var(--pt) * 12); }
.xp-progress {
  height: calc(var(--pt) * 24);
  padding: calc(var(--pt) * 2);
  background: #fff;
  border: calc(var(--pt) * 1.5) solid #686868; border-radius: calc(var(--pt) * 3);
}
.xp-progress-fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg,
    #2fb32f 0, #2fb32f calc(var(--pt) * 10), transparent calc(var(--pt) * 10), transparent calc(var(--pt) * 12));
  transition: width .25s steps(3);
}
.loading-status {
  display: flex; justify-content: space-between; gap: calc(var(--pt) * 12);
  margin-top: calc(var(--pt) * 10);
  font: 400 calc(var(--pt) * 15)/1.3 var(--xp-font);
}

/* reset dialog */
.xp-error { display: flex; align-items: center; gap: calc(var(--pt) * 16); }
.xp-error p { margin: 0; }
.xp-error-icon {
  flex: none;
  width: calc(var(--pt) * 40); height: calc(var(--pt) * 40);
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8b7a, #e0261b 55%, #9c0d06);
  color: #fff; font: 700 calc(var(--pt) * 22)/1 var(--xp-font);
  border: calc(var(--pt) * 1.5) solid #7d0a05;
}

/* photo lightbox */
.lightbox { background: rgba(0, 0, 0, .85); cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; box-shadow: 0 0 0 calc(var(--pt) * 4) #fff; }

.noscript { position: fixed; inset: auto 0 0 0; z-index: 200; margin: 0; padding: 12px; background: #000; color: #fff; text-align: center; }