*{box-sizing:border-box; margin:0; padding:0;}
html, body{width:100%; background:#141414; color:#eee; font-family:system-ui, sans-serif;}
body{display:flex; flex-direction:column; min-height:100vh;}

/* ---------- Toolbar ---------- */
.toolbar{
  background:#1e1e1e; border-bottom:1px solid rgba(255,255,255,0.08);
  padding:14px 20px; display:flex; flex-direction:column; gap:10px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; align-self:center;}
.brand-icon{width:28px; height:28px; border-radius:6px;}
.brand-name{font-family:system-ui, sans-serif; font-weight:800; font-size:18px; color:#fff; letter-spacing:.01em;}
.brand-name span{color:#ffce1b;}
.toolbar-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
}

#word-input-bar{display:flex; gap:8px;}
#word-input-bar input{
  background:#fff; border:2px solid rgba(255,255,255,0.3); border-radius:8px;
  color:#111; font-family:system-ui, sans-serif; font-size:14px; font-weight:600;
  padding:10px 14px; width:220px;
}
#word-input-bar input::placeholder{color:#888; font-weight:400;}
#word-input-bar button{
  background:#ffce1b; color:#111; border:none; border-radius:8px;
  font-family:system-ui, sans-serif; font-weight:700; font-size:14px;
  padding:10px 18px; cursor:pointer;
}
#word-input-bar button:disabled{opacity:.5; cursor:not-allowed;}

#word-status{
  text-align:center; font-size:13px; font-weight:700; min-height:18px; margin-top:-10px;
  opacity:0; transition:opacity .2s ease;
}
#word-status.show{opacity:1;}
#word-status.good{color:#8fd9a8;}
#word-status.bad{color:#e08a7a;}
#word-status.checking{color:#ccc;}

#type-tabs{display:flex; gap:2px; background:#111; border-radius:8px; padding:3px;}
#type-tabs button{
  background:transparent; color:#ccc; border:none; border-radius:6px;
  font-family:system-ui, sans-serif; font-weight:700; font-size:14px;
  padding:10px 20px; cursor:pointer;
}
#type-tabs button.active{background:#2f6f4e; color:#fff;}

#mode-toggle{display:flex; gap:2px; background:#111; border-radius:8px; padding:3px;}
#mode-toggle button{
  background:transparent; color:#ccc; border:none; border-radius:6px;
  font-family:system-ui, sans-serif; font-weight:700; font-size:13px;
  padding:9px 14px; cursor:pointer;
}
#mode-toggle button.active{background:#ffce1b; color:#111;}
#mode-toggle button:disabled{opacity:.35; cursor:not-allowed;}

#stats{
  display:flex; gap:12px;
  background:#111; border-radius:8px; padding:9px 14px;
  font-family:system-ui, sans-serif; font-weight:700; font-size:13px; color:#eee;
}
#timer{color:#ffce1b;}

#new-game-btn{
  background:#2f6f4e; color:#fff; border:none; border-radius:8px;
  font-family:system-ui, sans-serif; font-weight:700; font-size:14px;
  padding:10px 18px; cursor:pointer;
}
#new-game-btn:hover{background:#3f8c63;}

#leaderboard-btn{
  background:transparent; color:#ccc; border:1px solid rgba(255,255,255,0.2); border-radius:8px;
  font-family:system-ui, sans-serif; font-weight:700; font-size:14px;
  padding:10px 18px; cursor:pointer;
}
#leaderboard-btn:hover{color:#fff; border-color:#ffce1b;}

/* ---------- Main / cube viewport ---------- */
main{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:20px; gap:20px; position:relative;
}

#overlay{
  background:rgba(20,20,20,0.75); color:#eee;
  font-family:system-ui, sans-serif; font-size:13px; line-height:1.5;
  padding:12px 16px; border-radius:8px; max-width:480px; text-align:center;
}
#overlay b{color:#ffce1b;}

#cube-viewport{
  position:relative; width:100%; max-width:900px; height:60vh; min-height:420px;
  background:#1a1a1a; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}
#cube-viewport canvas{display:block; width:100%; height:100%;}

/* ---------- Ad slot ---------- */
.ad-slot{width:100%; max-width:728px; display:flex; align-items:center; justify-content:center;}
.ad-slot.placeholder{
  min-height:90px; border:1px dashed rgba(255,255,255,0.2); border-radius:8px;
  color:#888; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  text-align:center; padding:8px;
}

