/* PlayLoLdle — hextech-style dark theme */

:root {
  --ink: #010a13;
  --ink-2: #0a1428;
  --panel: rgba(1, 10, 19, 0.82);
  --gold: #c8aa6e;
  --gold-hi: #f0e6d2;
  --gold-lo: #785a28;
  --teal: #0ac8b9;
  --teal-lo: #005a82;
  --text: #f0e6d2;
  --muted: #a09b8c;
  --correct: #1f8f3a;
  --partial: #d38e1c;
  --wrong: #b3261e;
  --sq: 74px;
  --serif: "Friz Quadrata", "Cinzel", "Marcellus", Georgia, serif;
  --display: "Friz Quadrata", "Marcellus", Georgia, serif;
  --sans: "Source Sans 3", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ink);
  color: var(--text);
  font-family: var(--display);
}

/* Generated background; replaced by ASSETS.background when set. */
/* Background picture, darkened so panels and text stay readable:
   an overall dim, a vignette toward the edges, and a deeper fade at the bottom. */
.bg.custom { background: var(--bg-image) center 30% / cover no-repeat, var(--ink); filter: saturate(.9); }
.bg.custom::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 85% 70% at 50% 28%, rgba(1,10,19,.35) 0%, rgba(1,10,19,.72) 60%, rgba(1,10,19,.92) 100%),
    linear-gradient(180deg, rgba(1,10,19,.35) 0%, rgba(1,10,19,.55) 45%, rgba(1,10,19,.92) 100%);
}
.logo-img { display: block; width: min(340px, 58vw); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); transition: transform .25s ease; }
.logo-img:hover { transform: scale(1.03); }
.bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(10, 200, 185, .18), transparent 65%),
    radial-gradient(700px 600px at 0% 100%, rgba(200, 170, 110, .14), transparent 60%),
    radial-gradient(700px 600px at 100% 80%, rgba(0, 90, 130, .22), transparent 60%),
    repeating-linear-gradient(60deg, rgba(200,170,110,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-60deg, rgba(200,170,110,.035) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, #06121f 0%, #010a13 70%);
}

a { color: var(--gold); }
button { font: inherit; color: inherit; }

main {
  width: 100%;
  max-width: 980px;
  padding: 0 16px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.loading { margin-top: 30vh; color: var(--muted); }

/* ---------- Header ---------- */

.top { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; }

.logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 5rem);
  line-height: 1;
  text-decoration: none;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff6dc 0%, #e8c87a 45%, #a07a32 75%, #6b4b18 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px rgba(200,170,110,.35));
}
.logo span { font-size: .82em; }

.mode-nav { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mode-dot {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold);
  background: radial-gradient(circle at 50% 35%, #1b2a3a, #050d17 70%);
  border: 3px solid var(--gold-lo);
  box-shadow: inset 0 0 0 2px #000, 0 2px 6px rgba(0,0,0,.6);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.mode-dot svg { width: 30px; height: 30px; }
.mode-dot:hover { transform: translateY(-2px); border-color: var(--gold); }
.mode-dot.active {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 2px #000, 0 0 16px rgba(240, 230, 210, .45);
  transform: scale(1.12);
}
.mode-dot.done::after, .mode-card .check {
  content: "✓";
  position: absolute; right: -4px; top: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--correct); color: #fff;
  font: 700 12px/20px var(--sans); text-align: center;
  border: 2px solid var(--ink);
}

.tools { display: flex; gap: 10px; align-items: center; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(1,10,19,.75);
  border: 2px solid var(--gold-lo);
  color: var(--gold);
  cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold-hi); }

.toggle {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px; border-radius: 8px;
  background: rgba(1,10,19,.75); border: 2px solid var(--gold-lo);
  color: var(--gold); font: 600 .9rem var(--sans); cursor: pointer;
}
.toggle input { accent-color: var(--teal); width: 16px; height: 16px; margin: 0; }

/* ---------- Boxes ---------- */

.box {
  position: relative;
  width: 100%; max-width: 540px;
  padding: 18px 22px;
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--gold-lo);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8), inset 0 0 30px rgba(200,170,110,.06), 0 6px 20px rgba(0,0,0,.5);
}
.box::before, .box::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 2px solid var(--gold);
}
.box::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.box::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

.box h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--gold-hi); }
.box p { margin: 6px 0; }
.muted { color: var(--muted); font-family: var(--sans); font-size: .9rem; }
.small { font-size: .78rem; }

/* ---------- Home ---------- */

.home-intro h1 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.3; color: var(--gold-hi); }

/* One <h1> per page: the page's keyword title, shown small above the game. */
.page-h1 {
  margin: -4px 0 0; max-width: 620px; text-align: center;
  font: 400 1rem/1.35 var(--display); letter-spacing: .5px; color: var(--gold);
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}

