:root{
  --bg:#990000;         /* Indiana Hoosiers crimson (page background) */
  --on-bg:#f4ecd6;      /* light text/dividers that sit on the crimson bg */
  --cream:#f4ecd6;
  --ink:#161327;
  --green:#3bd93b;
  --green-d:#2bb52b;
  --yellow:#ffd23a;
  --orange:#ff8c1a;     /* nationality that borders the target country */
  --gold:#d9b45a;
  --white:#ffffff;
  --gray:#9a94a6;
  --accent:#ff8c1a;
  --blue:#39a7e0;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Open Sans",system-ui,sans-serif;
  font-weight:500;   /* medium; explicit .bold spots below stay 700 */
  background-color:var(--bg);
  background-image:radial-gradient(rgba(0,0,0,0.14) 1.2px, transparent 1.2px);
  background-size:14px 14px;
  color:var(--ink);
  padding:24px clamp(8px,3vw,48px) 60px;
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  gap:16px;
  align-items:stretch;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.guess-box{
  flex:1 1 420px;
  display:flex;
  align-items:center;
  background:var(--cream);
  border:4px solid var(--ink);
  border-radius:10px;
  box-shadow:5px 6px 0 var(--ink);
  overflow:hidden;
}
.qmark{
  font-size:26px;
  padding:0 18px;
  border-right:3px solid var(--ink);
  align-self:stretch;
  display:flex;align-items:center;
}
#guess-input{
  border:none;outline:none;
  font-family:inherit;
  font-size:22px;
  padding:16px 18px;
  width:100%;
  background:transparent;
  color:var(--ink);
}
#guess-input::placeholder{color:var(--gray);}

