/* ===========================================================================
   BoardKit — custom.css
   Hybrid Tailwind migration: theme tokens + chrome utilities live in
   index.html (tailwind.config + @apply). This file keeps every rule that
   cannot become an idiomatic utility — CSS variables (theming backbone),
   clamp()/vmin fluid sizing, gradients/textures, keyframes, pseudo-elements,
   and all responsive @media blocks. Classes consumed by src/*.js stay here.
   =========================================================================== */

/* --- Theming backbone (CSS variables; dark mode swaps under .dark) --------- */
:root {
  --bg:#f7f6f2; --bg2:#ece9e2; --card:#ffffff;
  --text:#2b2622; --text2:#8a8175; --text3:#b5ada1;
  --border:#e3dfd6; --border-strong:#2b2622;
  /* App chrome (topbar / footer) — inverts with the theme: light bars in
     light mode, dark bars in dark mode. Accents are alpha so they read
     correctly on whichever bar background is active. */
  --bar-bg:#ffffff; --bar-text:#2b2622;
  --bar-border:rgba(0,0,0,.08); --bar-btn:rgba(0,0,0,.05); --bar-btn-hover:rgba(0,0,0,.10);
}
.dark {
  --bg:#1c1a17; --bg2:#262320; --card:#262320;
  --text:#f4f0e8; --text2:#aaa298; --text3:#6e6760;
  --border:#3a352f; --border-strong:#f4f0e8;
  --bar-bg:#161616; --bar-text:#f4f0e8;
  --bar-border:rgba(255,255,255,.08); --bar-btn:rgba(255,255,255,.08); --bar-btn-hover:rgba(255,255,255,.16);
}

/* --- Base ------------------------------------------------------------------ */
/* No universal reset here: Tailwind v4 preflight (@layer base) already applies
   box-sizing:border-box and margin/padding/border:0 to *. Re-declaring it
   UNLAYERED would outrank every Tailwind padding/margin utility (unlayered
   beats layered), zeroing inline p-*/m-* in the markup — so it's omitted. */
html,body{height:100%;overflow:hidden;}
body{font-family:'Mallory','Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);transition:background .2s,color .2s;}
.hidden{display:none !important;}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;}

/* --- Safe-area insets (notch / home-indicator; viewport-fit=cover) --------- */
/* env() can't live in the index.html @apply block; these merge with the
   @apply'd base via the cascade (custom.css loads after). .fab-add base
   bottom:22px is in @apply — calc() below overrides it : on le remonte
   au-dessus de la barre d'onglets (#footer = 60px) pour ne pas masquer
   l'onglet « Dés » sur mobile (60px barre + 16px de marge). */
#topbar  { padding-top: max(0px, env(safe-area-inset-top)); }
#footer  { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.fab-add { bottom: calc(76px + env(safe-area-inset-bottom)); }
.drawer  { padding-top: env(safe-area-inset-top); }

/* --- Chrome residuals ------------------------------------------------------
   Chrome is full utilities-in-markup (index.html). These few rules can't be
   inline utilities: JS-injected SVGs (no element to put utilities on), the
   .open / .active state toggled by JS, and an adjacent-sibling border. The
   base classes stay on the elements alongside their inline utilities. */
.icon-btn svg { width: 20px; height: 20px; }
.tab-icon svg { width: 22px; height: 22px; }
.fab-add  svg { width: 26px; height: 26px; }
.fab-add { display: none; }   /* hidden on desktop; @media ≤640px sets display:flex */
.drawer            { transform: translateX(100%); }
.drawer.open       { transform: translateX(0); }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.tab-btn.active    { opacity: 1; }

/* --- Mode selector (welcome + settings) — used by JS ----------------------- */
.mode-select-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;}
.mode-label{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px;}
.mode-select{font-family:inherit;font-size:15px;font-weight:700;color:var(--text);background:var(--card);border:1.5px solid var(--border);border-radius:999px;padding:10px 22px;cursor:pointer;outline:none;min-width:190px;text-align:center;}
.mode-select:focus{border-color:var(--border-strong);}
.mode-hint{font-size:12px;color:var(--text2);font-weight:500;line-height:1.5;padding:0 0 14px;}

/* --- Tiles area (grid + all tile rules: clamp/vmin/gradient/texture) ------- */
#tiles-area{flex:1;min-height:0;position:relative;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));grid-auto-rows:1fr;gap:2px;min-height:100%;background:var(--bg2);}

.tile{background:#5B9BD5;color:#fff;display:flex;flex-direction:column;padding:3vmin;position:relative;overflow:hidden;}
/* Counter games: size containment (overrides the @container inline-size utility) so the
   score can size to BOTH width (cqi) and height (cqb) and fit short landscape tiles.
   Yams keeps inline-size (grows vertically to its category grid + the area scrolls). */
.tile:not(.yams){container-type:size;}
.tile.leader{box-shadow:inset 0 0 0 4px rgba(255,255,255,0.65);}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,1.5vmin,18px);}
.tile-name{font-size:clamp(16px,3vmin,32px);font-weight:800;text-align:center;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crown-icon{display:inline-block;width:0.85em;height:0.85em;vertical-align:-0.12em;margin-right:4px;}
.tile-team{font-size:clamp(11px,1.4vmin,16px);opacity:.8;text-align:center;margin-top:clamp(2px,.6vmin,6px);font-weight:600;}
.tile-icon-btn{width:clamp(28px,4.2vmin,46px);height:clamp(28px,4.2vmin,46px);border-radius:50%;background:rgba(255,255,255,0.16);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s;}
.tile-icon-btn:hover{background:rgba(255,255,255,0.28);}
.tile-icon-btn svg{width:clamp(14px,2vmin,20px);height:clamp(14px,2vmin,20px);}
.tile-center{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vmin,48px);max-width:clamp(280px,50vmin,640px);margin-inline:auto;width:100%;}
.tile-score-btn{border-radius:50%;background:rgba(255,255,255,0.18);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .12s,transform .1s;}
.tile-score-btn:hover{background:rgba(255,255,255,0.3);}
.tile-score-btn:active{transform:scale(0.93);}
.tile-score-btn svg{width:clamp(20px,4vmin,40px);height:clamp(20px,4vmin,40px);}
.tile-score-value{font-weight:800;cursor:pointer;user-select:none;letter-spacing:-2px;text-align:center;transition:transform .1s;}
.tile-score-value:hover{transform:scale(1.04);}
.tile-progress{height:clamp(4px,.8vmin,8px);border-radius:4px;background:rgba(255,255,255,0.25);overflow:hidden;}
.tile-progress-fill{height:100%;background:rgba(255,255,255,0.92);border-radius:4px;transition:width .35s;}
.tile-placeholder{background:transparent;border:3px dashed var(--border);align-items:center;justify-content:center;cursor:pointer;color:var(--text3);transition:background .15s,color .15s,border-color .15s;}
.tile-placeholder:hover{background:var(--card);color:var(--text2);border-color:var(--border-strong);}
.tile-placeholder svg{width:clamp(28px,6vmin,64px);height:clamp(28px,6vmin,64px);}
.tile-placeholder.textured{border-radius:clamp(10px,2.2vmin,22px);}

/* --- Skyjo mode (gradient/texture/stroke) ---------------------------------- */
.tile.skyjo{
  --cell: clamp(14px,3vmin,28px);
  background-color:var(--tile-color);
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 65%),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--cell)*0.6), rgba(255,255,255,0.10) calc(var(--cell)*0.6) var(--cell)),
    repeating-linear-gradient(60deg, transparent 0 calc(var(--cell)*0.6), rgba(255,255,255,0.10) calc(var(--cell)*0.6) var(--cell)),
    repeating-linear-gradient(120deg, transparent 0 calc(var(--cell)*0.6), rgba(255,255,255,0.10) calc(var(--cell)*0.6) var(--cell));
  border: clamp(6px,1.6vmin,14px) solid #fff;
  border-radius: clamp(10px,2.2vmin,22px);
}
.tile.skyjo.leader{box-shadow:inset 0 0 0 4px rgba(255,255,255,0.85);}
.tile.skyjo .tile-score-value{
  color:#2b2622;
  -webkit-text-stroke: clamp(2px,0.7vmin,7px) #fff;
  paint-order: stroke fill;
}
.tile.skyjo .tile-name,
.tile.skyjo .tile-team{
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.tile.skyjo .tile-icon-btn,
.tile.skyjo .tile-score-btn{
  background: rgba(0,0,0,0.18);
}
.tile.skyjo .tile-icon-btn:hover,
.tile.skyjo .tile-score-btn:hover{
  background: rgba(0,0,0,0.3);
}
.tile.skyjo .tile-progress{
  background: rgba(0,0,0,0.18);
}

/* --- Mölkky : aspect bois (gradient/texture) ------------------------------- */
.tile.molkky{
  background-color:var(--tile-color);
  background-image:
    repeating-linear-gradient(91deg, rgba(0,0,0,0.10) 0 1px, rgba(0,0,0,0) 1px 6px),
    repeating-linear-gradient(89deg, rgba(255,255,255,0.06) 0 1px, rgba(255,255,255,0) 1px 9px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 3px, rgba(0,0,0,0) 3px 14px),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.18));
  border:clamp(5px,1.4vmin,12px) solid #4a3520;
  border-radius:clamp(8px,1.8vmin,18px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
}
.tile.molkky.leader{box-shadow:inset 0 0 0 4px rgba(255,255,255,0.7);}
.tile.molkky .tile-name,
.tile.molkky .tile-team{text-shadow:0 1px 3px rgba(0,0,0,0.55);}
.tile.molkky .tile-score-value{text-shadow:0 2px 6px rgba(0,0,0,0.45);}
.tile.molkky .tile-icon-btn,
.tile.molkky .tile-score-btn{background:rgba(0,0,0,0.22);}
.tile.molkky .tile-icon-btn:hover,
.tile.molkky .tile-score-btn:hover{background:rgba(0,0,0,0.34);}
.tile.molkky .tile-progress{background:rgba(0,0,0,0.25);}

/* --- Mölkky : rangée des ratés + bouton « Manqué » ------------------------- */
.molkky-row{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vmin,16px);margin-top:clamp(6px,1.2vmin,12px);}
.miss-dots{display:flex;gap:clamp(4px,0.8vmin,7px);}
.miss-dot{width:clamp(9px,1.4vmin,13px);height:clamp(9px,1.4vmin,13px);border-radius:50%;border:2px solid rgba(255,255,255,0.7);box-sizing:border-box;}
.miss-dot.on{background:#fff;}
.btn-miss{font-family:inherit;font-weight:700;font-size:clamp(12px,1.6vmin,15px);color:#fff;background:rgba(0,0,0,0.28);border:1.5px solid rgba(255,255,255,0.4);border-radius:999px;padding:clamp(5px,1vmin,9px) clamp(12px,2.2vmin,20px);cursor:pointer;transition:background .15s,transform .1s;}
.btn-miss:hover{background:rgba(0,0,0,0.42);}
.btn-miss:active{transform:scale(0.95);}

/* --- Mölkky : joueur éliminé ----------------------------------------------- */
.tile.molkky.eliminated{filter:grayscale(0.7);opacity:.7;}
.elim-badge{align-self:center;margin-top:clamp(6px,1.2vmin,12px);font-weight:800;font-size:clamp(13px,2vmin,18px);letter-spacing:1px;text-transform:uppercase;color:#fff;background:rgba(0,0,0,0.45);border:2px solid rgba(255,255,255,0.6);border-radius:999px;padding:clamp(4px,0.9vmin,8px) clamp(12px,2.4vmin,22px);}

/* --- Yams : total + grille des 13 catégories ------------------------------- */
.tile.yams .tile-center{flex-direction:column;gap:clamp(8px,1.6vmin,18px);}
.yams-total{font-size:clamp(34px,9cqi,96px);font-weight:800;letter-spacing:-1px;line-height:1;text-align:center;}
.yams-grid{max-width:clamp(220px,62vmin,560px);}
.yams-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1px,.3vmin,4px);min-height:clamp(38px,7vmin,68px);padding:clamp(4px,1vmin,9px) clamp(2px,.6vmin,6px);border-radius:clamp(8px,1.4vmin,14px);background:rgba(255,255,255,0.16);border:none;color:#fff;font-family:inherit;cursor:pointer;transition:background .15s,transform .1s;}
.yams-cell:hover{background:rgba(255,255,255,0.28);}
.yams-cell:active{transform:scale(0.95);}
.yams-cell.filled{background:rgba(255,255,255,0.32);}
.yams-cell-label{font-size:clamp(9px,1.3vmin,13px);font-weight:600;opacity:.82;text-align:center;line-height:1.05;}
.yams-cell-val{font-size:clamp(15px,2.3vmin,24px);font-weight:800;line-height:1;}

/* --- Empty state (fluid illustration + clamp title) ------------------------ */
.empty-illustration{width:min(220px,45vw);height:auto;}
.empty-title{font-size:clamp(22px,3vw,30px);font-weight:800;}

/* --- Settings toggle switch (pseudo-element track/knob) -------------------- */
.switch{position:relative;display:inline-block;width:40px;height:24px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider-toggle{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:999px;transition:.2s;}
.slider-toggle:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:var(--card);border-radius:50%;transition:.2s;}
input:checked + .slider-toggle{background:var(--border-strong);}
input:checked + .slider-toggle:before{transform:translateX(16px);}

/* --- History (built by history.js) ----------------------------------------- */
.history-list{display:flex;flex-direction:column;gap:8px;}
.history-item{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:14px;border:1px solid var(--border);padding:11px 14px;font-size:13px;}
.h-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.h-desc{flex:1;color:var(--text);font-weight:500;}
.h-delta{font-weight:700;min-width:38px;text-align:right;}
.h-time{font-size:11px;color:var(--text3);white-space:nowrap;font-weight:500;}
.empty-hist{text-align:center;color:var(--text2);font-size:13px;padding:2rem 0;font-weight:500;}

/* --- Masquer les éléments propres au score hors de l'onglet Compteur ------- */
body:not(.tab-score) .score-only{display:none !important;}

/* --- Sablier / minuteur (fluid clamp/vmin + keyframes) --------------------- */
#timer-area{flex:1;min-height:0;overflow-y:auto;}
.timer-panel{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,4vh,32px);padding:24px;text-align:center;}
.timer-setup{display:flex;align-items:flex-end;gap:14px;}
.timer-field{display:flex;flex-direction:column;align-items:center;gap:6px;}
.timer-field label{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px;}
.timer-field input{width:96px;border:1.5px solid var(--border);border-radius:14px;padding:12px;font-size:26px;font-weight:800;text-align:center;background:var(--card);color:var(--text);font-family:inherit;outline:none;}
.timer-field input:focus{border-color:var(--border-strong);}
.timer-colon{font-size:30px;font-weight:800;color:var(--text2);padding-bottom:12px;}

.hourglass{background:transparent;border:none;padding:0;cursor:pointer;color:var(--text);display:flex;transition:transform .6s cubic-bezier(.5,.05,.2,1),color .2s,opacity .2s;}
.hourglass:active{transform:scale(0.96);}
.hourglass-svg{width:clamp(110px,28vmin,190px);height:auto;display:block;}
.sand-top,.sand-bottom{opacity:.5;}
.hourglass.running,.hourglass.paused,.hourglass.done{transform:rotate(180deg);}
.hourglass.running:active,.hourglass.paused:active,.hourglass.done:active{transform:rotate(180deg) scale(0.96);}
.hourglass.paused{opacity:.65;}
.hourglass.running .sand-top{animation:sandPulse 1.1s ease-in-out infinite;}
.hourglass.done{color:#e26162;animation:hourglassShake .5s ease;}

.timer-display{font-size:clamp(52px,15vmin,118px);font-weight:800;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums;}
.timer-display.warning{color:#e26162;}
.timer-hint{font-size:13px;color:var(--text2);font-weight:500;max-width:300px;line-height:1.5;}
.timer-reset{min-width:170px;}

@keyframes sandPulse{0%,100%{opacity:.5;}50%{opacity:.18;}}
@keyframes hourglassShake{0%,100%{transform:rotate(180deg);}25%{transform:rotate(173deg);}75%{transform:rotate(187deg);}}

/* --- Lanceur de dés (onglet Dés) ------------------------------------------- */
/* Le canvas WebGL remplit la zone ; les panneaux flottent par-dessus la scène
   3D (toujours sombre : tapis vert sur velours rouge), d'où le texte clair sur
   le indice et l'ombre portée pour rester lisibles quel que soit le thème. */
#dice-area{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:none;}
#dice-canvas{position:absolute;inset:0;}
#dice-canvas canvas{display:block;width:100%;height:100%;}

.dice-count-btn{width:30px;height:30px;border-radius:999px;border:1.5px solid var(--bar-text);background:transparent;color:inherit;font-size:18px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;transition:background .15s,transform .12s;}
.dice-count-btn:hover{background:color-mix(in srgb,var(--bar-text) 14%,transparent);}
.dice-count-btn:active{transform:scale(.94);}

.dice-slider-row{display:flex;flex-direction:column;gap:4px;cursor:pointer;}
.dice-slider-row span{font-size:11px;font-weight:700;letter-spacing:.4px;opacity:.7;text-transform:uppercase;}
.dice-slider-row input[type=range]{width:100%;accent-color:var(--bar-text);cursor:pointer;}

#dice-hint{position:absolute;left:50%;top:clamp(72px,16vw,98px);transform:translateX(-50%);max-width:82%;text-align:center;color:#f4f0e8;font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.2px;z-index:5;pointer-events:none;text-shadow:0 1px 5px rgba(0,0,0,.65);transition:opacity .5s;}

#dice-result{position:absolute;left:50%;bottom:clamp(88px,22vw,104px);transform:translate(-50%,8px);z-index:10;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;}
#dice-result.visible{opacity:1;transform:translate(-50%,0);}
.dice-chip{width:32px;height:32px;border-radius:10px;background:var(--bg2);border:1.5px solid var(--bar-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;}

#dice-launch{position:absolute;left:50%;bottom:clamp(18px,5vw,28px);transform:translateX(-50%);z-index:10;transition:transform .12s;}
#dice-launch:active{transform:translateX(-50%) scale(.97);}

/* --- Responsive (fluid/responsive — kept verbatim) ------------------------- */
@media (max-width:640px){
  #topbar{padding:0 14px;gap:8px;}
  .topbar-sep{display:none;}
  .topbar-sum{font-size:15px;}
  .icon-btn{width:38px;height:38px;}
  .icon-btn svg{width:18px;height:18px;}
  .drawer{width:300px;}
  .fab-add{display:flex;}
  #tiles-grid{grid-template-columns:repeat(2,1fr);}
  .tile-score-btn svg{width:clamp(16px,3.5vmin,40px);height:clamp(16px,3.5vmin,40px);}
  .tile-center{gap:clamp(6px,2.5vmin,48px);}
  .tile-icon-btn{width:clamp(24px,3.5vmin,46px);height:clamp(24px,3.5vmin,46px);}
}
@media (max-width:520px){
  .topbar-left{gap:8px;}
  .topbar-title{font-size:16px;}
}
@media (max-width:380px){
  #topbar{padding:0 8px;gap:4px;}
  .topbar-actions{gap:4px;}
  .icon-btn{width:34px;height:34px;}
  .icon-btn svg{width:16px;height:16px;}
  .topbar-title{font-size:14px;}
  .empty-instructions .step{font-size:13px;}
}
@media (max-width:480px){
  #empty-state{padding:20px 16px;gap:14px;}
  .empty-title{font-size:20px;}
}
@media (max-height:480px){
  #topbar{height:52px;}
  .icon-btn{width:34px;height:34px;}
  #footer{height:50px;}
  .tab-icon svg{width:20px;height:20px;}
  .tile{ padding-block: clamp(6px,1.2vmin,14px); }
}