:root {
  --void: #0a0a0f;
  --ink: #13131f;
  --ink-2: #1a1a2a;
  --neon-pink: #ff2e8a;
  --neon-cyan: #00f0ff;
  --neon-violet: #b66dff;
  --neon-yellow: #fff066;
  --ghost: #e8e8f0;
  --mute: #6a6a7e;
  --mute-2: #4a4a5e;
  --danger: #ff4a4a;
  --ok: #5affaa;
  --warn: #ffb84a;
  --glow-pink: 0 0 16px rgba(255, 46, 138, 0.55);
  --glow-cyan: 0 0 16px rgba(0, 240, 255, 0.55);
  --glow-violet: 0 0 16px rgba(182, 109, 255, 0.55);
  --f-disp: 'Rajdhani', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
  --f-zh: 'Noto Sans SC', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body { background: var(--void); color: var(--ghost); font-family: var(--f-mono); -webkit-font-smoothing: antialiased; }

.hd-root {
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 46, 138, 0.1), transparent 45%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 240, 255, 0.1), transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(182, 109, 255, 0.05), transparent 70%),
    var(--void);
  color: var(--ghost); font-family: var(--f-mono); font-size: 14px; line-height: 1.5;
  position: relative; overflow-x: hidden; padding: 0 1rem 2rem;
}

.hd-ghost-chars { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hd-ghost-chars span { position: absolute; font-family: var(--f-zh); font-weight: 700; color: var(--neon-pink); opacity: 0.03; line-height: 1; user-select: none; }

.hd-grid-floor {
  position: fixed; bottom: -10%; left: -10%; right: -10%; height: 50%;
  background-image:
    linear-gradient(to right, rgba(0,240,255,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,240,255,0.1) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(400px) rotateX(65deg); transform-origin: center bottom;
  mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
  z-index: 0; pointer-events: none;
}

.hd-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px);
}

.hd-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 0.25rem;
  background: linear-gradient(to bottom, rgba(10,10,15,0.95), rgba(10,10,15,0.7));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 46, 138, 0.15);
  margin: 0 -1rem 1.5rem; padding-left: 1rem; padding-right: 1rem;
}
.hd-brand { background: none; border: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.5rem; padding: 0; color: var(--ghost); }
.hd-brand-zh { font-family: var(--f-zh); font-size: 1.25rem; font-weight: 700; color: var(--neon-pink); text-shadow: var(--glow-pink); }
.hd-brand-sep { color: var(--mute-2); font-size: 0.9rem; }
.hd-brand-en { font-family: var(--f-disp); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; color: var(--ghost); }
.hd-topbar-meta { display: flex; gap: 0.5rem; align-items: center; }
.hd-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; font-family: var(--f-mono); font-size: 0.72rem; border: 1px solid rgba(0, 240, 255, 0.25); background: rgba(0, 240, 255, 0.05); color: var(--neon-cyan); letter-spacing: 0.05em; height: 30px; box-sizing: border-box; }
.hd-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); }
.hd-settings-btn { width: 30px; height: 30px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: var(--ghost); cursor: pointer; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.hd-settings-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.hd-settings-btn.is-warn { border-color: var(--warn); color: var(--warn); animation: hd-blink 2s infinite; }
@keyframes hd-blink { 50% { opacity: 0.5; } }

.hd-main { position: relative; z-index: 5; max-width: 520px; margin: 0 auto; }

.hd-home { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.5rem; }
.hd-band {
  position: relative; width: 100%; padding: 0;
  background: linear-gradient(135deg, rgba(19,19,31,0.7), rgba(19,19,31,0.35));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer; overflow: hidden; text-align: left;
  color: var(--ghost); font-family: inherit;
  transition: all 0.25s ease; min-height: 140px;
}
.hd-band:hover:not(.is-disabled), .hd-band:active:not(.is-disabled) { transform: translateY(-2px); border-color: rgba(255, 46, 138, 0.4); }
.hd-band.is-disabled { opacity: 0.5; cursor: not-allowed; }
.hd-band-play:hover:not(.is-disabled) { box-shadow: 0 0 30px rgba(255, 46, 138, 0.2); }
.hd-band-library:hover { box-shadow: 0 0 30px rgba(0, 240, 255, 0.2); }
.hd-band-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hd-band-bg-char { position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); font-family: var(--f-zh); font-size: 12rem; font-weight: 700; line-height: 1; color: var(--neon-pink); opacity: 0.06; }
.hd-band-library .hd-band-bg-char { color: var(--neon-cyan); }
.hd-band-content { position: relative; display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem 1.25rem; z-index: 2; }
.hd-band-num { font-family: var(--f-disp); font-size: 2rem; font-weight: 700; color: var(--mute-2); line-height: 1; }
.hd-band-play .hd-band-num { color: var(--neon-pink); text-shadow: var(--glow-pink); }
.hd-band-library .hd-band-num { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
.hd-band-main { flex: 1; min-width: 0; }
.hd-band-title { font-family: var(--f-disp); font-size: 1.8rem; font-weight: 700; letter-spacing: 0.2em; line-height: 1; margin-bottom: 0.35rem; }
.hd-band-sub { font-size: 0.8rem; color: var(--mute); }
.hd-band-arrow { font-family: var(--f-disp); font-size: 1.8rem; color: var(--ghost); opacity: 0.5; transition: all 0.2s; }
.hd-band:hover:not(.is-disabled) .hd-band-arrow { opacity: 1; transform: translateX(4px); }
.hd-band-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--neon-pink), transparent); opacity: 0.5; }
.hd-band-library .hd-band-line { background: linear-gradient(to right, transparent, var(--neon-cyan), transparent); }
.hd-home-footer { display: flex; justify-content: space-between; margin-top: 1rem; padding: 0 0.25rem; font-size: 0.65rem; color: var(--mute-2); letter-spacing: 0.2em; }

.hd-page { padding-top: 0.25rem; }
.hd-page-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0.25rem 0; }
.hd-back { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--neon-cyan); width: 36px; height: 36px; font-size: 1.2rem; cursor: pointer; font-family: var(--f-disp); display: flex; align-items: center; justify-content: center; }
.hd-back:hover { background: rgba(0, 240, 255, 0.08); border-color: var(--neon-cyan); }
.hd-page-title { font-family: var(--f-disp); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.25em; }

.hd-section { margin-bottom: 1.5rem; }
.hd-section-label { font-size: 0.7rem; color: var(--mute); letter-spacing: 0.25em; margin-bottom: 0.6rem; padding-left: 0.25rem; }

.hd-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.hd-toggle-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--ghost); padding: 0.9rem 0.75rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.15rem; font-family: inherit; transition: all 0.2s; }
.hd-toggle-btn.is-active { border-color: var(--neon-pink); background: rgba(255, 46, 138, 0.08); box-shadow: inset 0 0 15px rgba(255, 46, 138, 0.1); }
.hd-toggle-title { font-family: var(--f-disp); font-weight: 700; letter-spacing: 0.2em; font-size: 0.95rem; }
.hd-toggle-btn.is-active .hd-toggle-title { color: var(--neon-pink); }
.hd-toggle-sub { font-size: 0.7rem; color: var(--mute); }

.hd-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.hd-preset { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--mute); padding: 0.55rem 0.3rem; font-family: var(--f-disp); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s; }
.hd-preset.is-active { border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.08); color: var(--neon-cyan); }

.hd-params { display: flex; flex-direction: column; gap: 1rem; background: rgba(0, 0, 0, 0.25); padding: 1rem; border-left: 2px solid var(--neon-violet); }
.hd-param { display: flex; flex-direction: column; gap: 0.4rem; }
.hd-param-head { display: flex; justify-content: space-between; font-size: 0.8rem; }
.hd-param-label { color: var(--ghost); }
.hd-param-value { font-family: var(--f-disp); font-weight: 700; color: var(--neon-violet); font-size: 1rem; min-width: 3ch; text-align: right; }
.hd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); outline: none; cursor: pointer; }
.hd-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--neon-violet); border: 2px solid var(--void); box-shadow: var(--glow-violet); cursor: pointer; }
.hd-range::-moz-range-thumb { width: 18px; height: 18px; background: var(--neon-violet); border: 2px solid var(--void); box-shadow: var(--glow-violet); cursor: pointer; border-radius: 0; }

.hd-tokens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.hd-token { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--mute); padding: 0.65rem 0.6rem; text-align: left; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 0.15rem; transition: all 0.2s; }

/* Variantes bonus (vert) et malus (rouge) — appliquées à l'état activé uniquement */
.hd-token-bonus.is-active { border-color: var(--ok); background: rgba(90, 255, 170, 0.08); color: var(--ghost); box-shadow: inset 0 0 12px rgba(90, 255, 170, 0.08); }
.hd-token-bonus.is-active .hd-token-label { color: var(--ok); }
.hd-token-bonus:hover:not(.is-active) { border-color: rgba(90, 255, 170, 0.3); }

.hd-token-malus.is-active { border-color: var(--danger); background: rgba(255, 74, 74, 0.08); color: var(--ghost); box-shadow: inset 0 0 12px rgba(255, 74, 74, 0.08); }
.hd-token-malus.is-active .hd-token-label { color: var(--danger); }
.hd-token-malus:hover:not(.is-active) { border-color: rgba(255, 74, 74, 0.3); }

