/* UI dynamism: gradients, sheen, floating, and smoother transitions */
:root{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: #f8fafc;
  background: linear-gradient(90deg, rgba(16,185,129,0.06), rgba(30,215,96,0.03)), #0f1113;
  --accent-1: #10b981;
  --accent-2: #1ed760;
  --warm-1: #f59e0b;
  --muted-card: #292929;
  --glass: rgba(255,255,255,0.03);
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(90deg, rgba(16,185,129,0.06), rgba(30,215,96,0.03)), #0f1113;
}

/* site topbar */
.site-topbar{
  background:#181818;
  color:#fff;
  padding:8px 12px;
  box-shadow:0 1px 0 rgba(0,0,0,.1);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:52px;
  display:flex;
  align-items:center;
}

/* ensure page content is not hidden behind the fixed header */
body { padding-top:52px; margin:0; }

.site-topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1100px;
  margin:0 auto;
  width:100%;
  position:relative;
  padding:0 12px;
  gap:12px;
}

.site-topbar .brand{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  font-size:1rem;
}

/* burger (hidden on desktop) */
.nav-toggle{
  background:transparent;
  border:0;
  color:#fff;
  font-size:22px;
  padding:6px 8px;
  display:none;
  z-index:1100;
}

.topnav{display:flex;gap:12px}
.topnav a{color:#fff;text-decoration:none;padding:6px}

/* Mobile: show burger at top-left, center the page title, keep links inside dropdown */
@media(max-width:720px){
  .nav-toggle{
    display:inline-block;
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
  }
  .site-topbar .brand{margin:0 auto; text-align:center; padding-right:36px;}
  .topnav{
    flex-direction:column;
    background:#181818;
    position:absolute;
    left:12px;
    top:34px;
    padding:8px;
    border-radius:6px;
    right:auto;
  }
  .topnav[hidden]{display:none}
}

/* Desktop: hide burger, show nav inline */
@media(min-width:721px){
  .nav-toggle{display:none}
  .topnav{display:flex}
  .topnav[hidden]{display:flex}

  /* center site title in the viewport (desktop) */
  .site-topbar .brand{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    top:0;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    text-align:center;
    max-width:60%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    z-index:2000;
  }

  /* keep container centered but place nav at the absolute left corner of the topbar */
  .site-topbar .container{
    position:static;             /* let .site-topbar be the positioning context */
    display:flex;
    align-items:center;
    justify-content:center;      /* center the container content (brand stays centered via fixed positioning) */
    max-width:1100px;
    margin:0 auto;
    width:100%;
    padding:0 12px;
    gap:12px;
  }

  /* pin the nav to the left corner of the topbar */
  .topnav{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    margin-left:0;
    z-index:2100;
  }
}

/* site header / gradient / glow / logo */
.site-header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px; /* unified padding */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transition: box-shadow .18s ease, transform .18s ease;
}

.site-logo{position:relative;display:block;margin:0 auto 16px;width:fit-content}
.site-logo img{height:120px;width:auto;display:block;position:relative;z-index:1}
.site-logo:hover img{transform:scale(1.02);filter:brightness(1.08)}

/* shiny hover sheen */
.site-logo::after{
  content:"";
  position:absolute;
  left:-65%;
  top:0;
  width:60%;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0));
  transform:skewX(-18deg) translateX(0);
  pointer-events:none;
  opacity:0;
  filter:blur(8px);
  mix-blend-mode:overlay;
  transition:opacity .12s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.site-logo:hover::after{
  opacity:0.55;
  transform: skewX(0) translateX(220%); /* no scale here */
}

main{max-width:900px;margin:28px auto;margin-bottom: 52px;padding:20px;background:#181818;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
h1{
  margin: 0 0 32px;
  text-align: center;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  -webkit-background-clip: text;
  filter:brightness(1.3);
  background-clip: text;
  color: transparent;
  letter-spacing: .4px;
  transform-origin: center;
  transition: transform .18s ease;
}
h1:hover { transform: scale(1.02); }

/* cards: subtle glass gradient, sheen, float animation */
@keyframes floaty { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes sheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes best-card-bounce {0%{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(-4px)}100%{transform:translateY(0)}}

.controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:14px}
.controls label{font-size:12px;color:#555}
.controls select,
.controls input,
.controls button {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #374151;
  background: #3a3a3a;
  color: #f8fafc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.controls button{background:#10b981;color:#fff;border:none;cursor:pointer}
.controls button:disabled{opacity:.6;cursor:default}
.hints ul, .results ul{list-style:none;padding:0;margin:8px 0}
.hints li, .results li{padding:8px;border:1px solid #374151;border-radius:12px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;background:#3a3a3a;color:#f8fafc}

#hintsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

#hintsContainer .hint-card {
  width: 90%;
  max-width: 1200px;
  min-width: 420px;
  margin: 0 auto 8px;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #292929;
  border: 1px solid #374151;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* hint header layout and remove button */
.hint-card { position: relative; }
.hint-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight:700; margin-bottom:8px; color:#f8fafc; }
.hint-card-header span { flex: 1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.remove-hint-btn {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: #10b981;
  color: #fff;
  font-weight:700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
}

/* value area hidden by default in editors (JS controls insertion) */
.hint-card .hint-value { min-width: 0; }

/* make hint value text match the hint type size/weight */
.hint-card .hint-field strong,
.hint-card .hint-value .small {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
}

/* center "Add Hint" when there is at least one visible hint card */
#hintsContainer:has(.hint-card:not([hidden])) + div .open-hint-btn {
  margin-left: auto;
  margin-right: auto;
  display: block;
  align-self: center;
}

/* ensure best-match ul uses same spacing */
.best-match .results{margin-top:6px}
.best-match { padding-top: 20px; }

.best-match .results li {
  transition: transform .12s ease, box-shadow .12s ease;
}
.best-match .results li:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

/* light shaded states for attr boxes when buttons selected */
.attr-box.state-check{ background:#0b422b; border-color:#16a34a }
.attr-box.state-x { border:3px solid #6b7280; box-shadow:0 8px 20px rgba(107,112,128,0.06), inset 0 1px 0 rgba(255,255,255,0.02); background:#3a3a3a; }
.attr-box.state-o{ background:#3b2a09; border-color:#f59e0b }

/* ensure button active visual remains clear */
.attr-buttons button.active{ box-shadow:0 0 0 3px rgba(3,102,214,0.06) }

/* hide arrows entirely when attribute is set to "check" (green) */
.attr-box.state-check .attr-arrows {
  display: none !important;
  opacity: 0;
  transform: translateY(-4px);
}

/* unify arrow buttons size and alignment with the other control buttons */
.attr-arrows {
  display: flex;
  gap: 4px;
  align-items: center; /* vertical center with check/x/o */
  height: 32px;        /* match control button height */
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}

/* ensure buttons area expands when arrows hidden to avoid awkward gaps */
.attr-box.state-check .attr-buttons {
  margin-right: 0;
}

/* show arrows when attr box is in x (grey) or o (yellow) state */
.attr-box.state-x .attr-arrows,
.attr-box.state-o .attr-arrows {
  display: flex !important;
  opacity: 1;
  transform: none;
}


/* arrow buttons */
.attr-arrows{display:flex;gap:6px;align-items:center;transition: opacity .12s ease, transform .12s ease;}
.btn-arrow{border-radius:6px;border:1px solid #374151;padding:6px 8px;cursor:pointer;background:#3a3a3a;color:#f8fafc}
.btn-arrow[disabled]{opacity:.35;cursor:default}
.btn-arrow[data-active="1"]{background:#0366d6;color:#fff;border-color:transparent}

.attr-buttons button,
.btn-arrow {
  height: 28px;
  width: 28px;
  min-width: 0;    
  padding: 0;       
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1;
}
.btn-arrow svg { width: 14px; height: 14px; }

/* ensure arrows don't visually overflow and their icon stays centered */
.btn-arrow svg,
.btn-arrow::before,
.btn-arrow::after {
  display: inline-block;
  vertical-align: middle;
}

/* Yellow ("o") state: highlight buttons and active arrows in yellow */
.attr-box.state-o .btn-o,
.attr-box.state-o .attr-buttons button.active {
  background: #f59e0b;
  color: #000;
  box-shadow: 0 8px 22px rgba(245,159,11,0.14);
}

/* warm / yellow buttons keep distinct gradient */
.attr-box.state-o .btn-o,
.attr-box.state-o .btn-arrow[data-active="1"] {
  background-image: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Grey ("x") state: highlight buttons and active arrows in grey */
.attr-box.state-x .btn-x,
.attr-box.state-x .attr-buttons button.active {
  background: #6b7280;
  color: #fff;
  box-shadow: 0 8px 18px rgba(107,112,128,0.10);
}

/* grey state darker gradient */
.attr-box.state-x .btn-x,
.attr-box.state-x .btn-arrow[data-active="1"] {
  background-image: linear-gradient(90deg, #6b7280, #4b5563);
}

/* Make active arrow buttons pick up the same state color */
.attr-box.state-o .btn-arrow[data-active="1"] {
  background: #f59e0b;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(245,159,11,0.12);
  padding-left: 10px;
  padding-right: 10px;
}
.attr-box.state-x .btn-arrow[data-active="1"] {
  background: #6b7280;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(0,0,0,0.16);
  padding-left: 10px;
  padding-right: 10px;
}

/* smooth transitions for button/arrow state changes */
.attr-buttons button,
.btn-arrow {
  transition: background .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease;
}


/* Guess UI */
.guess{margin:18px 0}
.guess-search{position:relative;max-width:520px}
.guess-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #374151;
  background: #3a3a3a;
  color: #f8fafc;
}
.search-results{position:absolute;left:0;right:0;top:40px;background:#3a3a3a;border:1px solid #374151;border-radius:6px;max-height:220px;overflow:auto;z-index:10;padding:6px 0;margin:0}
.search-results li{padding:6px 12px;cursor:pointer;color:#f8fafc}
.search-results li:hover{background:#374151}

/* Guess card */
.guess-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)), var(--muted-card);
  max-width: 740px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  animation: floaty 6s ease-in-out infinite;
}
.attrs-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:72px;gap:8px}
.attr-box{border:1px solid #374151;border-radius:6px;padding:8px;display:flex;flex-direction:column;justify-content:space-between;background:#3a3a3a;color:#f8fafc}

/* attribute boxes: inner gradient and stronger highlight when selected */
.attr-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)), #3a3a3a;
  border: 1px solid rgba(255,255,255,0.03);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

/* make label and value sit on the same row (label left, value right) */
.attr-box > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.attr-label {font-size: 13px;font-weight: 700;background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding: 4px 8px;border-radius: 6px;}
.attr-value{font-size:13px;color:#e6eef6}
.attr-buttons{display:flex;gap:6px;justify-content:flex-end}
.attr-buttons button{padding:6px 8px;border-radius:6px;border:none;cursor:pointer}
.btn-check{background:#10b981;color:#fff} /* green */
.btn-x{background:#6b7280;color:#fff}     /* grey */
.btn-o{background:#f59e0b;color:#fff}     /* yellow */

/* UI island for a selected guess: groups guess number, search and card */
.guess-item.island{
  background: #292929; /* subtle card background */
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

/* tighten spacing inside island */
.guess-item.island > h3{ margin:0 0 8px; font-size:1rem; }
.guess-item.island .guess-search{ margin-bottom:8px; }
.guess-item.island .guess-card{ margin-top:0; }

/* optional: slightly lighter search input when inside island */
.guess-item.island .guess-search input {
  background: #2a2a2a;
  border-color: #3a3a3a;
}

/* remove-guess button inside guess card */
.remove-guess-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:6px;
  border:none;
  background:#10b981; 
  color:#fff;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.remove-guess-btn[hidden]{display:none}

/* placeholder color */
.guess-search input::placeholder,
.controls input::placeholder {
  color: #9ca3af;
}

/* hint value select placed inside valueContainer will inherit .controls select,
   but ensure options text color is readable (some browsers need explicit) */
.controls select option,
.guess-search select option {
  background: #3a3a3a;
  color: #f8fafc;
}

/* center "Add Guess" when there is at least one guess island/card */
#guessesContainer:has(.guess-item.island) + div .btn-add,
#guessesContainer:has(.guess-item.island) + div #addGuessBtn {
  margin-left: auto;
  margin-right: auto;
  display: block;
  align-self: center;
}

/* keep buttons visually distinct while matching palette */
.controls button { cursor: pointer; }
.controls button:disabled { opacity: 0.6; cursor: default; }

/* Hint card */
.hint-card{
  width:100%;
  box-sizing:border-box;
  margin-top:0;
  padding:12px;
  border-radius:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)), var(--muted-card);
  border:1px solid rgba(255,255,255,0.04);
  max-width:740px;
  position:relative;
  display:block;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  animation: floaty 6s ease-in-out infinite;
}
.hint-card-header{font-weight:700;margin-bottom:8px;color:#f8fafc}
.hint-card-body{display:flex;gap:8px}
.hint-field,.hint-value{flex:1;min-width:0}
.hint-field select,
.hint-value select,
.hint-value input{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #374151;
  background:#3a3a3a;
  color:#f8fafc;
}
.hint-card-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.btn-cancel{background:#10b981;color:#fff;padding:6px 10px;border-radius:6px;border:none}
.btn-add{background:#10b981;color:#fff;padding:6px 10px;border-radius:6px;border:none}

/* small helper to hide extra labels for accessibility */
.sr{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.open-hint-btn{background:#10b981;color:#fff;padding:6px 10px;border-radius:6px;border:none;cursor:pointer; margin-bottom:20px;}

/* force controls to stack vertically: top (button) then bottom (hint card) */
.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}

/* keep the button aligned left */
.controls-top { width: 100%; }
.open-hint-btn { align-self: flex-start; }

/* hint card occupies full width below the button */
.controls-bottom { width: 100%; }
.hint-card { width: 100%; box-sizing: border-box; margin-top: 0; }

/* hide when hidden attribute set (already present but ensure specificity) */
.hint-card[hidden] { display: none; }

/* keep small helper */
.small{font-size:12px;color:#9ca3af}

/* two-column layout with sidebar */
.layout{display:flex;gap:16px;align-items:flex-start}
main{flex:1}

/* sidebar / ad slots */
.sidebar{width:260px;display:flex;flex-direction:column;gap:12px}
.ad-slot{padding:10px;border-radius:10px;border:1px solid #374151;background:#3a3a3a;color:#f8fafc;min-height:120px;display:flex;align-items:center;justify-content:center}
.ad-slot.ad-banner{min-height:90px}
.ad-slot.ad-box{min-height:250px}
.ad-placeholder{font-size:13px;color:#9ca3af;text-align:center;padding:6px}

/* bottom page banner area */
.bottom-ads{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:flex-end;
  padding:16px;
  margin-top:18px;
  width:100%;
  box-sizing:border-box;
}
/* ad slot styling for footer area */
.bottom-ads .ad-slot{
  padding:10px;
  border-radius:10px;
  border:1px solid #374151;
  background:#3a3a3a;
  color:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* banner: wide responsive, box: 300px column */
.bottom-ads .ad-banner{flex:1;max-width:900px;min-height:90px}
.bottom-ads .ad-box{width:300px;min-height:90px}
/* ensure mobile stacks */
@media (max-width:880px){
  .layout{flex-direction:column}
  .sidebar{width:100%}
  .bottom-ads{flex-direction:column;align-items:center}
  .bottom-ads .ad-box{width:100%;max-width:420px}
  .bottom-ads .ad-banner{width:100%;max-width:720px}
}

/* Guess island */
.guess-item {
  box-sizing: border-box;
  margin-bottom: 24px; /* spacing between islands */
  position: relative; /* ensure guess island becomes the positioning context  */
}

/* small extra top spacing when consecutive islands */
.guess-item + .guess-item { margin-top: 18px; }

/* island fills most of the page horizontally */
.guess-item.island {
  width: 90%;
  max-width: 1200px;
  min-width: 420px;
  margin: 0 auto 24px;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)), var(--muted-card);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  animation: floaty 6s ease-in-out infinite;
}

/* keep the inner elements (guess#, search, card) centered */
.guess-item.island > h3,
.guess-item.island .guess-search,
.guess-item.island .guess-card {
  width: 100%;
  max-width: 760px; /* inner content width */
  margin-left: auto;
  margin-right: auto;
}

/* ensure the guess-card respects the inner constraint */
.guess-item.island .guess-card {
  box-sizing: border-box;
  margin-top: 8px;
}

/* add button hover+transformation */
.btn-add,
.add-from-match,
.open-hint-btn {
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, filter .12s ease;
  will-change: transform, box-shadow, filter;
  cursor: pointer;
}

/* hover: lift + subtle brightness */
.btn-add:hover,
.add-from-match:hover,
.open-hint-btn:hover {
  transform: translateY(-0.2px);
  box-shadow: 0 10px 22px rgba(16,185,129,0.12);
  filter: brightness(1.06);
}

/* active/click: tactile press */
.btn-add:active,
.add-from-match:active,
.open-hint-btn:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 6px 12px rgba(0,0,0,0.22);
}

/* small visual cue when keyboard-focused */
.btn-add:focus,
.add-from-match:focus,
.open-hint-btn:focus {
  outline: 3px solid rgba(16,185,129,0.12);
  outline-offset: 3px;
}



/* force header remove button back into normal flow (override absolute rules) */
.guess-header .remove-guess-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: 12px;
}

/* ensure header items sit on one line and h3 doesn't push the button down */
.guess-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* allow the title to shrink so the remove button stays on the right */
.guess-header h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0; /* important so text truncates instead of forcing wrap */
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* keep remove button compact on the right */
.guess-header .remove-guess-btn {
  flex: 0 0 40px;
  width: 30px;
  height: 25px;
  margin-left: 12px;
  position: static !important;
}

/* Make the Matches list render as two columns */
#resultsList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 8px 0;
}

/* ensure individual match items keep the same card styling but fit the grid */
#resultsList li {
  margin: 0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  border: 1px solid #374151;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)), #3a3a3a;
  color: #f8fafc;
  box-sizing: border-box;
  transition: transform .12s ease, box-shadow .12s ease;
}
#resultsList li:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }

/* keep best-match single-column  */
/* responsive: stack to single column on small screens */
@media (max-width: 880px) {
  #resultsList {
    grid-template-columns: 1fr;
  }
}

/* animated sheen overlay for cards (subtle) */
.hint-card::after,
.guess-card::after,
.guess-item.island::after {
  content: "";
  position: absolute;
  left: -120%;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.04), rgba(255,255,255,0));
  transform: skewX(-18deg);
  pointer-events: none;
  animation: sheen 3.6s linear infinite;
  opacity: 0.6;
}

/* slightly lift on hover */
.hint-card:hover,
.guess-card:hover,
.guess-item.island:hover {transform: translateY(-6px) scale(1.005);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

/* buttons: gradient, subtle glow and active press */
.open-hint-btn,
.btn-add,
.add-from-match,
.remove-guess-btn,
.controls button {
  background-image: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 20px rgba(16,185,129,0.06);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* subtle focus ring using accent color */
:focus { outline: none; }
button:focus, input:focus, select:focus {
  box-shadow: 0 0 0 4px rgba(30,215,96,0.06);
  border-color: rgba(30,215,96,0.18);
}

/* Ko‑Fi support footer */
.support-footer{
  background:transparent;
  padding:10px 12px 22px;
  color:var(--muted, #d1d5db);
}
/* replaced kofi-btn style with new gradient/button */
.kofi-btn{
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg,#ff5e5e 0%,#ff6b6b 50%,#ff8e8e 100%);
    border-radius: 12px;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
    display: flex;
    display: inline-flex;
    width: auto;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px #ff5e5e4d;
}
.kofi-btn svg { margin-right: .5rem; flex: 0 0 20px; width:20px; height:20px; }
.kofi-btn:hover{ transform: translateY(-3px); box-shadow: 0 10px 22px rgba(255,94,94,0.16); }
.kofi-btn:active{ transform: translateY(0); box-shadow: 0 4px 10px rgba(255,94,94,0.12); }

@media (max-width:880px) {
  /* fix attr-grid clipping on narrow screens */
  .attrs-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 8px; }

  /* make attr boxes taller and remove right padding (arrows moved below controls) */
  .attr-box { min-width: 0; padding: 12px 8px; min-height: 88px; }

  /* stack buttons vertically and place arrows under them, aligned to the right */
  .attr-buttons { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-right: 0; }
  .attr-buttons .attr-arrows { width: 100%; display: flex; justify-content: flex-end; margin-top: 6px; }

  /* island sizing - avoid forcing a minimum width that causes overflow */
  .guess-item.island { width: 96%; padding: 14px; min-width: 0; }
  .guess-item.island > h3,
  .guess-item.island .guess-search,
  .guess-item.island .guess-card { max-width: 100%; }

  /* hints sizing */
  #hintsContainer .hint-card { width: 96%; padding: 14px; max-width: 100%; min-width: 0; margin: 0 auto 8px; }

  /* reduce sheen/animation and soften shadows on mobile for perf */
  .hint-card::after,
  .guess-card::after,
  .guess-item.island::after { display: none; }
  .hint-card, .guess-card, .guess-item.island { animation: none; transform: none; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
}

/* green name for artists marked as updated */
.artist-updated { color: #10b981; }