/* Fonts loaded via <link> */

/* Design tokens */
:root{
    /* Spacing & effects */
    --radius: 14px;
    --shadow: 0 10px 28px rgba(0,0,0,.28);
    --focus: 0 0 0 3px rgba(56,189,179,.35);

    /* Defaults will be set via prefers-color-scheme; attribute rules override. */
    --bg: linear-gradient(180deg, #0e1213, #111a1b);
    --card: rgba(255,255,255,0.06);
    --surface: rgba(255,255,255,0.07);
    --surface-strong: rgba(255,255,255,0.12);
    --text: #e9f1f0;
    --text-strong: #ffffff;
    --muted: #a2b7b6;
    --accent: #36cfc6;   /* Turquoise, couleur précieuse */
    --accent-2: #e4c674; /* Or, second accent */
    --border: rgba(255,255,255,0.12);
    --danger:#ff7a7a;
    --success:#3dd99b;
}

/* Auto theme when no data-theme is set */
@media (prefers-color-scheme: light){
    :root{
    --bg: radial-gradient(1200px 700px at 10% -10%, #c2f1ef3a 0%, transparent 55%),
            radial-gradient(900px 600px at 120% 10%, #ffe6b83a 0%, transparent 55%),
            linear-gradient(180deg, #f7faf9, #eef3f2);
    --card:#ffffff;
    --surface:#f3f7f6;
    --surface-strong:#e9efee;
    --text:#132322;
    --text-strong:#0e1716;
    --muted:#5f7070;
    --accent:#1ea8a2;
    --accent-2:#8b6a1d;
    --border: rgba(12,39,38,0.15);
    --danger:#c53030;
    --success:#2d7d5e;
    --focus: 0 0 0 3px rgba(30,168,162,.28);
    }
}
@media (prefers-color-scheme: dark){
    :root{
    --bg: radial-gradient(1200px 650px at 15% -10%, #0a2c2b66 0%, transparent 60%),
            radial-gradient(1100px 600px at 120% 0%, #1a150b66 0%, transparent 60%),
            linear-gradient(180deg, #0b0f10, #101617 75%);
    --card: rgba(255,255,255,0.06);
    --surface: rgba(255,255,255,0.07);
    --surface-strong: rgba(255,255,255,0.12);
    --text:#e9f1f0;
    --text-strong:#ffffff;
    --muted:#9fb3b2;
    --accent:#36cfc6;
    --accent-2:#e4c674;
    --border: rgba(255,255,255,0.12);
    --danger:#ff7a7a;
    --success:#3dd99b;
    --focus: 0 0 0 3px rgba(54,207,198,.35);
    }
}

/* Explicit theme overrides via attribute (user toggle) */
[data-theme="light"]{
    --bg: radial-gradient(1200px 700px at 10% -10%, #c2f1ef3a 0%, transparent 55%),
            radial-gradient(900px 600px at 120% 10%, #ffe6b83a 0%, transparent 55%),
            linear-gradient(180deg, #f7faf9, #eef3f2);
    --card:#ffffff;
    --surface:#f3f7f6;
    --surface-strong:#e9efee;
    --text:#132322;
    --text-strong:#0e1716;
    --muted:#5f7070;
    --accent:#1ea8a2;
    --accent-2:#8b6a1d;
    --border: rgba(12,39,38,0.15);
    --danger:#c53030;
    --success:#2d7d5e;
    --focus: 0 0 0 3px rgba(30,168,162,.28);
    --shadow: 0 10px 24px rgba(0,0,0,.12);
}
[data-theme="dark"]{
    --bg: radial-gradient(1200px 650px at 15% -10%, #0a2c2b66 0%, transparent 60%),
            radial-gradient(1100px 600px at 120% 0%, #1a150b66 0%, transparent 60%),
            linear-gradient(180deg, #0b0f10, #101617 75%);
    --card: rgba(255,255,255,0.06);
    --surface: rgba(255,255,255,0.07);
    --surface-strong: rgba(255,255,255,0.12);
    --text:#e9f1f0;
    --text-strong:#ffffff;
    --muted:#9fb3b2;
    --accent:#36cfc6;
    --accent-2:#e4c674;
    --border: rgba(255,255,255,0.12);
    --danger:#ff7a7a;
    --success:#3dd99b;
    --focus: 0 0 0 3px rgba(54,207,198,.35);
    --shadow: 0 10px 28px rgba(0,0,0,.28);
}

*{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;
}

/* Clean aztec border: minimal, refined */
.aztec-border{ position:relative; border:1px solid var(--border); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.aztec-border:before, .aztec-border:after{ content:none; }

header{ padding: clamp(28px, 6vw, 56px) 20px clamp(14px, 3vw, 22px); text-align:center; background: linear-gradient(180deg, var(--surface), transparent 70%); }
.title{ font-family: Cinzel, ui-serif, Georgia, serif; font-weight:700; font-size: clamp(26px, 5vw, 46px); margin:0 0 10px; color: var(--accent-2); letter-spacing:.02em; text-shadow: 0 2px 10px 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.55; }

main{ max-width:1800px; 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); background: var (--card); color: var(--text) }
@media (max-width: 640px){ .card{ padding:16px; } }

/* 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:600; text-decoration:none; }
.btn:hover{ background: var(--surface-strong); border-color: var (--accent); 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); }
/* Fallback background, then enhanced gradient for modern browsers */
.btn.primary{ background: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, #fff 0%), color-mix(in srgb, var(--accent) 70%, #000 0%)); color:#0f1414; border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.btn.primary:hover{ filter: brightness(1.05); }
.btn.success{ border-color: var(--success); border-color: color-mix(in srgb, var(--success) 65%, var(--border)); color:var(--text-strong); background: var(--surface-strong); background: color-mix(in srgb, var(--success) 18%, transparent); }
.btn.success:hover{ background: var(--surface-strong); background: color-mix(in srgb, var(--success) 25%, transparent); }
.btn.danger{ border-color: var (--danger); border-color: color-mix(in srgb, var(--danger) 65%, var(--border)); color:var(--text-strong); background: var(--surface-strong); background: color-mix(in srgb, var(--danger) 18%, transparent); }
.btn.danger:hover{ background: var(--surface-strong); background: color-mix(in srgb, var(--danger) 25%, transparent); }
.btn.small{ padding:6px 10px; font-size:13px; border-radius:8px }
.btn:disabled{ opacity:.6; cursor:not-allowed; filter: grayscale(25%) }

/* Inputs */
.input{ width:100%; padding:12px 12px; border-radius:10px; border:1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; transition: all .15s ease; }
.input:focus{ outline:none; box-shadow: var(--focus); border-color: var(--accent); }
@media (max-width: 640px){ .input{ font-size:16px; } }

/* Grid & layout */
.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 } }

/* Story */
.story h2{ margin:.2rem 0 1rem; color:var(--accent); font-weight:700; font-family: Cinzel, ui-serif, Georgia, serif; letter-spacing:.02em }
.story p{ line-height:1.85; font-size: clamp(16px, 2.2vw, 18px); }
.story .images{ display:grid; grid-template-columns: repeat(auto-fill, minmax(350px, 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 }


/* 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:600 }

/* 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:700; font-family: Cinzel, ui-serif, Georgia, serif }
.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:600 }

/* Epreuves */
.epreuve{ padding:12px; border-radius:10px; margin:8px 0; border:1px dashed var(--border); background: var(--surface) }
.epreuve .actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }

@media (max-width: 640px){ .epreuve{ padding:10px; margin:6px 0 } .epreuve .actions{ gap:6px } .epreuve .actions .btn{ flex:1; min-width:0; justify-content:center }}

/* 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="dark"] .toolbar{ background: linear-gradient(180deg, rgba(15,22,23,.88), rgba(11,17,18,.88)); }
[data-theme="light"] .toolbar{ background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); }
@supports (color: color-mix(in srgb, #000 50%, #fff)){
    .toolbar{ background: color-mix(in srgb, var(--card) 72%, #000 28%); }
}
@media (max-width: 640px){ .toolbar{ gap:4px; padding:6px 4px } .toolbar .btn{ padding:8px 10px; font-size:14px; border-radius:8px; min-width:44px; justify-content:center } .toolbar .btn-text{ display:none } }
@media (max-width: 480px){ .toolbar .btn{ padding:6px 8px; font-size:16px; gap:0; min-width:42px } }

.spacer{ flex:1 }

.notice{ padding:12px 14px; border-left:4px solid var(--accent-2); background: var(--surface); background: color-mix(in srgb, var(--accent-2) 16%, transparent); border-radius:8px; color:var(--text); margin:10px 0; font-weight:600 }

.footer{ text-align:center; color:var(--muted); font-size:12px; padding:24px }
@media (max-width: 640px){ .footer{ padding:16px; font-size:11px } }

/* Status */
.status{ display:flex; gap:12px; align-items:center; flex-wrap: wrap }
.status .tile{ flex:1; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background: var(--surface); min-width:0 }
.status .tile .icon{ font-size:22px; flex-shrink:0 }
.ok{ color: var(--success) }
.no{ color: var(--danger) }
@media (max-width: 640px){ .status{ gap:8px } .status .tile{ padding:8px 10px; gap:8px } .status .tile .icon{ font-size:20px } }

/* Status assets */
.status-assets{ display:grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap:10px; margin-top:12px }
.status-asset{ position:relative; border:1px solid var(--border); background: var(--surface); border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:6px; cursor:pointer; transition: transform .18s ease, filter .2s ease, opacity .2s ease }
.status-asset img{ width:100%; height:64px; object-fit:contain; display:block; filter:none; opacity:1; transition:.2s }
.status-asset.off img{ filter: grayscale(100%) brightness(.6); opacity:.6 }
.status-asset .label{ position:absolute; inset:auto 6px 6px auto; font-size:10px; color:var(--text-strong); background: rgba(0,0,0,.55); padding:2px 6px; border-radius:999px; border: 1px solid var(--border); backdrop-filter: blur(4px); font-weight:700 }
.status-asset:not(.off){ border-color: var(--success); border-color: color-mix(in srgb, var(--success) 65%, var(--border)); box-shadow: 0 0 0 1px rgba(61,217,155,.25) }
.status-asset.off{ border-color: var(--danger); border-color: color-mix(in srgb, var(--danger) 65%, var(--border)); box-shadow: 0 0 0 1px rgba(255,122,122,.22) }
.status-asset:not(.off):hover{ transform: translateY(-2px) }
.status-asset:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.28) }
@media (max-width: 640px){ .status-assets{ grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap:8px } .status-asset img{ height:48px } .status-asset .label{ font-size:9px; padding:1px 4px } }

/* 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:600 }
.tts-controls{ display:flex; gap:8px; flex-wrap:wrap }
.tts-panel .btn{ padding:6px 10px; font-size:13px }
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) }
@media (max-width: 640px){ .tts-panel{ top:56px; right:8px; left:8px; width:auto; max-width:none } .tts-controls .btn{ flex:1; min-width:0; font-size:12px } }

/* Take-items */
.takeitems{ display:grid; gap:10px; margin:12px 0 }
.take-row{ display:grid; gap:6px }
.take-msg{ font-size:12px; color:var(--muted); font-weight:600 }

/* Asset preview 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(820px, 92vw); max-height:90vh; 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-columns: 1.1fr .9fr; gap:0; height: 100% }
@media (max-width: 780px){ .asset-modal .body{ grid-template-columns: 1fr } }
.asset-modal .image-wrap{ padding:12px; display:flex; align-items:center; justify-content:center; background: var(--surface) }
.asset-modal .image-wrap img{ max-width:100%; max-height:68vh; object-fit:contain; border-radius:8px; border:1px solid var(--border); background:#00000010 }
.asset-modal .info{ padding:14px; display:grid; gap:10px }
.asset-modal .desc{ color:var(--muted); line-height:1.6 }
@media (max-width: 640px){ .asset-modal-backdrop{ padding:8px } .asset-modal{ width:100%; max-height:95vh } .asset-modal header{ padding:8px 10px } .asset-modal .image-wrap{ padding:8px } .asset-modal .image-wrap img{ max-height:50vh } .asset-modal .info{ padding:10px; gap:8px } }

/* Dark mode: make modals/panels opaque for readability */
@media (prefers-color-scheme: dark){
  .asset-modal{ background: rgba(18,24,25,.96); border-color: rgba(255,255,255,.16); }
  .asset-modal header{ background: linear-gradient(180deg, rgba(22,28,29,.98), rgba(18,24,25,.96)); border-bottom-color: rgba(255,255,255,.12); }
  .asset-modal .image-wrap{ background: rgba(16,22,23,.9); }
  .tts-panel{ background: rgba(18,24,25,.96); border-color: rgba(255,255,255,.16); }
}
[data-theme="dark"] .asset-modal{ background: rgba(18,24,25,.96); border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .asset-modal header{ background: linear-gradient(180deg, rgba(22,28,29,.98), rgba(18,24,25,.96)); border-bottom-color: rgba(255,255,255,.12); }
[data-theme="dark"] .asset-modal .image-wrap{ background: rgba(16,22,23,.9); }
[data-theme="dark"] .tts-panel{ background: rgba(18,24,25,.96); border-color: rgba(255,255,255,.16); }

/* Mobile refinements */
@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 } .status-assets{ grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap:6px } .status-asset img{ height:40px } }

/* Accessibility */
@media (max-width: 640px){ .btn{ min-height:44px; touch-action: manipulation } .status-asset{ min-height:44px; min-width:44px } .story h2{ font-size: clamp(18px, 4vw, 24px); margin: .5rem 0 1.1rem } }

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

/* Victory */
.win-banner{ margin:16px 0 8px; padding:14px; border-radius:12px; border:1px solid var(--border); background: var(--surface); background: radial-gradient(120% 120% at 10% 10%, color-mix(in srgb, var(--success) 18%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent) 60%, transparent 120%); box-shadow: inset 0 6px 18px rgba(0,0,0,.25); display:flex; align-items:center; gap:12px }
.win-banner .icon{ font-size:28px; color: var(--success); filter: drop-shadow(0 2px 6px rgba(61,217,155,.35)); }
.win-banner .title{ font-weight:800; color: var(--text-strong) }
.win-banner .subtitle{ color: var(--muted); font-size: 14px }
.win-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }

/* Top indeterminate progress bar (non-blocking) */
.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.2s infinite ease-in-out }
@keyframes jdvelh-progress{ 0%{ transform: translateX(-110%) } 50%{ transform: translateX(40%) } 100%{ transform: translateX(110%) } }

/* Toasts */
.toasts{ position: fixed; inset: auto 12px 12px auto; display:flex; flex-direction:column; gap:10px; z-index: 9999; max-width: min(92vw, 520px); }
.toast{ display:flex; gap:10px; align-items:flex-start; padding:12px 12px; border-radius:12px; border:1px solid var(--border); background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(6px); animation: jdvelh-fade-in .18s ease-out; position: relative; overflow:hidden; flex-wrap: wrap; padding-right: 36px; }
.toast .icon{ font-size:18px; line-height:1; margin-top:2px; color: var(--accent-2) }
.toast .content{ flex:1 1 220px; min-width:0 }
.toast .title{ font-weight:700; margin-bottom:2px }
.toast .msg{ color: var(--muted); font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.toast .thumbs{ display:flex; gap:6px; margin-left: 0; margin-top: 6px; flex-wrap: wrap; flex-basis: 100%; }
.toast .thumbs img{ width:44px; height:44px; object-fit:contain; border-radius:8px; border:1px solid var(--border); background: #00000010 }
.toast .close{ appearance:none; border:none; background:transparent; color:var(--muted); cursor:pointer; padding:4px; border-radius:8px; position:absolute; top:6px; right:6px }
.toast .close:hover{ color:var(--text) }
.toast.success{ border-color: color-mix(in srgb, var(--success) 60%, var(--border)); background: color-mix(in srgb, var(--success) 12%, transparent); }
.toast.danger{ border-color: color-mix(in srgb, var(--danger) 60%, var (--border)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.toast.info{ border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.toast.hide{ opacity:0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease }

/* Subtle pulse when status assets toggle */
.status-assets .status-asset{ transition: transform .18s ease, filter .2s ease, opacity .2s ease }
.status-assets .status-asset.off{ filter: grayscale(.7) opacity(.7) }
.status-assets .status-asset:not(.off):hover{ transform: translateY(-2px) }

/* Journal rows style */
#journal > div{ padding:6px 8px; border-radius:8px; background: var(--surface); border:1px solid var(--border); }