/* Fresh teal-and-indigo look: cool off-white ground, teal accent, indigo for the actor,
   green for a win, warm orange-red for time up. Dark mode is a deep navy version of the same palette.
   No images and no heavy effects, so it stays fast on low-RAM phones. */
:root{
  --bg:#f3f6f8; --glow:#d3f1ec; --glow2:#dfe3fb; --card:#fff; --soft:#edf2f5; --line:#dce5ea;
  --ink:#1f2a37; --muted:#65758a; --accent:#36c2b0; --accent-text:#0e7c70; --on-accent:#05302b;
  --pink:#5b5bd6; --on-pink:#fff; --good:#1f9d6b; --bad:#d9573a;
  --scrim:rgba(20,30,40,.45); --shadow:rgba(30,60,80,.10);
  --display:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Telugu","Noto Sans",sans-serif;
  --r:20px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1720; --glow:#113a38; --glow2:#1c2250; --card:#16212c; --soft:#1f2b38; --line:#2a3846;
    --ink:#e8f0f5; --muted:#93a4b5; --accent:#4fd6c4; --accent-text:#5fe0cf; --on-accent:#04231f;
    --pink:#8f8ff5; --on-pink:#10122e; --good:#5fdc9f; --bad:#ff8a6b;
    --scrim:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.35);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:
    radial-gradient(700px 380px at 0% -80px, var(--glow), transparent 70%) no-repeat,
    radial-gradient(700px 380px at 100% -60px, var(--glow2), transparent 70%) no-repeat,
    var(--bg);
  color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5;
  padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  -webkit-tap-highlight-color:transparent;
}
[hidden]{display:none!important}
h1,h2,p{margin:0}

/* Header */
.top{display:flex;align-items:center;gap:12px;max-width:1100px;margin:0 auto 14px}
.logo{font-size:1.9rem;line-height:1;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--accent);flex:none}
.top h1{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem, 5vw, 1.8rem);line-height:1.1;letter-spacing:-.01em}
.tag{color:var(--muted);font-size:.85rem;font-weight:600}

/* Layout: one column on phones, two columns on tablets, laptops and landscape phones */
.layout{max-width:640px;margin:0 auto;display:grid;gap:14px}
.side{display:grid;gap:14px;align-content:start}
@media (min-width:900px), (min-width:600px) and (orientation:landscape){
  .layout{max-width:1100px;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);align-items:start}
  .stage-card{position:sticky;top:max(12px, env(safe-area-inset-top))}
}

/* Surfaces */
.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 12px var(--shadow)}
.panel{padding:16px}
.panel h2{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 10px}
#eraWrap{margin-top:16px}

/* Turn header */
.turn{padding:16px 18px 14px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line)}
.turn-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--pink)}
.turn b{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem, 6vw, 1.9rem);line-height:1.15;overflow-wrap:anywhere}
.turn > span:last-child{color:var(--muted);font-size:.92rem}

/* Stage */
.stage{padding:18px;display:flex;flex-direction:column;gap:14px;min-height:260px}
.lead-text{font-size:1.1rem}
.lead-text b{color:var(--accent-text)}
.note{color:var(--muted);font-size:.9rem}
.label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* The name card the actor sees */
.ticket{border:2px dashed var(--accent);border-radius:16px;padding:18px 16px;text-align:center;background:var(--soft)}
.ticket .mode{font-size:.8rem;color:var(--muted);font-weight:600}
.movie{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem, 7.5vw, 2.4rem);line-height:1.2;overflow-wrap:anywhere;margin:4px 0}
.movie.te{font-family:var(--body);font-weight:700;font-size:clamp(1.3rem, 6vw, 1.9rem);line-height:1.5}
.movie.long{font-size:clamp(1.25rem, 5.5vw, 1.8rem)}
.te-line{font-size:clamp(1rem, 4.5vw, 1.2rem);font-weight:600;color:var(--muted);line-height:1.6;margin-bottom:6px;overflow-wrap:anywhere}
.year{font-size:.9rem;font-weight:700;color:var(--accent-text)}

