:root{
  --bg1:#0b1020;
  --bg2:#1b0f3a;
  --fg:#f2f6ff;
  --muted: rgba(242,246,255,.72);

  --bd: rgba(255,255,255,.18);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow2: 0 10px 22px rgba(0,0,0,.28);

  --r2: 26px;
  --gap: 12px;
  --cardRatio: 4 / 5;

  --dos-carte-url: url("./assets/dosCarte3.png");

  --kbdH: 36%;

  --topbarH: 52px;
}

*{ box-sizing: border-box; }
html,body{
  height: 100%;
  margin: 0;
  background: var(--bg1);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body{ overflow: hidden; }

/* ----- Décor ----- */
.bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:
  radial-gradient(1200px 700px at 10% 15%, rgba(57,215,255,.18), transparent 65%),
  radial-gradient(900px 600px at 85% 30%, rgba(255,91,214,.16), transparent 60%),
  radial-gradient(1000px 700px at 50% 90%, rgba(125,255,106,.12), transparent 60%),
  linear-gradient(135deg, var(--bg1), var(--bg2));
}
.blob{
  position:absolute; width:520px; height:520px; border-radius:999px;
  filter: blur(35px) saturate(140%);
  opacity:.55;
  animation: floaty 9s ease-in-out infinite;
}
.b1{ left:-120px; top:-140px; background: radial-gradient(circle at 30% 30%, rgba(57,215,255,.85), rgba(139,123,255,.10) 65%, transparent 70%); }
.b2{ right:-160px; top:80px; background: radial-gradient(circle at 30% 30%, rgba(255,91,214,.85), rgba(255,211,106,.15) 60%, transparent 70%); animation-duration: 11s; }
.b3{ left:22%; bottom:-220px; background: radial-gradient(circle at 30% 30%, rgba(125,255,106,.75), rgba(57,215,255,.10) 65%, transparent 70%); animation-duration: 13s; }
@keyframes floaty{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px, -28px) scale(1.08); }
  100%{ transform: translate(0,0) scale(1); }
}
.grain{
  position:absolute; inset:0; z-index:-1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.14;
  mix-blend-mode: overlay;
}

/* ===================================================
   TOPBAR
=================================================== */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: var(--topbarH);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 8px;
  background: rgba(11,16,32,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd);
  padding-top: env(safe-area-inset-top, 0px);
}
.brand{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo{
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,211,106,.95), rgba(255,91,214,.85));
  box-shadow: var(--shadow2);
  transform: rotate(-3deg);
  font-size: 16px;
}
.brand-text{ display: flex; flex-direction: column; }
.title{ font-weight: 900; letter-spacing: .2px; font-size: 14px; line-height: 1.1; }
.subtitle{ font-size: 10px; color: var(--muted); }

.hudBar{
  display: flex; align-items: center; gap: 6px;
  flex: 1; justify-content: center; min-width: 0;
}
.hudMini{
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--bd);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.hudMini.accent{ border-color: rgba(255,211,106,.35); background: rgba(255,211,106,.08); }
.hudMiniLabel{ font-size: 11px; color: var(--muted); }
.hudMiniVal{ font-size: 13px; font-weight: 900; }
.pseudo-val{ max-width: 70px; overflow: hidden; text-overflow: ellipsis; }

.topActions{ display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

.btn{
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.08);
  color: var(--fg); padding: 8px 12px; border-radius: 999px;
  cursor: pointer; font-weight: 800; box-shadow: var(--shadow2);
  transition: .18s transform, .18s filter, .18s background;
  font-size: 13px; white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn.primary{ border-color: transparent; background: linear-gradient(135deg, rgba(255,91,214,.85), rgba(57,215,255,.75)); }
.btn.gold{ border-color: rgba(180,40,40,.75); background: linear-gradient(135deg, rgba(255,211,106,.35), rgba(255,91,214,.22)); opacity: .6; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn.active{ border-color: rgba(255,211,106,1); box-shadow: 0 0 0 4px rgba(255,211,106,.25), var(--shadow2); opacity: 1; }

.iconBtn{ width: 36px; height: 36px; padding: 0; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }

.seg{ display: flex; border: 1px solid var(--bd); border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); box-shadow: var(--shadow2); }
.segBtn{ border: 0; padding: 8px 12px; color: var(--fg); background: transparent; cursor: pointer; font-weight: 800; transition: .2s transform, .2s background; font-size: 13px; }
.segBtn:hover{ transform: translateY(-1px); }
.segBtn.active{ background: linear-gradient(135deg, rgba(57,215,255,.35), rgba(139,123,255,.25)); }

.desktopOnly{ display: flex; }

.switch{ display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--bd); padding: 7px 10px; border-radius: 999px; box-shadow: var(--shadow2); }
.switchLabel{ font-size: 12px; color: var(--muted); font-weight: 800; }
.switch input{ display: none; }
.slider{ width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); flex-shrink: 0; }
.slider::after{ content:""; width: 16px; height: 16px; border-radius: 999px; position: absolute; top: 3px; left: 3px; background: rgba(255,255,255,.9); transition: .18s transform, .18s background; }
.switch input:checked + .slider{ background: rgba(125,255,106,.22); }
.switch input:checked + .slider::after{ transform: translateX(18px); background: rgba(255,211,106,.95); }