/* Fallback neutre (sans kind) : ancien jaune */
.hd-token.is-active:not(.hd-token-bonus):not(.hd-token-malus) { border-color: var(--neon-yellow); background: rgba(255, 240, 102, 0.05); color: var(--ghost); }
.hd-token-label { font-family: var(--f-disp); font-weight: 700; letter-spacing: 0.15em; font-size: 0.85rem; }
.hd-token.is-active:not(.hd-token-bonus):not(.hd-token-malus) .hd-token-label { color: var(--neon-yellow); }
.hd-token-sub { font-size: 0.65rem; color: var(--mute); line-height: 1.3; }

.hd-btn { font-family: var(--f-disp); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.15em; padding: 0.75rem 1.25rem; border: none; cursor: pointer; transition: all 0.2s; background: transparent; color: var(--ghost); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.hd-btn-lg { padding: 1rem 2rem; font-size: 1.05rem; letter-spacing: 0.2em; }
.hd-btn-sm { padding: 0.55rem 0.9rem; font-size: 0.75rem; }
.hd-btn-xs { padding: 0.4rem 0.7rem; font-size: 0.7rem; }
.hd-btn-primary { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); color: var(--void); box-shadow: var(--glow-pink); font-weight: 700; }
.hd-btn-primary:hover:not(:disabled) { box-shadow: 0 0 24px rgba(255, 46, 138, 0.8); }
.hd-btn-primary:disabled { opacity: 0.3; cursor: not-allowed; background: var(--mute); box-shadow: none; }
.hd-btn-ghost { border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.03); }
.hd-btn-ghost:hover:not(:disabled) { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0, 240, 255, 0.05); }
.hd-btn-ghost:disabled { opacity: 0.3; cursor: not-allowed; }
.hd-btn-danger { border: 1px solid rgba(255, 74, 74, 0.3); color: var(--danger); background: rgba(255, 74, 74, 0.04); }
.hd-btn-danger:hover { background: rgba(255, 74, 74, 0.12); }

.hd-page-cta { position: sticky; bottom: 1rem; margin-top: 2rem; display: flex; justify-content: center; }
.hd-page-cta .hd-btn { min-width: 240px; }

.hd-invite { display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem 0; }
.hd-invite-label { font-size: 0.7rem; color: var(--mute); letter-spacing: 0.25em; text-align: center; }
.hd-invite-code { font-family: var(--f-disp); font-size: 3rem; font-weight: 700; letter-spacing: 0.3em; color: var(--neon-cyan); text-shadow: var(--glow-cyan); text-align: center; padding: 1.5rem; background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), transparent); border: 1px solid rgba(0, 240, 255, 0.2); }
.hd-invite-link-row { display: flex; gap: 0.4rem; }
.hd-invite-link-row input { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ghost); padding: 0.75rem; font-family: var(--f-mono); font-size: 0.75rem; }
.hd-invite-status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--neon-yellow); font-size: 0.85rem; }
.hd-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-yellow); animation: hd-pulse-ring 1.5s infinite; }
@keyframes hd-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 240, 102, 0.6); } 100% { box-shadow: 0 0 0 12px rgba(255, 240, 102, 0); } }

.hd-lib-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.hd-lib-toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; padding: 0.5rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); }
.hd-lib-count { display: flex; flex-direction: column; align-items: center; padding: 0 0.75rem; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.hd-lib-count-num { font-family: var(--f-disp); font-size: 1.15rem; font-weight: 700; color: var(--neon-cyan); line-height: 1; }
.hd-lib-count-label { font-size: 0.6rem; color: var(--mute); }
.hd-search { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--ghost); padding: 0.55rem 0.75rem; font-family: var(--f-mono); font-size: 0.85rem; }
.hd-search:focus { outline: none; border-color: var(--neon-cyan); }

.hd-lib-list { display: flex; flex-direction: column; gap: 0.25rem; }
.hd-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.5rem 0.45rem 0.65rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.15s; }
.hd-row:hover { background: rgba(255, 46, 138, 0.04); border-color: rgba(255, 46, 138, 0.2); }
.hd-row-content { display: grid; grid-template-columns: 50px 1fr 1.3fr; gap: 0.4rem; align-items: center; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.hd-row-hanzi { font-family: var(--f-zh); font-size: 1.1rem; font-weight: 500; color: var(--ghost); line-height: 1; }
.hd-row-pinyin { font-family: var(--f-mono); font-size: 0.7rem; color: var(--neon-cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-row-fr { font-size: 0.72rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-row-actions { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.hd-row-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--mute-2); font-size: 0.85rem; cursor: pointer; transition: all 0.15s; padding: 0; line-height: 1; }
.hd-row-btn-edit:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.06); }
.hd-row-btn-del:hover { color: var(--danger); border-color: var(--danger); background: rgba(255, 74, 74, 0.06); }
.hd-row-edit-mode { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.7rem; background: rgba(255, 46, 138, 0.06); border-color: rgba(255, 46, 138, 0.3); cursor: default; }
.hd-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; }
.hd-edit-field { display: flex; flex-direction: column; gap: 0.25rem; }
.hd-edit-full { grid-column: 1 / -1; }
.hd-edit-label { font-size: 0.6rem; color: var(--mute); letter-spacing: 0.15em; }
.hd-input { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ghost); padding: 0.45rem 0.55rem; font-family: var(--f-mono); font-size: 0.8rem; width: 100%; }
.hd-input-hanzi { font-family: var(--f-zh); font-size: 1rem; }
.hd-input:focus { outline: none; border-color: var(--neon-pink); }
.hd-edit-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }

.hd-no-results, .hd-empty { padding: 3rem 1rem; text-align: center; }
.hd-empty-char { font-family: var(--f-zh); font-size: 5rem; color: var(--mute-2); line-height: 1; margin-bottom: 1rem; }
.hd-empty-text { font-family: var(--f-disp); font-size: 1.1rem; letter-spacing: 0.2em; color: var(--mute); margin-bottom: 0.5rem; }
.hd-empty-sub { font-size: 0.8rem; color: var(--mute-2); }
.hd-lib-footer { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.hd-no-results { color: var(--mute); font-size: 0.9rem; }

.hd-settings-info { font-size: 0.85rem; color: var(--mute); margin-bottom: 0.75rem; line-height: 1.5; }
.hd-settings-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.hd-test-result { margin-top: 0.75rem; padding: 0.6rem 0.8rem; font-size: 0.8rem; border-left: 2px solid; }
.hd-test-success { border-color: var(--ok); color: var(--ok); background: rgba(90, 255, 170, 0.05); }
.hd-test-error { border-color: var(--danger); color: var(--danger); background: rgba(255, 74, 74, 0.05); }
.hd-settings-help { font-size: 0.8rem; color: var(--mute); line-height: 1.5; }
.hd-link { color: var(--neon-cyan); text-decoration: none; border-bottom: 1px dashed var(--neon-cyan); }
.hd-link:hover { text-shadow: var(--glow-cyan); }
.hd-neon-cyan { color: var(--neon-cyan); }

.hd-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: hd-modal-bg 0.2s; }
@keyframes hd-modal-bg { from { opacity: 0; } to { opacity: 1; } }
.hd-modal { width: 100%; max-width: 500px; max-height: 90vh; background: var(--ink); border: 1px solid rgba(255, 46, 138, 0.3); box-shadow: 0 0 40px rgba(255, 46, 138, 0.15); display: flex; flex-direction: column; animation: hd-modal-in 0.25s ease-out; }
@keyframes hd-modal-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hd-modal-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 46, 138, 0.2); }
.hd-modal-title { flex: 1; font-family: var(--f-disp); font-size: 1rem; font-weight: 600; letter-spacing: 0.2em; }
.hd-modal-close { background: none; border: none; color: var(--mute); font-size: 1.5rem; cursor: pointer; width: 32px; height: 32px; }
.hd-modal-close:hover { color: var(--danger); }
.hd-modal-body { padding: 1.25rem; overflow-y: auto; }
.hd-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }

.hd-import-options { display: flex; flex-direction: column; gap: 0.5rem; }
.hd-import-opt { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 0.1rem 0.75rem; align-items: center; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--ghost); padding: 0.85rem 1rem; text-align: left; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.hd-import-opt:hover { border-color: var(--neon-pink); background: rgba(255, 46, 138, 0.04); }
.hd-import-icon { grid-row: 1 / 3; font-family: var(--f-disp); font-size: 1.5rem; color: var(--neon-cyan); text-align: center; }
.hd-import-title { font-family: var(--f-disp); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.15em; }
.hd-import-sub { font-size: 0.7rem; color: var(--mute); grid-column: 2; }
.hd-import-tag { position: absolute; top: 0.5rem; right: 0.5rem; font-family: var(--f-disp); font-weight: 700; font-size: 0.6rem; padding: 0.15rem 0.4rem; letter-spacing: 0.15em; }
.hd-tag-ai { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); color: var(--void); }

.hd-text-import { display: flex; flex-direction: column; gap: 0.75rem; }
.hd-textarea { width: 100%; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ghost); padding: 0.75rem; font-family: var(--f-mono); font-size: 0.85rem; line-height: 1.5; resize: vertical; min-height: 180px; }
.hd-textarea:focus { outline: none; border-color: var(--neon-pink); }
.hd-text-hint { font-size: 0.75rem; color: var(--mute); }

