/* Le Bouchon du jour : palette propre au jeu (bitume la nuit, lumière orangée des lampadaires, voiture rouge),
   posée sur les jetons de style.css et le verre de ios.css. Préfixe bo-.
   Le parking est l'objet du jeu : il reste sombre dans les deux thèmes. Le cadre passe au verre teinté de la palette. */
[data-game="bouchon"] {
  --bg: oklch(0.2 0.02 250); --surface: oklch(0.25 0.02 250); --surface-2: oklch(0.3 0.02 250);
  --line: oklch(0.38 0.02 250); --ink: oklch(0.97 0.008 80); --ink-2: oklch(0.86 0.015 80); --mute: oklch(0.76 0.02 250);
  --acc: oklch(0.82 0.15 70); --acc-soft: oklch(0.86 0.12 72); --on-acc: oklch(0.22 0.04 60);
  --pos: oklch(0.8 0.15 155); --neg: oklch(0.72 0.18 22);
  --bo-wall: radial-gradient(65% 42% at 12% 10%, oklch(0.55 0.14 65 / .4), transparent 70%),
             radial-gradient(60% 45% at 96% 46%, oklch(0.42 0.08 250 / .7), transparent 70%),
             radial-gradient(75% 50% at 30% 96%, oklch(0.36 0.06 230 / .8), transparent 72%),
             linear-gradient(180deg, var(--bg) 0, var(--bg) 70px, oklch(0.19 0.02 250) 40%, oklch(0.14 0.015 250));
  --glass-tint: oklch(0.26 0.02 250 / .55); --glass-tint-thick: oklch(0.24 0.02 250 / .8);
  --glass-hi: rgba(255, 255, 255, .26); --glass-rim: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 5, 20, .4);
  --glass-shadow: 0 10px 34px rgba(0, 6, 20, .42);
  --glass-ink: oklch(0.97 0.008 80); --glass-ink-2: oklch(0.86 0.015 80);
  --glass-field: oklch(0.14 0.015 250 / .55);
  /* l'objet du jeu : identique dans les deux thèmes */
  --bo-tar: oklch(0.31 0.012 250); --bo-tar-2: oklch(0.26 0.012 250); --bo-paint: oklch(0.93 0.01 90 / .5); --bo-red: oklch(0.6 0.21 27);
}
[data-game="bouchon"][data-theme="light"] {
  --bg: oklch(0.95 0.012 80); --surface: oklch(0.99 0.005 80); --surface-2: oklch(0.93 0.015 80);
  --line: oklch(0.86 0.015 80); --ink: oklch(0.24 0.02 60); --ink-2: oklch(0.38 0.02 60); --mute: oklch(0.46 0.02 250);
  --acc: oklch(0.56 0.16 50); --acc-soft: oklch(0.5 0.15 50); --on-acc: oklch(0.99 0.005 80);
  --pos: oklch(0.48 0.13 155); --neg: oklch(0.52 0.19 25);
  --bo-wall: radial-gradient(65% 42% at 12% 10%, oklch(0.88 0.09 70 / .85), transparent 70%),
             radial-gradient(60% 45% at 96% 46%, oklch(0.9 0.035 250 / .9), transparent 70%),
             radial-gradient(75% 50% at 30% 96%, oklch(0.9 0.03 230 / .9), transparent 72%),
             linear-gradient(180deg, var(--bg) 0, var(--bg) 70px, oklch(0.94 0.012 80) 45%, oklch(0.92 0.015 250));
  --glass-tint: rgba(255, 253, 250, .6); --glass-tint-thick: rgba(255, 253, 250, .82);
  --glass-hi: rgba(255, 255, 255, .9); --glass-rim: rgba(255, 255, 255, .55); --glass-edge: rgba(40, 30, 10, .12);
  --glass-shadow: 0 10px 34px rgba(60, 40, 10, .14);
  --glass-ink: oklch(0.24 0.02 60); --glass-ink-2: oklch(0.38 0.02 60);
  --glass-field: rgba(255, 255, 255, .64);
}

/* le fond d'écran sous le verre ; la barre du haut reste unie */
html[data-game="bouchon"] { background: var(--bg); }
[data-game="bouchon"] body { background: transparent; }
[data-game="bouchon"] body::before { display: none; }
.bo-wall { position: fixed; inset: 0; z-index: -1; background: var(--bo-wall); background-color: var(--bg); pointer-events: none; }
@media (prefers-reduced-transparency: reduce) { .bo-wall { background: var(--bg); } }
.bo-top { background: var(--bg); border-bottom-color: transparent; }
.bo-top .crumb { font-family: var(--font); font-weight: 650; }
.bo-top a.ic { text-decoration: none; font-size: 26px; padding-bottom: 4px; width: 44px; height: 44px; border-radius: 50%; border: 0; color: var(--glass-ink);
  background: var(--glass-tint); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge); }

.bo-wrap { max-width: 560px; margin: 0 auto; padding: calc(var(--bar-h) + env(safe-area-inset-top) + 10px) 16px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 2; }
.bo-play-col, .bo-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bo-status { padding: 0 4px; }
.bo-status .mj-title { font-size: 26px; }
[hidden] { display: none !important; }

/* les cartes en verre, le prénom */
.bo-card { border-radius: var(--radius-xl); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bo-card h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--glass-ink-2); }
.bo-card p { margin: 0; color: var(--glass-ink-2); }
.bo-card input, .bo-card .emo-btn { background: var(--glass-field); border: 0; color: var(--glass-ink); box-shadow: inset 0 0 0 .5px var(--glass-rim); border-radius: 14px; min-height: 48px; }
.bo-card input::placeholder { color: var(--glass-ink-2); }
.bo-card input:focus { box-shadow: inset 0 0 0 2px var(--acc); outline: 0; }
.bo-card .field > span { color: var(--glass-ink-2); }
.bo-card .name-row { display: flex; gap: 8px; }
.bo-card .name-row input { flex: 1; min-width: 0; padding: 0 14px; font-size: 17px; }
.bo-card .emo-btn { width: 52px; font-size: 24px; }
.bo-wrap .btn { border-radius: var(--radius-capsule); min-height: 50px; }
.bo-wrap .btn:not(.primary) { background: var(--glass-tint); color: var(--glass-ink); border: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge); }
.bo-wrap .btn.primary { background: var(--acc); color: var(--on-acc); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 20px -10px var(--acc); }
.bo-wrap .btn:disabled { opacity: .45; box-shadow: none; }
.bo-emo-pop { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; padding: 8px; background: var(--glass-field); border-radius: 14px; }
.bo-emo-pop .emo { min-height: 46px; font-size: 24px; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.bo-emo-pop .emo.on { background: color-mix(in oklab, var(--acc) 30%, transparent); }

/* ---------------------------------------------------------------- les trois bouchons du jour */
.bo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 22px; background: var(--glass-tint);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge); }
.bo-tab { min-height: 52px; border: 0; border-radius: 18px; padding: 6px 4px; background: transparent; color: var(--glass-ink); cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.bo-tab b { font-size: 15.5px; font-weight: 650; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bo-tab small { font-size: 12.5px; color: var(--glass-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo-tab.on { background: color-mix(in oklab, var(--glass-ink) 16%, transparent); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 2px 8px rgba(0, 0, 0, .18); }
[data-theme="light"] .bo-tab.on { background: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(60, 40, 10, .12); }
.bo-tab-ok { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--pos); color: oklch(0.2 0.05 160); font-size: 11px; font-weight: 800; }
.bo-tab:active { transform: scale(.97); }
.bo-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------------------------------------------------------------- le chrono, les coups */
.bo-bar { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 6px; }
.bo-clock { font-size: 36px; font-weight: 750; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--glass-ink); }
.bo-clock.idle { color: var(--glass-ink-2); }
.bo-moves { text-align: right; font-size: 15px; color: var(--glass-ink-2); font-variant-numeric: tabular-nums; line-height: 1.25; }
.bo-moves b { color: var(--glass-ink); font-size: 20px; }

/* ---------------------------------------------------------------- le parking, vu de dessus */
.bo-lot { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1; border-radius: 22px; padding: 3.2%; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, oklch(0.36 0.012 250), oklch(0.3 0.012 250)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .07), 0 18px 40px rgba(0, 0, 0, .35); }
.bo-grid { position: relative; width: 100%; height: 100%; border-radius: 12px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), var(--bo-paint) calc(100% / 6 - 1px) calc(100% / 6)), radial-gradient(120% 90% at 30% 20%, var(--bo-tar), var(--bo-tar-2)); }
.bo-grid::before { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--bo-paint); pointer-events: none; }
.bo-exit { position: absolute; right: -3.4%; top: calc(100% / 6 * 2); height: calc(100% / 6); width: 4%; background: linear-gradient(90deg, var(--bo-tar-2), oklch(0.82 0.15 70 / .55)); border-radius: 0 6px 6px 0; }
.bo-exit::after { content: ""; position: absolute; right: -15px; top: 50%; width: 10px; height: 10px; border-top: 3px solid oklch(0.82 0.15 70); border-right: 3px solid oklch(0.82 0.15 70); transform: translateY(-50%) rotate(45deg); }
.bo-car { position: absolute; padding: .7%; cursor: grab; will-change: transform; transition: transform .16s cubic-bezier(.2, .9, .3, 1); }
.bo-car.drag { transition: none; cursor: grabbing; z-index: 3; }
.bo-car .body { position: relative; width: 100%; height: 100%; border-radius: 22% / 30%; background: linear-gradient(var(--sh, 180deg), color-mix(in oklab, var(--c) 100%, white 18%), var(--c) 55%, color-mix(in oklab, var(--c) 70%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(0, 0, 0, .25), 0 4px 8px rgba(0, 0, 0, .4); }
.bo-car.v .body { border-radius: 30% / 22%; --sh: 90deg; }
.bo-car .w1, .bo-car .w2 { position: absolute; background: oklch(0.25 0.03 240 / .85); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.bo-car.h .w1 { left: 58%; top: 16%; width: 13%; height: 68%; } .bo-car.h .w2 { left: 18%; top: 18%; width: 9%; height: 64%; }
.bo-car.v .w1 { top: 58%; left: 16%; height: 13%; width: 68%; } .bo-car.v .w2 { top: 18%; left: 18%; height: 9%; width: 64%; }
.bo-car.truck .w2 { display: none; }
.bo-car.truck.h .w1 { left: 76%; width: 11%; } .bo-car.truck.v .w1 { top: 76%; height: 11%; }
.bo-car .box { position: absolute; background: rgba(255, 255, 255, .14); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.bo-car.truck.h .box { left: 6%; top: 10%; width: 64%; height: 80%; } .bo-car.truck.v .box { top: 6%; left: 10%; height: 64%; width: 80%; }
.bo-car.red .body { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px oklch(0.85 0.12 70 / .9), 0 0 18px oklch(0.7 0.2 30 / .55); }
.bo-car.out { transition: transform .5s cubic-bezier(.5, 0, .9, .4), opacity .5s; opacity: 0; }
.bo-lot.free .bo-car { cursor: grab; }
/* avant le départ : le parking est sous une bâche (on ne le voit qu'au départ du chrono) */
.bo-cover { position: absolute; inset: 3.2%; border-radius: 12px; display: grid; place-items: center; text-align: center; padding: 18px;
  background: repeating-linear-gradient(135deg, oklch(0.3 0.012 250) 0 14px, oklch(0.27 0.012 250) 14px 28px); color: oklch(0.95 0.01 80); }
.bo-cover b { display: block; font-size: 22px; letter-spacing: -.01em; }
.bo-cover span { display: block; margin-top: 4px; font-size: 15px; color: oklch(0.85 0.015 80); }
.bo-cover .btn.primary { margin-top: 16px; min-width: 200px; }
.bo-hint { margin: 0; text-align: center; font-size: 13px; color: var(--glass-ink-2); }
.bo-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------------------------------------------------------------- la sortie */
.bo-end { gap: 12px; }
.bo-end h3 { margin: 0; font-size: 22px; letter-spacing: -.01em; color: var(--glass-ink); }
.bo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bo-stat { border-radius: 14px; padding: 10px 6px; background: var(--glass-field); text-align: center; }
.bo-stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--glass-ink); }
.bo-stat span { font-size: 12px; color: var(--glass-ink-2); }
.bo-acts { display: grid; gap: 8px; }
.bo-next { font-size: 15px; text-align: center; }
.bo-next b { font-variant-numeric: tabular-nums; color: var(--glass-ink); }

/* ---------------------------------------------------------------- le classement */
.bo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bo-r { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-top: .5px solid color-mix(in oklab, var(--glass-ink) 14%, transparent); }
.bo-r:first-child { border-top: 0; }
.bo-r.moi .bo-who b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--acc); }
.bo-pos { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--glass-ink-2); text-align: center; }
.bo-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bo-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-emo { font-size: 20px; }
.bo-sc { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }
.bo-sc small { display: block; font-weight: 500; font-size: 12.5px; color: var(--glass-ink-2); }
.bo-wait, .bo-none { font-size: 15px; }

/* PC : le parking à gauche, le classement dans un panneau en verre épais à droite */
@media (min-width: 1100px) {
  .bo-wrap { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; align-items: start; padding-top: calc(var(--bar-h) + 28px); }
  .bo-play-col { max-width: 560px; }
  .bo-side { position: sticky; top: calc(var(--bar-h) + 20px); }
  .bo-side .bo-rank { background: var(--glass-tint-thick); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); }
}
@media (prefers-reduced-motion: reduce) { .bo-car, .bo-car.out { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .bo-tabs, .bo-wrap .btn:not(.primary) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); } }
@media (prefers-contrast: more) { .bo-tabs, .bo-lot { box-shadow: inset 0 0 0 1.5px var(--glass-ink); } }