:root{
  --bg:#f7fafc;--surface:#ffffff;--ink:#0f172a;--muted:#64748b;
  --primary:#0ea5a6;--primary-ink:#065f5b;--accent:#f59e0b;--brand:#2563eb;
  --border:#e2e8f0;--shadow:0 12px 30px rgba(2,6,23,.08);
  --radius-xl:18px;--radius:12px;--focus:0 0 0 3px rgba(37,99,235,.25);
  --logo-size-desktop:44px;--logo-size-mobile:34px;--brand-font-desktop:1.25rem;--brand-font-mobile:1.05rem;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.45}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{max-width:1120px;margin:0 auto;padding:1rem}
header.backdrop{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.8rem;font-weight:800;font-size:var(--brand-font-desktop);white-space:nowrap}
.brand span{color:var(--brand)}.brand img{height:var(--logo-size-desktop);width:auto}
@media(max-width:640px){.brand img{height:var(--logo-size-mobile)}.brand{font-size:var(--brand-font-mobile);white-space:normal}.nav{padding:.7rem 0}}
.navlinks{display:flex;flex-wrap:wrap;gap:.5rem}
.navlinks a{padding:.45rem .8rem;border-radius:999px;color:var(--muted);transition:background .2s,color .2s,transform .2s}
.navlinks a:hover{background:rgba(37,99,235,.08);color:var(--brand);transform:translateY(-1px)}
.btn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid transparent;border-radius:999px;padding:.6rem 1rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn:focus{outline:none;box-shadow:var(--focus)}.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow)}.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:rgba(14,165,166,.35);color:var(--primary);background:transparent}.btn-ghost:hover{background:rgba(14,165,166,.1)}
.hero{display:grid;grid-template-columns:1.6fr 1.2fr;gap:1rem;align-items:center;margin:1rem 0}
@media(max-width:860px){.hero{grid-template-columns:1fr}}.card{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:1rem}
.kicker{display:inline-block;background:rgba(245,158,11,.12);color:var(--accent);font-weight:700;border-radius:999px;font-size:.78rem;padding:.22rem .6rem;margin-bottom:.4rem;letter-spacing:.2px}
h1{font-size:2rem;line-height:1.2;margin:.3rem 0 .25rem}.lead{color:var(--muted);max-width:42ch}
.grid{display:grid;gap:.9rem}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:860px){.grid-2{grid-template-columns:1fr}}
.badge{display:inline-block;font-size:.72rem;background:rgba(37,99,235,.1);color:var(--brand);padding:.22rem .6rem;border-radius:999px;font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}.pill{font-size:.78rem;padding:.22rem .6rem;border:1px solid rgba(2,6,23,.08);border-radius:999px;background:#f8fafc}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;border:1px solid var(--border);border-radius:var(--radius);padding:.7rem .8rem;background:var(--surface)}
input,select,textarea{padding:.65rem .75rem;border-radius:12px;border:1px solid var(--border);outline:none;background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--focus)}
.small{font-size:.92rem;color:var(--muted)}footer{color:#94a3b8;font-size:.88rem;margin:2rem 0}
/* Dragboard layout */
.dragboard{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:1rem;
  align-items:start;
}
.dragboard-col h3{ margin:0 0 .4rem; }
.dragboard-list{
  display:flex; flex-direction:column; gap:.4rem;
  max-height:520px; overflow:auto;
}
.dragboard-grid{
  display:grid; gap:.8rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.dragboard .drag.dragging{ transform:scale(1.02); opacity:.85; }
.dragboard .drop{ cursor:pointer; transition: box-shadow .18s ease, transform .18s ease; }
.dragboard .drop.over{ box-shadow: 0 0 0 3px rgba(37,99,235,.25), var(--shadow); transform: translateY(-2px); }

/* =========================
   THEME TOKENS (by cartoon)
   Switch themes by setting: <body data-theme="blues-clues">, etc.
   ========================= */

/* Defaults (current site palette) — used when no data-theme set */
:root {
  --t-bg: var(--bg);
  --t-surface: var(--surface);
  --t-ink: var(--ink);
  --t-muted: var(--muted);

  /* Themed accents used by the dragboard */
  --t-brand: var(--brand);
  --t-accent: var(--accent);
  --t-chip-bg: #eef2ff;        /* grade pill bg */
  --t-chip-ink: #1e1b4b;       /* grade pill text */
  --t-chip-border: #c7d2fe;
  --t-drop-bg: #ffffff;        /* subject card bg */
  --t-drop-ink: #0f172a;
  --t-drop-ring: rgba(37,99,235,.25);
  --t-confetti-1: #dbeafe;     /* soft decorations */
  --t-confetti-2: #fce7f3;
  --t-gradient-1: #e0f2fe;     /* background gradient (top) */
  --t-gradient-2: #ffffff;     /* background gradient (bottom) */
}

/* Blue’s Clues */
body[data-theme="blues-clues"]{
  --t-brand:#2563eb;
  --t-accent:#38bdf8;
  --t-chip-bg:#e0ecff;
  --t-chip-ink:#0b2e78;
  --t-chip-border:#bfd3ff;
  --t-drop-bg:#ffffff;
  --t-drop-ink:#0b2e78;
  --t-drop-ring:rgba(37,99,235,.35);
  --t-confetti-1:#c7d2fe;
  --t-confetti-2:#bae6fd;
  --t-gradient-1:#e0f2fe;
  --t-gradient-2:#eef2ff;
}

/* Disney World */
body[data-theme="disney-world"]{
  --t-brand:#0ea5a6;          /* teal */
  --t-accent:#f59e0b;         /* golden */
  --t-chip-bg:#fff7ed;        /* warm ticket look */
  --t-chip-ink:#7c2d12;
  --t-chip-border:#fed7aa;
  --t-drop-bg:#ffffff;
  --t-drop-ink:#0f172a;
  --t-drop-ring:rgba(245,158,11,.35);
  --t-confetti-1:#fef3c7;
  --t-confetti-2:#cffafe;
  --t-gradient-1:#fff7ed;
  --t-gradient-2:#ecfeff;
}

/* Dora */
body[data-theme="dora"]{
  --t-brand:#a855f7;          /* purple backpack */
  --t-accent:#f97316;         /* explorer orange */
  --t-chip-bg:#f3e8ff;
  --t-chip-ink:#4c1d95;
  --t-chip-border:#e9d5ff;
  --t-drop-bg:#ffffff;
  --t-drop-ink:#4c1d95;
  --t-drop-ring:rgba(168,85,247,.35);
  --t-confetti-1:#fde68a;
  --t-confetti-2:#d1fae5;
  --t-gradient-1:#faf5ff;
  --t-gradient-2:#fff7ed;
}

/* Kung Fu Panda */
body[data-theme="kungfu-panda"]{
  --t-brand:#16a34a;          /* bamboo green */
  --t-accent:#ef4444;         /* red sash */
  --t-chip-bg:#dcfce7;
  --t-chip-ink:#065f46;
  --t-chip-border:#bbf7d0;
  --t-drop-bg:#ffffff;
  --t-drop-ink:#052e16;
  --t-drop-ring:rgba(34,197,94,.35);
  --t-confetti-1:#fee2e2;
  --t-confetti-2:#fef9c3;
  --t-gradient-1:#f0fdf4;
  --t-gradient-2:#fff1f2;
}

/* Transformers */
body[data-theme="transformers"]{
  --t-brand:#ef4444;          /* Autobot red */
  --t-accent:#3b82f6;         /* Energon blue */
  --t-chip-bg:#fee2e2;
  --t-chip-ink:#7f1d1d;
  --t-chip-border:#fecaca;
  --t-drop-bg:#ffffff;
  --t-drop-ink:#0f172a;
  --t-drop-ring:rgba(59,130,246,.4);
  --t-confetti-1:#bfdbfe;
  --t-confetti-2:#fde68a;
  --t-gradient-1:#fff1f2;
  --t-gradient-2:#eff6ff;
}

/* =========================
   COLORFUL DRAGBOARD
   (uses the theme tokens above)
   ========================= */

/* Soft card gradient */
#dragBoardCard{
  background:
    linear-gradient(180deg,var(--t-gradient-1),var(--t-gradient-2));
}

/* Grade pills (draggable) */
.dragboard .pill{
  background: var(--t-chip-bg);
  color: var(--t-chip-ink);
  border: 1px solid var(--t-chip-border);
  font-weight: 800;
}
.dragboard .pill:hover{ transform:translateY(-1px); }

/* Subject drop cards */
.dragboard .drop{
  background: var(--t-drop-bg);
  color: var(--t-drop-ink);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.dragboard .drop::after{
  content:'';
  position:absolute; inset:auto -20% -20% auto;
  width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--t-confetti-1), transparent 60%),
              radial-gradient(circle at 70% 70%, var(--t-confetti-2), transparent 60%);
  opacity:.6; pointer-events:none;
}
.dragboard .drop .badge{
  background: var(--t-brand);
  color:#fff;
}
.dragboard .drop.over{
  box-shadow: 0 0 0 4px var(--t-drop-ring), var(--shadow);
  transform: translateY(-2px);
}

/* Theme picker (small pill in nav or page) */
.theme-picker{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem; border:1px solid var(--border); border-radius:999px;
  background:#fff;
}
.theme-picker select{
  border:0; outline:none; background:transparent; color:var(--t-ink);
  font-weight:700; padding:.1rem .2rem;
}
/* ======================================================
   BRIGHT, KID-FRIENDLY THEMES (IXL-style vibrancy)
   Applies when <body data-theme="…"> is set by theme.js
   ====================================================== */

/* shared vivid defaults (fallback when no data-theme) */
:root{
  --t-brand: #2563eb;
  --t-accent: #f59e0b;

  /* surfaces & inks */
  --t-bg: var(--bg);
  --t-surface: #ffffff;
  --t-ink: #0b1220;
  --t-muted: #475569;

  /* dragboard accents */
  --t-chip-bg: #eaf2ff;
  --t-chip-ink: #082552;
  --t-chip-border: #bcd2ff;

  --t-drop-bg: #ffffff;
  --t-drop-ink: #0b1220;
  --t-drop-ring: rgba(37,99,235,.45);

  /* “scene” gradient behind cards */
  --t-gradient-1: #dff3ff;  /* top sky */
  --t-gradient-2: #fef9e7;  /* sand */
  --t-gradient-3: #e6ffe9;  /* waterline hint */

  /* confetti dots */
  --t-confetti-1: #c7d2fe;
  --t-confetti-2: #fde68a;

  /* button pop */
  --t-btn: var(--t-brand);
  --t-btn-ink: #fff;
}

/* Blue’s Clues — bright sky blues + sunny accent */
body[data-theme="blues-clues"]{
  --t-brand:#1d4ed8; /* vivid royal */
  --t-accent:#22d3ee; /* aqua */
  --t-chip-bg:#dbeafe;
  --t-chip-ink:#0a2b7a;
  --t-chip-border:#93c5fd;
  --t-drop-ring: rgba(29,78,216,.5);
  --t-gradient-1:#cfe7ff;
  --t-gradient-2:#e8fff8;
  --t-gradient-3:#fffbe6;
  --t-btn:#1d4ed8;
}