.hd-file-import { padding: 1rem 0; }
.hd-file-drop { display: block; cursor: pointer; }
.hd-file-drop-inner { border: 2px dashed rgba(0, 240, 255, 0.3); padding: 2.5rem 1rem; text-align: center; display: flex; flex-direction: column; gap: 0.5rem; transition: all 0.2s; }
.hd-file-drop:hover .hd-file-drop-inner { border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.05); }
.hd-file-drop-icon { font-family: var(--f-disp); font-size: 2.5rem; color: var(--neon-cyan); }
.hd-file-drop-text { font-family: var(--f-disp); font-size: 1rem; font-weight: 600; letter-spacing: 0.15em; }
.hd-file-drop-sub { font-size: 0.75rem; color: var(--mute); }

.hd-progress-bar { height: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.hd-progress-fill { height: 100%; background: linear-gradient(to right, var(--neon-pink), var(--neon-cyan)); transition: width 0.3s; }
.hd-progress-big { padding: 1.5rem 0; display: flex; flex-direction: column; gap: 1rem; }
.hd-progress-big-phase { font-family: var(--f-disp); font-size: 1rem; font-weight: 600; letter-spacing: 0.15em; color: var(--neon-pink); }
.hd-progress-big-hint { font-size: 0.75rem; color: var(--mute); }

.hd-preview-summary { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.hd-preview-num { font-family: var(--f-disp); font-size: 2.5rem; font-weight: 700; color: var(--neon-pink); text-shadow: var(--glow-pink); line-height: 1; }
.hd-preview-label { font-size: 0.85rem; color: var(--mute); letter-spacing: 0.1em; }
.hd-preview-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 40vh; overflow-y: auto; }
.hd-preview-card { display: grid; grid-template-columns: 55px 1fr 1.2fr; gap: 0.5rem; padding: 0.45rem 0.65rem; background: rgba(255, 255, 255, 0.02); border-left: 2px solid rgba(0, 240, 255, 0.3); }
.hd-preview-hanzi { font-family: var(--f-zh); font-size: 1.15rem; }
.hd-preview-pinyin { font-family: var(--f-mono); font-size: 0.75rem; color: var(--neon-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-preview-fr { font-size: 0.75rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-preview-more { text-align: center; padding: 0.75rem; color: var(--mute); font-size: 0.8rem; }

.hd-toast { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; z-index: 100; padding: 0.85rem 1rem; background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(12px); border-left: 3px solid var(--neon-cyan); font-size: 0.85rem; max-width: 500px; margin: 0 auto; animation: hd-toast-in 0.25s; }
.hd-toast-success { border-color: var(--ok); color: var(--ok); }
.hd-toast-error { border-color: var(--danger); color: var(--danger); }
.hd-toast-warn { border-color: var(--warn); color: var(--warn); }
@keyframes hd-toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* =========================================================================
   GAME SCREEN
   ========================================================================= */

/* Players setup */
.hd-players-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.hd-player-field { display: flex; align-items: center; gap: 0.5rem; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.35rem 0.5rem; }
.hd-player-num { font-family: var(--f-disp); font-size: 1.6rem; font-weight: 700; line-height: 1; width: 28px; text-align: center; }
.hd-player-input { background: transparent; border: none; padding: 0.5rem 0.25rem; font-family: var(--f-disp); font-weight: 700; letter-spacing: 0.1em; font-size: 0.95rem; }
.hd-player-input:focus { border: none; outline: none; }
.hd-page-cta-col { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.hd-page-cta-col .hd-btn { width: 100%; }

/* Dock CTA en bas de l'écran Play */
.hd-play-cta-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--void) 0%, var(--void) 60%, rgba(10, 10, 15, 0.9) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 46, 138, 0.15);
}
.hd-play-cta-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hd-play-cta-inner .hd-btn { width: 100%; }

/* Padding bottom sur la page Play pour éviter que le contenu soit masqué par le dock */
.hd-page.hd-page-play-scroll { padding-bottom: 160px; }

/* Boot */
.hd-game-boot { position: fixed; inset: 0; background: var(--void); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; z-index: 200; animation: hd-fade-in 0.3s; }
.hd-boot-char { font-family: var(--f-zh); font-size: 9rem; font-weight: 700; color: var(--neon-pink); text-shadow: var(--glow-pink); line-height: 1; animation: hd-boot-pulse 1.2s ease-in-out infinite; }
.hd-boot-text { font-family: var(--f-disp); font-size: 0.95rem; letter-spacing: 0.3em; color: var(--mute); }
@keyframes hd-boot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } }
@keyframes hd-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Handoff */
.hd-handoff { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; gap: 2rem; animation: hd-handoff-in 0.4s ease-out; }
.hd-handoff-pink { background: radial-gradient(ellipse at center, rgba(255, 46, 138, 0.25), var(--void) 70%), var(--void); }
.hd-handoff-cyan { background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.25), var(--void) 70%), var(--void); }
.hd-handoff-top { text-align: center; display: flex; flex-direction: column; gap: 0.75rem; }
.hd-handoff-label { font-size: 0.7rem; color: var(--mute); letter-spacing: 0.3em; }
.hd-handoff-name { font-family: var(--f-disp); font-size: 2.5rem; font-weight: 700; letter-spacing: 0.15em; color: var(--ghost); }
.hd-handoff-pink .hd-handoff-name { color: var(--neon-pink); text-shadow: var(--glow-pink); }
.hd-handoff-cyan .hd-handoff-name { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
.hd-handoff-role { font-family: var(--f-disp); font-size: 1rem; font-weight: 600; letter-spacing: 0.3em; color: var(--ghost); opacity: 0.8; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); width: 160px; margin: 0 auto; text-align: center; }
.hd-handoff-hint { font-size: 0.7rem; color: var(--mute-2); letter-spacing: 0.1em; text-align: center; position: absolute; bottom: 2rem; }
@keyframes hd-handoff-in {
  from { opacity: 0; transform: rotateY(-90deg); }
  to { opacity: 1; transform: rotateY(0); }
}

/* Game HUD */
.hd-game { padding-bottom: 5rem; }
.hd-gamebar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 1rem; font-family: var(--f-disp); }
.hd-gamebar-player { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.5rem; border-radius: 2px; transition: all 0.2s; }
.hd-gamebar-player.is-attacker { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 -2px 0 var(--neon-yellow); }
.hd-gamebar-name { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; }
.hd-gamebar-score { font-size: 1.4rem; font-weight: 700; color: var(--ghost); line-height: 1; }
.hd-gamebar-mid { display: flex; flex-direction: column; align-items: center; padding: 0 0.5rem; min-width: 60px; }
.hd-gamebar-pot { display: flex; align-items: baseline; gap: 0.3rem; }
.hd-gamebar-pot-label { font-size: 0.6rem; color: var(--mute); letter-spacing: 0.2em; }
.hd-gamebar-pot-num { font-size: 1.2rem; font-weight: 700; color: var(--neon-yellow); }
.hd-gamebar-target { font-size: 0.7rem; color: var(--mute-2); margin-top: 0.1rem; }
.hd-gamebar-quit { background: none; border: 1px solid rgba(255, 74, 74, 0.2); color: var(--mute); width: 28px; height: 28px; font-size: 1rem; cursor: pointer; }
.hd-gamebar-quit:hover { color: var(--danger); border-color: var(--danger); }

/* Phase */
.hd-phase-label { font-family: var(--f-disp); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.25em; padding: 0.4rem 0.75rem; margin-bottom: 0.25rem; display: inline-block; }
.hd-phase-attack { color: var(--neon-pink); border-left: 2px solid var(--neon-pink); }
.hd-phase-defend { color: var(--neon-cyan); border-left: 2px solid var(--neon-cyan); }
.hd-phase-validate { color: var(--neon-yellow); border-left: 2px solid var(--neon-yellow); }
.hd-phase-sub { font-size: 0.8rem; color: var(--mute); margin-bottom: 1rem; padding-left: 0.85rem; }

/* Hand */
.hd-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.hd-card-pick { background: linear-gradient(135deg, rgba(19,19,31,0.8), rgba(19,19,31,0.5)); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ghost); padding: 0.75rem 0.5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; font-family: inherit; transition: all 0.2s; min-height: 80px; }
.hd-card-pick:hover { border-color: var(--neon-pink); transform: translateY(-2px); }
.hd-card-pick.is-selected { border-color: var(--neon-pink); box-shadow: 0 0 20px rgba(255, 46, 138, 0.4); background: rgba(255, 46, 138, 0.08); }
.hd-card-pick-hanzi { font-family: var(--f-zh); font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--ghost); }
.hd-card-pick-pinyin { font-size: 0.65rem; color: var(--neon-cyan); opacity: 0.8; text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.hd-card-pick.is-selected .hd-card-pick-hanzi { color: var(--neon-pink); }

.hd-empty-hand { text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: var(--mute); }

/* Curses */
.hd-curses { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: 0.4rem; }
.hd-curse-opt { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--mute); padding: 0.55rem 0.4rem; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; transition: all 0.2s; }
.hd-curse-opt.is-active { border-color: var(--neon-yellow); background: rgba(255, 240, 102, 0.06); color: var(--neon-yellow); }
.hd-curse-label { font-family: var(--f-disp); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; }
.hd-curse-charges { font-size: 0.6rem; opacity: 0.7; }

