/* Art deco theme: emerald, antique gold and ivory.
   Text is black or green only; gold is used for ornament (lines, frames). */
:root {
  --green:       #014a33;
  --green-dark:  #003322;
  --green-tint:  #e0ebe5;
  --gold:        #b8933f;
  --gold-tint:   #f3ead3;
  --ivory:       #f7f1e3;
  --paper:       #fffcf5;
  --ink:         #000000;
  --red:         #9b2c2c;
  --red-tint:    #f7e4e1;
  --font-body:   "Petrona", Georgia, serif;
  --font-script: "Monsieur La Doulaise", "Petrona", cursive;
  --green-text: var(--green);          /* green used as a text color */
  --green-text-hover: var(--green-dark);
  --on-fill: var(--paper);              /* text on green/red fills */
  --shadow: rgba(0, 0, 0, .25);
  --frame: 0 0 0 1px var(--gold), 0 0 0 5px var(--paper), 0 0 0 6px var(--gold);
}

/* Dark theme: chosen with the toggle in the top bar (saved in a cookie). */
:root[data-theme="dark"] {
  --green:       #0b5e42;
  --green-dark:  #08472f;
  --green-tint:  #17332a;
  --gold:        #c9a85a;
  --gold-tint:   #2b2617;
  --ivory:       #0e1311;
  --paper:       #161d1a;
  --ink:         #f2ead8;
  --red:         #a33a3a;
  --red-tint:    #3a1e1c;
  --green-text:  #6fc7a1;
  --green-text-hover: #94d9bb;
  --on-fill:     #fbf6ea;
  --shadow: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
}

a { color: var(--green-text); }
a:hover { color: var(--green-text-hover); }

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--green-text);
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.25;
  margin: 0 0 .75rem;
}
h1 { font-size: 1.45rem; }
h2 { font-size: 1.1rem; margin-top: 2rem; }
.guest h1, .guest .eyebrow { text-align: center; }

/* The script font is decorative: only use it through this class. */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.75rem, 10vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green-text);
}

.container {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.75rem 16px 3rem;
}
body.admin .container { max-width: 60rem; }

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem 16px;
  background: var(--paper);
  border-bottom: 4px double var(--gold);
}
.topbar form { margin: 0; }
.topbar-user {
  margin-left: auto;
  font-size: .95rem;
}
.topbar .topbar-spacer { margin-left: auto; }

/* Ornaments */
.hero { text-align: center; margin: .5rem 0 1.5rem; }
.hero h1 { margin-bottom: .25rem; }

.divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 5px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.divider span {
  width: 10px;
  height: 10px;
  background: var(--green);
  outline: 1px solid var(--gold);
  outline-offset: 2px;
  transform: rotate(45deg);
}

/* Text helpers */
.lead { font-size: 1.2rem; }
.hint { font-size: 1rem; font-style: italic; }
.eyebrow {
  color: var(--green-text);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin: 0 0 .4rem;
}
.center { text-align: center; }
.spaced { margin-top: 1.25rem; }

/* Cards: deco double frame */
.card {
  background: var(--paper);
  box-shadow: var(--frame);
  padding: 1.25rem;
  margin: 6px 6px 1.5rem;
}
.stack { display: flex; flex-direction: column; gap: .75rem; }
.narrow { max-width: 24rem; }
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}
.button-row > * { flex: 1 1 12rem; }

/* Forms */
label { font-weight: 600; }
input, textarea {
  font: inherit;
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
input:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent);
  outline-offset: 2px;
  border-color: var(--green-text);
}
textarea { resize: vertical; }

/* Buttons: square, gold double border, tracked caps.
   Variants only change --fill (the background showing between the two gold lines). */
.button {
  --fill: var(--green);
  display: block;
  width: 100%;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-align: center;
  text-decoration: none;
  padding: .9rem 1rem;
  border: none;
  border-radius: 0;
  background: var(--fill);
  color: var(--on-fill);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px var(--fill), inset 0 0 0 5px var(--gold);
  cursor: pointer;
}
.button:hover { --fill: var(--green-dark); color: var(--on-fill); }
.button-outline { --fill: var(--paper); color: var(--green-text); }
.button-outline:hover { --fill: var(--green-tint); color: var(--green-text-hover); }
.button-danger { --fill: var(--red); }
.button-danger:hover { --fill: color-mix(in srgb, var(--red) 80%, #000); }
.button-small {
  display: inline-block;
  width: auto;
  padding: .5rem .9rem;
  font-size: .78rem;
}
.spaced.button, .spaced .button { margin-top: 1.25rem; }
form.inline { display: inline; margin: 0; }

/* Flash messages */
.flash {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--ink);
  border-left: 4px solid;
}
.flash-error { background: var(--red-tint); border-color: var(--red); }
.flash-success { background: var(--green-tint); border-color: var(--green-text); }

/* Toast: shows briefly, then hides itself (pure CSS) */
.toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 10;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: .8rem 1.4rem;
  background: var(--green);
  color: var(--on-fill);
  font-weight: 600;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px var(--green), inset 0 0 0 5px var(--gold), 0 6px 18px var(--shadow);
  pointer-events: none;
  animation: toast 3.2s ease forwards;
}
@keyframes toast {
  0%   { opacity: 0; transform: translate(-50%, -12px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -12px); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: toast-fade 3.2s step-end forwards; transform: translate(-50%, 0); }
  @keyframes toast-fade { 100% { opacity: 0; visibility: hidden; } }
}