/* ===================================================
   MENU PANEL RÉTRACTABLE
=================================================== */
.menuBackdrop{
  position: fixed; inset: 0; z-index: 45;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.menuBackdrop.open{ opacity: 1; pointer-events: auto; }

.menuPanel{
  position: fixed; top: var(--topbarH); right: 0; bottom: 0;
  width: min(320px, 88vw); z-index: 50;
  background: rgba(11,16,32,.96);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--bd);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.menuPanel.open{ transform: translateX(0); }
.menuPanel[aria-hidden="false"]{}

.menuInner{ padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.menuSection{ display: flex; flex-direction: column; gap: 8px; }
.menuLabel{ font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.menuOptions{ display: flex; flex-direction: column; gap: 8px; }

.hudGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hudItem{ background: rgba(255,255,255,.06); border: 1px solid var(--bd); border-radius: 14px; padding: 8px 10px; box-shadow: var(--shadow2); overflow: hidden; position: relative; }
.hudItem::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(260px 120px at 0% 0%, rgba(57,215,255,.10), transparent 60%); pointer-events:none; }
.hudItem.accent::before{ background: radial-gradient(260px 120px at 0% 0%, rgba(255,211,106,.14), transparent 60%), radial-gradient(260px 120px at 100% 0%, rgba(255,91,214,.10), transparent 60%); }
.hudLabel{ font-size: 11px; color: var(--muted); font-weight: 900; }
.hudValue{ font-size: 16px; font-weight: 1000; letter-spacing: .2px; margin-top: 2px; }

/* ===================================================
   PLATEAU
=================================================== */
.main{
  position: fixed; top: var(--topbarH); left: 0; right: 0; bottom: 0;
  padding: 8px; display: flex; align-items: center; justify-content: center;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}
.board{
  display: grid; gap: var(--gap);
  align-items: stretch; justify-content: center; align-content: center;
  width: 100%; height: 100%;
  contain: layout style;
}

/* ===================================================
   CARTES
=================================================== */
.card{
  perspective: 1200px; position: relative;
  --back-rot: 0deg; --back-flipx: 1; --back-flipy: 1;
  --back-scale: 1.02; --back-zoom: 3.95;
  --back-posx: 50%; --back-posy: 50%;
  --back-hue: 0deg; --back-sat: 1.05; --back-contrast: 1.05;
  --s1x: 25%; --s1y: 30%; --s1r: 18%; --s1c: rgba(120,70,30,.18);
  --s2x: 70%; --s2y: 55%; --s2r: 14%; --s2c: rgba(90,50,20,.14);
  --s3x: 40%; --s3y: 78%; --s3r: 22%; --s3c: rgba(140,85,35,.15);
  --s4x: 60%; --s4y: 18%; --s4r: 12%; --s4c: rgba(110,60,25,.12);
  --bite1x: 0%;   --bite1y: 22%;  --bite1r: 10%;
  --bite2x: 100%; --bite2y: 66%;  --bite2r: 8%;
  --bite3x: 58%;  --bite3y: 0%;   --bite3r: 7%;
  --tear-x: 6%; --tear-y: 8%; --tear-rot: 30deg;
  --tear-span: 28deg; --tear-radius: 52px;
  --edge-dark: .22;
}
.cardBtn{ width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; display: block; container-type: inline-size; aspect-ratio: var(--cardRatio); }

.cardInner{
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.card.flipped .cardInner{ transform: rotateY(180deg); }
/* Libérer le layer GPU quand la carte est stable */
.card.matched .cardInner,
.card:not(.flipped) .cardInner{ will-change: auto; }

.face{
  position: absolute; inset: 0;
  border-radius: var(--r2);
  backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow); overflow: hidden;
  -webkit-mask-image:
    linear-gradient(#000,#000),
    conic-gradient(from var(--tear-rot) at var(--tear-x) var(--tear-y), transparent 0 var(--tear-span), #000 calc(var(--tear-span) + .2deg) 360deg),
    radial-gradient(circle at var(--bite1x) var(--bite1y), transparent 0 var(--bite1r), #000 calc(var(--bite1r) + 1px)),
    radial-gradient(circle at var(--bite2x) var(--bite2y), transparent 0 var(--bite2r), #000 calc(var(--bite2r) + 1px)),
    radial-gradient(circle at var(--bite3x) var(--bite3y), transparent 0 var(--bite3r), #000 calc(var(--bite3r) + 1px));
  mask-image:
    linear-gradient(#000,#000),
    conic-gradient(from var(--tear-rot) at var(--tear-x) var(--tear-y), transparent 0 var(--tear-span), #000 calc(var(--tear-span) + .2deg) 360deg),
    radial-gradient(circle at var(--bite1x) var(--bite1y), transparent 0 var(--bite1r), #000 calc(var(--bite1r) + 1px)),
    radial-gradient(circle at var(--bite2x) var(--bite2y), transparent 0 var(--bite2r), #000 calc(var(--bite2r) + 1px)),
    radial-gradient(circle at var(--bite3x) var(--bite3y), transparent 0 var(--bite3r), #000 calc(var(--bite3r) + 1px));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: center; mask-position: center;
}
.face::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(0,0,0, calc(var(--edge-dark) + .10)), transparent 14px),
    linear-gradient(to left,  rgba(0,0,0, calc(var(--edge-dark) + .08)), transparent 14px),
    linear-gradient(to bottom, rgba(0,0,0, calc(var(--edge-dark) + .10)), transparent 14px),
    linear-gradient(to top,    rgba(0,0,0, calc(var(--edge-dark) + .08)), transparent 14px),
    radial-gradient(140px 90px at 50% 0%, rgba(255,255,255,.10), transparent 65%),
    conic-gradient(from var(--tear-rot) at var(--tear-x) var(--tear-y), rgba(255,255,255,.55) 0deg, rgba(255,255,255,0) var(--tear-span), rgba(0,0,0,0) 360deg);
  -webkit-mask-image:
    linear-gradient(#000,#000),
    radial-gradient(circle at var(--tear-x) var(--tear-y), #000 0 calc(var(--tear-radius)), transparent calc(var(--tear-radius) + 1px));
  mask-image:
    linear-gradient(#000,#000),
    radial-gradient(circle at var(--tear-x) var(--tear-y), #000 0 calc(var(--tear-radius)), transparent calc(var(--tear-radius) + 1px));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%;
  mix-blend-mode: multiply; opacity: .72;
}

.back{ display: flex; align-items: center; justify-content: center; }
.back::before{
  content:""; position: absolute; inset: -42%;
  background-image:
    var(--dos-carte-url),
    radial-gradient(circle at var(--s1x) var(--s1y), var(--s1c) 0, rgba(0,0,0,0) var(--s1r)),
    radial-gradient(circle at var(--s2x) var(--s2y), var(--s2c) 0, rgba(0,0,0,0) var(--s2r)),
    radial-gradient(circle at var(--s3x) var(--s3y), var(--s3c) 0, rgba(0,0,0,0) var(--s3r)),
    radial-gradient(circle at var(--s4x) var(--s4y), var(--s4c) 0, rgba(0,0,0,0) var(--s4r));
  background-size:
    calc(100% * var(--back-zoom)) calc(100% * var(--back-zoom)),
    auto, auto, auto, auto;
  background-position: var(--back-posx) var(--back-posy), center, center, center, center;
  background-repeat: no-repeat;
  transform: rotate(var(--back-rot)) scale(var(--back-scale)) scaleX(var(--back-flipx)) scaleY(var(--back-flipy));
  filter: hue-rotate(var(--back-hue)) saturate(var(--back-sat)) contrast(var(--back-contrast));
  opacity: .95;
  /* will-change supprimé : réservait du GPU sur toutes les cartes en permanence */
}
.back::after{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(280px 180px at 30% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(420px 260px at 70% 70%, rgba(0,0,0,.16), transparent 65%),
    repeating-linear-gradient(12deg, rgba(0,0,0,.06) 0 1px, transparent 1px 6px);
  mix-blend-mode: multiply; opacity: .55; pointer-events: none;
}
.back .mark{ position: relative; z-index: 2; font-size: 24px; font-weight: 1000; opacity: .55; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); transform: rotate(-6deg); }

.front{
  transform: rotateY(180deg);
  background:
    radial-gradient(260px 140px at 0% 0%, rgba(57,215,255,.16), transparent 60%),
    radial-gradient(260px 140px at 100% 0%, rgba(255,91,214,.16), transparent 60%),
    rgba(255,255,255,.08);
  padding: 6px; display: flex; flex-direction: column; gap: 6px;
}
.cardHeader{ display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; }
.names{ display: flex; flex-direction: column; gap: 2px; }
.nameEn{ font-size: 45px; font-weight: 1000; letter-spacing: .2px; line-height: 1.02; color: var(--fg); }
.nameFr{ font-size: 36px; font-weight: 950; line-height: 1.02; color: var(--fg); }
.altLine{ font-size: 10px; color: var(--muted); font-weight: 900; line-height: 1.05; }

/* ===================================================
   CLAVIER
=================================================== */
.keyboard{
  position: relative; flex: 0 0 auto; height: var(--kbdH);
  background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.14);
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  margin-left: -6px; margin-right: -6px;
  border-radius: 0 0 20px 20px;
}
.keysWhite{ display: flex; height: 100%; position: relative; z-index: 1; }
.whiteKey{ flex: 1; border-right: 1px solid rgba(0,0,0,.18); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75)); }
.whiteKey:last-child{ border-right: 0; }
.whiteKey.active{ background: linear-gradient(180deg, rgba(255,60,60,.95), rgba(220,30,30,.75)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.keysBlack{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.blackKey{ position: absolute; top: 0; height: 62%; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, rgba(16,18,24,.98), rgba(8,10,16,.92)); box-shadow: 0 6px 12px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.blackKey.active{ background: linear-gradient(180deg, rgba(255,60,60,.95), rgba(220,30,30,.85)); box-shadow: 0 6px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(120,0,0,1); border-color: rgba(120,0,0,1); }

body.mode-accords .card.flipped .face.front,
body.mode-accords .card.matched .face.front { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.card.matched .face{ outline: 2px solid rgba(125,255,106,.55); box-shadow: 0 20px 70px rgba(125,255,106,.10), var(--shadow); }
.card.wrong .face{ animation: wobble .28s ease-in-out 1; outline: 2px solid rgba(255,91,214,.45); }
@keyframes wobble{
  0%{ transform: translateX(0); } 25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); } 75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}

/* Toasts */
.overlayMsg{ position: fixed; left: 50%; top: calc(var(--topbarH) + 8px); transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast{ pointer-events: none; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.18); color: var(--fg); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow); backdrop-filter: blur(10px); font-weight: 1000; letter-spacing: .2px; display: flex; align-items: center; gap: 10px; animation: pop .45s cubic-bezier(.2,.9,.2,1) 1; font-size: 13px; white-space: nowrap; }
.toast.good{ background: rgba(0,0,0,.45); border-color: rgba(125,255,106,.30); }
.toast.bad{  background: rgba(0,0,0,.45); border-color: rgba(255,91,214,.30); }
@keyframes pop{ 0%{ transform: translateY(-10px) scale(.96); opacity:0; } 100%{ transform: translateY(0px) scale(1); opacity:1; } }

/* Modals */
.modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 60; padding: 14px; }
.modal.show{ display: flex; }
.modalCard{ width: min(520px, 100%); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; box-shadow: var(--shadow); padding: 14px; backdrop-filter: blur(14px); }
.modalCard.wide{ width: min(760px, 100%); }
.row{ display:flex; gap:10px; align-items:center; }
.row.wrap{ flex-wrap:wrap; }
.input{ flex: 1; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: var(--fg); padding: 12px 12px; border-radius: 16px; outline: none; font-weight: 900; }
.input:focus{ border-color: rgba(57,215,255,.55); box-shadow: 0 0 0 4px rgba(57,215,255,.12); }
.finStats{ display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
.statBox{ background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 10px 12px; }
.statBox .k{ font-size:12px; color: var(--muted); font-weight:900; }
.statBox .v{ font-size:20px; font-weight:1000; margin-top:3px; }
.muted{ color: var(--muted); }
.tiny{ font-size:12px; }

/* ===================================================
   MODE ACCORDS
=================================================== */
body.mode-accords{ --cardRatio: 1 / 1.08; --gap: 4px; }
body.mode-accords .nameEn{ font-size: 16px; }
body.mode-accords .nameFr{ font-size: 13px; }
body.mode-accords .card.flipped .keyboard,
body.mode-accords .card.matched .keyboard {
  margin-left: -22%; margin-right: -22%;
  border-radius: 0 0 8px 8px;
  transform: rotate(-4deg) translateY(-2px);
  transform-origin: center bottom;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), margin .55s cubic-bezier(.2,.8,.2,1);
  z-index: 5; position: relative;
}
body.mode-accords .keyboard { transition: transform .55s cubic-bezier(.2,.8,.2,1), margin .55s cubic-bezier(.2,.8,.2,1); transform: rotate(0deg); }

@container (max-width: 170px){ body.mode-accords .nameEn{ font-size: 14px; } body.mode-accords .nameFr{ font-size: 12px; } }
@container (max-width: 140px){ body.mode-accords .nameEn{ font-size: 13px; } body.mode-accords .nameFr{ font-size: 11px; } }
@container (max-width: 120px){ body.mode-accords .nameEn{ font-size: 12px; } body.mode-accords .nameFr{ font-size: 10px; } }
@container (max-width: 105px){ body.mode-accords .nameEn{ font-size: 11px; } body.mode-accords .nameFr{ font-size: 9px; } }
@container (max-width: 92px){  body.mode-accords .nameEn{ font-size: 10px; } body.mode-accords .nameFr{ font-size: 8px; } }

/* ===================================================
   CONTAINER QUERIES cartes
=================================================== */
@container (max-width: 170px){ .nameEn{ font-size: 40px; } .nameFr{ font-size: 32px; } }
@container (max-width: 140px){ .nameEn{ font-size: 34px; } .nameFr{ font-size: 28px; } .front{ gap: 5px; } }
@container (max-width: 120px){ .nameEn{ font-size: 28px; } .nameFr{ font-size: 24px; } .front{ gap: 4px; padding: 5px; } .keyboard{ height: 34%; } .altLine{ font-size: 9px; } }
@container (max-width: 105px){ .nameEn{ font-size: 24px; } .nameFr{ font-size: 20px; } .keyboard{ height: 32%; } .altLine{ display:none; } }
@container (max-width: 92px){  .nameEn{ font-size: 21px; } .nameFr{ font-size: 18px; } .keyboard{ height: 30%; } }

/* ===================================================
   MOBILE — désactivation des effets GPU coûteux
=================================================== */
@media (max-width: 680px) {
  .desktopOnly{ display: none !important; }
  :root{ --topbarH: 48px; }
  .title{ font-size: 13px; }
  .hudMini{ padding: 2px 6px; }
  .hudMiniVal{ font-size: 12px; }
  .iconBtn{ width: 34px; height: 34px; font-size: 15px; }

  /* 1. BLOBS + GRAIN — cause principale
     filter:blur(35px) animé = GPU saturé en continu */
  .blob{ display: none; }
  .grain{ display: none; }
  .bg{
    background:
      radial-gradient(ellipse 80% 50% at 10% 10%, rgba(57,215,255,.12), transparent 60%),
      radial-gradient(ellipse 70% 50% at 85% 20%, rgba(255,91,214,.10), transparent 60%),
      linear-gradient(135deg, var(--bg1), var(--bg2));
  }

  /* 2. backdrop-filter — crée des compositing layers coûteux */
  .topbar{ backdrop-filter: none; background: rgba(11,16,32,.97); }
  .menuBackdrop{ backdrop-filter: none; background: rgba(0,0,0,.65); }
  .menuPanel{ backdrop-filter: none; background: rgba(11,16,32,.99); }
  .toast{ backdrop-filter: none; background: rgba(10,14,30,.90); }
  .toast.good{ background: rgba(5,20,10,.90); }
  .toast.bad{  background: rgba(20,5,10,.90); }
  .modalCard{ backdrop-filter: none; background: rgba(18,24,50,.97); }

  /* 3. DOS DE CARTE — zoom réduit sur mobile
     PC  : zoom 3.6–4.6× via --back-zoom (JS)
     Mobile : zoom fixe 2.2× — moins lourd sur 24-48 cartes
     filter simplifié : on retire saturate/contrast (recalcul GPU par carte) */
  }

@media (pointer: coarse){
  .btn, .segBtn{ min-height: 36px; }
  .iconBtn{ min-height: 36px; min-width: 36px; }
}

body.is-fullscreen #btnFullscreen{ opacity: .7; }