/* HSK 1–4 · v2 : grille d'accueil + fiche famille, ressenti natif */
:root {
  --bg: #faf6ef; --card: #fffdf8; --ink: #3a322e; --soft: #8a7d70;
  --accent: #c0392b; --warm: #e07a5f; --sep: rgba(90, 70, 55, 0.12);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --serif: Georgia, "Songti SC", "Noto Serif CJK SC", serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; position: fixed; inset: 0; width: 100%; }
body {
  background: var(--bg);
  background-image: radial-gradient(900px 400px at 100% -5%, rgba(224,122,95,.07), transparent 60%),
                    radial-gradient(800px 380px at -5% 105%, rgba(233,180,76,.09), transparent 62%);
  color: var(--ink);
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
::-webkit-scrollbar { display: none; }
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }

/* ---------- Accueil : grille ---------- */
#home { position: absolute; inset: 0; display: flex; flex-direction: column; }
header { flex: none; padding: calc(12px + var(--safe-t)) 18px 8px; }
.hd-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hd-brand { font-family: var(--serif); font-size: 17px; color: var(--accent); }
.hd-brand b { color: var(--ink); font-family: -apple-system, sans-serif; font-size: 14px; letter-spacing: .02em; }
.hd-count { font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.hd-bar { height: 2.5px; background: var(--sep); border-radius: 2px; margin: 9px 0; overflow: hidden; }
.hd-bar i { display: block; height: 100%; width: 0; background: var(--warm); border-radius: 2px; transition: width .25s; }
.filters { display: flex; gap: 5px; }
.filters button {
  flex: 1; color: var(--soft); font-size: 13px; font-weight: 600;
  padding: 7px 0; border-radius: 10px; transition: transform .08s;
}
.filters button.on { background: var(--ink); color: var(--bg); }
.filters button:active { transform: scale(0.94); }
#gridWrap { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding: 4px 14px calc(20px + var(--safe-b)); }
#grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.cell {
  background: var(--card); border-radius: 13px; padding: 9px 2px 7px;
  text-align: center; box-shadow: 0 1px 2px rgba(90,65,40,.06);
  transition: transform .08s; position: relative;
}
.cell:active { transform: scale(0.92); }
.cell .c { font-family: var(--serif); font-size: 30px; line-height: 1.15; display: block; }
.cell .p { font-size: 9.5px; color: var(--soft); display: block; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.cell.seen { background: rgba(224,122,95,.10); }
.cell.seen .c { color: var(--warm); }

/* ---------- Fiche famille ---------- */
#fam { position: absolute; inset: 0; background: var(--bg); z-index: 5;
  display: flex; flex-direction: column;
  background-image: radial-gradient(900px 400px at 100% -5%, rgba(224,122,95,.07), transparent 60%); }
#fam.in { animation: slideIn .26s cubic-bezier(.32,.72,.35,1); }
@keyframes slideIn { from { transform: translateX(100%); } }
#fam.out { animation: slideOut .22s ease both; }
@keyframes slideOut { to { transform: translateX(100%); } }
.fam-top { flex: none; display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + var(--safe-t)) 16px 6px; }
.fam-nav { display: flex; gap: 8px; }
.fam-btn {
  min-width: 46px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--card); box-shadow: 0 1px 3px rgba(90,65,40,.10);
  font-size: 21px; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: transform .08s, opacity .15s;
}
.fam-btn:active { transform: scale(0.92); }
.fam-btn:disabled { opacity: 0.25; }
.fam-btn small { font-size: 13px; color: var(--soft); font-weight: 700; }
#famBody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 22px; }
#famBody.swap { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateX(14px); } }
.hero { text-align: center; flex: none; padding: 4px 0 14px; }
.hero .zi { font-family: var(--serif); font-size: 92px; line-height: 1.12; font-weight: 500; }
.hero .py { font-size: 20px; color: var(--warm); font-weight: 700; }
.hero .mn { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--soft); margin-top: 5px; }
.hero .tags { margin-top: 10px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--soft);
  background: rgba(90,70,55,.07); border-radius: 999px; padding: 4px 11px; margin: 0 3px; }