/* Disney World — teal + golden highlights */
body[data-theme="disney-world"]{
  --t-brand:#059669;     /* emerald */
  --t-accent:#f59e0b;    /* golden ticket */
  --t-chip-bg:#fff1c2;
  --t-chip-ink:#6a3d00;
  --t-chip-border:#ffd37a;
  --t-drop-ring: rgba(245,158,11,.5);
  --t-gradient-1:#fff2c6;
  --t-gradient-2:#c7ffef;
  --t-gradient-3:#fff9db;
  --t-btn:#0ea5a6;
}

/* Dora — playful purple & explorer orange */
body[data-theme="dora"]{
  --t-brand:#9333ea;     /* violet */
  --t-accent:#fb923c;    /* orange */
  --t-chip-bg:#f3e8ff;
  --t-chip-ink:#4c1d95;
  --t-chip-border:#d8b4fe;
  --t-drop-ring: rgba(147,51,234,.5);
  --t-gradient-1:#f8e7ff;
  --t-gradient-2:#fff0df;
  --t-gradient-3:#ffe4f1;
  --t-btn:#9333ea;
}

/* Kung Fu Panda — bamboo green & heroic red */
body[data-theme="kungfu-panda"]{
  --t-brand:#16a34a;     /* bamboo */
  --t-accent:#ef4444;    /* sash red */
  --t-chip-bg:#dcfce7;
  --t-chip-ink:#065f46;
  --t-chip-border:#86efac;
  --t-drop-ring: rgba(34,197,94,.5);
  --t-gradient-1:#e7ffe9;
  --t-gradient-2:#fff0f2;
  --t-gradient-3:#f7fee7;
  --t-btn:#16a34a;
}

/* Transformers — Autobot red & Energon blue */
body[data-theme="transformers"]{
  --t-brand:#ef4444;     /* red */
  --t-accent:#3b82f6;    /* blue */
  --t-chip-bg:#ffe1e1;
  --t-chip-ink:#7f1d1d;
  --t-chip-border:#fecaca;
  --t-drop-ring: rgba(59,130,246,.55);
  --t-gradient-1:#ffe4e6;
  --t-gradient-2:#e0ecff;
  --t-gradient-3:#fff7cc;
  --t-btn:#ef4444;
}

/* ---------------------------------------------
   Bright dragboard styling using theme tokens
   --------------------------------------------- */

/* scene gradient on the dragboard card */
#dragBoardCard{
  background:
    radial-gradient(1200px 240px at 70% -60px, var(--t-gradient-1), transparent 60%),
    radial-gradient(900px 220px at 20% 0px, var(--t-gradient-2), transparent 55%),
    linear-gradient(180deg, var(--t-gradient-1) 0%, var(--t-gradient-3) 50%, #fff 85%);
}

/* pills (grades) — chunkier, brighter */
.dragboard .pill{
  background: var(--t-chip-bg);
  color: var(--t-chip-ink);
  border: 2px solid var(--t-chip-border);
  font-weight: 900;
  letter-spacing:.2px;
  box-shadow: 0 4px 0 rgba(2,6,23,.08);
}
.dragboard .pill:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(2,6,23,.12); }

/* subject drop cards */
.dragboard .drop{
  background: var(--t-drop-bg);
  color: var(--t-drop-ink);
  border: 2px solid rgba(2,6,23,.06);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}
.dragboard .drop .badge{
  background: var(--t-btn);
  color: var(--t-btn-ink);
}
.dragboard .drop.over{
  box-shadow: 0 0 0 5px var(--t-drop-ring), 0 14px 30px rgba(2,6,23,.16);
  transform: translateY(-3px) scale(1.01);
}

/* CTA buttons share the vivid theme color */
.btn.btn-primary{
  background: var(--t-btn);
  color: var(--t-btn-ink);
}

/* optional: animated bubbles (reduced motion safe) */
@media (prefers-reduced-motion: no-preference){
  #dragBoardCard{
    background-size: 120% 120%, 120% 120%, auto;
    animation: floatBg 18s ease-in-out infinite alternate;
  }
  @keyframes floatBg{
    0%{ background-position: 80% -40%, 10% -10%, 0 0; }
    100%{ background-position: 70% -20%, 18% -2%, 0 0; }
  }
}
/* Topbar layout */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.topbar-right{ display:flex; align-items:center; gap:.6rem; }

/* icon row */
.navicon{
  display:flex; gap:.6rem; flex-wrap:wrap; padding:.6rem 0 1rem;
}
.iconbtn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:86px; height:74px; gap:.35rem;
  border:1px solid var(--border); border-radius:16px; background:#fff;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  color:var(--ink); font-weight:700; font-size:.86rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.iconbtn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.12); }
.iconbtn svg{ width:24px; height:24px; fill: currentColor; opacity:.9; }

/* greeting card */
.greet-card{
  background:
    radial-gradient(900px 200px at 95% -30%, var(--t-gradient-1), transparent 55%),
    radial-gradient(700px 180px at 0% 0%, var(--t-gradient-2), transparent 50%),
    #fff;
}

/* needs attention items */
.attn{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  border:1px solid var(--border); border-radius:12px; padding:.75rem .9rem; background:#fff;
}
.attn .meta{ color:var(--muted); font-size:.9rem; }
.attn .tag{ background: var(--t-chip-bg); color: var(--t-chip-ink); border:1px solid var(--t-chip-border); }

/* Topbar layout */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar-right{ display:flex; align-items:center; gap:.6rem; }
.brand-title{ font-weight:800; font-size:1.1rem; }
.navicon{ display:flex; gap:.6rem; flex-wrap:wrap; padding:.6rem 0 1rem; }
.iconbtn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:86px; height:74px; gap:.35rem;
  border:1px solid var(--border); border-radius:16px; background:#fff;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  color:var(--ink); font-weight:700; font-size:.86rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.iconbtn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.12); }
.iconbtn svg{ width:24px; height:24px; fill: currentColor; opacity:.9; }

/* greeting */
.greet-card{
  background:
    radial-gradient(900px 200px at 95% -30%, var(--t-gradient-1), transparent 55%),
    radial-gradient(700px 180px at 0% 0%, var(--t-gradient-2), transparent 50%),
    #fff;
}

/* needs attention items */
.attn{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  border:1px solid var(--border); border-radius:12px; padding:.75rem .9rem; background:#fff;
}
.attn .meta{ color:var(--muted); font-size:.9rem; }
.attn .tag{ background: var(--t-chip-bg); color: var(--t-chip-ink); border:1px solid var(--t-chip-border); }

/* Keep nav icons small */
.navicon .iconbtn svg{
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0;
  display: block;
}
/* =========================================================
   THEME SURFACES
   - header/backdrop uses --hdr-*
   - page/body uses   --app-*
   - cards/content still use existing tokens (surface, border, etc.)
   ========================================================= */

/* ===== defaults (when no data-theme on <body>) ===== */
:root{
  /* header */
  --hdr-bg: #0ea5a6;                  /* teal */
  --hdr-ink: #ffffff;
  --hdr-border: rgba(0,0,0,.08);

  /* page */
  --app-bg-top:  #eef9ff;
  --app-bg-mid:  #fff6e6;
  --app-bg-bot:  #ffffff;
  --app-ink:     var(--ink);
}

/* ---------- Blue's Clues ---------- */
body[data-theme="blues-clues"]{
  --hdr-bg: #1d4ed8;                  /* vivid royal blue */
  --hdr-ink:#ffffff;
  --hdr-border: rgba(29,78,216,.35);

  --app-bg-top:#dbeafe;
  --app-bg-mid:#cffafe;
  --app-bg-bot:#ffffff;
  --app-ink:#0b1220;
}

/* ---------- Disney World ---------- */
body[data-theme="disney-world"]{
  --hdr-bg:#0ea5a6;                   /* bright teal */
  --hdr-ink:#ffffff;
  --hdr-border: rgba(14,165,166,.35);

  --app-bg-top:#fff1c2;               /* sunny + aqua */
  --app-bg-mid:#c7ffef;
  --app-bg-bot:#ffffff;
  --app-ink:#0b1220;
}

/* ---------- Dora ---------- */
body[data-theme="dora"]{
  --hdr-bg:#9333ea;                   /* playful violet */
  --hdr-ink:#ffffff;
  --hdr-border: rgba(147,51,234,.35);

  --app-bg-top:#f3e8ff;
  --app-bg-mid:#ffe7cf;
  --app-bg-bot:#ffffff;
  --app-ink:#20123a;
}

/* ---------- Kung Fu Panda ---------- */
body[data-theme="kungfu-panda"]{
  --hdr-bg:#16a34a;                   /* bamboo green */
  --hdr-ink:#ffffff;
  --hdr-border: rgba(34,197,94,.35);

  --app-bg-top:#e7ffe9;
  --app-bg-mid:#fff0f2;
  --app-bg-bot:#ffffff;
  --app-ink:#0b1220;
}

/* ---------- Transformers ---------- */
body[data-theme="transformers"]{
  --hdr-bg:#ef4444;                   /* Autobot red */
  --hdr-ink:#ffffff;
  --hdr-border: rgba(239,68,68,.35);

  --app-bg-top:#ffe4e6;
  --app-bg-mid:#e0ecff;
  --app-bg-bot:#ffffff;
  --app-ink:#0b1220;
}

/* ===== apply the surfaces ===== */

/* Body background follows theme with a soft 3-stop gradient */
body{
  color: var(--app-ink);
  background:
    linear-gradient(180deg, var(--app-bg-top) 0%, var(--app-bg-mid) 46%, var(--app-bg-bot) 100%);
}

/* Top banner uses solid themed color and keeps blur transparent */
header.backdrop{
  background: var(--hdr-bg) !important;
  color: var(--hdr-ink);
  border-bottom: 1px solid var(--hdr-border);
  backdrop-filter: none;  /* the solid color looks cleaner */
}

/* Brand/title and nav inside header inherit themed ink */
header.backdrop .brand,
header.backdrop .brand * ,
header.backdrop .navicon .iconbtn span{
  color: var(--hdr-ink);
}

/* Icon buttons: translucent on header, regular cards elsewhere */
header.backdrop .navicon .iconbtn{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}
header.backdrop .navicon .iconbtn:hover{
  background: rgba(255,255,255,.18);
}

/* Theme picker & login in header: invert for contrast */
header.backdrop .theme-picker{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  color:#fff;
}
header.backdrop .theme-picker select{
  color:#fff;
}
header.backdrop .btn.btn-ghost{
  border-color: rgba(255,255,255,.32);
  color:#fff;
  background: transparent;
}
header.backdrop .btn.btn-ghost:hover{
  background: rgba(255,255,255,.14);
}

/* Keep cards readable on colorful backgrounds */
.card{
  background: #fff;
}

/* Optional: footer muted on themed background */
footer{ color: rgba(2,6,23,.65); }
/* Fix: high-contrast theme picker in colored header */
header.backdrop .theme-picker {
  color: #fff;                      /* base text color */
}
header.backdrop .theme-picker .small,
header.backdrop .theme-picker span,
header.backdrop .theme-picker label {
  color: #fff !important;           /* make "Theme:" visible */
  opacity: .95;
}

/* Select text (closed state) */
header.backdrop .theme-picker select {
  color: #fff !important;
  caret-color: #fff;
}

