.playing-card { color: var(--ink); position: relative; display: block; overflow: hidden; padding: 4px; }
.playing-card.red { color: #d83929; }
.trump .playing-card { margin-left: 0; }
.training-button { width: 100%; margin-top: 10px; background: #fff; }
.danger { color: #b42318; border-color: #b42318; }
.game-choice { grid-template-columns: repeat(3, 1fr); }
.tournament-option { margin-bottom: 14px; }
.tournament-option select { width: 100%; padding: 12px; border: 2px solid var(--ink); background: var(--paper); font-weight: 700; }
.tournament-standing { max-width: 480px; margin: 30px auto; }
.tournament-standing h3 { text-align: left; }
.trouf-info { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.trouf-info span { padding: 6px 9px; border: 1px solid #ffffff66; background: #092d2388; }
.trouf-info b { font-size: 18px; margin-left: 5px; }
.trouf-info b.red { color: #ff7060; }
.domino-board { display: flex; align-items: center; max-width: 65vw; overflow-x: auto; padding: 15px; }
.domino-tile { flex: 0 0 auto; width: 48px; height: 92px; display: grid; grid-template-rows: 1fr 1fr; background: #fffdf3; color: #111; border: 2px solid #111; border-radius: 5px; box-shadow: 3px 4px #0005; cursor: pointer; overflow: hidden; }
.domino-half { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); align-items: center; justify-items: center; padding: 4px; }
.domino-half:first-child { border-bottom: 2px solid #111; }
.domino-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.domino-dot-1 { grid-area: 1 / 1; }
.domino-dot-3 { grid-area: 1 / 3; }
.domino-dot-4 { grid-area: 2 / 1; }
.domino-dot-5 { grid-area: 2 / 2; }
.domino-dot-6 { grid-area: 2 / 3; }
.domino-dot-7 { grid-area: 3 / 1; }
.domino-dot-9 { grid-area: 3 / 3; }
.domino-board .domino-tile { cursor: default; }
.domino-board .domino-tile.horizontal { width: 80px; height: 42px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.domino-board .domino-tile.horizontal .domino-half:first-child { border-bottom: 0; border-right: 2px solid #111; }
.domino-board .domino-tile.vertical { width: 42px; height: 80px; }
.domino-board .domino-tile + .domino-tile { margin-left: 3px; }
.hand .domino-tile { margin-right: 8px; transition: .15s; }
.hand .domino-tile:hover,.hand .domino-tile.selected { transform: translateY(-10px); }
.hand .domino-tile.selected { background: var(--acid); }
.domino-actions { display: flex; gap: 10px; }
.domino-actions .primary { margin: 0; width: auto; }
.help-button { width: 100%; margin: -8px 0 12px; padding: 9px; box-shadow: none; background: transparent; }
.help-dialog { width: min(620px, calc(100% - 30px)); max-height: 85vh; overflow: auto; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); padding: 30px; box-shadow: 10px 10px var(--ink); }
.help-dialog::backdrop { background: #111b; }
.help-dialog h2 { margin-bottom: 25px; }
.help-close { position: absolute; right: 14px; top: 12px; padding: 4px 10px; box-shadow: none; font-size: 22px; }
.help-content { line-height: 1.55; }
.help-content h3 { margin: 22px 0 7px; font-size: 12px; }
.help-content ul,.help-content ol { padding-left: 22px; }
.help-content li { margin: 7px 0; }
.chat { margin: 14px 0; border: 2px solid var(--ink); background: #fff; }
.chat summary { padding: 10px 14px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.chat-messages { height: 180px; overflow-y: auto; padding: 10px 14px; border-top: 1px solid var(--line); background: #f8f5e9; }
.chat-message { margin: 5px 0; line-height: 1.35; font-size: 13px; }
.chat-message.mine { text-align: right; }
.chat-message b { margin-right: 5px; }
.chat-message time { color: #888; font-size: 10px; margin-left: 5px; }
.chat-form { display: flex; padding: 9px; }
.chat-form input { flex: 1; padding: 10px; text-transform: none; }
.chat-form button { box-shadow: none; background: var(--acid); }
.chat-reactions { display: flex; gap: 5px; padding: 8px 10px 0; }
.chat-reactions button { padding: 4px 9px; box-shadow: none; }
.chat .error { margin: 0 10px 5px; min-height: 0; }
.card-corner { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; font: 10px/9px 'Archivo Black', sans-serif; }
.card-corner i { font: 12px/12px serif; }
.card-corner.top { top: 4px; left: 5px; }
.card-corner.bottom { right: 5px; bottom: 4px; transform: rotate(180deg); }
.card-face { position: absolute; inset: 18px 14px; display: grid; align-items: center; justify-items: center; }
.card-face i { font-style: normal; font-family: serif; }
.pips { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; font-size: 15px; line-height: 1; }
.pips-1, .pips-2 { grid-template-columns: 1fr; font-size: 25px; }
.pips-10 { grid-template-columns: repeat(2, 1fr); font-size: 13px; }
.figure { display: flex; flex-direction: column; justify-content: center; font-size: 27px; line-height: 1; }
.figure i { font-size: 25px; }
@media(max-width:760px){.card-corner{font-size:9px}.card-corner i{font-size:10px}.card-face{inset:16px 12px}.pips{font-size:12px}.pips-10{font-size:11px}.figure{font-size:23px}}

/* Emplacements sponsors */
.sponsor-banner { width: min(970px, calc(100% - 40px)); margin: 22px auto 0; }
.sponsor-placeholder { min-height: 90px; border: 1px dashed #8f8977; background: linear-gradient(135deg, #fff 0%, #f5f1e5 55%, #eef8b9 100%); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; position: relative; overflow: hidden; }
.sponsor-placeholder::before { content: ''; position: absolute; width: 150px; height: 150px; right: -65px; top: -80px; border-radius: 50%; background: var(--acid); opacity: .55; }
.sponsor-placeholder span { font-size: 9px; font-weight: 800; letter-spacing: .2em; color: #777164; }
.sponsor-placeholder strong { font: 18px 'Archivo Black', sans-serif; letter-spacing: -.02em; }
.sponsor-placeholder small { color: #777164; font-size: 10px; }
.sponsor-section { border-top: 1px solid var(--line); padding: 32px 5vw 38px; background: #eae5d6; }
.sponsor-heading { margin: 0 0 18px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #706b5e; }
.sponsor-grid { max-width: 970px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sponsor-card { min-height: 100px; border-style: solid; }
.sponsor-placeholder.has-ad { display: block; min-height: 0; border-style: solid; background: #fff; }
.sponsor-placeholder.has-ad::before { display: none; }
.sponsor-ad { display: flex; width: 100%; height: 90px; align-items: center; justify-content: center; background: #fff; }
.sponsor-ad img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sponsor-card .sponsor-ad { height: 100px; }

.game-choice { grid-template-columns: repeat(4, 1fr); }
.mraha-playing .felt {
  background:
    linear-gradient(180deg, #f58567 0%, #516fb0 22%, #22a7a1 38%, #d7b778 39%, #c99c5a 100%);
  border-color: #8a6330;
  box-shadow: inset 0 18px 45px #fff3, inset 0 -18px 35px #6b421c88;
}
.mraha-playing .felt::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, #163d2b55 0 2px, transparent 28px),
    radial-gradient(circle at 82% 24%, #163d2b55 0 2px, transparent 32px),
    linear-gradient(90deg, transparent 0 7%, #17422c55 8% 9%, transparent 11% 100%);
  filter: blur(1px);
  pointer-events: none;
}
.mraha-board {
  position: relative;
  z-index: 1;
  width: min(78vw, 430px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  padding: 14px;
  border: 3px solid #7d5528;
  background:
    radial-gradient(circle at 20% 30%, #f8df9d 0 2px, transparent 3px),
    radial-gradient(circle at 70% 65%, #a7773f 0 1px, transparent 3px),
    linear-gradient(135deg, #e7bd74, #c8904f);
  box-shadow: 8px 10px 0 #4e321899, inset 0 0 30px #6e451f66;
}
.mraha-cell {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 1px solid #80582c88;
  border-radius: 8px;
  background: #f1ce86aa;
  box-shadow: inset 0 2px 8px #6b421b44;
}
.mraha-cell.blocked { background: #8c673d88; box-shadow: inset 0 0 18px #3c2816aa; }
.mraha-cell.target { outline: 3px solid var(--acid); outline-offset: -4px; }
.mraha-piece {
  position: absolute;
  inset: 13%;
  border-radius: 46% 54% 49% 51%;
  transform: rotate(-12deg);
  box-shadow: inset -7px -8px 10px #0004, inset 5px 4px 8px #fff7, 3px 5px 7px #2b1b1099;
}
.mraha-piece.player-one { background: radial-gradient(circle at 34% 28%, #fff7d4, #d8c09a 48%, #9e8768); }
.mraha-piece.player-two {
  border-radius: 55% 45% 60% 40%;
  background: radial-gradient(circle at 35% 25%, #7c675a, #322820 55%, #17120f);
}
.mraha-piece.player-two::after {
  content: '';
  position: absolute;
  inset: 18% 12%;
  border-top: 2px solid #c7a98a66;
  border-radius: 50%;
}
.mraha-piece.king::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: -18%;
  height: 34%;
  border-radius: 50%;
  background: inherit;
  box-shadow: inherit;
}
.mraha-piece.selected { outline: 3px solid var(--red); outline-offset: 3px; }
.mraha-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 10px 0 0;
}
.mraha-panel>div {
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--ink);
  font-weight: 800;
}
.mraha-panel b { font: 26px 'Archivo Black', sans-serif; color: var(--red); }
.mraha-panel span { font-size: 10px; letter-spacing: .1em; }
.mraha-panel ol {
  margin: 0;
  max-height: 74px;
  overflow: auto;
  background: #fff;
  border: 2px solid var(--ink);
  padding: 8px 8px 8px 28px;
  font-size: 12px;
}
.mraha-tip { margin: 0; width: 100%; text-align: center; font-size: 12px; font-weight: 800; color: #6e6b60; }

@media(max-width:760px) {
  .topbar { display: grid; grid-template-columns: 1fr; gap: 12px; padding-bottom: 12px; }
  .room-meta { display: flex; align-items: center; min-width: 0; }
  .room-meta .muted { flex: 0 0 auto; }
  .room-meta strong { min-width: 0; margin: 0 8px; font-size: 20px; overflow: hidden; text-overflow: ellipsis; }
  .room-meta #copy { margin-left: auto; flex: 0 0 auto; }
  .topbar-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .topbar-actions .tiny { width: 100%; min-height: 38px; padding: 8px 4px; white-space: nowrap; font-size: 9px; }
  .topbar-actions .badge { grid-column: 1 / -1; padding: 5px 10px; text-align: center; font-size: 10px; }
  .sponsor-banner { width: calc(100% - 28px); margin-top: 14px; }
  .sponsor-banner .sponsor-placeholder { min-height: 62px; }
  .sponsor-banner .sponsor-ad { height: 62px; }
  .sponsor-banner .sponsor-placeholder strong { font-size: 15px; }
  .sponsor-banner .sponsor-placeholder small { font-size: 0; }
  .sponsor-banner .sponsor-placeholder small::after { content: 'Bannière sponsor · 320 × 50'; font-size: 9px; }
  .sponsor-section { padding: 25px 18px 30px; }
  .sponsor-grid { grid-template-columns: 1fr; }
  .sponsor-card { min-height: 82px; }
  .game-choice { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:760px) {
  body.mobile-playing { overflow: hidden; }
  body.mobile-playing header,
  body.mobile-playing footer,
  body.mobile-playing .sponsor-banner,
  body.mobile-playing .sponsor-section,
  body.mobile-playing .chat { display: none; }
  body.mobile-playing main { width: 100%; max-width: none; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; }
  body.mobile-playing .game { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
  body.mobile-playing .topbar { gap: 6px; padding: 8px; border-bottom: 2px solid var(--ink); background: var(--paper); }
  body.mobile-playing .room-meta strong { font-size: 18px; }
  body.mobile-playing .topbar-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.mobile-playing .topbar-actions .badge { grid-column: auto; display: grid; place-items: center; padding: 4px; font-size: 9px; }
  body.mobile-playing .table {
    min-height: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    overflow: hidden;
  }
  body.mobile-playing .table aside {
    min-height: 42px;
    padding: 4px 6px;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: #fff;
    overflow: hidden;
  }
  body.mobile-playing #players { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82px, 1fr); gap: 5px; overflow: hidden; }
  body.mobile-playing .player {
    min-width: 0;
    margin: 0;
    padding: 5px 6px;
    border-left-width: 3px;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.mobile-playing .player small { font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
  body.mobile-playing .felt {
    min-height: 0;
    height: 100%;
    border-width: 3px 0;
    box-shadow: inset 0 0 26px #092d2399;
    overflow: hidden;
  }
  body.mobile-playing .status {
    top: 8px;
    left: 8px;
    right: 8px;
    text-align: center;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.mobile-playing .pile {
    width: 100%;
    height: 100%;
    padding: 34px 6px 8px;
    align-items: center;
    overflow: hidden;
  }
  body.mobile-playing .pile .playing-card { width: 52px; height: 76px; font-size: 15px; box-shadow: 2px 2px #0005; }
  body.mobile-playing .pile .playing-card:not(:first-child) { margin-left: -25px; }
  body.mobile-playing .current-trick,
  body.mobile-playing .pile { flex-wrap: wrap; }
  body.mobile-playing .trump { margin-right: 12px; gap: 5px; }
  body.mobile-playing .trouf-info { left: 8px; right: 8px; bottom: 7px; font-size: 9px; }
  body.mobile-playing .trouf-info span { padding: 4px 6px; }
  body.mobile-playing .trouf-info b { font-size: 14px; }
  body.mobile-playing .hand-zone {
    padding: 6px 7px 8px;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    overflow: hidden;
  }
  body.mobile-playing .hand-title { margin: 0 0 4px; font-size: 11px; }
  body.mobile-playing #selectionHint { max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.mobile-playing .hand {
    min-height: 80px;
    padding: 0 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  body.mobile-playing .hand .playing-card {
    width: 52px;
    height: 76px;
    flex-basis: 52px;
    margin-right: -15px;
    font-size: 15px;
    box-shadow: 2px 2px #0005;
  }
  body.mobile-playing .hand .playing-card:hover,
  body.mobile-playing .hand .playing-card.selected { transform: translateY(-6px); }
  body.mobile-playing .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 6px;
  }
  body.mobile-playing .actions button {
    min-width: 0;
    min-height: 38px;
    padding: 7px 4px;
    font-size: 9px;
    letter-spacing: .02em;
    box-shadow: none;
  }
  body.mobile-playing .actions .primary { width: 100%; }
  body.mobile-playing #gameError { min-height: 14px; margin: 3px 0 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.mraha-playing .mraha-board { width: min(94vw, 52dvh); padding: 8px; gap: 5px; box-shadow: 4px 5px 0 #4e321899; }
  body.mraha-playing .mraha-cell { border-radius: 6px; }
  body.mraha-playing .mraha-panel {
    padding: 5px 7px;
    grid-template-columns: 105px 1fr;
    gap: 6px;
    border-top: 2px solid var(--ink);
    background: var(--paper);
  }
  body.mraha-playing .mraha-panel b { font-size: 18px; }
  body.mraha-playing .mraha-panel ol { max-height: 46px; font-size: 10px; padding: 5px 5px 5px 22px; }
  body.mraha-playing .hand-zone { display: none; }
}

@media(max-width:760px) {
  body.domino-playing { overflow: hidden; }
  body.domino-playing header,
  body.domino-playing footer,
  body.domino-playing .sponsor-banner,
  body.domino-playing .sponsor-section,
  body.domino-playing .chat { display: none; }
  body.domino-playing main { width: 100%; max-width: none; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; }
  body.domino-playing .game { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
  body.domino-playing .topbar { gap: 6px; padding: 8px; border-bottom: 2px solid var(--ink); background: var(--paper); }
  body.domino-playing .room-meta strong { font-size: 18px; }
  body.domino-playing .topbar-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.domino-playing .topbar-actions .badge { grid-column: auto; display: grid; place-items: center; padding: 4px; font-size: 9px; }
  body.domino-playing .table {
    min-height: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    overflow: hidden;
  }
  body.domino-playing .table aside {
    min-height: 42px;
    padding: 4px 6px;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: #fff;
    overflow: hidden;
  }
  body.domino-playing #players { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82px, 1fr); gap: 5px; overflow: hidden; }
  body.domino-playing .player {
    min-width: 0;
    margin: 0;
    padding: 5px 6px;
    border-left-width: 3px;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.domino-playing .player small { font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
  body.domino-playing .felt {
    min-height: 0;
    height: 100%;
    border-width: 3px 0;
    box-shadow: inset 0 0 26px #092d2399;
    overflow: hidden;
    align-content: stretch;
  }
  body.domino-playing .status {
    top: 8px;
    left: 8px;
    right: 8px;
    text-align: center;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.domino-playing .pile {
    width: 100%;
    height: 100%;
    padding: 34px 6px 8px;
    align-items: center;
  }
  body.domino-playing .domino-board {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    gap: 3px;
    overflow: hidden;
  }
  body.domino-playing .domino-board.around-table {
    position: relative;
    display: block;
    height: 100%;
    min-height: 230px;
  }
  body.domino-playing .domino-board.around-table::before {
    content: '';
    position: absolute;
    inset: 18% 8%;
    border: 1px solid #ffffff30;
    border-radius: 18px;
  }
  body.domino-playing .domino-board.around-table .domino-tile {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    transform: translate(-50%, -50%) rotate(var(--r));
    transform-origin: center;
  }
  body.domino-playing .domino-board .domino-tile { box-shadow: 2px 2px #0005; border-radius: 4px; }
  body.domino-playing .domino-board .domino-tile.horizontal { width: 48px; height: 26px; }
  body.domino-playing .domino-board .domino-tile.vertical { width: 26px; height: 48px; }
  body.domino-playing .domino-board .domino-tile + .domino-tile { margin-left: 0; }
  body.domino-playing .domino-half { padding: 2px; }
  body.domino-playing .domino-dot { width: 4px; height: 4px; }
  body.domino-playing .hand-zone {
    padding: 6px 7px 8px;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    overflow: hidden;
  }
  body.domino-playing .hand-title { margin: 0 0 4px; font-size: 11px; }
  body.domino-playing #selectionHint { max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.domino-playing .hand {
    min-height: 62px;
    padding: 0;
    overflow: hidden;
    justify-content: center;
    gap: 5px;
  }
  body.domino-playing .hand .domino-tile {
    width: 34px;
    height: 60px;
    margin-right: 0;
    box-shadow: 2px 2px #0005;
  }
  body.domino-playing .hand .domino-tile:hover,
  body.domino-playing .hand .domino-tile.selected { transform: translateY(-5px); }
  body.domino-playing .actions {
    display: grid;
    grid-template-columns: .8fr 1fr 1fr 1fr;
    gap: 5px;
    margin-top: 6px;
  }
  body.domino-playing .actions button {
    min-width: 0;
    min-height: 38px;
    padding: 7px 4px;
    font-size: 9px;
    letter-spacing: .02em;
    box-shadow: none;
  }
  body.domino-playing .domino-actions { display: contents; }
  body.domino-playing #gameError { min-height: 14px; margin: 3px 0 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}