/* ---------- Autocomplete dropdown (mobile-friendly replacement for <datalist>) ---------- */
.ac-menu{
  position:absolute;
  z-index:1000;
  margin-top:6px;
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:10px;
  box-shadow:5px 6px 0 var(--ink);
  max-height:min(60vh,340px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.ac-menu.hidden{display:none;}
.ac-item{
  padding:14px 16px;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  border-bottom:2px solid rgba(22,19,39,.12);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ac-item:last-child{border-bottom:none;}
.ac-item.active,.ac-item:hover{background:var(--gold);}

.btn{
  font-family:inherit;
  font-size:18px;
  background:var(--cream);
  border:4px solid var(--ink);
  border-radius:10px;
  box-shadow:5px 6px 0 var(--ink);
  padding:12px 20px;
  cursor:pointer;
  display:flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.btn:active{transform:translate(2px,2px);box-shadow:3px 4px 0 var(--ink);}
.btn-accent{background:var(--yellow);color:var(--ink);}  /* Play Again — yellow */
#mode-btn{background:var(--cream);font-weight:700;}       /* Game Mode bar — cream, bold */
.ico{filter:grayscale(0);}

.timer{
  font-size:24px;
  background:var(--cream);
  border:4px solid var(--ink);
  border-radius:10px;
  box-shadow:5px 6px 0 var(--ink);
  padding:12px 18px;
  display:flex;align-items:center;
  letter-spacing:1px;
}

/* ---------- Grid ---------- */
.grid-header,.guess-row{
  display:grid;
  grid-template-columns:1.6fr repeat(9,1fr);
  align-items:center;
  gap:6px;
}
.grid-header{
  padding:10px 12px 16px;
  border-bottom:3px dashed var(--on-bg);
  margin-bottom:16px;
  color:var(--on-bg);
}
.grid-header .col{
  text-align:center;
  font-size:clamp(11px,1.15vw,18px);
  letter-spacing:.5px;
}
.grid-header .col-name{text-align:center;}

#rows{display:flex;flex-direction:column;gap:14px;}

.guess-row{
  background:var(--cream);
  border:4px solid var(--ink);
  border-radius:8px;
  box-shadow:5px 7px 0 #555555;
  padding:8px 12px;
  animation:pop .25s ease;
}
@keyframes pop{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}

.cell{
  text-align:center;
  font-size:clamp(11px,1.05vw,17px);
  padding:6px 2px;
  display:flex;align-items:center;justify-content:center;gap:3px;
  min-height:46px;
}
.cell-name{
  justify-content:center;
  border-right:2px dashed var(--ink);
  font-size:clamp(12px,1.1vw,18px);
}
.chip{
  border-radius:8px;
  border:3px solid var(--ink);
  padding:4px 8px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:clamp(10px,1vw,16px);
  line-height:1;
}
.chip.green{background:var(--green);}
.chip.yellow{background:var(--yellow);}
.chip.orange{background:var(--orange);}   /* nationality borders the target */
.arrow{font-weight:bold;}

/* ---------- Reveal ---------- */
.reveal{
  display:flex;gap:20px;flex-wrap:wrap;
  margin-bottom:28px;
}
.reveal-card{
  flex:2 1 520px;
  display:flex;gap:18px;
  background:var(--cream);
  border:4px solid var(--ink);
  border-radius:10px;
  box-shadow:5px 6px 0 var(--ink);
  padding:16px;
}
.reveal-img{
  width:150px;height:180px;object-fit:cover;
  background:#ddd;border:3px solid var(--ink);border-radius:6px;
}
.reveal-info{flex:1;}
.reveal-label{color:var(--gray);font-style:italic;font-size:16px;}
.reveal-name{font-size:34px;margin:4px 0;}
.reveal-info hr{border:none;border-top:3px dashed var(--ink);margin:10px 0;}
.reveal-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px;
}
.reveal-stats .k{color:var(--gray);font-size:12px;text-transform:uppercase;}
.reveal-stats .v{font-size:20px;}
.reveal-side{flex:1 1 260px;display:flex;flex-direction:column;gap:14px;}
.reveal-actions{display:flex;gap:12px;}
.reveal-result{
  background:var(--cream);
  border:4px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 var(--ink);
  padding:16px;flex:1;
}
.result-title{font-size:30px;}
.result-sub{color:var(--gray);font-style:italic;font-size:14px;margin-top:6px;}
.result-guesses{font-size:26px;}
.result-streak{font-size:26px;}

/* ---------- Title Defense reveal résumé ---------- */
.reveal-title{display:flex;flex-direction:column;gap:12px;}
.title-summary{display:flex;gap:10px;flex-wrap:wrap;}
.title-summary .ts-item{
  flex:1 1 90px;
  background:var(--cream);border:3px solid var(--ink);border-radius:8px;
  padding:8px 10px;text-align:center;
}
.title-summary .k{color:var(--gray);font-size:11px;text-transform:uppercase;}
.title-summary .v{font-size:22px;}
.title-belts{display:flex;gap:8px;flex-wrap:wrap;}
.belt-chip{
  background:var(--yellow);border:3px solid var(--ink);border-radius:8px;
  padding:4px 10px;font-size:14px;
}
.title-log{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto;}
.log-row{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;
  border-bottom:2px dashed rgba(0,0,0,.18);padding:4px 2px;
  font-size:14px;
}
.log-year{color:var(--gray);font-weight:bold;}
.log-result{
  border:2px solid var(--ink);border-radius:6px;padding:2px 7px;font-weight:bold;font-size:12px;
}
.log-result.won{background:var(--green);}
.log-result.lost{background:#ff6b6b;}
.log-result.draw{background:var(--yellow);}
.log-opp{font-weight:bold;}
.log-div{color:#4a4658;font-size:12px;text-align:right;}
.log-belt{margin-right:3px;}

/* ---------- Game mode modal ---------- */
.mode-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:16px;
}
.mode-card{
  background:var(--cream);
  border:4px solid var(--ink);border-radius:12px;
  box-shadow:6px 8px 0 var(--ink);
  padding:22px;width:min(520px,94vw);
  display:flex;flex-direction:column;gap:14px;
}
.mode-title{font-size:26px;}
.mode-card hr{border:none;border-top:3px dashed var(--ink);margin:2px 0 6px;width:100%;}
.mode-option{
  text-align:left;font-family:inherit;cursor:pointer;
  background:var(--cream);
  border:4px solid var(--ink);border-radius:10px;
  box-shadow:4px 5px 0 var(--ink);
  padding:14px 16px;
}
.mode-option:active{transform:translate(2px,2px);box-shadow:2px 3px 0 var(--ink);}
.mode-option.selected{background:var(--green);}
.mode-name{font-size:20px;font-weight:700;}
.mode-desc{font-size:14px;color:#4a4658;margin-top:4px;}
#mode-close{align-self:flex-end;}

/* ---------- Title Defense clue panel ---------- */
.clue-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 12px 14px;border-bottom:3px dashed var(--on-bg);margin-bottom:16px;
  font-size:clamp(14px,1.4vw,20px);
  font-weight:700;   /* caption ("Guess the fighter") + attempts counter */
  color:var(--on-bg);
}
.attempts{font-size:clamp(13px,1.3vw,18px);}
#clue-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.clue-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  background:var(--cream);
  border:4px solid var(--ink);border-radius:8px;
  box-shadow:5px 7px 0 #555555;
  padding:14px 18px;
  font-size:clamp(13px,1.3vw,19px);
}
.clue-result{
  border:3px solid var(--ink);border-radius:8px;padding:4px 10px;font-size:clamp(12px,1.2vw,17px);
}
.clue-result.won{background:var(--green);}
.clue-result.lost{background:#ff6b6b;}
.clue-result.draw{background:var(--yellow);}
.clue-opp{font-size:clamp(14px,1.4vw,20px);}
.clue-div{color:#4a4658;}
.clue-year{color:var(--gray);}
#title-grid{margin-top:20px;}
#title-grid .grid-header{margin-bottom:12px;}
#title-rows{display:flex;flex-direction:column;gap:14px;}

/* ---------- Defining Moments ---------- */
.m-clue-card{
  background:var(--cream);border:4px solid var(--ink);border-radius:10px;
  box-shadow:5px 7px 0 #555555;
  padding:20px 22px;margin-bottom:18px;
}
.m-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.m-tags .chip{background:var(--cream);}
.m-clue{font-size:clamp(16px,1.6vw,22px);line-height:1.5;color:var(--ink);}
.m-form{
  display:grid;
  grid-template-columns:0.7fr 1.3fr 1.3fr 0.7fr;
  gap:12px 14px;align-items:end;margin-bottom:18px;
}
.m-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.m-field span{color:var(--on-bg);font-size:12px;text-transform:uppercase;letter-spacing:.6px;}
.m-field input{
  font-family:inherit;font-weight:500;font-size:18px;
  background:var(--cream);color:var(--ink);
  border:4px solid var(--ink);border-radius:10px;
  box-shadow:3px 4px 0 var(--ink);
  padding:12px 14px;outline:none;width:100%;
}
.m-field input::placeholder{color:var(--gray);}
#m-submit{grid-column:1 / -1;justify-content:center;height:52px;}
.m-reveal{
  background:var(--cream);border:4px solid var(--ink);border-radius:10px;
  box-shadow:5px 6px 0 var(--ink);padding:16px 20px;
  display:flex;flex-direction:column;gap:10px;
}
.m-points{font-size:24px;font-weight:700;}
.m-answer{display:flex;flex-direction:column;gap:6px;}
.ma-row{font-size:16px;border-left:5px solid var(--ink);padding:4px 10px;border-radius:4px;}
.ma-row.hit{background:rgba(59,217,59,.18);border-left-color:var(--green-d);}
.ma-row.miss{background:rgba(255,107,107,.16);border-left-color:#c94b4b;}
.ma-sub{color:var(--gray);}
#m-next{align-self:flex-start;}

/* ---------- Play-style modal + Daily panel ---------- */
.play-option{
  text-align:left;font-family:inherit;cursor:pointer;
  background:var(--cream);border:4px solid var(--ink);border-radius:10px;
  box-shadow:4px 5px 0 var(--ink);padding:14px 16px;
}
.play-option:active{transform:translate(2px,2px);box-shadow:2px 3px 0 var(--ink);}
.play-option.selected{background:var(--green);}
.daily-panel{display:flex;justify-content:center;margin-bottom:28px;}
.daily-card{
  background:var(--cream);border:4px solid var(--ink);border-radius:12px;
  box-shadow:6px 8px 0 var(--ink);padding:22px 26px;
  width:min(560px,94vw);display:flex;flex-direction:column;gap:12px;
  align-items:center;text-align:center;
}
.daily-card hr{border:none;border-top:3px dashed var(--ink);width:100%;margin:2px 0;}
.daily-sub{color:var(--ink);font-size:16px;}
.daily-meta{display:flex;gap:32px;}
.daily-meta .k{color:var(--gray);font-size:12px;text-transform:uppercase;letter-spacing:.5px;}
.daily-meta .v{font-size:28px;font-weight:700;}

.hidden{display:none !important;}

/* ---------- Account level box (fixed, bottom-left) ---------- */
.level-box{
  position:fixed;left:16px;bottom:16px;z-index:50;
  display:flex;align-items:center;gap:12px;
  background:var(--cream);
  border:4px solid var(--ink);border-radius:12px;
  box-shadow:5px 6px 0 #555555;
  padding:10px 14px;
}
.level-badge{display:flex;flex-direction:column;align-items:center;line-height:1.05;}
.level-k{font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--gray);}
.level-num{font-size:30px;font-weight:700;color:var(--ink);}
.level-prog{display:flex;flex-direction:column;gap:5px;width:132px;}
.level-bar{
  height:12px;background:rgba(0,0,0,.14);
  border:2px solid var(--ink);border-radius:7px;overflow:hidden;
}
.level-bar-fill{height:100%;width:0;background:var(--green);transition:width .45s ease;}
.level-points{font-size:12px;font-weight:700;color:var(--ink);text-align:right;}
.level-box.leveled{animation:levelpop .6s ease;}
@keyframes levelpop{
  0%{transform:scale(1);}
  35%{transform:scale(1.12);box-shadow:5px 6px 0 var(--green-d);}
  100%{transform:scale(1);}
}

@media(max-width:820px){
  body{font-size:12px;}
  .cell,.grid-header .col{font-size:9px;}
  .reveal-stats{grid-template-columns:repeat(2,1fr);}
  .m-form{grid-template-columns:1fr 1fr;}
  .level-box{left:8px;bottom:8px;padding:7px 10px;gap:8px;}
  .level-num{font-size:22px;}
  .level-prog{width:100px;}
}