/* Scope only what the Logic Realm needs. Global colors, buttons, header come from ../style.css */

/* Layout helpers */
.container { max-width: 820px; margin: 0 auto; padding: 1rem 1.25rem 2.5rem; }
.status-bar { display: grid; gap: .75rem; align-items: center; margin: .75rem 0 1rem; }
.status-bar .controls { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* Board */
.board {
  display: grid;
  grid-template-columns: repeat(2, 165px);
  grid-auto-rows: 165px;
  gap: 14px;
  justify-content: center;
  margin: 1rem auto 1.25rem;
}
.tile {
  border-radius: 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .08s ease, filter .08s ease;
}
.tile:active { transform: scale(.98); filter: brightness(1.05); }
.tile.flash { outline: 3px solid rgba(255,255,255,.7); filter: brightness(1.25); }

/* Small screens: keep tiles finger-friendly */
@media (max-width: 420px) {
  .board { grid-template-columns: repeat(2, 100px); grid-auto-rows: 100px; gap: 12px; }
}

/* Card (reflection area) */
.card {
  background: var(--card-bg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin: 1rem;
}
.card textarea {
  width: 100%;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: .7rem .9rem;
  background: color-mix(in oklab, var(--card-bg), white 4%);
  color: var(--text);
  outline: none;
}
.card textarea:focus { border-color: color-mix(in oklab, var(--btn-bg), white 20%); }

/* Utilities */
.muted { opacity: .8; }
.visually-hidden {
  position: absolute !important; height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}


    .hud { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
    .pill { padding:.25rem .6rem; border-radius:999px; font-size:.9rem; background:rgba(99,102,241,.15) }
    .panel { background:var(--card-bg); box-shadow:var(--shadow); border-radius:16px; padding:1rem; }
    
    #explain { margin-top:.6rem; opacity:.9; }
    .controls { display:flex; gap:.5rem; flex-wrap:wrap; }
    .seg { display:inline-flex; border-radius:10px; overflow:hidden; border:1px solid rgba(163, 163, 163, 0.15) }
    .seg button { border:0; padding:.4rem .7rem; background:transparent }
    .seg button.active { background:var(--btn-bg); color:#fff }
        .row{display:flex;justify-content:space-between;align-items:center;gap:.6rem}

 /* === Odd One Out visual shapes === */
:root { --shape-size: clamp(80px, 15vw, 130px); }

.odd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--shape-size), 1fr));
  gap: 1rem;
  justify-items: center;
  margin-top: 1rem;
}

.shape {
  width: var(--shape-size);
  height: var(--shape-size);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, outline 0.15s ease;
  outline: 2px solid transparent;
}

/* Geometric shapes (fixed proportions) */
.geom {
  display: block;
  aspect-ratio: 1 / 1;        /* keeps perfect circle/square proportions */
  width: 70%;
  background: currentColor;
  margin: auto;
}

/* Shape types */
.geom.circle { border-radius: 50%; }

.geom.square { border-radius: 10px; }

.geom.diamond {
  transform: rotate(45deg);
  border-radius: 6px;
}

.geom.triangle {
  width: 0;
  height: 0;
  border-left: 35% solid transparent;
  border-right: 35% solid transparent;
  border-bottom: 70% solid currentColor;
  background: none;
}

