/* =====================================================================
   Bilingo — Feuille de style
   Design « edu-tech » chaleureux : clair/sombre, boutons tactiles,
   grille 8pt, micro-animations, accessible et responsive.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg:        #f4f5fb;
  --bg-grad-1: rgba(99,102,241,0.10);
  --bg-grad-2: rgba(236,72,153,0.08);
  --surface:   #ffffff;
  --surface-2: #f7f8fc;
  --elevated:  #ffffff;
  --text:      #1c1d2b;
  --text-2:    #5a5d72;
  --text-3:    #9498ad;
  --border:    #e7e8f0;
  --border-2:  #d9dbe7;

  --primary:   #6366f1;
  --primary-d: #4f46e5;
  --primary-ink:#ffffff;
  --accent:    #ec4899;
  --amber:     #f59e0b;
  --green:     #10b981;
  --green-d:   #059669;
  --red:       #ef4444;
  --red-d:     #dc2626;
  --sky:       #0ea5e9;
  --track:     #e7e8f2;

  --ok-bg:     #e9f9f1;
  --ok-bd:     #9be7c4;
  --ko-bg:     #fdecec;
  --ko-bd:     #f5b5b5;
  --typo-bg:   #fff6e6;
  --typo-bd:   #f6d690;

  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 26px; --r-full: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --shadow-sm: 0 1px 2px rgba(28,29,43,0.06);
  --shadow:    0 6px 20px rgba(28,29,43,0.07);
  --shadow-lg: 0 16px 44px rgba(28,29,43,0.12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --maxw: 680px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

[data-theme="dark"] {
  --bg:        #0e0f1a;
  --bg-grad-1: rgba(99,102,241,0.16);
  --bg-grad-2: rgba(236,72,153,0.10);
  --surface:   #181a2a;
  --surface-2: #14152233;
  --elevated:  #1e2034;
  --text:      #f0f1f8;
  --text-2:    #a9adc6;
  --text-3:    #71748f;
  --border:    #282b42;
  --border-2:  #343856;
  --track:     #282b42;
  --ok-bg:     #11291f;
  --ok-bd:     #1f6b48;
  --ko-bg:     #2c1518;
  --ko-bd:     #7e3036;
  --typo-bg:   #2c2410;
  --typo-bd:   #7a5d1e;
  --primary-ink:#ffffff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 44px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(60% 50% at 12% -8%, var(--bg-grad-1) 0%, transparent 60%),
    radial-gradient(54% 42% at 100% 0%, var(--bg-grad-2) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  max-width: var(--maxw); margin: 0 auto;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; letter-spacing: -0.02em; font-size: 19px; background: none; border: 0; color: var(--text); }
.brand-logo { font-size: 24px; }
.brand-name { background: linear-gradient(120deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metrics { display: flex; align-items: center; gap: var(--sp-2); }
.metric { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: 6px 10px; border-radius: var(--r-full); box-shadow: var(--shadow-sm); }
.metric b { color: var(--text); }
.metric.streak b { color: var(--amber); }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); font-size: 16px; box-shadow: var(--shadow-sm); transition: transform .15s var(--spring); }
.icon-btn:hover { transform: translateY(-1px); }

/* ---------- App container & tabs ---------- */
.app { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-2) var(--sp-4) 96px; }
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) ;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}
.tab { flex: 1; max-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 0; background: none; color: var(--text-3); border-radius: var(--r); font-size: 11px; font-weight: 600; transition: color .15s, background .15s; }
.tab-ic { font-size: 20px; line-height: 1; filter: grayscale(0.4); transition: filter .15s, transform .15s var(--spring); }
.tab--active { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.tab--active .tab-ic { filter: none; transform: translateY(-1px); }
[data-session="1"] .tabs { display: none; }
[data-session="1"] .app { padding-bottom: var(--sp-4); }

/* ---------- Primitives ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4); }
.h-title { font-size: clamp(24px, 5vw, 30px); font-weight: 800; letter-spacing: -0.03em; margin: 8px 0 4px; }
.h-sub { color: var(--text-2); margin: 0 0 var(--sp-5); font-size: 15px; }
.bar { height: 12px; background: var(--track); border-radius: var(--r-full); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .6s var(--ease); }

.btn { border: 0; border-radius: var(--r); font-weight: 700; font-size: 15px; padding: 14px 20px; transition: transform .08s, box-shadow .12s, filter .15s; }
.btn-block { display: block; width: 100%; }
.btn-primary { background: linear-gradient(180deg, var(--primary), var(--primary-d)); color: var(--primary-ink); box-shadow: 0 4px 0 var(--primary-d), var(--shadow); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-d); }
.btn-ghost { background: var(--surface); color: var(--primary); border: 2px solid var(--border-2); box-shadow: 0 4px 0 var(--border); }
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }
.btn-soft { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.btn-soft:hover { color: var(--text); }
.danger-soft { color: var(--red); margin-top: var(--sp-2); }

.spk { border: 1px solid var(--border); background: var(--surface); color: var(--primary); border-radius: var(--r-full); width: 32px; height: 32px; display: inline-grid; place-items: center; font-size: 14px; vertical-align: middle; transition: transform .15s var(--spring), background .15s; flex: none; }
.spk:hover { transform: scale(1.08); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.spk:active { transform: scale(0.94); }
.spk--big { width: 64px; height: 64px; font-size: 28px; box-shadow: var(--shadow); }

/* ---------- Stagger entrance ---------- */
.stagger-item { animation: fadeUp .5s var(--ease) both; }
.stagger-item:nth-child(1){animation-delay:.02s}.stagger-item:nth-child(2){animation-delay:.07s}
.stagger-item:nth-child(3){animation-delay:.12s}.stagger-item:nth-child(4){animation-delay:.17s}
.stagger-item:nth-child(5){animation-delay:.22s}.stagger-item:nth-child(6){animation-delay:.27s}
.stagger-item:nth-child(7){animation-delay:.32s}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Home ---------- */
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.level-ring { --p: 0; width: 86px; height: 86px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--track) 0); box-shadow: var(--shadow-sm); }
.level-ring-in { width: 68px; height: 68px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; line-height: 1; }
.level-ring-in b { font-size: 24px; font-weight: 800; color: var(--primary); }
.level-ring-in span { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }

.goal-card .goal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14px; color: var(--text-2); }
.goal-card .goal-head b { color: var(--text); font-size: 15px; }
.goal-done { margin-top: 10px; color: var(--green-d); font-weight: 700; font-size: 14px; }

.action-grid { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.big-card { display: flex; align-items: center; gap: var(--sp-4); text-align: left; width: 100%;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow); transition: transform .12s var(--spring), box-shadow .15s; color: var(--text); }
.big-card:not([disabled]):hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.big-card:not([disabled]):active { transform: translateY(0); }
.big-card[disabled] { opacity: .65; }
.big-card.primary { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.big-card.accent { background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 14%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--amber) 30%, var(--border)); }
.bc-ic { font-size: 32px; width: 54px; height: 54px; display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r); flex: none; }
.big-card.primary .bc-ic { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.bc-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bc-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); }
.big-card.accent .bc-kicker { color: var(--amber); }
.bc-title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.bc-sub { font-size: 13px; color: var(--text-2); }
.bc-go { font-size: 16px; color: var(--text-3); flex: none; }
.big-card.done { background: var(--surface-2); }

.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ms { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 8px; text-align: center; box-shadow: var(--shadow-sm); }
.ms-ic { font-size: 18px; } .ms-val { font-weight: 800; font-size: 18px; margin-top: 2px; letter-spacing: -0.02em; } .ms-lb { font-size: 10.5px; color: var(--text-3); }

.challenge { display: flex; align-items: center; gap: var(--sp-3); text-align: left; width: 100%; color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.challenge .ch-ic { font-size: 26px; } .challenge b { font-size: 15px; } .challenge p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.challenge .bc-go { margin-left: auto; }
.tip { background: var(--surface-2); }
.tip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tip-head span { font-weight: 700; font-size: 13px; color: var(--primary); }
.tip-next { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 600; border-radius: var(--r-full); padding: 5px 11px; flex: none; transition: transform .15s var(--spring), color .15s; }
.tip-next:hover { color: var(--primary); transform: translateY(-1px); }
.tip-next:active { transform: translateY(1px); }
.tip p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.tip p b { color: var(--text); }
@keyframes tipSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Parcours ---------- */
.level-sep { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); color: var(--text-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.level-sep::before, .level-sep::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.node { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px var(--sp-4); margin-bottom: 10px; box-shadow: var(--shadow-sm); transition: transform .12s var(--spring), box-shadow .15s; }
.node:not([disabled]):hover { transform: translateX(3px); box-shadow: var(--shadow); }
.node-dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; flex: none; color: #fff; background: var(--c, var(--primary)); box-shadow: 0 4px 0 color-mix(in srgb, var(--c, var(--primary)) 60%, #000); }
.node--locked { opacity: .6; } .node--locked .node-dot { background: var(--track); color: var(--text-3); box-shadow: none; }
.node--done .node-dot { background: var(--green); box-shadow: 0 4px 0 var(--green-d); }
.node-tx { flex: 1; min-width: 0; } .node-tx b { display: block; font-size: 15px; letter-spacing: -0.01em; } .node-tx small { color: var(--text-3); font-size: 12.5px; }
.node-kind { font-size: 18px; opacity: .8; flex: none; }

/* ---------- Leçon ---------- */
.lesson-top { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 4px 0 var(--sp-4); }
.back { width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); font-size: 18px; flex: none; box-shadow: var(--shadow-sm); }
.lesson-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); }
.lesson-tt h1 { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.lesson-intro { color: var(--text-2); font-size: 15px; margin: 0 0 var(--sp-4); }
.l-sec h3 { margin: 0 0 6px; font-size: 16px; } .l-sec p { margin: 0 0 var(--sp-3); color: var(--text-2); font-size: 14.5px; }
.examples { display: flex; flex-direction: column; gap: 8px; }
.ex-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; }
.ex-en { font-weight: 700; } .ex-fr { color: var(--text-2); font-size: 13.5px; } .ex-fr::before { content: "— "; }
.l-tips ul { margin: 0; padding-left: 18px; } .l-tips li { margin-bottom: 6px; color: var(--text-2); font-size: 14.5px; }
.l-tips li b, .l-sec p b { color: var(--text); }
.l-pitfalls .pitfall { background: var(--surface-2); border-left: 3px solid var(--amber); border-radius: 0 var(--r) var(--r) 0; padding: 10px 14px; margin-bottom: 10px; }
.pf-wrong { color: var(--red-d); font-weight: 600; font-size: 14px; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 50%, transparent); }
.pf-right { color: var(--green-d); font-weight: 700; font-size: 14.5px; margin: 2px 0; display: flex; align-items: center; gap: 8px; }
.pf-why { color: var(--text-2); font-size: 13px; }

.vocab-list { display: flex; flex-direction: column; gap: 10px; }
.vrow { padding: 14px; margin: 0; }
.vrow-main { display: flex; align-items: center; gap: var(--sp-3); }
.vrow-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.vrow-en { font-size: 17px; letter-spacing: -0.01em; }
.vrow-ipa { color: var(--text-3); font-size: 12.5px; }
.vrow-fr { color: var(--text-2); font-size: 14px; }
.vrow-type { font-size: 10.5px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 8px; border-radius: var(--r-full); flex: none; }
.vrow-ex { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--text-2); font-size: 13.5px; font-style: italic; }
.vrow-note { margin-top: 8px; background: var(--typo-bg); border: 1px solid var(--typo-bd); color: var(--text); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; }
.lesson-cta { position: sticky; bottom: 16px; margin-top: var(--sp-5); }

/* Table des verbes irréguliers */
.iv-head { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 8px; padding: 6px 12px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.iv-list { display: flex; flex-direction: column; gap: 6px; }
.iv-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--shadow-sm); font-size: 14px; }
.iv-base { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.iv-past { color: var(--primary); font-weight: 600; }
.iv-pp { color: var(--accent); font-weight: 600; }
.iv-row .iv-fr { color: var(--text-2); font-size: 13px; }
.iv-base .spk { width: 26px; height: 26px; font-size: 11px; }
@media (max-width: 480px) {
  .iv-head, .iv-row { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; font-size: 12.5px; padding: 9px 8px; }
  .iv-base .spk { display: none; }
}

/* ---------- Jeu ---------- */
.game { display: flex; flex-direction: column; min-height: calc(100dvh - 64px); }
.game-top { display: flex; align-items: center; gap: var(--sp-3); margin: 4px 0 var(--sp-5); }
.close { width: 38px; height: 38px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); font-size: 16px; flex: none; }
.game-bar { flex: 1; height: 14px; }
.game-count { font-size: 13px; font-weight: 700; color: var(--text-3); flex: none; min-width: 42px; text-align: right; }
.game-body { animation: pop .35s var(--ease) both; }

.prompt { text-align: center; margin-bottom: var(--sp-5); }
.prompt-en { font-size: clamp(26px, 6vw, 36px); font-weight: 800; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.prompt-fr { font-size: clamp(22px, 5vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.q-label { color: var(--text-3); font-size: 13px; margin-top: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.blank { display: inline-block; min-width: 64px; border-bottom: 3px solid var(--primary); margin: 0 4px; vertical-align: bottom; }
.listen-prompt { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }

.options { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; color: var(--text);
  background: var(--surface); border: 2px solid var(--border-2); border-radius: var(--r); padding: 15px 16px; font-size: 16px; font-weight: 600;
  box-shadow: 0 3px 0 var(--border); transition: transform .08s, box-shadow .12s, border-color .12s, background .12s; }
.opt:not([disabled]):hover { border-color: var(--primary); transform: translateY(-1px); }
.opt:not([disabled]):active { transform: translateY(3px); box-shadow: 0 0 0 var(--border); }
.opt-key { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 12px; color: var(--text-3); flex: none; }
.opt--correct { border-color: var(--green); background: var(--ok-bg); box-shadow: 0 3px 0 var(--green); color: var(--green-d); }
.opt--correct .opt-key { background: var(--green); color: #fff; border-color: var(--green); }
.opt--wrong { border-color: var(--red); background: var(--ko-bg); box-shadow: 0 3px 0 var(--red); color: var(--red-d); animation: shake .4s; }
.opt--wrong .opt-key { background: var(--red); color: #fff; border-color: var(--red); }
.opt--dim { opacity: .5; }
@keyframes shake { 10%,90%{transform:translateX(-1px)} 30%,70%{transform:translateX(3px)} 50%{transform:translateX(-5px)} }

.translate-area { position: relative; }
.input { width: 100%; padding: 16px 18px; font-size: 17px; border: 2px solid var(--border-2); border-radius: var(--r); background: var(--surface); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.answer-input { padding-right: 110px; }
.hint-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; border-radius: var(--r-full); padding: 7px 12px; }
.translate-answered { padding: 16px 18px; border-radius: var(--r); font-size: 17px; font-weight: 700; border: 2px solid; }
.ta--ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--green-d); }
.ta--typo { background: var(--typo-bg); border-color: var(--typo-bd); color: #b07d12; }
.ta--ko { background: var(--ko-bg); border-color: var(--ko-bd); color: var(--red-d); text-decoration: line-through; }

.order-built { min-height: 60px; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 2px dashed var(--border-2); border-radius: var(--r); margin-bottom: var(--sp-4); align-content: flex-start; }
.order-ph { color: var(--text-3); font-size: 14px; align-self: center; }
.order-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { background: var(--surface); border: 2px solid var(--border-2); border-radius: var(--r-sm); padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--text); box-shadow: 0 3px 0 var(--border); transition: transform .08s, box-shadow .1s, opacity .15s; }
.tile:not([disabled]):active { transform: translateY(3px); box-shadow: none; }
.tile--built { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.tile--used { opacity: 0; pointer-events: none; }

.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.mtile { background: var(--surface); border: 2px solid var(--border-2); border-radius: var(--r); padding: 14px 12px; font-size: 15px; font-weight: 600; color: var(--text); box-shadow: 0 3px 0 var(--border); transition: transform .08s, border-color .12s, background .12s; }
.mtile:not([disabled]):active { transform: translateY(3px); }
.mtile--sel { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.mtile--ok { border-color: var(--green); background: var(--ok-bg); color: var(--green-d); box-shadow: 0 3px 0 var(--green); opacity: .85; }

.action-bar { position: sticky; bottom: 0; margin-top: auto; padding: var(--sp-4) 0 calc(var(--sp-4) + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 60%, transparent); }
.action-hint { text-align: center; color: var(--text-3); font-size: 13px; padding: 10px; }

/* ---------- Feedback ---------- */
.feedback-slot { margin-top: var(--sp-4); }
.feedback { border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); border: 1.5px solid; animation: fbUp .3s var(--spring) both; }
@keyframes fbUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fb--ok { background: var(--ok-bg); border-color: var(--ok-bd); }
.fb--ko { background: var(--ko-bg); border-color: var(--ko-bd); }
.fb--typo { background: var(--typo-bg); border-color: var(--typo-bd); }
.fb-head { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; }
.fb--ok .fb-head { color: var(--green-d); } .fb--ko .fb-head { color: var(--red-d); } .fb--typo .fb-head { color: #b07d12; }
.fb-ic { font-size: 20px; }
.fb-reason { margin: 8px 0 0; font-size: 14.5px; color: var(--text); }
.fb-correction { margin-top: 10px; }
.fb-correct { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.fb-correct span { color: var(--text-2); } .fb-correct b { color: var(--text); }
.fb-detail { margin: 10px 0 0; font-size: 13.5px; color: var(--text-2); background: color-mix(in srgb, var(--surface) 60%, transparent); border-radius: var(--r-sm); padding: 8px 10px; }
.fb-example { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-example .ex-en { font-weight: 700; } .fb-example .ex-fr { color: var(--text-2); font-size: 13px; }

/* ---------- Résultats ---------- */
.results { text-align: center; padding-top: var(--sp-8); animation: pop .4s var(--ease) both; }
.result-emoji { font-size: 72px; animation: bounceIn .6s var(--spring) both; }
@keyframes bounceIn { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.result-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 2px; }
.result-sub { color: var(--text-2); margin: 0 0 var(--sp-5); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--sp-4); }
.rc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 8px; box-shadow: var(--shadow-sm); }
.rc-big { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); } .rc-lb { font-size: 12px; color: var(--text-3); }
.result-streak { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border)); border-radius: var(--r); padding: 12px; font-weight: 600; font-size: 14px; margin-bottom: var(--sp-4); }
.result-ach { margin-bottom: var(--sp-4); } .result-ach h3 { font-size: 15px; margin: 0 0 10px; }
.ach-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.result-actions { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-5); }

/* ---------- Progrès ---------- */
.level-card { display: flex; flex-direction: column; gap: 12px; }
.lc-lvl { font-size: 20px; font-weight: 800; } .lc-xp { color: var(--text-2); font-size: 14px; }
.lc-bar small { display: block; margin-top: 6px; color: var(--text-3); font-size: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--sp-4); }
.bs { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 8px; text-align: center; box-shadow: var(--shadow-sm); }
.bs-ic { font-size: 22px; } .bs-v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; } .bs-lb { font-size: 11px; color: var(--text-3); }
.vocab-progress h3, .achievements h3 { font-size: 15px; margin: 0 0 12px; }
.vp-bar { height: 14px; border-radius: var(--r-full); background: var(--track); overflow: hidden; display: flex; }
.vp-seg { height: 100%; } .vp-mastered { background: var(--green); } .vp-learning { background: var(--amber); }
.vp-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; } .dot-m { background: var(--green); } .dot-l { background: var(--amber); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ach-badge { text-align: center; padding: 12px 8px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); }
.ach-badge span { font-size: 26px; display: block; } .ach-badge b { display: block; font-size: 12px; margin-top: 4px; } .ach-badge small { display: block; font-size: 10px; color: var(--text-3); margin-top: 2px; }
.ach-badge.locked { opacity: .55; filter: grayscale(.5); } .ach-badge.locked small { display: none; }
.ach-badge.unlocked { border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); box-shadow: var(--shadow-sm); }
.result-ach .ach-badge.unlocked { animation: bounceIn .6s var(--spring) both; }