/* Home */
.game-card {
  display: block;
  background: var(--paper);
  box-shadow: var(--frame);
  padding: 1.25rem;
  margin: 6px 6px 1.5rem;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.game-card:hover { background: var(--green-tint); color: var(--ink); }
.game-card h2 { margin: 0 0 .35rem; }
.game-card p { margin: 0 0 .75rem; }
.game-card .button { margin-top: 1rem; }
.badge, .tag {
  display: inline-block;
  font-size: .8rem;
  padding: .15rem .65rem;
  background: var(--gold-tint);
  color: var(--ink);
  border: 1px solid var(--gold);
}
.tag-warn { background: var(--red-tint); border-color: var(--red); }

/* This or That */
.choice-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: 1.25rem;
}
.choice-main {
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1.25rem .75rem;
  min-height: 7rem;
  background: var(--green);
  color: var(--on-fill);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px var(--green), inset 0 0 0 6px var(--gold);
  cursor: pointer;
}
.choice-main:hover {
  background: var(--green-dark);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px var(--green-dark), inset 0 0 0 6px var(--gold);
}
.choice-minor-row {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
}
.choice-minor {
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .45rem 1.1rem;
  background: var(--paper);
  color: var(--green-text);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--gold);
  cursor: pointer;
}
.choice-minor:hover { background: var(--green-tint); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px var(--green-tint), inset 0 0 0 4px var(--gold); }

.scale { margin: 1.5rem 6px; }
.scale-labels, .scale-numbers {
  display: flex;
  justify-content: space-between;
}
.scale-label.script { font-size: 2.25rem; }
.scale-numbers { font-size: .95rem; margin-top: .6rem; }
.scale-track {
  position: relative;
  height: 9px;
  margin: .25rem 14px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat;
}
.scale-track::before, .scale-track::after {
  /* end caps */
  content: "";
  position: absolute;
  top: -6px;
  width: 1px;
  height: 19px;
  background: var(--gold);
}
.scale-track::before { left: 0; }
.scale-track::after { right: 0; }
.scale-marker {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--green);
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.tally { list-style: none; padding: .5rem 1.25rem; }
.tally li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--gold-tint);
}
.tally li:last-child { border-bottom: none; }
.tally strong { color: var(--green-text); }

/* Trivia */
.option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  width: 100%;
  font: inherit;
  text-align: left;
  padding: 1rem 1.1rem;
  --fill: var(--paper);
  --line: var(--gold);
  background: var(--fill);
  color: var(--ink);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 4px var(--fill), inset 0 0 0 5px var(--line);
  cursor: pointer;
}
button.option:hover { --fill: var(--green-tint); }
.options-revealed { list-style: none; padding: 0; margin: 1rem 0 1.25rem; }
.options-revealed .option { cursor: default; }
.option-correct { --fill: var(--green-tint); --line: var(--green); font-weight: 600; }
.option-wrong { --fill: var(--red-tint); --line: var(--red); }

.leaderboard { list-style: none; padding: .25rem 1.25rem; }
.leaderboard li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--gold-tint);
}
.leaderboard li:last-child { border-bottom: none; }
.leaderboard .rank { width: 1.75rem; font-weight: 700; color: var(--green-text); }
.leaderboard .name { flex: 1; overflow-wrap: anywhere; }
.leaderboard .score { font-weight: 600; }
.leaderboard li.me { background: var(--gold-tint); margin: 0 -1.25rem; padding: .65rem 1.25rem; }

/* Admin */
.admin-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.admin-actions form { margin: 0; }
.admin-actions .button-small { width: 100%; }
.table-wrap { overflow-x: auto; margin: 6px; }
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  font-size: 1rem;
  border: 1px solid var(--gold);
}
.table th, .table td {
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--gold-tint);
  vertical-align: middle;
}
.table th {
  background: var(--gold-tint);
  color: var(--green-text);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}
.note-text { white-space: pre-wrap; margin: 0; }

/* Theme toggle */
.topbar .theme-toggle { margin: 0; }
.topbar-guest { justify-content: flex-end; }