/* Select arrow (WebKit/Chromium) */
header.backdrop .theme-picker select::-ms-expand { display: none; }
header.backdrop .theme-picker select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 1.4rem;            /* room for arrow */
  background-image:
    linear-gradient(45deg, #fff 50%, transparent 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position:
    calc(100% - .8rem) .9rem,
    calc(100% - 1.05rem) .9rem;
  background-size: .35rem .35rem;
  background-repeat: no-repeat;
}

/* Dropdown list (opened menu) */
header.backdrop .theme-picker select option {
  color: #0b1220;                   /* dark text in menu */
  background: #fff;                 /* white options list for readability */
}

/* Optional: stronger hover/focus outline on colored header */
header.backdrop .theme-picker,
header.backdrop .btn.btn-ghost {
  outline: none;
}
header.backdrop .theme-picker:focus-within {
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
  border-radius: 999px;
}
/* Make header nav icons render as stroked line icons (high contrast on theme header) */
header.backdrop .navicon .iconbtn svg{
  width:28px !important;
  height:28px !important;
  display:block;
  fill: none !important;               /* don't fill shapes */
  stroke: currentColor !important;     /* draw with current text color (white) */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Ocean card uses theme background softly */
.ocean-card{
  background:
    radial-gradient(1000px 300px at 15% -10%, var(--t-gradient-1), transparent 60%),
    radial-gradient(900px 260px at 95% -20%, var(--t-gradient-2), transparent 60%),
    linear-gradient(180deg, #fff, #fff);
}

/* Layout */
.boatboard{ display:grid; grid-template-columns: 320px 1fr; gap:1rem; align-items:start; }
@media(max-width: 920px){ .boatboard{ grid-template-columns:1fr; } }

.boat-dock{
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.95));
  border:1px solid var(--border); border-radius:16px; padding:.8rem;
  box-shadow: var(--shadow);
}

/* Boats (grades) */
.boat-list{ display:grid; gap:.5rem; }
.boat{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:40px; border-radius:999px; border:2px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, var(--t-chip-bg), #fff);
  color:var(--t-chip-ink); font-weight:900; letter-spacing:.2px;
  box-shadow: 0 4px 0 rgba(2,6,23,.06);
  cursor:grab;
  transition: transform .15s ease, box-shadow .15s ease;
  animation: bob 4s ease-in-out infinite;
}
.boat:active{ cursor:grabbing; }
.boat:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2,6,23,.12); }

@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-2px); }
}

/* Islands (subjects) */
.islands{
  display:grid; gap:1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media(max-width: 920px){ .islands{ grid-template-columns: 1fr; } }

.island{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:22px;
  background:
    radial-gradient(200px 120px at 110% 90%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(220px 140px at -10% 95%, rgba(245,158,11,.12), transparent 60%),
    #fff;
  padding:1rem 1.1rem;
  box-shadow: var(--shadow);
  min-height:120px;
}
.island .flag{
  position:absolute; top:.8rem; right:.9rem;
  font-size:1.2rem; opacity:.9;
}
.island .label{
  font-weight:900; font-size:1.05rem; margin-bottom:.3rem;
}
.island.over{ box-shadow: 0 0 0 5px var(--t-drop-ring), var(--shadow); transform: translateY(-2px); }

/* Music toggle look nice on header backgrounds too */
#musicToggle{ border-color: rgba(2,6,23,.15); }
/* ============ BASE INTERACTIVE STATES (keep) ============ */
.boat { position: relative; overflow: hidden; }
.boat::before{
  content:""; position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  font-size:1.05rem; line-height:1; opacity:.95; pointer-events:none;
}
.boat .g-label{ padding-left:1.6rem; } /* only used if you added a label span; safe to ignore */

.island{ position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
.island::after{ /* subtle gloss blob */
  content:""; position:absolute; width:180px; height:180px; right:-40px; bottom:-40px;
  background: radial-gradient(120px 120px at center, rgba(255,255,255,.55), transparent 70%);
  pointer-events:none;
}
.island.over{ transform: translateY(-2px); }

/* Drop ring color stays themed */
:root { --t-drop-ring: rgba(37,99,235,.25); } /* default */
body[data-theme="transformers"]{ --t-drop-ring: rgba(255,255,255,.55); }
body[data-theme="dora"]{ --t-drop-ring: rgba(147,51,234,.28); }
body[data-theme="kungfu-panda"]{ --t-drop-ring: rgba(34,197,94,.28); }
body[data-theme="disney-world"]{ --t-drop-ring: rgba(14,165,166,.28); }
body[data-theme="blues-clues"]{ --t-drop-ring: rgba(29,78,216,.28); }

/* ============ BLUE’S CLUES (paws + notebook pages) ============ */
body[data-theme="blues-clues"] .boat{
  border-radius: 999px;
  background:
    radial-gradient(8px 8px at 18px 50%, rgba(255,255,255,.9), transparent 70%),
    var(--t-chip-bg);
  border:2px solid rgba(29,78,216,.25);
  color:#0b2257;
}
body[data-theme="blues-clues"] .boat::before{ content:"🐾"; }

body[data-theme="blues-clues"] .island{
  border-radius: 18px;
  background:
    repeating-linear-gradient( to bottom, rgba(29,78,216,.08) 0 6px, transparent 6px 12px ),
    linear-gradient(180deg,#fff, #f6f9ff);
  border:1px solid rgba(29,78,216,.25);
}
body[data-theme="blues-clues"] .island .flag{ filter: drop-shadow(0 2px 0 rgba(29,78,216,.15)); }

/* ============ DISNEY WORLD (mickey head + castle island) ============ */
body[data-theme="disney-world"] .boat{
  width:100%; border:2px solid rgba(14,165,166,.28);
  background: linear-gradient(180deg,#ffffff, #e8fffb);
  color:#064e4c;
  border-radius: 999px;
}
body[data-theme="disney-world"] .boat::before{
  content:""; width:18px; height:18px; background: currentColor; border-radius: 50%;
  box-shadow:
    -11px -9px 0 0 currentColor,  /* left ear */
    11px -9px 0 0 currentColor;   /* right ear */
}

body[data-theme="disney-world"] .island{
  border:1px solid rgba(14,165,166,.3);
  background: radial-gradient(260px 180px at 100% 120%, rgba(14,165,166,.10), transparent 60%),
              linear-gradient(180deg,#fff, #f5fffd);
  clip-path: ellipse(95% 85% at 50% 50%);  /* soft “park” island */
}
body[data-theme="disney-world"] .island .flag{ content:"🏰"; }

/* ============ DORA (backpack badge + map island) ============ */
body[data-theme="dora"] .boat{
  border:2px solid rgba(147,51,234,.28);
  background: linear-gradient(180deg,#fff, #f8ecff);
  color:#3b0a73;
  border-radius: 16px;
}
body[data-theme="dora"] .boat::before{ content:"🎒"; }

body[data-theme="dora"] .island{
  border:1px solid rgba(147,51,234,.28);
  background:
    radial-gradient(90px 40px at 8% 15%, rgba(255,226,181,.6), transparent 60%),
    linear-gradient(180deg,#fff,#fffdf6);
  /* “wavy map edge” effect */
  -webkit-mask:
    radial-gradient(24px 10px at 10% 0, #0000 98%, #000) top left,
    radial-gradient(24px 10px at 90% 0, #0000 98%, #000) top right,
    radial-gradient(24px 10px at 10% 100%, #0000 98%, #000) bottom left,
    radial-gradient(24px 10px at 90% 100%, #0000 98%, #000) bottom right;
  -webkit-mask-size:50% 52%; -webkit-mask-repeat:no-repeat;
          mask: var(--mask-map);
}
body[data-theme="dora"] .island .flag{ content:"🗺️"; }

/* ============ KUNG FU PANDA (bamboo token + mountain island) ============ */
body[data-theme="kungfu-panda"] .boat{
  border:2px solid rgba(34,197,94,.28);
  background: linear-gradient(180deg,#fff, #ecffef);
  color:#0d3b22;
  clip-path: ellipse(60% 50% at 50% 50%);   /* leaf-like */
}
body[data-theme="kungfu-panda"] .boat::before{ content:"🎋"; }

body[data-theme="kungfu-panda"] .island{
  border:1px solid rgba(34,197,94,.30);
  background:
    radial-gradient(180px 80px at 10% 120%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg,#fff,#f6fff8);
  clip-path: polygon(0 90%, 12% 70%, 28% 82%, 42% 62%, 58% 80%, 75% 58%, 100% 85%, 100% 100%, 0 100%);
}
body[data-theme="kungfu-panda"] .island .flag{ content:"🏯"; }

/* ============ TRANSFORMERS (cog + shield island) ============ */
body[data-theme="transformers"] .boat{
  border:2px solid rgba(239,68,68,.30);
  background: linear-gradient(180deg,#fff,#ffecec);
  color:#5f0b0b;
  /* hex/cog-ish */
  clip-path: polygon(8% 0, 92% 0, 100% 35%, 92% 100%, 8% 100%, 0 35%);
}
body[data-theme="transformers"] .boat::before{ content:"⚙️"; }

body[data-theme="transformers"] .island{
  border:1px solid rgba(239,68,68,.32);
  background:
    radial-gradient(220px 160px at 110% 120%, rgba(239,68,68,.12), transparent 60%),
    linear-gradient(180deg,#fff,#fff6f6);
  /* shield */
  clip-path: polygon(10% 0, 90% 0, 100% 25%, 75% 90%, 50% 100%, 25% 90%, 0 25%);
}
body[data-theme="transformers"] .island .flag{ content:"🛡️"; }

/* keep island title spacing when flags are emoji-inserted by CSS */
.island .flag::before{ content: attr(data-ico); }
/* -----------------------------
   SUBJECT ICONS (flag in corner)
------------------------------*/
.island .flag{
  position:absolute;
  top:.75rem; right:.8rem;
  font-size:1.1rem;
  opacity:.95;
}

/* Map subject -> icon */
.island[data-subject="Mathematics"] .flag::after { content: "➕"; }
.island[data-subject="English Language Arts"] .flag::after { content: "📖"; }
.island[data-subject="Science"] .flag::after { content: "🔬"; }
.island[data-subject="Social Studies"] .flag::after { content: "🧭"; }

/* -----------------------------
   FIX: normalize island shapes
   (remove clip-path/mask wedges)
------------------------------*/
.island{
  border-radius:22px !important;
  -webkit-mask: none !important;
          mask: none !important;
  clip-path: none !important;
  overflow: hidden;                 /* keep gloss inside */
}

/* Keep the soft theme tints without fancy shapes */
body[data-theme="transformers"] .island{
  border:1px solid rgba(239,68,68,.32);
  background:
    radial-gradient(220px 140px at 110% 120%, rgba(239,68,68,.12), transparent 60%),
    linear-gradient(180deg,#fff,#fff7f7);
}

body[data-theme="dora"] .island{
  border:1px solid rgba(147,51,234,.28);
  background:
    radial-gradient(160px 120px at 8% 110%, rgba(245,158,11,.14), transparent 60%),
    linear-gradient(180deg,#fff,#fffdf6);
}

body[data-theme="kungfu-panda"] .island{
  border:1px solid rgba(34,197,94,.30);
  background:
    radial-gradient(200px 120px at 10% 120%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg,#fff,#f6fff8);
}

body[data-theme="disney-world"] .island{
  border:1px solid rgba(14,165,166,.30);
  background:
    radial-gradient(260px 180px at 100% 120%, rgba(14,165,166,.10), transparent 60%),
    linear-gradient(180deg,#fff, #f5fffd);
}

body[data-theme="blues-clues"] .island{
  border:1px solid rgba(29,78,216,.25);
  background:
    repeating-linear-gradient(to bottom, rgba(29,78,216,.08) 0 6px, transparent 6px 12px),
    linear-gradient(180deg,#fff,#f6f9ff);
}

/* Optional: make grade boats a touch bolder for kids */
.boat{
  height:46px;
  font-size:1rem;
  letter-spacing:.3px;
}
/* ---------------------------
   Grade boats: centered layout
---------------------------- */
:root{
  --boat-size: 60px;           /* height of each grade button */
  --boat-gap: 6px;             /* spacing between grade text and icon */
  --boat-ico: 26px;            /* default icon size */
}
@media (min-width: 780px){
  :root{ --boat-size: 64px; --boat-ico: 30px; }
}

/* Make each boat a small vertical stack (text + icon) centered */
.boat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height: var(--boat-size);
  line-height: 1.05;
  font-weight: 800;
  gap: var(--boat-gap);
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* The icon is the ::before; now centered and bigger */
.boat::before{
  position: static;            /* no absolute offsets */
  transform: none;
  margin: 0;
  display: block;
  width: 1em;                  /* let emoji stay crisp */
  height: auto;
  font-size: var(--boat-ico);
  line-height: 1;
  text-align: center;
  opacity: .95;
}

/* Optional: slightly bigger on hover/focus; works with keyboard too */
.boat:hover::before,
.boat:focus-visible::before{
  transform: scale(1.12);
}

/* Add a playful shake/wobble animation on hover/active */
@keyframes boat-wobble {
  0%   { transform: rotate(0deg) translateY(0);   }
  25%  { transform: rotate(-4deg) translateY(-1px);}
  50%  { transform: rotate(0deg) translateY(0);   }
  75%  { transform: rotate(4deg) translateY(-1px); }
  100% { transform: rotate(0deg) translateY(0);   }
}
.boat:hover,
.boat:focus-visible,
.boat:active{
  animation: boat-wobble .6s ease-in-out;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .boat:hover,
  .boat:focus-visible,
  .boat:active{ animation: none; }
}

/* If any theme earlier pushed the icon left, reset it */
.boat::before{ left:auto !important; top:auto !important; }

/* Make the subject island corner icons a bit larger and animate too */
.island .flag{
  font-size: 1.25rem;
  transition: transform .15s ease;
}
.island:hover .flag,
.island.over .flag{
  transform: rotate(-8deg) scale(1.07);
}

/* You can theme icon sizes if you want them extra bold per theme */
body[data-theme="transformers"]{ --boat-ico: 32px; }
body[data-theme="dora"]{          --boat-ico: 30px; }
body[data-theme="blues-clues"]{   --boat-ico: 30px; }
body[data-theme="disney-world"]{  --boat-ico: 30px; }
body[data-theme="kungfu-panda"]{  --boat-ico: 30px; }
 


  /* Scene background for the boat drag section */
.ocean-card{ position: relative; overflow: hidden; }

/* Base gradient (keeps current tint) */
.ocean-card{
  background:
    radial-gradient(1000px 300px at 15% -10%, var(--t-gradient-1), transparent 60%),
    radial-gradient(900px 260px at 95% -20%, var(--t-gradient-2), transparent 60%),
    linear-gradient(180deg, #fff, #fff);
}

/* Scene image layer (theme-specific) */
.ocean-card::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  opacity:.22;                 /* keep content readable */
  filter: saturate(1.05) contrast(1.02);
}

/* Soft pattern overlay for texture (very subtle) */
.ocean-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  opacity:.08; mix-blend-mode:multiply;
  background-image: radial-gradient(2px 2px at 8px 8px, rgba(0,0,0,.16) 50%, transparent 52%);
  background-size: 22px 22px;
}

body[data-theme="blues-clues"] .ocean-card::before{
  background-image:url("/static/assets/img/themes/blues-clues-scene.jpg");
}
body[data-theme="disney-world"] .ocean-card::before{
  background-image:url("/static/assets/img/themes/disney-world-scene.jpg");
}
body[data-theme="dora"] .ocean-card::before{
  background-image:url("/static/assets/img/themes/dora-scene.jpg");
}
body[data-theme="kungfu-panda"] .ocean-card::before{
  background-image:url("/static/assets/img/themes/kungfu-panda-scene.jpg");
}
body[data-theme="transformers"] .ocean-card::before{
  background-image:url("/static/assets/img/themes/transformers-scene.jpg");
}

/* Make foreground cards stay readable over the scene */
.boat-dock,
.island{
  background-color: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
}

/* Slightly stronger on small screens where the scene is closer */
@media (max-width: 900px){
  .ocean-card::before{ opacity:.26; }
  .boat-dock, .island{ background-color: rgba(255,255,255,.95); }
}
.theme-scene .floaters > span{
  position:absolute; pointer-events:none; opacity:.18; font-size:26px; animation: bob2 10s ease-in-out infinite;
}
@keyframes bob2{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-8px) rotate(6deg); }
}

/* Place 3 decorative emojis; tweak per theme */
body[data-theme="blues-clues"] .theme-scene .floaters > span:nth-child(1){ content:"🐾"; left:8%; top:18%; }
body[data-theme="blues-clues"] .theme-scene .floaters > span:nth-child(2){ content:"🐾"; left:22%; top:8%; animation-delay:.6s; }
body[data-theme="blues-clues"] .theme-scene .floaters > span:nth-child(3){ content:"🐾"; left:88%; top:22%; animation-delay:1.2s; }

body[data-theme="transformers"] .theme-scene .floaters > span:nth-child(1){ content:"⚙️"; left:10%; top:16%; }
body[data-theme="transformers"] .theme-scene .floaters > span:nth-child(2){ content:"⚙️"; left:60%; top:10%; animation-delay:.5s; }
body[data-theme="transformers"] .theme-scene .floaters > span:nth-child(3){ content:"⚙️"; left:82%; top:20%; animation-delay:1s; }

/* add similar for other themes if you like */
/* ===== Themed circular board ===== */
.circle-card{
  position: relative; overflow:hidden;
  background:
    radial-gradient(900px 280px at 90% -18%, var(--t-gradient-1), transparent 60%),
    radial-gradient(860px 260px at 10% -18%, var(--t-gradient-2), transparent 60%),
    #fff;
}

/* Layout container */
.circleboard{
  --board-size: 520px;            /* desktop diameter */
  --ring-gap:  76px;              /* distance between subject circle and grade ring */
  --subject-size: 96px;
  --grade-size:   68px;

  position: relative;
  margin: 1rem auto 0;
  width: min(100%, var(--board-size));
  aspect-ratio: 1/1;
}

/* Responsive tweaks */
@media (max-width: 960px){
  .circleboard{ --board-size: 440px; --subject-size: 86px; --grade-size: 60px; --ring-gap: 66px; }
}
@media (max-width: 640px){
  .circleboard{ --board-size: 360px; --subject-size: 78px; --grade-size: 54px; --ring-gap: 56px; }
}

.circleboard .circle,
.circleboard .ring{
  position:absolute; inset:0; display:block;
}

/* Inner subject circle (invisible guide; we position items with JS & CSS grid) */
.circleboard .center{
  display:grid; place-items:center;
}

/* Subject dots live on a smaller circle; JS will position them evenly */
.subject.dot{
  position:absolute;
  width: var(--subject-size);
  height: var(--subject-size);
  border-radius: 999px;
  border:2px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg,#fff, rgba(255,255,255,.92));
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.subject.dot:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2,6,23,.16); }
.subject .s-ico{ font-size: 22px; line-height:1; }
.subject .s-label{ font-size:.92rem; margin-top:2px; }

/* Grade ring; grade buttons will be absolutely placed around circumference */
.ring{ pointer-events:none; }  /* ring itself not interactive */

/* Grade buttons */
.grade-dot{
  position:absolute;
  width: var(--grade-size);
  height: var(--grade-size);
  border-radius: 999px;
  border:2px solid var(--t-chip-border);
  background: var(--t-chip-bg);
  color: var(--t-chip-ink);
  box-shadow: 0 6px 16px rgba(2,6,23,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  pointer-events:auto;   /* re-enable interaction on the buttons themselves */
  user-select:none; cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.grade-dot:active{ cursor:grabbing; }
.grade-dot:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(2,6,23,.16); }

/* Drag highlight on subjects */
.subject.over{
  box-shadow: 0 0 0 6px var(--t-drop-ring), 0 14px 30px rgba(2,6,23,.16);
  transform: translateY(-2px) scale(1.02);
}

/* Fun wiggle on hover */
@keyframes wiggle {
  0%{ transform:rotate(0deg); }
  25%{ transform:rotate(-4deg); }
  50%{ transform:rotate(0deg); }
  75%{ transform:rotate(4deg); }
  100%{ transform:rotate(0deg); }
}
.grade-dot:hover{ animation: wiggle .5s ease-in-out; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .grade-dot:hover{ animation: none; }
}

/* Keep readable over themed backgrounds */
.circleboard .subject.dot,
.circleboard .grade-dot{
  backdrop-filter: blur(2px);
}

/* A subtle filled ring under the touching grade dots */
.circleboard::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius:50%;
  /* Draw a thick ring; color picks up theme border */
  box-shadow: inset 0 0 0 calc(var(--grade-size)/2 + 3px) rgba(2,6,23,0.04);
}
/* Put the decorative ring behind everything */
.circleboard { position: relative; }
.circleboard::before { z-index: 0; }
.circleboard .subject.dot,
.circleboard .grade-dot,
.circleboard .ring { position: relative; z-index: 1; }

/* Make the ring a bit thinner so it doesn't dominate */
.circleboard::before{
  box-shadow: inset 0 0 0 calc(var(--grade-size)/2 - 6px) rgba(2,6,23,0.04);
}
/* Ring thickness driven by JS var so it matches the grade inner edge */
.circleboard::before{
  box-shadow: inset 0 0 0 var(--circleband, 14px) rgba(2,6,23,0.05);
}

/* Ensure our sizes from JS override media defaults */
.circleboard{
  --subject-size: var(--subject-size);
  --grade-size:   var(--grade-size);
}
/* Force the circle board to be a real square and center it */
.circleboard{
  position: relative;
  width: min(100%, 720px);
  margin: 1rem auto 0;
}

/* Modern browsers: keep a 1:1 box automatically */
@supports (aspect-ratio: 1 / 1){
  .circleboard{ aspect-ratio: 1 / 1; }
}

/* Fallback: the JS below will set height = width, but make sure children are abs-positioned */
.circleboard > .center,
.circleboard > .ring,
.circleboard .subject.dot,
.circleboard .grade-dot{
  position: absolute;
}

/* Decorative ring must be a perfect circle and sit behind everything */
.circleboard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--circleband, 14px) rgba(2,6,23,0.05);
  z-index: 0;
}
.circleboard .subject.dot,
.circleboard .grade-dot,
.circleboard .ring{ z-index: 1; }
/* Small badge under island titles showing the hovered/selected grade */
.island .grade-badge {
  display: inline-block;
  margin: .35rem 0 .15rem;
}
/* 1) Make the whole board a two-column grid (boats | islands)  */
#boatBoard{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr); /* left fixed, right flexible */
  gap: 1rem;
  align-items: stretch;                         /* grid items stretch to row height */
}

/* 2) Left column (boats list) stacks top-to-bottom and defines the row height */
#boatBoard .boats{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* 3) Right column: a 2×2 grid that fills the same height as the boats column */
#boatBoard .islands{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two tiles per row */
  grid-template-rows: 1fr 1fr;      /* two rows; each row takes 50% of the column's height */
  gap: 1rem;
  height: 100%;                     /* stretch to match the grid row height */
  min-height: 0;                    /* avoid overflow in some browsers */
}

/* 4) Make each island card stretch to fill its grid cell */
#boatBoard .islands .island{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* If your island card has an inner content wrapper, let it flex */
#boatBoard .islands .island .content,
#boatBoard .islands .island .card-body{
  flex: 1 1 auto;
  min-height: 0;
}

/* Responsive: stack everything on narrow screens */
@media (max-width: 900px){
  #boatBoard{
    grid-template-columns: 1fr;   /* single column */
  }
  #boatBoard .islands{
    grid-template-columns: 1fr;   /* islands stack */
    grid-template-rows: none;
  }
}
/* ---------- Tile theming variables ---------- */
:root{
  --tile-bg:            #ffffff;
  --tile-ink:           #0f172a;
  --tile-border:        #e2e8f0;
  --tile-accent:        #2563eb;
  --tile-shadow:        0 12px 30px rgba(2,6,23,.06);
  --tile-pattern:       none;           /* optional background pattern */
}

/* Blue’s Clues – bright, friendly blues */
body[data-theme="blues-clues"]{
  --tile-bg:      linear-gradient(180deg, rgba(219,234,254,.55), rgba(255,255,255,.88));
  --tile-ink:     #0b3b7a;
  --tile-border:  #b6d3ff;
  --tile-accent:  #0ea5a6;
  --tile-pattern: radial-gradient(10px 10px at 20px 20px, rgba(14,165,166,.18) 20%, transparent 21%),
                  radial-gradient(12px 12px at 80% 30%,  rgba(37,99,235,.15) 20%, transparent 21%);
}

/* Disney World – soft pastel + fairytale accent */
body[data-theme="disney-world"]{
  --tile-bg:      linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  --tile-ink:     #243b53;
  --tile-border:  #ffd6ea;
  --tile-accent:  #ec4899; /* pink accent */
  --tile-pattern: radial-gradient(14px 14px at 12% 16%, rgba(236,72,153,.12) 22%, transparent 23%),
                  radial-gradient(10px 10px at 88% 70%, rgba(56,189,248,.12) 22%, transparent 23%);
}

/* Dora – jungle greens */
body[data-theme="dora"]{
  --tile-bg:      linear-gradient(180deg, rgba(187,247,208,.45), rgba(255,255,255,.82));
  --tile-ink:     #064e3b;
  --tile-border:  #a7f3d0;
  --tile-accent:  #10b981;
  --tile-pattern: radial-gradient(16px 12px at 18% 22%, rgba(16,185,129,.14) 25%, transparent 26%),
                  radial-gradient(12px 10px at 82% 64%, rgba(59,130,246,.12) 25%, transparent 26%);
}

/* Kung Fu Panda – warm bamboo */
body[data-theme="kungfu-panda"]{
  --tile-bg:      linear-gradient(180deg, rgba(254,240,138,.35), rgba(255,255,255,.85));
  --tile-ink:     #1c1917;
  --tile-border:  #fde68a;
  --tile-accent:  #f59e0b;
  --tile-pattern: radial-gradient(12px 12px at 20% 30%, rgba(245,158,11,.12) 25%, transparent 26%),
                  radial-gradient(10px 10px at 85% 70%, rgba(16,185,129,.12) 25%, transparent 26%);
}

/* Transformers – techy reds */
body[data-theme="transformers"]{
  --tile-bg:      linear-gradient(180deg, rgba(254,226,226,.45), rgba(255,255,255,.82));
  --tile-ink:     #111827;
  --tile-border:  #fecaca;
  --tile-accent:  #ef4444;
  --tile-pattern: radial-gradient(10px 10px at 22% 18%, rgba(239,68,68,.14) 25%, transparent 26%),
                  radial-gradient(8px  8px  at 78% 70%, rgba(59,130,246,.12) 25%, transparent 26%);
}
/* subject overlays */
#boatBoard .island[data-subject="Mathematics"]{
  --tile-pattern: radial-gradient(8px 8px at 20% 25%, rgba(99,102,241,.12) 28%, transparent 29%),
                  radial-gradient(8px 8px at 80% 70%, rgba(14,165,233,.12) 28%, transparent 29%);
}
#boatBoard .island[data-subject="English Language Arts"]{
  --tile-pattern: repeating-linear-gradient(30deg,
      rgba(16,185,129,.10) 0 8px, transparent 8px 16px);
}
#boatBoard .island[data-subject="Science"]{
  --tile-pattern: radial-gradient(16px 10px at 25% 30%, rgba(34,197,94,.12) 30%, transparent 31%),
                  radial-gradient(12px 8px  at 75% 65%, rgba(2,132,199,.12) 30%, transparent 31%);
}
#boatBoard .island[data-subject="Social Studies"]{
  --tile-pattern: linear-gradient(0deg, rgba(234,179,8,.10), rgba(234,179,8,.10)),
                  radial-gradient(18px 18px at 15% 40%, rgba(234,179,8,.10) 28%, transparent 29%);
}
/* Global defaults */
:root{
  --tile-bg:        #fff;
  --tile-ink:       #0f172a;   /* primary text */
  --tile-muted:     #64748b;   /* secondary text (descriptions) */
  --tile-border:    #e2e8f0;   /* border color (changes by theme) */
  --tile-border-w:  3px;       /* <-- thicker border */
  --tile-accent:    #2563eb;   /* accent for icons/badges */
  --tile-shadow:    0 12px 30px rgba(2,6,23,.06);
  --tile-pattern:   none;
}

/* Example per-theme tweaks (keep your existing ones; just add --tile-muted if missing) */
body[data-theme="disney-world"]{
  --tile-ink:     #243b53;
  --tile-muted:   #6b7280;   /* soft gray/blue */
  --tile-border:  #d7c5ff;   /* fairy-tale lilac */
  --tile-accent:  #ec4899;   /* pink accent */
}
body[data-theme="blues-clues"]{
  --tile-ink:     #0b3b7a;
  --tile-muted:   #476da1;
  --tile-border:  #b6d3ff;
  --tile-accent:  #0ea5a6;
}
body[data-theme="dora"]{
  --tile-ink:     #064e3b;
  --tile-muted:   #0a6a50;
  --tile-border:  #a7f3d0;
  --tile-accent:  #10b981;
}
body[data-theme="kungfu-panda"]{
  --tile-ink:     #1c1917;
  --tile-muted:   #525252;
  --tile-border:  #fde68a;
  --tile-accent:  #f59e0b;
}
body[data-theme="transformers"]{
  --tile-ink:     #111827;
  --tile-muted:   #4b5563;
  --tile-border:  #fecaca;
  --tile-accent:  #ef4444;
}
/* Subject tiles: thicker themed border + themed text */
#boatBoard .islands .island{
  background: var(--tile-bg);
  background-image: var(--tile-pattern), var(--tile-bg);
  border: var(--tile-border-w) solid var(--tile-border);   /* << thicker */
  color: var(--tile-ink);
  box-shadow: var(--tile-shadow);
  border-radius: 16px;
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Title + description adopt theme ink/muted colors */
#boatBoard .islands .island .label{
  color: var(--tile-ink);
  font-weight: 800;
}
#boatBoard .islands .island .hint{
  color: var(--tile-muted);
}

/* Tiny grade badge + small icons use accent */
#boatBoard .islands .island .grade-badge{
  color: var(--tile-ink);
  background: color-mix(in srgb, var(--tile-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tile-accent) 45%, transparent);
}
#boatBoard .islands .island .s-ico{
  color: var(--tile-accent);
}

/* Hover polish (optional) */
#boatBoard .islands .island:hover{
  border-color: color-mix(in srgb, var(--tile-accent) 40%, var(--tile-border));
  box-shadow: 0 16px 36px rgba(2,6,23,.08);
}

/* Grade list (left column) adopts theme colors */
#boatBoard .boats .boat{
  color: var(--tile-ink);                         /* grade text */
  border: 2px solid color-mix(in srgb, var(--tile-border) 70%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
}
#boatBoard .boats .boat:hover{
  border-color: color-mix(in srgb, var(--tile-accent) 35%, var(--tile-border));
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
}
#boatBoard .boats .boat .g-ico{                   /* if you use an icon span */
  color: var(--tile-accent);
}
/* —— Subject preview text —— */
#boatBoard .islands .island .preview-list{
  margin: .4rem 0 0;
  padding-left: 1.1rem;            /* bullets indent */
  color: var(--tile-muted);
  line-height: 1.38;
  font-size: .98rem;
}
#boatBoard .islands .island .preview-list li{
  margin: .12rem 0;
}

