/* =============================================================
   style.css — the screens.

   theme.css owns the palette, the buttons and the panels. This file
   only arranges them. Every colour here is a var(--pw-*): if you want
   a different look, change theme.css, not this.

   THE SIZE RULE (see SIZING.md): everything below is written as if the
   phone were exactly 320px tall and ~720px wide. shell.js scales that
   to the real device. So:
     - plain px everywhere
     - NO vh/vw/svh/dvh inside a screen: they measure the real phone and
       escape the scale, which makes them wrong on every device but yours
     - nothing taller than 320
     - minimum tap target 46x46
   ============================================================= */

/* =============================================================
   1. THE STAGE  —  shell.js keeps --s correct. Not design; don't edit.
   ============================================================= */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* the PAGE never scrolls; boxes inside may */
  background: var(--pw-bg);
  overscroll-behavior: none;     /* no pull-to-refresh mid-question */
  -webkit-tap-highlight-color: transparent;
}

body {
  touch-action: manipulation;    /* no double-tap zoom */
  /* A quiz's own backdrop, set by applyTheme from the pack. It sits behind
     the scaled stage, so it fills the phone rather than the design canvas. */
  background-image: var(--pw-bg-image, none);
  background-size: cover;
  background-position: center;
  font-family: var(--pw-font-body);
  color: var(--pw-text);
}

#shell {
  position: fixed;
  inset: 0;
  /* In landscape the notch is on one SIDE and the home bar along the bottom.
     Padding here means shell.js measures a box with them already removed, so
     safe-area maths exists in exactly one place. */
  padding:
    env(safe-area-inset-top)    env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

#stage {
  height: 320px;                        /* the design height, literally */
  width: var(--stage-w, 720px);         /* what this phone gave us */
  transform: scale(var(--s, 1));
  transform-origin: top left;
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--pw-bg) 40%, var(--pw-bg-deep) 100%);
}

/* =============================================================
   2. SCREENS  —  one visible at a time, swapped by app.js
   ============================================================= */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  padding: 12px 18px;
  box-sizing: border-box;
}
.screen.is-active { display: block; }

/* Most screens are a single centred column. Those that aren't override it. */
.screen > * { height: 100%; }

/* A content box that might outgrow its slot scrolls INSIDE itself.
   The page must never scroll. */
.scrolls { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* =============================================================
   3. SHARED BITS
   ============================================================= */
.field {
  font-family: var(--pw-font-bold);
  font-size: 20px;
  color: var(--pw-text);
  background: var(--pw-well);
  border: 2px solid var(--pw-edge);
  border-radius: 12px;
  padding: 10px 14px;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  outline: none;
}
.field:focus { border-color: var(--pw-accent); }
.field::placeholder { color: var(--pw-text-off); }

.field--code, .field--room {
  text-align: center;
  letter-spacing: 6px;
  font-family: var(--pw-font-display);
  text-transform: uppercase;
}
.field--room { font-size: 34px; letter-spacing: 12px; }
.field--num  { text-align: center; font-size: 26px; }

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}
.form--wide { max-width: 560px; }
.form__title {
  font-family: var(--pw-font-display);
  font-size: 26px;
  font-weight: 400;
  margin: 0;
  text-align: center;
}
.form__hint  { color: var(--pw-text-3); font-size: 14px; margin: 0; text-align: center; }
.form__label { color: var(--pw-text-2); font-size: 13px; font-family: var(--pw-font-bold); }
.form__error { color: var(--pw-red); font-size: 14px; font-family: var(--pw-font-bold); min-height: 18px; }
.form__actions { display: flex; gap: 10px; align-items: center; }

/* =============================================================
   4. BOOT + SPLASH
   ============================================================= */
.boot, .splash {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
}
.boot__logo   { width: 260px; max-width: 60%; }
.boot__bar    { width: 220px; height: 10px; background: var(--pw-well);
                border-radius: 99px; overflow: hidden; }
.boot__fill   { height: 100%; width: 0%; background: var(--pw-accent);
                transition: width .25s ease; }
.boot__status { color: var(--pw-text-3); font-size: 13px; }

.splash__logo   { width: 300px; max-width: 62%; }
.splash__tag    { color: var(--pw-text-2); font-size: 15px; margin-top: -4px; }
.splash__doors  { display: flex; gap: 16px; margin-top: 6px; }

/* =============================================================
   5. LIBRARY
   ============================================================= */
.library { display: flex; flex-direction: column; gap: 10px; }
.library__title { font-family: var(--pw-font-display); font-size: 24px;
                  font-weight: 400; margin: 0; text-align: center; }
.library__list {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-content: flex-start; justify-content: center;
  overflow-y: auto; flex: 1; padding: 2px;
}
.packtile {
  width: 200px; min-height: 96px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px; text-align: left; cursor: pointer;
}
.packtile__name { font-family: var(--pw-font-black); font-size: 17px; line-height: 1.15; }
.packtile__meta { color: var(--pw-text-3); font-size: 12px; }

/* =============================================================
   6. LOBBY  —  code on the left, the room filling up on the right
   ============================================================= */
.lobby { display: flex; gap: 16px; }

.lobby__left {
  width: 250px; flex: 0 0 250px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px;
}
.lobby__codelabel { color: var(--pw-text-2); font-size: 12px; letter-spacing: 2px;
                    text-transform: uppercase; }
.lobby__code {
  font-family: var(--pw-font-display);
  font-size: 68px; line-height: 1;
  letter-spacing: 8px;
  color: var(--pw-white);
  text-shadow: 0 4px 0 var(--pw-purple-lip);
}
.lobby__qr  { width: 96px; height: 96px; background: var(--pw-white);
              border-radius: 8px; display: none; }
.lobby__qr.has-qr { display: block; }
.lobby__url { color: var(--pw-text-4); font-size: 11px; word-break: break-all;
              text-align: center; }

.lobby__right { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lobby__who   { font-size: 13px; color: var(--pw-text-2); min-height: 16px; }
.lobby__host  { font-family: var(--pw-font-bold); }
.lobby__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* team chips, used in the lobby and anywhere a roster is shown */
.teamlist {
  flex: 1; min-height: 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  overflow-y: auto;
}
.teamchip {
  display: flex; align-items: center; gap: 8px;
  background: var(--pw-panel); border: 2px solid var(--pw-edge);
  border-radius: 12px; padding: 6px 10px; min-height: 40px;
}
.teamchip.is-offline { opacity: .45; }
.teamchip.is-you  { border-color: var(--pw-accent); }
.teamchip__icon   { width: 26px; height: 26px; flex: 0 0 26px; }
.teamchip__name   { font-family: var(--pw-font-bold); font-size: 14px;
                    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.teamchip__score  { font-family: var(--pw-font-display); font-size: 17px;
                    color: var(--pw-text-2); margin-left: auto; }
.teamchip__crown  { font-size: 13px; }

/* The admin-is-missing banner. Outside the stage like the other overlays,
   because it must be readable whatever screen is showing. */
.away {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 8px 12px; text-align: center;
  background: var(--pw-well); color: var(--pw-white);
  font-family: var(--pw-font-display); font-size: 14px;
}
.away[hidden] { display: none; }

/* =============================================================
   7. MODE CHOOSER + INTRO
   ============================================================= */
.chooser { display: flex; flex-direction: column; gap: 10px; }
.chooser__title { font-family: var(--pw-font-display); font-size: 24px;
                  font-weight: 400; margin: 0; text-align: center; }
.chooser__list  { flex: 1; display: flex; gap: 12px; justify-content: center;
                  align-items: center; flex-wrap: wrap; }
.chooser__end   { align-self: center; }

.modetile {
  width: 158px; min-height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px; text-align: center; cursor: pointer;
}
.modetile__name { font-family: var(--pw-font-black); font-size: 16px; line-height: 1.1; }
.modetile__meta { color: var(--pw-text-3); font-size: 12px; }
.modetile.is-played { opacity: .4; pointer-events: none; }
.modetile__done { color: var(--pw-green); font-size: 11px; font-family: var(--pw-font-bold); }

.intro { display: flex; flex-direction: column; align-items: center;
         justify-content: center; gap: 8px; text-align: center; }
.intro__kicker { color: var(--pw-text-3); font-size: 13px; letter-spacing: 3px;
                 text-transform: uppercase; }
.intro__title  { font-family: var(--pw-font-display); font-size: 46px;
                 font-weight: 400; margin: 0; line-height: 1.05; }
.intro__sub    { color: var(--pw-text-2); font-size: 15px; margin-bottom: 6px; }

/* =============================================================
   8. BOARD  —  columns are categories, rows are point tiers.
   The grid template comes from the PACK, set by app.js. Any size works.
   ============================================================= */
.board { display: flex; flex-direction: column; gap: 6px; }
.board__turn {
  text-align: center; font-family: var(--pw-font-bold); font-size: 14px;
  color: var(--pw-text-2); min-height: 18px;
}
.board__grid {
  flex: 1; display: grid; gap: 5px;
  grid-auto-rows: 1fr;              /* every tier row the same height */
}
.board__cat {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 2px 4px;
  font-family: var(--pw-font-black); font-size: 11px; line-height: 1.05;
  color: var(--pw-text-2); text-transform: uppercase;
  background: var(--pw-panel); border-radius: 8px;
}
.board__cell {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pw-font-display); font-size: 20px;
  color: var(--pw-white);
  background: linear-gradient(var(--pw-cell-top), var(--pw-cell-bot));
  border: 2px solid var(--pw-edge);
  border-radius: 8px;
  cursor: pointer;
}
.board__cell.is-done {
  background: var(--pw-well); border-color: transparent;
  color: var(--pw-text-off); cursor: default;
}
/* Only the chooser can press a cell; everyone else sees the board flat. */
.board__grid.is-locked .board__cell { cursor: default; }

/* =============================================================
   9. QUESTION  —  one shell, the widget under the text changes
   ============================================================= */
.q { display: flex; flex-direction: column; gap: 8px; }
.q__bar {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--pw-text-3); min-height: 18px;
}
.q__points {
  font-family: var(--pw-font-display); font-size: 18px; color: var(--pw-accent);
}
.q__answered { margin-left: auto; }