/* Admin question editor */
.row-actions { white-space: nowrap; }
.row-actions .button + .button { margin-left: .4rem; }
.choice-fieldset {
  border: 1px solid var(--gold);
  padding: .5rem .9rem .75rem;
  margin: 0;
}
.choice-fieldset legend { font-weight: 600; padding: 0 .3rem; }
.radio { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; font-weight: 400; }
.radio input { width: auto; accent-color: var(--green); }
.filter-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1.5rem; }
.filter-form label { display: block; margin-bottom: .3rem; }
select {
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Fishing: fixed layout so the main button never moves between screens */
.fishing-title { white-space: nowrap; }
.fishing-status {
  min-height: 4.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: .9rem 0;
  font-size: 1rem;
  line-height: 1.45;
}
.fishing-status .tag { vertical-align: 1px; }
.fishing-action { margin: 0; }
.fishing-button { padding: 1.25rem 1rem; font-size: 1.1rem; }
.fishing-button-bite { animation: urgent .6s ease-in-out infinite; }
@keyframes urgent {
  50% { box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px var(--fill), inset 0 0 0 5px var(--gold), 0 0 0 4px rgba(201, 168, 90, .55); }
}

/* Lake Michigan scene */
.pond {
  --sky-top: #eccb92;
  --sky-mid: #f5dfb4;
  --sky-low: #fbf0da;
  --sun: #f1b257;
  --shore: #9db3a6;
  --lamp: #f7d27a;
  --water-top: #4f9a96;
  --water-mid: #2a6f72;
  --water-bottom: #0f3d43;
  --reeds: #1f3d31;
  --reed-heads: #4b3423;
  --line: rgba(20, 20, 20, .55);
  --horizon: 52%;
  --bobber-y: 64%;
  position: relative;
  height: 13rem;
  margin: 6px 6px 0;
  overflow: hidden;
  box-shadow: var(--frame);
  isolation: isolate;
}
:root[data-theme="dark"] .pond {
  --sky-top: #070f1c;
  --sky-mid: #13213a;
  --sky-low: #27365a;
  --sun: #efe8d2;
  --shore: #0c1622;
  --water-top: #1f5660;
  --water-mid: #123a43;
  --water-bottom: #06191d;
  --reeds: #050b0c;
  --reed-heads: #120d0a;
  --line: rgba(255, 255, 255, .5);
}

/* Sky */
.pond-sky {
  position: absolute;
  inset: 0 0 calc(100% - var(--horizon)) 0;
  background: linear-gradient(var(--sky-top), var(--sky-mid) 55%, var(--sky-low));
}
.pond-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(1px 1px at 8% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 21% 58%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 37% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 49% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 86% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 16%, #fff 50%, transparent 51%);
}
:root[data-theme="dark"] .pond-stars { opacity: 1; animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .45; } }
.pond-sun {
  position: absolute;
  left: 72%;
  bottom: -30px;
  width: 84px;
  height: 84px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--sun) 70%, #fff), var(--sun) 60%);
  box-shadow: 0 0 50px 14px color-mix(in srgb, var(--sun) 45%, transparent);
}
:root[data-theme="dark"] .pond-sun {
  bottom: auto;
  top: 16px;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 38% 38%, #fffaf0, var(--sun) 70%);
  box-shadow: 0 0 24px 6px rgba(239, 232, 210, .35);
}
.pond-cloud {
  position: absolute;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  filter: blur(1.5px);
  animation: drift 70s linear infinite;
}
.pond-cloud::before {
  content: "";
  position: absolute;
  left: 22%;
  bottom: 4px;
  width: 46%;
  height: 12px;
  border-radius: 999px;
  background: inherit;
}
.pond-cloud-1 { top: 24%; width: 76px; }
.pond-cloud-2 { top: 50%; width: 52px; opacity: .8; animation-duration: 95s; animation-delay: -50s; }
:root[data-theme="dark"] .pond-cloud { background: rgba(200, 210, 235, .1); }
@keyframes drift { from { left: -22%; } to { left: 112%; } }
.pond-gull {
  position: absolute;
  width: 14px;
  fill: none;
  stroke: rgba(40, 40, 40, .55);
  stroke-width: 1.4;
  stroke-linecap: round;
  animation: glide 34s linear infinite, flap 1.6s ease-in-out infinite;
}
.pond-gull-1 { top: 20%; }
.pond-gull-2 { top: 34%; width: 10px; animation-duration: 41s, 1.9s; animation-delay: -12s, -.5s; }
:root[data-theme="dark"] .pond-gull { display: none; }
@keyframes glide { from { left: -6%; } to { left: 106%; } }
@keyframes flap { 50% { transform: scaleY(.55) translateY(1px); } }

