:root {
    --bg:#070707; --surface:#14100f; --surface2:#211817; --surface3:#2b201e; --border:#3a2a27;
    --accent:#ff4f7e; --accent2:#ff8a3d; --text:#f4efe8; --muted:#9b8f88;
    --green:#22c55e; --yellow:#eab308; --red:#ef4444; --blue:#38bdf8;
    --green-bg:#052e16; --yellow-bg:#241900; --wrong-bg:#181514; --arrow-bg:#101820; --danger:#ef4444;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body {
    min-height:100vh;
    background:
      linear-gradient(rgba(7,5,4,.76), rgba(7,5,4,.92)),
      var(--game-bg-url, url("/images/backgrounds/home.webp")) center / cover fixed no-repeat,
      radial-gradient(circle at top, rgba(255,79,126,.25), transparent 45%),
      var(--bg);
    color:var(--text);
    font-family:'Barlow',sans-serif;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at top, rgba(255,90,31,.18), transparent 46%); z-index:-1; }
  header { width:100%; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; background:rgba(12,8,7,.92); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; backdrop-filter:blur(10px); }
  .logo {
  font-family:'Bebas Neue',sans-serif;
  font-size:34px;
  letter-spacing:4px;
  cursor:pointer;
  transition:opacity .15s; }
  .logo:hover{opacity:.85; }
  .logo,
  .logo:visited{
  color:inherit;
  text-decoration:none; }
  .logo span { color:var(--accent); }
  .header-btns { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
  .btn-icon,.mode-btn { background:var(--surface2); border:1px solid var(--border); color:var(--muted); padding:10px 16px; border-radius:10px; cursor:pointer; font-family:'Barlow',sans-serif; font-size:14px; font-weight:700; transition:all .15s; }
  .btn-icon:hover,.mode-btn:hover { border-color:var(--accent); color:var(--text); }
  .mode-btn.active { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:var(--accent2); }
  .game-shell { width:min(1280px,96vw); min-height:calc(100vh - 78px); display:flex; flex-direction:column; align-items:center; padding:8vh 12px 60px; }
  .hero { text-align:center; margin-bottom:24px; }
  .hero-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(62px,10vw,118px); letter-spacing:8px; line-height:.9; background:linear-gradient(160deg,#fff 25%,var(--accent) 70%,var(--accent2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:0 16px 45px rgba(0,0,0,.45); }
  .hero-sub { font-family:'Barlow Condensed',sans-serif; font-size:20px; letter-spacing:6px; color:var(--muted); text-transform:uppercase; margin-top:12px; }
  .char-remaining { display:inline-flex; gap:8px; align-items:center; background:var(--surface2); border:1px solid var(--border); border-radius:999px; padding:8px 18px; font-size:15px; color:var(--muted); margin-top:18px; font-weight:700; }
  .char-remaining span { color:var(--accent); }
  .search-area { width:min(820px,94vw); position:relative; z-index:20; }
  .search-wrap { position:relative; display:flex; gap:14px; }
  #search-input { flex:1; background:var(--surface); border:2px solid var(--border); color:var(--text); padding:22px 26px; font-family:'Barlow',sans-serif; font-size:24px; border-radius:16px; outline:none; transition:border-color .15s, box-shadow .15s; box-shadow:0 16px 40px rgba(0,0,0,.35); }
  #search-input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,79,126,.18), 0 16px 40px rgba(0,0,0,.35); }
  #search-input:disabled { opacity:.45; cursor:not-allowed; }
  .btn-guess { background:var(--accent); border:none; color:#fff; padding:0 28px; border-radius:16px; font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:background .15s, transform .1s; min-width:140px; }
  .btn-guess:hover { background:var(--accent2); transform:translateY(-1px); } .btn-guess:disabled { opacity:.45; cursor:not-allowed; transform:none; }
  .dropdown { position:absolute; top:calc(100% + 10px); left:0; right:154px; background:var(--surface2); border:1px solid var(--border); border-radius:16px; z-index:200; max-height:430px; overflow-y:auto; display:none; box-shadow:0 24px 70px rgba(0,0,0,.55); }
  .dropdown.open { display:block; }
  .dropdown-item { padding:13px 18px; cursor:pointer; display:flex; align-items:center; gap:18px; font-size:20px; border-bottom:1px solid var(--border); transition:background .1s; }
  .dropdown-item:last-child { border-bottom:none; } .dropdown-item:hover,.dropdown-item.active { background:var(--surface3); }
  .char-thumb,.cell-thumb-sm,.result-char-img { background:var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .char-thumb { width:72px; height:72px; border-radius:14px; font-size:22px; font-weight:800; color:var(--muted); flex-shrink:0; border:1px solid rgba(255,255,255,.08); }
  .char-thumb img,.cell-thumb-sm img,.result-char-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .control-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; margin:20px 0 8px; }
  .guess-counter { font-size:17px; color:var(--muted); font-weight:700; } .guess-counter span { color:var(--text); }
  .btn-small { background:var(--surface2); border:1px solid var(--border); color:var(--muted); padding:12px 18px; border-radius:12px; font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; }
  .btn-small:hover { border-color:var(--accent); color:var(--text); }
  .status-message { min-height:26px; color:var(--accent); font-weight:700; margin:6px 0 8px; text-align:center; }
  .result-card { max-width:660px; width:94%; background:var(--surface); border-radius:22px; padding:34px; text-align:center; margin:24px 0 6px; display:none; box-shadow:0 24px 80px rgba(0,0,0,.5); }
  .result-card.show { display:block; animation:fadeUp .35s ease-out; } .result-card.win { border:1px solid var(--green); } .result-card.lose { border:1px solid var(--danger); }
  .result-title { font-family:'Bebas Neue',sans-serif; font-size:52px; letter-spacing:5px; } .result-title.win { color:var(--green); } .result-title.lose { color:var(--danger); }
  .result-sub { color:var(--muted); font-size:18px; margin:8px 0 20px; }
  .result-char-img { width:170px; height:240px; border-radius:22px; margin:0 auto 18px; font-size:54px; font-weight:800; background:var(--surface2); border:3px solid var(--accent); color:var(--accent); }
  .target-details { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; text-align:left; }
  .detail-box { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-width:0; }
  .detail-label { color:var(--muted); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; font-weight:800; }
  .detail-value { color:var(--text); font-size:15px; margin-top:3px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .countdown { margin-top:14px; color:var(--muted); font-size:15px; font-weight:700; }
  .guesses-area { width:100%; max-width:1220px; padding:22px 0 50px; overflow-x:auto; }
  .col-labels,.guess-row { display:grid; grid-template-columns:220px repeat(6, minmax(118px, 1fr)); gap:7px; margin-bottom:7px; min-width:1080px; }
  .col-label { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); text-align:center; padding:4px 2px; }
  .col-label:first-child { text-align:left; padding-left:8px; }
  .guess-row { animation:fadeUp .28s ease-out; }
  .cell { background:var(--wrong-bg); border:1px solid var(--border); border-radius:12px; padding:10px 8px; text-align:center; font-size:14px; font-weight:700; min-height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#c8b8b1; line-height:1.25; position:relative; }
  .cell.name-cell { flex-direction:row; justify-content:flex-start; gap:12px; text-align:left; padding:10px 12px; font-size:15px; color:var(--text); background:var(--surface2); }
  .cell.name-cell.correct { background:var(--green-bg); border-color:var(--green); color:var(--green); }
  .cell-thumb-sm { width:58px; height:58px; border-radius:12px; font-size:18px; font-weight:800; color:var(--muted); flex-shrink:0; }
  .name-text { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .cell.correct { background:var(--green-bg); border-color:var(--green); color:var(--green); }
  .cell.partial { background:var(--yellow-bg); border-color:var(--yellow); color:var(--yellow); }
  .cell.wrong { background:var(--wrong-bg); border-color:var(--border); color:#c8b8b1; }
  .cell.arrow { background:var(--arrow-bg); border-color:#334155; color:var(--blue); }
  .hint-arrow { font-size:26px; line-height:1; margin-bottom:4px; color:var(--blue); }
  .tag-list { display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:center; max-width:100%; }
  .tag-pill { border-radius:999px; padding:4px 7px; background:rgba(255,255,255,.08); color:#d8c9c3; border:1px solid rgba(255,255,255,.06); font-size:11px; }
  .tag-pill.match { background:var(--green-bg); border-color:var(--green); color:var(--green); }
  .modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.84); z-index:500; display:none; align-items:center; justify-content:center; padding:20px; } .modal-bg.open { display:flex; }
  .modal { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px; max-width:560px; width:100%; position:relative; max-height:90vh; overflow-y:auto; }
  .modal h2 { font-family:'Bebas Neue',sans-serif; font-size:36px; letter-spacing:4px; margin-bottom:14px; } .modal p { color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:8px; }
  .modal-close { position:absolute; top:14px; right:16px; background:transparent; border:none; color:var(--muted); font-size:24px; cursor:pointer; }
  .stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
  .stat-box { background:var(--surface2); border-radius:12px; padding:14px 8px; text-align:center; } .stat-num { font-family:'Bebas Neue',sans-serif; font-size:34px; color:var(--accent); } .stat-lbl { font-size:11px; color:var(--muted); font-weight:800; letter-spacing:1px; text-transform:uppercase; }
  .toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(60px); background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:13px 22px; border-radius:10px; font-size:15px; font-weight:700; z-index:999; transition:transform .28s; pointer-events:none; }
  .toast.show { transform:translateX(-50%) translateY(0); }
  @keyframes fadeUp { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
  ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track { background:var(--surface); } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
  @media(max-width:760px){ header{flex-direction:column;gap:12px}.game-shell{padding-top:5vh}.search-wrap{flex-direction:column}.dropdown{right:0}.btn-guess{padding:16px 20px}.target-details{grid-template-columns:1fr}.col-labels,.guess-row{grid-template-columns:170px repeat(6,104px);min-width:900px}.hero-title{letter-spacing:5px}.result-char-img{width:150px;height:212px} }


/* Engine additions */
body.ui-large {
  --search-scale: 1.1;
  --game-content-scale: 1;
}

body.ui-medium {
  --search-scale: .7;
  --game-content-scale: .8;
}

body.ui-small {
  --search-scale: .5;
  --game-content-scale: .65;
}

.search-area {
  transform: scale(var(--search-scale));
  transform-origin: top center;
  margin-bottom: calc((1 - var(--search-scale)) * -42px);
}

.result-card {
  transform: scale(var(--game-content-scale));
  transform-origin: top center;
}

.guesses-area {
  transform: scale(var(--game-content-scale));
  transform-origin: top center;
}

body.ui-medium .guesses-area,
body.ui-small .guesses-area {
  margin-top: calc((1 - var(--game-content-scale)) * -40px);
  margin-bottom: calc((1 - var(--game-content-scale)) * -80px);
}

body.ui-medium .result-card,
body.ui-small .result-card {
  margin-bottom: calc((1 - var(--game-content-scale)) * -80px);
}

body.ui-small .dropdown {
  max-height: 330px;
}

.segmented {
  display:flex;
  gap:6px;
  padding:4px;
  border:1px solid var(--border);
  background:rgba(20,16,15,.78);
  border-radius:14px;
  align-items:center;
  flex-wrap:wrap;
}

.segmented-label {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:0 5px;
}

.mode-btn.compact {
  padding:8px 11px;
  font-size:12px;
  border-radius:9px;
}

.game-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  width:min(900px,92vw);
  margin-top:28px;
}

.game-card {
  background:rgba(20,16,15,.9);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:18px;
  padding:22px;
  text-decoration:none;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  transition:transform .15s,border-color .15s;
}

.game-card:hover {
  transform:translateY(-2px);
  border-color:var(--accent);
}

.game-card h2 {
  font-family:'Bebas Neue',sans-serif;
  font-size:38px;
  letter-spacing:3px;
  margin-bottom:8px;
}

.game-card p {
  color:var(--muted);
  font-weight:700;
}

@media(max-width:760px){
  .search-area{
    transform:none;
    margin-bottom:0;
  }

  .result-card,
  .guesses-area{
    transform:none;
  }

  body.ui-medium #search-input{
    font-size:20px;
    padding:18px 20px;
  }

  body.ui-small #search-input{
    font-size:18px;
    padding:14px 16px;
  }
}

.game-card-cta { display:inline-flex; margin-top:18px; color:var(--accent); font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.hub-page .game-shell { justify-content:flex-start; }
@media(max-width:760px){ .header-btns { justify-content:center; } }


/* v1.3 background/card additions */
.game-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(rgba(20,16,15,.55), rgba(20,16,15,.92)),
    var(--card-bg-url, none) center / cover no-repeat,
    rgba(20,16,15,.9);
}
.game-card h2, .game-card p, .game-card-cta {
  position: relative;
  z-index: 1;
}