.tag.lv { color: var(--warm); background: rgba(224,122,95,.12); }
.words { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; border-top: 1px solid var(--sep);
  padding: 4px 0 calc(16px + var(--safe-b)); }
.word { display: flex; align-items: baseline; gap: 12px; padding: 13px 4px;
  border-bottom: 1px solid var(--sep); border-radius: 10px; transition: background .1s; }
.word:active { background: rgba(224,122,95,.07); }
.word:last-child { border-bottom: none; }
.word .w { font-family: var(--serif); font-size: 25px; flex: none; }
.word .w b { color: var(--warm); font-weight: 500; }
.word .rest { min-width: 0; }
.word .p { font-size: 13px; color: var(--warm); font-weight: 600; }
.word .m { font-size: 13px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.word .lv { flex: none; margin-left: auto; font-size: 10px; color: var(--soft); }

/* ---------- Feuille phrase ---------- */
#overlay { position: absolute; inset: 0; z-index: 20; background: rgba(58,50,46,.32);
  display: flex; align-items: flex-end; animation: dim .2s ease; }
@keyframes dim { from { background: rgba(58,50,46,0); } }
#sheet { width: 100%; background: var(--card); border-radius: 22px 22px 0 0;
  padding: 14px 24px calc(30px + var(--safe-b)); text-align: center;
  animation: up .28s cubic-bezier(.32,.72,.35,1); }
@keyframes up { from { transform: translateY(100%); } }
#sheet .grab { width: 38px; height: 4.5px; border-radius: 3px; background: var(--sep); margin: 0 auto 14px; }
#sheet .w { font-family: var(--serif); font-size: 44px; }
#sheet .w b { color: var(--warm); font-weight: 500; }
#sheet .p { font-size: 18px; color: var(--warm); font-weight: 700; }
#sheet .m { font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--soft); margin: 5px 0 15px; }
#sheet .sent { border-top: 1px solid var(--sep); padding-top: 15px; }
#sheet .zh { font-size: 23px; line-height: 2.15; }
#sheet .zh ruby { ruby-align: center; margin: 0 1px; }
#sheet .zh rt { font-size: 10px; color: var(--soft); }
#sheet .zh .hl { color: var(--warm); }
#sheet .en { font-size: 14px; color: var(--soft); margin-top: 4px; }


/* ---------- Bouton et écran Training ---------- */
.hd-row { display: flex; gap: 8px; align-items: center; }
.filters { flex: 1; }
#trainBtn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--warm); color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; transition: transform .08s;
  box-shadow: 0 2px 8px rgba(224,122,95,.35); }
#trainBtn:active { transform: scale(0.94); }
#dueBadge { position: absolute; top: -5px; right: -4px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; font-style: normal; min-width: 17px; height: 17px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.cell.done { background: rgba(124,165,95,.16); }
.cell.done .c { color: #5f8a47; }
#train { position: absolute; inset: 0; background: var(--bg); z-index: 6;
  display: flex; flex-direction: column;
  background-image: radial-gradient(900px 400px at 100% -5%, rgba(233,180,76,.08), transparent 60%); }
#train.in { animation: slideIn .26s cubic-bezier(.32,.72,.35,1); }
.train-count { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
#trainBody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 24px calc(16px + var(--safe-b)); }
.tcard { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 2px; overflow-y: auto; }
.tcard .tw { font-family: var(--serif); font-size: 64px; line-height: 1.25; }
.tcard .tw b { color: var(--warm); font-weight: 500; }
.tcard .tp { font-size: 22px; color: var(--warm); font-weight: 700; margin-top: 6px; }
.tcard .tm { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--soft); margin-top: 4px; }
.tcard .sent { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sep); }
.tcard .zh { font-size: 23px; line-height: 2.15; }
.tcard .zh ruby { ruby-align: center; margin: 0 1px; }
.tcard .zh rt { font-size: 10px; color: var(--soft); }
.tcard .zh .hl { color: var(--warm); }
.tcard .en { font-size: 14px; color: var(--soft); margin-top: 4px; }
.tcard .tapline { color: var(--soft); font-size: 12.5px; margin-top: 34px; }
.tcard.big-done { gap: 10px; }
.tcard .emoji { font-size: 54px; }
.tcard h2 { font-family: var(--serif); font-size: 24px; }
.tcard p { color: var(--soft); font-size: 15px; max-width: 260px; }
.tcard .go { margin-top: 10px; background: var(--warm); color: #fff; font-size: 16px;
  font-weight: 700; padding: 14px 26px; border-radius: 999px; transition: transform .08s; }
