/* ====== Thème Plage Bleu Ciel (cover) ====== */
:root{
  --sky-50:#eef7ff;
  --sky-100:#d9f0ff;
  --sky-200:#bfe6ff;
  --sky-300:#9ed8ff;
  --sky-400:#6fc3ff;
  --sky-500:#3fb0ff;
  --sky-600:#1f9ae6;
  --sea-700:#0e7490;
  --text:#083344;
  --white:#ffffff;
  --glass: rgba(255,255,255,.65);
  --glass-weak: rgba(255,255,255,.4);
  --chip-bg:#f7fbff;
  --chip-border:#bfe6ff;
  --chip-text:#0b4660;

  --ticket-cell: clamp(22px, min(3.0vw, 3.9vh), 44px);
  --ticket-gap: 4px;

  /* Grille 1..90 compacte */
  --num-size: clamp(16px, 1.7vw, 24px);
  --num-gap: 5px;
}

@media (max-width: 1400px){
  :root{ --ticket-cell: clamp(22px, min(2.8vw, 3.8vh), 40px); }
}
@media (max-width: 1200px){
  :root{ --ticket-cell: clamp(22px, min(2.6vw, 3.6vh), 38px); }
}
@media (max-width: 1024px){
  :root{ --ticket-cell: clamp(20px, min(2.4vw, 3.4vh), 36px); }
}

@font-face{
  font-family: 'CookieLocal';
  src: url('/assets/fonts/Cookie-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face{
  font-family: 'BalooLocal';
  src: url('/assets/fonts/Baloo2-Regular.ttf') format('truetype');
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: BalooLocal, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.1)),
    url(/assets/bg/beach-day.jpg) center/cover fixed no-repeat;
}
body.theme-beach-alt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.15)),
    url(/assets/bg/beach-alt.jpg) center/cover fixed no-repeat;
}

#app{max-width:1200px;margin:18px auto;padding:0 14px}

/* ====== UI base ====== */
.head-bar{
  display:flex; gap:8px; align-items:center;
  background:var(--glass); backdrop-filter: blur(6px);
  padding:10px; border-radius:14px; border:1px solid var(--sky-300);
}
.pill{padding:6px 10px;border-radius:999px;background:var(--sky-100);border:1px solid var(--sky-300);color:var(--text);font-weight:700}
.spacer{flex:1}

.card{border-radius:14px;padding:12px}
.translucent{background:var(--glass);border:1px solid var(--sky-300)}

.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.controls input,.controls button,.controls select{
  padding:8px 12px;border-radius:12px;border:1px solid var(--sky-300);background:var(--sky-50);color:var(--text);
}
.controls select{cursor:pointer}

.picker{display:flex;align-items:center;gap:6px}
.picker button{width:28px;height:28px;border-radius:10px;border:1px solid var(--sky-300);background:var(--sky-100);cursor:pointer}
#avImg,#skinImg{width:44px;height:44px;border-radius:10px;border:1px solid var(--sky-300);object-fit:cover;display:block}

/* ====== Boutons arrondis bleu clair ====== */
.btn{
  cursor:pointer; font-weight:900; color:#fff;
  background: linear-gradient(180deg, var(--sky-400), var(--sky-600));
  border:1px solid var(--sky-500);
  border-radius:999px; padding:9px 14px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
  transition: transform .08s ease, filter .08s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0); }
.btn.ghost{
  background: linear-gradient(180deg, var(--sky-200), var(--sky-400));
  border-color: var(--sky-400);
  color:#fff;
}
.btn.primary{
  background: linear-gradient(180deg, var(--sky-400), var(--sky-600));
  border-color: var(--sky-500);
  color:#fff;
}
.btn.danger{
  background: linear-gradient(180deg, #fecaca, #ef4444);
  border-color:#ef4444; color:#fff;
}

/* Kick */
.btn.kick{ padding:6px 10px; font-size:12px; line-height:1; }

/* ====== Slider volume (match D.A.) ====== */
#vol{
  -webkit-appearance: none;
  width: 140px; height: 12px;
  background: transparent; outline: none;
  margin: 0 8px; padding: 0;
}
#vol::-webkit-slider-runnable-track{
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sky-200), var(--sky-400));
  border: 1px solid var(--sky-300);
}
#vol::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -4px;
  background: #fff; border-radius: 50%;
  border: 2px solid var(--sky-500);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
#vol::-moz-range-track{
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sky-200), var(--sky-400));
  border: 1px solid var(--sky-300);
}
#vol::-moz-range-thumb{
  width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  border: 2px solid var(--sky-500);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ====== Table layout ====== */
.table-area{
  position:relative; min-height:70vh; margin-top:12px;
  display:grid; grid-template-areas:
    "c0 center c1"
    ".  center ."
    "c2 center c3";
  grid-template-columns: 1fr minmax(260px, 340px) 1fr;
  grid-template-rows: auto 1fr auto;
  gap:14px;
}
.center-col{grid-area:center; display:flex; flex-direction:column; align-items:center; gap:10px}
.corner.c0{grid-area:c0}.corner.c1{grid-area:c1}.corner.c2{grid-area:c2}.corner.c3{grid-area:c3}
.corner{display:flex;justify-content:center;align-items:flex-start}

