/* =================================================================== */
/* SynapSenseS Games CSS - Versione aggiornata                         */
/* =================================================================== */

:root {
  --brand1: #7c3aed;
  --brand2: #8b5cf6;
  --brand3: #06b6d4;
  --brand-grad: linear-gradient(100deg, var(--brand1), var(--brand2) 45%, var(--brand3));
  --text: #0f172a;
  --text-light: #e2e8f0;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --bg-panel: #11101b;
  --bg-input: #1b1a27;
  --bg-secondary: #161521;
  --bg-secondary-light: #161521bb;
  --border-color: #2d2c40;
  --border-color-light: #e2e8f0;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow: 0 14px 36px rgba(2, 6, 23, 0.25);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 20px rgba(124, 58, 237, 0.45);
  --title-shine-duration: 6s;
  --transition-fast: 0.12s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.35s ease;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --font-family: 'Lato', system-ui, sans-serif;
  --font-size-sm: 0.95rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.5rem;
  --line-height-base: 1.6;
}

/* Light Theme */
body.light {
  --bg-panel: #ffffff;
  --bg-input: #f1f5f9;
  --bg-secondary: #f8fafc;
  --bg-secondary-light: rgba(248, 250, 252, 0.8);
  --text-light: #0f172a;
  --text: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --shadow: 0 14px 36px rgba(100, 116, 139, 0.15);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: auto; min-height: 100svh; }
body {
  margin: 0; font-family: var(--font-family); color: var(--text-light);
  background: #eef2f6 url("/images/chat/lab-bg.jpg") center/cover fixed no-repeat;
  display: flex; 
  flex-direction: column; /* <-- AGGIUNGI QUESTO */
  align-items: center;    /* <-- CAMBIA QUESTO */
  justify-content: center; 
  padding: var(--spacing-md); overflow-x: hidden; line-height: var(--line-height-base);
}

/* Container */
.chat-container {
  width: min(100%, 1000px);
  min-height: calc(100svh - 32px);
  height: auto;
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: rgba(17, 16, 27, 0.85);
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--border-color); overflow: hidden; backdrop-filter: blur(8px);
}
body.light .chat-container { background: rgba(255,255,255,.9); border-color: var(--border-color-light); }

/* Header */
.chat-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--brand-grad); flex-shrink:0; box-shadow: var(--shadow-sm);
  position:relative; z-index:10;
}
.brand { display:flex; align-items:center; gap: var(--spacing-sm); }
.logo { width:36px; height:36px; display:block; }
h1.title { font-weight:900; font-size: var(--font-size-lg); color: var(--text-inverse); margin:0; position:relative; }
h1.title.title--gloss::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 15%, transparent 30%);
  background-size: 200% 100%; mix-blend-mode: screen; animation: gloss var(--title-shine-duration) linear infinite;
}
@keyframes gloss { from{background-position-x:200%} to{background-position-x:-200%} }
.head-actions { display:flex; align-items:center; gap: var(--spacing-xs); }

/* Buttons */
.action-btn {
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; text-decoration:none; font-weight:700;
  border-radius:999px; padding:10px 12px; background:rgba(255,255,255,.1); color:var(--text-inverse);
  border:1px solid rgba(255,255,255,.25); transition: transform var(--transition-fast), filter var(--transition-normal), background var(--transition-normal);
  backdrop-filter: blur(2px);
}
body.light .action-btn { color:var(--text); background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); }
.action-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.action-btn.brand { background: var(--brand-grad); border:0; color:var(--text-inverse); box-shadow: var(--shadow-lg), inset 0 0 1px rgba(255,255,255,.6); }
.action-btn.secondary { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
body.light .action-btn.secondary { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }

/* Theme Toggle */
.toggle { position:relative; display:inline-flex; align-items:center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:999px; cursor:pointer; transition:all var(--transition-normal);
  backdrop-filter: blur(2px); color:var(--text-inverse); font-weight:600; font-size: var(--font-size-sm); }
body.light .toggle { color:var(--text); background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
.toggle:hover { transform: translateY(-1px); }
.toggle .knob { position:relative; width:32px; height:18px; background: rgba(255,255,255,.3); border-radius:999px; transition: background-color var(--transition-normal); }
.toggle.on .knob { background: var(--brand3); }
.toggle .knob::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; background:white; border-radius:50%; transition: transform var(--transition-normal); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.toggle.on .knob::after { transform: translateX(14px); }
.toggle .sun,.toggle .moon{ position:absolute; top:50%; transform: translateY(-50%); transition: opacity var(--transition-normal); }
.toggle .sun{ left:2px; opacity:1;} .toggle .moon{ right:2px; opacity:0;} .toggle.on .sun{opacity:0;} .toggle.on .moon{opacity:1;}

/* Ripple */
.ripple{position:relative;overflow:hidden}
.ripple-ink{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.35);animation:rip .45s ease-out forwards;pointer-events:none;}
@keyframes rip{to{transform:scale(2.4);opacity:0}}

/* Accessibility */
.skip-link{ position:absolute; top:-40px; left:6px; background:var(--brand1); color:white; padding:8px; text-decoration:none; border-radius:4px; z-index:1000; transition: top var(--transition-normal); }
.skip-link:focus { top: 6px; }

/* Utility bar */
.utility-bar { display:flex; flex-wrap:wrap; gap:.25rem; padding:1rem 1.5rem; border-bottom:1px solid var(--border-color); background: var(--bg-secondary-light); backdrop-filter: blur(4px); }
body.light .utility-bar { background: var(--bg-secondary-light); border-color: var(--border-color-light); }
.chat-container { padding-bottom: 1.5rem; }
section[id$="-game"] { padding: 0 1.5rem; margin-top: 1.5rem; }
section[id$="-game"][hidden] { display:none !important; }

/* Panel */
.panel { padding:1rem; background: var(--bg-panel); border:1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel__content { padding:.5rem 0; }
body.light .panel { background: var(--bg-panel); border-color: var(--border-color); }

.game-title { font-size:1.6rem; font-weight:900; color:var(--text-light); margin:0 0 .5rem 0; padding-bottom:.5rem; border-bottom:1px solid var(--border-color); }
body.light .game-title { color:var(--text-light); border-bottom-color: var(--border-color); }

.status-bar { display:flex; align-items:center; gap:.5rem; justify-content:flex-start; margin:.25rem 0 .5rem; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; background: rgba(124,58,237,.15); border:1px solid #3d2f6b; font-weight:600; color: var(--text-light); }
.select { background:var(--bg-input); color:var(--text-light); border:1px solid var(--border-color); border-radius:10px; padding:.35rem .5rem; }
.control-label { opacity:.9; font-size:.9rem; margin-right:.25rem; }
.timer { margin-left:auto; opacity:.85; }
.controls { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }

/* Palazzo dei numeri */
.sequence { font: 900 1.6rem/1.3 'Lato', system-ui, sans-serif; letter-spacing:.06em; filter: blur(10px); transition: filter .2s ease; text-align:center; color: var(--brand3);
  padding:.5rem; background: var(--bg-input); border-radius: var(--radius-sm); }
.mnemonics { margin-top:.5rem; text-align:center; font-size:1.4rem; letter-spacing:.1em; color: var(--text-light); }
.feedback { margin-top:.5rem; color: var(--text-muted); }
#palace-answer { flex-grow:1; padding: var(--spacing-sm); border-radius:12px; border:1px solid var(--border-color); background:transparent; color:var(--text-light); font-family:inherit; outline:none; font-size:1rem; }
#palace-check { padding: var(--spacing-sm) var(--spacing-md); background: var(--brand1); color: var(--text-inverse); border:none; border-radius: var(--radius-sm); cursor:pointer; font-size:1rem; transition: background var(--transition-normal), transform var(--transition-fast); }
#palace-check:hover { background: var(--brand2); transform: translateY(-2px); }
.palace-tutorial { margin:.75rem 0; background: rgba(255,255,255,.05); border-radius:12px; border:1px solid var(--border-color); }
.palace-tutorial summary { padding:.75rem 1rem; font-weight:600; cursor:pointer; color: var(--brand3); }
.palace-tutorial div { padding:0 1rem 1rem 1rem; border-top:1px solid var(--border-color); }
.palace-tutorial h4 { margin:.75rem 0 .25rem 0; color: var(--text-light); }
.palace-tutorial p { margin:.25rem 0; }
.palace-tutorial ul { margin:.5rem 0; padding-left: 1.25rem; list-style-type:'» '; }
.palace-tutorial li { padding-left:.5rem; }

/* Memory Match */
.memory-grid { display:grid; grid-template-columns: repeat(4, minmax(60px,1fr)); gap:.5rem; padding:.5rem 0; }
.memory-grid[data-size="5x4"] { grid-template-columns: repeat(5, minmax(50px,1fr)); }
.memory-grid[data-size="6x6"] { grid-template-columns: repeat(6, minmax(40px,1fr)); }
.card-tile { width:100%; aspect-ratio:1/1; perspective:800px; }
.card-inner { position:relative; width:100%; height:100%; text-align:center; transition: transform .6s; transform-style: preserve-3d; cursor:pointer; }
.card-flipped .card-inner { transform: rotateY(180deg); }
.card-face { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--text-inverse); }
.card-front { background: var(--brand1); border:1px solid var(--brand2); }
.card-back { background: var(--bg-input); transform: rotateY(180deg); color: var(--brand3); border:1px solid var(--border-color); font-size:1.8rem; }
.card-tile.ok .card-back { background:#0a7f49; color:#fff; }

/* Stroop */
.stroop-word-display { font-size:3rem; font-weight:900; text-align:center; padding:2rem; margin:.5rem 0; user-select:none; text-shadow:0 0 10px rgba(0,0,0,.3); }
.stroop-controls { display:grid; grid-template-columns: repeat(2, 1fr); gap:.75rem; }
.stroop-btn { padding:1rem; font-size:1.25rem; font-weight:700; border:none; border-radius:12px; cursor:pointer; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); transition: transform .1s ease, box-shadow .1s ease; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.stroop-btn:active{ transform:scale(.97); box-shadow:0 2px 5px rgba(0,0,0,.2); }
.stroop-btn[data-color="red"]{background-color:#ef4444;}
.stroop-btn[data-color="green"]{background-color:#22c55e;}
.stroop-btn[data-color="blue"]{background-color:#3b82f6;}
.stroop-btn[data-color="yellow"]{background-color:#eab308;color:#333;}

/* Anagrammi */
.anagram-word-display { font-size:2.5rem; font-weight:600; text-align:center; letter-spacing:.15em; padding:1.5rem; margin:.5rem 0; user-select:none; color: var(--brand3); background: var(--bg-input); border-radius:12px; }
#anagram-answer { flex-grow:1; padding: var(--spacing-sm); border-radius:12px; border:1px solid var(--border-color); background:transparent; color:var(--text-light); font-family:inherit; outline:none; font-size:1rem; text-transform:uppercase; }
#anagram-check { padding: var(--spacing-sm) var(--spacing-md); background: var(--brand1); color: var(--text-inverse); border:none; border-radius: var(--radius-sm); cursor:pointer; font-size:1rem; transition: background var(--transition-normal), transform var(--transition-fast); }
#anagram-check:hover { background: var(--brand2); transform: translateY(-2px); }

/* Sequenze */
.sequences-display { font-size:2.5rem; font-weight:600; text-align:center; letter-spacing:.1em; padding:1.5rem; margin:.5rem 0; user-select:none; color: var(--brand3); background: var(--bg-input); border-radius:12px; }
#sequences-answer { flex-grow:1; padding: var(--spacing-sm); border-radius:12px; border:1px solid var(--border-color); background:transparent; color:var(--text-light); font-family:inherit; outline:none; font-size:1rem; }
#sequences-check { padding: var(--spacing-sm) var(--spacing-md); background: var(--brand1); color: var(--text-inverse); border:none; border-radius: var(--radius-sm); cursor:pointer; font-size:1rem; transition: background var(--transition-normal), transform var(--transition-fast); }
#sequences-check:hover { background: var(--brand2); transform: translateY(-2px); }

/* Switch Sort */
.switch-stage { text-align:center; padding: .75rem 0 1rem 0; }
.switch-cue { font-weight:900; letter-spacing:.06em; display:inline-block; padding:.35rem .8rem; border-radius:999px; margin-bottom:.5rem; border:2px solid var(--border-color);
  background: rgba(6,182,212,.18); color: var(--text-light); box-shadow: 0 0 0 3px rgba(6,182,212,.1); }
.switch-mapping { font-weight:800; margin-bottom:.65rem; color: var(--text-light); font-size:1.05rem; }
.switch-item { font-size:3.2rem; font-weight:900; text-align:center; padding:1.5rem; user-select:none; background: var(--bg-input); border-radius: 16px; color: var(--brand3);
  box-shadow: inset 0 0 0 1px var(--border-color); min-height: 4rem;}
.switch-controls { display:flex; justify-content:center; gap:.75rem; margin-top: .75rem; }
.prominent { filter: drop-shadow(0 0 12px rgba(6,182,212,.25)); }

/* Light adjustments */
body.light .sequence, body.light .anagram-word-display, body.light .sequences-display, body.light .switch-item { background:#f8fafc; color: var(--brand1); }
body.light .badge { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.2); color:#5b21b6; }
body.light .select { background: var(--bg-input); color: var(--text); border-color: var(--border-color); }

/* Responsive */
@media (max-width: 768px) {
  body { padding: var(--spacing-xs); align-items:flex-start; }
  .chat-container { height:auto; min-height: calc(100svh - 16px); border-radius: var(--radius-sm); }
  .chat-header { padding: var(--spacing-sm) var(--spacing-md); }
  h1.title { font-size:1.25rem; }
  .utility-bar { padding: var(--spacing-xs) var(--spacing-md); flex-wrap:wrap; gap: var(--spacing-xs); }
  section[id$="-game"] { padding: 0 var(--spacing-md); margin-top: var(--spacing-md); }
  .action-btn { padding: 8px 12px; font-size: var(--font-size-sm); }
  .stroop-controls { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .head-actions .action-btn { padding:6px 10px; font-size:.875rem; }
}