.tcard .go:active { transform: scale(0.94); }
.grades { flex: none; display: flex; gap: 8px; padding-top: 10px; }
.grade { flex: 1; border-radius: 15px; padding: 11px 0 9px; color: #fff; font-weight: 700;
  font-size: 15px; transition: transform .08s; }
.grade:active { transform: scale(0.93); }
.grade small { display: block; font-size: 10.5px; font-weight: 600; opacity: .85; margin-top: 1px; }
.grade.g0 { background: #cd6a5c; }
.grade.g1 { background: #d9a03f; }
.grade.g2 { background: #7ca55f; }
.grade.g3 { background: #5d8fae; }


/* Audio : relecture mot / exemple */
.hd-right { display: inline-flex; align-items: center; gap: 10px; }
#setBtn { font-size: 16px; padding: 2px 4px; transition: transform .08s; }
#setBtn:active { transform: scale(0.9) rotate(30deg); }
.replays { display: flex; gap: 9px; justify-content: center; margin-top: 16px; flex: none; }
.replay { font-size: 14px; font-weight: 600; color: var(--ink); padding: 9px 16px;
  border-radius: 999px; background: rgba(224,122,95,.12); transition: transform .08s; }
.replay:active { transform: scale(0.9); }

/* ---------- Sélection du contenu (copier-coller vers une IA, etc.) ----------
   L'interface reste non sélectionnable ; le contenu (hanzi, sens, phrases) l'est.
   Le pinyin (rt) est exclu de la copie pour un collage propre. */
.hero .zi, .hero .py, .hero .mn,
.word .w, .word .p, .word .m,
#sheet .w, #sheet .p, #sheet .m, #sheet .zh, #sheet .en,
.tcard .tw, .tcard .tp, .tcard .tm, .tcard .zh, .tcard .en {
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
  cursor: text;
}
rt { user-select: none; -webkit-user-select: none; }

/* Surlignage du mot atteint par double-clic */
.word.flash { animation: wordFlash 2.4s ease; }
@keyframes wordFlash { 0%, 55% { background: rgba(224, 122, 95, .18); } 100% { background: transparent; } }

/* ---------- Recherche (style Spotlight) ---------- */
#searchPill { flex: 1; max-width: 160px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(90,70,55,.07); border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--soft); transition: transform .08s;
  white-space: nowrap; overflow: hidden; }
#searchPill:active { transform: scale(.95); }
#searchOv { position: absolute; inset: 0; z-index: 30;
  background: rgba(250,246,239,.45);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  padding: calc(13vh + var(--safe-t)) 18px 0; animation: sdim .22s ease; }
@keyframes sdim { from { opacity: 0; } }
#searchBox { max-width: 430px; margin: 0 auto; height: 100%;
  display: flex; flex-direction: column;
  animation: spop .3s cubic-bezier(.24, 1.2, .4, 1); }
@keyframes spop { from { transform: scale(.86) translateY(-14px); opacity: 0; } }
.sfield { flex: none; display: flex; align-items: center; gap: 9px; background: var(--card);
  border-radius: 17px; padding: 13px 16px; box-shadow: 0 14px 44px rgba(58,50,46,.18); }
.sfield .sic { font-size: 15px; opacity: .55; }
#searchInput { flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-size: 17px; color: var(--ink); font-family: inherit; -webkit-appearance: none;
  user-select: text; -webkit-user-select: text; }