/* Timer */
.hd-timer-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.hd-timer-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.hd-timer-fill { height: 100%; background: linear-gradient(to right, var(--neon-cyan), var(--neon-yellow)); transition: width 1s linear; }
.hd-timer-row.is-critical .hd-timer-fill { background: linear-gradient(to right, var(--warn), var(--danger)); animation: hd-timer-blink 0.6s infinite; }
.hd-timer-num { font-family: var(--f-disp); font-weight: 700; font-size: 1.25rem; min-width: 3.5ch; text-align: right; color: var(--neon-cyan); }
.hd-timer-row.is-critical .hd-timer-num { color: var(--danger); animation: hd-timer-blink 0.6s infinite; }
@keyframes hd-timer-blink { 50% { opacity: 0.5; } }

/* Card */
.hd-card-play { position: relative; background: linear-gradient(160deg, rgba(19,19,31,0.95), rgba(19,19,31,0.55)); border: 1px solid rgba(255, 46, 138, 0.3); padding: 2rem 1.25rem 1.5rem; margin-bottom: 1.25rem; text-align: center; box-shadow: 0 0 40px rgba(255, 46, 138, 0.08), inset 0 0 60px rgba(255, 46, 138, 0.04); overflow: hidden; }
.hd-card-play::before { content: "字"; position: absolute; right: -1rem; top: 40%; transform: translateY(-50%); font-family: var(--f-zh); font-size: 10rem; font-weight: 700; color: var(--neon-pink); opacity: 0.03; line-height: 1; pointer-events: none; }
.hd-card-play.is-cursed { border-color: var(--neon-yellow); box-shadow: 0 0 40px rgba(255, 240, 102, 0.15); }
.hd-card-curse-tag { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--neon-yellow); color: var(--void); font-family: var(--f-disp); font-weight: 700; font-size: 0.65rem; padding: 0.2rem 0.5rem; letter-spacing: 0.15em; }
.hd-card-hanzi { font-family: var(--f-zh); font-size: 3.5rem; font-weight: 500; color: var(--ghost); line-height: 1; margin-bottom: 0.5rem; position: relative; z-index: 1; }
.hd-card-pinyin { font-family: var(--f-mono); font-size: 1rem; color: var(--neon-cyan); letter-spacing: 0.05em; margin-bottom: 0.75rem; position: relative; z-index: 1; }
.hd-card-fr { font-size: 1.15rem; color: var(--ghost); margin-bottom: 0.5rem; padding: 0.5rem; font-weight: 500; position: relative; z-index: 1; }
.hd-card-instruct { font-size: 0.7rem; color: var(--mute); letter-spacing: 0.15em; margin-top: 0.5rem; position: relative; z-index: 1; }
.hd-card-hint { font-size: 0.75rem; color: var(--warn); font-style: italic; position: relative; z-index: 1; }
.hd-audio-btn { background: rgba(0, 240, 255, 0.1); border: 1px solid var(--neon-cyan); color: var(--neon-cyan); padding: 0.6rem 1.25rem; font-family: var(--f-disp); font-weight: 700; letter-spacing: 0.15em; cursor: pointer; margin: 0.5rem 0; position: relative; z-index: 1; }
.hd-audio-btn:hover { background: rgba(0, 240, 255, 0.2); }

/* Defend input */
.hd-defend-input { font-size: 1.1rem; padding: 0.85rem 1rem; text-align: center; margin-bottom: 0.75rem; border: 1px solid rgba(0, 240, 255, 0.3); }
.hd-defend-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); }

/* QCM */
.hd-qcm { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
.hd-qcm-opt { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ghost); padding: 0.85rem 0.75rem; font-family: inherit; font-size: 0.9rem; cursor: pointer; transition: all 0.15s; text-align: center; }
.hd-qcm-opt:hover { border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.05); }
.hd-qcm-opt:active { transform: scale(0.98); }

/* Bonus tray */
.hd-bonus-tray { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
.hd-bonus-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.hd-bonus-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.65rem; background: rgba(90, 255, 170, 0.06); border: 1px solid rgba(90, 255, 170, 0.3); color: var(--ok); font-family: inherit; cursor: pointer; transition: all 0.15s; }
.hd-bonus-chip:hover { background: rgba(90, 255, 170, 0.14); border-color: var(--ok); }
.hd-bonus-chip-label { font-family: var(--f-disp); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; }
.hd-bonus-chip-count { font-family: var(--f-mono); font-size: 0.7rem; opacity: 0.85; }

/* Validate */
.hd-validate-card { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 240, 102, 0.25); padding: 1.25rem; margin-bottom: 1.25rem; text-align: center; }
.hd-validate-hanzi { font-family: var(--f-zh); font-size: 2.5rem; line-height: 1; margin-bottom: 0.35rem; color: var(--ghost); }
.hd-validate-pinyin { font-family: var(--f-mono); color: var(--neon-cyan); margin-bottom: 1rem; }
.hd-validate-trans, .hd-validate-answer { text-align: left; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.hd-validate-label { font-size: 0.65rem; color: var(--mute); letter-spacing: 0.2em; margin-bottom: 0.5rem; }
.hd-validate-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hd-validate-tag { background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.25); color: var(--neon-cyan); padding: 0.3rem 0.55rem; font-size: 0.8rem; }
.hd-validate-answer-text { font-size: 1.1rem; color: var(--ghost); padding: 0.6rem 0.75rem; background: rgba(255, 255, 255, 0.03); border-left: 2px solid var(--neon-yellow); }
.hd-validate-hint { margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.1em; }
.hd-validate-hint-ok { color: var(--ok); }
.hd-validate-hint-ko { color: var(--warn); }
.hd-muted { color: var(--mute); }
.hd-validate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* Resolve */
.hd-resolve { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-size: 2rem; font-weight: 700; letter-spacing: 0.2em; z-index: 180; pointer-events: none; animation: hd-resolve-flash 1.6s ease-out forwards; }
.hd-resolve-correct { color: var(--ok); text-shadow: 0 0 30px rgba(90, 255, 170, 0.7); background: radial-gradient(ellipse, rgba(90, 255, 170, 0.15), transparent 60%); }
.hd-resolve-wrong { color: var(--danger); text-shadow: 0 0 30px rgba(255, 74, 74, 0.7); background: radial-gradient(ellipse, rgba(255, 74, 74, 0.15), transparent 60%); }
@keyframes hd-resolve-flash {
  0% { opacity: 0; transform: scale(0.8); }
  20% { opacity: 1; transform: scale(1.05); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* End */
.hd-end { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; text-align: center; }
.hd-end-char { font-family: var(--f-zh); font-size: 7rem; color: var(--neon-yellow); text-shadow: 0 0 30px rgba(255, 240, 102, 0.5); line-height: 1; }
.hd-end-winner { font-family: var(--f-disp); font-size: 2.25rem; font-weight: 700; letter-spacing: 0.15em; color: var(--ghost); }
.hd-end-label { font-family: var(--f-disp); font-size: 0.75rem; letter-spacing: 0.4em; color: var(--neon-yellow); margin-bottom: 1.5rem; }
.hd-end-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; width: 100%; max-width: 320px; margin-bottom: 1.5rem; }
.hd-end-score { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); }
.hd-end-pname { font-family: var(--f-disp); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; color: var(--mute); }
.hd-end-pnum { font-family: var(--f-disp); font-size: 2.5rem; font-weight: 700; line-height: 1; }

/* =========================================================================
   GAME V2 — FULLSCREEN STAGE
   ========================================================================= */

/* DEBUG TEMPORAIRE — affiche la hauteur effective du stage */
.hd-debug-h {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
  font-family: monospace;
  font-size: 0.7rem;
  padding: 2px 6px;
  z-index: 999;
  pointer-events: none;
}

/* Container fullscreen — fixed au top, hauteur 100dvh */
.hd-stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 46, 138, 0.1), transparent 45%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 240, 255, 0.1), transparent 45%),
    var(--void);
  padding: 0.5rem 0.75rem 0.75rem;
  gap: 0.5rem;
  z-index: 10;
  overflow: hidden;
  box-sizing: border-box;
}

/* MODE CLAVIER : on colle le stage au BOTTOM (au-dessus du clavier).
   bottom: 0 = juste au-dessus du clavier sur Chromium qui shrink le viewport. */
.hd-stage.is-keyboard {
  top: auto !important;
  bottom: 0 !important;
  height: 280px !important;
  max-height: 280px !important;
  padding: 0.3rem 0.5rem 0.4rem !important;
  gap: 0.2rem !important;
}

/* Tout collé en haut : HUD → timer → carte. L'input est dans defend-bottom
   qui est en flex 0 0 auto donc tombe naturellement en bas, séparé par un gap. */
.hd-stage.is-keyboard > .hd-defend-main,
.hd-stage.is-keyboard > .hd-stage-board {
  justify-content: flex-start !important;
  padding: 0 !important;
  gap: 0.3rem !important;
  flex: 0 0 auto !important;
}

/* Espace de ~50px entre la carte (en haut) et l'input (en bas) */
.hd-stage.is-keyboard > .hd-defend-bottom {
  margin-top: auto !important;
  padding-top: 50px !important;
}

/* HUD prend sa taille naturelle au top */
.hd-stage > .hd-hud3 {
  flex: 0 0 auto;
}

.hd-stage > .hd-stage-board,
.hd-stage > .hd-defend-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  padding: 0.25rem 0;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}

.hd-stage > .hd-hand-wrap,
.hd-stage > .hd-defend-bottom {
  flex: 0 0 auto;
}