/* Visually “two line feeds” before the skills count */
#boatBoard .islands .island .skills-big{
  margin-top: .9rem;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--tile-accent);
  letter-spacing: .2px;
  white-space: nowrap;
}

/* optional: make the tiny 'Grade X' chip align with theme */
#boatBoard .islands .island .grade-badge{
  display: inline-block;
  font-size: .8rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tile-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tile-accent) 45%, transparent);
  color: var(--tile-ink);
  margin: .25rem 0 .1rem;
}
/* inside your theme, already suggested */
.preview-list { margin:.25rem 0 .5rem 1rem; line-height:1.4; }
.preview-list li { list-style: disc; margin:.1rem 0; }

.skills-big {
  margin-top:.6rem;
  font-weight:800;
  font-size:1.05rem;        /* bump per theme if desired */
  opacity:.9;
}
/* Icon row as a 2-column flex bar */
.navicon{
  display:flex;
  align-items:center;
  gap:1rem;
  padding: .75rem 0;           /* same topbar rhythm */
}

/* Left greeting block */
.greet-inline{
  min-width: 0;
}
.greet-hello{
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--header-ink, #fff);    /* readable on header */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.greet-sub{
  color: var(--header-ink-muted, #e7efff);
}

/* Right icon group */
.menu-icons{
  display:flex;
  gap:.75rem;
  margin-left:auto;            /* push to the right */
}

/* Make header text always readable on themed header */
header.backdrop, .navicon{
  --header-ink: #fff;
  --header-ink-muted: rgba(255,255,255,.85);
}

/* Responsive: stack on small screens */
@media (max-width: 800px){
  .navicon{ flex-wrap:wrap; }
  .menu-icons{ width:100%; justify-content:space-between; margin-left:0; }
  .greet-hello{ font-size:1.05rem; }
}

/* ---- Header row (greeting + icons) ---- */
.navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;          /* compact row */
}

/* Greeting block on the left */
.greet-inline {
  flex: 1 1 auto;
  min-width: 260px;
  color: var(--onHeader, #fff);
}
.greet-head {
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.05rem, 1.3vw + 0.6rem, 1.6rem);
}
.greet-sub {
  margin-top: .25rem;
  opacity: .9;
  font-size: .95rem;
}

/* Icons on the right in a horizontal row */
.iconbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

/* Icon buttons: compact + readable on any theme */
.iconbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 72px;
  border-radius: 16px;
  color: var(--onHeader, #fff);
  background: color-mix(in srgb, var(--onHeader, #fff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--onHeader, #fff) 28%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,.18) inset, 0 2px 10px rgba(0,0,0,.06);
  text-decoration: none;
}
.iconbtn .icon {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
  color: currentColor;
}
.iconbtn span {
  font-weight: 700;
  font-size: .92rem;
}

/* Make header text/controls visible on strong brand colors */
:root { --onHeader: #fff; }            /* default contrast */
header.backdrop { color: var(--onHeader); }
header .topbar { padding-block: 10px; } /* reduce big header feel */

/* Theme-specific header contrast (tweak as you like) */
body[data-theme="dora"]           { --onHeader: #fff; }
body[data-theme="blues-clues"]    { --onHeader: #fff; }
body[data-theme="disney-world"]   { --onHeader: #fff; }
body[data-theme="kungfu-panda"]   { --onHeader: #fff; }
body[data-theme="transformers"]   { --onHeader: #fff; }

/* Mobile: stack the row, keep icons horizontal */
@media (max-width: 900px) {
  .navrow { flex-direction: column; align-items: flex-start; gap: 14px; }
  .iconbar { justify-content: flex-start; }
}

/* 1) Constrain the whole content and add big side gutters so the scene shows */
main.container,
.page-container,            /* whichever your outer wrapper is */
#dragBoardCard {            /* keep the boat board narrower too */
  max-width: 1180px;        /* try 1120–1280 depending on taste */
  margin: 0 auto;           /* center it */
  padding-left: 28px;       /* left/right gutters = more scene visible */
  padding-right: 28px;
}

/* 2) Give the scene wrapper generous padding so it frames the tiles */
.ocean-card,                /* your scene/board wrapper */
#boatBoard {
  padding: 28px 30px 34px;  /* more space between edge and tiles */
  border-radius: 18px;
}

/* If you use a pseudo background on the scene, soften and offset it a touch */
.ocean-card::before {
  opacity: .85;             /* let the scene glow through */
  filter: saturate(1.05) brightness(1.02);
}

/* 3) Make the tiles a little translucent “glass” so the background shows through */
#boatBoard .island,
#boatBoard .boats .boat,
#boatBoard .island.card,
.card.hero,
.card {
  background: color-mix(in oklab, var(--card-bg, #ffffff) 82%, transparent);
  /* If color-mix isn’t supported in your target, use alpha: */
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(16,20,40,.08);
}

/* 4) Loosen the grid so you see more background between columns/rows */
#boatBoard .board-grid,
#boatBoard .islands {
  gap: 22px;                /* increase from your previous 14–16 */
}

/* 5) Narrow the left grade rail a bit so the scene has more room on the right */
#boatBoard .boats {
  width: 250px;             /* was probably ~280; adjust to taste */
}

/* 6) Keep tiles from stretching to the very bottom; show scene below them */
#boatBoard .islands,
#boatBoard { 
  min-height: 72vh;         /* a little shorter than full viewport */
}

/* 7) Softer tile borders so they don’t overpower the background */
#boatBoard .island,
#boatBoard .boats .boat {
  border-width: 2px;        /* was 1px/too thin or 3px/too heavy—2px is crisp */
  border-color: color-mix(in oklab, var(--theme-700, #3a6), #000 6%);
}

/* 8) Optional: theme can control how “open” the page feels */
:root {
  --scene-gutter-x: 28px;
  --scene-gutter-y: 28px;
}
body[data-theme="disney-world"] #dragBoardCard,
body[data-theme="blues-clues"]  #dragBoardCard {
  padding-left:  var(--scene-gutter-x);
  padding-right: var(--scene-gutter-x);
  padding-top:   calc(var(--scene-gutter-y) + 6px);
  padding-bottom:calc(var(--scene-gutter-y) + 10px);
}
/* Controls (tweak these two numbers) */
:root{
  --scene-opacity: .55;           /* 0 = invisible, 1 = full strength */
  --scene-wash: rgba(255,255,255,.28); /* white veil over the art */
}

/* The scene image layer */
.ocean-card::before{
  opacity: var(--scene-opacity);          /* make the picture faint */
  filter: saturate(.9) brightness(1.02);  /* slightly softer colors */
}

/* A subtle white veil on top of the scene (but under tiles) */
.ocean-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: var(--scene-wash);
}
body[data-theme="blues-clues"]{
  --scene-opacity: .25;
  --scene-wash: rgba(255,255,255,.30);
}
body[data-theme="transformers"]{
  --scene-opacity: .25;
  --scene-wash: rgba(255,255,255,.22);
}
body[data-theme="disney-world"]{
  --scene-opacity: .25;
  --scene-wash: rgba(255,255,255,.30);
}
body[data-theme="kungfu-panda"]{
  --scene-opacity: .25;
  --scene-wash: rgba(255,255,255,.22);
}
body[data-theme="dora"]{
  --scene-opacity: .25;
  --scene-wash: rgba(255,255,255,.30);
}
/* =========================
   Make background faint & tiles prominent
   ========================= */

/* Tunables */
:root{
  --scene-opacity: .18;                 /* lower = fainter background image */
  --scene-wash: rgba(255,255,255,.45);  /* white veil strength over the scene */
  --tile-surface: #ffffff;              /* tile fill */
  --tile-shadow: 0 20px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --tile-border: rgba(0,0,0,.06);
}

/* Ensure the scene is a background *layer* behind everything in the ocean card */
body .ocean-card{ position: relative; z-index: 0; }

/* Scene image */
body .ocean-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                           /* behind content */
  background: var(--scene-image, none) center/cover no-repeat;
  opacity: var(--scene-opacity);        /* << fade */
  filter: saturate(.8) brightness(.98) contrast(.96);
  pointer-events: none;
}

/* White veil on top of the scene to further soften it */
body .ocean-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                           /* above image, below tiles */
  pointer-events: none;
  background:
    /* subtle radial vignette for depth */
    radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.10) 0%, transparent 60%) ,
    var(--scene-wash);
}

/* Make all content sit on top of the background layers */
body .ocean-card > *{ position: relative; z-index: 2; }

/* Tile elevation: islands (subjects) and the grade column */
.island.card,
.boat-lane,
#boatBoard .islands .card,
#boatBoard .boats .card{
  background: var(--tile-surface);
  border: 1px solid var(--tile-border);
  box-shadow: var(--tile-shadow);
}

/* If any tiles use translucent fills, push them toward solid */
#boatBoard .island .body,
#boatBoard .island .label,
#boatBoard .boats .boat{
  background-color: rgba(255,255,255,.96);
}

/* Optional: stronger text colors to read over faint scene */
#boatBoard .island .label{ color: rgba(0,0,0,.88); }
#boatBoard .island .hint{ color: rgba(0,0,0,.65); }

/* ====== Per-theme fine tuning (optional) ====== */
body[data-theme="disney-world"]{
  --scene-opacity: .16;
  --scene-wash: rgba(255,255,255,.50);
}
body[data-theme="transformers"]{
  --scene-opacity: .14;
  --scene-wash: rgba(255,255,255,.46);
}
body[data-theme="dora"]{
  --scene-opacity: .18;
  --scene-wash: rgba(255,255,255,.45);
}
/* ===============================
   BOATBOARD • 3 columns + circles
   =============================== */

/* 3-column layout: left rail | islands | right rail */
#boatBoard{
  display:grid;
  grid-template-columns: 240px minmax(0,1fr) 240px;
  gap: 1.2rem;
  align-items: start;
}

/* Subject tiles (center) use a responsive 2x2 grid */
#boatBoard .islands{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  align-self: stretch;      /* match the rails' height nicely */
}
@media (max-width: 980px){
  #boatBoard{ grid-template-columns: 1fr; }
  #boatBoard .islands{ grid-template-columns: 1fr; }
}

/* Grade rails on the sides */
.boat-rail{
  display:grid;
  grid-auto-rows: min-content;
  gap: .8rem;
  align-content: start;
  padding: .25rem;          /* a little breathing room so circles aren't clipped */
}
.boat-rail.left  { justify-items: end; }
.boat-rail.right { justify-items: start; }

/* True circular “boats” with stronger borders */
:root{
  --boat-diam: 100px;       /* circle diameter (you said you wanted 100) */
  --boat-ring: 4px;         /* border thickness */
}
.boat{
  width: var(--boat-diam);
  height: var(--boat-diam);
  border-radius: 50%;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight: 900;
  line-height: 1.05;
  padding: 0;
  margin: 0;                /* rails handle alignment */
  background: #fff;
  border: var(--boat-ring) solid var(--t-chip-border, #c7d2fe);
  color: var(--t-chip-ink, #1e1b4b);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  cursor: grab;
  user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: visible;        /* never clip inner bits */
}
.boat:active{ cursor:grabbing; }
.boat:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(2,6,23,.16);
  border-color: color-mix(in srgb, var(--t-chip-border, #c7d2fe) 60%, var(--t-brand, #2563eb));
}

/* Keep the emoji/icon centered & sized (we already set ::before elsewhere; this re-centers) */
.boat::before{
  position: static !important;
  margin: 0;
  display:block;
  font-size: 28px;          /* icon size on the circle */
  line-height: 1;
  opacity:.95;
}

/* Label inside the circle (just the button text) */
.boat span, .boat .g-label{
  display:block;
  margin-top: .15rem;
  font-size: 1rem;
  color: inherit;
}

/* Prevent any parent from clipping our 100px circles */
#boatBoardCard, .ocean-card { overflow: visible; }
.boat-rail, .boat { contain: layout paint; }  /* improves clipping behavior in some browsers */

/* Islands polish so they stand out against the fainter background */
#boatBoard .islands .island{
  background: rgba(255,255,255,.96);
  border: 3px solid var(--tile-border, #e2e8f0);
  box-shadow: 0 16px 36px rgba(2,6,23,.10);
}

/* Drag-over highlight */
#boatBoard .island.over{
  box-shadow: 0 0 0 6px var(--t-drop-ring, rgba(37,99,235,.28)), 0 18px 38px rgba(2,6,23,.18);
  transform: translateY(-2px) scale(1.01);
}

/* Compact hint text inside islands */
#boatBoard .island .hint { color: var(--tile-muted, #64748b); }

/* Mobile: circles shrink a bit so everything fits */
@media (max-width: 520px){
  :root{ --boat-diam: 84px; }
}
/* ===============================
   Fit 5 grades (LHS/RHS) and 2x2 tiles (center)
   =============================== */
:root{
  --boat-diam: 100px;        /* your current circle size */
  --rail-gap:  0.8rem;       /* vertical gap between boats */
  --island-gap: 1rem;        /* gap between subject tiles */
  --island-pad: .85rem;      /* inner padding for compact tiles */
}

/* rails: use the same gap var */
.boat-rail{ gap: var(--rail-gap); }

/* compute the board height from the five boats and four gaps */
#boatBoard{
  /* total height = 5 * circle + 4 * gap */
  --board-h: calc( (5 * var(--boat-diam)) + (4 * var(--rail-gap)) );
}

/* Center column stretches to the same total height */
#boatBoard .islands{
  height: var(--board-h);
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: repeat(2, 1fr);   /* 2 rows of equal height */
  gap: var(--island-gap);
  align-self: stretch;
}