.geom.hexagon {
  position: relative;
  width: 60%;
  height: calc(60% * 0.577); /* 0.577 = sqrt(3)/3 */
  background: currentColor;
  margin: calc(60% * 0.289) auto; /* center vertically */
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.geom.star {
  aspect-ratio: 1 / 1;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 
                    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Colors */
.shape[color="red"]    { color: #ef4444; }
.shape[color="blue"]   { color: #3b82f6; }
.shape[color="green"]  { color: #10b981; }
.shape[color="amber"]  { color: #f59e0b; }
.shape[color="violet"] { color: #8b5cf6; }
.shape[color="rose"]   { color: #f43f5e; }

.option-card.correct { outline: 3px solid #22c55e; }
.option-card.wrong   { outline: 3px solid #ef4444; }
.option-card.hint    { box-shadow: 0 0 0 3px rgba(99,102,241,.5) inset; }

/* -------- Odd One Out (Big Shape Grid) -------- */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* bigger slots */
  gap: 2.5rem;
  justify-items: center;
  margin: 1.5rem 0;
}

.shape-cell {
  background: var(--card-bg);     /* light: white   | dark: surface */
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  min-height:140px; 
}

/* reuse the shape tile look for text options */
.shape-cell.text-cell {
  /* the .shape-cell already sets background, radius, shadow, padding */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(94px, 26vw, 160px);
  padding: 8px 14px;
}

/* readable label inside the tile */
.shape-cell.text-cell .opt-label {
  font-size: clamp(18px, 4.8vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

/* small color square for color-based questions */
.shape-cell.text-cell .swatch {
  width: clamp(20px, 4.6vw, 28px);
  height: clamp(20px, 4.6vw, 28px);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}


.shape-cell:hover { transform: translateY(-2px); }
.shape-cell.correct { outline: 3px solid #22c55e; }
.shape-cell.wrong   { outline: 3px solid #ef4444; }

/* SVG scaling */
.shape-cell svg {
  width: 100px;
  height: 100px;
}

/* ========== Unified option tiles for Sequence & Odd (text rules) ========== */
/* Grid wrapper used by Sequence (#choices) and Odd (#opts, when mode='text') */
.choices,
#opts{
  display: grid;
  gap: clamp(12px, 3vw, 22px);
  grid-template-columns: 1fr 1fr;             /* 1 column on very small screens */
  margin: clamp(10px, 2.6vw, 18px) auto;
  max-width: 860px;
  padding: 0 clamp(10px, 4vw, 18px);
}


/* Big card tile (matches .shape-cell visual language) */
.choice,
#opts .opt,
.shape-cell.text-cell{
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  min-height: clamp(84px, 22vw, 132px);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  font-weight: 700;
  font-size: clamp(18px, 4.2vw, 28px);
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  cursor: pointer;
}

.choice:hover:not(:disabled),
#opts .opt:hover:not(:disabled),
.shape-cell.text-cell:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border-color: rgba(99,102,241,.35);
}

.choice:active:not(:disabled),
#opts .opt:active:not(:disabled),
.shape-cell.text-cell:active:not(:disabled){
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

.choice:focus-visible,
#opts .opt:focus-visible,
.shape-cell.text-cell:focus-visible{
  outline: 3px solid rgba(99,102,241,.55);
  outline-offset: 2px;
  border-color: rgba(99,102,241,.55);
}

.choice:disabled,
#opts .opt:disabled,
.shape-cell.text-cell:disabled{ opacity: .85; cursor: default; }

/* feedback states (reuse the same colors as shape tiles) */
.choice.correct,
#opts .opt.correct,
.shape-cell.text-cell.correct{
  border-color: rgba(34,197,94,.65);
  box-shadow: 0 0 0 3px rgba(34,197,94,.25), var(--shadow);
}
.choice.wrong,
#opts .opt.wrong,
.shape-cell.text-cell.wrong{
  border-color: rgba(239,68,68,.65);
  box-shadow: 0 0 0 3px rgba(239,68,68,.25), var(--shadow);
}

/* Small color square for color-based rules (Odd) */
.shape-cell.text-cell .swatch,
#opts .opt .swatch{
  width: clamp(20px, 4.6vw, 28px);
  height: clamp(20px, 4.6vw, 28px);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
  margin-right: 10px;
}

@media (min-width: 560px){
  .choices, #opts { grid-template-columns: 1fr 1fr; }  /* 2 columns when there’s room */
}

.wrap{max-width:980px;margin:1rem auto;padding:1rem}
.cell input{width:68px;height:68px;border-radius:12px;text-align:center;font-size:1.4rem;
  border:1px solid rgba(255,255,255,.15);background:var(--card-bg);color:var(--text)}
.cell.prefilled input{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.35);font-weight:600}
.err{color:#ef4444}
.ok{color:#22c55e}

button { -webkit-tap-highlight-color: transparent; }
/* ---------- Logic Hub: card grid ---------- */
/* 2) Restore spacing between hub cards */
.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  align-items:stretch;
  gap:16px;                            /* <-- add this */
}

.game-grid .card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px 14px;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}

.game-grid .card:hover{
  transform:translateY(-2px);
  border-color:rgba(99,102,241,.35);
  box-shadow:0 10px 24px rgba(99,102,241,.15);
}

.game-grid .card h2{
  margin:0 0 8px 0;
  font-size:1.35rem; /* readable on mobile */
  line-height:1;
}

.game-grid .card p{
  margin:0;
  color:var(--muted);
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- Rename the Latin grid so it no longer collides ---------- */
.latin-grid{                     /* was .grid */
  display:grid;
  grid-template-columns:repeat(3,75px);
  gap:8px;
  justify-content:center;
  margin:1rem 0;
}
/* 3) Scope Latin grid inputs (replace any generic `.cell input` rules) */
.latin-grid .cell input{
  width:68px;height:68px;border-radius:12px;text-align:center;font-size:1.4rem;
  border:1px solid rgba(255, 0, 0, 0.15);
  background:rgba(255, 255, 255, 0.15);color:var(--text);
}
.latin-grid .cell.prefilled input{
  background:rgba(99,102,241,.15);
  border-color:rgb(99, 101, 241);
  font-weight:600;
}


@media (max-width: 600px) {
  .shape-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .shape-cell {
    width: 120px;
    height: 120px;
  }
  .shape-cell svg {
    width: 90px;
    height: 90px;
  }
}