/* /board — landscape display (1920×1080, Samsung Flip 55"). 1rem = 16px at 1080p, scales with the screen */
html { font-size: min(1.4815vh, 0.8333vw); }
body.board { background: var(--panel); }

.stage { position: fixed; inset: 0; display: grid; grid-template-columns: 30% 70%; grid-template-areas: "side arena"; }
.arena { grid-area: arena; position: relative; overflow: hidden; background: var(--green); }
.arena .boardbox { position: absolute; inset: 0; }

/* ---------- side panel ---------- */
.side {
  grid-area: side; background: var(--panel); display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem 1.6rem 1.6rem; min-height: 0; position: relative; z-index: 2;
  box-shadow: 0 0 3rem #0007;
}
.side-top { display: flex; align-items: center; gap: .8rem; height: 2.6rem; }
.pill {
  height: 2.6rem; padding: 0 1.2rem; border-radius: 99px; border: .12rem solid #ffffff33; background: #ffffff12;
  color: var(--white); font-size: 1.15rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem;
}
.pill:active { background: #ffffff2a; }
.brand { margin-inline-start: auto; font-size: 1.05rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.side .conn { font-size: 1rem; }
.side .conn:not(.on) { color: #E9A23B; }

.round-title {
  font-family: var(--display); font-weight: 800; font-size: 5.1rem; line-height: 1.12; text-align: center;
  color: var(--gold); text-shadow: 0 .35rem 0 #06102a, 0 .7rem 1.6rem #0008; margin: .2rem 0 0; cursor: default;
  user-select: none; -webkit-user-select: none; white-space: nowrap;
}

.qbox {
  flex: 1 1 auto; min-height: 0; background: var(--panel-2); border-radius: 1.6rem; padding: 1.2rem 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: .7rem; border: .14rem solid #ffffff14; position: relative; overflow: hidden;
}
.q-head { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.q-letter {
  font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; width: 4.4rem; height: 3.9rem;
  display: grid; place-items: center; background: var(--white); color: var(--ink); padding-top: .25rem;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.q-label { font-size: 1.5rem; font-weight: 700; color: var(--muted); }
.q-text { margin: 0; font-size: 2.3rem; font-weight: 700; line-height: 1.55; flex: 1 1 auto; min-height: 0; overflow: hidden; color: var(--white); }
.q-text.dim { color: var(--muted); font-weight: 600; }
.qbox.won { background: #2b2410; border-color: var(--gold); }

.answering {
  flex: 0 0 auto; height: 5.4rem; border-radius: 1.4rem; display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: 2.15rem; font-weight: 700; background: #ffffff10; color: var(--muted); border: .14rem dashed #ffffff26;
  text-align: center; padding: 0 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden;
}
.answering.open { background: var(--gold); color: #1B1A0E; border: 0; animation: openBlink 1s ease-in-out infinite; }
.answering.red { background: var(--red); color: #fff; border: 0; }
.answering.green { background: var(--green); color: #fff; border: 0; }
.answering.outline-red { border: .2rem solid var(--red); color: #fff; background: #E0453A22; }
.answering.outline-green { border: .2rem solid var(--green); color: #fff; background: #2E9E5B22; }
.answering.buzz { animation: buzzIn .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes openBlink { 50% { filter: brightness(1.12); transform: scale(1.015); } }
@keyframes buzzIn { from { transform: scale(.7); } to { transform: scale(1); } }

.teams { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.team { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.badge { position: relative; width: 9.6rem; height: 8.3rem; display: grid; place-items: center; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.badge b { position: relative; font-family: var(--display); font-weight: 800; font-size: 5.4rem; line-height: 1; color: #fff; padding-top: .5rem; text-shadow: 0 .25rem 0 #0003; }
.team.green .badge polygon { fill: var(--green); stroke: #fff; }
.team.red .badge polygon { fill: var(--red); stroke: #fff; }
.team.lead .badge { animation: lead 2s ease-in-out infinite; }
@keyframes lead { 50% { transform: scale(1.04); } }
.team .cells { font-size: 1.2rem; font-weight: 600; color: var(--muted); }
.team .cells b { color: #fff; }
.qr { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: .3rem; }
.qr-img { width: 10rem; height: 10rem; background: #fff; border-radius: .9rem; padding: .55rem; }
.qr-img svg { display: block; width: 100%; height: 100%; }
.qr-label { font-size: 1.2rem; font-weight: 700; padding: .2rem 1rem; border-radius: 99px; color: #fff; white-space: nowrap; }
.team.green .qr-label { background: var(--green); }
.team.red .qr-label { background: var(--red); }
.qr-sub { font-size: .85rem; color: var(--muted); direction: ltr; white-space: nowrap; }

/* ---------- buzz flash ---------- */
.flash { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; }
.flash.show { display: flex; animation: flash 2.2s ease forwards; }
.flash.show .who, .flash.show .bell { animation: pop .45s cubic-bezier(.2, 1.7, .4, 1), beat .5s ease-in-out .45s 3; }
.flash.red { background: var(--red); }
.flash.green { background: var(--green); }
.flash .bell { font-size: 9rem; line-height: 1; }
.flash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #ffffff40 0, transparent 60%); animation: ripple 1s ease-out 2; }
.flash .who { font-family: var(--display); font-weight: 800; font-size: 13rem; line-height: 1.2; color: #fff; text-shadow: 0 .6rem 0 #0003; }
@keyframes flash { 0% { opacity: 0; } 5% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes beat { 50% { transform: scale(1.07); } }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- win ---------- */
.victory { position: fixed; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; background: #050a1e8c; pointer-events: none; }
.victory.show { display: flex; animation: winIn .6s ease; }
.victory.fade { animation: winOut .8s ease forwards; }
.victory .card { text-align: center; padding: 2.5rem 6rem 3rem; border-radius: 3rem; border: .5rem solid #fff; box-shadow: 0 2rem 6rem #000a; animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.victory.red .card { background: var(--red); }
.victory.green .card { background: var(--green); }
.victory .cup { font-size: 8rem; line-height: 1; }
.victory .who { font-family: var(--display); font-weight: 800; font-size: 9rem; line-height: 1.3; color: #fff; text-shadow: 0 .5rem 0 #0003; }
.victory .sub { font-size: 3rem; font-weight: 700; color: #fff; opacity: .92; }
@keyframes winIn { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes winOut { to { opacity: 0; } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }

/* ---------- small things ---------- */
.sound-hint {
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 30; background: #0A1433e6; color: #fff; border-radius: 99px;
  padding: .7rem 1.3rem; font-size: 1.15rem; font-weight: 600; display: none; border: .12rem solid #ffffff30;
}
.sound-hint.show { display: block; }
.offline { position: fixed; top: 1.2rem; left: 1.2rem; z-index: 30; background: #E9A23B; color: #1b1300; border-radius: 99px; padding: .5rem 1.2rem; font-weight: 700; font-size: 1.2rem; display: none; }
.offline.show { display: block; }

/* ---------- «خيارات» slide-over (host controls on the Flip itself) ---------- */
.opts {
  position: fixed; top: 0; bottom: 0; right: 0; width: 36%; min-width: 30rem; z-index: 60; background: #0B1538;
  border-inline-end: 0; box-shadow: -1.5rem 0 4rem #000a; transform: translateX(105%); transition: transform .28s ease;
  display: flex; flex-direction: column; padding: 1.2rem 1.4rem 1.4rem; gap: 1rem;
}
.opts.show { transform: none; }
.opts-head { display: flex; align-items: center; gap: .8rem; }
.opts-head h2 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.opts-head .sp { flex: 1; }
.opts-head .btn { min-height: 2.8rem; font-size: 1.15rem; border-radius: .8rem; padding: 0 1rem; }
.opts-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.opts-body .hc { font-size: 1.12rem; }
.opts-hint { font-size: 1.05rem; color: var(--muted); text-align: center; }

/* ---------- code toggle · hidden team codes during play ---------- */
.pill.on { background: var(--gold); color: #1B1A0E; border-color: transparent; }
body.no-qr .team .qr { display: none; }

/* ---------- the answer, held open from the touch bar ---------- */
.q-answer {
  display: none; flex: 0 0 auto; align-items: center; gap: 1rem; background: var(--gold); color: #1B1A0E;
  border-radius: 1rem; padding: .7rem 1.2rem; font-size: 2.1rem;
}
.q-answer span { font-size: 1.3rem; font-weight: 700; opacity: .7; }
.q-answer b { font-weight: 800; }
.qbox.reveal .q-answer { display: flex; }

/* ---------- «باللمس»: the Flip runs the game from the side panel ---------- */
.touchbar { display: none; flex: 0 0 auto; flex-direction: column; gap: .7rem; }
body.touch .touchbar { display: flex; }
.tb-row { display: flex; gap: .7rem; }
.tbtn {
  flex: 1; min-height: 5.2rem; border-radius: 1.2rem; border: 0; font: inherit; font-size: 1.9rem; font-weight: 800;
  color: #fff; background: #ffffff1a; cursor: pointer; touch-action: manipulation; padding: 0 .8rem;
}
.tb-row.sm .tbtn { min-height: 3.6rem; font-size: 1.25rem; font-weight: 700; }
.tbtn.red { background: var(--red); }
.tbtn.green { background: var(--green); }
.tbtn.ok { background: var(--gold); color: #1B1A0E; }
.tbtn.bad { background: #5B6585; }
.tbtn.primary { background: var(--gold); color: #1B1A0E; }
.tbtn.ghost { background: #ffffff12; border: .12rem solid #ffffff26; }
.tbtn:disabled { opacity: .3; }
.tbtn:active:not(:disabled) { filter: brightness(1.15); transform: scale(.98); }

/* ---------- welcome: join codes and the two ways to play ---------- */
.welcome {
  position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 3.6rem 6rem 4rem;
  background: radial-gradient(ellipse at 50% 38%, #1B2C6B 0, var(--panel) 72%);
}
body.on-welcome .welcome { display: flex; }
.wl-head { text-align: center; }
.wl-head h1 {
  font-family: var(--display); font-weight: 800; font-size: 7.2rem; line-height: 1.15; color: var(--gold); margin: 0;
  text-shadow: 0 .45rem 0 #06102a, 0 1rem 2rem #0008;
}
.wl-head p { margin: .5rem 0 0; font-size: 2.1rem; color: var(--muted); font-weight: 600; }
.wl-teams { display: flex; gap: 9rem; }
.wl-team { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.wl-name { font-family: var(--display); font-weight: 800; font-size: 2.8rem; color: #fff; padding: .25rem 2.4rem; border-radius: 99px; }
.wl-team.green .wl-name { background: var(--green); }
.wl-team.red .wl-name { background: var(--red); }
.wl-team .qr-img { width: 18.5rem; height: 18.5rem; padding: 1rem; border-radius: 1.4rem; }
.wl-how { font-size: 1.6rem; color: #fff; font-weight: 600; }
.wl-count { font-size: 1.3rem; color: var(--muted); min-height: 1.7rem; }
.wl-modes { text-align: center; }
.wl-ask { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 1.1rem; }
.wl-row { display: flex; gap: 2.4rem; }
.wl-mode {
  width: 30rem; padding: 1.4rem 2rem 1.6rem; border-radius: 1.8rem; border: .2rem solid #ffffff30; background: #ffffff12;
  color: #fff; display: flex; flex-direction: column; gap: .4rem; align-items: center; font: inherit; cursor: pointer;
  touch-action: manipulation;
}
.wl-mode b { font-family: var(--display); font-size: 3rem; font-weight: 800; line-height: 1.3; }
.wl-mode span { font-size: 1.4rem; color: var(--muted); }
.wl-mode:active { background: var(--gold); color: #1B1A0E; border-color: transparent; }
.wl-mode:active span { color: #1B1A0E; }

/* ---------- the answer countdown inside the «يجاوب الحين» banner ---------- */
.answering { position: relative; }
.answering .tick:empty { display: none; }
.answering .tick {
  font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 1; min-width: 4.4rem; height: 4.4rem;
  display: grid; place-items: center; padding-top: .35rem; border-radius: 99px; background: #fff; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.answering.hurry .tick { background: var(--gold); animation: hurry .5s ease-in-out infinite; }
.answering.up .tick { background: #fff; color: var(--red); }
.answering::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: .45rem; width: var(--p, 0%);
  background: #ffffffcc; border-radius: 0 0 1.4rem 1.4rem; transition: width .1s linear;
}
@keyframes hurry { 50% { transform: scale(1.12); } }

.wl-secs { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: 1.6rem; }
.wl-secs span { font-size: 1.6rem; color: var(--muted); font-weight: 600; margin-inline-end: .6rem; }
.wl-secs button {
  font: inherit; font-size: 1.5rem; font-weight: 700; color: #fff; background: #ffffff12; border: .15rem solid #ffffff30;
  border-radius: 99px; padding: .45rem 1.4rem; cursor: pointer; touch-action: manipulation;
}
.wl-secs button.on { background: var(--gold); color: #1B1A0E; border-color: transparent; }

/* ---------- portrait screen: letters on top, the panel below in two columns (Abu Nasser 2026-10-17) ---------- */
@media (orientation: portrait) {
  html { font-size: min(1.4815vw, 0.8333vh); }
  .stage { grid-template-columns: 100%; grid-template-rows: 60% 40%; grid-template-areas: "arena" "side"; }
  .side {
    display: grid; gap: .9rem 1.4rem; padding: 1.2rem 1.6rem 1.4rem;
    grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "top top" "qbox title" "qbox teams" "ans teams" "tb teams";
    box-shadow: 0 -1rem 3rem #0007;
  }
  .side-top { grid-area: top; }
  .round-title { grid-area: title; font-size: 4rem; align-self: center; }
  .qbox { grid-area: qbox; }
  .answering { grid-area: ans; }
  .touchbar { grid-area: tb; }
  .teams { grid-area: teams; align-self: center; }
  .badge { width: 8rem; height: 6.9rem; }
  .badge b { font-size: 4.4rem; }
  .qr-img { width: 9rem; height: 9rem; }
  .welcome { justify-content: space-evenly; }
  .wl-teams { gap: 5rem; }
}
.tb-row.sm .tbtn { white-space: nowrap; }
.tbtn[data-t="answer"] { flex: 1.5; }

/* ---------- points, the TV-show oval above each team's rounds ---------- */
.pts {
  display: flex; align-items: baseline; justify-content: center; gap: .5rem; min-width: 9.6rem; padding: .35rem 1.4rem .2rem;
  border-radius: 99px; background: #2B3A63; border: .18rem solid #ffffff22; box-shadow: inset 0 .3rem .8rem #0006;
}
.pts b { font-family: var(--display); font-weight: 800; font-size: 3.2rem; line-height: 1.1; color: var(--gold); font-variant-numeric: tabular-nums; }
.pts span { font-size: 1.1rem; font-weight: 700; color: var(--muted); }
.team.green .pts { border-color: #2E9E5B88; }
.team.red .pts { border-color: #E0453A88; }
@media (orientation: portrait) { .pts b { font-size: 2.7rem; } .pts { min-width: 8rem; } }

/* the player who rang, under the team name on the full-screen flash */
.flash .name { font-family: var(--display); font-weight: 800; font-size: 6rem; line-height: 1.2; color: #fff; opacity: .92; text-shadow: 0 .4rem 0 #0003; }
.flash .name:empty { display: none; }

/* match-point line in the banner */
.answering.mp { color: #fff; animation: openBlink 1.2s ease-in-out infinite; }
/* welcome with two option rows (answer time · board look) — tighter so the play buttons stay on screen */
.welcome { padding-top: 2.6rem; padding-bottom: 2.6rem; }
.wl-head h1 { font-size: 6.4rem; }
.wl-team .qr-img { width: 16rem; height: 16rem; }
.wl-secs { margin-bottom: .9rem; }
.wl-ask { margin-bottom: .8rem; }