/* ==========================================================================
   Shou Hayda? — styles. Theme tokens and shared components come from
   shared/style.css.

   During a round the words must be readable from across a room, so the play
   screen is high contrast: ink on near-white, and solid green/red for
   "got it" / "pass". The two tap halves keep their physical sides in every
   language (red left, green right), so those use left/right on purpose.
   ========================================================================== */

.sh { display: grid; gap: 1rem; max-width: 30rem; margin-inline: auto; padding-block: .75rem 2rem; }
.sh-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.sh-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sh-top > :last-child { margin-inline-start: auto; }
.sh-top .sh-title { text-align: start; }
.sh-deckname, .sh-total { font-weight: 800; }
.sh-note { font-size: 1.1rem; font-weight: 700; text-align: center; }
.sh-center { justify-self: center; }

/* ---------- Menu ---------- */

.sh-menu { display: grid; gap: .5rem; text-align: center; }
.sh-tagline { font-size: 1.1rem; font-weight: 700; }
.sh-menu .lobby__or { margin-top: .75rem; }

/* ---------- Deck tiles ---------- */

.sh-decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.sh-decks legend { margin-bottom: .4rem; font-weight: 800; }
.sh-deck { position: relative; display: grid; cursor: pointer; }
.sh-deck input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sh-deck > span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .5rem;
  min-height: 3.6rem;
  padding: .45rem .6rem;
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 14px 16px 13px 17px;
}
.sh-deck__icon { grid-row: span 2; font-size: 1.7rem; line-height: 1; }
.sh-deck b { font-size: .95rem; line-height: 1.2; }
.sh-deck small { color: var(--muted); font-weight: 700; }
.sh-deck input:checked + span { background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.sh-deck input:checked + span small { color: var(--ink); }
.sh-deck input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.sh-custom { display: grid; gap: .35rem; }
.sh-custom__area { min-height: 7.5rem; font-family: inherit; line-height: 1.4; resize: vertical; }
.sh-settings { display: grid; gap: .75rem; }

/* ---------- Setup ---------- */

.choices { display: grid; gap: .5rem; }
.choices--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: .4rem .7rem; font-weight: 800; text-align: center; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.choice input:checked + span { background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.sh-names { display: grid; gap: .5rem; margin-bottom: .5rem; }
.sh-names__row { display: flex; align-items: center; gap: .5rem; font-size: 1.5rem; }

/* ---------- "You're up" ---------- */

.sh-up { display: grid; justify-items: center; gap: .5rem; padding-block: 1rem; }
.sh-up__face { display: grid; place-items: center; width: 6.5rem; height: 6.5rem; font-size: 3.6rem; line-height: 1; background: var(--sun); border: 4px solid var(--line); border-radius: 50%; box-shadow: 0 6px 0 var(--line); }
.sh-tips { display: grid; gap: .5rem; padding: .9rem 1rem; font-weight: 700; }
.sh-count { font-size: clamp(7rem, 40vmin, 16rem); font-weight: 900; line-height: 1; text-align: center; }
.clock.sh-count { display: block; padding-block: 2rem; }

/* ---------- The 60 seconds, on one phone: fills the whole window ---------- */

html.is-playing, html.is-playing body { overflow: hidden; overscroll-behavior: none; }

.sh-play {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto 1fr;
  color: #1a120b;
  background: #fffdf7;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.sh-play > .sh-count { grid-row: 1 / -1; align-self: center; }
.sh-play__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: max(.6rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .4rem max(1rem, env(safe-area-inset-left)); pointer-events: none; }
.sh-play__bar .timebar { flex: 1; height: 14px; }
.sh-play__bar .clock { min-width: 2.4ch; font-size: 2rem; text-align: center; }
/* The ✕ in the corner: cancel the countdown, or pause the round. It sits above the answer halves. */
.sh-stop {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  background: #fffaf0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
}
.sh-play > .sh-stop { position: absolute; top: max(.6rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); z-index: 3; }
.sh-stoprow { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; }
.sh-pause { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 1rem; background: rgb(42 28 18 / .55); }
.sh-pause__box { display: grid; gap: .6rem; width: min(100%, 22rem); padding: 1rem; }
.sh-pause__title { font-size: 1.6rem; font-weight: 900; text-align: center; }
.sh-play__score { min-width: 2ch; padding: .1rem .6rem; font-size: 1.6rem; font-weight: 900; color: #fff; background: var(--olive); border: 3px solid var(--ink); border-radius: 999px; text-align: center; }

.sh-face { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; min-height: 0; padding: 0 1rem 3.2rem; pointer-events: none; }
.sh-face__kind { justify-self: center; padding: .15rem .9rem; font-size: 1.1rem; font-weight: 900; background: var(--sun); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; }
.sh-face__kind:empty { visibility: hidden; }
.sh-face__box { display: grid; place-items: center; min-height: 0; overflow: hidden; }
.sh-face__word { max-width: 100%; margin: 0; font-weight: 900; line-height: 1.08; text-align: center; overflow-wrap: break-word; }

/* The two halves: tap left to pass, right for "got it". */
.sh-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  display: flex;
  align-items: flex-end;
  padding: 0 1rem max(.8rem, env(safe-area-inset-bottom));
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.sh-zone--pass { left: 0; justify-content: flex-start; color: #9c2617; border-left: 14px solid var(--tomato); }
.sh-zone--ok { right: 0; justify-content: flex-end; color: #3c4a12; border-right: 14px solid var(--olive); }
.sh-zone:active { background: rgb(42 28 18 / .06); }

/* "Got it" / "Pass" fills the screen for a moment: one solid color change, no flicker. */
.sh-flash { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem; font-size: clamp(3rem, 16vmin, 8rem); font-weight: 900; color: #fff; text-align: center; }
.sh-flash--ok { background: #4c7a1e; }
.sh-flash--pass { background: #b8301f; }
.sh-flash--end { background: var(--sea); }

/* ---------- Online team game ---------- */

.sh-blind { display: grid; justify-items: center; gap: .5rem; padding-block: 2rem; }
.sh-blind span { font-size: 6rem; line-height: 1; }
.sh-stage { display: grid; height: min(46vh, 22rem); padding: .75rem 0 0; background: #fffdf7; color: #1a120b; }
.sh-stage .sh-face { padding-bottom: .75rem; }
.sh-answer { display: grid; grid-template-columns: 1fr 1.4fr; gap: .75rem; direction: ltr; }
.sh-btn-pass { --btn-bg: var(--tomato); --btn-fg: #fff; min-height: 4.5rem; }
.sh-btn-ok { --btn-bg: #4c7a1e; --btn-fg: #fff; min-height: 4.5rem; font-size: 1.5rem; }
.sh-mini-flash { min-height: 2rem; font-size: 1.4rem; font-weight: 900; text-align: center; opacity: 0; transition: opacity .15s ease; }
.sh-mini-flash.is-on { opacity: 1; }
.sh-mini-flash--ok { color: #4c7a1e; }
.sh-mini-flash--pass { color: var(--tomato); }
#game .sh-play__bar { padding: 0; }

/* ---------- After a round, and the final board ---------- */

.sh-bigscore { font-size: 1.3rem; font-weight: 800; text-align: center; }
.sh-bigscore b { font-size: 3.2rem; font-weight: 900; line-height: 1; vertical-align: middle; }
.sh-log { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.sh-log__item { display: flex; align-items: center; gap: .4rem; padding: .4rem .6rem; font-weight: 700; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.sh-log__item--ok { border-color: var(--olive); border-width: 3px; }
.sh-log__item--pass, .sh-log__item--late { opacity: .7; }

.sh-board { display: grid; gap: .4rem; }
.sh-board__row { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.sh-board__row:first-child { background: var(--sun); color: var(--ink); }
.sh-board__row:first-child small { color: var(--ink); }
.sh-board__face { font-size: 1.6rem; line-height: 1; }
.sh-board__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.sh-board__who small { font-weight: 700; color: var(--muted); }
.sh-board__row b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }