:root{
  --bg:#0f1222; --fg:#e9ecf1; --muted:#a7b0c3; --acc:#78d9ff; --ok:#6dd16a; --bad:#ff6b6b; --card:#171a2e; --shade:#202543;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
/* Light theme overrides */
.theme-light{
  --bg:#f6f8fb; --fg:#0f1222; --muted:#5a657a; --acc:#007acc; --ok:#2a8f2a; --bad:#c84444; --card:#ffffff; --shade:#d8dde8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:linear-gradient(180deg,var(--bg),#0c0f1a); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif}
.app{max-width:800px; margin:32px auto; padding:0 16px}
h1{margin:0 0 8px 0}
.titlebar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.title-main{display:flex; flex-direction:column}
.title-main h1{margin:0}
.title-main img{max-width:100%; height:96px}
.subtitle{color:var(--muted); font-size:14px; margin-top:2px}
.title-actions{display:flex; align-items:center; gap:8px}
.dev-toggle{height:36px; padding:0 10px; border-radius:10px; border:1px solid var(--shade); background:#0e1120; color:var(--fg); cursor:pointer}
.theme-toggle{height:36px; padding:0 10px; border-radius:10px; border:1px solid var(--shade); background:#0e1120; color:var(--fg); cursor:pointer}
.help-btn{position:relative; width:40px; height:40px; border-radius:12px; border:1px solid var(--shade); background:
  radial-gradient(120% 120% at 20% 10%, rgba(120,217,255,.15), transparent 40%),
  linear-gradient(180deg,#0f142d,#0e1120);
  color:var(--fg); font-weight:800; line-height:1; font-size:18px; cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.help-btn:hover{transform:translateY(-1px); background:
  radial-gradient(120% 120% at 70% 0%, rgba(120,217,255,.18), transparent 40%),
  linear-gradient(180deg,#12183a,#0f142d);
  box-shadow:0 8px 18px rgba(0,0,0,.32), 0 0 0 3px rgba(120,217,255,.12);
}
.help-btn:active{transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.26)}
.help-btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(120,217,255,.2), 0 6px 14px rgba(0,0,0,.28)}
/* Tooltip */
.help-btn::after{content:attr(data-tip); position:absolute; left:50%; top:-8px; transform:translate(-50%,-100%) scale(.96); opacity:0; pointer-events:none;
  background:rgba(15,18,34,.95); color:var(--fg); border:1px solid var(--shade); border-radius:8px; padding:6px 8px; font-size:12px; white-space:nowrap;
  box-shadow:0 10px 22px rgba(0,0,0,.35); transition:opacity .15s ease, transform .12s ease;}
.help-btn:hover::after,.help-btn:focus-visible::after{opacity:1; transform:translate(-50%,-110%) scale(1)}
.meta{display:flex; gap:16px; color:var(--muted); margin-bottom:16px}
.masked{font:600 28px var(--mono); letter-spacing:2px; background:var(--card); border:1px solid var(--shade); padding:16px; border-radius:10px; text-align:center; margin:12px 0}
.stats{display:flex; gap:24px; margin:12px 0; color:var(--muted)}
.panel{background:var(--card); border:1px solid var(--shade); border-radius:12px; padding:16px; margin:16px 0}
.panel h2{margin:0 0 12px 0; font-size:18px}
.row{display:flex; gap:8px}
input{flex:1; background:#0e1120; border:1px solid var(--shade); color:var(--fg); padding:10px 12px; border-radius:8px; font-size:16px}
button{background:var(--acc); color:#001018; border:0; padding:10px 14px; border-radius:8px; font-weight:600; cursor:pointer}
button:disabled{opacity:.5; cursor:not-allowed}
.qa{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.qa .item{background:#0e1120; border:1px solid var(--shade); padding:10px 12px; border-radius:8px}
.qa .q{color:#b8c2d9}
.qa .a{color:#dff1ff}
.result{margin-top:10px; min-height:20px}
.ok{color:var(--ok)}
.bad{color:var(--bad)}
footer{margin-top:24px; color:var(--muted)}

/* Responsive footer ad */
.ads-footer{max-width:100%; padding:16px 0 24px; margin:24px auto 0; display:flex; justify-content:center}
.ads-footer .adsbygoogle{display:block; width:100%; max-width:100%}

/* Tutorial modal */
.hidden{display:none}
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px}
.backdrop.hidden{display:none}
.modal{background:var(--card); border:1px solid var(--shade); border-radius:12px; max-width:560px; width:100%; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--shade)}
.modal-body{padding:14px}
.close-btn{position:relative; width:40px; height:40px; border-radius:12px; border:1px solid var(--shade); background:
  radial-gradient(120% 120% at 20% 10%, rgba(120,217,255,.15), transparent 40%),
  linear-gradient(180deg,#0f142d,#0e1120);
  color:var(--fg); font-weight:800; line-height:1; font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.close-btn:hover{transform:translateY(-1px); background:
  radial-gradient(120% 120% at 70% 0%, rgba(120,217,255,.18), transparent 40%),
  linear-gradient(180deg,#12183a,#0f142d);
  box-shadow:0 8px 18px rgba(0,0,0,.32), 0 0 0 3px rgba(120,217,255,.12)}
.close-btn:active{transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.26)}
.close-btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(120,217,255,.2), 0 6px 14px rgba(0,0,0,.28)}
.modal-body ul{margin:0; padding-left:20px; color:var(--fg)}

/* Dev tools */
.title-actions{display:flex; align-items:center; gap:8px}
.dev-toggle{height:36px; padding:0 10px; border-radius:10px; border:1px solid var(--shade); background:#0e1120; color:var(--fg); cursor:pointer}
.dev-tools{position:fixed; right:16px; bottom:16px; z-index:1500}
.dev-tools.hidden{display:none}
.dev-inner{background:linear-gradient(180deg,rgba(23,26,46,.95),rgba(18,21,37,.95)); border:1px solid var(--shade); border-radius:12px; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.45); min-width:280px}
.dev-row{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.dev-row label{width:110px; color:var(--muted); font-size:12px}
.dev-row input{flex:1; background:#0e1120; border:1px solid var(--shade); color:var(--fg); padding:8px 10px; border-radius:8px}
.dev-actions{display:flex; align-items:center; gap:8px}
.dev-msg{color:var(--muted); font-size:12px}

/* Tiles and animations */
.tiles{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap}
.tile{width:44px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--shade); background:linear-gradient(180deg,#0f142c,#0b0e1d); font:700 22px var(--mono); letter-spacing:.5px; color:var(--fg); box-shadow:inset 0 -3px 0 rgba(255,255,255,.03)}
.tile.empty{color:var(--muted); opacity:.85}
.tile.reveal{animation:tileReveal .32s ease-out; border-color:#2f3a6a; background:linear-gradient(180deg,#14204a,#0f142c)}
@keyframes tileReveal{0%{transform:scale(.9); filter:brightness(1.2)}60%{transform:scale(1.06); filter:brightness(1.15)}100%{transform:scale(1); filter:brightness(1)}}

/* Tutorial modal typography enhancements */
.modal-header h2{margin:0; font-weight:800; letter-spacing:.2px}
.modal-body{line-height:1.6}
.modal-body ul{list-style:none; padding-left:0}
.modal-body li{position:relative; padding:10px 12px 10px 40px; background:rgba(32,37,67,.55); border:1px solid var(--shade); border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.modal-body li+li{margin-top:10px}
.modal-body li::before{content:""; position:absolute; left:14px; top:50%; width:12px; height:12px; border-radius:50%; transform:translateY(-50%);
  background:radial-gradient(120% 120% at 50% 30%, rgba(120,217,255,.9), rgba(120,217,255,.35)); box-shadow:0 0 0 2px rgba(120,217,255,.18)}

/* Score visuals */
.hidden{display:none}
.score{margin-top:12px; display:flex; flex-direction:column; gap:10px; align-items:center}
.score .row{display:flex; align-items:center; gap:8px}
.score .row.guesses .cell{width:22px; height:22px; border-radius:6px}
.score .row.questions .cell{width:12px; height:12px; border-radius:50%}
.score .row .cell{border:1px solid var(--shade); background:#0e1120; box-shadow:inset 0 -2px 0 rgba(255,255,255,.03)}
.score .row .cell.filled{background:linear-gradient(180deg,var(--acc),#5fc9ef); border-color:#3a7395}
.score-actions{margin-top:10px}
.share-btn{background:linear-gradient(180deg,var(--acc),#5fc9ef); color:#001018; border:0; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer; box-shadow:0 6px 16px rgba(120,217,255,.25)}
.share-btn:hover{transform:translateY(-1px)}

/* End-of-game modal text styling */
#gameOverBackdrop .modal-body{ text-align:center }
#gameOverMessage{
  display:inline-block; margin:0; padding:14px 16px; border-radius:14px;
  background:rgba(32,37,67,.55); border:1px solid var(--shade);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  font-size:18px; font-weight:700; letter-spacing:.2px;
}
#gameOverMessage::before{
  content:"⭐"; display:block; font-size:22px; margin-bottom:8px; opacity:.9;
}
/* Temporarily hide Dev button */
#devToggle{ display:none !important }

/* Title/logo swap per theme */
.site-title{display:none}
.logo-dark,.logo-light{display:none; height:96px; width:auto}
html:not(.theme-light) .logo-dark{display:block}
.theme-light .logo-light{display:block}

/* Make logos larger on wider screens */
@media (min-width: 640px){
  .title-main img,
  .logo-dark,
  .logo-light{ height:128px }
}