/* The voting page (index.html), mobile first: header, the design (iframe) filling the rest of the
   screen, and the stars and arrows at the bottom in the TV menu's green and brass. */
:root {
  --green: #173427;
  --green-2: #0e2219;
  --brass: #d8b876;
  --ivory: #f4efe3;
  --soft: #c9c4b5;
  --bg: #e9e7e2;
  --ink: #17271f;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

.top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 8px;
}
.title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.num { flex: none; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: #7a6a4a; }
.name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 21px; line-height: 1.2; }
.count { flex: none; font-size: 14px; color: #6b645a; font-variant-numeric: tabular-nums; }
/* The voter's name, tap to change it */
.who { flex: none; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border: 1px solid rgba(23, 39, 31, 0.2); border-radius: 14px; background: rgba(255, 255, 255, 0.5); color: var(--ink); font: 500 13px 'Jost', system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }

/* The name popup */
.ask { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14, 34, 25, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ask[hidden] { display: none; }
.ask .card { width: 100%; max-width: 380px; padding: 26px 22px 18px; border-radius: 20px; background: var(--ivory); color: var(--ink); text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.ask h2 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 28px; line-height: 1.15; }
.ask p { margin: 10px 0 18px; font-size: 16px; line-height: 1.4; color: #3f4a43; }
/* 16 px or more, or iPhone zooms in on the field */
.ask input { width: 100%; padding: 13px 14px; border: 1.5px solid rgba(23, 39, 31, 0.3); border-radius: 12px; background: #fff; color: var(--ink); font: 17px 'Jost', system-ui, sans-serif; text-align: center; }
.ask input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 52, 39, 0.15); }
.ask .error { min-height: 20px; margin: 6px 0 4px; font-size: 14px; color: #b20d15; }
.ask .go { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--green); color: var(--ivory); font: 600 17px 'Jost', system-ui, sans-serif; letter-spacing: 0.02em; cursor: pointer; touch-action: manipulation; }
.ask .go:active { background: var(--green-2); }
.ask .later { margin-top: 6px; padding: 10px; border: 0; background: none; color: #6b645a; font: 500 15px 'Jost', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ask .small { margin: 6px 0 0; font-size: 13px; color: #7a7468; }

.view { position: relative; flex: 1; min-height: 0; }
.view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* While the next design loads */
.veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(233, 231, 226, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.veil.on { opacity: 1; pointer-events: auto; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(23, 52, 39, 0.2); border-top-color: var(--green); animation: turn 0.9s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
.toast { position: absolute; left: 50%; bottom: 14px; max-width: calc(100% - 32px); transform: translate(-50%, 8px); padding: 9px 16px; border-radius: 22px; background: rgba(14, 34, 25, 0.88); color: var(--ivory); font-size: 14px; line-height: 1.3; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* The gesture hint after the intro */
.hint { position: absolute; left: 50%; bottom: 16px; width: max-content; max-width: calc(100% - 32px); transform: translate(-50%, 10px); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 18px; background: rgba(14, 34, 25, 0.9); color: var(--ivory); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.35s; }
.hint.on { opacity: 1; transform: translate(-50%, 0); }
.hint .lines { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.25; }
.hint .lines b { font-weight: 600; font-size: 15px; }
.hint .lines span { color: var(--soft); }
.gesture { flex: none; width: 52px; height: 52px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gesture .arrows { stroke: var(--brass); stroke-width: 3; }
.gesture .finger path { stroke: var(--ivory); stroke-width: 2.6; fill: rgba(14, 34, 25, 0.9); }
.gesture .tap { fill: rgba(216, 184, 118, 0.35); stroke: none; transform-box: fill-box; transform-origin: center; animation: tap 1.8s ease-in-out infinite; }
.gesture .finger { animation: swipe 1.8s ease-in-out infinite; }
@keyframes swipe { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
@keyframes tap { 0%, 100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .gesture .finger, .gesture .tap { animation: none; } }

.bottom {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px calc(env(safe-area-inset-bottom) + 12px);
  background: radial-gradient(ellipse 110% 160% at 50% 0%, var(--green) 0%, var(--green-2) 100%);
  color: var(--ivory);
}
.arrow {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid rgba(216, 184, 118, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ivory);
  cursor: pointer;
  touch-action: manipulation;
}
.arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.arrow:active { background: rgba(216, 184, 118, 0.25); }
.arrow:focus-visible, .star:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.rate { flex: 1; min-width: 0; text-align: center; }
.stars { display: flex; justify-content: center; gap: 2px; }
.star { width: 48px; height: 48px; padding: 5px; border: 0; background: none; cursor: pointer; touch-action: manipulation; color: var(--brass); }
.star svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; transition: transform 0.15s; }
.star.on svg { fill: currentColor; }
.star:active svg { transform: scale(0.88); }
.status { margin-top: 2px; font-size: 13px; color: var(--soft); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Narrow phones: smaller stars and arrows */
@media (max-width: 360px) {
  .star { width: 42px; height: 42px; padding: 4px; }
  .arrow { width: 44px; height: 44px; }
}
/* Wide screens: the footer content centred */
@media (min-width: 700px) {
  .bottom { justify-content: center; gap: 28px; }
  .rate { flex: none; }
  .star { width: 54px; height: 54px; }
}