#searchInput::placeholder { color: var(--soft); opacity: .7; }
#searchInput::-webkit-search-cancel-button { display: none; }
#searchClose { flex: none; font-size: 13.5px; font-weight: 600; color: var(--warm); }
#searchRes { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; margin-top: 10px; padding-bottom: 42vh; }
.sres { width: 100%; text-align: left; display: flex; align-items: baseline; gap: 12px;
  background: var(--card); border-radius: 14px; padding: 11px 14px; margin-bottom: 7px;
  box-shadow: 0 1px 3px rgba(90,65,40,.07); transition: transform .08s; }
.sres:active { transform: scale(.97); }
.sres .w { font-family: var(--serif); font-size: 23px; flex: none; }
.sres .rest { min-width: 0; }
.sres .p { display: block; font-size: 13px; color: var(--warm); font-weight: 600; }
.sres .m { display: block; font-size: 12.5px; color: var(--soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sres .lv { margin-left: auto; flex: none; font-size: 10px; color: var(--soft); }
.snone { text-align: center; color: var(--soft); padding: 30px 0; font-size: 14px; }

/* ---------- Réglages (roue) ---------- */
#setOv { position: absolute; inset: 0; z-index: 25; background: rgba(58,50,46,.32);
  display: flex; align-items: flex-end; animation: dim .2s ease; }
#setSheet { width: 100%; max-height: 84%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--card); border-radius: 22px 22px 0 0;
  padding: 14px 24px calc(26px + var(--safe-b));
  animation: up .28s cubic-bezier(.32,.72,.35,1); }
#setSheet .grab { width: 38px; height: 4.5px; border-radius: 3px; background: var(--sep); margin: 0 auto 14px; }
#setSheet h3 { font-family: var(--serif); font-size: 20px; }
#setSheet .sub { font-size: 12.5px; color: var(--soft); margin: 3px 0 10px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--sep); font-size: 14.5px; }
.srow input:not(.sw) { width: 88px; flex: none; text-align: right; border: none; outline: none;
  background: rgba(90,70,55,.07); border-radius: 9px; padding: 7px 10px;
  font-size: 14.5px; color: var(--ink); font-family: inherit;
  user-select: text; -webkit-user-select: text; }
.sw { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px;
  border-radius: 999px; background: rgba(90,70,55,.18); position: relative;
  transition: background .18s; cursor: pointer; }
.sw:checked { background: #7ca55f; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .18s; }
.sw:checked::after { left: 20px; }
#cfgReset { margin-top: 14px; width: 100%; text-align: center; color: var(--accent);
  font-weight: 600; font-size: 14.5px; padding: 10px; border-radius: 12px;
  background: rgba(192,57,43,.08); }

/* ✓ vert : mot appris (en révision, pas encore dû) */
.word .ok { color: #5f8a47; font-style: normal; font-weight: 800; font-size: 13px; }

/* ---------- Grand écran (web / iPad) : même interface, adaptée ---------- */
@media (min-width: 700px) {
  header, #gridWrap { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; }
  #grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
  .cell { padding: 13px 4px 10px; }
  .cell .c { font-size: 36px; }
  .cell .p { font-size: 11px; }
  .fam-top, #famBody, #trainBody { width: 100%; max-width: 660px; margin-left: auto; margin-right: auto; }
  .hero .zi { font-size: 110px; }
  #overlay, #setOv { justify-content: center; align-items: center; padding: 20px; }
  #sheet { max-width: 560px; border-radius: 22px; padding-bottom: 30px; }
  #setSheet { max-width: 520px; border-radius: 22px; padding-bottom: 26px; }
  #searchOv { padding-top: 16vh; }
}
@media (hover: hover) {
  .cell:hover { box-shadow: 0 3px 12px rgba(90,65,40,.14); transform: translateY(-1px); }
  .word:hover, .sres:hover { background: rgba(224,122,95,.06); }
  .fam-btn:hover:not(:disabled), .replay:hover { filter: brightness(.97); }
}

/* Bulle « Forget » (appui long sur une case) */
#forgetPop { position: fixed; z-index: 40; background: var(--card); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(58,50,46,.25); padding: 3px; animation: spop .16s ease; }
#forgetPop button { color: var(--accent); font-weight: 700; font-size: 14px; padding: 8px 18px; }