/* ===========================================================
   Poisson Cru — apéro frais : lagon, corail, citron vert
   =========================================================== */

:root {
  --abyss:   #0A2B2E;
  --abyss-2: #0F3A3D;
  --abyss-3: #15494D;
  --foam:    #F1ECDD;
  --muted:   #8FB3AE;

  --coral:    #FF6B5C;
  --coral-hi: #FF8A6B;
  --hibiscus: #FF5C8A;
  --mango:    #FFA63D;
  --lime:     #B6E25A;
  --lime-hi:  #D2F06E;
  --citrus:   #F2C14E;
  --turq:     #2DD4C4;
  --tiare:    #FBF3DE;

  --tile:     #F4EAD2;
  --tile-ink: #1C2B2A;

  --grad: linear-gradient(120deg, var(--coral-hi), var(--mango) 70%, #FF8A3D);
  --grad-tropical: linear-gradient(110deg, var(--hibiscus), var(--coral) 35%, var(--mango) 70%, var(--lime));
  --grad-lime: linear-gradient(120deg, var(--lime-hi), var(--lime));
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 18px 40px -18px rgba(0,0,0,.7);
  --tap: 56px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--abyss); color: var(--foam); overflow: hidden; position: relative; -webkit-font-smoothing: antialiased;
}

.aura {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 30% at 16% 8%, rgba(255,92,138,.20), transparent 70%),
    radial-gradient(42% 34% at 86% 14%, rgba(255,166,61,.18), transparent 72%),
    radial-gradient(60% 44% at 50% 104%, rgba(45,212,196,.20), transparent 72%);
  animation: drift 16s ease-in-out infinite alternate;
}
/* motif tapa (géométrie polynésienne) en fond, très discret */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23FBF3DE'%3E%3Cpath d='M32 8 L40 22 L24 22 Z'/%3E%3Cpath d='M0 54 L8 40 L16 54 Z'/%3E%3Cpath d='M48 54 L56 40 L64 54 Z'/%3E%3Ccircle cx='32' cy='44' r='3'/%3E%3Ccircle cx='8' cy='15' r='2'/%3E%3Ccircle cx='56' cy='15' r='2'/%3E%3C/g%3E%3Cg stroke='%23FBF3DE' stroke-width='1.6' fill='none'%3E%3Cpath d='M0 32 L16 26 L32 32 L48 26 L64 32'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
}
@keyframes drift { from { transform: translateY(0) scale(1); } to { transform: translateY(-10px) scale(1.04); } }

#app { position: relative; z-index: 1; height: 100dvh; max-width: 520px; margin: 0 auto; display: flex; }

