:root {
  --sea:        #ef8a3c;
  --sea-deep:   #c96a1e;
  --sand:       #fbe3a2;
  --sand-deep:  #f3cf78;
  --tile:       #f8efd6;
  --tile-edge:  #e7d3a0;
  --leaf:       #5cb85c;
  --leaf-deep:  #3f9a45;
  --coral:      #ff7a59;
  --coral-deep: #ec5c3a;
  --sun:        #ffc94d;
  --grape:      #7c5cff;
  --ink:        #2c4a52;
  --ink-soft:   #5a767d;
  --paper:      #fffdf6;
  --radius:     24px;
  --wood:       #b27a3a;
  --wood-deep:  #8a5a22;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
button, [role="button"] { touch-action: manipulation; }

html, body {
  height: 100%;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(120% 100% at 50% -10%, #ffd98f 0%, #ff9e63 50%, #f06f7e 100%) fixed;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
::selection { background: transparent; }

#app {
  height: 100%; display: flex; flex-direction: column;
  max-width: 760px; margin: 0 auto;
  padding: clamp(8px, 1.6vh, 18px) clamp(10px, 3vw, 24px);
}

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(8px,1.4vh,12px); flex: none; }
.back-link {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--paper); border-radius: 50%; box-shadow: 0 5px 0 rgba(0,0,0,.12);
  color: var(--sea-deep); font-size: 30px; font-weight: 800; line-height: 1;
  text-decoration: none; padding-bottom: 4px; transition: transform .08s;
}
.back-link:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.brand-badge { width: 56px; height: 56px; flex: none; background: var(--paper); border-radius: 50%; box-shadow: 0 6px 0 rgba(0,0,0,.12); display: grid; place-items: center; overflow: hidden; }
.brand-badge svg { width: 100%; height: 100%; }
.brand-text { min-width: 0; overflow: hidden; }
.brand-text h1 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(18px,3vw,26px); color: var(--paper); line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text p { font-weight: 500; font-size: clamp(11px,1.6vw,14px); color: #ffe7d4; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn { width: 44px; height: 44px; border: none; cursor: pointer; background: var(--paper); border-radius: 50%; box-shadow: 0 5px 0 rgba(0,0,0,.12); font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; color: var(--sea-deep); display: grid; place-items: center; transition: transform .08s; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.profile-chip { border: none; cursor: pointer; background: var(--paper); border-radius: 999px; padding: 5px 14px 5px 5px; display: flex; align-items: center; gap: 8px; box-shadow: 0 5px 0 rgba(0,0,0,.12); transition: transform .08s; max-width: 160px; }
.profile-chip:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.profile-name { font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--tile); overflow: hidden; border: 3px solid var(--ring,#ccc); flex: none; }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar.avatar-f { --ring: #ff7ab0; background: #ffe6f0; }
.avatar.avatar-g { --ring: #4aa3e8; background: #e2f1ff; }

/* ---------- Play area ---------- */
.play-area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px,1.4vh,14px); overflow-y: auto; padding: 2px; }

/* Progression : jour + clients */
.progress-bar { flex: none; display: flex; align-items: center; gap: 10px; }
.day-btn { border: none; cursor: pointer; background: var(--paper); color: var(--sea-deep); border-radius: 14px; padding: 8px 14px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; box-shadow: 0 4px 0 rgba(0,0,0,.12); transition: transform .08s; white-space: nowrap; }
.day-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.clients-dots { display: flex; gap: 7px; flex: 1; flex-wrap: wrap; align-items: center; }
.cdot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); transition: transform .25s, background .25s; }
.cdot.served { background: var(--leaf); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.cdot.served::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; height: 100%; }
.cdot.active { background: var(--paper); box-shadow: 0 0 0 3px rgba(255,255,255,.6); transform: scale(1.15); }

/* ====================================================
   LA SCÈNE DU STAND
   ==================================================== */
