/* Bahamas theme for "L'île aux cochons" */
:root{
  --radius: 14px;
  --shadow: 0 10px 26px rgba(0,0,0,.22);
  --focus: 0 0 0 3px rgba(28,202,216,.32);

  /* Base palette: turquoise, sand, gold, palm green, black/white, optional pink */
  --accent: #1ccad8;   /* turquoise */
  --accent-2: #f6c945; /* gold */
  --accent-3: #1faf7a; /* palm green */
  --pink: #ff7db3;     /* optional accents */

  --bg: radial-gradient(1200px 700px at 0% -10%, rgba(28,202,216,.25) 0%, transparent 55%),
        radial-gradient(900px 600px at 120% 10%, rgba(246,201,69,.18) 0%, transparent 55%),
        linear-gradient(180deg, #0b1014, #0d1618 75%);
  --card: rgba(255,255,255,.06);
  --surface: rgba(255,255,255,.07);
  --surface-strong: rgba(255,255,255,.12);
  --text: #eaf4f5;
  --text-strong: #ffffff;
  --muted: #afc5c6;
  --border: rgba(255,255,255,.12);
  --danger: #ff7a7a;
  --success: #3dd99b;
}

[data-theme="light"]{
  --bg: radial-gradient(1200px 700px at 0% -10%, rgba(28,202,216,.18) 0%, transparent 55%),
        radial-gradient(900px 600px at 120% 10%, rgba(246,201,69,.14) 0%, transparent 55%),
        linear-gradient(180deg, #f7fbff, #eef6f7);
  --card: #ffffff;
  --surface:#f4f8f9;
  --surface-strong:#e9f0f1;
  --text:#0f2226;
  --text-strong:#0c1618;
  --muted:#5d6f72;
  --border: rgba(5,44,48,.14);
  --shadow: 0 8px 22px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; color:var(--text); background: var(--bg) fixed;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Decorative wrapper */
.bahamas-border{ position:relative; border:1px solid var(--border); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }

header{ padding: clamp(28px, 6vw, 56px) 20px clamp(12px, 3vw, 20px); text-align:center; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.title{ font-family: "Baloo 2", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:800; font-size: clamp(26px, 5vw, 46px); margin:0 0 8px; color: var(--accent); letter-spacing:.01em; text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.subtitle{ color:var(--muted); margin:0 auto; max-width:900px; font-size: clamp(14px, 2.2vw, 18px); line-height:1.6 }

main{ max-width:1600px; margin:22px auto; padding: 0 16px 80px; }
@media (max-width: 640px){ main{ margin: 14px auto; padding: 0 12px 64px; } }

.screen{display:none}
.screen.active{display:block}

.card{ padding:22px; border-radius: var(--radius); }
@media (max-width: 640px){ .card{ padding:16px; } }

/* Toolbar */
.toolbar{ position:sticky; top:0; z-index:10; display:flex; gap:6px; padding:8px; background: var(--card); border-bottom:1px solid var(--border); backdrop-filter: blur(8px); flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
[data-theme="light"] .toolbar{ background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); }
[data-theme="dark"] .toolbar{ background: linear-gradient(180deg, rgba(13,22,24,.9), rgba(10,16,18,.88)); }
.spacer{ flex:1 }

/* Buttons */
.btn{ cursor:pointer; display:inline-flex; align-items:center; gap:8px; 
      border:1px solid var(--border); color:var(--text-strong); background: var(--surface);
      padding:10px 16px; border-radius:10px; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; 
      font-size:15px; font-weight:700; text-decoration:none; }
.btn:hover{ background: var(--surface-strong); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus{ outline:none; box-shadow: var(--focus); }
.btn.primary{ background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff 0%), color-mix(in srgb, var(--accent) 70%, #000 0%)); color:#052b2e; border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.btn.success{ border-color: color-mix(in srgb, var(--success) 65%, var(--border)); color:var(--text-strong); background: color-mix(in srgb, var(--success) 18%, transparent); }
.btn.danger{ border-color: color-mix(in srgb, var(--danger) 65%, var(--border)); color:var(--text-strong); background: color-mix(in srgb, var(--danger) 18%, transparent); }
.btn.small{ padding:6px 10px; font-size:13px; border-radius:8px }
.btn:disabled{ opacity:.6; cursor:not-allowed; filter: grayscale(25%) }
@media (max-width: 640px){ .toolbar .btn{ padding:8px 10px; font-size:14px; border-radius:8px; min-width:44px; justify-content:center } .toolbar .btn-text{ display:none } }

/* Story */
.story h2{ margin:.2rem 0 1rem; color:var(--accent); font-weight:800; font-family: "Baloo 2", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing:.01em }
.story p{ line-height:1.85; font-size: clamp(16px, 2.2vw, 18px); }
.story .images{ display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:12px; margin:14px 0 }
.story img{ width:100%; max-height:30vh; object-fit:contain; border-radius:10px; border:1px solid var(--border); background:#00000010 }

.meta{ display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:13px }
.tag{ padding:3px 8px; border-radius:1rem; border:1px solid var(--border); background: var(--surface); font-weight:700 }

/* Options */
.options{ display:grid; gap:10px; margin-top:12px }
.option{ width:100%; text-align:left }
.option-row{ display:grid; gap:6px }
.option-msg{ font-size:12px; color:var(--danger); display:flex; align-items:center; gap:6px; font-weight:700 }

/* Panels */
.panel{ padding:16px; border-radius: var(--radius); background: var(--card) }
.panel h3{ margin:0 0 8px; font-size:16px; color:var(--accent-2); font-weight:800; font-family: "Baloo 2", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Assets grid (chips) */
.status-assets{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.asset-chip{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background: var(--surface); cursor:pointer; transition: transform .16s ease, box-shadow .16s ease }
.asset-chip:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.2) }
.asset-chip .emoji{ font-size:20px }
.asset-chip .name{ font-weight:700 }
.asset-chip .cat{ font-size:11px; color:var(--muted) }
/* Gray-out for not-yet-found entries */
.status-assets .asset-chip.off{ opacity:.55; filter: grayscale(75%); }
.status-assets .asset-chip.off .name{ color: var(--muted); }
.status-assets .asset-chip.off .emoji{ opacity:.7 }

/* Thumbnails for asset chips */
.asset-chip{ position:relative }
.asset-chip .thumb{ width:32px; height:32px; object-fit:contain; border-radius:6px; border:1px solid var(--border); background:#00000010 }
.asset-chip .emoji{ width:32px; height:32px; display:flex; align-items:center; justify-content:center }

.epreuve {padding:1rem;}

.actions {margin-top: 1rem;}
.actions .btn.success{margin-right:1rem;}

/* TTS panel */
.tts-panel{ position:fixed; top:64px; right:16px; width:320px; max-width:92vw; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:12px; display:none; z-index:20 }
.tts-panel.active{ display:block }
.tts-row{ display:grid; gap:6px; margin:8px 0 }
.tts-row label{ font-size:12px; color:var(--muted); font-weight:700 }
.tts-controls{ display:flex; gap:8px; flex-wrap:wrap }
select.tts-select, input[type="range"].tts-range{ width:100%; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px; font-size: 14px }
.tts-note{ font-size:12px; color:var(--muted) }

/* Stronger contrast for TTS panel in dark mode */
[data-theme="dark"] .tts-panel{
  background: rgba(13,22,24,.96); /* much less transparent for readability */
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
[data-theme="dark"] .tts-panel select.tts-select,
[data-theme="dark"] .tts-panel input[type="range"].tts-range{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* Asset modal */
.asset-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; z-index:100; padding: 16px }
.asset-modal-backdrop.active{ display:flex }
.asset-modal{ width:min(1100px, 96vw); max-height:92vh; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); overflow:hidden }
.asset-modal header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); background: var(--surface) }
.asset-modal .body{ display:grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr; height: 100% }
.asset-modal .image-wrap{ padding:0; display:flex; align-items:center; justify-content:center; background: var(--surface) }
.asset-modal .image-wrap .emoji{ font-size: 92px }
.asset-modal .info{ padding:14px; display:grid; gap:10px }
.asset-modal .desc{ color:var(--muted); line-height:1.7 }
.asset-image{ display:block; width:100%; height:auto; max-height: calc(92vh - 64px); object-fit: contain; background:#00000018 }

/* Force strong background in dark theme for readability */
[data-theme="dark"] .asset-modal{ background: rgba(13,22,24,.98); border-color: rgba(255,255,255,.20); box-shadow: 0 16px 48px rgba(0,0,0,.6); }
[data-theme="dark"] .asset-modal header{ background: rgba(255,255,255,.08); border-bottom-color: rgba(255,255,255,.22) }
[data-theme="dark"] .asset-modal .image-wrap{ background: rgba(0,0,0,.65) }
[data-theme="dark"] .asset-modal .desc{ color:#cfe5e7 }

/* On very small screens keep padding reasonable */
@media (max-width: 640px){
  .asset-modal{ width:96vw; max-height:92vh }
  .asset-image{ max-height: calc(92vh - 120px) }
}

/* Notices & footer */
.notice{ padding:12px 14px; border-left:4px solid var(--accent-2); background: color-mix(in srgb, var(--accent-2) 16%, transparent); border-radius:8px; color:var(--text); margin:10px 0; font-weight:700 }
.footer{ text-align:center; color:var(--muted); font-size:12px; padding:24px }

/* Progress bar */
.top-progress{ position:fixed; top:0; left:0; right:0; height:3px; background: transparent; z-index:1000; overflow:hidden; opacity:0; transition: opacity .2s ease; pointer-events:none }
.top-progress.active{ opacity:1 }
.top-progress::before{ content:""; display:block; height:100%; width:42%; background: var(--accent); filter: drop-shadow(0 0 8px rgba(0,0,0,.25)); animation: jdvelh-progress 1.15s infinite ease-in-out }
@keyframes jdvelh-progress{ 0%{ transform: translateX(-110%) } 50%{ transform: translateX(40%) } 100%{ transform: translateX(110%) } }

/* Grid */
.grid{ display:grid; gap:16px }
.layout{ grid-template-columns: 1.15fr .85fr }
@media (max-width: 900px){ .layout{ grid-template-columns: 1fr } }
@media (max-width: 640px){ .grid{ gap:12px } }

/* Mobile */
@media (max-width: 360px){ .toolbar .btn{ padding:4px 6px; font-size:14px; min-width:38px } .title{ font-size:22px } .subtitle{ font-size:13px } .story p{ font-size:15px; line-height:1.65 } .panel h3{ font-size:14px } }

/* --- Toasts (Bahamas style) --- */
#toast-host{ position: fixed; right: 16px; top: 72px; display: grid; gap: 10px; z-index: 2000; max-width: min(420px, 92vw) }
.toast{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background: var(--card); box-shadow: var(--shadow); opacity:0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease }
.toast.show{ opacity:1; transform: translateY(0) }
.toast .icon{ font-size:18px; margin-top:2px }
.toast .body{ display:grid; gap:4px; min-width:0 }
.toast .t-title{ font-weight:800; letter-spacing:.01em }
.toast .t-msg{ color: var(--muted); font-size: 13px }
.toast.success{ border-color: color-mix(in srgb, var(--success) 55%, var(--border)); background: color-mix(in srgb, var(--success) 14%, transparent) }
.toast.danger{ border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: color-mix(in srgb, var(--danger) 14%, transparent) }
.toast.info{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent) }

@media (max-width: 640px){ #toast-host{ top: 58px; right: 8px; left: 8px; max-width: 100% } }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation: none !important } }