:root{
  --bg:#0f1117; --panel:#181b24; --line:#2a2e3a; --text:#eef0f4; --muted:#9aa1b0;
  --green:#2ec27e; --red:#e05a5a; --skip:#5b6472; --accent:#7c5cff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; align-items:center; min-height:100%;
}
.topbar{
  width:100%; max-width:520px; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.logo{font-size:1.5rem; margin:0; letter-spacing:.5px; font-weight:800}
.logo span{color:var(--accent)}
.icon-btn{
  background:none; border:1px solid var(--line); color:var(--text); width:36px;height:36px;
  border-radius:8px; font-size:1rem; cursor:pointer;
}
.icon-btn:hover{border-color:var(--accent)}
.game{width:100%; max-width:520px; padding:16px; flex:1}
.player-wrap{position:relative; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden}
#player-host{position:absolute; inset:0; transition:filter .4s ease}
#player-host iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* transparent layer so a tap can't open the video on YouTube (removed on reveal) */
.click-shield{position:absolute; inset:0; z-index:1}
.player-wrap.revealed .click-shield{display:none}
/* black bars that hide YouTube's title (top) + VEVO/"Watch on YouTube" branding (bottom) */
.mask{position:absolute; left:0; right:0; background:#000; z-index:2; pointer-events:none}
.mask-top{top:0; height:19%}
.mask-bottom{bottom:0; height:16%}
.player-wrap.revealed .mask{display:none}      /* game over → show full video incl. title */
/* opaque cover hiding the titled poster / paused related-video grid */
.player-cover{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:#0b0d12; color:var(--muted); font-size:.95rem; text-align:center; padding:0 16px;
}
.controls{display:flex; align-items:center; gap:12px; margin:14px 0 6px}
.play-btn{
  background:var(--accent); color:#fff; border:0; padding:10px 16px; border-radius:10px;
  font-weight:700; cursor:pointer; font-size:.95rem;
}
.play-btn:active{transform:translateY(1px)}
.reveal-label{color:var(--muted); font-size:.85rem}
.rows{display:flex; flex-direction:column; gap:8px; margin:14px 0}
.row{
  min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--panel);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:8px 12px; font-size:.92rem; color:var(--muted);
}
.row.filled{color:var(--text)}
.row.wrong{border-color:var(--red)}
.row.skip{border-color:var(--skip)}
.row.correct{border-color:var(--green); background:rgba(46,194,126,.12)}
.row-main{display:flex; align-items:center; width:100%}
.row .tag{margin-left:auto; font-size:1rem}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:.7rem; padding:3px 7px; border-radius:6px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.chip.g{background:rgba(46,194,126,.18); border-color:var(--green); color:#d6f5e6}
.chip.y{background:rgba(202,168,74,.16); border-color:#caa84a; color:#f0e3b8}
.chip.x{background:transparent; border-color:var(--line); color:var(--muted)}
.guess-form{display:flex; flex-direction:column; gap:10px}
#guess{
  width:100%; padding:13px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); font-size:1rem;
}
#guess:focus{outline:none; border-color:var(--accent)}
.guess-actions{display:flex; gap:10px}
.primary{
  flex:1; background:var(--accent); color:#fff; border:0; padding:13px; border-radius:10px;
  font-weight:700; font-size:1rem; cursor:pointer;
}
.ghost{
  background:none; border:1px solid var(--line); color:var(--text); padding:13px 16px;
  border-radius:10px; cursor:pointer; font-weight:600;
}
.primary:active,.ghost:active{transform:translateY(1px)}
.endcard{margin-top:18px; text-align:center; border-top:1px solid var(--line); padding-top:18px}
.endcard-msg{font-size:1.15rem; font-weight:700; margin:0 0 6px}
.endcard-answer{color:var(--muted); margin:0 0 12px}
.yt-link{display:inline-block; color:var(--accent); text-decoration:none; margin-bottom:14px}
.yt-link:hover{text-decoration:underline}
.share-btn{width:100%}
.share-status{color:var(--green); font-size:.85rem; height:1em; margin:8px 0 0}
.guess-msg{color:var(--muted); font-size:.82rem; min-height:1em; margin:8px 0 0; text-align:center; transition:opacity .2s}
.footer{color:var(--muted); font-size:.8rem; padding:18px; text-align:center}
.muted{color:var(--muted)}
.hidden{display:none !important}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; max-width:380px; width:100%; padding:22px; position:relative}
.modal-card h2{margin:0 0 12px}
.modal-card ul{padding-left:18px; line-height:1.6}
.modal-close{position:absolute; top:10px; right:12px; background:none; border:0; color:var(--muted); font-size:1.6rem; cursor:pointer; line-height:1}
.stats-body{display:flex; justify-content:space-around; text-align:center}
.stat .num{font-size:1.6rem; font-weight:800}
.stat .lbl{font-size:.75rem; color:var(--muted)}
/* tabs */
.tabs{display:flex; gap:6px; width:100%; max-width:520px; padding:10px 12px 0}
.tab{flex:1; padding:9px 6px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap}
.tab.active{color:#fff; border-color:var(--accent); background:rgba(124,92,255,.18)}
.subbar{width:100%; max-width:520px; padding:8px 12px 0; display:flex; justify-content:flex-end}
.archive-btn{background:none; border:1px solid var(--line); color:var(--text); padding:6px 12px; border-radius:8px; font-size:.82rem; cursor:pointer}
.archive-btn:hover{border-color:var(--accent)}
.coming{text-align:center; padding:48px 16px; color:var(--muted)}
.coming-emoji{font-size:3rem}
.coming h2{margin:8px 0 4px; color:var(--text)}
.day-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px}
.day-btn{padding:10px 4px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); font-size:.8rem; cursor:pointer}
.day-btn.active{border-color:var(--accent); background:rgba(124,92,255,.18)}
.day-btn:hover{border-color:var(--accent)}