/* Ring timer: a conic gradient, so no canvas or SVG work while counting */
.ring{
  --size:min(62vw, 36vh, 250px); --size:min(62vw, 36dvh, 250px);
  width:var(--size);height:var(--size);margin:2px auto;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ring-c, var(--accent)) calc(var(--p, 100) * 1%), var(--soft) 0);
}
.ring.low{--ring-c:var(--bad)}
.clock{
  width:84%;height:84%;border-radius:50%;background:var(--card);display:grid;place-content:center;text-align:center;
  font-family:var(--display);font-weight:800;font-size:calc(var(--size) * .23);line-height:1;font-variant-numeric:tabular-nums;
}
.ring.low .clock{color:var(--bad)}
.clock small{display:block;font-family:var(--body);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media (min-width:900px), (min-width:600px) and (orientation:landscape){
  .ring{--size:min(30vw, 46vh, 280px); --size:min(30vw, 46dvh, 280px)}
}

/* Result */
.result{border-radius:14px;padding:14px 16px;font-weight:700;font-size:1.1rem;display:flex;gap:10px;align-items:center}
.result span{font-size:1.6rem;line-height:1}
.result{background:var(--soft)}
.result.win{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good)}
.result.lose{background:color-mix(in srgb, var(--bad) 14%, transparent);color:var(--bad)}

/* Buttons */
button{
  font:inherit;font-weight:700;color:var(--ink);cursor:pointer;border-radius:14px;border:1px solid var(--line);
  background:var(--soft);padding:12px 16px;min-height:52px;touch-action:manipulation;
  transition:transform .06s, background-color .15s;
}
button:active{transform:scale(.97)}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-size:1.05rem}
.ghost{background:transparent}
.danger{background:var(--bad);border-color:var(--bad);color:var(--card)}
.guess{background:var(--card);border:2px solid var(--accent);color:var(--ink);font-size:1.05rem}
.row{display:flex;flex-wrap:wrap;gap:10px}
.row>button{flex:1 1 130px}
.row.tight>button{flex-basis:90px;min-height:46px;font-size:.92rem}

/* Game mode tiles */
.modes{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}
@media (min-width:520px) and (max-width:899px) and (orientation:portrait){ .modes{grid-template-columns:repeat(3, minmax(0,1fr))} }
.modes button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px;min-height:84px;border-width:2px}
.modes .ico{font-size:1.5rem;line-height:1.1}
.modes .nm{font-size:.95rem;line-height:1.2}
.modes button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--card))}

/* Era chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:42px;padding:6px 14px;border-radius:99px;font-weight:600;font-size:.92rem}
.chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Players setup */
.stepper{display:flex;align-items:center;gap:16px}
.count{font-family:var(--display);font-weight:800;font-size:2rem;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.names{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:420px){ .names{grid-template-columns:1fr 1fr} }
input[type=text]{
  font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;min-height:48px;width:100%;
}
input::placeholder{color:var(--muted)}

/* Scoreboard */
.player{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.player:first-child{border-top:0;padding-top:0}
.player .name{flex:1;min-width:0;font-weight:700;display:flex;flex-wrap:wrap;gap:6px;align-items:center;overflow-wrap:anywhere}
.chip{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:99px;font-weight:700;background:var(--pink);color:var(--on-pink)}
.pts{font-family:var(--display);font-weight:800;font-size:1.5rem;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.adj{min-height:40px;width:40px;padding:0;border-radius:50%;font-size:1.2rem;flex:none}
#resetRow:not(:empty){margin-top:12px}

/* Update players */
.player.edit input{flex:1;min-width:0;min-height:44px}
.player.edit .pts{font-size:1.2rem}
.x{color:var(--bad)}
.x:disabled{opacity:.35;cursor:not-allowed}
.add-row{display:flex;gap:8px;margin-top:12px}
.add-row input{flex:1;min-width:0}
.add-row button{flex:none}
.player.edit + .note,.add-row + .note{margin-top:6px}
#boardActions{display:grid;gap:10px;margin-top:12px}
#boardActions:empty{display:none}
.finish{background:transparent;border:2px solid var(--pink);color:var(--pink)}
.confirm{color:var(--ink)}

/* Page 1 */
.home .stepper{margin-bottom:12px}
.home .stepper .note{margin-left:auto}
.home .names + .note{margin-top:8px}
.start-bar{
  position:sticky;bottom:0;z-index:2;
  padding:12px 0 max(12px, env(safe-area-inset-bottom));
  background:linear-gradient(to bottom, transparent, var(--bg) 35%);
}
.start-bar .big{width:100%;min-height:58px;font-size:1.15rem;box-shadow:0 8px 22px var(--shadow)}
@media (min-width:900px), (min-width:600px) and (orientation:landscape){
  .layout.home{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  #secPlayers{grid-column:1;grid-row:1 / span 2}
  #secGames{grid-column:2;grid-row:1}
  #secTime{grid-column:2;grid-row:2}
  .home .start-bar,.home .rules{grid-column:1 / -1}
}

/* Rounds slider */
.panel h2.gap{margin-top:18px}
.rounds-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
#roundsOut{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--accent-text)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;margin:4px 0 0;background:transparent;cursor:pointer;
  --fill:22%;
}
input[type=range]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:linear-gradient(to right, var(--accent) var(--fill), var(--soft) var(--fill))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:var(--accent);border:5px solid var(--card);box-shadow:0 0 0 2px var(--accent)}
input[type=range]::-moz-range-track{height:10px;border-radius:99px;background:var(--soft)}
input[type=range]::-moz-range-progress{height:10px;border-radius:99px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:5px solid var(--card);box-shadow:0 0 0 2px var(--accent)}
.ticks{display:flex;justify-content:space-between;padding:0 15px;font-size:.75rem;color:var(--muted);font-weight:600}
.ticks span{width:0;display:flex;justify-content:center}
.center{text-align:center}

/* Final board popup */
.modal{
  position:fixed;inset:0;z-index:10;background:var(--scrim);
  display:grid;place-items:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
body.locked{overflow:hidden}
.sheet{
  width:100%;max-width:420px;max-height:100%;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;
  display:grid;gap:12px;box-shadow:0 20px 50px var(--shadow);
}
.podium{text-align:center;display:grid;gap:2px;padding-bottom:4px}
.trophy{font-size:3.2rem;line-height:1.1}
.podium h2{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem, 7vw, 2.1rem);line-height:1.15;color:var(--accent-text);overflow-wrap:anywhere}
.ranking{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ranking li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--soft)}
.ranking li.r1{background:color-mix(in srgb, var(--accent) 18%, var(--soft));border:1px solid var(--accent)}
.ranking .medal{width:1.8em;text-align:center;font-size:1.25rem;font-weight:800;color:var(--muted);flex:none}
.ranking .nm{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.ranking .pts{font-size:1.3rem}

/* Rules */
.rules summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:28px}
.rules summary::-webkit-details-marker{display:none}
.rules summary::after{content:"+";font-size:1.3rem;color:var(--muted)}
.rules[open] summary::after{content:"−"}
.rules ul{margin:10px 0 0;padding-left:1.1em;color:var(--muted);font-size:.95rem}
.rules li+li{margin-top:4px}

/* Very small phones (320px wide, old iPhone SE, small Androids) */
@media (max-width:360px){
  body{padding-left:12px;padding-right:12px}
  .stage{padding:14px}
  .turn{padding:14px}
  .modes button{padding:10px;min-height:76px}
}
/* Short portrait phones: smaller timer so the guess buttons stay on screen */
@media (max-height:700px) and (orientation:portrait){
  .top{margin-bottom:10px}
  .logo{width:40px;height:40px;font-size:1.6rem}
  .ring{--size:min(56vw, 30vh, 220px);--size:min(56vw, 30dvh, 220px)}
  .stage{gap:12px}
  .row>button{flex-basis:110px}
}
/* Short landscape screens: tighten everything vertically */
@media (max-height:480px) and (orientation:landscape){
  body{padding-top:max(10px, env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom))}
  .top{display:none}
  .stage{min-height:0;gap:10px;padding:14px}
  .turn{padding:10px 14px;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .turn-label{display:none}
  .turn b{font-size:1.3rem}
  button{min-height:46px}
  /* Timer on the left, guess buttons on the right, so nothing falls below the fold */
  .stage[data-phase="run"]{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:10px;align-content:start}
  .stage[data-phase="run"] .ring{grid-row:1 / span 4;align-self:center;--size:min(26vw, 50vh, 210px);--size:min(26vw, 50dvh, 210px)}
}
@media (prefers-reduced-motion: reduce){ button{transition:none} button:active{transform:none} }