:root{
  --bg:#071021; --card:#0b1220; --muted:#9aa6b2; --accent:#10b981; --white:#ffffff;
  /* responsive size tokens */
  --peg-size:48px; /* default peg */
  --palette-size:44px; /* default palette swatch */
  --fb-size:14px; /* feedback dot */
  --legend-size:12px;
}
*{box-sizing:border-box}
/* Do not style the global page (html/body). Styles are scoped to the game container `.app`. */
.app{max-width:100%;width:100%;padding:12px;display:flex;flex-direction:column;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:var(--white);container-type:inline-size}
header{padding:6px 0;text-align:center}
h1{margin:0;font-size:1.4rem}.board 
.subtitle{color:var(--muted);font-size:0.95rem;margin:6px 0}
.legend{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:0.85rem;margin-top:8px}
.legend-dot{width:var(--legend-size);height:var(--legend-size);border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,0.06)}
.legend-dot.correct{background:var(--accent);border:none}
.legend-dot.near{background:#facc15;border:none}
.legend-dot.wrong{background:rgba(255,255,255,0.06);border:none}
.app {background-color: #042022;}
.board{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px 0;overflow:auto;}
.mm-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:10px;background:rgba(255,255,255,0.02);border-radius:12px;box-sizing:border-box;width:100%}
.mm-row.active{border-left:4px solid var(--accent);box-shadow:0 8px 24px rgba(0,0,0,0.45);transform:scale(1.01)}
.pegs{display:flex;gap:10px;flex:1 1 auto;min-width:0;align-items:center}
.mm-row > *{flex-shrink:0}
.mm-row > .pegs{flex:1 1 auto;min-width:0}
.mm-row > .feedback, .mm-row > .validation{flex:0 0 auto}
.mm-actions{display:flex;gap:8px}
.mm-actions .validate-btn, .mm-actions .clear-btn{flex:1}
.peg{width:var(--peg-size);height:var(--peg-size);border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));border:2px solid rgba(255,255,255,0.06);display:inline-flex;align-items:center;justify-content:center;position:relative;box-shadow:0 6px 14px rgba(2,6,23,0.6), inset 0 -6px 14px rgba(0,0,0,0.45)}
.peg.empty{opacity:0.8;filter:grayscale(20%)}
.peg.active{outline:3px solid rgba(255,255,255,0.06);transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,0.6), inset 0 -8px 18px rgba(0,0,0,0.5)}
/* glossy highlight */
.peg::after{content:'';position:absolute;left:8px;top:6px;width:40%;height:28%;border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.02));mix-blend-mode:screen;pointer-events:none}
.feedback{display:flex;gap:8px;align-items:center}
.fb-dot{width:var(--fb-size);height:var(--fb-size);border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,0.06);box-shadow:0 2px 6px rgba(0,0,0,0.4)}
.fb-dot.correct{background:var(--accent);border:none}
.fb-dot.near{background:#facc15;border:none}
.fb-dot.wrong{background:rgba(255,255,255,0.06);border:none}
.validate-btn{margin-left:10px;padding:6px 8px;border-radius:8px;border:none;background:#22313f;color:var(--white);font-weight:700}
.validate-btn.enabled{background:var(--accent);color:#042022}
.validate-btn.disabled{opacity:0.5}
.clear-btn{margin-left:6px;padding:6px 8px;border-radius:8px;border:none;background:#334155;color:var(--white);font-weight:700}
.clear-btn.enabled{background:#ef4444;color:#fff}
.clear-btn.disabled{opacity:0.5}

.controls{padding:10px 0;display:flex;flex-direction:column;gap:8px}
.palette{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.palette .color{width:var(--palette-size);height:var(--palette-size);border-radius:50%;border:3px solid transparent;box-shadow:0 2px 6px rgba(0,0,0,0.5)}
.palette .color.selected{outline:3px solid rgba(255,255,255,0.06);transform:scale(1.02)}
.actions{display:flex;gap:10px;justify-content:center}
.btn{padding:10px 12px;border-radius:10px;border:none;background:#22313f;color:var(--white);font-weight:700}
.btn.primary{background:var(--accent);color:#042022}
.status{padding:8px 4px;text-align:center;color:var(--muted)}

.picker{position:fixed;display:flex;gap:8px;padding:8px;background:linear-gradient(180deg,#0b1220,#071021);border-radius:12px;border:1px solid rgba(255,255,255,0.05);z-index:60;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.picker.hidden{display:none}
.picker .swatch{width:calc(var(--palette-size) - 4px);height:calc(var(--palette-size) - 4px);border-radius:50%;border:2px solid rgba(255,255,255,0.06)}

.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45)}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:18px;border-radius:12px;text-align:center;max-width:360px}

@media(min-width:520px){
  :root{ --peg-size:56px; --palette-size:48px; }
}

/* smaller devices: reduce peg size so layout fits comfortably */
@media(max-width:360px){
  :root{ --peg-size:40px; --palette-size:36px; --fb-size:12px; }
}

/* narrow layout adjustments: stack row pieces to avoid overflow */
@media(max-width:420px){
  /* On small screens: stack row vertically so buttons sit on their own line */
  .mm-row{flex-direction:column;align-items:stretch;gap:8px}
  .mm-row > .pegs{width:100%}
  .mm-row > .feedback{width:100%;justify-content:flex-end}
  .validate-btn,.clear-btn{margin-left:0}
  .mm-actions{width:100%;display:flex;gap:8px}
  .mm-actions .validate-btn, .mm-actions .clear-btn{flex:1;width:auto !important}
}

/* container queries: respond when the game container size changes (e.g., sidebar) */
@container (min-width:520px){
  .app{ --peg-size:56px; --palette-size:48px; }
}
@container (max-width:360px){
  .app{ --peg-size:40px; --palette-size:36px; --fb-size:12px; }
}
@container (max-width:420px){
  /* On small containers: stack row vertically so buttons sit on their own line */
  .mm-row{flex-direction:column;align-items:stretch;gap:8px}
  .mm-row > .pegs{width:100%}
  .mm-row > .feedback{width:100%;justify-content:flex-end}
  .validate-btn,.clear-btn{margin-left:0}
  .mm-actions{width:100%;display:flex;gap:8px}
  .mm-actions .validate-btn, .mm-actions .clear-btn{flex:1;width:auto !important}
}

/* keep `.app` sizing consistent so included instances match standalone mobile */
/* the main `.app` rule near the top defines `max-width:520px` and `container-type`. */

/* eliminated color overlay (X) on palette and picker swatches */
.palette .color, .picker .swatch{position:relative}
.palette .color.eliminated::after, .picker .swatch.eliminated::after{
  content:'✕';
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  color:rgba(255,255,255,0.95);
  font-weight:700; font-size:calc(1.1em);
  text-shadow:0 1px 0 rgba(0,0,0,0.6);
  pointer-events:none;
  mix-blend-mode:soft-light;
}

/* ensure action buttons stay inline and compact when container is narrow */
.validate-btn, .clear-btn, .btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.validate-btn.disabled, .clear-btn.disabled{opacity:0.5}

/* stronger override to counter host/global CSS that forces buttons full-width */
.app .validate-btn, .app .clear-btn, .app .btn{display:inline-flex !important; width:auto !important; max-width:none !important}

/* When buttons are inside .mm-actions, allow them to flex and share the line */
.mm-actions .validate-btn, .mm-actions .clear-btn{flex:1 !important; flex-basis:0 !important}

/* validation marker appended to a row */
.validation{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;padding:4px 6px;border-radius:8px;background:transparent}
.validation .check{display:inline-block;font-weight:700;color:var(--white);background:var(--accent);color:#042022;border-radius:6px;padding:2px 6px}

/* restore user's full-width fallback so included instances can expand if desired */
.app.fullwidth, .app[data-fullwidth="true"]{max-width:100vw;width:100%;padding:12px}

/* backwards-compat: if user previously relied on global override, also allow plain .app override (restore) */
.app.force-fullwidth{max-width:100vw;width:100%;padding:12px}