/* Quand le clavier est ouvert : pousser le contenu central vers le BAS pour
   qu'il soit collé à l'input, et compacter encore la zone centrale */
.hd-stage.is-keyboard > .hd-defend-main {
  justify-content: flex-end;
  padding: 0.15rem 0;
}

/* HUD3 — 3 cartouches distinctes */
.hd-hud3 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 0.4rem;
  align-items: stretch;
  min-height: 72px;
}

.hd-hud3-card {
  position: relative;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  transition: all 0.25s;
  overflow: hidden;
}
.hd-hud3-p2 { text-align: right; align-items: flex-end; }
.hd-hud3-card.is-dim { opacity: 0.4; }
.hd-hud3-card.is-attacker {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--neon-yellow);
  box-shadow: 0 0 12px rgba(255, 240, 102, 0.15);
}
.hd-hud3-name {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.hd-hud3-score {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ghost);
  line-height: 1;
}
.hd-hud3-dot {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  animation: hd-dot-pulse 1.5s infinite;
}
.hd-hud3-p2 .hd-hud3-dot { right: auto; left: 0.4rem; }
@keyframes hd-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Pot central */
.hd-hud3-pot {
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.3rem;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  gap: 0;
}
.hd-hud3-pot.is-filled {
  background: rgba(255, 240, 102, 0.08);
  border-color: rgba(255, 240, 102, 0.4);
  box-shadow: inset 0 0 12px rgba(255, 240, 102, 0.08);
}
.hd-hud3-pot-char {
  font-family: var(--f-zh);
  font-size: 1.3rem;
  color: var(--mute-2);
  line-height: 1;
  opacity: 0.6;
}
.hd-hud3-pot.is-filled .hd-hud3-pot-char {
  color: var(--neon-yellow);
  opacity: 0.85;
}
.hd-hud3-pot-num {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--mute);
  line-height: 1;
  margin-top: 0.1rem;
}
.hd-hud3-pot.is-filled .hd-hud3-pot-num { color: var(--neon-yellow); text-shadow: 0 0 10px rgba(255, 240, 102, 0.5); }
.hd-hud3-pot-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  color: var(--mute-2);
  margin-top: 0.15rem;
}
.hd-hud3-pot.is-filled .hd-hud3-pot-label { color: var(--neon-yellow); opacity: 0.7; }

/* Stage board central */
.hd-stage-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  position: relative;
  min-height: 0;
  width: 100%;
}
.hd-stage-phase {
  font-family: var(--f-disp);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0.3rem 0.75rem;
  border-left: 2px solid currentColor;
  align-self: flex-start;
}
.hd-stage-phase-who {
  color: var(--ghost);
  font-weight: 600;
}
.hd-stage-hint {
  font-size: 0.72rem;
  color: var(--mute);
  letter-spacing: 0.05em;
  text-align: center;
}

/* Deck 3D grand format */
.hd-deck3d {
  position: relative;
  width: 140px;
  height: 190px;
  perspective: 800px;
  margin: 0.5rem 0;
}
.hd-deck3d-card {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 46, 138, 0.2), rgba(19, 19, 31, 0.95) 40%, rgba(19, 19, 31, 0.85));
  border: 1px solid rgba(255, 46, 138, 0.3);
  transition: transform 0.3s;
}
.hd-deck3d-c4 { transform: translate(-10px, -10px) rotate(-4deg); opacity: 0.4; }
.hd-deck3d-c3 { transform: translate(-6px, -6px) rotate(-2.5deg); opacity: 0.55; }
.hd-deck3d-c2 { transform: translate(-3px, -3px) rotate(-1deg); opacity: 0.75; }
.hd-deck3d-c1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 46, 138, 0.15);
  animation: hd-deck-breathe 3s ease-in-out infinite;
}
.hd-deck3d-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 46, 138, 0.25), transparent 70%);
  pointer-events: none;
}
.hd-deck3d-char {
  font-family: var(--f-zh);
  font-size: 4rem;
  color: var(--neon-pink);
  opacity: 0.85;
  text-shadow: 0 0 20px rgba(255, 46, 138, 0.6);
  line-height: 1;
}
.hd-deck3d-label {
  font-family: var(--f-disp);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--mute);
}
.hd-deck3d-count {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--neon-cyan);
  letter-spacing: 0.05em;
}
@keyframes hd-deck-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 46, 138, 0.15); }
  50% { transform: translate(0, -2px) scale(1.015); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(255, 46, 138, 0.25); }
}

/* Main horizontale */
.hd-hand-wrap {
  width: 100%;
  overflow: hidden;
}
.hd-hand-scroll {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hd-hand-scroll::-webkit-scrollbar { display: none; }
.hd-hand-empty {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

.hd-hcard {
  flex: 0 0 auto;
  width: 92px;
  height: 110px;
  background: linear-gradient(160deg, rgba(19, 19, 31, 0.95), rgba(255, 46, 138, 0.12));
  border: 1px solid rgba(255, 46, 138, 0.35);
  color: var(--ghost);
  padding: 0.5rem 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  transition: all 0.2s ease;
  scroll-snap-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}
.hd-hcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 46, 138, 0.08));
  pointer-events: none;
}
.hd-hcard:hover, .hd-hcard:active {
  transform: translateY(-4px);
  border-color: var(--neon-pink);
  box-shadow: 0 6px 16px rgba(255, 46, 138, 0.35);
}
.hd-hcard-hanzi {
  font-family: var(--f-zh);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ghost);
  position: relative;
  z-index: 1;
  text-align: center;
}
.hd-hcard-pinyin {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  color: var(--neon-cyan);
  line-height: 1;
  position: relative;
  z-index: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.hd-hcard-fr {
  font-size: 0.66rem;
  color: var(--mute);
  line-height: 1.1;
  position: relative;
  z-index: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 2.2em;
  padding: 0 0.1rem;
}
.hd-hcard-draw {
  background: linear-gradient(160deg, rgba(19, 19, 31, 0.85), rgba(0, 240, 255, 0.12));
  border-color: rgba(0, 240, 255, 0.35);
  justify-content: center;
  gap: 0.3rem;
}
.hd-hcard-draw:hover { border-color: var(--neon-cyan); box-shadow: 0 6px 16px rgba(0, 240, 255, 0.35); }
.hd-hcard-draw-icon { font-size: 1.6rem; color: var(--neon-cyan); line-height: 1; }
.hd-hcard-draw-label { font-family: var(--f-disp); font-weight: 700; font-size: 0.65rem; letter-spacing: 0.15em; color: var(--neon-cyan); }
.hd-hcard-draw-count { font-family: var(--f-mono); font-size: 0.7rem; color: var(--mute); }
.hd-stuck { font-family: var(--f-disp); font-size: 0.8rem; letter-spacing: 0.15em; color: var(--danger); padding: 0.75rem 1rem; border: 1px dashed rgba(255, 74, 74, 0.35); }

/* Popup malédiction */
.hd-mpop-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: hd-modal-bg 0.2s;
}
.hd-mpop {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, rgba(19, 19, 31, 0.98), rgba(10, 10, 15, 0.98));
  border: 1px solid rgba(255, 46, 138, 0.4);
  box-shadow: 0 0 40px rgba(255, 46, 138, 0.25);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  animation: hd-mpop-in 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}
@keyframes hd-mpop-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.hd-mpop-close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--mute);
  font-size: 1.3rem;
  cursor: pointer;
}
.hd-mpop-close:hover { color: var(--danger); }
.hd-mpop-card {
  background: rgba(255, 46, 138, 0.08);
  border: 1px solid rgba(255, 46, 138, 0.3);
  padding: 1rem;
  text-align: center;
}
.hd-mpop-card-hanzi {
  font-family: var(--f-zh);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ghost);
  margin-bottom: 0.35rem;
}
.hd-mpop-card-pinyin {
  font-family: var(--f-mono);
  font-size: 0.9rem;
  color: var(--neon-cyan);
}
.hd-mpop-section-label {
  font-family: var(--f-disp);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--mute);
}
.hd-mpop-curses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
.hd-mpop-curse {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--mute);
  padding: 0.55rem 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.hd-mpop-curse:hover { border-color: rgba(255, 255, 255, 0.25); color: var(--ghost); }
.hd-mpop-curse.is-active {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ghost);
}
/* Les options de malus (sauf AUCUN) sont en rouge */
.hd-mpop-curse.is-curse {
  background: rgba(255, 74, 74, 0.06);
  border-color: rgba(255, 74, 74, 0.3);
  color: var(--danger);
}
.hd-mpop-curse.is-curse:hover {
  background: rgba(255, 74, 74, 0.14);
  border-color: var(--danger);
  color: var(--danger);
}
.hd-mpop-curse.is-curse.is-active {
  background: rgba(255, 74, 74, 0.18);
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: inset 0 0 10px rgba(255, 74, 74, 0.15);
}
.hd-mpop-curse-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.hd-mpop-curse-charges { font-size: 0.6rem; opacity: 0.7; }
.hd-mpop-nomalus {
  font-size: 0.78rem;
  color: var(--mute);
  text-align: center;
  padding: 0.5rem;
  font-style: italic;
}
.hd-mpop-attack { width: 100%; margin-top: 0.25rem; }

