/* Petits ajouts sociaux, entraînement et personnalisation locale. */
.tutorial-link { border: 0; background: transparent; color: var(--gold, #ffe08a); font: 700 12px inherit; cursor: pointer; padding: 8px 0; }
.tutorial-link:focus-visible { outline: 2px solid var(--gold, #ffe08a); outline-offset: 4px; border-radius: 6px; }
.tutorial-dialog { max-width: 520px; }
.tutorial-step { position: relative; min-height: 260px; display: grid; align-content: center; gap: 16px; text-align: center; padding: 28px 14px; }
.tutorial-step-number { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; background: #ffe08a; color: #174238; font-size: 24px; font-weight: 900; }
.tutorial-step h3 { margin: 0; color: #fff7db; font-size: 28px; }
.tutorial-step p { margin: 0; color: #d6e1d7; line-height: 1.65; }
.tutorial-step strong { color: #ffe08a; line-height: 1.5; }
.tutorial-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.tutorial-actions #tutorialNext { justify-self: stretch; }
.tutorial-actions #tutorialProgress { color: #e9d39a; font-size: 12px; white-space: nowrap; }

.reaction-picker { position: relative; z-index: 30; display: flex; justify-content: center; gap: 7px; width: fit-content; margin: -8px auto 10px; padding: 7px; border: 1px solid #ffe08a70; border-radius: 999px; background: #102f29ee; box-shadow: 0 10px 30px #001d1880; }
.reaction-picker[hidden] { display: none; }
.reaction-picker button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #ffffff10; font-size: 22px; cursor: pointer; }
.reaction-picker button:hover, .reaction-picker button:focus-visible { background: #ffe08a2c; transform: translateY(-2px); }
.reaction-layer { position: absolute; inset: 0; z-index: 22; pointer-events: none; }
.reaction-bubble { position: absolute; transform: translate(-50%,-50%); display: grid; place-items: center; min-width: 58px; min-height: 52px; padding: 6px 9px; border: 2px solid #fff8d8; border-radius: 50%; background: #fffdf2; box-shadow: 0 8px 20px #002b2370; color: #173a32; animation: reaction-pop .35s ease-out both; }
.reaction-bubble b { font-size: 25px; line-height: 1; }
.reaction-bubble small { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.reaction-bubble[data-position="bottom"] { left: 50%; bottom: 18%; }
.reaction-bubble[data-position="top"] { left: 50%; top: 19%; }
.reaction-bubble[data-position="left"] { left: 23%; top: 50%; }
.reaction-bubble[data-position="right"] { right: 10%; top: 50%; }
@keyframes reaction-pop { from { opacity: 0; transform: translate(-50%,-30%) scale(.55); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

.image-imports { margin: 18px 0; padding: 14px; border: 1px solid #ffffff24; border-radius: 16px; }
.image-imports legend { padding: 0 7px; color: #ffe08a; font-weight: 800; }
.image-import-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.image-import-grid label { display: grid; align-content: center; gap: 7px; min-height: 78px; padding: 10px; border: 1px dashed #ffe08a75; border-radius: 12px; color: #ecf4ed; text-align: center; cursor: pointer; }
.image-import-grid input { width: 100%; font-size: 9px; }
body.has-custom-table .table-felt { background-image: linear-gradient(#0b372480,#0b372480), var(--custom-table-image) !important; background-size: cover !important; background-position: center !important; }
body.has-custom-back .mini-card, body.has-custom-back .flying-card, body.has-custom-back .preview-back { background-image: var(--custom-card-back-image) !important; background-size: cover !important; background-position: center !important; }
body.has-custom-avatar .seat.is-you .avatar, body.has-custom-avatar #profileAvatar, body.has-custom-avatar #previewAvatar { background-image: var(--custom-avatar-image) !important; background-size: cover !important; background-position: center !important; color: transparent !important; }
.hand-slot.training-choice { transform: translateY(-12px); filter: drop-shadow(0 0 8px #ffe66a); }
.training-note { color: #ffe08a !important; font-weight: 700; }

.celebration-layer { position: fixed; inset: 0; z-index: 120; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -24px; width: 10px; height: 18px; border-radius: 3px; animation: confetti-fall 2.5s ease-in forwards; }
@keyframes confetti-fall { to { transform: translate3d(var(--drift),105vh,0) rotate(760deg); opacity: .1; } }

@media (max-width:680px) {
  .image-import-grid { grid-template-columns: 1fr; }
  .image-import-grid label { min-height: 58px; }
  .tutorial-step { min-height: 220px; padding: 18px 6px; }
  .tutorial-step h3 { font-size: 23px; }
  .reaction-picker button { width: 37px; height: 37px; }
  .reaction-bubble[data-position="left"] { left: 27%; }
  .reaction-bubble[data-position="right"] { right: 12%; }
}
@media (prefers-reduced-motion: reduce) { .reaction-bubble, .confetti-piece { animation: none; } }
.ai-report-dialog textarea { width: 100%; resize: vertical; min-height: 86px; margin: 8px 0 14px; padding: 12px; border-radius: 12px; }
.ai-report-dialog form { display: grid; }