/* "How it works", FAQ and links to the other modes, under every page. */
.page-info {
  position: relative; width: calc(100% - 32px); max-width: 680px; margin: 8px auto 34px;
  padding: 22px 26px; background: var(--panel); border: 1px solid rgba(120,90,40,.7);
  box-shadow: inset 0 0 30px rgba(200,170,110,.05), 0 6px 20px rgba(0,0,0,.45);
  font-family: var(--sans); line-height: 1.6; color: var(--text);
}
.page-info h2 { margin: 22px 0 8px; font: 400 1.25rem/1.3 var(--display); color: var(--gold-hi); }
.page-info h2:first-child { margin-top: 0; }
.page-info p { margin: 8px 0; color: #d9d2c0; }
.page-info a { color: var(--gold); }
.page-info a:hover { color: var(--gold-hi); }
.faq { border-top: 1px solid rgba(120,90,40,.45); padding: 10px 0; }
.faq:last-of-type { border-bottom: 1px solid rgba(120,90,40,.45); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--gold-hi); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.2rem; line-height: 1; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 8px 0 2px; }
.info-links { margin: 6px 0 0; padding-inline-start: 20px; }
.info-links li { margin: 4px 0; color: #d9d2c0; }

.not-found { margin-top: 10px; }
.not-found h1 { margin: 0 0 6px; font: 400 1.6rem var(--display); color: var(--gold-hi); }
.not-found .btn { display: inline-block; margin-top: 12px; text-decoration: none; }
/* Game list: chamfered rows with a gold border, an orbiting light on hover,
   edge lightning, a cursor-following glow and a slight 3D tilt. */
.game-list { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 620px; }
.game-row {
  --tilt-x: 0deg; --tilt-y: 0deg; --mouse-x: 50%; --mouse-y: 50%;
  position: relative; display: block; isolation: isolate;
  height: 132px;
  color: var(--text); text-decoration: none;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .3s, filter .3s;
  font-family: "Manrope", var(--sans);
}
.game-row:is(:hover, :focus-visible) {
  transform: perspective(900px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  filter: drop-shadow(0 9px 18px rgba(0,0,0,.47)) drop-shadow(0 0 8px rgba(200,170,110,.14));
  outline: none;
}
.row-frame {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  padding: 18px 28px 16px 26px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(10,200,185,.08), transparent 55%),
    linear-gradient(90deg, rgba(16,35,48,.96), rgba(7,19,29,.94));
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
.row-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), rgba(200,170,110,.2), transparent 60%);
  transition: opacity .3s;
}
.game-row:is(:hover, :focus-visible) .row-glow { opacity: 1; }
.row-frame > :not(.row-glow, .row-art, .row-shade) { position: relative; z-index: 1; }

/* Background picture on the right, fading into the panel on the left. */
.row-art {
  /* Sits between the title and the "Play now" button, fading out at both ends. */
  position: absolute; inset: 0 190px 0 32%; z-index: 0; pointer-events: none;
  background: center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 78%, transparent 100%);
  transition: transform .5s ease, filter .5s ease;
  transform-origin: 75% 50%;
}
.row-art svg { width: 100%; height: 100%; display: block; }
.row-art svg { transform: translateX(-12%); width: 124%; }
.row-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,24,34,.9) 0%, rgba(10,24,34,.75) 32%, rgba(10,24,34,.15) 55%, rgba(10,24,34,.1) 70%, rgba(10,24,34,.7) 85%, rgba(10,24,34,.9) 100%),
    linear-gradient(0deg, rgba(6,18,29,.55), transparent 45%);
}
.game-row:is(:hover, :focus-visible) .row-art { transform: scale(1.06); filter: saturate(1.1) brightness(1.1); }

/* Your own painted menu art (ASSETS.modeArt): a wider window, softer edge fades,
   and a lighter shade so the scene reads. Crop is centered slightly above middle. */
/* Your own painted menu art (ASSETS.modeArt) fills the whole row edge to edge,
   under a dark wash that is strongest behind the title (left) and the Play Now
   button (right), lighter in the middle so the scene still shows. */
.row-art.custom {
  inset: 0;
  background-position: center 40%;
  -webkit-mask-image: none;
  mask-image: none;
}
.row-art.custom + .row-shade {
  background:
    linear-gradient(90deg,
      rgba(6,16,26,.94) 0%, rgba(6,16,26,.86) 22%, rgba(6,16,26,.6) 40%,
      rgba(6,16,26,.28) 58%, rgba(6,16,26,.3) 68%, rgba(6,16,26,.62) 82%, rgba(6,16,26,.82) 100%),
    linear-gradient(0deg, rgba(4,12,20,.7) 0%, rgba(4,12,20,.15) 45%, rgba(4,12,20,.35) 100%);
}
/* Keep the copy crisp over busy paintings. */
.game-row:has(.row-art.custom) .row-title { text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); }
.game-row:has(.row-art.custom) .row-desc,
.game-row:has(.row-art.custom) .row-state { text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
.game-row:has(.row-art.custom) .row-desc { color: #dfe5ee; }
.game-row:has(.row-art.custom) .row-state { color: #a8b8c2; }
.game-row.is-solved .row-art { filter: grayscale(1) brightness(.4); opacity: .7; }
.game-row.is-solved:is(:hover, :focus-visible) .row-art { filter: grayscale(1) brightness(.5); opacity: .8; }

.row-badge {
  position: absolute !important; left: 0; top: 0;
  padding: 4px 10px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase;
  color: #f3d594; background: rgba(6,19,27,.8);
  border-left: 2px solid var(--gold);
}
.row-icon {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold);
  background: radial-gradient(circle at 50% 35%, #22303d, #050d17 70%);
  border: 3px solid var(--gold-lo);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #000, 0 4px 12px rgba(0,0,0,.6);
  transition: border-color .3s, transform .3s, color .3s;
}
.row-icon svg { width: 40px; height: 40px; }
.game-row:is(:hover, :focus-visible) .row-icon { border-color: #f6d38b; color: #fff1ce; transform: scale(1.05); }

.row-copy { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.row-title {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700;
  font-size: 34px; line-height: 1; letter-spacing: -.4px; color: var(--gold-hi);
  transition: color .3s;
}
.game-row:is(:hover, :focus-visible) .row-title { color: #fff1ce; }
.row-desc { margin-top: 5px; font-size: 14px; color: #c8d0dc; }
.row-state { margin-top: 9px; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #8a9da8; }
.row-solved { display: inline-flex; align-items: center; gap: 8px; color: #f3d594; letter-spacing: 2.4px; }
.row-check {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; letter-spacing: 0;
  border: 1px solid rgba(200,170,110,.55); background: rgba(200,170,110,.07);
}

/* "Play now" button graphic. Its solid black backdrop is dropped with a screen
   blend, so only the gold frame and blue glass show over the row. */
/* The blend sits on the wrapper: it is the layer that composites with the row. */
.row-cta { display: flex; align-items: center; mix-blend-mode: screen; }
.row-play {
  display: block; width: 168px; height: auto;
  filter: brightness(.95);
  transition: transform .3s, filter .3s;
  user-select: none;
}
.game-row:is(:hover, :focus-visible) .row-play {
  transform: translateX(4px) scale(1.05);
  filter: brightness(1.2) saturate(1.2);
}
.game-row:active .row-play { transform: scale(.97); }
.game-row.is-solved .row-play { filter: grayscale(.7) brightness(.75); }
.game-row.is-solved:is(:hover, :focus-visible) .row-play { filter: grayscale(.3) brightness(1); }

/* Border layers */
.row-border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.rb-base { fill: none; stroke: #ac8b51; stroke-width: 1.15; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.game-row.is-first .rb-base { stroke: #e6be76; stroke-width: 1.6; }
.rb-trail, .rb-core, .rb-bolt { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; }
.rb-trail {
  stroke: #ffc85c; stroke-width: 3.6; stroke-dasharray: 12 88;
  filter: drop-shadow(0 0 5px #f6be50) drop-shadow(0 0 12px #eca322);
}
.rb-core { stroke: #fff3cd; stroke-width: 1.4; stroke-dasharray: 3 97; filter: drop-shadow(0 0 3px #fff0b5); }
.rb-bolt { stroke: #ffe8a5; stroke-width: 1; filter: drop-shadow(0 0 3px #ffb938); }
.game-row:is(:hover, :focus-visible) .rb-base { stroke: #f6d38b; stroke-width: 1.7; }
.game-row:is(:hover, :focus-visible) .rb-trail,
.game-row:is(:hover, :focus-visible) .rb-core { opacity: 1; animation: row-orbit 2.6s linear infinite; }
.game-row:is(:hover, :focus-visible) .rb-bolt { animation: row-lightning 2.6s ease-out infinite; }
@keyframes row-orbit { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes row-lightning {
  0%, 30%, 100% { opacity: 0; }
  5%, 9%, 18% { opacity: 1; }
  7%, 15%, 23% { opacity: .1; }
}

/* Solved today: dimmed, still clickable to review. */
.game-row.is-solved .row-frame { background: linear-gradient(90deg, rgba(10,22,32,.96), rgba(6,16,25,.96)); }
.game-row.is-solved .row-icon { filter: grayscale(.6) brightness(.8); }
.game-row.is-solved .row-desc { color: #94a2ad; }

@media (max-width: 560px) {
  .game-row { height: 118px; }
  .row-frame { grid-template-columns: auto 1fr; gap: 14px; padding: 18px 16px 12px 14px; }
  .row-icon { width: 58px; height: 58px; }
  .row-icon svg { width: 30px; height: 30px; }
  .row-title { font-size: 28px; }
  .row-desc { font-size: 12.5px; }
  .row-cta { position: absolute !important; right: 10px; bottom: 8px; }
  .row-play { width: 104px; }
  .row-art { inset: 0 24px 0 52%; opacity: .7; }
  .row-art.custom { inset: 0; opacity: 1; }
  .row-art.custom + .row-shade {
    background:
      linear-gradient(90deg, rgba(6,16,26,.92) 0%, rgba(6,16,26,.8) 45%, rgba(6,16,26,.45) 75%, rgba(6,16,26,.55) 100%),
      linear-gradient(0deg, rgba(4,12,20,.75) 0%, rgba(4,12,20,.2) 50%, rgba(4,12,20,.35) 100%);
  }
  .game-row:is(:hover, :focus-visible) { transform: none; }
  .rb-bolt { display: none; }
}
@media (hover: none) { .game-row { transform: none !important; } }

.home-timer { font-family: var(--sans); color: var(--muted); }
.home-timer b { color: var(--gold-hi); letter-spacing: 1px; }

/* ---------- Search ---------- */

.search-wrap { width: 100%; max-width: 540px; }
.search-wrap[hidden] { display: none; }
.search { display: flex; align-items: center; gap: 10px; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search input {
  width: 100%;
  height: 52px; padding: 0 16px;
  font: 600 1.05rem var(--sans);
  color: var(--text);
  background: rgba(1,10,19,.9);
  border: 2px solid var(--teal-lo);
  box-shadow: inset 0 0 12px rgba(10,200,185,.12);
  outline: none;
}
.search input:focus { border-color: var(--teal); box-shadow: inset 0 0 12px rgba(10,200,185,.2), 0 0 12px rgba(10,200,185,.25); }
.search input::placeholder { color: #5b6b78; }

.guess-btn {
  flex: none;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  color: #1a1206;
  background: radial-gradient(circle at 50% 30%, #f7e2a8, #c8aa6e 55%, #785a28);
  border: 3px solid #3c2c10;
  box-shadow: 0 0 0 2px var(--gold-lo), 0 3px 10px rgba(0,0,0,.6);
  transition: transform .1s, filter .1s;
}
.guess-btn:hover { filter: brightness(1.12); }
.guess-btn:active { transform: scale(.94); }

.suggestions {
  position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 330px; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
  background: #050d17;
  border: 2px solid var(--teal-lo);
  box-shadow: 0 10px 24px rgba(0,0,0,.6);
}
.suggestions li {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px; cursor: pointer;
  font: 600 1rem var(--sans);
  border-bottom: 1px solid rgba(0,90,130,.35);
}
.suggestions li.active, .suggestions li:hover { background: rgba(0,90,130,.45); }
.hint { margin: 8px 0 0; text-align: center; font: .85rem var(--sans); color: var(--muted); }
.hint:empty { display: none; }

/* ---------- Avatar placeholder ---------- */

.avatar {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font: 700 .8rem var(--sans); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  border: 2px solid var(--gold-lo);
}
img.avatar { object-fit: cover; background: #050d17; padding: 0; }
.avatar.lg { width: 100%; height: 100%; border: 0; font-size: 1.15rem; }
.avatar.xl { width: 84px; height: 84px; font-size: 1.6rem; border-width: 3px; border-color: var(--gold); }

/* ---------- Classic grid ---------- */

.board { width: 100%; display: flex; flex-direction: column; align-items: center; }
.grid-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 8px; }
.classic-grid { display: inline-flex; flex-direction: column; gap: 6px; }
.classic-grid .row { display: flex; gap: 6px; }
.classic-grid .head .sq {
  min-height: 0; height: auto; padding: 4px 2px 8px;
  background: none; border: 0; border-bottom: 2px solid var(--gold-lo);
  box-shadow: none;
  font: 600 .78rem var(--sans); color: var(--gold-hi);
}
.sq {
  position: relative;
  width: var(--sq); min-height: var(--sq);
  display: flex; align-items: center; justify-content: center;
  padding: 4px; text-align: center;
  font: 700 .82rem/1.15 var(--sans);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.65);
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  overflow: hidden;
}
.sq > span { position: relative; z-index: 1; overflow-wrap: anywhere; }
.sq.small { font-size: .7rem; }
.sq.correct { background: linear-gradient(180deg, #2aa84a, var(--correct)); }
.sq.partial { background: linear-gradient(180deg, #e8a333, var(--partial)); }
.sq.wrong { background: linear-gradient(180deg, #cf3b31, var(--wrong)); }
.sq.arrow-up::before, .sq.arrow-down::before {
  content: ""; position: absolute; inset: 10%;
  background: rgba(0,0,0,.28);
  clip-path: polygon(50% 0, 100% 45%, 70% 45%, 70% 100%, 30% 100%, 30% 45%, 0 45%);
}
.sq.arrow-down::before { transform: rotate(180deg); }
.sq.champ { padding: 0; background: #050d17; border-color: var(--gold-lo); }
.sq.champ .champ-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2px; font-size: .62rem; background: rgba(0,0,0,.65);
}
.sq.mini { width: 26px; height: 26px; min-height: 0; padding: 0; display: inline-block; vertical-align: middle; }

.row.reveal .sq { animation: flip .5s ease both; }
.row.reveal .sq:nth-child(1) { animation-delay: 0s; }
.row.reveal .sq:nth-child(2) { animation-delay: .3s; }
.row.reveal .sq:nth-child(3) { animation-delay: .6s; }
.row.reveal .sq:nth-child(4) { animation-delay: .9s; }
.row.reveal .sq:nth-child(5) { animation-delay: 1.2s; }
.row.reveal .sq:nth-child(6) { animation-delay: 1.5s; }
.row.reveal .sq:nth-child(7) { animation-delay: 1.8s; }
.row.reveal .sq:nth-child(8) { animation-delay: 2.1s; }
@keyframes flip {
  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  to { transform: perspective(400px) rotateY(0); opacity: 1; }
}

/* ---------- Guess list (other modes) ---------- */

.guess-list { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; }
.guess-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px 6px 6px;
  font: 700 1.05rem var(--sans); color: #fff;
  border: 2px solid rgba(0,0,0,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.guess-tile .avatar { width: 44px; height: 44px; }
.guess-tile.correct { background: linear-gradient(90deg, #2aa84a, var(--correct)); }
.guess-tile.wrong { background: linear-gradient(90deg, #cf3b31, var(--wrong)); }
.guess-tile.pop { animation: pop .35s ease; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Mode clues ---------- */

.quote { margin: 12px 0 4px; font-size: 1.3rem; font-style: italic; color: var(--gold-hi); }
.ability-name {
  display: inline-block; margin: 12px 0 6px; padding: 10px 22px;
  font-family: var(--serif); font-weight: 700; font-size: 1.6rem; color: var(--gold);
  border: 2px solid var(--gold-lo); background: rgba(200,170,110,.06);
}
.ability-icon {
  display: block; width: 96px; height: 96px; margin: 14px auto 8px;
  border: 3px solid var(--gold-lo); box-shadow: 0 0 0 2px #000; background: #050d17;
  transition: transform .4s, filter .4s;
}
.ability-solved { font-family: var(--serif); font-weight: 700; color: var(--gold); }
.opts { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }
.opt { display: flex; align-items: center; gap: 6px; font: 600 .9rem var(--sans); color: var(--muted); cursor: pointer; }
.opt input { accent-color: var(--teal); }
.hints { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hint-chip {
  display: flex; flex-direction: column; min-width: 130px; padding: 6px 12px;
  border: 1px dashed var(--gold-lo); font-family: var(--sans); color: var(--muted);
}
.hint-chip.open { border-style: solid; border-color: var(--teal); background: rgba(10,200,185,.08); }
.hint-label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; }
.hint-value { font-weight: 700; color: var(--text); }
.hint-chip:not(.open) .hint-value { color: var(--muted); font-weight: 600; font-size: .85rem; }
.missing { padding: 30px 10px; }
.quote-audio { width: 100%; max-width: 320px; margin-top: 8px; }
.emoji-row { display: flex; justify-content: center; gap: 10px; margin: 14px 0 6px; }
.emoji {
  width: 60px; height: 60px; display: grid; place-items: center;
  font-size: 2.1rem; font-family: var(--sans); font-weight: 700; color: var(--gold-lo);
  background: #050d17; border: 2px solid var(--gold-lo);
}
.emoji.on { border-color: var(--gold); animation: pop .35s ease; }
.splash-frame {
  width: 100%; aspect-ratio: 16 / 9; margin: 12px 0 6px; overflow: hidden;
  border: 2px solid var(--gold-lo); background: #050d17;
}
.splash-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }

/* ---------- Imposter ---------- */

.page { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.imp-score { margin-top: 8px; font: 700 1.1rem var(--sans); color: var(--muted); }
.imp-score b { font-size: 2rem; color: var(--gold-hi); }
.imp-pips { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.imp-pip { width: 28px; height: 6px; background: #1b2633; border: 1px solid var(--gold-lo); }
.imp-pip.correct { background: var(--correct); border-color: #000; }
.imp-pip.wrong { background: var(--wrong); border-color: #000; }
.imp-pips.big .imp-pip { width: 40px; height: 10px; }

.imp-list { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 10px; }
.imp-row {
  background: var(--panel);
  border: 2px solid var(--gold-lo);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8), 0 6px 18px rgba(0,0,0,.45);
  transition: border-color .2s;
}
.imp-row.open { border-color: var(--gold); }
.imp-row.is-correct { border-left: 4px solid var(--correct); }
.imp-row.is-wrong { border-left: 4px solid var(--wrong); }
.imp-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: none; border: 0; cursor: pointer; text-align: left;
}
.imp-head:hover { background: rgba(200,170,110,.05); }
.imp-index { font: 600 .78rem var(--sans); color: var(--muted); min-width: 30px; }
.imp-avatar { width: 42px; height: 42px; }
.imp-champ { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.imp-champ-name { font-family: "Cormorant Garamond", var(--serif); font-weight: 700; font-size: 1.45rem; line-height: 1.05; color: var(--gold-hi); }
.imp-sub { font: .78rem var(--sans); color: var(--muted); }
.imp-status { font: 700 .68rem var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.imp-status.correct { color: #52d273; }
.imp-status.wrong { color: #ff7a6e; }
.imp-chevron { color: var(--gold); transition: transform .2s; }
.imp-row.open .imp-chevron { transform: rotate(180deg); }

.imp-body { padding: 4px 14px 16px; animation: pop .25s ease; }
.imp-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.imp-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 96px; padding: 22px 6px 10px; cursor: pointer;
  color: var(--text); background: #050d17;
  border: 2px solid var(--gold-lo);
  box-shadow: inset 0 0 0 1px #000;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.imp-tile:not(:disabled):hover { transform: translateY(-3px); border-color: var(--gold-hi); box-shadow: inset 0 0 0 1px #000, 0 0 14px rgba(200,170,110,.35); }
.imp-tile:disabled { cursor: default; }
.imp-key {
  position: absolute; top: 4px; left: 6px;
  font: 700 .72rem var(--sans); color: var(--gold);
}
.imp-icon { width: 56px; height: 56px; border: 1px solid var(--gold-lo); background: #0a1428; }
.imp-name { font: 700 .82rem/1.15 var(--sans); text-align: center; overflow-wrap: anywhere; }
.imp-owner { font: 600 .7rem/1.1 var(--sans); color: var(--gold-hi); text-align: center; }
.imp-owner:empty { display: none; }
.imp-from { font: 700 .66rem var(--sans); letter-spacing: .5px; color: #fff; text-align: center; }
.imp-tile.correct { border-color: #000; background: linear-gradient(180deg, #2aa84a, var(--correct)); }
.imp-tile.wrong { border-color: #000; background: linear-gradient(180deg, #cf3b31, var(--wrong)); }
.imp-tile.correct .imp-key, .imp-tile.wrong .imp-key { color: #fff; }
.imp-tile.dim { opacity: .45; }
.imp-caption { margin: 12px 0 0; text-align: center; font: 600 .8rem var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

@media (max-width: 560px) {
  .imp-tiles { gap: 6px; }
  .imp-tile { min-height: 78px; padding: 18px 3px 6px; }
  .imp-icon { width: 42px; height: 42px; }
  .imp-name { font-size: .68rem; }
  .imp-status { display: none; }
}

/* ---------- Result ---------- */

.result { border-color: var(--correct); animation: pop .4s ease; }
.result[hidden] { display: none; }
.victory { font-family: var(--serif) !important; font-weight: 900 !important; font-size: 2rem !important; color: #52d273 !important; letter-spacing: 2px; }
.winner { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0; text-align: left; }
.winner p { margin: 0; }
.winner-name { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; color: var(--gold-hi); }
.winner-title { font-family: var(--sans); color: var(--gold); font-style: italic; }
.next { margin-top: 10px; }
.countdown { font: 700 1.9rem var(--sans); letter-spacing: 2px; color: var(--gold-hi); margin: 0 !important; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; cursor: pointer; text-decoration: none;
  font: 700 1rem var(--sans); color: var(--gold-hi);
  background: rgba(1,10,19,.85);
  border: 2px solid var(--gold-lo);
}
.btn:hover { border-color: var(--gold); }
.btn.gold { color: #1a1206; background: linear-gradient(180deg, #f0d48c, #c8aa6e 50%, #8a6a30); border-color: #3c2c10; }
.btn-icon svg { width: 20px; height: 20px; display: block; }

.bonus { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--gold-lo); }
.bonus-options { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.bonus-opt {
  min-width: 48px; height: 44px; padding: 0 10px; cursor: pointer;
  font: 700 1rem var(--sans); color: var(--gold-hi);
  background: #050d17; border: 2px solid var(--gold-lo);
}
.bonus-opt:not(:disabled):hover { border-color: var(--gold); }
.bonus-opt.correct { background: var(--correct); border-color: #000; color: #fff; }
.bonus-opt.wrong { background: var(--wrong); border-color: #000; color: #fff; }
.bonus-opt.dim { opacity: .4; }
.ok { color: #52d273; font-family: var(--sans); font-weight: 700; }
.ko { color: #ff7a6e; font-family: var(--sans); font-weight: 700; }

.yesterday { font-family: var(--sans); color: var(--muted); text-align: center; }
.yesterday:empty { display: none; }
.yesterday .num { color: var(--muted); }
.yesterday b { color: var(--teal); }

/* ---------- Dialogs ---------- */

.dialog {
  width: calc(100% - 32px); max-width: 460px;
  padding: 24px; color: var(--text);
  background: linear-gradient(180deg, #0a1428, #010a13);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px #000, 0 20px 50px rgba(0,0,0,.7);
}
.dialog::backdrop { background: rgba(0,0,0,.7); }
.dialog h2 { margin-top: 0; font-family: var(--serif); color: var(--gold); }
.dialog p { font-family: var(--sans); line-height: 1.45; }
.dialog-close { position: absolute; top: 8px; right: 10px; }
.dialog-close button { background: none; border: 0; font-size: 1.2rem; color: var(--muted); cursor: pointer; }
.legend { list-style: none; padding: 0; display: grid; gap: 8px; font-family: var(--sans); }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend .sq.arrow-up::before, .legend .sq.arrow-down::before { inset: 3px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 12px 0; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border: 1px solid var(--gold-lo); background: rgba(200,170,110,.05); }
.stat b { font: 700 1.8rem var(--sans); color: var(--gold-hi); }
.stat span { font: .8rem var(--sans); color: var(--muted); text-align: center; }

/* ---------- Toast & footer ---------- */

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 100;
  padding: 10px 20px;
  font: 700 .95rem var(--sans); color: var(--ink);
  background: var(--gold-hi); border: 2px solid var(--gold);
  animation: fade 2.2s forwards;
}
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

.site-footer {
  margin-top: auto; width: 100%; max-width: 760px;
  padding: 24px 16px 30px; text-align: center;
  font: .78rem/1.5 var(--sans); color: #6c7480;
}
.site-footer nav { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; }
.site-footer nav a { color: var(--gold); text-decoration: none; font-size: .9rem; }

@media (max-width: 640px) {
  :root { --sq: 58px; }
  .sq { font-size: .68rem; }
  .sq.small { font-size: .6rem; }
  .mode-dot { width: 46px; height: 46px; }
  .mode-dot svg { width: 26px; height: 26px; }
  .emoji { width: 52px; height: 52px; font-size: 1.8rem; }
  .box { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Brand row: settings gear · logo · language flag ---------- */

.brand-row { display: flex; align-items: center; justify-content: center; gap: 22px; }

/* Hextech-style controls: bright gold ring, lit teal-black core, soft glow. */
.brand-btn {
  position: relative; flex: none;
  height: 50px; min-width: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  color: #f6dfa4;
  border: 0; border-radius: 999px;
  background:
    radial-gradient(circle at 50% 30%, #1e4a5a 0%, #0b2230 55%, #061520 100%) padding-box,
    linear-gradient(160deg, #fff0bf 0%, #e3bf6e 30%, #9a7430 60%, #f1d38c 100%) border-box;
  border: 2.5px solid transparent;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.65),
    0 0 14px rgba(240,200,110,.35),
    inset 0 0 12px rgba(10,200,185,.25);
  transition: transform .2s, box-shadow .2s, color .2s;
}
.brand-btn:hover, .brand-btn:focus-visible {
  color: #fff6dc;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.65),
    0 0 22px rgba(240,200,110,.6),
    0 0 10px rgba(10,200,185,.45),
    inset 0 0 16px rgba(10,200,185,.45);
  outline: none;
}
.brand-btn:active { transform: scale(.95); }

.gear-btn { width: 50px; padding: 0; }
.gear-btn svg { width: 26px; height: 26px; filter: drop-shadow(0 0 4px rgba(240,200,110,.55)); transition: transform .5s ease; }
.gear-btn svg { stroke-width: 2; }
.gear-btn:hover svg, .gear-btn:focus-visible svg { transform: rotate(90deg); }

.flag-btn { padding: 0 16px 0 12px; }
.flag-btn:hover, .flag-btn:focus-visible { transform: translateY(-1px); }
.flag { font-size: 1.35rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.lang-code { font: 800 .9rem/1 var(--sans); letter-spacing: 1.5px; color: inherit; text-shadow: 0 0 6px rgba(240,200,110,.5); }

/* ---------- Settings dialog ---------- */

.set-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.set-link, .set-toggle {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  color: var(--text); background: rgba(1,10,19,.7);
  border: 1px solid var(--gold-lo);
  font-family: var(--sans);
  transition: border-color .2s, background .2s;
}
.set-link:hover, .set-toggle:hover { border-color: var(--gold); background: rgba(200,170,110,.06); }
.set-icon { width: 26px; height: 26px; flex: none; color: var(--gold); }
.set-icon svg { width: 100%; height: 100%; display: block; }
.set-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.set-label { font-weight: 700; font-size: .98rem; color: var(--gold-hi); }
.set-desc { font-size: .8rem; color: var(--muted); }
.set-go { color: var(--gold); font-size: .9rem; }

/* iOS-style switch, gold when on (matches the original's toggles). */
.set-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch {
  position: relative; flex: none; width: 44px; height: 24px; border-radius: 12px;
  background: #1b2633; border: 1px solid var(--gold-lo); transition: background .2s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #8a9da8; transition: transform .2s, background .2s;
}
.set-toggle input:checked + .switch { background: linear-gradient(180deg, #c8aa6e, #8a6a30); }
.set-toggle input:checked + .switch::after { transform: translateX(20px); background: #fff6dc; }
.set-toggle input:focus-visible + .switch { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- Language dialog ---------- */

.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0; }
.lang-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  font: 600 .95rem var(--sans); color: var(--text); text-align: left;
  background: rgba(1,10,19,.7); border: 1px solid var(--gold-lo);
  transition: border-color .2s, background .2s;
}
.lang-opt:hover { border-color: var(--gold); }
.lang-opt.active { border-color: var(--teal); background: rgba(10,200,185,.1); color: var(--gold-hi); }

/* ---------- Transfer dialog ---------- */

.transfer-code {
  width: 100%; margin: 10px 0; padding: 10px; resize: vertical;
  font: .78rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text);
  background: #050d17; border: 1px solid var(--gold-lo); word-break: break-all;
}
.transfer-code:focus { outline: none; border-color: var(--teal); }
.transfer-h { margin: 18px 0 0; font-family: var(--serif); color: var(--gold); font-size: 1rem; }

/* Click to validate: the guess button glows once a champion is picked. */
.guess-btn.ready { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(240,212,140,.7); }

/* ---------- Colorblind mode: blue / orange / grey instead of green / red ---------- */

body.colorblind { --correct: #1f6fd1; --partial: #f08c1a; --wrong: #5c6670; }
body.colorblind .sq.correct,
body.colorblind .guess-tile.correct { background: linear-gradient(180deg, #3d8bf0, var(--correct)); }
body.colorblind .sq.partial { background: linear-gradient(180deg, #ffa940, var(--partial)); }
body.colorblind .sq.wrong,
body.colorblind .guess-tile.wrong { background: linear-gradient(180deg, #78828c, var(--wrong)); }
body.colorblind .imp-tile.correct { background: linear-gradient(180deg, #3d8bf0, var(--correct)); }
body.colorblind .imp-tile.wrong { background: linear-gradient(180deg, #78828c, var(--wrong)); }
body.colorblind .imp-status.correct, body.colorblind .ok, body.colorblind .victory { color: #6fb0ff !important; }
body.colorblind .imp-status.wrong, body.colorblind .ko { color: #ffb15c; }
body.colorblind .result { border-color: var(--correct); }

@media (max-width: 560px) {
  .brand-row { gap: 10px; }
  .brand-btn { height: 42px; min-width: 42px; }
  .gear-btn { width: 42px; }
  .gear-btn svg { width: 22px; height: 22px; }
  .flag-btn { padding: 0 10px; gap: 5px; }
  .lang-code { font-size: .78rem; letter-spacing: 1px; }
  .lang-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Right-to-left languages (Hebrew, Arabic, Persian) ----------
   Flex and grid mirror on their own; these rules flip the pieces that are
   positioned or shaded by direction. */

[dir="rtl"] .row-badge { left: auto; right: 0; border-left: 0; border-right: 2px solid var(--gold); }
[dir="rtl"] .row-copy, [dir="rtl"] .set-text, [dir="rtl"] .mode-card-text { text-align: right; }
[dir="rtl"] .game-row:is(:hover, :focus-visible) .row-play { transform: translateX(-4px) scale(1.05); }
[dir="rtl"] .row-art.custom { transform-origin: 25% 50%; }
[dir="rtl"] .row-art.custom + .row-shade,
[dir="rtl"] .row-shade { transform: scaleX(-1); }   /* darkest side follows the text */
[dir="rtl"] .row-art:not(.custom) { inset: 0 32% 0 190px; }
[dir="rtl"] .guess-btn svg, [dir="rtl"] .set-go { transform: scaleX(-1); }
[dir="rtl"] .suggestions, [dir="rtl"] .search input { text-align: right; }
[dir="rtl"] .imp-key { left: auto; right: 6px; }
[dir="rtl"] .imp-row.is-correct { border-left-width: 2px; border-right: 4px solid var(--correct); }
[dir="rtl"] .imp-row.is-wrong { border-left-width: 2px; border-right: 4px solid var(--wrong); }
[dir="rtl"] .imp-head, [dir="rtl"] .set-link, [dir="rtl"] .set-toggle, [dir="rtl"] .lang-opt { text-align: right; }
[dir="rtl"] .set-toggle input:checked + .switch::after { transform: translateX(-20px); }
[dir="rtl"] .switch::after { left: auto; right: 2px; }
[dir="rtl"] .dialog-close { right: auto; left: 10px; }
[dir="rtl"] .toast { direction: rtl; }
@media (max-width: 560px) {
  [dir="rtl"] .row-cta { right: auto; left: 10px; }
  [dir="rtl"] .row-art:not(.custom) { inset: 0 52% 0 24px; }
}
/* Numbers, champion names and emoji stay readable inside RTL text. */
[dir="rtl"] .countdown, [dir="rtl"] .imp-score, [dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }