:root{
  /* Three-color gradient bases for backgrounds (set by JS each cycle) */
  --cA:#1E6FFF;
  --cB:#29B8B8;
  --cC:#00A36C;

  /* (Cards + accents still use --g1..--g6 from JS; left intact) */
  --g1:#1E6FFF; --g2:#29B8B8; --g3:#00A36C; --g4:#CDA4DE; --g5:#FFE36E; --g6:#D16BA5;

  --blur:30px;
  --sat:112%;
  --swellA:36s; /* swirl */
  --swellB:22s; /* drift */
  --swellC:18s; /* wave */
  --amp:7%;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --fs-xl:clamp(42px,6vw,72px);
  --fs-lg:clamp(22px,3vw,36px);
  --fs-md:clamp(14px,2vw,18px);
  --fs-sm:clamp(12px,1.6vw,14px);

  --radius:16px;
}

/* ===================== Ocean-wave background (Screens 1 & 2) ===================== */
/* Now uses a refined three-color system (cA, cB, cC) with layered blends
   so it feels modern, smooth, and still shows hints of the original colors. */
body.landing-bg{ position:relative; background:#fff; }
body.landing-bg::before{
  content:"";
  position:fixed; inset:-12vmax; z-index:0;

  /* Layer order: veil -> blended linear layers (AB, BC, CA) -> animated conic mix -> soft radials  */
  background:
    /* veil */
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.10)),

    /* AB primary blend (dominant) */
    linear-gradient(120deg,
      color-mix(in oklab, var(--cA) 72%, var(--cB) 28%) 0%,
      color-mix(in oklab, var(--cA) 55%, var(--cB) 45%) 38%,
      color-mix(in oklab, var(--cA) 35%, var(--cB) 65%) 62%,
      color-mix(in oklab, var(--cA) 20%, var(--cB) 80%) 100%
    ),

    /* BC cross blend (secondary) */
    linear-gradient(300deg,
      color-mix(in oklab, var(--cB) 70%, var(--cC) 30%) 0%,
      color-mix(in oklab, var(--cB) 48%, var(--cC) 52%) 100%
    ),

    /* CA cross blend (subtle backfill) */
    linear-gradient(45deg,
      color-mix(in oklab, var(--cC) 68%, var(--cA) 32%) 0%,
      color-mix(in oklab, var(--cC) 46%, var(--cA) 54%) 100%
    ),

    /* animated ocean “swirl” — mixed stops across the three hues, keeps hints of originals */
    conic-gradient(from var(--angle,0deg),
      color-mix(in oklab, var(--cA) 55%, var(--cB) 45%),
      color-mix(in oklab, var(--cB) 55%, var(--cC) 45%),
      color-mix(in oklab, var(--cC) 55%, var(--cA) 45%),
      color-mix(in oklab, var(--cA) 40%, var(--cB) 60%),
      color-mix(in oklab, var(--cB) 40%, var(--cC) 60%),
      color-mix(in oklab, var(--cC) 40%, var(--cA) 60%),
      color-mix(in oklab, var(--cA) 55%, var(--cB) 45%)
    ),

    /* gentle radial glows that preserve original color hints */
    radial-gradient(42vmax 42vmax at 18% 24%, color-mix(in oklab, var(--cB) 55%, transparent), transparent 62%),
    radial-gradient(46vmax 46vmax at 78% 22%, color-mix(in oklab, var(--cA) 45%, transparent), transparent 64%),
    radial-gradient(44vmax 44vmax at 28% 78%, color-mix(in oklab, var(--cC) 42%, transparent), transparent 64%),
    radial-gradient(48vmax 48vmax at 70% 76%, color-mix(in oklab, var(--cA) 38%, transparent), transparent 66%);

  background-blend-mode:
    overlay,
    soft-light,
    soft-light,
    soft-light,
    soft-light,
    normal, normal, normal, normal;

  filter: blur(var(--blur)) saturate(var(--sat));
  transform: translateZ(0);
  animation:
    swirl var(--swellA) linear infinite,
    drift var(--swellB) ease-in-out infinite alternate,
    wave var(--swellC) ease-in-out infinite alternate;
}
@keyframes swirl { 0%{--angle:0deg;} 100%{--angle:360deg;} }
@keyframes drift {
  0%   { transform: translate(calc(var(--amp) * -1), calc(var(--amp) * -0.6)) scale(1.02); }
  50%  { transform: translate(calc(var(--amp) *  1), calc(var(--amp) *  0.6)) scale(1.08); }
  100% { transform: translate(calc(var(--amp) * -0.6), calc(var(--amp) *  0.9)) scale(1.03); }
}
@keyframes wave {
  0%   { background-position: 0% 50%,  0% 50%,  0% 50%,  0% 50%,  0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%; }
  100% { background-position: 100% 50%, 80% 60%, 20% 40%, 60% 55%, 30% 45%, 50% 50%, 30% 60%, 70% 40%, 50% 50%; }
}

/* ===================== Screen 3 background: same recipe, 30% visible ===================== */
body.game-bg{ position:relative; background:#ffffff; }
body.game-bg::before{
  content:"";
  position:fixed; inset:-12vmax; z-index:0;

  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.15)),

    linear-gradient(120deg,
      color-mix(in oklab, var(--cA) 72%, var(--cB) 28%) 0%,
      color-mix(in oklab, var(--cA) 55%, var(--cB) 45%) 38%,
      color-mix(in oklab, var(--cA) 35%, var(--cB) 65%) 62%,
      color-mix(in oklab, var(--cA) 20%, var(--cB) 80%) 100%
    ),

    linear-gradient(300deg,
      color-mix(in oklab, var(--cB) 70%, var(--cC) 30%) 0%,
      color-mix(in oklab, var(--cB) 48%, var(--cC) 52%) 100%
    ),

    linear-gradient(45deg,
      color-mix(in oklab, var(--cC) 68%, var(--cA) 32%) 0%,
      color-mix(in oklab, var(--cC) 46%, var(--cA) 54%) 100%
    ),

    conic-gradient(from var(--angle,0deg),
      color-mix(in oklab, var(--cA) 55%, var(--cB) 45%),
      color-mix(in oklab, var(--cB) 55%, var(--cC) 45%),
      color-mix(in oklab, var(--cC) 55%, var(--cA) 45%),
      color-mix(in oklab, var(--cA) 40%, var(--cB) 60%),
      color-mix(in oklab, var(--cB) 40%, var(--cC) 60%),
      color-mix(in oklab, var(--cC) 40%, var(--cA) 60%),
      color-mix(in oklab, var(--cA) 55%, var(--cB) 45%)
    ),

    radial-gradient(42vmax 42vmax at 18% 24%, color-mix(in oklab, var(--cB) 55%, transparent), transparent 62%),
    radial-gradient(46vmax 46vmax at 78% 22%, color-mix(in oklab, var(--cA) 45%, transparent), transparent 64%),
    radial-gradient(44vmax 44vmax at 28% 78%, color-mix(in oklab, var(--cC) 42%, transparent), transparent 64%),
    radial-gradient(48vmax 48vmax at 70% 76%, color-mix(in oklab, var(--cA) 38%, transparent), transparent 66%);

  background-blend-mode:
    overlay,
    soft-light,
    soft-light,
    soft-light,
    soft-light,
    normal, normal, normal, normal;

  filter: blur(calc(var(--blur) + 6px)) saturate(calc(var(--sat) - 8%));
  opacity:.30;
  transform: translateZ(0);
  animation:
    swirl calc(var(--swellA) * 1.1) linear infinite,
    drift calc(var(--swellB) * 1.1) ease-in-out infinite alternate,
    wave  calc(var(--swellC) * 1.2) ease-in-out infinite alternate;
}

/* ===================== Core layout ===================== */
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font);color:#111;}

.overlay{ position:fixed; inset:0; display:grid; place-items:center; padding:24px; z-index:1; }
.hidden{ display:none; }

.landing-wrap{ text-align:center; }
.landing-title{ font-size:var(--fs-xl); color:#111; margin:0; }
.landing-sub{ font-size:var(--fs-lg); color:#111; margin-top:10px; }

/* Instructions panel – translucent glass, modern, readable */
.panel{
  max-width:700px; padding:28px 36px;
  background:color-mix(in oklab, #ffffff 62%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border:1px solid color-mix(in oklab, #ffffff 38%, transparent);
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  color:#111; text-align:left;
}
.panel h2{ margin-top:0; font-size:var(--fs-lg); }
.panel ol{ margin:0; padding-left:22px; font-size:var(--fs-md); line-height:1.6; }
.play-wrap{ text-align:center; margin-top:24px; }

/* Buttons – same shape; remove black borders on specific four buttons via ID overrides */
.btn{
  border:1px solid #000; background:#000; color:#fff;
  border-radius:14px; padding:10px 20px; cursor:pointer;
  font-size:var(--fs-sm); transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-2px); opacity:.92; }
.btn-ghost{ background:#fff; color:#000; border:1px solid #000; }

/* Remove borders for these exact buttons as requested */
#newRoundBtn, #resetFlipsBtn, #addPersonalBtn, #modeBtn{
  border:none !important;
}
#addPersonalBtn.btn-ghost, #modeBtn.btn-ghost{
  border:none !important;
}

/* Game layout */
.app{ max-width:1200px; margin:0 auto; padding:24px; text-align:center; position:relative; z-index:1; }

.toolbar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  padding:10px 14px; margin-bottom:12px;
}
select{ padding:6px 10px; border-radius:10px; border:1px solid #ccc; background:#fff; color:#111; }

/* Theme chips (bubbles) – modern, borderless glass look */
.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:12px 0 18px; }
.chip{
  padding:8px 14px;
  border:none;
  border-radius:999px;
  background:color-mix(in oklab, #ffffff 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow:0 6px 14px rgba(0,0,0,.08), inset 0 0 0 1px color-mix(in oklab, #ffffff 28%, transparent);
  font-size:var(--fs-sm); cursor:pointer; user-select:none;
}
.chip:hover{ box-shadow:0 8px 18px rgba(0,0,0,.11), inset 0 0 0 1px color-mix(in oklab, #ffffff 36%, transparent); }
.chip.active{
  box-shadow:0 10px 22px rgba(0,0,0,.14), inset 0 0 0 1px color-mix(in oklab, #ffffff 44%, transparent);
  font-weight:600;
}

.grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
@media(max-width:900px){ .grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:650px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .grid{ grid-template-columns:repeat(2,1fr); } }

/* Cards */
.card{
  position:relative; height:160px; border-radius:var(--radius);
  perspective:1000px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.card-inner{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .45s ease; }
.card.flipped .card-inner{ transform:rotateY(180deg); }

.face{
  position:absolute; inset:0; backface-visibility:hidden;
  display:grid; grid-template-rows:1fr auto; padding:10px;
}
.front{
  align-items:center; justify-items:center;
  text-align:center;
}
.front .title{ font-size:16px; font-weight:700; letter-spacing:.4px; margin:0; }
.front .hint{ font-size:12px; opacity:.9; margin-top:4px; }
.back{
  transform:rotateY(180deg);
  display:grid; grid-template-rows:1fr auto;
  text-align:center;
}
.q{ align-self:center; font-size:var(--fs-md); line-height:1.25; padding:4px 6px; }
.cat{ align-self:end; font-size:10px; text-transform:uppercase; opacity:.9; padding:4px 6px; }

/* Text contrast helpers set by JS based on card background color */
.light-text{ color:#fff; }
.dark-text{ color:#111; }
.light-text .cat{ background:rgba(255,255,255,.18); border-radius:6px; }
.dark-text .cat{ background:rgba(0,0,0,.06); border-radius:6px; }

/* Final ribbon (front/top-right, visible before flip) */
.final .front .ribbon{
  position:absolute; top:18px; right:-46px;
  width:170px; height:26px; line-height:26px;
  background:#000; color:#fff; text-align:center; font-weight:700;
  transform:rotate(45deg); font-size:11px; letter-spacing:.12em;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  pointer-events:none;
}

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:20px;
  background:#111; color:#fff; padding:6px 14px; border-radius:8px; font-size:12px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.toast.show{ opacity:1; }