:root{--ink:#f8f9ff;--muted:#a9b0c4;--panel:#12182a;--line:#29324d;--violet:#6f3cff;--bg:#080d1b}
body{background:radial-gradient(circle at 50% -15%,#1d2458 0,#0b1021 38%,#070b16 72%);color:var(--ink)}
#app{max-width:760px;margin:0 auto;padding:18px 16px 110px;min-height:100vh}
.shirias-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 18px}
.shirias-top h1{font-size:2rem;margin:0}.eyebrow{letter-spacing:.12em;font-size:.72rem;color:#8ea0cf;font-weight:800}
.hero-card h2{font-size:1.7rem;margin:.15rem 0}.settings-card{gap:0}.setting-row{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}
.shirias-scores{position:sticky;top:0;z-index:5;background:rgba(7,11,22,.88);backdrop-filter:blur(14px);padding:10px 0 12px}
.score-pill{min-width:0;flex:1}.score-pill.active{outline:3px solid white;transform:translateY(-2px)}
.round-status{text-align:center;font-weight:800;margin:14px 0;color:#dce2ff}
.ready-stage,.song-stage,.result-stage,.next-team-stage{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ready-burst{display:flex;flex-direction:column;font-size:4rem;line-height:.9;font-weight:1000;font-style:italic;letter-spacing:-.05em;text-shadow:0 8px 30px #000}
.ready-burst span:nth-child(1){color:#5cb5ff}.ready-burst span:nth-child(2){color:#ffd84d}.ready-burst span:nth-child(3){color:#41e57d}
.ready-stage h2{font-size:2rem;margin:42px 0 4px}.ready-stage p{font-size:1.5rem;color:#c7ceea}
.song-cover{width:min(42vw,220px);aspect-ratio:1;border-radius:18px;object-fit:cover;box-shadow:0 20px 60px #0008}
.song-title{font-size:2rem;margin:18px 0 4px}.song-artist{font-size:1.25rem;color:#c2c9df;margin:0 0 18px}
.timer-ring{width:142px;height:142px;border-radius:50%;border:10px solid #315078;box-shadow:inset 0 0 0 3px #58b5ff,0 0 35px #2074ff33;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:6px}
.timer-ring strong{font-size:3.5rem;line-height:1}.timer-ring small{color:#b9c4df}.points-line{font-size:1.05rem}
.hint-btn{border:0;border-radius:999px;padding:16px 28px;font-weight:900;font-size:1.05rem;background:linear-gradient(90deg,#7047ff,#5d27ef);color:white;box-shadow:0 10px 30px #5c31ff55}
.hint-btn:disabled{opacity:.55}.answer-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-top:20px}
.answer-btn{border:0;border-radius:16px;color:white;font-size:3rem;font-weight:900;min-height:84px}.answer-btn.wrong{background:#ff4053}.answer-btn.correct{background:#22c96f}
.result-stage{min-height:72vh}.result-icon{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;font-size:5rem;font-weight:1000;border:10px solid currentColor}
.result-stage.good{color:#35e386}.result-stage.bad{color:#ff5262}.result-stage h2{font-size:2.4rem;color:white;margin:24px 0 4px}.result-points{font-size:2rem;font-weight:900}
.next-team-stage h2{font-size:2.5rem}.team-glyph{font-size:4rem;color:#9668ff}
.rank-list{display:grid;gap:10px;margin:18px 0}.rank{display:grid;grid-template-columns:44px 1fr auto;align-items:center;padding:16px;border-radius:14px;background:#12182a}.rank b{font-size:1.35rem}
.team-summary h2{display:flex;justify-content:space-between}.summary-table{display:grid;gap:4px}.summary-row{display:grid;grid-template-columns:24px 1fr 34px 48px 28px;gap:8px;padding:10px;border-radius:8px;background:#0c1222;align-items:center}
@media(max-width:520px){.ready-burst{font-size:3.5rem}.song-title{font-size:1.7rem}.shirias-scores{overflow-x:auto}.score-pill{min-width:78px}}

/* Shirias V1.1 compact mobile game layout */
#app[data-screen="game"]{padding:8px 10px 14px;min-height:100svh}
#app[data-screen="game"] .shirias-scores{
  position:relative; top:auto; width:100%; box-sizing:border-box;
  padding:6px 4px 8px; margin:0; gap:8px; overflow:visible;
}
#app[data-screen="game"] .score-pill{min-width:0; padding:8px 9px}
#app[data-screen="game"] .round-status{margin:4px 0 6px;font-size:.9rem}
#app[data-screen="game"] .song-stage{
  min-height:0;height:calc(100svh - 118px);justify-content:flex-start;
  gap:5px;padding:0 2px;overflow:hidden
}
#app[data-screen="game"] .song-cover{width:min(29vw,132px);border-radius:12px}
#app[data-screen="game"] .song-title{font-size:1.45rem;margin:5px 0 0;line-height:1.05}
#app[data-screen="game"] .song-artist{font-size:1rem;margin:0 0 2px}
.timer-points-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0;width:100%}
#app[data-screen="game"] .timer-ring{width:88px;height:88px;border-width:7px;margin:0}
#app[data-screen="game"] .timer-ring strong{font-size:2.35rem}
.points-card{min-width:112px;min-height:82px;border:1px solid #33405f;border-radius:14px;background:#10172a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 12px}
.points-card strong{font-size:2.2rem;line-height:1}.points-card span{font-weight:800}.points-card small{color:#aeb9d7;margin-top:3px}
#app[data-screen="game"] .answer-actions{margin-top:6px;gap:10px;position:sticky;bottom:4px}
#app[data-screen="game"] .answer-btn{min-height:64px;font-size:2.5rem;border-radius:14px}
.artist-search-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.artist-search-row input{min-width:0}
.search-btn{border:1px solid var(--line);background:#202944;color:white;border-radius:10px;padding:11px 14px;font-weight:800}
.close-settings{font-size:1.8rem;line-height:1;width:42px;height:42px;border-radius:50%}
.settings-top{grid-template-columns:44px 1fr 44px}.settings-top h1{text-align:center}
@media(max-width:520px){
  #app{padding-left:12px;padding-right:12px}
  #app[data-screen="game"] .shirias-scores{overflow:visible}
  #app[data-screen="game"] .score-pill{min-width:0}
  #app[data-screen="game"] .song-stage{height:calc(100svh - 112px)}
}
@media(max-height:700px){
  #app[data-screen="game"] .song-cover{width:92px}
  #app[data-screen="game"] .song-title{font-size:1.25rem}
  #app[data-screen="game"] .timer-ring{width:76px;height:76px}
  #app[data-screen="game"] .answer-btn{min-height:56px}
}

/* v0.3 language, search overlay, sliders */
.top-actions{display:flex;align-items:center;gap:8px}
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#0d1425}
.lang-switch button{border:0;background:transparent;color:#c7d0ea;padding:8px 11px;font-weight:800}
.lang-switch button[aria-pressed="true"]{background:#f8f9ff;color:#101528}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.toggle-row .hint{margin:4px 0 0}
.toggle-btn{width:54px;height:30px;border-radius:999px;border:1px solid #3d4867;background:#1b2338;padding:3px}
.toggle-btn span{display:block;width:22px;height:22px;border-radius:50%;background:#d8deef;transition:transform .18s}
[dir="rtl"] .toggle-btn[aria-pressed="true"] span{transform:translateX(-23px);background:#5df09b}
[dir="ltr"] .toggle-btn[aria-pressed="true"] span{transform:translateX(23px);background:#5df09b}
.artist-search-launch{width:100%;text-align:start;border:1px solid var(--line);border-radius:12px;background:#0d1425;color:#aeb8d5;padding:14px 16px;font-size:1rem}
.artist-search-overlay{position:fixed;inset:0;z-index:100;background:rgba(4,8,18,.94);backdrop-filter:blur(10px);overflow:auto}
.artist-search-sheet{max-width:760px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 12px) 14px 24px}
.search-overlay-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:1.15rem}
.search-overlay-head button{border:0;background:#242d46;color:white;width:40px;height:40px;border-radius:50%;font-size:1.5rem}
.search-results{display:grid;gap:8px;margin-top:10px}
.search-results>button{display:grid;grid-template-columns:46px 1fr;align-items:center;text-align:start;gap:10px;width:100%;padding:10px;border:1px solid var(--line);border-radius:12px;background:#12192b;color:white}
.search-results img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.search-empty{text-align:center;padding:28px}
.slider-block{padding:8px 0}
.slider-title,.slider-ends{display:flex;justify-content:space-between;gap:12px}
.slider-title span{font-weight:900;color:#b5c5ff}
.slider-block input[type="range"]{width:100%;margin:12px 0}
.slider-ends{font-size:.82rem;color:#9da9c7}
[dir="rtl"] .rank{border-left:0!important;border-right:8px solid currentColor}
@media(max-width:520px){
  .shirias-top{align-items:flex-start}
  .top-actions{flex-direction:column;align-items:flex-end}
  .lang-switch button{padding:7px 9px}
}

/* v0.4 stable Shirzam-style artist search + points-only game display */
.shirzam-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.shirzam-search input{min-width:0}
#artist-results.search-results{display:grid;gap:8px;margin-top:10px;min-height:0}
#artist-results.search-results>button{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:10px;border:1px solid var(--line);border-radius:12px;background:#12192b;color:white;text-align:start}
#artist-results.search-results img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.points-only-row{justify-content:center}
.points-main{min-width:180px;min-height:118px}
.points-main strong{font-size:4rem}
#app[data-screen="game"] .timer-points-row{margin-top:4px}
#app[data-screen="game"] .song-stage{justify-content:flex-start}
@media(max-width:520px){
  .shirzam-search{grid-template-columns:1fr auto}
  .points-main{min-width:160px;min-height:104px}
  .points-main strong{font-size:3.5rem}
}

/* v0.5.1 game layout: artwork beside song info, countdown + points inline */
.song-media-row{display:grid;grid-template-columns:minmax(88px,132px) minmax(0,1fr);gap:16px;align-items:center;width:min(100%,620px);margin:4px auto 8px}
.song-media-row .song-cover{width:100%;max-width:132px;margin:0}
.song-copy{min-width:0;text-align:start}
#app[data-screen="game"] .song-title{font-size:clamp(1.65rem,6vw,2.35rem);line-height:1.05;margin:0 0 8px}
#app[data-screen="game"] .song-artist{font-size:clamp(1.15rem,4.8vw,1.65rem);line-height:1.15;margin:0;color:#c4cee8}
.timer-points-row{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;margin:8px 0 6px}
.compact-timer{width:92px!important;height:92px!important;margin:0!important}
.compact-timer strong{font-size:2.7rem!important}
.points-inline{display:flex;align-items:baseline;gap:8px;min-width:150px;justify-content:center}
.points-inline strong{font-size:3.1rem;line-height:1}
.points-inline span{font-size:1.15rem;font-weight:800;color:#c9d2eb}
#app[data-screen="game"] .answer-actions{margin-top:8px}
.shirzam-search{display:block}
.shirzam-search input{width:100%}
@media(max-width:520px){
  .song-media-row{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .compact-timer{width:82px!important;height:82px!important}
  .compact-timer strong{font-size:2.35rem!important}
  .points-inline{min-width:128px}
  .points-inline strong{font-size:2.65rem}
}

/* v0.6 combined countdown/points and editable settings */
.editable-setting{display:flex;align-items:center;justify-content:space-between;gap:14px}
.editable-setting input{width:92px;text-align:center}
.setting-input-with-unit{display:flex;align-items:center;gap:8px}
.setting-input-with-unit span{color:#aeb8d5;font-size:.9rem}

#app[data-screen="game"] .song-stage{display:flex;flex-direction:column;justify-content:flex-start}
#app[data-screen="game"] .song-media-row{
  flex:0 0 30svh;
  min-height:30svh;
  width:min(100%,700px);
  grid-template-columns:minmax(110px,30%) minmax(0,1fr);
  align-items:center;
}
#app[data-screen="game"] .song-media-row .song-cover{
  width:100%;
  max-width:none;
  aspect-ratio:1;
  object-fit:cover;
}
#app[data-screen="game"] .song-title{font-size:clamp(2rem,7vw,3.2rem)}
#app[data-screen="game"] .song-artist{font-size:clamp(1.35rem,5.2vw,2rem)}

.combined-score-wrap{
  flex:0 0 20svh;
  min-height:20svh;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.combined-score{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
}
.combined-score strong{
  font-size:clamp(4.8rem,22vw,8rem);
  line-height:.9;
  font-variant-numeric:tabular-nums;
}
.combined-score span{
  font-size:clamp(1.25rem,4vw,1.8rem);
  font-weight:900;
  color:#c8d1e8;
}

@media(max-width:520px){
  #app[data-screen="game"] .song-media-row{
    min-height:30svh;
    grid-template-columns:30% minmax(0,1fr);
    gap:12px;
  }
  #app[data-screen="game"] .song-title{font-size:clamp(1.65rem,7vw,2.3rem)}
  #app[data-screen="game"] .song-artist{font-size:clamp(1.15rem,5vw,1.6rem)}
  .combined-score-wrap{min-height:20svh}
}

/* v0.7 instructions and sequential Ready / Set / Go */
.instructions-stage{max-width:720px;margin:0 auto;padding:18px 0 36px}
.instructions-card{gap:18px}
.instructions-card h2{font-size:clamp(2rem,7vw,3rem);margin:0}
.instructions-list{display:grid;gap:14px;margin:0;padding-inline-start:1.5rem;font-size:clamp(1.05rem,4vw,1.3rem);line-height:1.45}
.instructions-card .primary{min-height:54px;font-size:1.08rem}
.single-ready{min-height:150px;display:flex;align-items:center;justify-content:center}
.single-ready span{font-size:clamp(3.2rem,16vw,7rem);font-weight:1000;letter-spacing:-.04em}

/* v0.7.1 summary page: allow the full results page and bottom action to scroll above iPhone safe area */
#app[data-screen="results"]{
  height:auto!important;
  max-height:none!important;
  min-height:100svh;
  overflow:visible!important;
  display:block;
  padding-bottom:calc(32px + env(safe-area-inset-bottom))!important;
}
#app[data-screen="results"] .rank-list{
  overflow:visible!important;
  max-height:none!important;
}
#app[data-screen="results"] .team-summary{
  margin-bottom:12px;
}
#app[data-screen="results"] .results-actions{
  position:relative;
  margin-top:18px;
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}
#app[data-screen="results"] .results-actions .primary{
  width:100%;
  min-height:54px;
  margin:0;
}