/* ---------- Simple content pages (privacy/terms) ---------- */
.page{max-width:680px; margin:0 auto; padding:40px 20px; flex:1; width:100%;}
.page h1{font-size:28px; margin-bottom:6px;}
.page-meta{color:#888; font-size:13px; margin-bottom:24px;}
.page-card{background:#1e1e1e; border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:28px;}
.page-card h2{font-size:17px; margin:24px 0 8px; color:#ffce1b;}
.page-card h2:first-child{margin-top:0;}
.page-card p{color:#ccc; font-size:14px; line-height:1.6; margin-bottom:10px;}
.page-card a{color:#3f8c63;}

/* ---------- Footer ---------- */
/* ---------- Affiliate card ---------- */
.affiliate-card{
  width:100%; max-width:600px;
  background:#1e1e1e; border:1px solid rgba(255,255,255,0.1); border-radius:12px;
  padding:20px; transition:border-color .15s ease, transform .15s ease;
}
.affiliate-card:has(.aff-link:hover){border-color:#ffce1b; transform:translateY(-2px);}
.aff-link{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  text-decoration:none; color:inherit; cursor:pointer;
}
.aff-icon{
  width:44px; height:44px; border-radius:8px; background:#111;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
}
.aff-body{flex:1; min-width:180px;}
.aff-body h3{font-size:15px; margin:0 0 4px; color:#fff;}
.aff-body p{font-size:13px; margin:0; color:#aaa;}
.btn-link{
  background:#ffce1b; color:#111; font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:8px; white-space:nowrap;
}
.affiliate-disclosure{font-size:11px; color:#777; margin-top:12px;}

footer{
  padding:20px; text-align:center; font-size:13px; color:#888;
  border-top:1px solid rgba(255,255,255,0.08);
}
.foot-links{margin-top:8px; font-size:12px;}
.foot-links a{color:#aaa; text-decoration:none;}
.foot-links a:hover{color:#ffce1b;}

/* ---------- Solved banner (now an interactive score-submission card) ---------- */
#solved-banner{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9);
  z-index:20; background:#1e1e1e; border:1px solid rgba(255,255,255,0.1);
  color:#eee; font-family:system-ui, sans-serif;
  padding:32px; border-radius:16px; width:90%; max-width:380px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
#solved-banner.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);}
#solved-title{font-weight:800; font-size:32px; color:#ffce1b; margin-bottom:8px;}
#solved-stats{font-size:15px; color:#ccc; margin-bottom:20px;}
#solved-stats b{color:#fff;}

#submit-score-row{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
#submit-score-row input{
  background:#fff; color:#111; border:none; border-radius:8px;
  padding:10px 12px; font-size:14px; font-family:system-ui, sans-serif;
}
#submit-score-row button{
  background:#2f6f4e; color:#fff; border:none; border-radius:8px;
  padding:11px; font-weight:700; font-size:14px; cursor:pointer;
}
#submit-score-row button:hover{background:#3f8c63;}
#submit-score-row button:disabled{opacity:.5; cursor:not-allowed;}

#submit-status{font-size:13px; font-weight:700; min-height:18px; margin-bottom:14px;}
#submit-status.good{color:#8fd9a8;}
#submit-status.bad{color:#e08a7a;}

#solved-close{
  background:transparent; border:1px solid rgba(255,255,255,0.2); color:#aaa;
  border-radius:8px; padding:8px 16px; font-size:13px; cursor:pointer;
}
#solved-close:hover{color:#fff;}

/* ---------- Leaderboard modal ---------- */
#leaderboard-modal{
  position:fixed; inset:0; z-index:25; background:rgba(0,0,0,0.6);
  display:none; align-items:center; justify-content:center; padding:20px;
}
#leaderboard-modal.show{display:flex;}
#leaderboard-modal .modal-content{
  background:#1e1e1e; border:1px solid rgba(255,255,255,0.1); border-radius:16px;
  padding:28px; width:100%; max-width:420px; max-height:80vh; overflow-y:auto; position:relative;
}
.modal-close{
  position:absolute; top:16px; right:16px; background:transparent; border:none;
  color:#888; font-size:24px; line-height:1; cursor:pointer;
}
.modal-close:hover{color:#fff;}
#leaderboard-modal h2{color:#fff; font-size:20px; margin-bottom:16px;}

.lb-filters{display:flex; gap:8px; margin-bottom:16px;}
.lb-filters select{
  background:#111; color:#eee; border:1px solid rgba(255,255,255,0.2); border-radius:8px;
  padding:8px 10px; font-size:13px; flex:1;
}

#lb-table{width:100%; border-collapse:collapse; font-size:13px;}
#lb-table th{text-align:left; color:#ffce1b; font-size:11px; text-transform:uppercase; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,0.15);}
#lb-table td{padding:7px 8px; border-bottom:1px solid rgba(255,255,255,0.06); color:#ddd;}
#lb-table td:first-child{color:#888; width:24px;}

#lb-status{font-size:13px; color:#888; text-align:center; padding:10px 0;}

@media (max-width:640px){
  #cube-viewport{height:50vh; min-height:340px;}
  .toolbar{padding:10px 12px;}
}