/* =====================================================================
   SPACE Y - habillage "Cosmic Candy"
   Boutons en bonbon 3D, panneaux sucres, grosses typos rondes.
   ===================================================================== */
:root {
  --font-display: "Lilita One", "Nunito", system-ui, sans-serif;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ink: #2a0f5c;
  --muted: rgba(255, 255, 255, 0.74);
  --faint: rgba(255, 255, 255, 0.5);

  --gold1: #ffe86e; --gold2: #ffaf1c; --gold-edge: #c75f05;
  --pink1: #ff9bd6; --pink2: #ff3f9e; --pink-edge: #a8155a;
  --cyan1: #8af3ff; --cyan2: #1fb5ff; --cyan-edge: #0b62a3;
  --violet1: #bf9bff; --violet2: #7a4dff; --violet-edge: #4320a8;
  --green1: #9bf792; --green2: #25c45a; --green-edge: #0d7433;
  --red1: #ff9aa9; --red2: #ff3f62; --red-edge: #a6123a;

  --panel-bg: linear-gradient(180deg, rgba(120, 70, 220, 0.62), rgba(70, 30, 160, 0.62));
  --panel-border: rgba(255, 255, 255, 0.32);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none;
  background: #2b0d63; color: #fff; font-family: var(--font); font-weight: 800;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; }
input { font-family: var(--font); }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; }

.screen {
  position: fixed; inset: 0; z-index: 2;
  display: none; flex-direction: column; align-items: center;
  padding: calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 14px);
}
.screen.active { display: flex; animation: screenIn 0.4s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes screenIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   Boutons bonbon
   --------------------------------------------------------------------- */
.btn {
  --c1: var(--violet1); --c2: var(--violet2); --edge: var(--violet-edge);
  position: relative; border: 0; cursor: pointer; outline: none;
  font-family: var(--font-display); font-weight: 400; color: #fff;
  letter-spacing: 0.02em; line-height: 1.05;
  border-radius: 22px; padding: 14px 22px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, 0.16),
    inset 0 3px 0 rgba(255, 255, 255, 0.55),
    0 6px 0 var(--edge),
    0 12px 22px rgba(20, 0, 60, 0.45);
  text-shadow: 0 3px 0 var(--edge), 1px 1px 0 var(--edge), -1px 1px 0 var(--edge), 1px -1px 0 var(--edge), -1px -1px 0 var(--edge);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  touch-action: manipulation; isolation: isolate; z-index: 0;
}
.btn::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: 4px; height: 44%;
  border-radius: 18px 18px 50% 50% / 18px 18px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  pointer-events: none; z-index: -1;
}
.btn:hover { filter: brightness(1.06); }
.btn:active, .btn.pressed {
  transform: translateY(5px);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.16),
    inset 0 3px 0 rgba(255, 255, 255, 0.5),
    0 1px 0 var(--edge),
    0 4px 10px rgba(20, 0, 60, 0.4);
}
.btn:disabled { filter: grayscale(0.7) brightness(0.8); cursor: default; }
.btn-gold { --c1: var(--gold1); --c2: var(--gold2); --edge: var(--gold-edge); }
.btn-pink { --c1: var(--pink1); --c2: var(--pink2); --edge: var(--pink-edge); }
.btn-cyan { --c1: var(--cyan1); --c2: var(--cyan2); --edge: var(--cyan-edge); }
.btn-violet { --c1: var(--violet1); --c2: var(--violet2); --edge: var(--violet-edge); }
.btn-green { --c1: var(--green1); --c2: var(--green2); --edge: var(--green-edge); }
.btn-red { --c1: var(--red1); --c2: var(--red2); --edge: var(--red-edge); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  text-shadow: none; font-family: var(--font); font-weight: 900;
}
.btn-ghost::before { display: none; }
.btn-ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }

.btn-xl { font-size: 40px; padding: 18px 26px 20px; border-radius: 30px; flex-direction: column; gap: 2px; }
.btn-xl .btn-sub { font-family: var(--font); font-weight: 900; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 0 var(--edge); opacity: 0.95; }
.btn-lg { font-size: 24px; padding: 16px 22px 18px; border-radius: 24px; }
.btn-md { font-size: 17px; padding: 12px 16px 13px; border-radius: 18px; }
.btn-sm { font-size: 14px; padding: 9px 13px 10px; border-radius: 14px; }

/* Bouton principal : respire doucement + reflet qui passe. */
.btn-breathe { animation: breathe 2.2s ease-in-out infinite; overflow: hidden; }
.btn-breathe::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: skewX(-18deg); animation: shine 3.2s ease-in-out infinite; pointer-events: none; z-index: -1;
}
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

.icon-btn {
  width: 46px; height: 46px; border-radius: 16px; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 4px 0 rgba(30, 0, 80, 0.45);
  transition: transform 0.08s;
}
.icon-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 1px 0 rgba(30, 0, 80, 0.45); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------
   Panneaux
   --------------------------------------------------------------------- */
.panel {
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 28px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 18px 40px rgba(15, 0, 50, 0.45);
}
.panel-title { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; display: flex; justify-content: space-between; align-items: center; }
.muted { color: var(--muted); font-weight: 700; }

/* ---------------------------------------------------------------------
   Accueil
   --------------------------------------------------------------------- */
#home { justify-content: space-between; overflow-y: auto; overflow-x: hidden; }
.topbar { width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; }
.chip-profile {
  display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 4px 0 rgba(30, 0, 80, 0.45);
  max-width: 70vw;
}
.chip-profile:active { transform: translateY(2px); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #fff6, transparent 60%), linear-gradient(180deg, var(--gold1), var(--gold2));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15), 0 2px 0 var(--gold-edge);
}
.chip-profile .name { font-size: 17px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-profile .edit { opacity: 0.6; font-size: 14px; }

.hero { text-align: center; margin-top: 2vh; flex: 0 0 auto; }
.logo {
  font-family: var(--font-display); font-size: clamp(60px, 19vw, 104px); line-height: 0.95; letter-spacing: 0.01em;
  display: inline-flex; align-items: flex-end; gap: 6px;
  filter: drop-shadow(0 5px 0 #4b18a8) drop-shadow(0 0 26px rgba(255, 110, 230, 0.55));
  animation: logoFloat 4s ease-in-out infinite;
}
.logo .l-space { background: linear-gradient(180deg, #ffffff 30%, #ffd8f6 60%, #ff9ee4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .l-y {
  background: linear-gradient(180deg, #fff7b0 15%, #ffd23a 55%, #ff9a1a); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 1.18em; transform: rotate(8deg); display: inline-block; position: relative;
}
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tagline { margin: 8px 0 14px; font-size: 16px; font-weight: 800; color: #ffe6ff; text-shadow: 0 2px 0 rgba(60, 10, 120, 0.6); }
.online-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 800;
  background: rgba(20, 5, 60, 0.45); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.online-pill b { font-weight: 900; color: #9bf792; }
.dot-live { width: 10px; height: 10px; border-radius: 50%; background: #5cff86; box-shadow: 0 0 0 0 rgba(92, 255, 134, 0.7); animation: live 1.6s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(92, 255, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(92, 255, 134, 0); } }

.home-actions { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; align-items: stretch; margin: 2vh 0; flex: 0 0 auto; }
.home-actions .btn-xl { font-size: 52px; padding: 18px 20px 20px; }
.home-actions .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.home-cards { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.mini-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 20px; }
.mini-card .ic { font-size: 28px; flex: 0 0 auto; }
.mini-card .tx { flex: 1; min-width: 0; text-align: left; font-size: 14px; line-height: 1.25; }
.mini-card .tx b { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: 0.02em; }
.mini-card .tag { font-size: 11px; font-weight: 900; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.ludo-card { background: linear-gradient(120deg, rgba(255, 79, 114, 0.35), rgba(255, 175, 28, 0.3)); border-color: rgba(255, 220, 160, 0.35); }

.home-foot { margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; flex: 0 0 auto; }
.home-foot a { color: #fff; text-decoration: none; opacity: 0.85; }

/* ---------------------------------------------------------------------
   Salon entre amis
   --------------------------------------------------------------------- */
#room { gap: 14px; overflow-y: auto; }
.room-head { text-align: center; flex: 1; min-width: 0; }
.room-head .rt { font-family: var(--font-display); font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-head .rs { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.invite { width: 100%; max-width: 440px; padding: 16px; text-align: center; }
.invite-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.code-big {
  font-family: var(--font-display); font-size: 58px; letter-spacing: 0.18em; margin: 2px 0 10px; padding-left: 0.18em;
  background: linear-gradient(180deg, #fff7b0, #ffd23a 60%, #ff9a1a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #6a2a00);
}
.share-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.share-row .btn { font-size: 15px; padding: 12px 6px 13px; }
.link-small { margin-top: 10px; font-size: 12px; color: var(--muted); word-break: break-all; }
.me-line { font-size: 13px; color: var(--muted); margin-top: 10px; }
.me-line button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font-weight: 900; padding: 0 4px; }

.players { width: 100%; max-width: 440px; padding: 14px 14px 10px; flex: 0 1 auto; }
.plist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plist li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 18px;
  background: rgba(20, 5, 60, 0.35); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  animation: popIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.plist li.me { box-shadow: inset 0 0 0 2px rgba(255, 210, 60, 0.7); }
.plist .pn { flex: 1; min-width: 0; font-size: 17px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist .pw { font-size: 13px; color: #ffe46b; white-space: nowrap; }
.badge { font-size: 11px; font-weight: 900; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.badge.ready { background: linear-gradient(180deg, var(--green1), var(--green2)); color: #053b18; }
.badge.wait { background: rgba(255, 255, 255, 0.16); color: #fff; }
.badge.play { background: linear-gradient(180deg, var(--cyan1), var(--cyan2)); color: #032a4a; }
.badge.out { background: rgba(255, 79, 114, 0.35); color: #fff; }
.badge.away { background: rgba(0, 0, 0, 0.3); color: var(--muted); }
@keyframes popIn { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }

.last-result { width: 100%; max-width: 440px; padding: 10px 14px; border-radius: 20px; text-align: center; font-size: 14px; }
.last-result b { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: #ffe46b; }

.room-bottom { width: 100%; max-width: 440px; margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; flex: 0 0 auto; }
.hint { text-align: center; font-size: 14px; color: var(--muted); min-height: 18px; }
#readyBtn.is-ready { --c1: var(--green1); --c2: var(--green2); --edge: var(--green-edge); }

/* ---------------------------------------------------------------------
   Ecran de jeu
   --------------------------------------------------------------------- */
#game { padding: calc(var(--safe-t) + 6px) 8px calc(var(--safe-b) + 8px); gap: 6px; justify-content: flex-start; }
.game-top { width: 100%; max-width: 760px; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.game-top .icon-btn { width: 40px; height: 40px; border-radius: 14px; font-size: 18px; }
.hud { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.hud-status { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.hud-status .schip { font-size: 11px; padding: 2px 8px; }
.hud-status .schip.gauge b { font-size: 13px; }
.hud-score {
  font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff, #ffe46b); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #5b1fb0); transition: transform 0.12s;
}
.hud-score.bump { transform: scale(1.18); }
.hud-chips { display: flex; gap: 5px; }
.hchip { display: flex; flex-direction: column; align-items: center; padding: 3px 8px; border-radius: 12px; background: rgba(20, 5, 60, 0.45); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18); min-width: 42px; }
.hchip .k { font-size: 9px; letter-spacing: 0.1em; color: var(--muted); }
.hchip .v { font-family: var(--font-display); font-size: 16px; line-height: 1.05; }
.hchip.ko .v { color: #ff8fb0; }
.room-tag { font-size: 11px; font-weight: 900; color: var(--muted); text-align: right; line-height: 1.15; max-width: 92px; overflow: hidden; }
.room-tag b { color: #fff; display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.play-area {
  flex: 1 1 auto; min-height: 0; width: 100%; touch-action: none;
  display: grid; justify-content: center; align-content: center; gap: 6px;
  grid-template-areas: "hold board next" "oppsL board oppsR";
  grid-template-columns: var(--side, 64px) auto var(--side, 64px);
  grid-template-rows: auto auto;
}
/* Telephone fin et haut : reserve, adversaires et suivants passent au-dessus. */
.play-area.stacked {
  grid-template-areas: "hold oppsL oppsL next" "board board board board";
  grid-template-columns: var(--hold-w, 56px) 1fr 1fr var(--next-w, 120px);
  grid-template-rows: auto auto;
}
.play-area.stacked #oppsR { display: none; }
.play-area.stacked .opps { flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; overflow: hidden; }
.play-area.stacked .opp .on { display: none; }
.play-area.stacked.roomy .opp .on { display: block; }
.play-area.stacked .box-label { font-size: 8px; }
.hold-box { grid-area: hold; align-self: start; }
.next-box { grid-area: next; align-self: start; }
.play-area.stacked .hold-box, .play-area.stacked .next-box { align-self: stretch; }
#oppsL { grid-area: oppsL; }
#oppsR { grid-area: oppsR; }
.board-wrap { grid-area: board; justify-self: center; }
.box { border-radius: 14px; padding: 4px 4px 2px; background: rgba(30, 10, 80, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.box-label { font-size: 9px; letter-spacing: 0.14em; text-align: center; color: var(--muted); font-weight: 900; }
.box canvas { display: block; margin: 0 auto; }
.box.used canvas { opacity: 0.4; }
.opps { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-content: flex-start; min-width: 0; min-height: 0; overflow: hidden; }
.opp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: transform 0.2s, opacity 0.4s; }
.opp canvas { display: block; border-radius: 4px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25); }
.opp .on { font-size: 9px; font-weight: 900; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp .os { font-size: 9px; color: #ffe46b; font-weight: 900; line-height: 1; }
.opp .bot-tag-unused { position: absolute; top: 2px; left: 2px; font-size: 7px; font-weight: 900; padding: 1px 3px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #8af3ff; }
.opp.dead { opacity: 0.45; }
.opp.dead::after { content: "K.O."; position: absolute; top: 34%; left: 50%; transform: translateX(-50%) rotate(-12deg); font-family: var(--font-display); font-size: 14px; color: #ff5e7e; text-shadow: 0 2px 0 #4b0a1f; }
.opp.hit canvas { animation: oppHit 0.45s ease; }
.opp.attacking canvas { animation: oppAtk 0.45s ease; }
@keyframes oppHit { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); box-shadow: 0 0 0 2px #ff4f72, 0 0 14px #ff4f72; } 60% { transform: translateX(3px); } }
@keyframes oppAtk { 30% { box-shadow: 0 0 0 2px #ffe46b, 0 0 16px #ffd23a; transform: scale(1.06); } }
.more-opps {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 6px; background: rgba(20, 5, 60, 0.55); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
  min-width: 26px; min-height: 30px; overflow: hidden;
}
.more-opps b { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1; color: #ffe46b; text-shadow: 0 2px 0 #5b1fb0; }
.more-opps span { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.waiting-note { font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; line-height: 1.25; padding: 4px 2px; }

.board-wrap { position: relative; }
.board-frame {
  position: relative; border-radius: 18px; padding: 5px 13px;
  background: linear-gradient(180deg, #ffd6fa, #b98cff 45%, #6c3bff);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 0 36px rgba(190, 110, 255, 0.6), 0 18px 36px rgba(10, 0, 40, 0.6);
  transition: box-shadow 0.3s;
}
.board-frame canvas { display: block; border-radius: 13px; background: #1a0b45; }
.board-frame.danger { box-shadow: 0 0 0 2px rgba(255, 120, 150, 0.6), 0 0 44px rgba(255, 60, 100, 0.75), 0 18px 36px rgba(10, 0, 40, 0.6); }
.garbage-meter { position: absolute; left: 3px; bottom: 8px; width: 7px; top: 8px; border-radius: 4px; background: rgba(30, 0, 60, 0.55); overflow: hidden; display: flex; align-items: flex-end; }
.garbage-meter i { display: block; width: 100%; height: 0; background: linear-gradient(180deg, #ffd23a, #ff3f62); box-shadow: 0 0 10px #ff3f62; border-radius: 4px; transition: height 0.2s; }
.garbage-meter.pulse i { animation: gpulse 0.5s ease-in-out infinite alternate; }
@keyframes gpulse { to { filter: brightness(1.5); } }
.pop-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.pop {
  position: absolute; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; text-align: center;
  font-family: var(--font-display); letter-spacing: 0.02em; line-height: 1;
  color: #fff; text-shadow: 0 4px 0 #5b1fb0, 2px 2px 0 #5b1fb0, -2px 2px 0 #5b1fb0, 2px -2px 0 #5b1fb0, -2px -2px 0 #5b1fb0, 0 0 24px rgba(255, 150, 240, 0.8);
  animation: pop 1.15s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.pop.big { font-size: 44px; color: #fff3a0; text-shadow: 0 5px 0 #b34a00, 2px 2px 0 #b34a00, -2px 2px 0 #b34a00, 2px -2px 0 #b34a00, -2px -2px 0 #b34a00, 0 0 30px rgba(255, 210, 60, 0.95); }
.pop.mid { font-size: 30px; }
.pop.small { font-size: 20px; }
.pop.pts { font-size: 18px; color: #ffe46b; animation: rise 0.9s ease-out forwards; text-shadow: 0 2px 0 #5b1fb0, 0 0 10px rgba(255, 210, 60, 0.8); }
.pop.ko { font-size: 54px; color: #ff8fb0; text-shadow: 0 5px 0 #6b0a2c, 2px 2px 0 #6b0a2c, -2px 2px 0 #6b0a2c, 2px -2px 0 #6b0a2c, -2px -2px 0 #6b0a2c, 0 0 30px rgba(255, 79, 114, 0.9); }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(3deg); }
  35% { transform: translate(-50%, -50%) scale(0.95) rotate(0); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
  80% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -85%) scale(1.05); }
}
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -200%) scale(1); } }

.board-banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86%; text-align: center; z-index: 6;
  padding: 14px 10px; border-radius: 20px; background: rgba(30, 8, 70, 0.85); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  display: none;
}
.board-banner.show { display: block; animation: popIn 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.board-banner .bt { font-family: var(--font-display); font-size: 30px; color: #ff8fb0; }
.board-banner .bs { font-size: 13px; color: var(--muted); margin-top: 4px; white-space: pre-line; }

/* Manette tactile */
.controls { flex: 0 0 auto; width: 100%; max-width: 520px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; padding-top: 2px; }
.ctl {
  position: relative; height: 62px; border: 0; border-radius: 20px; cursor: pointer; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, var(--violet1), var(--violet2));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 5px 0 var(--violet-edge), 0 9px 16px rgba(20, 0, 60, 0.45);
  transition: transform 0.06s, box-shadow 0.06s;
}
.ctl::before { content: ""; position: absolute; left: 10%; right: 10%; top: 4px; height: 40%; border-radius: 14px 14px 50% 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); pointer-events: none; }
.ctl svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 0 rgba(40, 10, 110, 0.7)); }
.ctl small { font-size: 8px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.ctl.down, .ctl:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--violet-edge), 0 3px 8px rgba(20, 0, 60, 0.4); }
.ctl.c-rot { background: linear-gradient(180deg, var(--cyan1), var(--cyan2)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 5px 0 var(--cyan-edge), 0 9px 16px rgba(20, 0, 60, 0.45); }
.ctl.c-drop { background: linear-gradient(180deg, var(--gold1), var(--gold2)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 5px 0 var(--gold-edge), 0 9px 16px rgba(20, 0, 60, 0.45); }
.ctl.c-hold { background: linear-gradient(180deg, var(--pink1), var(--pink2)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 5px 0 var(--pink-edge), 0 9px 16px rgba(20, 0, 60, 0.45); }
.ctl.c-rot.down, .ctl.c-rot:active { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 1px 0 var(--cyan-edge); }
.ctl.c-drop.down, .ctl.c-drop:active { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 1px 0 var(--gold-edge); }
.ctl.c-hold.down, .ctl.c-hold:active { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 1px 0 var(--pink-edge); }
.kbd-hint { display: none; font-size: 12px; color: var(--muted); text-align: center; flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) {
  .controls.auto-hide { display: none; }
  .kbd-hint { display: block; }
}

/* Toasts (attaques recues, K.O. des autres) */
.toasts { position: fixed; top: calc(var(--safe-t) + 54px); left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: max-content; max-width: 94vw; }
.toast {
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 900; white-space: nowrap;
  background: rgba(40, 10, 90, 0.92); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 8px 20px rgba(0, 0, 0, 0.35);
  animation: toastIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.toast.atk { background: linear-gradient(180deg, rgba(255, 79, 114, 0.95), rgba(190, 20, 70, 0.95)); }
.toast.good { background: linear-gradient(180deg, rgba(70, 224, 106, 0.95), rgba(15, 140, 60, 0.95)); }
.toast.out { opacity: 0; transform: translateY(-8px); transition: opacity 0.3s, transform 0.3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(0.85); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   Superpositions : decompte, fin de partie, fenetres
   --------------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  background: radial-gradient(circle at 50% 40%, rgba(60, 20, 130, 0.55), rgba(15, 3, 40, 0.82));
}
.overlay.show { display: flex; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overlay.clear { background: transparent; pointer-events: none; }

.count-num {
  font-family: var(--font-display); font-size: 150px; line-height: 1; color: #fff7b0;
  text-shadow: 0 8px 0 #b34a00, 3px 3px 0 #b34a00, -3px 3px 0 #b34a00, 3px -3px 0 #b34a00, -3px -3px 0 #b34a00, 0 0 50px rgba(255, 210, 60, 0.9);
}
.count-num.go { color: #b6ffb0; text-shadow: 0 8px 0 #0d7433, 3px 3px 0 #0d7433, -3px 3px 0 #0d7433, 3px -3px 0 #0d7433, -3px -3px 0 #0d7433, 0 0 50px rgba(92, 255, 134, 0.9); }
.count-num.tick { animation: tick 0.9s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes tick { 0% { transform: scale(2.2); opacity: 0; } 25% { transform: scale(0.9); opacity: 1; } 40% { transform: scale(1.06); } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.85); opacity: 0.2; } }
.count-sub { position: absolute; bottom: 22%; left: 0; right: 0; text-align: center; font-size: 16px; color: var(--muted); }

.end-panel { width: 100%; max-width: 380px; padding: 22px 20px 20px; text-align: center; display: flex; flex-direction: column; gap: 12px; animation: panelIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes panelIn { from { transform: scale(0.6) translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.end-title { font-family: var(--font-display); font-size: 46px; line-height: 1; letter-spacing: 0.02em; color: #fff; text-shadow: 0 5px 0 #4b18a8, 0 0 24px rgba(255, 140, 240, 0.7); }
.end-title.win { color: #fff3a0; text-shadow: 0 5px 0 #b34a00, 0 0 30px rgba(255, 210, 60, 0.95); }
.end-title.lose { color: #ffb3c4; }
.end-sub { font-size: 15px; color: var(--muted); margin-top: -4px; }
.end-score { font-family: var(--font-display); font-size: 54px; line-height: 1; background: linear-gradient(180deg, #fff, #ffe46b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #5b1fb0); }
.end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.end-stats > div { padding: 8px 4px; border-radius: 16px; background: rgba(20, 5, 60, 0.4); }
.end-stats .k { font-size: 10px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.end-stats .v { font-family: var(--font-display); font-size: 24px; }
.record { display: inline-block; align-self: center; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 900; color: #5a2a00; background: linear-gradient(180deg, var(--gold1), var(--gold2)); box-shadow: 0 3px 0 var(--gold-edge); animation: popIn 0.5s 0.3s both cubic-bezier(0.2, 1.6, 0.4, 1); }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; max-height: 36vh; overflow-y: auto; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 16px; background: rgba(20, 5, 60, 0.4); font-size: 15px; }
.rank-list li.first { background: linear-gradient(90deg, rgba(255, 210, 60, 0.4), rgba(255, 150, 30, 0.2)); box-shadow: inset 0 0 0 2px rgba(255, 220, 100, 0.6); }
.rank-list li.me { box-shadow: inset 0 0 0 2px rgba(140, 240, 255, 0.7); }
.rank-list .rk { font-family: var(--font-display); width: 26px; text-align: center; font-size: 18px; }
.rank-list .rn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 900; }
.rank-list .rp { font-size: 13px; color: #ffe46b; white-space: nowrap; }
.end-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.end-actions .btn-xl { font-size: 36px; }

.modal-card { width: 100%; max-width: 380px; padding: 20px; display: flex; flex-direction: column; gap: 14px; animation: panelIn 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.modal-card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; text-align: center; }
.field {
  width: 100%; font-size: 20px; font-weight: 900; padding: 14px 16px; border-radius: 18px; border: 0; outline: none; color: var(--ink);
  background: #fff; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(255, 255, 255, 0.35);
  user-select: text; -webkit-user-select: text;
}
.field:focus { box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.08), 0 0 0 4px #ffd23a; }
.field.code { text-align: center; text-transform: uppercase; letter-spacing: 0.3em; font-family: var(--font-display); font-weight: 400; font-size: 34px; padding-left: calc(16px + 0.3em); }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatar-grid button {
  aspect-ratio: 1; border-radius: 16px; border: 0; font-size: 26px; cursor: pointer;
  background: rgba(20, 5, 60, 0.4); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.avatar-grid button.sel { background: linear-gradient(180deg, var(--gold1), var(--gold2)); box-shadow: 0 3px 0 var(--gold-edge); transform: scale(1.08); }
.modal-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.err { color: #ffb3c4; font-size: 14px; text-align: center; min-height: 18px; }

/* Petits ecrans */
@media (max-height: 700px) {
  .home-actions { gap: 14px; margin: 1vh 0; }
  .home-actions .btn-xl { font-size: 44px; padding: 14px 18px 16px; }
  .btn-lg { font-size: 21px; padding: 13px 18px 15px; }
  .hero { margin-top: 0; }
  .tagline { margin: 4px 0 10px; }
  .ctl { height: 54px; }
  .ctl small { display: none; }
}
@media (min-width: 760px) {
  .hud-score { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-breathe, .logo { animation: none; }
}

/* =====================================================================
   Regles du multijoueur : jauge, bouclier, mort subite, reglages, aide
   ===================================================================== */
.top-actions { display: flex; gap: 8px; }
.help-btn { font-family: var(--font-display); font-size: 24px; }
.center { text-align: center !important; }
.link-btn { background: none; border: 0; color: #fff; text-decoration: underline; font-weight: 900; font-size: 13px; cursor: pointer; padding: 2px; align-self: center; }

/* Jauge de victoire (bord droit de la grille) */
.gauge-meter { position: absolute; right: 3px; top: 8px; bottom: 8px; width: 7px; border-radius: 4px; background: rgba(30, 0, 60, 0.55); overflow: hidden; display: flex; align-items: flex-end; }
.gauge-meter i { display: block; width: 100%; height: 0; border-radius: 4px; background: linear-gradient(180deg, #fff6a8, #ffd23a 40%, #ff9a1a); box-shadow: 0 0 10px #ffd23a; transition: height 0.3s cubic-bezier(0.2, 1.3, 0.4, 1); }
.gauge-meter .gm-mark { position: absolute; left: 0; right: 0; bottom: 80%; height: 2px; background: rgba(255, 255, 255, 0.7); }
.gauge-meter.hot i { animation: gpulse 0.45s ease-in-out infinite alternate; }

/* Puces du haut : jauge, bouclier, mort subite */
.schip { display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; background: rgba(20, 5, 60, 0.5); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); }
.schip[hidden] { display: none; }
.schip.gauge b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: #ffe46b; }
.schip.shield { background: linear-gradient(180deg, var(--cyan1), var(--cyan2)); animation: popIn 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
.schip.sudden { color: #ffd0da; }
.schip.sudden.live { background: linear-gradient(180deg, var(--red1), var(--red2)); color: #fff; animation: gpulse 0.5s ease-in-out infinite alternate; }
#game.no-gauge #gaugeChip, #game.no-gauge .gauge-meter, #game.no-gauge .opp .og { display: none !important; }

/* Etats du cadre : bouclier, derniere ligne droite */
.board-frame.shielded { background: linear-gradient(180deg, #d6fbff, #6fe3ff 45%, #1fb5ff); box-shadow: 0 0 0 3px rgba(140, 240, 255, 0.7), 0 0 44px rgba(60, 220, 255, 0.85), 0 18px 36px rgba(10, 0, 40, 0.6); }
.board-frame.stretch { animation: stretchGlow 0.7s ease-in-out infinite alternate; }
@keyframes stretchGlow { from { box-shadow: 0 0 0 2px rgba(255, 220, 100, 0.6), 0 0 26px rgba(255, 200, 60, 0.6), 0 18px 36px rgba(10, 0, 40, 0.6); } to { box-shadow: 0 0 0 3px rgba(255, 235, 140, 0.95), 0 0 56px rgba(255, 200, 60, 0.95), 0 18px 36px rgba(10, 0, 40, 0.6); } }

/* Jauge des adversaires sous leur mini-grille */
.opp .og { display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.45); overflow: hidden; margin-top: 2px; }
.opp .og i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd23a, #ff9a1a); transition: width 0.3s; }
.opp.hot canvas { animation: hotPulse 0.6s ease-in-out infinite alternate; }
@keyframes hotPulse { from { box-shadow: 0 0 0 1.5px #ffd23a, 0 0 6px #ffd23a; } to { box-shadow: 0 0 0 2px #fff3a0, 0 0 16px #ffd23a; } }
.opp.shielded-hit canvas { animation: shieldHit 0.5s ease; }
@keyframes shieldHit { 30% { box-shadow: 0 0 0 2px #8af3ff, 0 0 18px #1fb5ff; } }

/* Salon : regles */
.rules-panel { width: 100%; max-width: 440px; padding: 12px 14px; }
.rules-panel .panel-title { font-size: 18px; }
.rule-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rchip { font-size: 12px; font-weight: 900; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25); white-space: nowrap; }
.rchip.off { opacity: 0.38; text-decoration: line-through; box-shadow: none; }

.rules-card { gap: 10px; }
.rule-list { display: flex; flex-direction: column; gap: 8px; max-height: 54vh; overflow-y: auto; padding: 2px; }
.rule-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(20, 5, 60, 0.4); cursor: pointer; transition: box-shadow 0.2s; }
.rule-row.on { box-shadow: inset 0 0 0 2px rgba(255, 220, 100, 0.55); }
.rule-row .ri { font-size: 26px; flex: 0 0 auto; }
.rule-row .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.rule-row .rt b { font-size: 16px; font-weight: 900; }
.rule-row .rt small { font-size: 12px; color: var(--muted); font-weight: 800; }
.switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 52px; height: 30px; margin: 0; border-radius: 999px; cursor: pointer; position: relative;
  background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); transition: background 0.2s;
}
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); transition: transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1); }
.switch:checked { background: linear-gradient(180deg, var(--green1), var(--green2)); }
.switch:checked::before { transform: translateX(22px); }
.switch:disabled { opacity: 0.55; cursor: default; }

/* Comment jouer */
.help-card { max-height: calc(100dvh - 40px); overflow-y: auto; gap: 10px; }
.help-card details { background: rgba(20, 5, 60, 0.38); border-radius: 18px; padding: 10px 14px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
.help-card details[open] { box-shadow: inset 0 0 0 2px rgba(255, 220, 100, 0.45); }
.help-card summary { font-family: var(--font-display); font-size: 19px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.help-card summary::-webkit-details-marker { display: none; }
.help-card summary::after { content: "▾"; font-size: 16px; opacity: 0.7; transition: transform 0.2s; }
.help-card details[open] summary::after { transform: rotate(180deg); }
.help-card p { font-size: 14px; line-height: 1.45; font-weight: 700; color: rgba(255, 255, 255, 0.9); margin: 8px 0; text-align: left; }
.help-rule { display: flex; gap: 10px; margin: 10px 0; text-align: left; }
.help-rule .ri { font-size: 24px; flex: 0 0 auto; }
.help-rule b { font-size: 15px; }
.help-rule p { margin: 3px 0 0; }
.tag-mini { font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); text-transform: uppercase; letter-spacing: 0.04em; }
/* Fenetres : fond opaque pour une lecture confortable */
.modal-card { background: linear-gradient(180deg, rgba(112, 62, 214, 0.97), rgba(64, 26, 152, 0.98)); }

/* Salon public : qui est la, sous le bouton JOUER */
.arena-peek { margin-top: -8px; padding: 8px 12px 10px; border-radius: 0 0 22px 22px; background: rgba(20, 5, 60, 0.4); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 48px; justify-content: center; }
.ap-name { font-size: 13px; font-weight: 900; color: #ffe6ff; }
.ap-empty { font-size: 12px; color: var(--muted); }
.ap-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ap-p { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 12px; max-width: 110px; }
.ap-p i { font-style: normal; font-size: 15px; }
.ap-p b { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-p.live { box-shadow: inset 0 0 0 1.5px #5cff86; }
.ap-more { font-size: 12px; font-weight: 900; align-self: center; color: var(--muted); }

/* =====================================================================
   Accueil : onglets Tetris / Ludo
   ===================================================================== */
.game-tabs {
  width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; flex: 0 0 auto;
  border-radius: 22px; background: rgba(20, 5, 60, 0.45); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}
.game-tabs button {
  border: 0; cursor: pointer; border-radius: 17px; padding: 10px 8px; font-family: var(--font-display); font-size: 20px; color: rgba(255, 255, 255, 0.7);
  background: transparent; transition: background 0.2s, color 0.2s, transform 0.08s;
}
.game-tabs button span { font-size: 18px; }
.game-tabs button.on {
  color: #fff; text-shadow: 0 2px 0 var(--violet-edge);
  background: linear-gradient(180deg, var(--violet1), var(--violet2));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 var(--violet-edge);
}
.game-tabs button:active { transform: translateY(2px); }
#home [hidden] { display: none !important; }
.home-actions { margin-top: 1.4vh; }

/* =====================================================================
   Ludo Cosmos
   ===================================================================== */
#ludo { padding: calc(var(--safe-t) + 6px) 8px calc(var(--safe-b) + 10px); gap: 4px; justify-content: flex-start; }
.ludo-title { flex: 1; text-align: center; font-family: var(--font-display); font-size: 22px; filter: drop-shadow(0 2px 0 #4b18a8); }
.ludo-title b { font-weight: 400; }
#ludo > .lseats.top-row { margin-top: auto; }
#ludo > .ludo-dock { margin-bottom: auto; }
.lseats { width: 100%; max-width: 640px; display: flex; justify-content: space-between; gap: 8px; flex: 0 0 auto; min-height: 48px; }
.lseat {
  --c: #9a7cff; --t: 0;
  flex: 0 1 48%; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px;
  background: rgba(20, 5, 60, 0.5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14); transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.25s;
}
.lseat.right { flex-direction: row-reverse; text-align: right; padding: 5px 5px 5px 10px; }
.lseat.empty { visibility: hidden; }
.lseat.gone { opacity: 0.45; filter: grayscale(0.8); }
.lseat.me { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.lseat.turn { transform: scale(1.04); box-shadow: inset 0 0 0 2px var(--c), 0 0 22px var(--c); }
.lav {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#fff calc(var(--t) * 360deg), rgba(255, 255, 255, 0.12) 0);
}
.lseat:not(.turn) .lav { background: var(--c); }
.lav i {
  font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 19px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 55%), var(--c);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.lmeta { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.lmeta b { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpawns { display: flex; gap: 3px; align-items: center; font-size: 10px; color: var(--muted); }
.lseat.right .lpawns { justify-content: flex-end; }
.lpawns em { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1.5px var(--c); }
.lpawns em.in { background: var(--c); box-shadow: 0 0 6px var(--c); }
.lauto { margin-left: 4px; font-weight: 900; color: #ffb3c4; }

.ludo-board-wrap { position: relative; width: 100%; max-width: 680px; flex: 1 1 auto; min-height: 0; touch-action: manipulation; }
.ludo-board-wrap canvas { position: absolute; inset: 0; display: block; }
.ludo-board-wrap.shake { animation: lshake 0.45s ease; }
@keyframes lshake { 15% { transform: translate(-5px, 2px); } 30% { transform: translate(5px, -2px); } 45% { transform: translate(-4px, 1px); } 60% { transform: translate(3px, 0); } 80% { transform: translate(-1px, 0); } }
.ludo-banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 62%; max-width: 92%; text-align: center; z-index: 3;
  padding: 16px 18px; border-radius: 24px; background: rgba(40, 12, 100, 0.9); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3), 0 16px 40px rgba(10, 0, 40, 0.5);
  display: none; flex-direction: column; gap: 4px;
}
.ludo-banner.show { display: flex; animation: popIn 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.ludo-banner b { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.ludo-banner span { font-size: 15px; font-weight: 900; color: #ffe46b; }
.ludo-banner em { font-style: normal; font-size: 13px; color: var(--muted); }

.ludo-dock { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ludo-hint { font-size: 15px; font-weight: 900; color: var(--muted); min-height: 20px; text-align: center; transition: color 0.2s; }
.ludo-hint.mine { color: #fff; text-shadow: 0 0 12px rgba(255, 220, 100, 0.8); }
.dice-wrap { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; touch-action: manipulation; border-radius: 30px; }
.dice-wrap:active { transform: scale(0.96); }
.rank-list .ldot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 6px rgba(255, 255, 255, 0.4); }

/* =====================================================================
   Ludo : cartes de pouvoir
   ===================================================================== */
.dock-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 520px; }
.ludo-hand { display: flex; gap: 8px; align-items: flex-end; }
.lcard {
  --c1: #bf9bff; --c2: #7a4dff; --edge: #4320a8;
  position: relative; width: 58px; height: 80px; border: 0; border-radius: 13px; padding: 6px 3px 5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; color: #fff;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 0 var(--edge), 0 8px 14px rgba(20, 0, 60, 0.45);
  transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1), filter 0.2s, box-shadow 0.2s;
  isolation: isolate;
}
.lcard::before { content: ""; position: absolute; left: 8%; right: 8%; top: 3px; height: 38%; border-radius: 10px 10px 50% 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)); z-index: -1; }
.lcard i { font-style: normal; font-size: 27px; line-height: 1; margin-top: 4px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2)); }
.lcard b { font-family: var(--font-display); font-weight: 400; font-size: 11px; letter-spacing: 0.01em; text-shadow: 0 1px 0 var(--edge), 1px 0 0 var(--edge), -1px 0 0 var(--edge); }
.lcard em { position: absolute; top: -6px; right: -6px; font-style: normal; font-size: 8px; font-weight: 900; padding: 2px 5px; border-radius: 999px; background: #ffd23a; color: #5a2a00; box-shadow: 0 2px 0 #b06d00; text-transform: uppercase; }
.lcard.off { filter: grayscale(0.55) brightness(0.78); }
.lcard.sel { transform: translateY(-12px) scale(1.07); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 0 var(--edge), 0 0 0 3px #fff, 0 0 24px var(--c1); }
.lcard.fresh { animation: cardIn 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes cardIn { from { transform: translateY(-90px) scale(0.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lcard.empty { cursor: default; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14); }
.lcard.empty::before { display: none; }

.card-bar {
  width: 100%; max-width: 520px; display: none; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px; border-radius: 18px;
  background: rgba(40, 12, 100, 0.92); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 10px 24px rgba(10, 0, 40, 0.45);
}
.card-bar.show { display: flex; animation: popIn 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.cb-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; line-height: 1.25; }
.cb-card b { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.cb-card span { font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.9); }
.cb-card small { font-size: 10px; color: var(--muted); font-weight: 800; }
.cb-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cb-why { font-size: 11px; font-weight: 900; color: #ffe46b; max-width: 120px; text-align: right; line-height: 1.2; }

.card-pop { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 4; display: none; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.card-pop.show { display: flex; animation: cardPop 0.95s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
@keyframes cardPop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.4) rotate(-10deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(3deg); }
  36% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(0.92); }
}
.cp-who { font-size: 13px; font-weight: 900; padding: 4px 12px; border-radius: 999px; background: var(--c); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.cp-card {
  width: 104px; height: 140px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.18), inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 6px 0 var(--edge), 0 0 50px var(--c1), 0 18px 30px rgba(10, 0, 40, 0.5);
}
.cp-card i { font-style: normal; font-size: 52px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.2)); }
.cp-card b { font-family: var(--font-display); font-weight: 400; font-size: 19px; text-shadow: 0 2px 0 var(--edge), 1px 1px 0 var(--edge), -1px 1px 0 var(--edge); }
.cp-extra { font-size: 13px; font-weight: 900; padding: 5px 12px; border-radius: 999px; background: rgba(40, 12, 100, 0.9); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }

.lcards { margin-left: 4px; font-weight: 900; color: #ffe6ff; }
.lseat.frozen { background: linear-gradient(90deg, rgba(150, 220, 255, 0.45), rgba(60, 140, 220, 0.35)); box-shadow: inset 0 0 0 2px #bfeaff, 0 0 16px rgba(140, 220, 255, 0.6); }
.lseat.bump { animation: seatBump 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes seatBump { 30% { transform: scale(1.1); } }
.dice-wrap { position: relative; }
.dice-wrap[data-bonus]:not([data-bonus=""])::after {
  content: attr(data-bonus); position: absolute; top: 2px; right: 0; font-family: var(--font-display); font-size: 18px; line-height: 1;
  padding: 3px 8px; border-radius: 999px; color: #5a2a00; background: linear-gradient(180deg, var(--gold1), var(--gold2)); box-shadow: 0 2px 0 var(--gold-edge);
  animation: popIn 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}

/* Halo du de : couleur du joueur qui joue, plus fort a mon tour. */
.dice-wrap.turn { filter: drop-shadow(0 0 6px var(--glow, #b48bff)); transition: filter 0.3s; }
.dice-wrap.turn.mine { animation: diceGlow 1.3s ease-in-out infinite; }
@keyframes diceGlow {
  0%, 100% { filter: drop-shadow(0 0 7px var(--glow, #b48bff)) drop-shadow(0 0 14px var(--glow, #b48bff)); }
  50% { filter: drop-shadow(0 0 11px var(--glow, #b48bff)) drop-shadow(0 0 26px var(--glow, #b48bff)); }
}

/* =====================================================================
   Accueil : qui est ou (Tetris, Ludo, accueil)
   ===================================================================== */
.who-pill { border: 0; cursor: pointer; color: #fff; font: inherit; flex-direction: column; gap: 6px; padding: 8px 14px 9px; border-radius: 20px; }
.who-pill:active { transform: translateY(1px); }
.who-top { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.who-more { font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.who-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.wc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.wc i { font-style: normal; }
.wc b { font-family: var(--font-display); font-weight: 400; font-size: 14px; color: #ffe46b; }

.who-card { max-height: calc(100dvh - 40px); gap: 12px; }
.who-body { overflow-y: auto; display: flex; flex-direction: column; gap: 14px; text-align: left; min-height: 0; }
.who-sec h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.who-n { font-family: var(--font); font-size: 12px; font-weight: 900; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.who-room { padding: 8px 10px; border-radius: 16px; background: rgba(20, 5, 60, 0.38); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); margin-bottom: 6px; }
.who-room.mine { box-shadow: inset 0 0 0 2px rgba(255, 220, 100, 0.6); }
.wr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.wr-head b { font-size: 14px; font-weight: 900; }
.wr-head span { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.wr-note, .wr-empty { font-size: 12px; color: var(--muted); }
.who-people { display: flex; flex-wrap: wrap; gap: 5px; }
.ap-p.me { box-shadow: inset 0 0 0 1.5px #ffd23a; }