/* Timer v2 */
.hd-timer-v2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
}
.hd-timer-v2-bar { flex: 1; height: 5px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.hd-timer-v2-fill {
  height: 100%;
  background: linear-gradient(to right, var(--neon-cyan), var(--neon-yellow));
  transition: width 1s linear;
}
.hd-timer-v2.is-critical .hd-timer-v2-fill {
  background: linear-gradient(to right, var(--warn), var(--danger));
  animation: hd-timer-blink 0.6s infinite;
}
.hd-timer-v2-num {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.05rem;
  min-width: 3ch;
  text-align: right;
  color: var(--neon-cyan);
}
.hd-timer-v2.is-critical .hd-timer-v2-num { color: var(--danger); animation: hd-timer-blink 0.6s infinite; }

/* Playcard (defend) */
.hd-playcard {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: linear-gradient(160deg, rgba(19, 19, 31, 0.95), rgba(19, 19, 31, 0.7));
  border: 1px solid rgba(0, 240, 255, 0.35);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.12), inset 0 0 40px rgba(0, 240, 255, 0.04);
  overflow: hidden;
  animation: hd-playcard-in 0.4s ease-out;
}
@keyframes hd-playcard-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hd-playcard::before {
  content: "字";
  position: absolute;
  right: -0.5rem;
  top: 30%;
  transform: translateY(-50%);
  font-family: var(--f-zh);
  font-size: 7rem;
  font-weight: 700;
  color: var(--neon-cyan);
  opacity: 0.04;
  line-height: 1;
  pointer-events: none;
}
.hd-playcard.is-cursed {
  border-color: var(--neon-yellow);
  box-shadow: 0 0 30px rgba(255, 240, 102, 0.2);
}
.hd-playcard-curse {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: var(--neon-yellow);
  color: var(--void);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.6rem;
  padding: 0.2rem 0.45rem;
  letter-spacing: 0.15em;
}
.hd-playcard-hanzi {
  font-family: var(--f-zh);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--ghost);
  line-height: 1;
  margin-bottom: 0.35rem;
  position: relative;
  z-index: 1;
}
.hd-playcard-pinyin {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  color: var(--neon-cyan);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}
.hd-playcard-fr {
  font-size: 1.05rem;
  color: var(--ghost);
  margin-bottom: 0.5rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.hd-playcard-instruct {
  font-size: 0.68rem;
  color: var(--mute);
  letter-spacing: 0.15em;
  margin-top: 0.3rem;
  position: relative;
  z-index: 1;
}
.hd-playcard-hint {
  font-size: 0.72rem;
  color: var(--warn);
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* Answer zone (defend) */
.hd-answer-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.hd-answer-row {
  display: flex;
  gap: 0.4rem;
}
.hd-answer-row .hd-input {
  flex: 1;
  font-size: 1rem;
  padding: 0.75rem 0.8rem;
  text-align: center;
  border: 1px solid rgba(0, 240, 255, 0.3);
}
.hd-answer-row .hd-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); }
.hd-answer-row .hd-btn { padding: 0.75rem 1.25rem; }

.hd-bonus-tray-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

/* Vcard (validate) */
.hd-vcard {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, rgba(19, 19, 31, 0.95), rgba(10, 10, 15, 0.9));
  border: 1px solid rgba(255, 240, 102, 0.3);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: hd-playcard-in 0.35s ease-out;
}
.hd-vcard-top { text-align: center; }
.hd-vcard-hanzi {
  font-family: var(--f-zh);
  font-size: 2rem;
  line-height: 1;
  color: var(--ghost);
  margin-bottom: 0.25rem;
}
.hd-vcard-pinyin { font-family: var(--f-mono); font-size: 0.85rem; color: var(--neon-cyan); }
.hd-vcard-sep { height: 1px; background: rgba(255, 255, 255, 0.08); }
.hd-vcard-block { display: flex; flex-direction: column; gap: 0.3rem; }
.hd-vcard-label { font-size: 0.6rem; color: var(--mute); letter-spacing: 0.2em; }
.hd-vcard-trans { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hd-vcard-tag {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--neon-cyan);
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
}
.hd-vcard-answer {
  font-size: 1rem;
  color: var(--ghost);
  padding: 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--neon-yellow);
}
.hd-vcard-hint {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-family: var(--f-disp);
  font-weight: 600;
}
.hd-vcard-hint-ok { color: var(--ok); }
.hd-vcard-hint-ko { color: var(--warn); }

/* Validate actions v2 */
.hd-validate-v2-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.hd-btn-validate {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ghost);
  padding: 0.9rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.hd-btn-validate-icon { font-size: 1.3rem; font-family: var(--f-disp); font-weight: 700; line-height: 1; }
.hd-btn-validate-label { font-family: var(--f-disp); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em; }
.hd-btn-wrong { border-color: rgba(255, 74, 74, 0.4); color: var(--danger); }
.hd-btn-wrong:hover { background: rgba(255, 74, 74, 0.1); box-shadow: 0 0 20px rgba(255, 74, 74, 0.3); }
.hd-btn-correct { border-color: rgba(90, 255, 170, 0.4); color: var(--ok); }
.hd-btn-correct:hover { background: rgba(90, 255, 170, 0.1); box-shadow: 0 0 20px rgba(90, 255, 170, 0.3); }

@media (min-height: 720px) {
  .hd-deck3d { width: 160px; height: 220px; }
  .hd-deck3d-char { font-size: 4.5rem; }
  .hd-hcard { width: 100px; height: 135px; }
  .hd-hcard-hanzi { font-size: 1.8rem; }
  .hd-hcard-pinyin { font-size: 0.68rem; }
  .hd-hcard-fr { font-size: 0.7rem; }
  .hd-playcard-hanzi { font-size: 3.2rem; }
  .hd-vcard-hanzi { font-size: 2.3rem; }
}

/* =========================================================================
   DEFEND STAGE — compact sans scroll
   ========================================================================= */

.hd-stage-defend {
  /* layout principal géré par .hd-stage maintenant */
}

.hd-defend-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.25rem 0;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}

.hd-phase-center {
  align-self: center !important;
  font-size: 0.75rem;
}

.hd-defend-bottom {
  padding: 0.25rem 0 0.25rem;
}

/* Action row : [joker] [input] [OK] */
.hd-defend-action-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 0.4rem;
  align-items: stretch;
  height: 48px;
}

.hd-joker-btn {
  position: relative;
  height: 100%;
  background: rgba(90, 255, 170, 0.1);
  border: 1px solid rgba(90, 255, 170, 0.4);
  color: var(--ok);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  font-family: inherit;
  padding: 0.2rem 0.25rem;
  transition: all 0.2s;
}
.hd-joker-btn:hover:not(.is-disabled) {
  background: rgba(90, 255, 170, 0.18);
  border-color: var(--ok);
  box-shadow: 0 0 15px rgba(90, 255, 170, 0.3);
}
.hd-joker-btn.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: var(--mute-2);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.hd-joker-icon {
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px currentColor);
}
.hd-joker-count {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--ghost);
}

.hd-defend-action-row .hd-input {
  height: 100%;
  padding: 0 0.8rem;
  font-size: 0.95rem;
  text-align: center;
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-sizing: border-box;
}
.hd-defend-action-row .hd-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); }

.hd-defend-ok {
  height: 100%;
  padding: 0 1rem;
}

/* Joker popup */
.hd-jpop-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: hd-modal-bg 0.2s;
}
.hd-jpop {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, rgba(19, 19, 31, 0.98), rgba(10, 10, 15, 0.98));
  border: 1px solid rgba(90, 255, 170, 0.4);
  box-shadow: 0 0 40px rgba(90, 255, 170, 0.18);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  animation: hd-mpop-in 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}
.hd-jpop-close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--mute);
  font-size: 1.3rem;
  cursor: pointer;
}
.hd-jpop-close:hover { color: var(--danger); }
.hd-jpop-title {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  color: var(--ok);
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(90, 255, 170, 0.2);
}
.hd-jpop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.hd-jpop-item {
  position: relative;
  background: rgba(90, 255, 170, 0.06);
  border: 1px solid rgba(90, 255, 170, 0.3);
  color: var(--ghost);
  padding: 0.7rem 0.4rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  min-height: 64px;
}
.hd-jpop-item:hover:not(:disabled) {
  background: rgba(90, 255, 170, 0.13);
  border-color: var(--ok);
  transform: translateY(-2px);
}
.hd-jpop-item:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-style: dashed;
}
.hd-jpop-item-charges {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  color: var(--ok);
  font-weight: 700;
}
.hd-jpop-item-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--ok);
  text-align: center;
  line-height: 1;
}
.hd-jpop-item-sub {
  font-size: 0.58rem;
  color: var(--mute);
  line-height: 1.15;
  text-align: center;
}
.hd-jpop-cancel { width: 100%; }

/* =========================================================================
   PLAYER STATS (compact + popup)
   ========================================================================= */

.hd-pstats {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.25rem;
  font-family: var(--f-mono);
  color: var(--mute);
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}
.hd-pstats-right { justify-content: flex-end; }

.hd-pstat {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  opacity: 0.85;
}
.hd-hud3-card.is-attacker .hd-pstat { opacity: 1; }

.hd-pstat-ico {
  font-family: var(--f-disp);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85em;
  text-align: center;
}
.hd-pstat-val {
  font-family: var(--f-disp);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ghost);
}

