/*** assets/hon.css — FULL REPLACEMENT (v1.3.7) ***/
/* Scoped root */
.hon-app {
  --hon-bg: #0f0f12;
  --hon-card: #17171b;
  --hon-text: #f8f9fb;
  --hon-sub: #cbd0da;
  --hon-accent: #ff2d55;
  --hon-accent-2: #ffd60a;
  --hon-ok: #22c55e;
  --hon-no: #ef4444;
  --hon-aspect: 4/5;

  /* Motion (admin-configurable via JS) */
  --hon-anim-hover-ms: 250ms;
  --hon-anim-lose-ms: 250ms;
  --hon-anim-badge-ms: 500ms;
  --hon-anim-ripple-ms: 500ms;

  /* Badge theming (overridable via JS) */
  --hon-badge-win-bg: linear-gradient(135deg, var(--hon-ok), var(--hon-accent-2));
  --hon-badge-lose-bg: linear-gradient(135deg, #3a0000, var(--hon-no));
  --hon-badge-win-color: #0b0b0b;
  --hon-badge-lose-color: #ffffff;
  --hon-badge-win-shadow: 0 12px 30px rgba(34,197,94,.35);
  --hon-badge-lose-shadow: 0 12px 30px rgba(239,68,68,.35);

  /* Leaderboard title border (admin) */
  --hon-title-border-width: 1px;
  --hon-title-border-color: rgba(255,255,255,.25);
  --hon-title-border-radius: 8px;

  color: var(--hon-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: transparent;
}

/* Hint with close + inline instr link */
.hon-app .hon-hint {
  position: relative;
  font-size: 13.5px;
  color: #ffffff !important;
  background: rgba(0,0,0,0.68) !important;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 8px 10px 8px 10px;
  padding-right: 38px;
  border-radius: 10px;
  margin: 6px 0 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.hon-app .hon-hint .hon-hint-x{
  position: absolute; right: 8px; top: 6px;
  background: transparent; border: 0; color: #fff; opacity: .85;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.hon-app .hon-hint .hon-hint-x:hover { opacity: 1; transform: scale(1.08); }
.hon-app .hon-hint .hon-instr-link { margin-left: 10px; text-decoration: underline; color: #e3f2ff; }

.hon-app .hon-instr-inline { margin: 6px 0 8px; }
.hon-app .hon-instr-inline .hon-instr-link { text-decoration: underline; color: #e3f2ff; font-weight: 700; }

/* Grid */
.hon-app .hon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  align-items: stretch;
  margin: 8px 0 10px;
}
@media (max-width: 700px) { .hon-app .hon-grid { grid-template-columns: 1fr; } }

/* Cards */
.hon-app .hon-card {
  position: relative;
  background: var(--hon-card);
  border-radius: 12px;
  overflow: clip;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform var(--hon-anim-hover-ms) ease, box-shadow var(--hon-anim-hover-ms) ease;
  cursor: pointer;
  outline: none;
  min-height: 120px;
  aspect-ratio: var(--hon-aspect);
}
.hon-app .hon-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.hon-app .hon-card:focus { outline: 3px solid var(--hon-accent, #0af); outline-offset: 2px; }
.hon-no-hover .hon-card:hover { transform: none; box-shadow: 0 6px 16px rgba(0,0,0,.25); }

.hon-app .hon-card button.hon-pick { all: unset; display:block; width:100%; height:100%; cursor:pointer; }
.hon-app .hon-card .hon-meta {
  position: absolute; left: 8px; bottom: 8px; color:#f7f7f7; font-size:12px;
  background: rgba(0,0,0,.45); padding:5px 8px; border-radius:999px; backdrop-filter: blur(6px);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.hon-app .hon-author { color:#fff; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.4); }
.hon-app .hon-author:hover { filter:saturate(120%); }

/* Images (card + tiles) — uniform sizing via container */
.hon-app img.hon-img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background: linear-gradient(180deg, #0a0a0a, #111);
  image-rendering:auto; backface-visibility:hidden; will-change:transform;
  transition: transform var(--hon-anim-hover-ms) ease, filter var(--hon-anim-lose-ms) ease;
}
.hon-app .hon-card:hover img.hon-img { transform: scale(1.03); filter: saturate(115%); }
.hon-no-hover .hon-card:hover img.hon-img { transform:none !important; filter:none !important; }
@media (max-width: 620px) { .hon-app { --hon-aspect: 3/4; } }
@media (max-width: 520px) { .hon-app { --hon-aspect: 1/1; } }
/* Limit card height on very short viewports */
@media (max-height: 720px) { .hon-app .hon-card { max-height: 40vh; } }

/* Disable re-vote after voting */
.hon-app.voted .hon-card { pointer-events:none; }

/* Broken image fallback */
.hon-app .hon-card.hon-broken {
  background: repeating-linear-gradient(135deg, #1c1c1e, #1c1c1e 12px, #202022 12px, #202022 24px);
}
.hon-app .hon-card.hon-broken::after {
  content: 'Image unavailable';
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #ddd; font-weight: 700; background: rgba(0,0,0,.4);
}

/* Overlays */
.hon-app .hon-overlay { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.hon-app .hon-badge {
  font-weight: 800; letter-spacing:.5px; padding:10px 14px; border-radius:999px; text-transform:uppercase;
  font-size: clamp(16px, 2.6vw, 24px); opacity: 0; transform: scale(0.9);
  transition: transform var(--hon-anim-badge-ms) ease, opacity var(--hon-anim-badge-ms) ease;
}
.hon-app .hon-badge-img { display:inline-block; max-width:56px; max-height:56px; vertical-align:middle; }

/* Ripple */
.hon-app .hon-ripple {
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,.15) 40%, rgba(255,255,255,0) 70%);
  animation: hon-ripple var(--hon-anim-ripple-ms) ease-out forwards; mix-blend-mode: screen;
}
@keyframes hon-ripple { to { transform: scale(1); opacity: 0; } }

/* Results flash */
.hon-app .hon-flash {
  position:absolute; left:8px; right:8px; bottom:8px; margin:0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 10px; border-radius:10px; font-size:13px; font-weight:800; color:#0a0a0a;
  background: linear-gradient(135deg, #fff, #f0f0f0); box-shadow:0 8px 20px rgba(0,0,0,.25);
  opacity:0; transform: translateY(6px); transition: opacity var(--hon-anim-badge-ms) ease, transform var(--hon-anim-badge-ms) ease;
}
.hon-app .hon-flash.show { opacity:1; transform: translateY(0); }
.hon-app .hon-flash small { font-weight:700; color:#333; opacity:.9 }

/* Animations for result */
@keyframes hon-pop { 0% { transform: scale(.85); opacity:.2 } 60% { transform: scale(1.08); opacity:1 } 100% { transform: scale(1.0); opacity:1 } }
@keyframes hon-wobble {
  0%{ transform: translateX(0) rotate(0deg) } 25%{ transform: translateX(-4px) rotate(-1.5deg) }
  50%{ transform: translateX(4px) rotate(1.5deg) } 75%{ transform: translateX(-2px) rotate(-.5deg) }
  100%{ transform: translateX(0) rotate(0) }
}

/* Badge appearance via variables */
.hon-app .hon-card.win .hon-badge {
  background: var(--hon-badge-win-bg); color: var(--hon-badge-win-color);
  opacity: 1; transform: scale(1.05); box-shadow: var(--hon-badge-win-shadow);
  animation: hon-pop var(--hon-anim-badge-ms) ease both;
}
.hon-app .hon-card.lose .hon-badge {
  background: var(--hon-badge-lose-bg); color: var(--hon-badge-lose-color);
  opacity: 1; transform: scale(1.05); box-shadow: var(--hon-badge-lose-shadow);
  animation: hon-wobble var(--hon-anim-badge-ms) ease both;
}
.hon-app .hon-card.lose.dim .hon-img { filter: grayscale(100%) brightness(.55) blur(.5px); }
.hon-app .hon-card.lose.dim .hon-meta { opacity:.3; }

@media (prefers-reduced-motion: reduce) {
  .hon-app .hon-card, .hon-app .hon-badge, .hon-app .hon-flash, .hon-app .hon-ripple { transition:none !important; animation:none !important; }
}

/* CTA + banner */
.hon-app .hon-cta { margin:8px 0 14px; display:flex; align-items:center; gap:10px; }
.hon-app .hon-next {
  appearance:none; border:0; border-radius:10px; padding:10px 14px; font-weight:800;
  background: linear-gradient(135deg, var(--hon-accent), #ff8a00); color:#fff;
  box-shadow: 0 10px 20px rgba(255,45,85,.25); cursor:pointer; font-size:14px;
}
.hon-app .hon-guest-limit {
  background:#fff3cd; color:#5a4600; border:1px solid #ffe69c; padding:8px 10px; border-radius:8px; font-size:13px;
}

/* Leaderboards — stacked */
.hon-app .hon-leaderboard { margin-top: 6px; }
.hon-app .hon-board-group { margin: 10px 0 18px; }

.hon-app .hon-subtitle {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)) !important;
  padding: 6px 8px; display: inline-block; margin: 4px 0 8px; font-size: 16px;

  border: var(--hon-title-border-width) solid var(--hon-title-border-color);
  border-radius: var(--hon-title-border-radius);
}

.hon-app .hon-board {
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:8px;
}
@media (max-width: 1100px) { .hon-app .hon-board { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 900px)  { .hon-app .hon-board { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px)  { .hon-app .hon-board { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 360px)  { .hon-app .hon-board { grid-template-columns: 1fr; } }

.hon-app .hon-board li {
  background: var(--hon-card);
  border-radius:12px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.hon-app .hon-board .hon-tile { display:grid; grid-template-rows: auto 1fr; }

/* Thumbnail wrapper ensures 1:1 tiles; image fills wrapper */
.hon-app .hon-board .hon-tile > a {
  display:block; width:100%; aspect-ratio: 1 / 1; overflow:hidden;
}
.hon-app .hon-board .hon-tile > a img {
  width:100%; height:100%; object-fit:cover; display:block;
}

.hon-app .hon-board .hon-meta2 {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; color: var(--hon-sub); font-size:12px;
}
.hon-app .hon-board a { color:inherit; text-decoration:none; }

/* Inline icons */
.hon-app .hon-ico { width:1em; height:1em; vertical-align:-0.2em; margin-right:6px; fill: currentColor; }

/* Help modal (scoped under .hon-app) */
.hon-app .hon-modal {
  position:fixed; inset:0; z-index:99999; background: rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.hon-app .hon-modal.active { display:flex; }
.hon-app .hon-modal .hon-dialog {
  max-width:520px; width:100%; background:#111215; color:var(--hon-text);
  border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.4); padding:18px;
  border:1px solid rgba(255,255,255,.06); position:relative;
}
.hon-app .hon-modal .hon-x {
  position:absolute; top:8px; right:10px; background:transparent; border:0; color:#fff; font-size:24px; line-height:1; cursor:pointer;
}
.hon-app .hon-modal h2 { margin:0 0 8px; font-size:20px; }
.hon-app .hon-modal p { margin:0 0 12px; color:var(--hon-sub); }
.hon-app .hon-modal .hon-close {
  display:inline-block; border:0; border-radius:10px; padding:10px 12px; font-weight:700; cursor:pointer;
  background: linear-gradient(135deg, var(--hon-accent), #ff8a00); color:#fff;
}