:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #081610;
  color: #f4f8f1;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at 50% 0, #1e513b, transparent 60%), #081610;
}
.game-shell { width: min(100% - 24px, 2400px); margin: 0 auto; padding: 20px 0 34px; }
.heading { text-align: center; }
.home-link { color: #b6d4bd; font-size: .88rem; text-decoration: none; }
.home-link:hover { color: #fff; }
.eyebrow { margin: 18px 0 4px; color: #e6c874; font-size: .7rem; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1; letter-spacing: -.07em; }
h1 span { color: #e6c874; }
.tagline { margin: 9px 0 18px; color: #bfd0c2; }
.game-card { overflow: hidden; border: 1px solid #ffffff20; border-radius: 20px; background: #11241a; box-shadow: 0 22px 70px #0006; }
.table-top { padding: 14px; background: linear-gradient(135deg, #17422e, #102a20); text-align: center; }
.round-info { display: flex; justify-content: space-between; color: #e6d79c; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
#status { min-height: 1.4em; margin: 9px 0 12px; color: #eef6df; font-size: .92rem; }
.opponents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opponent { display: grid; gap: 3px; padding: 8px; border: 1px solid #ffffff20; border-radius: 10px; background: #081b13a8; color: #d7e6d9; font-size: .75rem; }
.opponent.active { border-color: #f0d17e; box-shadow: 0 0 0 1px #f0d17e55; }
.opponent strong { color: #fff; font-size: .82rem; }
.opponent small { color: #adc4b2; }
.opponent-exposed { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.opponent-meld { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 1px; padding: 2px; border-radius: 5px; background: #0c1e14; }
.opponent-exposed .tile.compact { width: 30px; height: 42px; }
.discard-area { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 136px; padding: 10px; background: #0c1e15; }
.discard-pile { display: flex; flex-wrap: wrap; align-content: start; justify-content: center; gap: 3px; padding: 6px; border: 1px solid #ffffff12; border-radius: 10px; background: #10271b; }
.discard-pile .tile.compact { width: 34px; height: 46px; }
.discard-pile .last-discard { outline: 3px solid #f7d35f; outline-offset: 1px; }
.table-actions { min-height: 48px; padding: 5px 12px; background: #14281d; text-align: center; }
#claim-prompt { min-height: 1.2em; margin: 0 0 5px; color: #f0d589; font-size: .85rem; }
.action-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
button { border: 1px solid #ffffff28; border-radius: 9px; padding: 8px 12px; background: #304b38; color: #f6f3e7; font: inherit; font-size: .84rem; font-weight: 750; cursor: pointer; }
button:hover:not(:disabled) { background: #42654b; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, .tile:focus-visible, a:focus-visible { outline: 3px solid #f6dc83; outline-offset: 2px; }
.primary { border-color: #e8ca74; background: #e8ca74; color: #1b2517; }
.primary:hover:not(:disabled) { background: #f7dc93; }
.player-panel { padding: 12px; background: #13271b; }
.player-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.player-heading > div:first-child { display: flex; align-items: baseline; gap: 12px; }
.player-name { color: #f7f1d5; font-size: .9rem; font-weight: 800; }
.player-name span { margin-left: 4px; color: #e8ca74; font-size: .68rem; letter-spacing: .1em; }
.tai-total, .hand-count { color: #b6cbb9; font-size: .78rem; }
.melds, .flowers { display: flex; min-height: 0; flex-wrap: wrap; align-items: end; justify-content: center; gap: 4px; }
.melds:empty, .flowers:empty { display: none; }
.meld { display: flex; gap: 2px; margin: 0 7px 8px 0; padding: 3px; border: 1px solid #ffffff1c; border-radius: 7px; background: #0c1e14; }
.flowers { justify-content: flex-start; margin-bottom: 7px; }
.flowers::before { content: "Fleurs remplacées :"; color: #afc5b2; font-size: .72rem; }
.hand { display: flex; min-height: 54px; flex-wrap: wrap; align-items: end; justify-content: center; gap: 3px; padding: 8px 4px; border-top: 1px solid #ffffff13; }
.draw-separator { width: 8px; height: 1px; flex: 0 0 8px; }
.tile { display: grid; width: 48px; height: 66px; flex: 0 0 auto; place-items: center; border: 1px solid #b5ae93; border-radius: 6px; background: #fff9e8; box-shadow: 0 3px 0 #83927c, 0 4px 3px #0007; color: #192e24; line-height: 1; }
.tile-art { display: block; width: 100%; height: 100%; pointer-events: none; }
button.tile { padding: 0; cursor: pointer; }
button.tile:hover:not(.unavailable) { transform: translateY(-4px); background: #fffdf3; }
button.tile.selected { transform: translateY(-8px); outline: 3px solid #f7d35f; outline-offset: 2px; background: #fff0b5; }
button.tile.unavailable { background: #e4e5dc; border-color: #a9b0a2; cursor: default; }
.tile.bamboo { color: #125333; }
.tile.dots { color: #124d83; }
.tile.characters { color: #98251f; }
.tile.honors { color: #473060; }
.tile.dragon-white { color: #193c60; }
.tile.flower-tile { color: #78305d; }
.tile.dragon-red { color: #98251f; }
.tile.dragon-green { color: #125333; }
.tile.compact { width: 36px; height: 49px; }
.tile-key { margin: 8px 0; color: #d1dfcc; font-size: .72rem; line-height: 1.7; text-align: center; }
.player-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 7px; }
.self-actions { justify-content: flex-start; padding-top: 8px; }
.player-controls p { margin: 0; color: #aebfac; font-size: .76rem; }
.table-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid #ffffff13; }
.result { padding: 12px 16px; border-top: 1px solid #e8ca7440; background: #1a3021; color: #d2e0d2; font-size: .84rem; line-height: 1.5; }
.result h2 { margin: 0 0 8px; color: #f2dc98; font-size: 1rem; }
.result p { margin: 7px 0; }
.result .score-summary { padding-top: 7px; border-top: 1px solid #ffffff1c; color: #f3e2aa; font-weight: 800; }
.rules { padding: 12px 16px 16px; border-top: 1px solid #ffffff1a; color: #c5d1c5; font-size: .85rem; line-height: 1.55; }
.rules h2 { margin: 0 0 8px; color: #f2dc98; font-size: 1rem; }
.rules p { margin: 8px 0; }
.hint { color: #94aa99; font-size: .8rem; line-height: 1.55; text-align: center; }
[hidden] { display: none !important; }
@media (min-width: 1100px) {
  :root { font-size: clamp(16px, 1vw, 26px); }
  .game-shell { width: min(96%, 2400px); }
  .tile { width: clamp(48px, 4.5vw, 104px); height: auto; aspect-ratio: 48 / 66; }
  .tile.compact { width: clamp(36px, 3.2vw, 72px); height: auto; }
  .opponent-exposed .tile.compact { width: clamp(30px, 2.6vw, 60px); height: auto; }
  .discard-pile .tile.compact { width: clamp(34px, 2.8vw, 64px); height: auto; }
  .discard-area { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: clamp(136px, 10vw, 240px); gap: .6rem; padding: .65rem; }
  .table-top, .player-panel { padding: 1rem; }
  .opponents { gap: .6rem; }
  .opponent { padding: .6rem; }
  .hand { gap: clamp(3px, .25vw, 7px); padding: 1rem .25rem; }
  button:not(.tile) { padding: .55rem .8rem; }
}
@media (max-width: 560px) {
  .discard-area { min-height: 108px; }
  .player-heading, .player-controls { align-items: flex-start; flex-direction: column; }
  .player-heading > div:first-child { justify-content: space-between; width: 100%; }
  .hand { gap: 2px; }
  .tile { width: 40px; height: 55px; }
  .discard-pile .tile.compact { width: 30px; height: 42px; }
  .opponent-exposed .tile.compact { width: 28px; height: 39px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.fitted-table, .fitted-table body {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.fitted-table .game-shell {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(calc(100vw - 24px), 2400px);
  margin: 0;
  padding: 6px 0;
  transform: translate(-50%, -50%) scale(var(--table-scale, 1));
  transform-origin: center;
}
.fitted-table .hint { display: none; }
.fitted-table .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px 10px;
}
.fitted-table h1 { font-size: 2rem; }
.fitted-table .eyebrow { margin: 0; font-size: .65rem; }
.fitted-table .tagline { display: none; }
.fitted-table .table-top, .fitted-table .player-panel { padding: .6rem; }
.fitted-table .discard-area { min-height: 70px; }
.fitted-table .table-actions { min-height: 0; padding: 3px 12px; }
.fitted-table #claim-prompt:empty { display: none; }
.fitted-table .hand { padding: 12px 4px 8px; }
@media (max-width: 560px) {
  .fitted-table .eyebrow { display: none; }
}