/* Far shore and lighthouse */
.pond-shore {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--horizon) - 30px);
  height: 32px;
}
.pond-shore { overflow: visible; }
.shore-far, .lighthouse { fill: var(--shore); }
.lighthouse { transform-box: fill-box; transform-origin: 50% 100%; scale: 1.5; }
.lighthouse-stripe { fill: color-mix(in srgb, #a8282a 55%, var(--shore)); }
.lighthouse-lamp { fill: var(--lamp); }
.lighthouse-beam { fill: rgba(247, 210, 122, 0); transform-origin: 326px 2.6px; }
:root[data-theme="dark"] .lighthouse-lamp { filter: drop-shadow(0 0 2px var(--lamp)); }
:root[data-theme="dark"] .lighthouse-beam {
  fill: rgba(247, 210, 122, .22);
  animation: beam 6s ease-in-out infinite;
}
@keyframes beam {
  0%, 100% { opacity: 0; transform: scaleX(.2); }
  30%, 45% { opacity: 1; transform: scaleX(1); }
  70% { opacity: 0; transform: scaleX(.2); }
}

/* Water */
.pond-water {
  position: absolute;
  inset: var(--horizon) 0 0 0;
  background: linear-gradient(var(--water-top), var(--water-mid) 45%, var(--water-bottom));
}
.pond-glint {
  position: absolute;
  left: 72%;
  top: 2px;
  width: 64px;
  height: 70%;
  translate: -50% 0;
  background: repeating-linear-gradient(transparent 0 4px, color-mix(in srgb, var(--sun) 75%, #fff) 4px 6px);
  mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 20%, transparent 75%);
  opacity: .55;
  animation: glimmer 3.4s ease-in-out infinite alternate;
}
:root[data-theme="dark"] .pond-glint { width: 34px; opacity: .35; }
@keyframes glimmer {
  from { background-position: 0 0; scale: .9 1; }
  to { background-position: 0 6px; scale: 1.1 1; }
}
.wave {
  position: absolute;
  left: 0;
  width: 200%;
  animation: wave-drift 18s linear infinite;
}
.wave-1 { top: -7px; height: 10px; fill: var(--water-top); animation-duration: 22s; }
.wave-2, .wave-3 { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wave-2 { top: 28%; height: 8px; stroke: rgba(255, 255, 255, .16); animation-duration: 16s; animation-direction: reverse; }
.wave-3 { top: 60%; height: 8px; stroke: rgba(255, 255, 255, .1); animation-duration: 26s; }
.wave path { vector-effect: non-scaling-stroke; }
@keyframes wave-drift { to { transform: translateX(-50%); } }
.pond-swimmer {
  position: absolute;
  width: 30px;
  fill: rgba(5, 25, 28, .32);
  filter: blur(.6px);
  animation: swim-left 24s linear infinite, sway 3s ease-in-out infinite;
}
.pond-swimmer-1 { top: 48%; }
.pond-swimmer-2 { top: 72%; width: 22px; animation-name: swim-right, sway; animation-duration: 19s, 2.6s; animation-delay: -7s, -1s; }
.pond-swimmer-3 { top: 30%; width: 18px; fill: rgba(5, 25, 28, .2); animation-duration: 31s, 3.4s; animation-delay: -18s, -2s; }
@keyframes swim-left { from { left: 106%; } to { left: -10%; } }
@keyframes swim-right { from { left: -10%; transform: scaleX(-1); } to { left: 106%; transform: scaleX(-1); } }
@keyframes sway { 50% { translate: 0 3px; } }

/* Foreground cattails */
.pond-reeds {
  position: absolute;
  bottom: -4px;
  width: 54px;
  height: 82px;
  transform-origin: 50% 100%;
  animation: reeds 5s ease-in-out infinite alternate;
}
.pond-reeds-left { left: -6px; }
.pond-reeds-right { right: -6px; scale: -1 1; animation-delay: -2.5s; }
.reed-stems { stroke: var(--reeds); stroke-width: 1.8; }
.reed-heads { fill: var(--reed-heads); }
@keyframes reeds { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }

/* Line, bobber and ripples */
.pond-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pond-line path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pond-bite .pond-line { animation: taut .18s ease-in-out infinite alternate; }
@keyframes taut { to { translate: 1px 1px; } }
.bobber-wrap {
  position: absolute;
  left: 50%;
  top: var(--bobber-y);
  width: 0;
  height: 0;
}
.bobber {
  position: absolute;
  left: -9px;
  top: -13px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85) 0 1.6px, transparent 2.6px),
    linear-gradient(#cf3a2e 0 47%, #1b1b1b 47% 55%, #fbf6ea 55%);
  box-shadow: inset -2px -3px 4px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .45);
  animation: bob 3.2s ease-in-out infinite;
}
.bobber::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -6px;
  width: 2px;
  height: 7px;
  border-radius: 1px;
  background: #cf3a2e;
}
.bobber::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 17px;
  width: 22px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  filter: blur(1.5px);
}
.pond-waiting .bobber { animation: bob 3.2s ease-in-out infinite, nibble 3.7s ease-in-out infinite; }
.pond-bite .bobber { animation: dunk .3s cubic-bezier(.4, 0, .6, 1) infinite alternate; }
@keyframes bob { 50% { transform: translateY(2.5px); } }
@keyframes nibble { 0%, 60%, 70%, 100% { translate: 0 0; } 63% { translate: 0 4px; } 66% { translate: 0 1px; } }
@keyframes dunk { from { transform: translateY(5px) rotate(-10deg); } to { transform: translateY(10px) rotate(10deg); } }
.ripple {
  position: absolute;
  left: -24px;
  top: -5px;
  width: 48px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  animation: ripple 3.6s cubic-bezier(.2, .6, .4, 1) infinite;
}
.ripple-2 { animation-delay: -1.2s; }
.ripple-3 { animation-delay: -2.4s; }
.pond-bite .ripple { animation-duration: .9s; border-color: rgba(255, 255, 255, .7); }
.pond-bite .ripple-2 { animation-delay: -.3s; }
.pond-bite .ripple-3 { animation-delay: -.6s; }
@keyframes ripple { from { transform: scale(.35); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.ripple-fade, .ripple-splash { left: calc(50% - 24px); top: calc(var(--bobber-y) - 5px); }
.ripple-fade { animation-iteration-count: 2; animation-fill-mode: forwards; }
.ripple-splash { animation-duration: 1.4s; animation-iteration-count: 2; animation-fill-mode: forwards; }
.bite-alert {
  position: absolute;
  left: -12px;
  top: -58px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--red);
  font-weight: 700;
  font-size: .95rem;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 3px var(--paper), 0 0 0 4px var(--gold), 0 4px 10px rgba(0, 0, 0, .25);
  animation: alert .55s ease-in-out infinite alternate;
}
@keyframes alert { from { transform: translateY(0) scale(1); } to { transform: translateY(-4px) scale(1.06); } }

/* Caught: the catch leaps out in an arc, with spray and a few sparkles */
.caught-item {
  position: absolute;
  left: 50%;
  top: 44%;
  font-size: 3.6rem;
  line-height: 1;
  translate: -50% -50%;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3));
  animation: leap 1.1s cubic-bezier(.2, .9, .25, 1.15) both, hover 2.6s 1.1s ease-in-out infinite alternate;
}
@keyframes leap {
  0% { transform: translate(-30px, 70px) rotate(-40deg) scale(.35); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}
@keyframes hover { to { transform: translateY(-5px) rotate(2deg); } }
.splash {
  position: absolute;
  left: calc(50% - 44px);
  top: calc(var(--bobber-y) - 34px);
  width: 88px;
  height: 44px;
  background:
    radial-gradient(circle at 12% 72%, rgba(255, 255, 255, .85) 2.5px, transparent 3.5px),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .85) 3px, transparent 4px),
    radial-gradient(circle at 48% 12%, rgba(255, 255, 255, .85) 2px, transparent 3px),
    radial-gradient(circle at 66% 28%, rgba(255, 255, 255, .85) 3px, transparent 4px),
    radial-gradient(circle at 86% 66%, rgba(255, 255, 255, .85) 2.5px, transparent 3.5px);
  animation: splash 1s ease-out both;
}
@keyframes splash { from { transform: translateY(12px) scale(.3); opacity: 1; } to { transform: translateY(-10px) scale(1.5); opacity: 0; } }
.glint {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #f4dc8f;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px rgba(244, 220, 143, .9));
  animation: sparkle 1.8s ease-in-out infinite;
}
.glint-1 { left: calc(50% - 46px); top: 22%; animation-delay: .9s; }
.glint-2 { left: calc(50% + 38px); top: 30%; width: 8px; height: 8px; animation-delay: 1.3s; }
.glint-3 { left: calc(50% + 18px); top: 12%; width: 6px; height: 6px; animation-delay: 1.7s; }
@keyframes sparkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pond *, .pond *::before, .pond *::after, .fishing-button-bite { animation: none !important; }
  .pond-swimmer, .pond-gull, .glint { display: none; }
}

/* Tackle box */
.tackle { list-style: none; padding: .25rem 1.25rem; }
.tackle li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--gold-tint);
}
.tackle li:last-child { border-bottom: none; }
.tackle-item { font-size: 1rem; }
.tackle-actions { display: flex; gap: .4rem; margin: 0; flex-shrink: 0; }

/* Casino */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wallet {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 6px 1.25rem;
  padding: .6rem 1rem;
  background: var(--gold-tint);
  border: 1px solid var(--gold);
}
.wallet span { font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; }
.wallet strong { color: var(--green-text); font-size: 1.15rem; }
.casino-result {
  min-height: 4.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  text-align: center;
  margin: 1rem 0;
  font-size: 1rem;
  line-height: 1.45;
}
.button[disabled] { opacity: .45; cursor: not-allowed; }

/* Slots */
.slot-machine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin: 6px 6px 0;
  padding: 1rem;
  background: linear-gradient(var(--green), var(--green-dark));
  box-shadow: var(--frame);
}
.slot-reel {
  height: 5.5rem;
  overflow: hidden;
  background: linear-gradient(#e9e2cf, #fffdf6 30%, #fffdf6 70%, #e9e2cf);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 6px 10px rgba(0, 0, 0, .18), inset 0 -6px 10px rgba(0, 0, 0, .18);
}
.slot-strip { display: flex; flex-direction: column; }
.slot-strip > span {
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.9rem;
  line-height: 1;
}
/* After a spin the strip scrolls through every symbol and lands on the result. */
.slot-spun .slot-strip {
  transform: translateY(calc(-100% + 5.5rem));
  animation: reel-spin calc(.9s + var(--reel) * .45s) cubic-bezier(.15, .7, .25, 1) both;
}
@keyframes reel-spin { from { transform: translateY(0); filter: blur(2px); } 70% { filter: blur(0); } }

/* Roulette */
.roulette {
  position: relative;
  width: min(17rem, 80vw);
  aspect-ratio: 1;
  margin: .5rem auto 0;
}
.roulette-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 6px #5a3b1c, 0 0 0 8px var(--gold), 0 8px 20px rgba(0, 0, 0, .35);
}
.roulette-spun { animation: wheel-spin 3.2s cubic-bezier(.12, .7, .2, 1) both; }
@keyframes wheel-spin { from { transform: rotate(0deg); } to { transform: rotate(var(--final)); } }
.roulette-hub {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 18%, #5a3b1c 19% 60%, #3d2812 61%);
  box-shadow: 0 0 0 2px var(--gold);
}
.roulette-pointer {
  position: absolute;
  left: 50%;
  top: -14px;
  z-index: 1;
  translate: -50% 0;
  border: 11px solid transparent;
  border-top: 18px solid var(--gold);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}
.roulette-number {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 0 0 2px var(--gold);
}
.roulette-red { background: #a8282a; }
.roulette-black { background: #141414; }
.roulette-green { background: #0b7a4b; }
.roulette-number-input { width: 7rem; margin-top: .5rem; }

/* Blackjack */
.felt {
  margin: 6px 6px 0;
  padding: 1rem;
  background: radial-gradient(ellipse at 50% 30%, #12704f, #0a4a33 75%);
  box-shadow: var(--frame);
  color: #fbf6ea;
}
.hand + .hand { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed rgba(201, 168, 90, .5); }
.hand-label {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.cards { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 5.2rem; }
.playing-card {
  position: relative;
  width: 3.6rem;
  height: 5.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #fffdf6;
  color: #141414;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35), inset 0 0 0 1px #d9cfb4;
  animation: deal .35s ease-out both;
  animation-delay: calc(var(--deal, 0) * .12s);
}
.card-red { color: #b3262a; }
.card-rank { font-weight: 700; font-size: 1.25rem; line-height: 1; }
.card-suit { font-size: 1.5rem; line-height: 1.1; }
.card-back {
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(201, 168, 90, .45) 5px 6px),
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(201, 168, 90, .45) 5px 6px),
    #7a1f22;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35), inset 0 0 0 3px #fffdf6;
}
@keyframes deal { from { transform: translate(30px, -30px) rotate(8deg); opacity: 0; } }
.blackjack-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.blackjack-actions form { margin: 0; }
.blackjack-double { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce) {
  .slot-spun .slot-strip, .roulette-spun, .playing-card { animation-duration: .01s !important; }
}

/* Casino marquee sign with chasing bulbs */
.marquee {
  position: relative;
  margin: 6px 6px 1.25rem;
  padding: 1.6rem 1rem 1.5rem;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #1a6e50, var(--green-dark) 70%);
  box-shadow: var(--frame);
}
.marquee-eyebrow {
  margin: 0 0 .2rem;
  color: #e9d18f;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.marquee-title {
  margin: 0;
  color: #fbf6ea;
  font-size: 1.6rem;
  text-shadow: 0 0 10px rgba(233, 209, 143, .55);
}
.marquee-bulbs {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 8px;
  background:
    radial-gradient(circle, #fff6cf 0 2px, #e9c46a 3px, transparent 4px) 0 0 / 16px 8px repeat-x;
  animation: chase .9s steps(2) infinite;
  filter: drop-shadow(0 0 3px rgba(255, 220, 130, .9));
}
.marquee-bulbs-top { top: 8px; }
.marquee-bulbs-bottom { bottom: 8px; animation-direction: reverse; }
@keyframes chase { to { background-position: 16px 0; } }

/* Big-wins ticker (casino lobby only) */
.ticker {
  display: flex;
  align-items: stretch;
  margin: 0 6px 1.5rem;
  border: 1px solid var(--gold);
  background: var(--paper);
  overflow: hidden;
  font-size: .95rem;
}
.ticker-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: .5rem .7rem;
  background: var(--green);
  color: var(--on-fill);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ticker-window { overflow: hidden; flex: 1; }
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker calc(var(--items) * 5s) linear infinite;
}
.ticker-item { padding: .5rem 1.4rem; white-space: nowrap; }
.ticker-item + .ticker-item { border-left: 1px solid var(--gold-tint); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Win celebrations: confetti, coin shower and a banner that fades away */
.celebrate {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}
.confetti {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--s);
  height: calc(var(--s) * .45);
  background: var(--c);
  animation: confetti-fall var(--t) var(--d) cubic-bezier(.3, .2, .6, 1) both;
}
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(var(--r)); opacity: 1; }
  85% { opacity: 1; }
  to { transform: translateY(105vh) rotate(calc(var(--r) + 900deg)); opacity: 0; visibility: hidden; }
}
.coin-drop {
  position: absolute;
  top: -40px;
  left: var(--x);
  font-size: 1.6rem;
  animation: coin-fall var(--t) var(--d) ease-in both;
}
@keyframes coin-fall {
  from { transform: translateY(0) rotateY(0); }
  to { transform: translateY(110vh) rotateY(1080deg); visibility: hidden; }
}
.win-banner {
  position: fixed;
  left: 50%;
  top: 28%;
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: 1rem 2rem;
  background: var(--green);
  color: #fbf6ea;
  text-align: center;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px var(--green), inset 0 0 0 6px var(--gold), 0 12px 40px rgba(0, 0, 0, .45);
  animation: banner 3.2s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.win-banner-title {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.win-banner-amount { font-size: 1.1rem; font-weight: 600; }
.win-banner-jackpot {
  background: linear-gradient(110deg, #b8862f 0%, #f4dc8f 40%, #c9a85a 55%, #f4dc8f 70%, #b8862f 100%) 0 0 / 250% 100%;
  color: #013424;
  box-shadow: inset 0 0 0 1px #013424, inset 0 0 0 5px transparent, inset 0 0 0 6px #013424, 0 0 50px rgba(244, 220, 143, .8);
  animation: banner 3.8s cubic-bezier(.2, 1.4, .4, 1) forwards, shimmer 1.2s linear infinite;
}
.win-banner-jackpot .win-banner-title { font-size: 2.4rem; }
@keyframes banner {
  0% { transform: translate(-50%, 0) scale(.3); opacity: 0; }
  12% { transform: translate(-50%, 0) scale(1.08); opacity: 1; }
  20% { transform: translate(-50%, 0) scale(1); }
  82% { opacity: 1; }
  100% { transform: translate(-50%, -20px) scale(1); opacity: 0; visibility: hidden; }
}
@keyframes shimmer { to { background-position: -250% 0; } }
.wallet-win { animation: wallet-pop 1s ease-out 2; }
@keyframes wallet-pop {
  30% { background: #f4dc8f; box-shadow: 0 0 18px rgba(201, 168, 90, .8); }
}
.slot-win { animation: machine-flash .5s steps(2) 6; }
@keyframes machine-flash {
  50% { box-shadow: 0 0 0 1px var(--gold), 0 0 0 5px #f4dc8f, 0 0 0 6px var(--gold), 0 0 30px rgba(244, 220, 143, .9); }
}

/* Crash */
@property --dt {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.crash-sky {
  --t: calc(var(--t0) + var(--dt));
  --m: exp(calc(var(--k) * var(--t)));
  position: relative;
  height: 13rem;
  margin: 6px 6px 0;
  overflow: hidden;
  background: linear-gradient(#0a1424, #1d2b4a 60%, #3a2f5a);
  box-shadow: var(--frame);
  color: #fbf6ea;
}
.crash-flying { animation: crash-clock 200s linear forwards; }
@keyframes crash-clock { from { --dt: 0; } to { --dt: 200; } }
.crash-stars {
  position: absolute;
  inset: -100% 0 0 0;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 85%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 30%, #fff 50%, transparent 51%) 0 0 / 100% 50%;
  opacity: .7;
}
.crash-stars-2 { background-size: 60% 35%; opacity: .45; }
.crash-flying .crash-stars { animation: stars 1.6s linear infinite; }
.crash-flying .crash-stars-2 { animation-duration: 2.6s; }
@keyframes stars { to { transform: translateY(50%); } }
.crash-rocket {
  position: absolute;
  left: 18%;
  bottom: 18%;
  font-size: 3rem;
  line-height: 1;
}
.crash-flying .crash-rocket { animation: rocket-shake .18s ease-in-out infinite alternate; }
.crash-flying .crash-rocket::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd27a, #ff7a3a 50%, transparent 70%);
  z-index: -1;
  animation: flame .12s ease-in-out infinite alternate;
}
@keyframes rocket-shake { from { transform: translate(0, 0) rotate(-2deg); } to { transform: translate(2px, -3px) rotate(2deg); } }
@keyframes flame { to { transform: scale(1.35); opacity: .7; } }
.crash-rocket-idle { opacity: .85; }
.crash-rocket-safe { left: 50%; translate: -50% 0; bottom: 28%; animation: float 2s ease-in-out infinite alternate; }
@keyframes float { to { transform: translateY(-8px); } }
.crash-boom {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: 4.5rem;
  animation: boom .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes boom { from { transform: scale(.2); opacity: 0; } }
.crash-readout {
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(233, 209, 143, .6);
}
.crash-crashed .crash-readout { color: #ff8a80; right: auto; left: 50%; top: auto; bottom: .6rem; translate: -50% 0; font-size: 1.6rem; }
.crash-cashed .crash-readout { color: #9fe3c4; right: auto; left: 50%; top: 1rem; translate: -50% 0; font-size: 1.8rem; }
.crash-live { display: none; }
/* Browsers with CSS exp()/round()/mod() show the live, smoothly climbing number. */
@supports (width: calc(exp(1) * 1px)) and (width: round(down, 1.5px, 1px)) and (width: mod(3px, 2px)) {
  .crash-flying .crash-static { display: none; }
  .crash-flying .crash-live { display: inline; }
  .crash-live::before {
    counter-reset:
      whole round(down, var(--m), 1)
      frac round(down, mod(var(--m) * 100, 100), 1);
    content: counter(whole) "." counter(frac, decimal-leading-zero) "×";
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti, .coin-drop { display: none; }
  .win-banner { animation-timing-function: step-end; }
  .marquee-bulbs, .ticker-track, .crash-stars, .crash-rocket, .crash-rocket::after { animation: none !important; }
  .ticker-window { overflow-x: auto; }
}

/* Profile */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 .5rem;
}
.stat { text-align: center; padding: 1rem .75rem; }
.stat-label {
  margin: 0 0 .3rem;
  color: var(--green-text);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.stat-value { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat-value span { font-size: 1.1rem; font-weight: 400; }
.stat-note { margin: .3rem 0 0; font-size: .85rem; line-height: 1.35; }
.stat-caption { margin: .2rem 0 .4rem; font-weight: 600; }
.scale-compact { margin: .5rem 0 0; }
.scale-compact .scale-labels { font-size: .85rem; margin-bottom: .2rem; }

/* Catch ledger */
.ledger-group { margin: 0 6px 1.25rem; }
.ledger-heading {
  display: flex;
  justify-content: space-between;
  margin: 0 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--gold);
  color: var(--green-text);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ledger-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
  gap: .5rem;
}
.ledger-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .6rem .35rem;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--gold);
}
.ledger-emoji { font-size: 1.9rem; line-height: 1.2; }
.ledger-name { font-size: .85rem; font-weight: 600; line-height: 1.2; }
.ledger-count { font-size: .75rem; }
.ledger-unknown { border-style: dashed; background: transparent; }
.ledger-unknown .ledger-emoji { filter: brightness(0); opacity: .2; }
:root[data-theme="dark"] .ledger-unknown .ledger-emoji { filter: brightness(0) invert(1); opacity: .15; }

/* On phones the theme toggle is just its icon */
.theme-icon { font-size: .95rem; line-height: 1.25; }
@media (max-width: 600px) {
  .theme-label { display: none; }
  .theme-button { padding: .5rem .75rem; }
}

/* Roulette: nothing gives the result away until the wheel stops (--reveal) */
.spin-reveal { --reveal: 3.2s; }
.spin-reveal .casino-result,
.spin-reveal .wallet-swap { display: grid; align-items: center; }
.spin-reveal .casino-result { justify-items: center; }
.spin-reveal .wallet-swap { justify-items: end; }
.spin-reveal .reveal-pending,
.spin-reveal .reveal-after { grid-area: 1 / 1; }
.spin-reveal .reveal-pending { animation: reveal-out .2s var(--reveal) forwards; }
.spin-reveal .reveal-after { opacity: 0; visibility: hidden; animation: reveal-in .35s var(--reveal) forwards; }
@keyframes reveal-out { to { opacity: 0; visibility: hidden; } }
@keyframes reveal-in { to { opacity: 1; visibility: visible; } }
.casino-result-row { display: flex; align-items: center; gap: .9rem; }
.spin-reveal .wallet-win { animation-delay: var(--reveal); }
.spin-reveal .confetti,
.spin-reveal .coin-drop { animation-delay: calc(var(--d) + var(--reveal)); }

/* Result popup: tap to close, or it fades on its own 2 seconds after appearing */
.result-popup {
  position: fixed;
  left: 50%;
  top: 30%;
  z-index: 22;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.2rem 2.2rem 1.1rem;
  translate: -50% 0;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--gold), 0 14px 40px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  animation: popup 2.6s var(--reveal, 0s) forwards;
}
@keyframes popup {
  0% { opacity: 0; visibility: visible; transform: scale(.8); }
  12% { opacity: 1; transform: scale(1.04); }
  18% { transform: scale(1); }
  88% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
.popup-toggle:checked + .result-popup { display: none; }
.popup-close {
  position: absolute;
  top: .35rem;
  right: .65rem;
  font-size: 1.3rem;
  line-height: 1;
  opacity: .7;
}
.result-popup .roulette-number { width: 3.4rem; height: 3.4rem; font-size: 1.4rem; }
.result-popup-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.result-popup-detail { font-size: 1.1rem; font-weight: 600; }
.result-popup-loss .result-popup-title { color: var(--red); }
:root[data-theme="dark"] .result-popup-loss .result-popup-title { color: #ff8a80; }
.result-popup-win {
  background: var(--green);
  color: #fbf6ea;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px var(--green), inset 0 0 0 6px var(--gold), 0 14px 40px rgba(0, 0, 0, .4);
}
.result-popup-jackpot {
  background: linear-gradient(110deg, #b8862f 0%, #f4dc8f 40%, #c9a85a 55%, #f4dc8f 70%, #b8862f 100%) 0 0 / 250% 100%;
  color: #013424;
  box-shadow: inset 0 0 0 1px #013424, inset 0 0 0 5px transparent, inset 0 0 0 6px #013424, 0 0 50px rgba(244, 220, 143, .8);
}

@media (prefers-reduced-motion: reduce) {
  .spin-reveal { --reveal: 0s; }
}
.wallet .wallet-swap span { font-size: inherit; letter-spacing: normal; text-transform: none; }

/* Color sample on a This or That question */
.swatch {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin: .25rem auto 1rem;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--paper), 0 0 0 5px var(--gold);
}
.swatch-inline { display: inline-block; width: 1rem; height: 1rem; margin: 0 0 0 .4rem; vertical-align: -2px; box-shadow: 0 0 0 1px var(--gold); }

/* Trivia: pick an answer, then Submit */
.option-list { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.option-choice { justify-content: flex-start; gap: .8rem; font-weight: 400; }
.option-choice input {
  appearance: none;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}
.option-choice input:checked { border-color: var(--green); background: radial-gradient(circle, var(--green) 0 45%, var(--paper) 50%); }
.option-choice:hover { --fill: var(--green-tint); }
.option-choice:has(input:checked) { --fill: var(--green-tint); --line: var(--green); font-weight: 600; }
.option-choice:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent); outline-offset: 2px; }

/* Admin notification popup: tap to close, fades after 15 seconds */
.notice-popup {
  position: fixed;
  left: 50%;
  top: 4.5rem;
  z-index: 30;
  width: min(26rem, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.1rem 1.4rem 1rem;
  translate: -50% 0;
  background: var(--green);
  color: #fbf6ea;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px var(--green), inset 0 0 0 6px var(--gold), 0 14px 40px rgba(0, 0, 0, .4);
  animation: notice 15s ease forwards;
}
@keyframes notice {
  0% { opacity: 0; transform: translateY(-14px); }
  3% { opacity: 1; transform: translateY(0); }
  96% { opacity: 1; transform: translateY(0); visibility: visible; }
  100% { opacity: 0; transform: translateY(-14px); visibility: hidden; }
}
.popup-toggle:checked + .notice-popup { display: none; }
.notice-popup .popup-close { color: #fbf6ea; }
.notice-title {
  color: #e9d18f;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.notice-message { font-size: 1.15rem; font-weight: 600; line-height: 1.4; white-space: pre-wrap; }
.notice-message + .notice-message { padding-top: .45rem; border-top: 1px solid rgba(233, 209, 143, .4); }
.notice-hint { font-size: .78rem; opacity: .75; }
@media (prefers-reduced-motion: reduce) {
  .notice-popup { animation-timing-function: step-end; }
}
body.admin .topbar { gap: .45rem; }
body.admin .topbar .button-small { letter-spacing: .1em; padding-left: .7rem; padding-right: .7rem; }