/* Make each tile a bit smaller/denser so four tiles fit comfortably */
#boatBoard .island{
  padding: var(--island-pad);
  border-width: 2px;                     /* keep them crisp but lighter */
  display: flex;
  flex-direction: column;
  min-height: 0;                         /* allow equal-row grids to work */
}

/* Tighten text inside tiles so they don’t force growth */
#boatBoard .island .label{
  font-size: 1rem;
  margin: 0 0 .25rem;
  line-height: 1.15;
}
#boatBoard .island .preview-list{
  margin:.25rem 0 0 1rem;
  line-height:1.32;
  font-size:.95rem;
}
#boatBoard .island .skills-big{
  margin-top:.5rem;
  font-size:1.1rem;
}

/* Slightly shrink icons in tiles for compactness */
#boatBoard .island .flag{ font-size:1.05rem; }

/* Mobile: shrink circles and recompute total height */
@media (max-width: 980px){
  /* center stacks, so no need to force the big equal height */
  #boatBoard .islands{
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}
/* ==== BoatBoard: tighter, wider subject tiles with equal column heights ==== */
#boatBoard{
  /* tune these to taste */
  --boat-diam: 92px;      /* grade circle diameter (your 100px looked good; try 92–100) */
  --boat-gap: 16px;       /* vertical gap between circles */
  --rail-w: 160px;        /* left/right rail width */
  --mid-min: 620px;       /* min width of the middle (subjects) column */
  --gutter: 18px;         /* gaps */
  display: grid;
  grid-template-columns: var(--rail-w) minmax(var(--mid-min), 1fr) var(--rail-w);
  gap: var(--gutter);
  align-items: stretch;
}

/* 5 grades per rail; stretch rails to the same height as the subjects grid */
#boatBoard .boat-rail{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 4px 0;
  /* This height defines the whole board height and matches the subjects area */
  min-height: calc(5 * var(--boat-diam) + 4 * var(--boat-gap));
}

/* grade buttons — circle, thick border so they pop from background */
#boatBoard .boat{
  width: var(--boat-diam);
  height: var(--boat-diam);
  margin-inline: auto;
  border-radius: 50%;
  border: 6px solid color-mix(in srgb, var(--tile-border) 40%, var(--tile-accent)); /* thicker */
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
  background:
    radial-gradient(16px 16px at 50% 18%, rgba(255,255,255,.85), transparent 70%),
    linear-gradient(180deg, #fff, rgba(255,255,255,.85));
  color: var(--tile-ink);
  font-weight: 900;
}

/* Middle subjects grid: 2 × 2 and *exactly* the same total height as rails */
#boatBoard .islands{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;                 /* each row shares the height */
  gap: var(--gutter);
  height: 100%;
  min-height: calc(5 * var(--boat-diam) + 4 * var(--boat-gap)); /* match rails */
}

/* Make subject tiles wider + shorter (reduce padding; keep title crisp) */
#boatBoard .islands .island{
  display:flex;
  flex-direction:column;
  min-height: 0;               /* allow content to shrink */
  padding: 14px 16px;          /* tighter */
  border-radius: 14px;
  border-width: var(--tile-border-w, 3px);
}

/* Title + body spacing condensed */
#boatBoard .islands .island .label{
  margin: 0 0 .25rem 0;
  font-size: 1.05rem;
  line-height: 1.1;
}
#boatBoard .islands .island .preview-body,
#boatBoard .islands .island .hint{
  margin-top: .25rem;
}

/* ul bullets in preview: compact */
#boatBoard .islands .island .preview-list{
  margin: .2rem 0 0 1.1rem;
  line-height: 1.32;
  font-size: .96rem;
}

/* big skills line: a touch smaller so tiles stay shorter */
#boatBoard .islands .island .skills-big{
  margin-top: .5rem;
  font-size: 1.05rem;
}

/* Responsive: stack columns on narrow screens */
@media (max-width: 980px){
  #boatBoard{
    grid-template-columns: 1fr;      /* single column */
  }
  #boatBoard .islands{
    grid-template-columns: 1fr;      /* subjects stack */
    grid-template-rows: none;
    min-height: auto;
  }
  #boatBoard .boat-rail{
    min-height: auto;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
  }
}
/* ===========================
   SUBJECT TILE THEMING (per theme, per subject)
   =========================== */

/* Base hues used when no theme override is present */
:root{
  --sub-math:   #6366f1;  /* indigo */
  --sub-ela:    #10b981;  /* emerald */
  --sub-science:#06b6d4;  /* cyan   */
  --sub-social: #f59e0b;  /* amber  */
}

/* Blues Clues */
body[data-theme="blues-clues"]{
  --sub-math:   #647cf7;
  --sub-ela:    #22c499;
  --sub-science:#38bdf8;
  --sub-social: #fbbf24;
}

/* Disney World */
body[data-theme="disney-world"]{
  --sub-math:   #5b7cfa;
  --sub-ela:    #0ea5a6;
  --sub-science:#22c55e;
  --sub-social: #fb923c;
}

/* Dora */
body[data-theme="dora"]{
  --sub-math:   #8b5cf6;
  --sub-ela:    #16a34a;
  --sub-science:#06b6d4;
  --sub-social: #f59e0b;
}

/* Kung Fu Panda */
body[data-theme="kungfu-panda"]{
  --sub-math:   #4f46e5;
  --sub-ela:    #16a34a;
  --sub-science:#22c55e;
  --sub-social: #f97316;
}

/* Transformers */
body[data-theme="transformers"]{
  --sub-math:   #3b82f6;
  --sub-ela:    #22c55e;
  --sub-science:#06b6d4;
  --sub-social: #ef4444;
}

/* Map subject -> active hue variable */
#boatBoard .island[data-subject="Mathematics"]         { --sub-hue: var(--sub-math); }
#boatBoard .island[data-subject="English Language Arts"]{ --sub-hue: var(--sub-ela); }
#boatBoard .island[data-subject="Science"]              { --sub-hue: var(--sub-science); }
#boatBoard .island[data-subject="Social Studies"]       { --sub-hue: var(--sub-social); }

/* Common styling that uses --sub-hue for background, border, and accents */
#boatBoard .islands .island{
  /* soft tinted background + subtle pattern using the subject hue */
  background:
    repeating-linear-gradient(
      30deg,
      color-mix(in srgb, var(--sub-hue) 10%, transparent) 0 10px,
      transparent 10px 20px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sub-hue) 12%, #fff) 0%,
      #fff 85%
    );
  border-color: color-mix(in srgb, var(--sub-hue) 45%, var(--tile-border));
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
}

/* A slim subject-colored header underline under the title */
#boatBoard .islands .island .label{
  color: color-mix(in srgb, var(--sub-hue) 30%, var(--tile-ink));
  position: relative;
}
#boatBoard .islands .island .label::after{
  content:"";
  display:block;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sub-hue) 55%, #fff);
  width: 64px;
}

/* Corner icon (flag) picks up the subject hue */
#boatBoard .islands .island .flag{
  color: color-mix(in srgb, var(--sub-hue) 70%, #333);
  opacity: .95;
}

/* Grade badge + skills line adopt the subject hue lightly */
#boatBoard .islands .island .grade-badge{
  background: color-mix(in srgb, var(--sub-hue) 15%, transparent);
  border-color: color-mix(in srgb, var(--sub-hue) 45%, transparent);
}
#boatBoard .islands .island .skills-big{
  color: color-mix(in srgb, var(--sub-hue) 75%, var(--tile-ink));
}
/* =========================
   1) Bigger grade text on circular boats
   ========================= */
.boat-rail .boat{
  --boat-diam: 112px;                 /* size of the circle */
  width: var(--boat-diam);
  height: var(--boat-diam);
  border-radius: 999px;
  font-size: 1.35rem;                 /* BIGGER grade label */
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.05;
  display: grid;
  place-items: center;
  border: 6px solid color-mix(in srgb, var(--tile-accent) 55%, #fff); /* thicker ring */
  box-shadow: 0 10px 26px rgba(2,6,23,.12), inset 0 0 0 3px #fff;
}

/* If you show an emoji/ico in ::before, make it bigger too */
.boat-rail .boat::before{
  font-size: 28px;
  margin-bottom: 4px;
}

/* Tweak spacing so five circles fit nicely top to bottom */
.boat-rail{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

/* =========================
   2) Subject tiles: non-slanted, subject-specific patterns
   We keep theme tinting via --tile-accent / --tile-ink / --tile-bg.
   ========================= */
#boatBoard .islands .island{
  /* neutral base; pattern layers come next */
  background: none;
  background-color: color-mix(in srgb, #fff 86%, transparent);
  position: relative;
  overflow: hidden;
}

/* A common top “label tape” that inherits tile accent */
#boatBoard .islands .island .label{
  position: relative;
  z-index: 2;
}
#boatBoard .islands .island .label::after{
  content:"";
  position:absolute; left:0; right:38%;
  bottom:-.35rem; height:10px;
  background: color-mix(in srgb, var(--tile-accent) 24%, transparent);
  border-radius: 8px;
  filter: saturate(1.05);
}

/* ---------- Mathematics: clean geometry grid + faint dots ---------- */
#boatBoard .islands .island[data-subject="Mathematics"]{
  --m-grid: color-mix(in srgb, var(--tile-accent) 16%, transparent);
  background:
    /* tiny dots */
    radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--tile-accent) 18%, transparent) 1.5px, transparent 2px) 0 0 / 24px 24px,
    /* square grid */
    linear-gradient(#0000 23px, var(--m-grid) 23px, var(--m-grid) 24px, #0000 24px) 0 0 / 24px 24px,
    linear-gradient(90deg, #0000 23px, var(--m-grid) 23px, var(--m-grid) 24px, #0000 24px) 0 0 / 24px 24px,
    #ffffff;
  border-color: color-mix(in srgb, var(--tile-accent) 45%, #dbeafe);
}

/* ---------- English Language Arts: ruled paper + margin line ---------- */
#boatBoard .islands .island[data-subject="English Language Arts"]{
  --e-line: color-mix(in srgb, var(--tile-accent) 22%, transparent);
  --e-margin: color-mix(in srgb, var(--tile-accent) 38%, #ef444400);
  background:
    /* horizontal ruling */
    repeating-linear-gradient(0deg, #0000 0 28px, var(--e-line) 28px 30px),
    /* vertical margin line (left) */
    linear-gradient(90deg, #0000 42px, var(--e-margin) 42px 44px, #0000 44px),
    #ffffff;
  border-color: color-mix(in srgb, var(--tile-accent) 40%, #c7f9ff);
}

/* ---------- Science: hex/molecule vibe (tri-axial grid) ---------- */
#boatBoard .islands .island[data-subject="Science"]{
  --s-hex: color-mix(in srgb, var(--tile-accent) 20%, transparent);
  background:
    /* molecule dots */
    radial-gradient(circle, color-mix(in srgb, var(--tile-accent) 22%, transparent) 2px, transparent 3px) 0 0 / 28px 28px,
    /* tri-axial line grid to hint hexagons */
    linear-gradient( 0deg,  #0000 27px, var(--s-hex) 27px 28px, #0000 28px) 0 0 / 28px 28px,
    linear-gradient(60deg,  #0000 27px, var(--s-hex) 27px 28px, #0000 28px) 0 0 / 28px 28px,
    linear-gradient(120deg, #0000 27px, var(--s-hex) 27px 28px, #0000 28px) 0 0 / 28px 28px,
    #ffffff;
  border-color: color-mix(in srgb, var(--tile-accent) 42%, #dcfce7);
}

/* ---------- Social Studies: map/contour rings ---------- */
#boatBoard .islands .island[data-subject="Social Studies"]{
  --ss-ring: color-mix(in srgb, var(--tile-accent) 18%, transparent);
  background:
    repeating-radial-gradient(circle at 28% 30%,
      #0000 0 18px, var(--ss-ring) 18px 20px),
    repeating-radial-gradient(circle at 78% 68%,
      #0000 0 22px, var(--ss-ring) 22px 24px),
    #ffffff;
  border-color: color-mix(in srgb, var(--tile-accent) 44%, #fde68a);
}

/* Make patterns soft and readable under content */
#boatBoard .islands .island::before{
  content:"";
  position:absolute; inset:0;
  background: #fff;
  opacity: .12;                  /* veil to keep text legible */
  pointer-events:none;
}

/* Keep inner text crisp above patterns */
#boatBoard .islands .island > *{ position: relative; z-index: 1; }

/* Optional: unify tile heights so columns align cleanly */
#boatBoard .islands{
  grid-template-rows: repeat(2, 1fr);
}
#boatBoard .islands .island{
  min-height: 300px;             /* shorten height */
}
@media (min-width: 1100px){
  #boatBoard .islands .island{ min-height: 320px; }
}
/* ========== Flags top-right, labels left ========== */
#boatBoard .islands .island{
  position: relative;
}

#boatBoard .islands .island .flag{
  position: absolute;
  top: .65rem;
  right: .75rem;             /* <- top-right anchor */
  font-size: 1.15rem;
  line-height: 1;
  opacity: .95;
  z-index: 3;                /* above pattern and label tape */
}

#boatBoard .islands .island .label{
  text-align: left;          /* explicit left align */
  padding-right: 2.2rem;     /* room so label never collides with flag */
  margin: 0 0 .45rem 0;
  display: block;
}

/* ========== Theme-aligned “event” fonts ========== */
/* Pick a friendly headline font per theme (falls back safely).
   If you’ve already loaded any of these, they’ll be used; otherwise
   it gracefully uses system UI sans. */

:root{
  --theme-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --theme-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Example face choices per theme (optional but nice) */
body[data-theme="blues-clues"]{
  --theme-head: "Baloo 2", var(--theme-head);
}
body[data-theme="dora"]{
  --theme-head: "Poppins", var(--theme-head);
}
body[data-theme="disney-world"]{
  --theme-head: "Nunito", var(--theme-head);
}
body[data-theme="kungfu-panda"]{
  --theme-head: "Rubik", var(--theme-head);
}
body[data-theme="transformers"]{
  --theme-head: "Exo 2", var(--theme-head);
}

/* Apply themed heads to tile titles and badges */
#boatBoard .islands .island .label{
  font-family: var(--theme-head);
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--tile-ink);
}

#boatBoard .islands .island .grade-badge{
  font-family: var(--theme-head);
  font-weight: 800;
}

#boatBoard .islands .island .skills-big{
  font-family: var(--theme-head);
  font-weight: 900;
  color: var(--tile-accent);
}

/* Keep list/body text readable and harmonized */
#boatBoard .islands .island .preview-list{
  font-family: var(--theme-body);
  color: var(--tile-muted);
}
/* --- Grade boats: make icon + text sit side-by-side and centered --- */
.boat {
  /* circle layout */
  width: var(--boat-diam, 96px);
  height: var(--boat-diam, 96px);
  border-radius: 50%;

  /* center content */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* put icon and label on one line */
  flex-direction: row !important;      /* override any previous column layout */
  gap: .35rem;                         /* tighten space between icon and text */
  padding: 0 .4rem;

  /* typography */
  font-weight: 900;
  font-size: 1.05rem;                  /* label size */
  line-height: 1;                      /* prevents top/bottom drift */
  white-space: nowrap;
}

/* normalize the emoji icon from ::before so it sits on the same baseline */
.boat::before {
  position: static !important;         /* kill top/left offsets from older rules */
  transform: none !important;
  margin: 0;
  display: inline-block;
  line-height: 1;                      /* same baseline as text */
  font-size: 1.25rem;                  /* icon size (adjust to taste) */
  vertical-align: middle;
}

/* if you ever added a left padding for a ".g-label", reset it */
.boat .g-label { padding: 0; line-height: 1; }

/* optional: ensure hover/focus scaling keeps them aligned */
.boat:hover::before,
.boat:focus-visible::before { transform: none; }
/* Tighten spacing between the emoji icon (::before) and the grade text */
.boat{
  /* keep them stacked vertically */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* dial in tighter vertical rhythm */
  line-height: 2;           /* remove extra text leading */
  gap: .08rem;              /* was larger; shrink the gap */
}

/* The emoji icon itself */
.boat::before{
  position: static !important;
  display: block;
  line-height: 2;
  font-size: 4rem;       /* icon size (adjust to taste) */

  /* Nudge text upward by “eating” a bit of the space below the icon */
  margin-bottom: -.01rem;   /* negative margin closes the icon–text gap */
  /* If you want it tighter/looser, tweak between -.04rem and -.16rem */
  margin-top: .08rem;   /* negative margin closes the icon–text gap */
}

/* Optional: slightly increase number size without adding vertical lead */
.boat{
  font-size: 2rem;        /* grade text size */
  letter-spacing: .1px;
}
/* 3-column responsive grid for skill groups */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;  /* ONE column */
  gap: 1rem;
}

/* (optional) you can remove the media queries now, or leave them – they have no effect with 1fr */

@media(max-width:1000px){ .skills-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){  .skills-grid{ grid-template-columns:1fr; } }

/* each group card */
.skill-group{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow: var(--shadow);
  padding:.9rem;
}
.skill-group h3 {
  margin:.1rem 0 .6rem;
  font-size:1.02rem;
  color: var(--accent-strong);   /* <- theme color */
}
/* skills inside the group (clickable tags) */
.skill-list {
  display: grid;
  grid-template-columns: 1fr; /* one column for chips */
  gap: .5rem;
}


.skill-chip {
  border:1px solid var(--border);
  border-radius:999px;
  padding:.5rem .7rem;
  text-align:center;
  background:#f8fafc;           /* you can also make this theme-based if you want */
  cursor:pointer;
  font-weight:700;
  color: var(--accent);          /* <- theme color for text */
}
.skill-chip:hover {
  background:#eef4ff;            /* or var(--accent-soft) */
  border-color:#bfd3ff;          /* or var(--accent) */
}
/* --- Practice groups: one-column list of skills --- */
.practice-groups {        /* container for all groups (unchanged if you already use it) */
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* The card for a single skill group */
.practice-group {
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 16px;
  padding: 1rem;
}

/* Group title */
.practice-group .group-title {
  font-weight: 700;
  margin-bottom: .5rem;
}

/* Make skills a single vertical column */
.practice-group .skills {
  display: flex;           /* single column */
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each skill row (full width) */
.practice-group .skills li {
  margin: 0;
}

/* Clickable pill row */
.practice-group .skill-link {
  display: flex;
  align-items: center;
  justify-content: space-between; /* text on left, arrow on right */
  text-decoration: none;
  padding: .6rem .8rem;
  border-radius: 999px;
  background: var(--pill, rgba(0,0,0,.04));
  border: 1px solid var(--pill-border, rgba(0,0,0,.06));
  font-weight: 600;
}

/* Add the »» arrow automatically */
.practice-group .skill-link::after {
  content: " »»";
  font-weight: 800;
  letter-spacing: .5px;
  opacity: .8;
}

/* Optional hover */
.practice-group .skill-link:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}
/* base defaults */
:root {
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --accent-strong: #1d4ed8;
  --text-main: #111827;
}

/* Blue’s Clues theme */
body[data-theme="blues-clues"] {
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --accent-strong: #1d4ed8;
}

/* Disney World theme */
body[data-theme="disney-world"] {
  --accent: #b91c1c;
  --accent-soft: #fee2e2;
  --accent-strong: #991b1b;
}

/* Dora theme */
body[data-theme="dora"] {
  --accent: #7c3aed;
  --accent-soft: #ede9fe;
  --accent-strong: #5b21b6;
}
/* Layout: main panel + sidebar */
.practice-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.practice-main {
  flex: 1 1 auto;
}

.practice-sidebar {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Question card */
.question-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow, 0 10px 25px rgba(15, 23, 42, 0.12));
}

/* Header row inside card */
.question-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-weight: 600;
}

.question-number {
  font-size: 1rem;
}

.question-timer {
  font-size: 0.9rem;
}

/* Prompt text */
.question-prompt {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Choices as big pill buttons */
.question-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.choice-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: var(--pill, rgba(15, 23, 42, 0.04));
  border: 1px solid var(--pill-border, rgba(15, 23, 42, 0.08));
  cursor: pointer;
  user-select: none;
}

.choice-row input[type="radio"] {
  accent-color: var(--accent, #2563eb);
}

/* Actions */
.question-actions {
  display: flex;
  gap: 0.75rem;
}

/* Explanation */
.explanation-container {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.explanation-content {
  margin-top: 0.35rem;
}

/* Results */
.results-container {
  margin-top: 1rem;
}

.results-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Sidebar cards */
.stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow, 0 6px 16px rgba(15, 23, 42, 0.12));
}

.stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.stat-time {
  font-size: 1.2rem;
  font-weight: 600;
}

.stat-accent {
  border-left: 4px solid var(--accent, #2563eb);
}

/* Mobile: stack sidebar under main */
@media (max-width: 900px) {
  .practice-layout {
    flex-direction: column;
  }

  .practice-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .stat-card {
    flex: 1 1 150px;
  }
}
.ai-explanation-container {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
}

.ai-explanation-header {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.ai-explanation-content {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Keep island preview area stable */
.ocean-card .islands .island .preview-body {
  min-height: 140px;       /* tune these numbers as you like */
  /*max-height: 140px;*/
  padding-top: 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*overflow: hidden;*/
}

.ocean-card .islands .island .preview-list {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  font-size: 0.85rem;
  line-height: 1.25;

  /* 👇 Show at most ~3 lines of bullets */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.ocean-card .islands .island .skills-big {
  margin-top: auto;          /* pushes it to bottom of preview-body */
  padding-top: 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
}