/* ====== BOULES ====== */
.ball-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.ball-row{display:flex;align-items:center;gap:10px}
.ball{
  width:140px;height:140px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-weight:900; font-size:64px;
  background: radial-gradient(circle at 35% 30%, var(--sky-300), var(--sky-600));
  border:4px solid #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 4px 18px rgba(255,255,255,.4);
  font-family: CookieLocal, BalooLocal, cursive;
}
.ball.small{
  width:64px;height:64px;font-size:28px;border-width:3px;
}
.ball.pop-out{animation:bubbleOut .12s ease forwards}
.ball.bounce-in{animation:bubbleIn .22s ease forwards}
@keyframes bubbleOut{0%{transform:scale(1);opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes bubbleIn{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}

/* ====== Notice ====== */
.notice{
  padding:6px 10px;background:var(--glass);
  border:1px solid var(--sky-300); border-radius:999px; font-weight:800;
  color:var(--sea-700)
}

/* ====== Grille 1..90 ====== */
.recent-title{display:none} /* ← masque le libellé sans changer la dispo */
.num-book{
  display:grid;
  grid-template-columns: repeat(10, var(--num-size));
  gap: var(--num-gap);
  background: var(--glass);
  border:1px solid var(--sky-300);
  border-radius:12px;
  padding:8px;
  user-select:none;
}
.num-cell{
  width: var(--num-size);
  height: var(--num-size);
  font-size: calc(var(--num-size) * 0.6);
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:#fff; color:var(--text);
  border:1px solid #e6f3ff;
}
.num-cell.hit{
  outline:2px solid var(--sky-500);
  background:#e8f6ff;
  box-shadow:0 0 8px rgba(63,176,255,.45);
}

/* ====== Cartes / Tickets ====== */
.playerCard{
  background:var(--glass); border:1px solid var(--sky-300); border-radius:14px; padding:10px;
  backdrop-filter: blur(4px);
  margin: 0 auto;
  max-width: calc(9 * var(--ticket-cell) + 8 * var(--ticket-gap) + 20px + 20px);
}
.playerCard .head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.playerCard .head img{width:28px;height:28px;border-radius:50%}
.playerCard .name{font-weight:900}
.score-badge{margin-left:auto;background:var(--sky-200);border:1px solid var(--sky-300);border-radius:999px;padding:3px 8px;font-weight:800}

.tickets{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.ticket{
  position:relative; padding:10px; border-radius:12px; background:var(--glass-weak); border:1px solid var(--sky-300)
}
.ticket.placeholder{opacity:.4}
.ticket-skin{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:12px;
  opacity:1; filter:none; pointer-events:none;
}

.tgrid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(9, var(--ticket-cell));
  gap: var(--ticket-gap);
}
.tcell{
  width: var(--ticket-cell);
  height: calc(var(--ticket-cell) * 1.08);
  background: var(--chip-bg);
  border:1px solid var(--chip-border);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.tcell.blank{background:transparent;border-color:transparent}
.chip{
  position: relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:var(--chip-text);
  line-height:1; user-select:none;
}
.chip.clickable{cursor:pointer}
.chip.ok::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%) scale(1);
  width: clamp(24px, 66%, 52px);
  height: clamp(24px, 66%, 52px);
  background: url(/assets/ui/shell_mark.png) center/contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
  animation: shellPop .18s ease;
}
@keyframes shellPop{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

.actions{display:flex;gap:8px;justify-content:center;margin-top:6px}
.btn-bingo{
  padding:10px 16px; border-radius:999px; font-weight:900; cursor:pointer;
  border:1px solid var(--sky-400);
  background: linear-gradient(180deg, var(--sky-300), var(--sky-600));
  color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.btn-bingo:hover{transform:translateY(-1px)}

/* ====== Chat compact (scroll interne fixe) ====== */
.chat{
  width:100%;
  background:var(--glass); border:1px solid var(--sky-300); border-radius:12px;
  padding:8px; display:flex; flex-direction:column; gap:8px;
}
.chat-body{
  max-height:160px; height:160px;
  overflow:auto; display:flex; flex-direction:column; gap:8px;
}
.chat-input{display:flex; gap:8px}
.chat-input input{
  flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--sky-300); background:#fff; color:var(--text)
}
.chat-msg{display:flex;gap:8px;align-items:flex-start}
.chat-msg .avatar{width:24px;height:24px;border-radius:50%}
.chat-msg .bubble{background:#fff;border:1px solid #e5f4ff;border-radius:10px;padding:8px;max-width:100%}

/* ====== Overlay Notifs (toujours au-dessus) ====== */
.overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999}
.overlay.passive{pointer-events:none}
.overlay-card{
  padding:14px 20px; border-radius:18px; text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  border:1px solid var(--sky-300); box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
.overlay-title{
  font-family: CookieLocal, BalooLocal, cursive;
  font-size:48px; line-height:1;
  color:#1e40af; /* fallback visible */
}
.overlay-sub{margin-top:6px;font-weight:800;color:var(--sea-700)}
.overlay-title.countdown{ color:#2563eb; } /* fallback bleu */

@supports (-webkit-background-clip:text) or (background-clip: text){
  .overlay-title{
    background: linear-gradient(180deg, #ffffff, #c7ebff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
  }
  .overlay-title.countdown{
    background: linear-gradient(180deg, #93c5fd, #2563eb);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
  }
}

/* ====== Modal Scores ====== */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.35)}
.modal-card{position:relative;background:#fff;border:1px solid var(--sky-300);border-radius:12px;min-width:320px;max-width:90vw;max-height:80vh;padding:10px;overflow:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-body{max-height:70vh;overflow:auto}

.score-table{width:100%}
.score-grid{display:flex;flex-direction:column;gap:6px}
.score-grid .row{display:grid;grid-template-columns: 90px repeat(4, 1fr); gap:6px}
.score-grid .row.head .cell{background:var(--sky-200);border-color:var(--sky-300);font-weight:900}
.score-grid .row.foot .cell{background:#f0fbff;border-color:#b3e6ff;font-weight:900}
.score-grid .cell{
  background:#fff;border:1px solid #e5f4ff;border-radius:8px;padding:6px 8px;text-align:center
}
.score-grid .cell.head{background:#e8f6ff}
.score-grid .cell.strong{font-weight:900}