.q__media { max-height: 84px; display: flex; justify-content: center; }
.q__media img { max-height: 84px; max-width: 100%; border-radius: 10px; }

/* The ceiling is deliberately large and app.js shrinks it to fit: a long
   Latvian question and a short Russian one must both fill this box. */
.q__text {
  font-family: var(--pw-font-black);
  font-size: 26px;
  line-height: 1.15;
  text-align: center;
  min-height: 34px;
  display: flex; align-items: center; justify-content: center;
}

.q__choices { display: grid; gap: 8px; flex: 1; }
.q__choices.is-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.q__choices.is-2 { grid-template-columns: 1fr 1fr; }

.choice {
  min-height: 46px;
  font-family: var(--pw-font-bold); font-size: 16px; line-height: 1.1;
  padding: 6px 10px;
  white-space: normal;              /* answers wrap; they are not labels */
}
.choice.is-picked { outline: 3px solid var(--pw-white); outline-offset: 2px; }
.choice.is-correct { }              /* set on reveal, see .rev */
.q__choices.is-locked .choice { pointer-events: none; }
.q__choices.is-locked .choice:not(.is-picked) { opacity: .5; }

.q__number { display: flex; gap: 10px; align-items: center;
             justify-content: center; flex: 1; }
.q__number .field { max-width: 220px; }

