/* ====================================================================================================
   Un seul indice : tout l'écran est le jeu (même style que Chromo, le jeu pilote, voir la fin d'ios.css).
   Une salle tamisée couleur aubergine, une lampe au-dessus de la table, la carte mystère sous la lampe
   et les chevalets des joueurs autour, comme des ardoises où l'on écrit au feutre.
   Le meneur parle dans une bulle de verre ; la zone d'action est un plateau de verre collé en bas.
   La salle reste sombre en thème clair : c'est l'objet du jeu, comme le tapis de Chromo.
   Préfixe usi-. Chargé après ios.css.
   ==================================================================================================== */
:root[data-game="unseulindice"] {
  --bg: oklch(0.2 0.05 330); --surface: oklch(0.26 0.055 330); --surface-2: oklch(0.31 0.06 330); --line: oklch(0.42 0.05 330 / .6);
  --ink: oklch(0.97 0.012 330); --ink-2: oklch(0.87 0.03 330); --mute: oklch(0.79 0.035 330);
  --acc: oklch(0.85 0.15 78); --acc-soft: oklch(0.91 0.1 82); --on-acc: oklch(0.26 0.06 60); --neg: oklch(0.7 0.19 25); --pos: oklch(0.84 0.14 155);
  --glass-tint: oklch(0.24 0.05 330 / .5); --glass-tint-thick: oklch(0.2 0.05 330 / .78);
  --glass-hi: rgba(255, 255, 255, .3); --glass-rim: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .35);
  --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-field: rgba(255, 255, 255, .1);
  --usi-paper: oklch(0.97 0.018 90); --usi-paper-2: oklch(0.92 0.03 85); --usi-ink: oklch(0.25 0.04 300); --usi-red: oklch(0.6 0.2 25);
}
/* la salle : une lampe au-dessus de la table, la pénombre autour */
[data-game="unseulindice"] body { background:
    radial-gradient(46% 30% at 50% 26%, oklch(0.62 0.12 70 / .38), transparent 70%),
    radial-gradient(90% 60% at 50% 30%, oklch(0.36 0.09 335), oklch(0.22 0.06 330) 62%, oklch(0.14 0.04 320));
  background-color: var(--bg); background-attachment: fixed; }
[data-game="unseulindice"] body::before, [data-game="unseulindice"] .grain { display: none; }
@media (prefers-reduced-transparency: reduce) { [data-game="unseulindice"] body { background: var(--bg); } }
#s-unseulindice { gap: 10px; padding-bottom: 0; display: flex; flex-direction: column; }
#usi-main { gap: 12px; flex: 1; display: flex; flex-direction: column; }
#usi-main > .usi-tray { margin-top: auto; order: 2; }
#usi-main > .usi-side { order: 1; }
.usi-side:not(.final) { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* la ligne de partie et les puces */
.usi-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.usi-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; font: 600 13px var(--font); color: var(--ink-2); white-space: nowrap;
  background: var(--glass-tint); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) 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); }
button.usi-chip { cursor: pointer; min-height: 44px; }
.usi-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* la table : le devineur en haut, la carte sous la lampe, les chevalets autour */
.usi-table-in { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 2px; }
.usi-seat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.usi-av { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, oklch(0.46 0.08 330), oklch(0.27 0.06 330));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 3px var(--acc), 0 0 24px 2px color-mix(in oklab, var(--acc) 45%, transparent), 0 8px 18px rgba(0, 0, 0, .4); }
.usi-seat.off .usi-av { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px rgba(255, 255, 255, .2); opacity: .55; }
.usi-nm { font-size: 15px; font-weight: 650; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.usi-role { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--acc); color: var(--on-acc); }

/* la carte mystère : du papier épais, le mot écrit gros ; le dos pour le devineur */
.usi-card { position: relative; width: min(78vw, 300px); min-height: 136px; padding: 16px 18px 18px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: linear-gradient(170deg, var(--usi-paper), var(--usi-paper-2)); color: var(--usi-ink); transform: rotate(-1.5deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(0, 0, 0, .06), 0 18px 36px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3); }
.usi-card small { font-size: 12.5px; font-weight: 650; color: oklch(0.45 0.05 320); }
.usi-card b { font-size: clamp(28px, 9vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.usi-card.back { background: repeating-linear-gradient(45deg, oklch(0.8 0.15 78), oklch(0.8 0.15 78) 10px, oklch(0.76 0.15 72) 10px, oklch(0.76 0.15 72) 20px); color: oklch(0.28 0.07 60); }
.usi-card.back b { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 44px; background: var(--usi-paper); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.usi-card.back small { color: oklch(0.28 0.07 60); margin-top: 4px; }
.usi-card.final b { font-size: 56px; font-variant-numeric: tabular-nums; }
.usi-card.final b span { font-size: 26px; color: oklch(0.45 0.05 320); }
.usi-card.deal { animation: usi-deal .5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes usi-deal { from { transform: translateY(-30px) rotate(-8deg) scale(.9); opacity: 0; } }
.usi-stamp { position: absolute; right: -8px; bottom: -12px; padding: 5px 12px; border-radius: 10px; font: 800 16px var(--font); transform: rotate(-8deg); color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.usi-stamp.ok { background: oklch(0.55 0.15 155); }
.usi-stamp.ko { background: var(--usi-red); }
.usi-stamp.pass { background: oklch(0.45 0.03 300); }
.usi-stamp.pop { animation: usi-stamp .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes usi-stamp { from { transform: rotate(-8deg) scale(1.8); opacity: 0; } }

/* les chevalets : une ardoise blanche, le prénom dessous */
.usi-easels { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px 10px; width: 100%; max-width: 640px; }
.usi-easel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
button.usi-easel { cursor: pointer; }
.usi-board { position: relative; width: 100%; min-height: 58px; padding: 8px 6px; border-radius: 10px; display: grid; place-items: center; text-align: center; transform: rotate(var(--tilt, 0deg));
  background: var(--usi-paper); color: var(--usi-ink); box-shadow: inset 0 0 0 3px oklch(0.84 0.03 300), 0 10px 20px -8px rgba(0, 0, 0, .55); }
.usi-board::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 46%; height: 7px; margin-left: -23%; border-radius: 0 0 6px 6px; background: oklch(0.62 0.05 320); }
.usi-board b { font-size: 18px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.usi-who { display: flex; align-items: center; gap: 5px; max-width: 100%; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); margin-top: 4px; }
.usi-who i { font-style: normal; }
.usi-pen { width: 26px; height: 26px; color: oklch(0.5 0.05 320); animation: usi-write 1.1s ease-in-out infinite; }
.usi-pen svg { width: 100%; height: 100%; }
@keyframes usi-write { 50% { transform: translate(4px, -2px) rotate(-8deg); } }
.usi-ready { font-size: 24px; font-weight: 800; color: oklch(0.5 0.13 155); }
.usi-hidden { color: oklch(0.55 0.05 320); }
.st-writing .usi-board { background: oklch(0.88 0.02 320); }
.st-out .usi-board b { text-decoration: line-through; text-decoration-color: var(--usi-red); text-decoration-thickness: 3px; color: oklch(0.5 0.04 320); }
.st-out .usi-board { background: oklch(0.86 0.02 320); }
.usi-why { position: absolute; top: -9px; right: -6px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--usi-red); color: #fff; white-space: nowrap; }
.usi-easel.me .usi-board { box-shadow: inset 0 0 0 3px var(--acc), 0 10px 20px -8px rgba(0, 0, 0, .55); }
.usi-easel.off { opacity: .5; }
button.usi-easel:focus-visible .usi-board { outline: 3px solid var(--acc); outline-offset: 3px; }
.usi-easels.many { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.usi-easels.many .usi-board b { font-size: 16px; }

/* le meneur */
.usi-say { flex-direction: row; justify-content: flex-start; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 22px; text-align: left;
  background: var(--glass-tint); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge), 0 10px 30px rgba(0, 0, 0, .3); }
.usi-say.hot { box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 1px color-mix(in oklab, var(--acc) 55%, transparent), 0 0 0 .5px var(--glass-edge), 0 0 30px -6px color-mix(in oklab, var(--acc) 50%, transparent), 0 10px 30px rgba(0, 0, 0, .3); }
.usi-pip { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 19px; line-height: 1;
  background: color-mix(in oklab, var(--acc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 55%, transparent); }
#usi-main .usi-say .mj-title { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
#usi-main .usi-say.hot .mj-title { color: var(--acc); }
#usi-main .usi-say .mj-say { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.35; }

/* le plateau de verre collé en bas */
.usi-tray { position: sticky; bottom: 0; z-index: 5; margin: 2px -20px 0; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; display: flex; flex-direction: column; gap: 10px;
  background: var(--glass-tint-thick); -webkit-backdrop-filter: blur(34px) saturate(170%); backdrop-filter: blur(34px) saturate(170%);
  box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 -10px 30px rgba(0, 0, 0, .3); }
.usi-tray-top { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.usi-tray-top b { color: var(--ink); }
.usi-tray-top:empty, .usi-tray-foot:empty, .usi-form:empty { display: none; }
.usi-form { display: flex; flex-direction: column; gap: 8px; }
.usi-row { display: flex; gap: 8px; }
.usi-in { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 0; border-radius: 16px; font: 650 19px var(--font); color: var(--ink);
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 .5px var(--glass-rim); }
.usi-in::placeholder { color: var(--ink-2); opacity: .75; font-weight: 500; }
.usi-in:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--acc); }
#usi-main .usi-row .btn { min-height: 52px; border-radius: 16px; padding: 0 20px; font: 700 16px var(--font); }
#usi-main .usi-tray .btn.primary { background: var(--acc); color: var(--on-acc); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 24px -10px color-mix(in oklab, var(--acc) 80%, black); }
#usi-main .usi-tray .btn.lg { border-radius: 999px; min-height: 54px; width: 100%; }
#usi-main .usi-tray .btn.ghost { min-height: 44px; color: var(--ink-2); background: none; border: 0; }
#usi-main .usi-tray .btn.usi-pass { background: rgba(255, 255, 255, .08); color: var(--ink); border-radius: 999px; }
.usi-mine { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.usi-mine span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-2); }
.usi-mine b { font-size: 20px; color: var(--ink); overflow-wrap: anywhere; }
#usi-main .usi-mine .btn { min-height: 44px; color: var(--acc); }
.usi-note { margin: 0; text-align: center; font-size: 15px; color: var(--ink-2); padding: 6px 0; }
.usi-bars { display: flex; gap: 5px; justify-content: center; }
.usi-bars i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.usi-bars i.on { background: var(--acc); }
.usi-bars i.off { opacity: .4; }

/* les cartes jouées, et la table : colonne de droite sur PC, feuille sur téléphone, écran de fin */
.usi-side { display: flex; flex-direction: column; gap: 8px; }
.usi-score { display: flex; align-items: baseline; gap: 8px; }
.usi-score b { font: 800 34px var(--font); font-variant-numeric: tabular-nums; color: var(--acc); }
.usi-score span { color: var(--ink-2); font-size: 14px; }
.usi-hist { list-style: none; margin: 0 0 8px; padding: 0; }
.usi-hist li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 44px; padding: 5px 0; border-top: .5px solid rgba(255, 255, 255, .12); }
.usi-hist li:first-child { border-top: 0; }
.usi-hist i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; }
.usi-hist i.ok { background: oklch(0.55 0.15 155); color: #fff; }
.usi-hist i.ko { background: var(--usi-red); color: #fff; }
.usi-hist i.pass { background: rgba(255, 255, 255, .16); color: var(--ink); }
.usi-hist span { display: flex; flex-direction: column; min-width: 0; }
.usi-hist b { font-weight: 650; }
.usi-hist small { font-size: 12.5px; color: var(--glass-ink-2, var(--ink-2)); }
.usi-hist s { text-decoration-color: var(--usi-red); opacity: .8; }
.usi-hist em { font-style: normal; font-size: 12px; color: var(--glass-ink-2, var(--mute)); font-variant-numeric: tabular-nums; }
.usi-none { margin: 0 0 8px; color: var(--glass-ink-2, var(--ink-2)); }
.usi-people { list-style: none; margin: 0; padding: 0; }
.usi-people li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: .5px solid rgba(255, 255, 255, .12); }
.usi-people li:first-child { border-top: 0; }
.usi-people li.off { opacity: .5; }
.usi-people i { font-style: normal; font-size: 20px; width: 28px; text-align: center; }
.usi-people span { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usi-people small { font-weight: 500; color: var(--ink-2); }
.usi-people em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.usi-side.final { padding: 16px 18px; border-radius: 24px; 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); }
#usi-sheet .usi-hist li { border-top-color: color-mix(in oklab, var(--glass-ink) 14%, transparent); }

/* PC : la table au centre, la colonne de verre épais à droite avec les cartes et les joueurs */
@media (min-width: 1100px) {
  #usi-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr auto auto; column-gap: 28px; row-gap: 14px; align-items: start; }
  #usi-main > .usi-bar, #usi-main > .usi-table, #usi-main > .usi-say, #usi-main > .usi-tray { grid-column: 1; }
  #usi-main > .usi-bar { grid-row: 1; } #usi-main > .usi-table { grid-row: 2; } #usi-main > .usi-say { grid-row: 3; } #usi-main > .usi-tray { grid-row: 4; }
  #usi-main > .usi-side { grid-column: 2; grid-row: 1 / 5; display: flex; position: sticky; top: calc(var(--bar-h) + 16px); padding: 16px 18px; border-radius: 26px;
    background: var(--glass-tint-thick); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
    box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 10px 30px rgba(0, 0, 0, .3); }
  #usi-main > .usi-bar button.usi-chip { display: none; }
  .usi-card { width: 380px; min-height: 170px; }
  .usi-card b { font-size: 46px; }
  .usi-tray { margin: 0; border-radius: 30px; padding-bottom: 16px; max-width: 640px; width: 100%; justify-self: center; }
  .usi-easels { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
}
/* sur PC, l'écran s'élargit comme les jeux à deux colonnes (style.css limite les écrans de jeu à 640 px) */
@media (min-width: 1100px) { .screen.play#s-unseulindice { max-width: 1120px; padding-left: 28px; padding-right: 28px; } }

@media (prefers-reduced-motion: reduce) {
  .usi-card.deal, .usi-stamp.pop, .usi-pen { animation: none; }
}

/* le dessin de la carte du salon (si l'icône 3D manque) : une carte et trois ardoises */
.usi-art { position: relative; width: 54px; height: 54px; display: block; }
.usi-art i { position: absolute; left: 13px; top: 2px; width: 28px; height: 34px; border-radius: 6px; display: grid; place-items: center; font: 800 20px/1 var(--font); font-style: normal;
  background: oklch(0.85 0.15 78); color: oklch(0.28 0.07 60); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); transform: rotate(-6deg); }
.usi-art b { position: absolute; bottom: 3px; width: 15px; height: 11px; border-radius: 3px; background: oklch(0.97 0.018 90); box-shadow: inset 0 0 0 1.5px oklch(0.75 0.05 320), 0 2px 3px rgba(0, 0, 0, .25); }
.usi-art b:nth-of-type(1) { left: 2px; transform: rotate(-8deg); } .usi-art b:nth-of-type(2) { left: 20px; } .usi-art b:nth-of-type(3) { left: 38px; transform: rotate(8deg); }