:root {
  --bg: #0f1115; --fg: #e8eaf0; --muted: #a0a4ae;
  --brand: #5ee1a7; --chip: #232733; --accent: #7bdff6; --warn:#ffb84d;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background: var(--bg); color: var(--fg);
}

/* Header compact */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #1c1f29; }
.topbar h1 { margin:0; font-size:22px; font-weight:800; letter-spacing:.3px; }
.topbar .actions button { margin-left:8px; }

/* Buttons */
.ghost { background:transparent; color:var(--fg); border:1px solid #262a36; padding:8px 12px; border-radius:10px; cursor:pointer; }
.ghost:hover { border-color:#3a4050; }

/* Layout */
main { display:flex; justify-content:center; padding:16px; }

/* The board width equals the image box width (so it can’t overflow and go off-centre) */
#game {
  width: min(92vw, calc(100vh - 280px));
  margin: 0 auto;
}

/* Square image window fully centred; it fills #game and never exceeds it */
.image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;               /* perfect square, height follows width */
  background:#0b0d12;
  border:1px solid #1a1d26;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  margin: 0 auto;                    /* belt & braces centring */
}

/* Image behaviour (crops fill the square) */
.image-wrap img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;     /* explicit centring */
  opacity:0; transition: opacity .25s ease;
}

/* On reveal, show the full original letterboxed inside the square */
.image-wrap img.contain {
  object-fit: contain;                /* fit whole image */
  background:#000;                    /* letterbox bars */
}

.image-wrap img.loaded { opacity:1; }

/* Toast message overlay */
.msg {
  position:absolute; left:0; right:0; bottom:0; margin:0 auto; text-align:center;
  padding:10px 12px; background:rgba(0,0,0,.55);
  transform: translateY(100%); transition: transform .25s ease, opacity .25s ease; opacity:0;
}
.msg.show { transform: translateY(0); opacity:1; }
.msg.hide { opacity:0; }

/* Input / chips */
#guessForm { margin-top:12px; }
.name-row { margin-bottom:6px; }
.name-row input { width:100%; padding:10px 12px; background:#0d1016; color:var(--fg); border:1px solid #1a1e27; border-radius:10px; }
.chip-input { display:flex; align-items:center; background:#0b0d12; border:1px solid #1a1e27; border-radius:12px; padding:8px; gap:8px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { background: var(--chip); border:1px solid #2a2f3d; color:#dfe3ed; padding:6px 10px; border-radius:999px; font-size:13px; }
.chip-locked { border-color:#3a7; background:#0e1a17; color:#9fe7c1; }
.chip-input input { flex:1; padding:8px 10px; background:transparent; border:0; color:var(--fg); outline:none; min-width:140px; }
.chip-input button { background:var(--brand); border:0; color:#0a0d12; padding:9px 14px; border-radius:10px; font-weight:700; cursor:pointer; }

/* Controls */
.controls { display:flex; align-items:center; gap:8px; margin-top:6px; }
.muted { color: var(--muted); }

/* Reveal overlay (inside image) */
.image-overlay {
  position:absolute; left:0; right:0; bottom:0;
  padding:12px;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color:#fff; font-size:14px;
}
.image-overlay .answer { font-weight:800; font-size:18px; margin-bottom:4px; }
.image-overlay .links a { color: var(--accent); text-decoration:none; }

/* Legacy reveal block stays hidden (we replaced it with overlay) */
.reveal { display:none !important; }

.hidden { display:none !important; }

/* Modal styles */
.modal { position:fixed; inset:0; background: rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal.hidden { display:none; }
.modal-inner { width:min(800px, 92vw); background:#0b0d12; border:1px solid #1a1e27; border-radius:14px; padding:16px; position:relative; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.modal .close { position:absolute; top:10px; right:12px; background:transparent; border:0; color:#cbd3e1; font-size:20px; cursor:pointer; }
.animate-pop { animation: pop .2s ease; }
@keyframes pop { from { transform: scale(.98); opacity:.8; } to { transform: scale(1); opacity:1; } }

.tabs { display:flex; gap:6px; margin-bottom:10px; }
.tabs button { border:1px solid #1f2430; background:#0d1016; color:#cbd3e1; padding:8px 10px; border-radius:10px; cursor:pointer; }
.tabs button.active { background:#0e1420; border-color:#334; }

.lb { width:100%; border-collapse: collapse; }
.lb th, .lb td { border-bottom:1px solid #1a1e27; padding:8px 6px; text-align:left; }
.lb th { color:#b8bfd0; font-weight:600; }

/* History list */
.history { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:10px; }
.history-item { display:flex; gap:10px; background:#0d1016; padding:8px; border:1px solid #1a1e27; border-radius:12px; text-decoration:none; color:inherit; }
.history-item img { width:86px; height:86px; object-fit:cover; border-radius:10px; border:1px solid #181c25; }
.history .title { font-weight:700; }

.noscroll { overflow:hidden; }

/* Small screens: trim paddings a bit more */
@media (max-height: 740px) {
  #game { width: min(92vw, calc(100vh - 240px)); }
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .image-wrap { height: 0; padding-top: 100%; }
  .image-wrap img { position: absolute; inset: 0; }
}
/* Nicely readable content inside modals / details */
.prose { line-height: 1.5; color: #dfe3ed; }
.prose h3 { margin: 12px 0 6px; font-size: 16px; }
.prose p { margin: 8px 0; }
.prose ul, .prose ol { margin: 8px 0 8px 20px; }
.seo-details summary { cursor: pointer; color: var(--accent); }
.seo-details > .prose { padding-top: 8px; }

/* kill the visible dropdown; we'll use the modal */
.seo-details { display: none !important; }