/* ---------- Flash de correction ---------- */
.flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .15s; }
.flash--ok { opacity: 1; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--green) 22%, transparent), transparent 60%); }
.flash--ko { opacity: 1; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--red) 20%, transparent), transparent 60%); }

/* ---------- Lecture ---------- */
.rw-hint { text-align: center; color: var(--text-3); font-size: 12.5px; margin: 0 0 var(--sp-4); }
.rw-sentence { padding: 14px 16px; }
.rw-en { font-size: 17px; line-height: 2; }
.rw-word { display: inline; border: 0; background: none; color: inherit; font: inherit; padding: 1px 3px; border-radius: 5px; cursor: pointer; border-bottom: 1px dotted transparent; transition: background .12s; }
.rw-word:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); border-bottom-color: var(--primary); }
.rw-word:active { background: color-mix(in srgb, var(--primary) 26%, transparent); }
.rw-mini { border: 1px solid var(--border); background: var(--surface-2); color: var(--primary); border-radius: var(--r-full); width: 30px; height: 30px; font-size: 13px; margin-left: 2px; vertical-align: middle; }
.rw-fr { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--primary); font-size: 14.5px; font-style: italic; animation: fadeUp .25s var(--ease) both; }

/* ---------- Panneau de traduction d'un mot ---------- */
.word-sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.word-sheet.ws-open { display: block; }
.ws-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.18); }
.ws-card { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--maxw); margin: 0 auto; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--sp-6) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom)); animation: fbUp .25s var(--spring) both; }
.ws-close { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; }
.ws-word { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.ws-tr { margin-top: 8px; font-size: 18px; color: var(--primary); font-weight: 600; }
.ws-none { color: var(--text-3); font-weight: 400; font-size: 15px; }

/* ---------- Mots croisés ---------- */
.cw-head { font-weight: 800; font-size: 17px; flex: 1; text-align: center; }
.cw-hint { text-align: center; color: var(--text-2); font-size: 13px; margin-bottom: var(--sp-4); }
.cw-grid { display: grid; gap: 3px; max-width: 360px; margin: 0 auto var(--sp-5); }
.cw-cell { position: relative; aspect-ratio: 1; }
.cw-empty { background: transparent; }
.cw-num { position: absolute; top: 1px; left: 3px; font-size: 8px; line-height: 1; color: var(--text-3); z-index: 1; pointer-events: none; }
.cw-in { width: 100%; height: 100%; text-align: center; text-transform: uppercase; font-weight: 700; font-size: clamp(12px, 3.6vw, 18px); border: 1.5px solid var(--border-2); border-radius: 5px; background: var(--surface); color: var(--text); padding: 0; }
.cw-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.cw-ok .cw-in { background: var(--ok-bg); border-color: var(--green); color: var(--green-d); }
.cw-ko .cw-in { background: var(--ko-bg); border-color: var(--red); color: var(--red-d); }
.cw-clues { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.cw-cluecol h3 { font-size: 13px; margin: 0 0 8px; color: var(--text-2); }
.cw-clue-list { list-style: none; margin: 0; padding: 0; }
.cw-clue-list li { font-size: 13px; margin-bottom: 9px; color: var(--text); line-height: 1.45; }
.cw-cn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; margin-right: 4px; }
.cw-lang { color: var(--text-3); font-size: 11.5px; }
.crossword .action-bar { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-row .level-ring { width: 72px; height: 72px; } .level-ring-in { width: 56px; height: 56px; }
  .cw-clues { grid-template-columns: 1fr; }
}
@media (min-width: 540px) {
  .action-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}