/* Popup stats joueur */
.hd-psp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: hd-modal-bg 0.2s;
}
.hd-psp {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, rgba(19, 19, 31, 0.98), rgba(10, 10, 15, 0.98));
  border: 1px solid;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.08);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  animation: hd-mpop-in 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.2);
}
.hd-psp-close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--mute);
  font-size: 1.3rem;
  cursor: pointer;
}
.hd-psp-close:hover { color: var(--danger); }
.hd-psp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hd-psp-name {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.5rem;
}
.hd-psp-score {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.hd-psp-score-num {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ghost);
  line-height: 1;
}
.hd-psp-score-label {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--mute);
}

.hd-psp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
}
.hd-psp-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.55rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.hd-psp-stat-icon { font-size: 1.2rem; line-height: 1; }
.hd-psp-stat-num {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ghost);
  line-height: 1;
}
.hd-psp-stat-label {
  font-family: var(--f-disp);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--mute);
}

.hd-psp-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.hd-psp-section-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--mute);
}
.hd-psp-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.hd-psp-empty {
  font-size: 0.75rem;
  color: var(--mute-2);
  font-style: italic;
  grid-column: 1 / -1;
}
.hd-psp-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.55rem 0.35rem;
  background: rgba(90, 255, 170, 0.08);
  border: 1px solid rgba(90, 255, 170, 0.35);
  color: var(--ok);
  min-height: 56px;
}
.hd-psp-chip.is-used {
  opacity: 0.3;
  border-style: dashed;
}
.hd-psp-chip-malus {
  background: rgba(255, 74, 74, 0.08);
  border-color: rgba(255, 74, 74, 0.35);
  color: var(--danger);
}
.hd-psp-chip-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1;
}
.hd-psp-chip-count {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.95;
  line-height: 1;
}

/* =========================================================================
   CARTE FACE CACHÉE + RÉVÉLATION
   ========================================================================= */

.hd-card-hidden {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 190px;
  cursor: pointer;
  perspective: 800px;
  animation: hd-card-hidden-in 0.4s ease-out;
}
@keyframes hd-card-hidden-in {
  from { opacity: 0; transform: translateY(14px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hd-card-hidden-inner {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255, 46, 138, 0.08) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, rgba(255, 46, 138, 0.22), rgba(19, 19, 31, 0.95) 50%, rgba(0, 240, 255, 0.15));
  border: 1px solid rgba(255, 46, 138, 0.5);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 46, 138, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  overflow: hidden;
  animation: hd-card-breathe 2.2s ease-in-out infinite;
}
@keyframes hd-card-breathe {
  0%, 100% { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 46, 138, 0.2); }
  50% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 46, 138, 0.4); }
}
.hd-card-hidden-char {
  font-family: var(--f-zh);
  font-size: 5rem;
  color: var(--neon-pink);
  opacity: 0.55;
  text-shadow: 0 0 25px rgba(255, 46, 138, 0.7);
  line-height: 1;
}
.hd-card-hidden-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--ghost);
  opacity: 0.75;
  text-align: center;
}
.hd-card-hidden-curse {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: var(--neon-yellow);
  color: var(--void);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.6rem;
  padding: 0.2rem 0.45rem;
  letter-spacing: 0.15em;
}

/* Ligne reveal + joker big */
.hd-reveal-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0.4rem;
  align-items: stretch;
  height: 48px;
}
.hd-reveal-btn {
  height: 100%;
  width: 100%;
  font-size: 0.9rem;
}
.hd-joker-big { height: 100%; }

/* Timer en pause (avant révélation) */
.hd-timer-v2.is-paused { opacity: 0.5; }
.hd-timer-v2.is-paused .hd-timer-v2-fill {
  background: linear-gradient(to right, var(--mute-2), var(--mute));
}
.hd-timer-v2.is-paused .hd-timer-v2-num { color: var(--mute); }

/* =========================================================================
   MODE CLAVIER OUVERT (compactage ultra-agressif)
   ========================================================================= */

.hd-stage.is-keyboard {
  padding: 0.25rem 0.5rem;
  gap: 0.2rem;
}

/* HUD ultra compact */
.hd-stage.is-keyboard .hd-hud3 {
  min-height: 36px;
  grid-template-columns: 1fr 56px 1fr;
  gap: 0.3rem;
}
.hd-stage.is-keyboard .hd-hud3-card {
  padding: 0.2rem 0.4rem;
}
.hd-stage.is-keyboard .hd-hud3-score {
  font-size: 0.95rem;
}
.hd-stage.is-keyboard .hd-hud3-name {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}
.hd-stage.is-keyboard .hd-hud3-dot {
  width: 5px; height: 5px;
  top: 0.2rem;
  right: 0.25rem;
}
.hd-stage.is-keyboard .hd-hud3-p2 .hd-hud3-dot { left: 0.25rem; }
.hd-stage.is-keyboard .hd-pstats {
  margin-top: 0.08rem;
  gap: 0.3rem;
}
.hd-stage.is-keyboard .hd-pstat-ico,
.hd-stage.is-keyboard .hd-pstat-val {
  font-size: 0.58rem;
}
.hd-stage.is-keyboard .hd-hud3-pot-char {
  font-size: 0.75rem;
}
.hd-stage.is-keyboard .hd-hud3-pot-num {
  font-size: 0.8rem;
}
.hd-stage.is-keyboard .hd-hud3-pot-label {
  font-size: 0.45rem;
  margin-top: 0.05rem;
}

/* Zone centrale compacte */
.hd-stage.is-keyboard .hd-stage-phase {
  display: none;
}
.hd-stage.is-keyboard .hd-defend-main {
  gap: 0.25rem;
  padding: 0;
  justify-content: flex-start;
}
.hd-stage.is-keyboard .hd-timer-v2 {
  max-width: none;
  width: 100%;
}
.hd-stage.is-keyboard .hd-timer-v2-bar { height: 4px; }
.hd-stage.is-keyboard .hd-timer-v2-num { font-size: 0.8rem; min-width: 2.5ch; }

/* Carte mini */
.hd-stage.is-keyboard .hd-playcard {
  padding: 0.4rem 0.6rem;
  max-width: 100%;
  width: 100%;
}
.hd-stage.is-keyboard .hd-playcard::before {
  display: none;
}
.hd-stage.is-keyboard .hd-playcard-hanzi {
  font-size: 1.5rem;
  margin-bottom: 0.1rem;
}
.hd-stage.is-keyboard .hd-playcard-pinyin {
  font-size: 0.75rem;
  margin-bottom: 0.1rem;
}
.hd-stage.is-keyboard .hd-playcard-fr {
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
  padding: 0.15rem;
}
.hd-stage.is-keyboard .hd-playcard-curse {
  font-size: 0.52rem;
  padding: 0.1rem 0.3rem;
  top: 0.2rem;
  right: 0.2rem;
}
.hd-stage.is-keyboard .hd-playcard-instruct {
  display: none;
}
.hd-stage.is-keyboard .hd-playcard-hint {
  display: none;
}
.hd-stage.is-keyboard .hd-audio-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  margin: 0.2rem 0;
}

/* Bottom */
.hd-stage.is-keyboard .hd-defend-bottom {
  padding: 0;
}
.hd-stage.is-keyboard .hd-defend-action-row {
  height: 40px;
  grid-template-columns: 46px 1fr auto;
}
.hd-stage.is-keyboard .hd-defend-action-row .hd-input {
  font-size: 0.9rem;
  padding: 0 0.6rem;
}
.hd-stage.is-keyboard .hd-joker-btn {
  padding: 0.15rem 0.2rem;
}
.hd-stage.is-keyboard .hd-joker-icon { font-size: 1rem; }
.hd-stage.is-keyboard .hd-joker-count { font-size: 0.65rem; }
.hd-stage.is-keyboard .hd-defend-ok {
  padding: 0 0.75rem;
  font-size: 0.8rem;
}

/* =========================================================================
   TRAIN — entraînement solo
   ========================================================================= */

/* Bande TRAIN sur la home (variante violette) */
.hd-band-train .hd-band-bg-char {
  color: rgba(182, 109, 255, 0.08);
}
.hd-band-train { border-color: rgba(182, 109, 255, 0.15); }
.hd-band-train:hover:not(.is-disabled) {
  border-color: var(--neon-violet);
  box-shadow: 0 0 30px rgba(182, 109, 255, 0.2);
}
.hd-band-train .hd-band-title { color: var(--neon-violet); }
.hd-band-train .hd-band-line { background: linear-gradient(to right, var(--neon-violet), transparent); }

/* CONFIG */
.hd-train-dirs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.hd-train-dir {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--mute);
  padding: 0.7rem 0.6rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: all 0.2s;
}
.hd-train-dir:hover { border-color: rgba(182, 109, 255, 0.35); }
.hd-train-dir.is-active {
  border-color: var(--neon-violet);
  background: rgba(182, 109, 255, 0.08);
  color: var(--ghost);
  box-shadow: inset 0 0 12px rgba(182, 109, 255, 0.1);
}
.hd-train-dir-short {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}
.hd-train-dir.is-active .hd-train-dir-short { color: var(--neon-violet); }
.hd-train-dir-sub { font-size: 0.65rem; color: var(--mute); letter-spacing: 0.08em; }

.hd-train-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.hd-train-mode {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--mute);
  padding: 0.85rem 0.6rem;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  transition: all 0.2s;
}
.hd-train-mode:hover { border-color: rgba(0, 240, 255, 0.35); }
.hd-train-mode.is-active {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  color: var(--ghost);
}
.hd-train-mode-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.18em;
}
.hd-train-mode.is-active .hd-train-mode-label { color: var(--neon-cyan); }
.hd-train-mode-sub { font-size: 0.7rem; color: var(--mute); }

.hd-train-hint { font-size: 0.7rem; color: var(--mute-2); margin-top: 0.5rem; }

/* PLAYING */
.hd-train-stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(182, 109, 255, 0.1), transparent 45%),
    radial-gradient(ellipse at 85% 100%, rgba(0, 240, 255, 0.1), transparent 45%),
    var(--void);
  padding: 0.75rem 1rem 1rem;
  gap: 0.75rem;
  z-index: 10;
  overflow: hidden;
  box-sizing: border-box;
}

.hd-train-topbar {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 0.6rem;
  align-items: center;
}
.hd-train-quit {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--mute);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.hd-train-quit:hover { color: var(--danger); border-color: rgba(255, 74, 74, 0.5); }

.hd-train-progress {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hd-train-progress-num {
  font-family: var(--f-disp);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.hd-train-progress-cur { color: var(--neon-violet); font-weight: 700; }
.hd-train-progress-tot { color: var(--mute); margin-left: 0.2rem; }
.hd-train-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.hd-train-progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--neon-violet), var(--neon-cyan));
  transition: width 0.4s ease-out;
}

.hd-train-score {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.85rem;
}
.hd-train-score-ok { color: var(--ok); }
.hd-train-score-sep { color: var(--mute-2); }
.hd-train-score-ko { color: var(--danger); }

.hd-train-board {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 0;
  position: relative;
}

.hd-train-dir-tag {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--neon-violet);
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(182, 109, 255, 0.4);
  background: rgba(182, 109, 255, 0.06);
}

.hd-train-question {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(160deg, rgba(19, 19, 31, 0.95), rgba(19, 19, 31, 0.7));
  border: 1px solid rgba(182, 109, 255, 0.3);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 0 30px rgba(182, 109, 255, 0.12);
  transition: all 0.3s;
}
.hd-train-question.is-correct {
  border-color: var(--ok);
  background: linear-gradient(160deg, rgba(90, 255, 170, 0.15), rgba(19, 19, 31, 0.7));
  box-shadow: 0 0 35px rgba(90, 255, 170, 0.25);
}
.hd-train-question.is-wrong {
  border-color: var(--danger);
  background: linear-gradient(160deg, rgba(255, 74, 74, 0.15), rgba(19, 19, 31, 0.7));
  box-shadow: 0 0 35px rgba(255, 74, 74, 0.25);
}

.hd-train-hanzi {
  font-family: var(--f-zh);
  font-size: 3.5rem;
  color: var(--ghost);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.hd-train-pinyin {
  font-family: var(--f-mono);
  font-size: 1.6rem;
  color: var(--neon-cyan);
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.hd-train-fr {
  font-size: 1.3rem;
  color: var(--ghost);
  font-weight: 500;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}
.hd-train-audio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--neon-cyan);
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  font-family: inherit;
  margin: 0.5rem 0;
  transition: all 0.15s;
}
.hd-train-audio:hover {
  background: rgba(0, 240, 255, 0.15);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
}
.hd-train-audio-icon { font-size: 1.3rem; line-height: 1; }
.hd-train-audio-label { font-family: var(--f-disp); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.15em; }
.hd-train-instruct {
  font-size: 0.7rem;
  color: var(--mute);
  letter-spacing: 0.15em;
  margin-top: 0.6rem;
}

.hd-train-feedback {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  animation: hd-train-fb-in 0.25s ease-out;
}
@keyframes hd-train-fb-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.hd-train-feedback-correct { background: rgba(90, 255, 170, 0.15); border: 1px solid var(--ok); color: var(--ok); }
.hd-train-feedback-wrong { background: rgba(255, 74, 74, 0.15); border: 1px solid var(--danger); color: var(--danger); }
.hd-train-feedback-icon { font-size: 1.1rem; line-height: 1; }
.hd-train-feedback-text { line-height: 1; }

.hd-train-answer { flex: 0 0 auto; }
.hd-train-qcm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.hd-train-qcm-opt {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ghost);
  padding: 0.85rem 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-word;
}
.hd-train-qcm-opt:hover:not(:disabled) {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.06);
}
.hd-train-qcm-opt.is-correct {
  border-color: var(--ok);
  background: rgba(90, 255, 170, 0.15);
  color: var(--ok);
  box-shadow: 0 0 12px rgba(90, 255, 170, 0.25);
}
.hd-train-qcm-opt.is-wrong {
  border-color: var(--danger);
  background: rgba(255, 74, 74, 0.15);
  color: var(--danger);
}
.hd-train-qcm-opt:disabled { cursor: default; }

.hd-train-text-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: stretch;
  height: 48px;
}
.hd-train-text-row .hd-input {
  height: 100%;
  text-align: center;
  font-size: 1rem;
  border-color: rgba(0, 240, 255, 0.3);
  box-sizing: border-box;
}
.hd-train-text-row .hd-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); }
.hd-train-text-row .hd-btn { height: 100%; padding: 0 1.2rem; }

/* QCM 4/6/8 size selector dans la config */
.hd-train-qcm-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.hd-train-qcm-size {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--mute);
  padding: 0.85rem 0.6rem;
  cursor: pointer;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.4rem;
  transition: all 0.2s;
}
.hd-train-qcm-size:hover { border-color: rgba(0, 240, 255, 0.35); }
.hd-train-qcm-size.is-active {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  color: var(--neon-cyan);
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.1);
}

/* QCM grilles adaptatives selon le nombre d'options */
.hd-train-qcm-4 { grid-template-columns: 1fr 1fr; }
.hd-train-qcm-6 { grid-template-columns: 1fr 1fr; }
.hd-train-qcm-8 { grid-template-columns: 1fr 1fr; }
@media (min-width: 480px) {
  .hd-train-qcm-6 { grid-template-columns: 1fr 1fr 1fr; }
  .hd-train-qcm-8 { grid-template-columns: 1fr 1fr; }
}

/* Loading initial avant la session */
.hd-train-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem;
  font-size: 0.78rem;
  color: var(--neon-cyan);
  font-family: var(--f-mono);
}
.hd-train-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 240, 255, 0.2);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: hd-spin 0.8s linear infinite;
}
@keyframes hd-spin {
  to { transform: rotate(360deg); }
}

/* Zone réponse texte avec feedback inline */
.hd-train-text-zone {
  width: 100%;
}
.hd-train-text-feedback {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.hd-train-text-given {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid;
  border-left-width: 3px;
  background: rgba(255, 255, 255, 0.02);
}
.hd-train-text-given-correct {
  border-color: var(--ok);
  background: rgba(90, 255, 170, 0.06);
}
.hd-train-text-given-wrong {
  border-color: var(--danger);
  background: rgba(255, 74, 74, 0.06);
}
.hd-train-text-label {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--mute);
}
.hd-train-text-given-correct .hd-train-text-label { color: var(--ok); }
.hd-train-text-given-wrong .hd-train-text-label { color: var(--danger); }
.hd-train-text-value {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  color: var(--ghost);
  word-break: break-word;
}
.hd-train-text-given-correct .hd-train-text-value { color: var(--ok); }
.hd-train-text-given-wrong .hd-train-text-value { color: var(--danger); }

/* Bouton SUIVANT qui apparaît au feedback */
.hd-train-next {
  width: 100%;
  margin-top: 0.6rem;
  animation: hd-train-next-in 0.25s ease-out;
}
@keyframes hd-train-next-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* END */
.hd-train-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem 1rem;
}
.hd-train-end-score {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.hd-train-end-num {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 4rem;
  color: var(--ghost);
  line-height: 1;
}
.hd-train-end-tot {
  font-family: var(--f-mono);
  font-size: 1.3rem;
  color: var(--mute);
}
.hd-train-end-pct {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.1em;
  line-height: 1;
}
.hd-train-end-label {
  font-family: var(--f-disp);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--mute);
  margin-top: 0.3rem;
}

.hd-train-wrongs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.hd-train-wrong {
  background: rgba(255, 74, 74, 0.05);
  border: 1px solid rgba(255, 74, 74, 0.25);
  border-left: 3px solid var(--danger);
  padding: 0.6rem 0.75rem;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 0.4rem 0.6rem;
  align-items: baseline;
}
.hd-train-wrong-hanzi {
  font-family: var(--f-zh);
  font-size: 1.3rem;
  color: var(--ghost);
  grid-row: span 2;
  align-self: center;
}
.hd-train-wrong-pinyin {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--neon-cyan);
}
.hd-train-wrong-fr {
  font-size: 0.78rem;
  color: var(--ghost);
}
.hd-train-wrong-given {
  grid-column: 2 / -1;
  font-size: 0.7rem;
  color: var(--mute);
}
.hd-train-wrong-given span { color: var(--danger); font-family: var(--f-mono); }

@media (min-width: 600px) {
  .hd-root { padding: 0 1.5rem 2rem; }
  .hd-band-content { padding: 1.75rem 1.5rem; }
  .hd-band-title { font-size: 2.1rem; }
  .hd-tokens { grid-template-columns: repeat(3, 1fr); }
  .hd-hand { grid-template-columns: repeat(5, 1fr); }
  .hd-card-hanzi { font-size: 4.5rem; }
}