.scene {
  flex: none; position: relative; border-radius: var(--radius);
  background: linear-gradient(180deg, #9fe0ec 0%, #cdeedd 45%, #ffe7b6 100%);
  box-shadow: 0 10px 0 rgba(0,0,0,.12), inset 0 0 0 4px rgba(255,255,255,.4);
  overflow: hidden; height: clamp(210px, 30vh, 250px);
}
/* petits nuages */
.scene::after {
  content: ""; position: absolute; top: 16px; left: 0; right: 0; height: 40px;
  background:
    radial-gradient(circle at 18% 50%, #fff 9px, transparent 10px),
    radial-gradient(circle at 24% 60%, #fff 13px, transparent 14px),
    radial-gradient(circle at 80% 40%, #fff 11px, transparent 12px),
    radial-gradient(circle at 86% 55%, #fff 8px, transparent 9px);
  opacity: .85; pointer-events: none;
}

/* toit de paille */
.roof {
  position: absolute; top: 0; left: -2%; width: 104%; height: 46px; z-index: 4;
  background: repeating-linear-gradient(95deg, #e0a35e 0 13px, #cd8a3f 13px 26px);
  box-shadow: 0 3px 6px rgba(0,0,0,.18);
}
.roof::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 14px;
  background: radial-gradient(circle at 11px -3px, #cd8a3f 10px, transparent 11px) repeat-x;
  background-size: 22px 14px;
}

/* le comptoir en bois */
.counter {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 5;
  background: linear-gradient(180deg, #c2843e 0%, var(--wood) 40%, var(--wood-deep) 100%);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.18), 0 -3px 8px rgba(0,0,0,.12);
  border-top: 3px solid #d49a52;
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 0 86px 0 104px;
}
.counter::before { /* veines du bois */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 46px);
}

/* ardoise des prix (total) */
.slate {
  position: relative; z-index: 1;
  background: #33424a; border: 4px solid #5a3b22; border-radius: 12px;
  padding: 5px 14px; text-align: center; box-shadow: 0 5px 0 rgba(0,0,0,.25);
  min-width: 96px;
}
.slate-lbl { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12px; color: #ffd98f; letter-spacing: .5px; }
.slate-val { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; color: #fff; line-height: 1; }

/* le billet/pièce que le client tend */
.paid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.paid-lbl { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.paid svg { animation: paid-wiggle 2.4s ease-in-out infinite; }
@keyframes paid-wiggle { 0%,100%{ transform: rotate(-4deg);} 50%{ transform: rotate(4deg);} }

/* Coco derrière le comptoir */
.coco-fig {
  position: absolute; left: 14px; bottom: 42px; z-index: 3;
  width: 90px; height: 90px;
}
.coco-fig svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 4px rgba(0,0,0,.15)); }

/* le client + sa bulle */
.cust-fig { position: absolute; right: 18px; bottom: 44px; z-index: 3; width: 64px; }
.cust-av {
  width: 64px; height: 64px; border-radius: 50%; background: var(--paper);
  overflow: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.18);
}
.cust-av svg { width: 100%; height: 100%; display: block; }

/* arrivée / départ / joie du client */
.cust-fig.entering { animation: cust-enter .5s cubic-bezier(.34,1.5,.5,1); }
@keyframes cust-enter { from { transform: translateX(130px) translateY(8px); opacity: 0; } }
.cust-fig.leaving { animation: cust-leave .42s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes cust-leave { to { transform: translateX(130px) translateY(8px); opacity: 0; } }
.cust-fig.happy .cust-av { animation: cust-hop .55s ease; }
@keyframes cust-hop { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-13px); } 60% { transform: translateY(-4px); } }
.coco-fig.nod { animation: coco-nod .55s ease; }
@keyframes coco-nod { 0%,100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-6deg) translateY(-3px); } 65% { transform: rotate(4deg); } }

.bubble {
  position: absolute; bottom: 56px; right: -6px; min-width: 116px; max-width: 168px;
  background: var(--paper); border-radius: 18px; padding: 8px 11px 9px;
  box-shadow: 0 6px 0 rgba(0,0,0,.14);
  animation: bub-in .45s .12s cubic-bezier(.34,1.5,.5,1) backwards;
}
@keyframes bub-in { from { transform: scale(.4); opacity: 0; } }
.bubble::after { content: ""; position: absolute; right: 24px; bottom: -12px; border: 10px solid transparent; border-top-color: var(--paper); border-bottom: 0; border-width: 12px 9px 0; }
.bubble.thanks { background: #ebf9e6; }
.bubble.thanks::after { border-top-color: #ebf9e6; }
.bubble-name { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 12px; color: var(--sea-deep); margin-bottom: 5px; text-align: center; }
.bubble.thanks .bubble-name { color: var(--leaf-deep); }
.order-foods { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.food { position: relative; line-height: 0; }
.food svg { width: 40px; height: 40px; display: block; filter: drop-shadow(0 2px 1px rgba(0,0,0,.16)); }
.thanks-heart svg { width: 40px; height: 40px; display: block; animation: heart-pop .5s cubic-bezier(.34,1.6,.5,1); }
@keyframes heart-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.food .q {
  position: absolute; bottom: -6px; right: -8px;
  min-width: 19px; height: 19px; padding: 0 3px;
  background: var(--coral); color: #fff; border-radius: 999px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 12px;
  display: grid; place-items: center; box-shadow: 0 2px 0 var(--coral-deep);
}

/* ====================================================
   LA BARRE D'ACTION : à rendre + reprendre + valider
   ==================================================== */
.action-bar { flex: none; display: flex; align-items: stretch; gap: 8px; }

.ask {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, #ffb65c 0%, var(--sea) 100%);
  border-radius: 16px; padding: 8px 16px;
  box-shadow: 0 5px 0 var(--sea-deep), inset 0 2px 0 rgba(255,255,255,.4);
}
.ask-coin svg { width: 38px; height: 38px; display: block; filter: drop-shadow(0 2px 1px rgba(0,0,0,.2)); }
.ask-text { display: flex; flex-direction: column; line-height: 1; }
.ask-lbl { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.ask-val { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(34px, 9vw, 44px); color: #fff; line-height: 1.05; text-shadow: 0 2px 0 rgba(0,0,0,.18); }

.reset-btn { flex: 0 0 auto; width: 52px; padding: 0; font-size: 24px; color: var(--sea-deep); }
.action-bar .pay-btn {
  flex: 0 0 auto;
  white-space: normal; line-height: 1.1; text-align: center;
  font-size: 16px; padding: 8px 18px;
}

/* ====================================================
   LE PLATEAU (monnaie rendue)
   ==================================================== */
.board { flex: none; display: flex; flex-direction: column; gap: 6px; }
.tray {
  min-height: 84px; border: 4px dashed #e7b97e; border-radius: 18px;
  background: rgba(255,255,255,.55); padding: 10px;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px;
  transition: border-color .15s, background .15s;
}
.tray.shake { animation: shake .4s; }
.tray.ok { border-color: var(--leaf); border-style: solid; background: rgba(92,184,92,.18); }
.tray-hint { color: #b07a3a; font-weight: 600; font-size: 14px; text-align: center; display: inline-flex; align-items: center; gap: 6px; }
.tray-hint .hint-arrow svg { width: 18px; height: 18px; display: block; animation: hint-bob 1s ease-in-out infinite; }
@keyframes hint-bob { 0%,100% { transform: translateY(3px); } 50% { transform: translateY(-2px); } }
.tray-sum { text-align: center; font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tray-sum b { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; }

.given-token { border: none; cursor: pointer; background: none; padding: 0; position: relative; animation: pop .24s cubic-bezier(.34,1.5,.5,1); }
.given-token:active { transform: scale(.92); }
.given-token::after { content: "×"; position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--coral-deep); color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* ====================================================
   LE DISTRIBUTEUR DE PIÈCES
   ==================================================== */
.coin-tray { flex: none; display: flex; flex-wrap: wrap; gap: clamp(8px,2vw,14px); justify-content: center; padding: 4px 0; }
.coin-btn { border: none; cursor: pointer; background: none; padding: 0; border-radius: 50%; transition: transform .1s; position: relative; }
.coin-btn:active { transform: translateY(4px) scale(.94); }
.coin-btn.hint { animation: coin-hint 1s ease-in-out infinite; }
@keyframes coin-hint { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); filter: drop-shadow(0 0 10px var(--sun)); } }
.money { display: block; }
.money.note { filter: drop-shadow(0 4px 0 rgba(0,0,0,.16)); }
.money.coin { filter: drop-shadow(0 5px 0 rgba(0,0,0,.22)); }

.feedback { flex: none; text-align: center; min-height: 22px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); transition: opacity .2s; }
.feedback.good { color: #1e6b2a; text-shadow: 0 1px 2px rgba(255,255,255,.4); }
.feedback.bad  { color: #8a2616; text-shadow: 0 1px 2px rgba(255,255,255,.4); }

/* ---------- Buttons ---------- */
.btn { border: none; cursor: pointer; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; border-radius: 16px; padding: 14px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform .08s; white-space: nowrap; }
.btn:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 rgba(0,0,0,.2) !important; }
.btn-play { background: var(--leaf); color: #fff; box-shadow: 0 6px 0 var(--leaf-deep); }
.btn-secondary { background: var(--sun); color: #7a5200; box-shadow: 0 5px 0 #e0a82e; }
.btn-ghost { background: var(--paper); color: var(--ink-soft); box-shadow: 0 6px 0 rgba(0,0,0,.14); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.ico { width: 18px; height: 18px; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; }
.ico-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ico-sound { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c96a1e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9zM16 9a3 3 0 0 1 0 6M19 7a7 7 0 0 1 0 10'/%3E%3C/svg%3E"); }
.muted .ico-sound { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec5c3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9zM17 9l4 6M21 9l-4 6'/%3E%3C/svg%3E"); }

/* ---------- Modals ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,50,58,.55); display: grid; place-items: center; z-index: 100; animation: fade .2s ease; padding: 20px; }
.modal-backdrop[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--paper); border-radius: 28px; padding: 26px 26px 22px; text-align: center; max-width: 400px; width: 100%; box-shadow: 0 14px 0 rgba(0,0,0,.2); animation: drop .35s cubic-bezier(.34,1.4,.5,1); max-height: 90vh; overflow-y: auto; }
@keyframes drop { from { transform: translateY(-40px) scale(.9); opacity: 0; } }
.modal h2 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; color: var(--coral); }
.modal p { color: var(--ink-soft); font-weight: 500; margin-top: 6px; line-height: 1.5; }
.modal-coco { width: 116px; height: 116px; margin: 0 auto 6px; }
.modal-coco svg { width: 100%; height: 100%; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

.intro-text { font-size: 18px; color: var(--ink); font-weight: 500; min-height: 86px; display: flex; align-items: center; justify-content: center; line-height: 1.5; }
.intro-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.intro-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--tile-edge); transition: background .2s, transform .2s; }
.intro-dots span.on { background: var(--coral); transform: scale(1.2); }

.win-stars { display: flex; justify-content: center; gap: 6px; margin: 8px 0 2px; }
.win-stars span { line-height: 0; opacity: .35; transform: scale(.7); }
.win-stars span svg { width: 42px; height: 42px; display: block; }
.win-stars span.on { opacity: 1; animation: star-pop .4s cubic-bezier(.34,1.6,.5,1) backwards; transform: scale(1); }
.win-stars span.on:nth-child(2) { animation-delay: .12s; }
.win-stars span.on:nth-child(3) { animation-delay: .24s; }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } }

.modal-help h2 { color: var(--sea-deep); }
.help-steps { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 14px; text-align: left; }
.help-step { display: flex; align-items: center; gap: 12px; background: #f6efdd; border-radius: 14px; padding: 10px 14px; font-weight: 500; font-size: 14px; color: var(--ink); }
.help-step b { font-weight: 700; }
.help-step-num { flex: none; width: 28px; height: 28px; background: var(--sea); color: #fff; border-radius: 50%; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; display: grid; place-items: center; }
.help-menu { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; }
.help-menu .row { display: flex; justify-content: space-between; align-items: center; background: #f6efdd; border-radius: 10px; padding: 7px 14px; font-weight: 600; font-size: 15px; color: var(--ink); }
.help-menu .row .em { display: inline-flex; vertical-align: middle; }
.help-menu .row .em svg { width: 24px; height: 24px; display: block; }
.help-menu .row span { display: inline-flex; align-items: center; gap: 7px; }
.help-menu .row b { color: var(--coral); font-family: 'Baloo 2', sans-serif; font-size: 17px; }

.modal-days h2 { color: var(--sea-deep); }
.day-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.day-card { position: relative; border: none; cursor: pointer; background: #f6efdd; border-radius: 16px; padding: 12px 4px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,.1); transition: transform .08s; }
.day-card:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.day-card .num { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--sea-deep); line-height: 1; }
.day-card .ministars { display: inline-flex; gap: 1px; margin-top: 4px; }
.day-card .ministars svg { width: 13px; height: 13px; display: block; }
.day-lock { position: absolute; top: 7px; right: 7px; display: inline-flex; }
.day-lock svg { width: 16px; height: 16px; display: block; }
.day-card.current { box-shadow: 0 0 0 3px var(--coral), 0 4px 0 rgba(0,0,0,.1); }
.day-card.current .num { color: var(--coral); }
.day-card.locked { opacity: .5; pointer-events: none; }

.modal-users h2, .modal-profile h2 { color: var(--sea-deep); }
.users-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.user-row { display: flex; align-items: center; gap: 8px; }
.user-pick { flex: 1; border: none; cursor: pointer; background: #f6efdd; border-radius: 16px; padding: 8px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.1); transition: transform .08s; }
.user-pick:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.user-row.active .user-pick { box-shadow: 0 0 0 3px var(--leaf), 0 4px 0 rgba(0,0,0,.1); background: #e6f6e2; }
.user-name { font-weight: 700; font-size: 16px; color: var(--ink); flex: 1; text-align: left; }
.user-current { display: inline-flex; }
.user-current svg { width: 22px; height: 22px; display: block; }
.user-del { border: none; cursor: pointer; width: 38px; height: 38px; flex: none; background: #f0e9d6; border-radius: 12px; display: grid; place-items: center; box-shadow: 0 4px 0 #ddd2b6; transition: transform .08s; }
.user-del svg { width: 18px; height: 18px; display: block; }
.user-del:active { transform: translateY(3px); box-shadow: 0 1px 0 #ddd2b6; }
.add-user { width: 100%; margin-bottom: 4px; }
.add-user .plus { font-size: 20px; font-weight: 800; }
.modal-profile .gender-q { margin-top: 16px; font-weight: 600; }
.name-input { width: 100%; margin-top: 10px; border: 3px solid var(--sand-deep); border-radius: 14px; padding: 12px 16px; font-family: 'Fredoka', sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); text-align: center; background: #fffdf6; outline: none; }
.name-input:focus { border-color: var(--sea); }
.name-input.shake { animation: shake .4s; }
.gender-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.gender-btn { border: 3px solid #f0e9d6; cursor: pointer; background: #fff; border-radius: 16px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.1); transition: transform .08s; }
.gender-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.gender-emoji { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; }
.gender-emoji svg { width: 100%; height: 100%; display: block; }
.gender-btn[data-gender="f"].selected { border-color: #ff7ab0; background: #ffe6f0; }
.gender-btn[data-gender="g"].selected { border-color: #4aa3e8; background: #e2f1ff; }
.gender-choice.missing .gender-btn { border-color: var(--coral); animation: shake .4s; }

@keyframes shake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-7px);} 40%,80%{transform:translateX(7px);} }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* ---------- Footer / thème ---------- */
.credits { flex: none; text-align: center; padding: 6px 0 2px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.theme-switcher { position: relative; display: inline-flex; align-items: center; gap: 2px; background: rgba(0,0,0,.18); border-radius: 999px; padding: 3px; }
.theme-track { position: absolute; top: 3px; left: 0; height: calc(100% - 6px); background: rgba(255,255,255,.28); border-radius: 999px; box-shadow: 0 2px 0 rgba(0,0,0,.12); transition: transform .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1); pointer-events: none; will-change: transform, width; }
.theme-switcher button { position: relative; background: none; border: none; cursor: pointer; padding: 5px 9px; border-radius: 999px; font-size: 16px; line-height: 1; color: inherit; user-select: none; touch-action: manipulation; }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .brand-text { display: none; }
  .profile-chip { padding: 5px 10px 5px 5px; gap: 6px; max-width: 110px; }
  .profile-name { font-size: 13px; }
  .icon-btn { width: 40px; height: 40px; font-size: 17px; }
  .back-link { width: 40px; height: 40px; font-size: 27px; }
  .topbar { gap: 6px; } .topbar-right { gap: 6px; }
  .cust-fig { width: 142px; }
}

/* ---------- View Transitions ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- Dark theme ---------- */
[data-theme="dark"] { --ink: #f0e6da; --ink-soft: #b89a86; --paper: #2a2030; --tile: #3a2d3e; --tile-edge: #4a3a4e; }
[data-theme="dark"] body { background: radial-gradient(120% 100% at 50% -10%, #5c3a0a 0%, #3a1f06 50%, #1e0b0b 100%) fixed; }
[data-theme="dark"] .brand-text h1 { color: #f0e6da; }
[data-theme="dark"] .brand-text p { color: #ffcaa0; }
[data-theme="dark"] .credits b { color: #f0e6da; }
[data-theme="dark"] .scene { background: linear-gradient(180deg, #2b4a55 0%, #2e4438 45%, #4a3a22 100%); }
[data-theme="dark"] .tray { background: rgba(0,0,0,.22); border-color: #6a4a2a; }
[data-theme="dark"] .help-step, [data-theme="dark"] .user-pick, [data-theme="dark"] .day-card, [data-theme="dark"] .help-menu .row { background: #3a2d3e; }
[data-theme="dark"] .gender-btn { background: #332636; border-color: #4a3a4e; }
[data-theme="dark"] .name-input { background: #332636; color: var(--ink); }
[data-theme="dark"] .theme-switcher { background: rgba(255,255,255,.15); }
[data-theme="dark"] .theme-track { background: rgba(255,255,255,.38); }