.q__foot { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.q__status { font-size: 13px; color: var(--pw-text-3); }
.q__foot .pw-btn { margin-left: auto; }

/* =============================================================
   10. REVEAL
   ============================================================= */
.rev { display: flex; flex-direction: column; gap: 6px; }
.rev__head { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.rev__verdict { font-family: var(--pw-font-display); font-size: 30px; }
.rev__verdict.is-right { color: var(--pw-green); }
.rev__verdict.is-wrong { color: var(--pw-red); }
.rev__verdict.is-silent { color: var(--pw-text-4); }
.rev__delta { font-family: var(--pw-font-display); font-size: 22px; color: var(--pw-text-2); }
.rev__answer {
  text-align: center; font-family: var(--pw-font-bold); font-size: 18px;
  color: var(--pw-white);
}
.rev__explain {
  background: var(--pw-well); border-radius: 10px; padding: 7px 12px;
  font-size: 14px; line-height: 1.25; color: var(--pw-text-2);
  text-align: center; max-height: 60px; overflow-y: auto;
}
.rev__scores { flex: 1; display: flex; flex-wrap: wrap; gap: 6px;
               align-content: flex-start; overflow-y: auto; }
.rev__foot { display: flex; align-items: center; min-height: 34px; }
.rev__foot .pw-btn { margin-left: auto; }

.scorechip {
  display: flex; align-items: center; gap: 6px;
  background: var(--pw-panel); border-radius: 10px; padding: 4px 9px; font-size: 13px;
}
.scorechip__icon { width: 20px; height: 20px; }
.scorechip__gain { font-family: var(--pw-font-black); }
.scorechip__gain.is-up   { color: var(--pw-green); }
.scorechip__gain.is-zero { color: var(--pw-text-off); }

/* =============================================================
   11. FINAL STANDINGS
   ============================================================= */
.end { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.end__title  { font-family: var(--pw-font-display); font-size: 26px;
               font-weight: 400; margin: 0; }
.end__winner { font-family: var(--pw-font-display); font-size: 34px; color: var(--pw-white); }
.end__scores { flex: 1; width: 100%; display: flex; flex-direction: column;
               gap: 6px; overflow-y: auto; align-items: center; }
.endrow {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 460px;
  background: var(--pw-panel); border-radius: 12px; padding: 6px 12px;
}
.endrow__rank  { font-family: var(--pw-font-display); font-size: 20px;
                 color: var(--pw-text-3); width: 26px; }
.endrow__icon  { width: 26px; height: 26px; }
.endrow__name  { font-family: var(--pw-font-bold); font-size: 15px; }
.endrow__score { margin-left: auto; font-family: var(--pw-font-display); font-size: 22px; }
.endrow.is-first { border: 2px solid var(--pw-white); }

/* =============================================================
   12. COLOUR PICKER  (the shields in img/)
   ============================================================= */
/* The gallery is 29 tiles and growing, so it scrolls INSIDE itself -- the
   page never scrolls (SIZING.md). Plain layout only: restyle at will. */
.avatars {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-height: 140px; overflow-y: auto; padding: 4px;
}
.avatarpick {
  width: 54px; height: 54px; padding: 4px; flex: 0 0 auto;
  background: transparent; border: 3px solid transparent; border-radius: 14px;
  cursor: pointer;
}
.avatarpick img { width: 100%; height: 100%; object-fit: contain; }
.avatarpick.is-picked { border-color: var(--pw-white); background: var(--pw-well); }
.avatarpick--upload {
  display: flex; align-items: center; justify-content: center;
  width: auto; min-width: 54px; padding: 4px 12px;
  border-color: var(--pw-white);
  font-family: var(--pw-font-display); font-size: 13px; color: var(--pw-white);
}

/* The crop preview is the whole point of the warning -- keep it big enough
   to actually judge what survives. */
.crop__preview {
  width: 160px; height: 160px; border-radius: 18px;
  background: var(--pw-well);
}

/* =============================================================
   13. OVERLAYS  —  outside the stage, so they are NOT scaled
   ============================================================= */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14, 3, 39, .88);
  padding: 20px;
}
.overlay[hidden] { display: none; }
.overlay__box {
  text-align: center; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 24px;
}
.overlay__title { font-family: var(--pw-font-display); font-size: 24px; }
.overlay__body  { color: var(--pw-text-2); font-size: 15px; line-height: 1.3; }
.overlay__actions { display: flex; gap: 12px; margin-top: 4px; }

/* The rotate prompt is the only guarantee we have: iOS Safari has no
   orientation lock. shell.js puts .is-portrait on <html>. */
#rotate-overlay { display: none; }
html.is-portrait #rotate-overlay { display: flex; }
html.is-portrait #stage { visibility: hidden; }

.rot__phone {
  width: 46px; height: 78px; border: 4px solid var(--pw-white);
  border-radius: 10px; animation: rot-tip 1.6s ease-in-out infinite;
}
@keyframes rot-tip {
  0%, 40%  { transform: rotate(0deg); }
  70%,100% { transform: rotate(-90deg); }
}

.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid var(--pw-well); border-top-color: var(--pw-accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 60; max-width: 80%;
  background: var(--pw-panel); border: 2px solid var(--pw-edge);
  border-radius: 12px; padding: 8px 16px;
  font-family: var(--pw-font-bold); font-size: 14px; color: var(--pw-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.toast[hidden] { display: none; }
.toast.is-bad { border-color: var(--pw-red); color: var(--pw-red); }

/* =============================================================
   14. NARROW PHONES
   shell.js sets .is-narrow under 650 design px. Only the things that
   genuinely cannot fit are pulled in — this is not a second design.
   ============================================================= */
html.is-narrow .lobby__left { width: 200px; flex-basis: 200px; }
html.is-narrow .lobby__code { font-size: 54px; letter-spacing: 5px; }
html.is-narrow .modetile    { width: 138px; }
html.is-narrow .packtile    { width: 172px; }

/* Dev rail — ?dev=1 only, never part of the game's design. */
.devrail { position: fixed; top: 6px; right: 6px; z-index: 60; }
.devrail[hidden] { display: none; }
.devrail__btn {
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  background: #b3261e; color: #fff; border: 0;
  font-family: var(--pw-font-display); font-size: 12px; opacity: .8;
}

/* A quiz's own cover art on its library tile. Plain box; restyle at will. */
.packtile__logo { display: block; width: 100%; max-height: 64px; object-fit: contain; margin-bottom: 6px; }

/* Room-code field and the seat limit. Plain boxes; restyle at will. */
.library__code { margin-top: 10px; text-align: left; }
.lobby__seats  { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.lobby__seats input { width: 70px; text-align: center; }