.screen {
  display: none; flex-direction: column; width: 100%;
  padding: calc(var(--safe-t) + 18px) 22px calc(var(--safe-b) + 18px);
  animation: screen-in .4s cubic-bezier(.2,.7,.2,1) both;
}
.screen.is-active { display: flex; }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; }
.center-scroll { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---- Boutons ---- */
.btn {
  font: inherit; font-weight: 700; font-size: 1.02rem; border: none; border-radius: var(--radius);
  min-height: var(--tap); padding: 0 24px; color: var(--foam); cursor: pointer; letter-spacing: .2px;
  transition: transform .12s ease, filter .2s ease, opacity .2s ease;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn-primary { background: var(--grad); color: #3a140f; box-shadow: 0 12px 26px -12px rgba(255,107,92,.6); }
.btn-ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.btn.big { width: 100%; min-height: 64px; font-size: 1.12rem; }
.btn-ok { background: var(--grad-lime); color: #20330a; flex: 1; }
.btn-fail { background: rgba(255,107,92,.16); color: var(--coral-hi); border: 1px solid rgba(255,107,92,.5); flex: 1; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack.pad { padding-top: 14px; }
.stack.full { width: 100%; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); color: var(--foam); font-size: 1.2rem; cursor: pointer;
  display: grid; place-items: center;
}
.bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; min-height: 42px; }
.bar-title { font-weight: 700; font-size: 1.15rem; letter-spacing: .3px; }
.pile-tag { margin-left: auto; font-size: .82rem; font-weight: 800; color: var(--abyss); background: var(--lime); padding: 6px 12px; border-radius: 999px; }
.end-btn { margin-left: 8px; font-size: 1.05rem; }

/* ===========================================================
   ACCUEIL
   =========================================================== */
.home-mark { display: grid; place-items: center; margin-top: auto; }
.fish-logo { width: 168px; filter: drop-shadow(0 8px 22px rgba(255,107,92,.35)); animation: bob 3.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.logo {
  margin-top: 16px; font-size: 2.6rem; font-weight: 800; letter-spacing: 1px; text-align: center;
  background: var(--grad-tropical); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow { font-size: .74rem; letter-spacing: 3px; text-transform: uppercase; color: var(--mango); text-align: center; margin-top: 8px; }
.wave { display: block; width: 120px; margin: 12px auto 0; opacity: .9; }
.tagline { text-align: center; color: var(--muted); margin: 12px auto auto; font-size: 1rem; max-width: 20em; line-height: 1.5; }
[data-screen="home"] .stack { padding-bottom: 6px; }

/* ===========================================================
   RÈGLES
   =========================================================== */
.how { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.how li { color: var(--muted); line-height: 1.5; }
.how strong { color: var(--foam); }
.rule-note {
  margin-top: 20px; background: linear-gradient(180deg, rgba(182,226,90,.08), rgba(182,226,90,.02));
  border: 1px solid rgba(182,226,90,.22); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.rule-note p { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.rule-note strong { color: var(--lime-hi); }

/* ===========================================================
   PRÉPARATION
   =========================================================== */
.field-label { font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 6px 0 10px; }
.players-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.player-row {
  display: flex; align-items: center; gap: 10px; background: var(--abyss-2);
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius); padding: 6px 8px 6px 16px;
}
.player-row .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--grad); flex-shrink: 0; }
.player-row input { flex: 1; background: none; border: none; color: var(--foam); font: inherit; font-size: 1rem; min-width: 0; padding: 12px 0; }
.player-row input:focus { outline: none; }
.player-row input::placeholder { color: rgba(143,179,174,.6); }
.player-row .remove { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: rgba(255,107,92,.12); color: var(--coral); border: none; font-size: 1.2rem; cursor: pointer; }

.btn-add { width: 100%; min-height: 52px; border-radius: var(--radius); background: rgba(182,226,90,.1); border: 1px dashed rgba(182,226,90,.45); color: var(--lime-hi); font: inherit; font-weight: 700; cursor: pointer; margin-bottom: 18px; }

.segmented { display: flex; gap: 8px; background: var(--abyss-2); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 6px; margin-bottom: 18px; }
.segmented button { flex: 1; font: inherit; font-weight: 700; font-size: .95rem; border: none; cursor: pointer; background: transparent; color: var(--muted); border-radius: 9px; padding: 12px 0; transition: all .18s ease; }
.segmented button.on { background: var(--abyss-3); color: var(--lime-hi); box-shadow: inset 0 0 0 1px rgba(182,226,90,.3); }

.config-block { background: var(--abyss-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); overflow: hidden; }
.config-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; gap: 14px; }
.config-label span { font-weight: 700; display: block; }
.config-label small { color: var(--muted); font-size: .82rem; }
.switch { position: relative; width: 54px; height: 32px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; cursor: pointer; border-radius: 999px; background: var(--abyss-3); border: 1px solid rgba(255,255,255,.12); transition: .25s; }
.slider::before { content: ""; position: absolute; height: 24px; width: 24px; left: 3px; top: 3px; background: var(--foam); border-radius: 50%; transition: .25s; }
.switch input:checked + .slider { background: var(--grad-lime); border-color: transparent; }
.switch input:checked + .slider::before { transform: translateX(22px); }
.hint { margin-top: 16px; color: var(--muted); font-size: .9rem; text-align: center; min-height: 1.2em; }
.hint.warn { color: var(--coral); }

/* ===========================================================
   JEU
   =========================================================== */
.turn-of { text-align: center; color: var(--muted); font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
.turn-name { text-align: center; font-size: 2rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; }

.score-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 6px; margin-bottom: 2px; scrollbar-width: none; }
.score-strip::-webkit-scrollbar { display: none; }
.score-chip { flex: none; font-size: .8rem; font-weight: 700; background: var(--abyss-2); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 6px 12px; color: var(--muted); white-space: nowrap; }
.score-chip b { color: var(--coral); }
.score-chip.active { border-color: var(--mango); color: var(--foam); background: rgba(255,166,61,.12); }
.bust-pile { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }

.tiles-zone { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.tiles-empty { color: var(--muted); font-size: .95rem; opacity: .7; }
.tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: center; }
.tile {
  width: 56px; height: 60px; border-radius: 9px; background: linear-gradient(160deg, #FBF4E2, var(--tile));
  color: var(--tile-ink); display: grid; place-items: center; position: relative;
  font-size: 2rem; font-weight: 800; box-shadow: 0 4px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
  animation: tile-pop .32s cubic-bezier(.2,.9,.3,1.3) both;
}
.tile::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 26 12'%3E%3Cg fill='none' stroke='%231C2B2A' stroke-width='1.6' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='2.5' x2='9' y2='9.5'/%3E%3Cline x1='13' y1='2' x2='14' y2='10'/%3E%3Cline x1='18' y1='3' x2='19' y2='9'/%3E%3Ccircle cx='22.5' cy='6' r='1.6' fill='%231C2B2A'/%3E%3C/g%3E%3C/svg%3E");
  position: absolute; bottom: 5px; right: 6px; opacity: .4;
}
.bone-ic { width: 17px; height: 9px; display: inline-block; vertical-align: middle; color: var(--coral); margin-left: 3px; }
@keyframes tile-pop { from { opacity: 0; transform: scale(.4) translateY(-12px) rotate(-8deg); } to { opacity: 1; transform: scale(1) translateY(0) rotate(0); } }

.play-block { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.pioche {
  width: 100%; min-height: 96px; border-radius: var(--radius-lg); cursor: pointer;
  background: linear-gradient(160deg, var(--abyss-3), var(--abyss-2)); border: 2px dashed rgba(182,226,90,.45);
  color: var(--foam); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: transform .12s ease, border-color .2s ease;
}
.pioche:active { transform: scale(.97); border-color: var(--lime); }
.pioche-fish { font-size: 2rem; animation: bob 3s ease-in-out infinite; }
.pioche-label { font-weight: 700; color: var(--lime-hi); letter-spacing: .3px; }

.timer-wrap { width: 100%; display: flex; align-items: center; gap: 14px; }
.timer-bar { flex: 1; height: 16px; border-radius: 999px; background: var(--abyss-3); overflow: hidden; }
.timer-bar span { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--grad-lime); transition: width .1s linear; }
.timer-num { font-size: 1.5rem; font-weight: 800; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.answer-hint { color: var(--muted); font-size: .95rem; text-align: center; max-width: 24em; }
.answer-actions { display: flex; gap: 12px; width: 100%; }
.answer-actions .btn { min-height: 60px; }

/* ===========================================================
   ARÊTE (perdu)
   =========================================================== */
[data-screen="bust"].is-active { background: radial-gradient(120% 80% at 50% 30%, rgba(255,107,92,.18), transparent 60%); }
.bone { width: 200px; animation: rattle .5s cubic-bezier(.36,.07,.19,.97) both; }
.bone svg { width: 100%; height: auto; }
@keyframes rattle { 10%,90% { transform: translateX(-2px) rotate(-2deg); } 30%,50%,70% { transform: translateX(-7px) rotate(-4deg); } 40%,60% { transform: translateX(7px) rotate(4deg); } }
.bust-title { font-size: 3rem; font-weight: 800; color: var(--coral); text-transform: uppercase; letter-spacing: 1px; }
.bust-sub { color: var(--muted); font-size: 1.15rem; }
.bust-sub strong { color: var(--foam); }

/* ===========================================================
   CLASSEMENT
   =========================================================== */
.result-title { font-size: 1.9rem; font-weight: 800; margin-bottom: 6px; }
.result-sub { color: var(--muted); margin-bottom: 22px; }
.result-sub b { color: var(--coral); }
.board { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.board-row {
  display: flex; align-items: center; gap: 14px; background: var(--abyss-2);
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius); padding: 14px 16px;
}
.board-row .rank { width: 26px; font-weight: 800; color: var(--muted); }
.board-row .who { font-weight: 700; }
.board-row .bones { margin-left: auto; font-weight: 800; color: var(--coral); font-variant-numeric: tabular-nums; }
.board-row.worst { border-color: rgba(255,107,92,.5); background: rgba(255,107,92,.08); }
.board-row.best .rank { color: var(--lime); }

/* ---- cartes spéciales ---- */
.tile.special {
  background: linear-gradient(160deg, #FF8FB3, var(--hibiscus));
  color: #5a1430; font-size: 1.5rem;
}
.tile.special::after { content: "✦"; }

.answer-context { color: var(--citrus); font-size: .85rem; font-weight: 700; letter-spacing: .3px; text-align: center; }

.event-card {
  width: 100%; background: linear-gradient(160deg, var(--abyss-3), var(--abyss-2));
  border: 1px solid rgba(242,193,78,.35); border-radius: var(--radius-lg);
  padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: var(--shadow); animation: tile-pop .35s cubic-bezier(.2,.8,.2,1) both;
}
.event-icon { font-size: 3rem; line-height: 1; color: var(--citrus); }
.event-msg { font-size: 1.1rem; font-weight: 700; text-align: center; line-height: 1.4; }

.target-msg { font-size: 1.05rem; text-align: center; color: var(--foam); margin-bottom: 4px; }
.target-msg strong { color: var(--coral); }
.target-players { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.target-pick {
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  background: var(--abyss-3); color: var(--foam); border: 1px solid rgba(242,193,78,.4);
  border-radius: 999px; padding: 13px 20px; transition: transform .12s ease, background .2s ease;
}
.target-pick:active { transform: scale(.95); background: var(--abyss-2); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }