* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #ece8ff;
  background: radial-gradient(circle at 20% 0%, var(--t2, #2a1c52) 0%, var(--t1, #120d26) 55%, var(--t0, #0a0716) 100%) fixed;
  overflow: auto;
  user-select: none;
}
[hidden] { display: none !important; }
.btn {
  background: linear-gradient(180deg, var(--ta, #6a4cff), var(--tb, #4b33c9));
  color: #fff; border: 0; border-radius: 10px; padding: 9px 16px;
  font: 600 14px 'Segoe UI', sans-serif; cursor: pointer;
  box-shadow: 0 3px 0 var(--td, #2c1d85), 0 6px 14px #0005;
  transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--td, #2c1d85); }
.btn.ghost { background: #ffffff14; box-shadow: none; }
.btn:disabled { opacity: .4; cursor: default; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

#menu { text-align: center; padding: 40px 20px; }
#menu h1 { font-size: 64px; letter-spacing: 2px; background: linear-gradient(90deg,#9d6bff,#3ee6b0,#ffc75f); -webkit-background-clip: text; color: transparent; }
#menu h1 span { color: #ff7a8a; -webkit-text-fill-color: #ff7a8a; }
.brand-logo { display: block; width: min(380px, 85vw); height: 190px; object-fit: contain; margin: -20px auto -28px; }
.auth-logo { width: min(300px, 100%); height: 150px; margin: -18px auto -30px; }
.sub { opacity: .7; margin: 6px 0 22px; }
.foot { opacity: .4; margin-top: 30px; font-size: 13px; }
.category-nav { position: sticky; top: 0; z-index: 4; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; max-width: 1200px; margin: 0 auto 28px; padding: 14px; border: 1px solid #ffffff1a; border-radius: 18px; background: #100b22ed; box-shadow: 0 10px 28px #0005; backdrop-filter: blur(12px); }
.category-nav-label { margin-right: 4px; color: #ece8ff; font-size: 15px; font-weight: 800; }
.category-button { padding: 10px 17px; border: 1px solid #ffffff2a; border-radius: 999px; background: #ffffff0d; color: #ece8ff; font: 700 14px 'Segoe UI', sans-serif; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.category-button:hover { transform: translateY(-2px); background: #ffffff1b; border-color: color-mix(in srgb, var(--tl, #9d6bff) 60%, transparent); }
.category-button.is-active { color: #160f2c; border-color: #c4fff3; background: linear-gradient(110deg, #c4fff3, var(--tl, #9d6bff)); box-shadow: 0 3px 14px color-mix(in srgb, var(--tl, #9d6bff) 30%, transparent); }
#cards { display: grid; gap: 30px; max-width: 1200px; margin: 0 auto; text-align: left; }
.game-category { display: grid; gap: 14px; }
.game-category-title { display: flex; align-items: center; gap: 12px; color: #ece8ff; font-size: 20px; }
.game-category-title::after { content: none; }
.game-category-cards { display: flex; gap: 22px; justify-content: flex-start; flex-wrap: wrap; }
.category-empty { max-width: 620px; padding: 22px; border: 1px dashed #ffffff35; border-radius: 18px; background: #ffffff08; color: #ece8ff; font-size: 15px; line-height: 1.6; }
.gcard {
  width: 240px; padding: 22px 18px; border-radius: 18px;
  background: linear-gradient(160deg, #ffffff12, #ffffff05);
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--c) 18%, transparent);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  transition: transform .15s;
}
.gcard:hover { transform: translateY(-5px); }
.gcard .icon { font-size: 52px; }
.gcard h3 { color: var(--c); font-size: 22px; }
.gcard p { font-size: 13px; opacity: .75; line-height: 1.4; flex: 1; }
.xp-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 9999; padding: 10px 18px; border-radius: 999px; background: #2a1f55f2; border: 1px solid #ffd36b; color: #ffe29a; font-weight: 800; box-shadow: 0 8px 24px #0008; animation: xpToast 3.2s ease forwards; pointer-events: none; }
.xp-toast.is-loss { border-color: #ff6b81; color: #ff9aa8; }
@keyframes xpToast { 0% { opacity: 0; transform: translate(-50%, 12px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.gcard .lvl-badge { position: absolute; top: 10px; right: 10px; padding: 2px 9px; border-radius: 999px; background: #0006; border: 1px solid var(--c); color: var(--c); font-size: 12px; font-weight: 800; }
.gcard .fav-btn { position: absolute; top: 8px; left: 10px; z-index: 1; width: 34px; height: 34px; padding: 0; border: 1px solid #ffffff26; border-radius: 50%; background: #0006; color: #ffffffaa; font-size: 19px; line-height: 1; cursor: pointer; transition: transform .15s, color .15s, border-color .15s, box-shadow .15s; }
.gcard .fav-btn:hover { transform: scale(1.12); color: #ffd36b; border-color: #ffd36b88; }
.gcard .fav-btn.is-on { color: #ffd36b; border-color: #ffd36b; box-shadow: 0 0 14px #ffc75f77; text-shadow: 0 0 8px #ffc75f; }
.gcard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.gcard-actions .btn { min-width: 0; padding: 9px 5px; font-size: 12px; }
.gcard-actions .gcard-guide { background: #ffffff12; border: 1px solid #ffffff20; color: #ece8ff; box-shadow: none; }
.gcard-actions .gcard-guide:hover { background: #ffffff22; border-color: var(--c); }

#game header { display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: #0006; }
#game h2 { font-size: 20px; }
#gameHelp { font-size: 12px; opacity: .6; margin-left: auto; text-align: right; max-width: 60%; }
.game-players { padding: 5px 10px; border: 1px solid #3ee6b055; border-radius: 999px; background: #3ee6b010; color: #c4fff3; font-size: 13px; font-weight: 700; white-space: nowrap; }
#stage { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 18px; min-width: 0; overflow: hidden; }

.overlay { position: fixed; inset: 0; background: #0009; display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay .box { background: #1d1540; border: 1px solid #9d6bff80; border-radius: 16px; padding: 26px 34px; text-align: center; display: flex; flex-direction: column; gap: 14px; min-width: 300px; }
.overlay h3 { font-size: 26px; }
.guide-box { width: 620px; max-width: calc(100vw - 28px); max-height: 90vh; min-width: 0 !important; overflow-y: auto; text-align: left !important; gap: 12px !important; }
.guide-box > h3, .guide-game-name { text-align: center; }
.guide-game-name { margin-top: -10px; color: var(--guide-color, #c4fff3); font-weight: 700; opacity: .8; }
.guide-objective { padding: 12px 14px; border: 1px solid #9d6bff55; border-radius: 14px; background: #9d6bff12; }
.guide-objective h4, .guide-section h4 { margin-bottom: 6px; font-size: 16px; }
.guide-objective p, .guide-list { font-size: 13px; line-height: 1.5; opacity: .85; }
.guide-demo { display: grid; gap: 10px; padding: 13px 15px; border: 1px solid #3ee6b055; border-radius: 14px; background: #3ee6b010; }
.guide-demo-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.guide-demo-heading h4 { font-size: 15px; }
.guide-demo-description { font-size: 13px; line-height: 1.5; }
.guide-replay { white-space: nowrap; }
.guide-stage { min-height: 116px; display: flex; justify-content: center; align-items: center; gap: 18px; padding: 8px; overflow: hidden; }
.guide-stage-caption { max-width: 220px; font-size: 12px; line-height: 1.45; opacity: .8; }
.guide-demo-status { font-size: 12px; color: #c4fff3; }
.guide-demo-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #ffffff19; }
.guide-demo-progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3ee6b0, #9d6bff); transition: width .1s linear; }
.demo-tetris-board { display: grid; grid-template-columns: repeat(8, 20px); grid-template-rows: repeat(7, 16px); gap: 2px; padding: 5px; background: #080618; border: 1px solid #ffffff30; border-radius: 7px; }
.demo-cell, .demo-tetris-piece i { border-radius: 3px; background: linear-gradient(145deg, #72f4f0, #20a9c7); box-shadow: inset 0 2px #ffffff77; }
.demo-tetris-piece { z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.is-playing .demo-tetris-piece { animation: demo-tetris-full 24s ease-in-out forwards; }
.demo-phase-4 .demo-cell { animation: demo-line-clear .8s ease-in-out infinite alternate; }
.demo-tetris-piece i { width: 20px; height: 16px; border-radius: 3px; background: linear-gradient(145deg, #fff08a, #ffae36); box-shadow: inset 0 2px #ffffff99, 0 0 8px #ffc75f88; }
.demo-snake-board { display: grid; grid-template-columns: repeat(5, 23px); grid-template-rows: repeat(5, 23px); gap: 2px; padding: 5px; background: #080e1a; border-radius: 8px; }
.demo-snake-cell { border-radius: 5px; background: #ffffff0a; }
.demo-snake-cell.snake-part-0 { background: #9aff87; box-shadow: 0 0 10px #9aff87aa; }
.demo-snake-cell.snake-part-1, .demo-snake-cell.snake-part-2 { background: #37c98f; }
.demo-snake-cell.snake-part-3 { background: #277c74; }
.demo-snake-cell.demo-grow-segment { background: #277c74; box-shadow: 0 0 10px #3ee6b0; }
.is-playing .demo-snake-cell.snake-part-0 { animation: demo-snake-full 24s steps(1, end) forwards; }
.is-playing .demo-snake-cell.snake-part-1 { animation: demo-snake-full 24s steps(1, end) forwards; animation-delay: .18s; }
.is-playing .demo-snake-cell.snake-part-2 { animation: demo-snake-full 24s steps(1, end) forwards; animation-delay: .36s; }
.is-playing .demo-snake-cell.snake-part-3 { animation: demo-snake-full 24s steps(1, end) forwards; animation-delay: .54s; }
.demo-snake-cell.demo-fruit { border-radius: 50%; background: #ff6b81; box-shadow: 0 0 12px #ff6b81; }
.is-playing .demo-fruit { animation: demo-fruit-full 24s ease-in-out forwards; }
.demo-nb-board { position: relative; width: 150px; height: 104px; border-radius: 10px; background: linear-gradient(135deg, #1d1240, #0d0820); box-shadow: inset 0 0 0 1px #ff4d8a33; }
.demo-nb-item { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid currentColor; font-style: normal; font-size: 13px; box-shadow: 0 0 10px currentColor; opacity: 0; transform: scale(.4); transition: opacity .35s, transform .35s; }
.demo-nb-item.gem { color: #4de8e0; }
.demo-nb-item.star { color: #ffd166; }
.demo-nb-item.coin { color: #ffb347; }
.demo-nb-item.bomb { color: #ff3b5c; background: #14040a; }
.demo-nb-item.demo-visible { opacity: 1; transform: scale(1); }
.demo-nb-item.bomb.demo-visible { animation: demo-nb-pulse .6s ease-in-out infinite alternate; }
.demo-nb-item.demo-caught { opacity: 0; transform: scale(1.8); }
@keyframes demo-nb-pulse { to { transform: scale(1.12); } }
.demo-mg-board { position: relative; display: grid; grid-template-columns: repeat(6, 24px); gap: 3px; padding: 26px 6px 6px; border-radius: 10px; background: linear-gradient(135deg, #2a1c52, #120d26); box-shadow: inset 0 0 0 1px #ffd16633; }
.demo-mg-cell { height: 34px; border-radius: 4px; display: grid; place-items: end center; padding-bottom: 2px; font-style: normal; font-size: 11px; background: linear-gradient(180deg, var(--gc) 0 22%, #221a46 22%); transition: box-shadow .3s; }
.demo-mg-cell.owned { box-shadow: inset 0 0 0 2px #ffd166, 0 0 10px #ffd16688; }
.demo-mg-pawn { position: absolute; top: 2px; left: 8%; transform: translateX(-50%); font-size: 18px; transition: left .9s cubic-bezier(.4, 1.4, .5, 1); }
.demo-mg-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.demo-mg-cash { color: #ffd166; font-size: 14px; }
.demo-qz { position: relative; width: 170px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: radial-gradient(circle at 50% 0%, #4dd6ff33, #1d1540 75%); border: 1px solid #4dd6ff66; }
.demo-qz-q { font-size: 12px; font-weight: 700; text-align: center; }
.demo-qz-bar { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #3ee6b0, #4dd6ff); transform-origin: left; }
.is-playing .demo-qz-bar { animation: demo-qz-time 4s linear infinite; }
@keyframes demo-qz-time { from { transform: scaleX(1); } to { transform: scaleX(.1); } }
.demo-qz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.demo-qz-a { padding: 4px; border-radius: 6px; font-style: normal; font-size: 11px; text-align: center; background: #2a2056; border: 1px solid #ffffff22; transition: all .3s; }
.demo-qz-a.demo-picked { background: #1f8f6e; border-color: #3ee6b0; box-shadow: 0 0 10px #3ee6b0; }
.demo-qz-a.demo-dim { opacity: .35; }
.demo-qz-pts { position: absolute; right: 6px; top: -10px; color: #3ee6b0; font-size: 14px; text-shadow: 0 2px 4px #000; opacity: 0; transform: translateY(8px); transition: all .4s; }
.demo-qz-pts.demo-visible { opacity: 1; transform: none; }
.demo-mines-board { display: grid; grid-template-columns: repeat(5, 25px); gap: 3px; padding: 5px; border-radius: 8px; background: #090719; }
.demo-mine-cell { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 4px; background: linear-gradient(145deg, #7458d6, #422e92); font-size: 13px; font-style: normal; font-weight: 800; box-shadow: inset 0 1px #ffffff66; }
.demo-mine-cell.n1 { color: #5ec8ff; }.demo-mine-cell.mine { background: #40233d; }.demo-mine-cell.flagged { background: #39284e; }
.demo-mine-cell.demo-revealed { background: #1a1236; animation: demo-reveal .5s ease-out both; }
.is-playing .demo-mine-cell.flagged { animation: demo-flag-mark 1.2s ease-in-out infinite alternate; }
.demo-space-map { position: relative; width: 230px; height: 115px; border: 1px solid #ffffff22; border-radius: 14px; background: radial-gradient(ellipse, #39245c, #080719 75%); overflow: hidden; }
.demo-star { position: absolute; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 22px; box-shadow: 0 0 16px currentColor; }
.demo-star.home { left: 18%; top: 38%; color: #54e6bd; }.demo-star.target { left: 52%; top: 26%; color: #ffd166; }.demo-star.rival { right: 10%; bottom: 17%; color: #ff6b81; }
.demo-space-units { position: absolute; top: 26px; font-size: 9px; font-weight: 800; }
.demo-star.demo-conquered { color: #54e6bd; background: #54e6bd30; }
.demo-ship-trail { position: absolute; left: 32%; top: 47%; width: 39%; height: 3px; transform: rotate(-12deg); transform-origin: left center; background: linear-gradient(90deg, #54e6bd, #ffe27a, transparent); }
.is-playing .demo-ship-trail { animation: demo-trail-full 24s ease-in-out forwards; }
.demo-ship-trail::after { content: '✦'; position: absolute; right: 10%; top: -10px; color: #fff2a1; }
.is-playing .demo-ship-trail::after { animation: demo-ship-fly 3s ease-in-out infinite alternate; }
.guide-stage.is-complete .demo-ship-trail::after,
.guide-stage.is-complete .demo-mine-cell.flagged,
.guide-stage.is-complete .demo-die { animation-play-state: paused; }
.demo-horses-board { display: grid; grid-template-columns: repeat(4, 25px); gap: 4px; padding: 9px; border-radius: 12px; background: #17133a; transform: rotate(-8deg); }
.demo-track-cell { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #ffffff24; border-radius: 6px; background: #ffffff0c; color: #75efd0; font-style: normal; }
.demo-track-cell.demo-track-home { background: #6748bc; color: #fff; }
.demo-die { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #fff, #b9b1d5); color: #30245d; font-size: 37px; box-shadow: 0 5px 16px #0006; }
.is-playing .demo-die { animation: demo-die-roll 2.5s ease-in-out infinite; }
.demo-solitaire-scene { position: relative; display: flex; align-items: flex-start; gap: 15px; width: 190px; height: 105px; padding: 7px; background: #153936; border-radius: 10px; }
.demo-playing-card { width: 43px; height: 60px; display: grid; place-items: center; border: 1px solid #ffffffaa; border-radius: 6px; background: #f3efff; color: #27203d; font: 800 15px 'Segoe UI', sans-serif; box-shadow: 0 3px 8px #0005; }
.demo-playing-card.red { color: #d34265; }.demo-playing-card.black { color: #252036; }
.demo-card-stack { position: relative; width: 48px; height: 78px; }
.demo-card-stack .demo-playing-card { position: absolute; left: 0; }.demo-card-stack .demo-playing-card + .demo-playing-card { top: 17px; }
.demo-card-arrow { position: absolute; left: 131px; top: 22px; color: #ffe29a; font-size: 24px; }
.demo-moving-card { position: absolute; left: 117px; top: 7px; z-index: 2; }
.is-playing .demo-moving-card { animation: demo-card-full 24s ease-in-out forwards; transition: left .5s, top .5s; }
@keyframes demo-tetris-full { 0%, 12% { transform: translate(0, 0); } 22% { transform: translate(-22px, 0); } 34% { transform: translate(-22px, 0) rotate(90deg); } 50% { transform: translate(-22px, 12px) rotate(90deg); } 72% { transform: translate(0, 28px) rotate(90deg); } 80%, 100% { transform: translate(0, 48px) rotate(90deg); } }
@keyframes demo-line-clear { to { opacity: .2; filter: brightness(2); } }
@keyframes demo-snake-full { 0%, 16% { transform: translate(0, 0); } 30% { transform: translate(23px, 0); } 45% { transform: translate(46px, 0); } 60% { transform: translate(46px, 23px); } 76% { transform: translate(69px, 23px); } 88%, 100% { transform: translate(69px, 46px); } }
@keyframes demo-fruit-full { 0%, 60% { transform: scale(1); opacity: 1; } 70% { transform: scale(.2); opacity: .2; } 80%, 100% { transform: scale(1); opacity: 1; } }
@keyframes demo-reveal { from { transform: scale(.7); opacity: .25; } to { transform: scale(1); opacity: 1; } }
@keyframes demo-trail-full { 0%, 38% { opacity: .15; width: 0; } 52%, 100% { opacity: 1; width: 39%; } }
@keyframes demo-card-full { 0%, 15% { transform: translate(0, 0); } 28% { transform: translate(-76px, 17px); } 42% { transform: translate(-76px, 17px); } 55% { transform: translate(-110px, 17px); } 74% { transform: translate(-110px, 0); } 88%, 100% { transform: translate(-110px, 0); } }
@keyframes demo-flag-mark { from { box-shadow: inset 0 1px #ffffff66; } to { box-shadow: inset 0 1px #ffffff66, 0 0 12px #ff7a8a; } }
@keyframes demo-ship-fly { from { transform: translateX(-8px); opacity: .5; } to { transform: translateX(13px); opacity: 1; } }
@keyframes demo-die-roll { 0%, 15% { transform: rotate(0) scale(1); } 55% { transform: rotate(300deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .is-playing .demo-tetris-piece, .is-playing .demo-fruit, .is-playing .demo-snake-cell, .is-playing .demo-mine-cell.flagged, .is-playing .demo-ship-trail, .is-playing .demo-ship-trail::after, .is-playing .demo-die, .is-playing .demo-moving-card { animation-duration: 24s; }
}
.guide-section { padding-top: 10px; border-top: 1px solid #ffffff17; }
.guide-list { margin: 0; padding-left: 22px; }
.guide-list li + li { margin-top: 4px; }
.guide-controls { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; }
.guide-controls li { padding: 5px 9px; border-radius: 9px; background: #ffffff10; font-size: 12px; }
.guide-actions { margin-top: 4px; }
.guide-actions .btn { min-width: 150px; }
.touch-controls { display: none; touch-action: manipulation; user-select: none; }
.touch-controls .btn { min-height: 48px; touch-action: manipulation; }
.tetris-touch-area { display: none; width: 100%; }
.tetris-touch-player { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.tetris-touch-label { font-size: 13px; }
.tetris-touch-controls { grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 8px; width: min(280px, 100%); }
.touch-controls .tt-btn { display: grid; place-items: center; padding: 0; border: 1px solid #ffffff2e; border-radius: 16px; color: #e8e2ff; background: linear-gradient(165deg, #ffffff22, #ffffff08 60%), #1b1440; box-shadow: inset 0 1px 0 #ffffff33, 0 6px 14px #0006; transition: transform .08s, filter .15s; -webkit-tap-highlight-color: transparent; }
.tt-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tt-btn.tt-play svg, .tt-pause svg { stroke-width: 2.2; }
.touch-controls .tt-btn:active { transform: translateY(2px) scale(.95); filter: brightness(1.25); box-shadow: inset 0 1px 0 #ffffff22, 0 2px 6px #0006; }
.touch-controls .tt-rot { color: #4de8e0; border-color: #4de8e055; }
.touch-controls .tt-hard { color: #fff; border-color: #c77dff88; background: linear-gradient(160deg, #b36bff, #6a3fe0); box-shadow: inset 0 1px 0 #ffffff55, 0 6px 16px #7b4dff55; }
.touch-controls .tt-down { color: #ffd166; border-color: #ffd16655; }
.touch-controls .tt-pause { color: #ffffffb0; }
.snake-touch-controls { grid-template-columns: repeat(3, 58px); grid-template-areas: ". up ." "left pause right" ". down ."; gap: 7px; }
.touch-up { grid-area: up; }.touch-down { grid-area: down; }.touch-left { grid-area: left; }.touch-right { grid-area: right; }
.snake-touch-controls .touch-pause { grid-area: pause; }
.tetris-touch-controls { display: grid; margin: 0 auto; }
.tetris-touch-area { display: grid; gap: 10px; flex-basis: 100%; }
.tetris-wrap { flex-wrap: wrap; justify-content: center; }
/* Duel en ligne : les deux plateaux restent côte à côte */
@media (min-width: 701px) and (pointer: fine) {
  .tetris-wrap.is-versus { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-items: start; }
  .tetris-wrap.is-versus .tetris-touch-area { grid-column: 1 / -1; }
}
@media (max-width: 700px), (pointer: coarse) {
  .touch-controls { display: grid; }
  .tetris-touch-area { display: grid; gap: 10px; }
  .tetris-wrap { flex-direction: column; align-items: center; gap: 12px; width: min(410px, calc(100vw - 36px)); }
  .tetris-wrap canvas { max-width: 100%; height: auto; }
  .tetris-wrap.is-versus { flex-direction: row; align-items: flex-start; flex-wrap: wrap; width: calc(100vw - 36px); gap: 8px; }
  .tetris-wrap.is-versus > canvas { width: calc((100vw - 52px) / 2); max-width: none; height: auto; flex: 0 1 calc((100vw - 52px) / 2); }
  .tetris-wrap.is-versus .tetris-touch-area { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tetris-wrap.is-versus .tetris-touch-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .tetris-wrap.is-versus .tetris-touch-controls .btn { min-width: 0; padding: 8px 0; }
  .snake-wrap { width: min(630px, calc(100vw - 36px)); }
  .snake-wrap canvas { max-width: 100%; height: auto; }
}

/* Tetris */
.tetris-wrap { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.tetris-wrap canvas { border-radius: 14px; box-shadow: 0 0 40px #9d6bff30; }

/* Snake */
.snake-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.snake-wrap canvas { width: 630px; height: 630px; border-radius: 14px; box-shadow: 0 0 50px #3ee6b02e, 0 0 0 1px #ffffff14; }
.scorebar { display: flex; gap: 30px; font-size: 17px; font-weight: 600; flex-wrap: wrap; justify-content: center; }
.snake-player, .sol-player { color: #c4fff3; font-weight: 800; }
.scorebar b { color: #3ee6b0; font-size: 22px; }
.scorebar .dim { opacity: .55; }

/* Néon Bombe : la zone de jeu occupe tout l'espace disponible */
.nb-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nb-wrap canvas { display: block; border-radius: 14px; box-shadow: 0 0 50px #ff4d8a2e, 0 0 0 1px #ffffff14; touch-action: none; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.nb-wrap .scorebar { align-items: center; }
.nb-pause { min-width: 40px; }

/* Mines */
.mines-wrap { display: flex; flex-direction: column; align-items: safe center; gap: 12px; max-width: 100%; overflow-x: auto; }
.mgrid { flex: none; }
.mbar { display: flex; gap: 18px; align-items: center; font-size: 18px; font-weight: 600; flex-wrap: wrap; justify-content: center; }
.mines-player { padding: 5px 9px; border-radius: 9px; opacity: .75; }
.mines-player.is-active { background: #ffffff14; opacity: 1; }
.mgrid { display: grid; gap: 2px; padding: 8px; background: #0006; border-radius: 12px; }
.mc {
  width: var(--cs); height: var(--cs); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: calc(var(--cs) * .55); border-radius: 6px; cursor: pointer;
  background: linear-gradient(145deg, #7a5cff, #4a35b8); box-shadow: inset 0 2px 0 #fff4;
}
.mc:hover { filter: brightness(1.2); }
.mc.open { background: #1a1236; box-shadow: none; cursor: default; filter: none; }
.mc.p0 { background: #14264a; }
.mc.p1 { background: #3b1830; }
.mc.boom { background: #d62f4a; }
.n1 { color: #5ec8ff; } .n2 { color: #5ee07a; } .n3 { color: #ff6b6b; } .n4 { color: #b388ff; }
.n5 { color: #ffb347; } .n6 { color: #3ee6d0; } .n7 { color: #fff; } .n8 { color: #aaa; }

/* Nuée Stellaire */
.swarm-wrap { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: center; width: 960px; }
.swarm-wrap canvas { width: 960px; height: 600px; border-radius: 14px; box-shadow: 0 0 50px #ff9f5a26, 0 0 0 1px #ffffff14; touch-action: none; cursor: crosshair; }
.swarm-hud { display: flex; gap: 8px; align-items: center; align-self: stretch; min-height: 34px; }
@media (max-width: 700px) {
  .swarm-wrap { width: calc(100vw - 36px); }
  .swarm-wrap canvas { width: 100%; height: auto; }
  .swarm-hud { flex-wrap: wrap; justify-content: center; }
  .sw-legend, .sw-clock { margin-left: 0; }
}
.swarm-hud .sep { flex: 1; }
.sw-title { font-weight: 700; font-size: 16px; }
.sw-legend { display: flex; gap: 12px; margin-left: 14px; font-size: 13px; }
.sw-chip { display: inline-flex; align-items: center; gap: 6px; opacity: .75; }
.sw-clock { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; font-variant-numeric: tabular-nums; }
.sw-clock .t { font: 800 15px 'Segoe UI', sans-serif; padding: 3px 12px; border-radius: 14px; color: #c4fff3; background: linear-gradient(135deg, #2fd9ae33, #0b4f5c66); border: 1px solid #3ee6b077; box-shadow: 0 0 12px #3ee6b033; }
.sw-clock .r { font: 700 13px 'Segoe UI', sans-serif; padding: 3px 10px; border-radius: 14px; color: #ffe29a; background: #ffb52e1f; border: 1px solid #ffc75f55; }
.sw-res { margin-top: 12px; padding: 14px 18px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff1a; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.sw-res .big { font: 800 40px 'Segoe UI', sans-serif; color: #c4fff3; text-shadow: 0 0 18px #3ee6b0aa; font-variant-numeric: tabular-nums; }
.sw-res .rec { font-size: 15px; color: #ffe29a; }
.sw-res .newrec { font: 800 17px 'Segoe UI', sans-serif; color: #1b1200; padding: 4px 16px; border-radius: 16px; background: linear-gradient(135deg, #ffe29a, #ffb52e); box-shadow: 0 0 20px #ffc75f99; animation: lvpulse 1.2s infinite; }
.sw-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sw-cell .bt { font-size: 12px; color: #ffe29a; opacity: .85; font-variant-numeric: tabular-nums; }
.sw-chip.me { opacity: 1; font-weight: 800; padding: 2px 10px 2px 6px; border-radius: 12px; background: #ffffff1a; }
.sw-chip i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.rules { font-size: 14px; line-height: 1.6; opacity: .85; }
.sw-levels .rules { display: inline-block; align-self: center; padding: 6px 16px; border-radius: 20px; background: #ffffff0f; border: 1px solid #ffffff14; font-size: 13px; opacity: 1; color: #d9d2ff; }
.sw-levels .rules b { color: #3ee6b0; }
.sw-levels h3 { background: linear-gradient(90deg, #c4fff3, #ffc75f, #ff9bb0); -webkit-background-clip: text; color: transparent; letter-spacing: 1px; }
.sw-row { border: 1px solid #ffffff10; background: linear-gradient(90deg, #ffffff10, #ffffff04); }
.sw-gal b { text-shadow: 0 0 12px currentColor; }

/* Interface générale */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff9, transparent), radial-gradient(1px 1px at 68% 14%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 84% 62%, #fff9, transparent), radial-gradient(1px 1px at 30% 78%, #fff7, transparent),
    radial-gradient(1px 1px at 52% 46%, #fff6, transparent), radial-gradient(1.5px 1.5px at 92% 90%, #fff8, transparent),
    radial-gradient(1px 1px at 6% 64%, #fff7, transparent), radial-gradient(1px 1px at 44% 8%, #fff7, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { to { opacity: .25; } }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: #ffffff25; border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; }
#menu h1 { font-size: 72px; font-weight: 800; letter-spacing: 3px; filter: drop-shadow(0 0 24px #9d6bff66); }
.sub { font-size: 17px; letter-spacing: 4px; text-transform: uppercase; opacity: .55; }
.gcard {
  position: relative; overflow: hidden; width: 290px; padding: 30px 24px 26px; border-radius: 22px;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%), linear-gradient(160deg, #ffffff14, #ffffff04);
  backdrop-filter: blur(6px);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.gcard::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .8; }
.gcard:hover { transform: translateY(-8px) scale(1.02); border-color: var(--c); box-shadow: 0 14px 44px color-mix(in srgb, var(--c) 35%, transparent); }
.gcard .icon { font-size: 68px; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--c) 60%, transparent)); transition: transform .25s; }
.gcard:hover .icon { transform: scale(1.15) rotate(-6deg); }
.gcard .btn { width: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 65%, #000)); color: #120d26; box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 40%, #000), 0 8px 18px #0006; font-weight: 800; letter-spacing: .5px; }
.gcard h3 { font-size: 24px; }
.gcard p { font-size: 15px; }
.gcard-actions .btn { min-width: 0; padding: 9px 5px; font-size: 12px; }
.gcard-actions .gcard-guide { background: #ffffff12; border: 1px solid #ffffff20; color: #ece8ff; box-shadow: none; }
.gcard-actions .gcard-guide:hover { background: #ffffff22; border-color: var(--c); }
@media (max-width: 640px) {
  .category-nav { position: static; justify-content: center; flex-wrap: wrap; overflow: visible; margin: 0 0 24px; border-radius: 14px; }
  .category-nav-label { display: none; }
  .category-button { flex: 1 1 auto; white-space: nowrap; text-align: center; }
  .game-category-cards { justify-content: center; }
  .gcard { width: min(100%, 340px); }
}
@media (max-width: 700px) {
  #menu { padding: 72px 14px 28px; }
  #menu h1 { font-size: clamp(42px, 12vw, 64px); letter-spacing: 1px; }
  .sub { margin-bottom: 18px; font-size: 13px; letter-spacing: 2px; }
  .category-nav { gap: 7px; padding: 10px; }
  .category-nav-label { display: none; }
  .category-button { padding: 9px 12px; font-size: 12px; }
  #game header { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  #game h2 { font-size: 17px; }
  .game-players { order: 4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  #gameHelp { order: 5; flex-basis: 100%; max-width: none; margin: 0; text-align: left; }
  #stage { padding: 8px; }
}
#game header { background: linear-gradient(180deg, #ffffff12, #ffffff05); backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff14; box-shadow: 0 8px 30px #0005; }
#game h2 { font-weight: 800; white-space: nowrap; }
#gameHelp { font-size: 12px; opacity: .7; }
.btn { border-radius: 12px; }
.btn.ghost { background: #ffffff12; border: 1px solid #ffffff1c; }
.btn.ghost:hover { background: #ffffff22; }
.swarm-hud { padding: 6px 12px; border-radius: 14px; background: linear-gradient(180deg, #ffffff12, #ffffff06); border: 1px solid #ffffff12; backdrop-filter: blur(8px); }
.swarm-wrap canvas { border-radius: 16px; }
.overlay { backdrop-filter: blur(6px); background: #05030ccc; }
.overlay .box { border-radius: 22px; padding: 30px 40px; background: radial-gradient(circle at 50% 0%, var(--t3, #3a2a78), var(--t4, #1d1540) 70%); border: 1px solid color-mix(in srgb, var(--tl, #9d6bff) 50%, transparent); box-shadow: 0 20px 70px #000a, 0 0 50px color-mix(in srgb, var(--tl, #9d6bff) 19%, transparent); }
.sw-levels {
  position: absolute; inset: 0; z-index: 5; border-radius: 14px; padding: 18px 30px;
  background: radial-gradient(circle at 30% 0%, #2a1c52ee, #0a0716f5); border: 1px solid #ffffff18;
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.sw-levels h3 { font-size: 30px; text-align: center; }
.sw-levels .rules { text-align: center; margin-bottom: 4px; }
.sw-row { display: flex; align-items: center; gap: 24px; padding: 10px 18px; border-radius: 14px; background: #ffffff0a; }
.sw-gal { width: 150px; display: flex; flex-direction: column; }
.sw-gal b { font-size: 20px; }
.sw-gal small { opacity: .75; }
.sw-cells { display: flex; gap: 14px; }
.lv {
  width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--c); color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), color-mix(in srgb, var(--c) 35%, #120d26) 70%);
  font: 800 20px 'Segoe UI', sans-serif; text-shadow: 0 1px 3px #000a;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); transition: transform .12s;
}
.lv:hover:not(:disabled) { transform: scale(1.12); }
.lv.lock { background: #1d1738; border-color: #ffffff22; box-shadow: none; opacity: .5; cursor: default; font-size: 16px; }
.lv.next { animation: lvpulse 1.4s infinite; }
@keyframes lvpulse { 50% { box-shadow: 0 0 26px var(--c); transform: scale(1.08); } }

/* Solitaire */
.sol { --cw: 92px; --gap: 14px; display: flex; flex-direction: column; gap: var(--gap); }
.sol .bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sol-board { display: grid; grid-template-columns: repeat(7, var(--cw)); gap: var(--gap); grid-auto-rows: auto; }
.pile { position: relative; height: calc(var(--cw) * 1.326); }
.tab { height: calc(var(--cw) * 5.65); }
.slot { position: absolute; inset: 0 auto auto 0; width: var(--cw); height: calc(var(--cw) * 1.326); border: 2px dashed #ffffff30; border-radius: calc(var(--cw) * .11); }
.card {
  position: absolute; left: 0; width: var(--cw); height: calc(var(--cw) * 1.326); border-radius: calc(var(--cw) * .11); cursor: pointer;
  background: #f6f2ff; color: #222; box-shadow: 0 2px 6px #0007;
  font-weight: 800;
}
.card.down {
  background: repeating-linear-gradient(45deg, #4b33c9 0 8px, #3a27a3 8px 16px);
  border: max(2px, calc(var(--cw) * .043)) solid #e8e0ff;
}
.card .r { position: absolute; top: calc(var(--cw) * .043); left: calc(var(--cw) * .087); font-size: calc(var(--cw) * .22); }
.card .su { position: absolute; bottom: calc(var(--cw) * .02); right: calc(var(--cw) * .087); font-size: calc(var(--cw) * .43); line-height: 1; }
.card.s0 { color: #3b3fc4; } .card.s1 { color: #d6336c; } .card.s2 { color: #e08a00; } .card.s3 { color: #0f9d78; }
.card.sel { outline: 3px solid #ffc75f; transform: translateY(-4px); }
.empty-stock { cursor: pointer; }

/* Petits Chevaux */
.horses-wrap { position: relative; display: flex; gap: 22px; align-items: flex-start; justify-content: center; min-width: 900px; }
.horses-wrap.is-setup { min-width: 0; width: min(420px, calc(100vw - 32px)); }
.horses-wrap canvas { width: 594px; height: 594px; border-radius: 26px; box-shadow: 0 0 60px #5ec8ff22, 0 0 0 1px #ffffff14; }
.horses-wrap .overlay { border-radius: 26px; }
.hp-panel { width: 290px; flex: 0 0 290px; height: 594px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; padding: 16px; border-radius: 26px; background: linear-gradient(170deg, #ffffff12, #ffffff04); border: 1px solid #ffffff18; box-shadow: 0 0 40px #0006 inset; }
.hp-turn { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; color: var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, transparent), #ffffff05); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 28%, transparent); transition: all .4s; }
.hp-turn:has(.hp-clock.on) { padding-bottom: 22px; }
.hp-clock { display: none; position: absolute; left: 14px; right: 14px; bottom: 6px; align-items: center; gap: 8px; font: 800 11px 'Segoe UI', sans-serif; color: #fff; }
.hp-clock.on { display: flex; }
.hp-clock i { display: block; height: 4px; border-radius: 4px; background: var(--c); transition: width .25s linear; }
.hp-clock span { margin-left: auto; min-width: 28px; text-align: right; }
.hp-clock.low i { background: #ff5a6e; }
.hp-clock.low span { color: #ff8a98; animation: clockPulse .8s ease-in-out infinite; }
@keyframes clockPulse { 50% { opacity: .45; } }
.ht-pawn { font-size: 40px; line-height: 1; text-shadow: 0 0 14px var(--c); animation: bob 1.6s ease-in-out infinite; }
.ht-txt { display: flex; flex-direction: column; line-height: 1.15; }
.ht-txt small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; color: #fff; }
.ht-txt b { font: 800 22px 'Segoe UI', sans-serif; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-6deg); } }
.dice-stage { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; perspective: 520px; border-radius: 20px; background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--c, #888) 30%, transparent), transparent 70%), #0a0720aa; border: 1px solid #ffffff12; overflow: hidden; }
.dice-floor { position: absolute; bottom: 22px; width: 90px; height: 16px; border-radius: 50%; background: #000a; filter: blur(5px); transition: transform .3s, opacity .3s; }
.dice-stage.air .dice-floor { transform: scale(.55); opacity: .4; }
.dice3d { position: relative; width: 82px; height: 82px; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(28deg); margin-top: -10px; }
.dice-stage.air .dice3d { margin-top: -28px; }
.dice3d { transition: margin .3s; }
.dface { position: absolute; inset: 0; padding: 11px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 3px; border-radius: 16px; background: linear-gradient(145deg, #fff, #cfc8ee); box-shadow: inset 0 0 14px #8a80c066; backface-visibility: hidden; }
.dface span { border-radius: 50%; }
.dface span.on { background: radial-gradient(circle at 35% 30%, #5a4a9a, #1d1540); box-shadow: inset 0 -2px 3px #0006; }
.dice-stage.land .dice3d { animation: dbounce .5s ease-out; }
@keyframes dbounce { 0% { margin-top: -30px; } 40% { margin-top: -10px; } 60% { margin-top: -20px; } 100% { margin-top: -10px; } }
.dice-stage.land .dice-floor { animation: dripple .6s ease-out; }
@keyframes dripple { 0% { transform: scale(.5); opacity: .2; } 40% { transform: scale(1.35); opacity: .9; } 100% { transform: scale(1); opacity: 1; } }
.dice-stage.six { box-shadow: 0 0 0 0 #ffe29a; animation: sixring .9s ease-out; }
@keyframes sixring { 0% { box-shadow: 0 0 0 0 #ffe29acc, 0 0 40px #ffe29a inset; } 100% { box-shadow: 0 0 0 26px #ffe29a00, 0 0 0 #ffe29a inset; } }
.hp-roll { width: 100%; }
.hp-tools { display: flex; gap: 8px; justify-content: center; margin-top: auto; }
.hp-tool { flex: 1; height: 40px; border-radius: 12px; border: 1px solid #ffffff1c; background: #ffffff0d; color: #fff; font-size: 18px; cursor: pointer; transition: background .2s, transform .15s; }
.hp-tool:hover { background: #ffffff22; transform: translateY(-2px); }
.hp-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--c); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 35%, transparent), #0b0820); border: 2px solid var(--c); text-shadow: 0 0 8px var(--c); }
.hp-nm { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-nm b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-pips { display: flex; gap: 5px; }
.hp-pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 55%, transparent); }
.hp-pips i.out { background: color-mix(in srgb, var(--c) 45%, transparent); }
.hp-pips i.home { background: var(--c); box-shadow: 0 0 8px var(--c); }
.hp-board { position: relative; flex: none; width: 594px; height: 594px; }
.hp-stats { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px 26px; border-radius: 26px; background: radial-gradient(circle at 50% 0%, #2a1f5acc, #0b0820f2 70%); backdrop-filter: blur(8px); animation: sfade .25s ease-out; }
@keyframes sfade { from { opacity: 0; transform: scale(.97); } }
.shead { display: flex; align-items: center; justify-content: space-between; }
.stitle { font: 800 22px 'Segoe UI', sans-serif; }
.sclose { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ffffff30; background: #ffffff14; color: #fff; font-size: 18px; cursor: pointer; transition: all .2s; }
.sclose:hover { background: #ff5a7a; border-color: #ff5a7a; transform: rotate(90deg); }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.srow { padding: 12px 14px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, transparent), #ffffff05); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.sh { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--c); margin-bottom: 8px; }
.sh span { font-size: 22px; text-shadow: 0 0 8px var(--c); }
.sbars { display: flex; gap: 6px; height: 84px; }
.sb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
.sbt { flex: 1; width: 100%; display: flex; align-items: flex-end; background: #ffffff0a; border-radius: 6px; overflow: hidden; }
.sb i { width: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 100%, #fff 30%), var(--c)); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .4s; }
.sb b { font-weight: 700; } .sb u { text-decoration: none; opacity: .65; font-weight: 700; }
.chips { display: flex; gap: 5px; margin-top: 8px; }
.chip { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 10px; background: #00000033; line-height: 1.15; }
.chip em { font-style: normal; font-size: 12px; } .chip b { font-size: 15px; } .chip small { font-size: 9px; opacity: .6; }
.sdone { align-self: center; padding: 10px 28px; }
.hp-msg { flex: none; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 12px 6px 6px; border-radius: 16px; color: #fff; background: linear-gradient(100deg, color-mix(in srgb, var(--c, #8b6dff) 30%, #0b0820), #0b0820ee 80%); border: 1.5px solid color-mix(in srgb, var(--c, #8b6dff) 70%, #fff 10%); opacity: 0; pointer-events: none; transition: opacity .25s; }
.hp-msg .mi { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c, #8b6dff) 55%, #fff 20%), color-mix(in srgb, var(--c, #8b6dff) 35%, #0b0820)); border: 2px solid #ffffff55; }
.hp-msg .mt { font: 700 14px 'Segoe UI', sans-serif; line-height: 1.25; }
.hp-msg.show { animation: msgin .35s ease-out forwards; }
@keyframes msgin { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }.hp-list { display: flex; flex-direction: column; gap: 7px; }
.hp-pl { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: #ffffff09; border: 1px solid #ffffff10; font-weight: 600; opacity: .65; transition: all .3s; }
.hp-pl.on { opacity: 1; transform: translateX(4px); background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 30%, transparent); }
.hp-sc { margin-left: auto; font-size: 12px; opacity: .8; }
.hp-odds { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--c); background: #ffffff12; border-radius: 8px; padding: 2px 7px; }
.hp-odds + .hp-sc { margin-left: 8px; }
.hs-pawn { color: var(--c); font-size: 24px; text-shadow: 0 0 10px var(--c); line-height: 1; }
.hs-name { font-weight: 700; }
.hs-player-name { color: #c4fff3; font-size: 13px; font-weight: 700; }
.hs-card { width: 420px; max-width: 100%; margin: 20px auto; padding: 28px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; text-align: center; background: radial-gradient(circle at 50% 0%, #5ec8ff22, transparent 70%), linear-gradient(160deg, #ffffff14, #ffffff05); border: 1px solid #5ec8ff55; }
.hs-card h3 { font-size: 30px; }
.hs-rows { display: flex; flex-direction: column; gap: 8px; }
.hs-bots { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.hs-bots-l { flex: 1 1 100%; font-size: 13px; opacity: .75; }
.hs-bots .btn { min-width: 44px; }
.hp-time { display: flex; align-items: center; padding: 0 10px; font-size: 13px; opacity: .7; white-space: nowrap; }
.hs-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 14px; background: #ffffff0d; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.hs-row .btn { margin-left: auto; min-width: 150px; }
.hs-pseudo { width: min(220px, 34vw); min-width: 90px; padding: 8px 10px; }
/* Téléphone (portrait) : plateau en haut, panneau compact dessous, messages en petite bulle sur le plateau */
@media (max-width: 700px) {
  #game.is-horses #gameHelp { display: none; }
  .horses-wrap:not(.is-setup) { flex-direction: column; align-items: center; min-width: 0; width: 594px; gap: 10px; }
  .hp-panel { width: 594px; flex: none; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-radius: 22px; }
  .hp-turn { grid-column: 1 / -1; padding: 6px 12px; gap: 10px; }
  .hp-turn:has(.hp-clock.on) { padding-bottom: 20px; }
  .dice-stage { grid-column: 1; height: 130px; }
  .hp-roll { grid-column: 2; height: 100%; font-size: 20px; }
  .hp-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .hp-pl { flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 8px; }
  .hp-pl.on { transform: none; }
  .hp-av { display: none; }
  .hp-nm b { font-size: 13px; }
  .hp-odds, .hp-sc, .hp-odds + .hp-sc { margin-left: 0; }
  .hp-odds { font-size: 15px; }
  .hp-tools { grid-column: 1 / -1; margin-top: 0; }
  .hp-tool { height: 34px; font-size: 15px; }
  .hp-msg { grid-column: 1 / -1; min-height: 40px; padding: 4px 10px 4px 4px; }
  .hp-msg .mi { width: 30px; height: 30px; font-size: 16px; }
  .hp-msg .mt { font-size: 14px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  body .online-chat { bottom: 54px; right: 8px; }
  body .online-chat .chat-toggle { padding: 7px 14px; }
  body .chat-feed { bottom: 54px; max-width: calc(100vw - 130px); }
  .chat-panel { max-height: 45vh; }
}
.hs-row .hs-pseudo { flex: 1; }
@media (max-width: 700px) {
  .hs-card { width: 100%; margin: 0; padding: 16px; }
  .hs-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(88px, auto); gap: 7px; padding: 8px; }
  .hs-row .btn { grid-column: 3; grid-row: 1 / span 2; min-width: 88px; padding: 7px 5px; font-size: 11px; }
  .hs-row .hs-pseudo { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; padding: 7px; }
  .hs-row .hs-player-name { grid-column: 2; grid-row: 2; }
}

/* Comptes */
#auth { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 30px 16px; }
.auth-card {
  width: 380px; max-width: 100%; padding: 30px 28px 22px; border-radius: 24px; text-align: center;
  display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(circle at 50% 0%, #3a2a7866, transparent 70%), linear-gradient(160deg, #ffffff14, #ffffff05);
  border: 1px solid #9d6bff55; box-shadow: 0 24px 70px #000a, 0 0 60px #9d6bff22; backdrop-filter: blur(8px);
}
.auth-card h1 { font-size: 44px; font-weight: 800; background: linear-gradient(90deg,#9d6bff,#3ee6b0,#ffc75f); -webkit-background-clip: text; color: transparent; }
.auth-card h1 span { color: #ff7a8a; -webkit-text-fill-color: #ff7a8a; }
.auth-card .sub { margin: 0 0 6px; font-size: 14px; }
.inp {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffffff22; background: #0a071655; color: #fff;
  font: 500 15px 'Segoe UI', sans-serif; outline: none; user-select: text;
}
.inp:focus { border-color: var(--tl, #9d6bff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl, #9d6bff) 20%, transparent); }
.auth-err { min-height: 18px; color: #ff8fa0; font-size: 13px; }
.auth-rem { font-size: 13px; opacity: .75; cursor: pointer; text-align: left; }
.btn.big { padding: 12px 16px; font-size: 16px; }
.auth-link { background: none; border: 0; color: #b9a8ff; cursor: pointer; font: 600 13px 'Segoe UI', sans-serif; padding: 4px; }
.auth-link:hover { text-decoration: underline; }
.auth-link.danger { color: #ff8fa0; margin-top: 6px; }
.auth-note { font-size: 11px; opacity: .4; }
.auth-users { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.auth-user { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 20px; border: 1px solid #ffffff1c; background: #ffffff0d; color: #fff; cursor: pointer; font: 600 13px 'Segoe UI', sans-serif; }
.auth-user:hover { background: #ffffff1c; }
.auth-colors { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; opacity: .9; }
.dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent); }
.dot.on { border-color: #fff; transform: scale(1.15); }
.av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 15px 'Segoe UI', sans-serif; color: #120d26; background: radial-gradient(circle at 35% 30%, #fff8, var(--c) 60%); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
.av.big { width: 64px; height: 64px; font-size: 30px; margin: 0 auto; }
#menu { position: relative; }
.acct { position: absolute; top: 18px; right: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 26px; border: 1px solid #ffffff22; background: #ffffff10; color: #fff; cursor: pointer; font: 700 14px 'Segoe UI', sans-serif; backdrop-filter: blur(8px); }
.acct:hover { background: #ffffff20; }
.profile { width: 560px; max-width: calc(100vw - 32px); max-height: 90vh; min-width: 340px; overflow-y: auto; }
.profile .dim { font-size: 12px; opacity: .55; }
.profile > .profile-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; padding: 5px; border: 1px solid #ffffff14; border-radius: 14px; background: #0002; }
.profile > .profile-tabs .btn { padding: 8px 5px; font-size: 12px; white-space: nowrap; }
.profile-panel { display: grid; align-content: start; gap: 10px; text-align: left; }
.profile-panel > h4 { font-size: 17px; }
.profile-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-summary-item { padding: 6px 11px; border-radius: 999px; background: #ffffff0d; color: #c4fff3; font-size: 12px; }
.stats { display: flex; flex-direction: column; gap: 6px; }
.stat { display: flex; justify-content: space-between; gap: 18px; padding: 8px 14px; border-radius: 12px; background: #ffffff0d; font-size: 14px; }
.stat b { color: #ffe29a; font-variant-numeric: tabular-nums; }
.profile-label { display: grid; gap: 7px; text-align: left; font-size: 13px; font-weight: 700; }
.profile-bio { min-height: 70px; resize: vertical; }
.profile-status, .profile-empty { min-height: 18px; font-size: 12px; opacity: .7; }
.profile-section { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid #ffffff18; text-align: left; }
.profile-section h4 { font-size: 17px; }
.profile-add { display: flex; gap: 8px; }
.profile-add .inp { min-width: 0; }
.profile-friends, .profile-ranking { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.profile-friend, .profile-rank { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 12px; background: #ffffff0d; }
.profile-friend .auth-link { margin-left: auto; }
.profile-name-link { padding: 4px; border: 0; background: none; color: #ece8ff; cursor: pointer; font: inherit; text-align: left; }
.profile-name-link:hover { color: #c4fff3; text-decoration: underline; }
.profile-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-select { padding: 8px 12px; }
.profile-rank.is-me { border: 1px solid #3ee6b077; background: #3ee6b012; }
.rank-place { min-width: 32px; color: #ffe29a; }
.rank-name { overflow: hidden; text-overflow: ellipsis; }
.rank-score { margin-left: auto; color: #ffe29a; font-variant-numeric: tabular-nums; }
.profile .av { flex: none; }
.profile-detail-overlay { z-index: 11; }
.profile-detail { width: 480px; }
.profile-detail h4 { margin: 4px 0; }
.profile-player-bio { padding: 12px; border-radius: 12px; background: #ffffff0d; white-space: pre-wrap; overflow-wrap: anywhere; }
.stat > span { min-width: 0; overflow-wrap: anywhere; }
.versus-setup { display: grid; gap: 10px; text-align: left; }
.versus-player { padding: 10px 12px; border-radius: 10px; background: #ffffff0d; }
.versus-setup .profile-status { color: #ff9aa8; }
@media (max-width: 480px) {
  .profile { min-width: 0; padding: 22px 18px; }
  .profile > .profile-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-add { flex-wrap: wrap; }
  .profile-add .inp { width: 100%; }
}

/* Son */
.snd{position:fixed;right:12px;bottom:12px;z-index:50;display:flex;gap:6px}
.snd button{width:36px;height:36px;border-radius:50%;border:1px solid #ffffff25;background:#1b1438cc;color:#fff;font-size:16px;cursor:pointer;backdrop-filter:blur(6px);transition:.2s}
.snd button:hover{background:#2c2160;transform:scale(1.08)}
.snd button.off{opacity:.45;text-decoration:line-through}
.snd-toast{position:fixed;right:12px;bottom:56px;z-index:50;padding:6px 12px;border-radius:999px;background:#1b1438dd;border:1px solid #ffffff25;color:#fff;font-size:13px;opacity:0;transform:translateY(6px);transition:.25s;pointer-events:none}
.snd-toast.show{opacity:1;transform:none}
.snd-panel{position:fixed;right:12px;bottom:56px;z-index:51;width:230px;padding:12px 14px;border-radius:14px;background:#1b1438f2;border:1px solid #ffffff25;color:#fff;font-size:13px;display:grid;gap:10px;backdrop-filter:blur(8px)}
.snd-panel[hidden]{display:none}
.snd-panel label{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center}
.snd-panel input{grid-column:1/3;width:100%;accent-color:#9d6bff}
.snd-panel b{font-weight:600;opacity:.8}
.snd-toast{bottom:104px}

/* En ligne : salle, chat rapide */
.online-lobby { display: grid; gap: 12px; margin-top: 12px; text-align: left; }
.online-note { font-size: 13px; color: #ffffffb0; min-height: 1em; }
.online-code { width: 110px; text-transform: uppercase; text-align: center; letter-spacing: 2px; }
.lobby-title { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.lobby-code { font-size: 22px; font-weight: 700; letter-spacing: 3px; }
.lobby-status { color: #ece8ff; }
.hub-status { font-size: 13px; color: #ffffffb0; }
.lobby-list { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.lobby-player { padding: 8px 12px; border-radius: 10px; background: #ffffff12; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.friend-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.friend-add { flex: none; }
.friend-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.friend-requests { margin: 10px 0; padding: 10px 12px; border: 1px solid #ff6b8166; border-radius: 14px; background: #ff6b8118; }
.friend-requests h4 { margin: 0 0 6px; color: #ffb3c0; }
.presence { flex: none; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.presence.is-on { color: #3ee6b0; background: #3ee6b01f; }
.presence.is-off { color: #a9a4c4; background: #ffffff10; }
.profile-friend .profile-name-link { flex: 1; text-align: left; min-width: 0; overflow-wrap: anywhere; }
#acct .badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff4d6d; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #14102a, 0 0 12px #ff4d6d; animation: reqPulse 1.6s ease-in-out infinite; }
#acct.has-req { border-color: #ff6b81aa; box-shadow: 0 0 14px #ff6b8155; }
#acct .who.req { color: #ffb3c0; font-weight: 700; }
@keyframes reqPulse { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { #acct .badge { animation: none; } }
.lobby-player.is-empty { opacity: .45; font-style: italic; }
.lobby-friends { display: grid; gap: 6px; text-align: left; max-height: 180px; overflow-y: auto; }
.lobby-share { display: grid; gap: 6px; justify-items: center; margin: 8px 0; }
.lobby-share small { word-break: break-all; max-width: 100%; }
.friend-row, .room-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #ffffff10; }
.friend-name, .room-text { display: grid; overflow-wrap: anywhere; min-width: 0; }
.room-text small { opacity: .7; }
.room-list { display: grid; gap: 6px; max-height: 190px; overflow-y: auto; }
.vis-choices { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.vis-btn.is-active { background: #9d6bff; color: #fff; border-color: #c9adff; }
.online-chat { position: fixed; right: 12px; bottom: 60px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 24px); }
.chat-feed { position: fixed; left: 12px; bottom: 12px; display: grid; gap: 6px; max-width: min(320px, calc(100vw - 150px)); pointer-events: none; }
.chat-bubble { padding: 8px 12px; border-radius: 14px; background: #1d1640ee; border: 1px solid #ffffff30; color: #fff; font-size: 14px; display: grid; gap: 2px; overflow-wrap: anywhere; }
.chat-bubble.is-mine { border-color: #9d6bff; }
.chat-bubble strong { font-size: 12px; color: #c9b6ff; }
.chat-panel { width: min(340px, calc(100vw - 24px)); max-height: 55vh; overflow: auto; padding: 12px; border-radius: 16px; background: #150f2ef5; border: 1px solid #ffffff30; display: grid; gap: 10px; }
.chat-title { margin: 0 0 6px; font-size: 13px; color: #c9b6ff; }
.chat-options { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-option { padding: 8px 10px; border-radius: 12px; border: 1px solid #ffffff30; background: #ffffff10; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.chat-option:hover, .chat-option:focus-visible { background: #9d6bff55; outline: none; }
.chat-options.is-emoji .chat-option { font-size: 22px; padding: 6px 10px; }

.install-btn { margin: 4px auto 14px; display: block; width: fit-content; text-decoration: none; }
.install-btn + .install-btn { margin-top: -6px; }

/* Quitter / confirmations */
.btn.danger { background: linear-gradient(180deg, #ff6b7f, #d93a56); color: #fff; box-shadow: 0 3px 0 #8c1f33, 0 8px 18px #0006; }
.confirm-box { z-index: 60; padding: 16px; }
.confirm-box .box { max-width: 420px; min-width: 0; width: 100%; padding: 24px 22px; }
.confirm-box h3 { font-size: 22px; }
.confirm-box p { color: #cfc8f0; line-height: 1.45; font-size: 15px; }
.confirm-box .row { flex-wrap: wrap; justify-content: center; gap: 10px; }
.confirm-box .row .btn { flex: 1 1 150px; }

/* Statistiques des Petits Chevaux : résumé + feuille plein écran (téléphone) */
.ssum { display: flex; gap: 8px; }
.ssum span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; background: #ffffff10; font-size: 11px; opacity: .95; }
.ssum b { font: 800 20px 'Segoe UI', sans-serif; }
.hp-stats.sheet { position: fixed; inset: 0; z-index: 40; border-radius: 0; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 0%, #2a1f5a, #0b0820 75%); backdrop-filter: none; animation: sheetUp .28s ease-out; }
@keyframes sheetUp { from { opacity: 0; transform: translateY(40px); } }
.hp-stats.sheet .shead { position: sticky; top: -14px; z-index: 2; margin: -14px -14px 0; padding: 14px; background: #0b0820ee; border-bottom: 1px solid #ffffff18; }
.hp-stats.sheet .stitle { font-size: 19px; }
.hp-stats.sheet .sgrid { grid-template-columns: 1fr; gap: 12px; }
.hp-stats.sheet .sbars { height: 110px; }
.hp-stats.sheet .sb { font-size: 13px; }
.hp-stats.sheet .chip b { font-size: 18px; }
.hp-stats.sheet .chip small { font-size: 11px; opacity: .8; }
.hp-stats.sheet .sdone { width: 100%; padding: 14px; font-size: 16px; flex: none; }
.hs-card .btn.ghost { align-self: center; }
.hp-stats.sheet .shead { justify-content: flex-start; gap: 12px; padding-right: 62px; }
.hp-stats.sheet .sclose { order: -1; flex: none; }

/* ================= Magnat (plateau Néopolis) ================= */
.mg-wrap { position: relative; display: flex; gap: 12px; align-items: center; justify-content: center; color: #ece8ff; }
.mg-wrap.is-tall { flex-direction: column; gap: 8px; }
.mg-wrap .overlay { position: absolute; border-radius: 18px; }
.mg-wrap.is-setup { overflow: auto; align-items: flex-start; padding: 4px; }
.mg-setup { width: min(920px, 100%); margin: auto; padding: 26px 30px; border-radius: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px;
  background: linear-gradient(180deg, #1d1a24, #131118); border: 1px solid #c9a24f55; box-shadow: inset 0 0 0 4px #131118, inset 0 0 0 5px #c9a24f2e, 0 20px 50px #0008; }
.mg-setup-head { grid-column: 1 / -1; display: flex; justify-content: center; padding: 4px 0 2px; }
.mg-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; transform: rotate(-2deg); }
.mg-brand span { display: block; padding: .12em .5em .08em; font: 900 38px / 1 'Arial Black', 'Segoe UI Black', 'Segoe UI', sans-serif; letter-spacing: .06em; color: #fff;
  background: linear-gradient(180deg, #e01b36, #b30f26); border: 3px solid #111; outline: 2px solid #fff; outline-offset: -7px; box-shadow: 0 6px 0 #0006, 0 10px 24px #0007; text-shadow: 0 2px 0 #0006; }
.mg-brand small { font: italic 600 13px / 1 Georgia, 'Times New Roman', serif; letter-spacing: .14em; color: #d9c08a; }
.mg-setup-sub { grid-column: 1 / -1; text-align: center; opacity: .8; margin-bottom: 6px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.mg-setup-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mg-setup .rules b { color: #e3c47e; }
.mg-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 7px; }
.mg-len-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-len-btn { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 10px 6px; border-radius: 10px; cursor: pointer; color: #ece8ff;
  background: #ffffff08; border: 1px solid #ffffff1a; font: 700 14px 'Segoe UI', sans-serif; transition: background .2s, border-color .2s; }
.mg-len-btn small { font-weight: 400; font-size: 11px; opacity: .65; }
.mg-len-btn:hover { background: #ffffff10; }
.mg-len-btn.on { background: #c9a24f1f; border-color: #d9b45e; box-shadow: inset 0 0 0 1px #d9b45e55; color: #f4e3b8; }
.mg-seat-tok { display: grid; place-items: center; width: 28px; height: 30px; flex: none; }
.mg-seat-tok .mg-pawn { width: 28px; height: 30px; }
.mg-pawn-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mg-pawn-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px; border-radius: 10px; cursor: pointer; color: #ece8ff;
  background: radial-gradient(circle at 50% 35%, #2a2633, #17141d); border: 1px solid #ffffff17; font: 600 11px 'Segoe UI', sans-serif; transition: border-color .2s, background .2s; }
.mg-pawn-btn .mg-pawn { width: 36px; height: 39px; transition: transform .25s; }
.mg-pawn-btn:hover .mg-pawn { transform: translateY(-3px); }
.mg-pawn-btn.on { border-color: #d9b45e; background: radial-gradient(circle at 50% 35%, #3a3222, #1b1710); box-shadow: inset 0 0 0 1px #d9b45e66, 0 0 14px #d9b45e33; }
.mg-pawn-btn.on .mg-pawn { transform: translateY(-3px) scale(1.08); }
.mg-pawn-btn small { opacity: .75; } .mg-pawn-btn.on small { opacity: 1; color: #f4e3b8; }
.mg-lobby-pawns { margin: 6px 0 10px; text-align: left; } .mg-lobby-pawns .mg-pawn-btn small { display: none; }
.mg-setup .hs-row .btn { min-width: 120px; }
.mg-setup .hs-row { border-radius: 10px; background: #ffffff06; }
.mg-setup .hs-row .hs-player-name { grid-row: 1; color: #f4e3b8; }
.mg-setup .btn.mg-start { background: linear-gradient(180deg, #e01b36, #a80d22); color: #fff; border: 1px solid #ff8a9a55; box-shadow: 0 4px 0 #5c0614, 0 10px 24px #0006; letter-spacing: .04em; }
.mg-setup .btn.mg-start:hover { filter: brightness(1.08); }

.mg-board { --bs: 600px; --k: calc(var(--bs) * .135); position: relative; flex: none; display: grid; gap: 0; padding: calc(var(--bs) * .016); border-radius: 10px;
  grid-template-columns: var(--k) repeat(9, 1fr) var(--k); grid-template-rows: var(--k) repeat(9, 1fr) var(--k);
  background: linear-gradient(135deg, #5a3a22, #3a2414 45%, #4b2f1b 70%, #2c1a0e);
  box-shadow: inset 0 0 0 1px #00000080, inset 0 1px 0 #ffffff22, inset 0 0 0 calc(var(--bs) * .012) #00000018, 0 2px 0 #1a0f07, 0 26px 60px #000c; }
.mg-board::after { content: ''; position: absolute; inset: calc(var(--bs) * .016 - 3px); border: 1px solid #d9b45e88; border-radius: 3px; pointer-events: none; z-index: 1; }
.mg-cell { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; overflow: hidden; color: #1d1a16;
  background: #f2ebd9; box-shadow: inset 0 0 0 .6px #2b261d;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  font: 700 calc(var(--bs) * .0142) / 1.06 'Segoe UI', Arial, sans-serif; text-transform: uppercase; letter-spacing: .015em; text-align: center;
  transition: filter .2s; -webkit-tap-highlight-color: transparent; }
.mg-cell:hover { filter: brightness(1.04); z-index: 2; }
.mg-cell.mg-k { background: #f2ebd9; justify-content: center; gap: 2px; padding: 4px; }
.mg-cell.mg-k .mg-svg { width: calc(var(--bs) * .058); height: calc(var(--bs) * .058); stroke-width: 2; }
.mg-cell.mg-k .mg-nm { font-size: calc(var(--bs) * .0158); font-weight: 900; letter-spacing: .05em; padding: 0; }
.mg-sub { display: block; font-size: calc(var(--bs) * .0108); font-weight: 600; text-transform: none; opacity: .7; letter-spacing: 0; font-style: italic; font-family: Georgia, serif; }
.mg-t-go .mg-ic { color: #c8102e; }
.mg-t-jail .mg-ic { color: #1d1a16; } .mg-t-jail { background: linear-gradient(135deg, #f2ebd9 0 30%, #e9862b 30% 100%) !important; } .mg-t-jail .mg-nm, .mg-t-jail .mg-sub { color: #1d1a16; }
.mg-t-park .mg-ic { color: #c8102e; }
.mg-t-gojail .mg-ic { color: #1f4fa8; }
.mg-band { display: block; flex: none; width: 100%; height: 22%; background: var(--gc); box-shadow: inset 0 -.6px #2b261d; }
.mg-l { flex-direction: row-reverse; }
.mg-r { flex-direction: row; }
.mg-t { flex-direction: column-reverse; }
.mg-l .mg-band, .mg-r .mg-band { width: 22%; height: 100%; }
.mg-l .mg-band { box-shadow: inset .6px 0 #2b261d; } .mg-r .mg-band { box-shadow: inset -.6px 0 #2b261d; } .mg-t .mg-band { box-shadow: inset 0 .6px #2b261d; }
.mg-l, .mg-r { justify-content: flex-start; }
.mg-l > .mg-nm, .mg-r > .mg-nm { flex: 1; }
.mg-l .mg-pr, .mg-r .mg-pr { position: absolute; bottom: 2px; }
.mg-l .mg-pr { left: 5px; } .mg-r .mg-pr { right: 5px; }
.mg-nm { display: block; align-self: stretch; min-width: 0; padding: 3px 2px 0; overflow-wrap: normal; word-break: normal; hyphens: manual; overflow: hidden; }
.mg-pr { display: block; font-size: .9em; font-weight: 700; color: #1d1a16; padding-bottom: 3px; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.mg-ic { display: grid; place-items: center; line-height: 1; padding-top: 3px; color: #1d1a16; }
.mg-svg { width: calc(var(--bs) * .03); height: calc(var(--bs) * .03); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-l .mg-ic, .mg-r .mg-ic { padding: 0 5px; }
.mg-t-chance .mg-ic { color: #d4531a; } .mg-t-chance .mg-svg { stroke-width: 3; transform: scale(1.25); }
.mg-t-chest .mg-ic { color: #1f5fae; }
.mg-t-tax .mg-ic, .mg-t-station .mg-ic, .mg-t-util .mg-ic { color: #1d1a16; }
.mg-hs { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 1px; height: 22%; align-items: center; pointer-events: none; }
.mg-l .mg-hs, .mg-r .mg-hs { flex-direction: column; top: 0; bottom: 0; height: auto; width: 22%; }
.mg-l .mg-hs { right: 0; left: auto; } .mg-r .mg-hs { left: 0; right: auto; }
.mg-t .mg-hs { top: auto; bottom: 0; }
.mg-hs i { width: calc(var(--bs) * .014); height: calc(var(--bs) * .013); background: linear-gradient(180deg, #4be08a, #138a47); clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); filter: drop-shadow(0 1px 0 #0006); animation: mgPop .45s cubic-bezier(.3, 1.6, .5, 1); }
.mg-hs i.hotel { width: calc(var(--bs) * .028); background: linear-gradient(180deg, #ff6b6b, #b3121f); clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%); }
.mg-own { position: absolute; pointer-events: none; background: var(--oc); opacity: 0; transition: opacity .4s; box-shadow: 0 0 8px var(--oc); }
.mg-b .mg-own { left: 0; right: 0; bottom: 0; height: 9%; }
.mg-t .mg-own { left: 0; right: 0; top: 0; height: 9%; }
.mg-l .mg-own { top: 0; bottom: 0; left: 0; width: 9%; }
.mg-r .mg-own { top: 0; bottom: 0; right: 0; width: 9%; }
.mg-cell.owned .mg-own { opacity: 1; }
.mg-cell.owned { background: linear-gradient(180deg, color-mix(in srgb, var(--oc) 14%, #fcf8ee), color-mix(in srgb, var(--oc) 8%, #efe7d3)); }
.mg-pr.rent { color: color-mix(in srgb, var(--oc) 55%, #1d1a2b); }
.mg-b.owned .mg-pr { padding-bottom: calc(var(--bs) * .009 + 3px); }
.mg-t.owned .mg-pr { padding-top: calc(var(--bs) * .009 + 2px); }
.mg-l.owned .mg-pr { left: calc(9% + 4px); } .mg-r.owned .mg-pr { right: calc(9% + 4px); }
.mg-cell.mortgaged { filter: grayscale(.9) brightness(.8); }
.mg-cell.mortgaged::after { content: 'HYPOTHÈQUE'; position: absolute; inset: 42% -10% auto; transform: rotate(-30deg); font-size: .62em; font-weight: 900; color: #fff; background: #b3121fdd; letter-spacing: .5px; }
.mg-cell.target { z-index: 2; animation: mgTarget 1s ease-in-out infinite; }
.mg-cell.pulse { z-index: 2; animation: mgPulse 1s ease-out; }
.mg-cell.stamp { z-index: 3; animation: mgStamp .8s cubic-bezier(.3, 1.5, .5, 1); }
.mg-cell.alarm { animation: mgAlarm 1.2s ease-out; }
@keyframes mgTarget { 0%, 100% { box-shadow: inset 0 0 0 2px #ffd166, inset 0 0 10px #ffd16699; } 50% { box-shadow: inset 0 0 0 3px #ffb800, inset 0 0 22px #ffd166; } }
@keyframes mgPulse { 0% { box-shadow: inset 0 0 0 4px #ffd166, 0 0 0 0 #ffd166cc; filter: brightness(1.15); } 100% { box-shadow: inset 0 0 0 .5px #2c2540, 0 0 0 12px #ffd16600; filter: none; } }
@keyframes mgStamp { 0% { transform: scale(1); } 35% { transform: scale(1.2); filter: brightness(1.15); box-shadow: 0 0 0 3px #ffd166, 0 8px 20px #0008; } 100% { transform: scale(1); } }
@keyframes mgAlarm { 0%, 50%, 100% { filter: none; } 25%, 75% { filter: sepia(1) saturate(6) hue-rotate(-30deg) brightness(.9); } }
@keyframes mgPop { from { transform: scale(0) translateY(-6px); } to { transform: none; } }

.mg-center { grid-area: 2 / 2 / 11 / 11; position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--bs) * .012); padding: 3% 4%; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse at 50% 45%, #f4eedd 0%, #ebe2cb 70%, #e1d6bb 100%); box-shadow: inset 0 0 0 .6px #2b261d, inset 0 0 40px #8a6b3a22; }
.mg-center::before { content: ''; position: absolute; inset: 2.2%; border: 1px solid #2b261d55; outline: 1px solid #2b261d2a; outline-offset: 3px; pointer-events: none; }
.mg-center::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(45deg, #8a6b3a08 0 2px, transparent 2px 6px); }
.mg-logo { position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(-38deg); white-space: nowrap; }
.mg-logo .mg-brand { transform: none; gap: calc(var(--bs) * .008); }
.mg-logo .mg-brand span { font-size: calc(var(--bs) * .085); border-width: calc(var(--bs) * .005); outline-width: calc(var(--bs) * .0028); outline-offset: calc(var(--bs) * -.011); box-shadow: 0 calc(var(--bs) * .008) 0 #0004; }
.mg-logo .mg-brand small { font-size: calc(var(--bs) * .02); color: #6b5530; }
.mg-deck { position: absolute; top: 40%; z-index: 1; width: calc(var(--bs) * .115); height: calc(var(--bs) * .16); pointer-events: none; }
.mg-deck::before { content: ''; position: absolute; inset: calc(var(--bs) * -.012); border: 1.5px dashed #2b261d66; border-radius: 6px; }
.mg-deck > em { position: absolute; left: 50%; top: 100%; margin-top: calc(var(--bs) * .02); transform: translateX(-50%); font: 900 calc(var(--bs) * .016) / 1 'Segoe UI', Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: #2b261d; white-space: nowrap; }
.mg-deck-chance { left: 6%; transform: rotate(-6deg); }
.mg-deck-chest { right: 6%; transform: rotate(6deg); }
.mg-deck > i, .mg-deck > b { position: absolute; inset: 0; border-radius: 6px; box-shadow: 0 1px 2px #0006; }
.mg-deck > i:nth-child(1) { transform: translate(3px, 3px); }
.mg-deck > i:nth-child(2) { transform: translate(1.5px, 1.5px); }
.mg-deck-chance > i { background: #c9531c; } .mg-deck-chest > i { background: #1a4f93; }
.mg-deck > b, .mg-card-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; color: #fff; box-shadow: 0 2px 6px #0005;
  background: radial-gradient(circle at 50% 40%, #f08a3c, #d4531a 70%); border: calc(var(--bs) * .005) solid #fff7e8; outline: 1px solid #00000033; outline-offset: -5px; }
.mg-deck-chest > b, .mg-card-chest .mg-card-back { background: radial-gradient(circle at 50% 40%, #3d86d6, #1a4f93 70%); }
.mg-cb-ic { display: grid; place-items: center; line-height: .8; font: 900 calc(var(--bs) * .07) / .9 Georgia, 'Times New Roman', serif; text-shadow: 0 2px 0 #0004; }
.mg-cb-ic .mg-svg { width: calc(var(--bs) * .055); height: calc(var(--bs) * .055); stroke-width: 2.2; }
.mg-cb-t { font: 900 calc(var(--bs) * .016) / 1 'Segoe UI', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.mg-deck.draw > b { animation: mgDraw .7s ease-in; }
@keyframes mgDraw { 0% { transform: none; } 40% { transform: translateY(-14px) rotate(-6deg) scale(1.08); } 100% { transform: translateY(-60px) scale(1.4); opacity: 0; } }

.mg-turn { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 30px; font-weight: 700; font-size: calc(var(--bs) * .023); color: #f6efdc;
  background: #1d1a16; border: 2px solid var(--pc); box-shadow: 0 3px 8px #0004; max-width: 100%; }
.mg-turn-tok { display: grid; place-items: center; }
.mg-turn .mg-clock { flex: none; font-size: .85em; opacity: .85; font-variant-numeric: tabular-nums; }
.mg-turn .mg-clock.low { color: #ff6b81; animation: qzBlink .8s ease infinite; }
.mg-turn span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.mg-tray { position: relative; z-index: 2; flex: 1; width: 100%; min-height: calc(var(--bs) * .16); perspective: calc(var(--bs) * 1.3); }
.mg-d3 { --d: 40px; position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); transform-style: preserve-3d; will-change: transform; }
.mg-d3-sh { position: absolute; inset: 6%; border-radius: 30%; background: #000; filter: blur(calc(var(--d) * .12)); opacity: .5; transform: translate(14%, 22%); }
.mg-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.mg-face { position: absolute; inset: 0; border-radius: 17%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 13%; backface-visibility: hidden;
  background: radial-gradient(circle at 30% 25%, #ffffff, #f4efe3 55%, #d8cfb8); box-shadow: inset 0 0 0 1px #00000014, inset 0 -2px 5px #0000002a; }
.mg-face.f1 { transform: translateZ(calc(var(--d) / 2)); }
.mg-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.mg-face.f2 { transform: rotateY(90deg) translateZ(calc(var(--d) / 2)); }
.mg-face.f5 { transform: rotateY(-90deg) translateZ(calc(var(--d) / 2)); }
.mg-face.f3 { transform: rotateX(90deg) translateZ(calc(var(--d) / 2)); }
.mg-face.f4 { transform: rotateX(-90deg) translateZ(calc(var(--d) / 2)); }
.mg-face i { place-self: center; width: 66%; height: 66%; border-radius: 50%; }
.mg-face i.on { background: radial-gradient(circle at 38% 35%, #4a4458, #0f0c18 70%); box-shadow: inset 0 1px 1px #000a, 0 1px 0 #ffffffaa; }
.mg-face.f1 i.on { width: 86%; height: 86%; background: radial-gradient(circle at 38% 35%, #ff6b6b, #a30014 70%); }
.mg-sum { position: absolute; z-index: 4; margin-top: calc(var(--bs) * -.05); transform: translate(-50%, -100%); opacity: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mg-sum b { font: 900 calc(var(--bs) * .05) / 1 Georgia, 'Times New Roman', serif; color: #1d1a16; text-shadow: 0 2px 0 #fff, 0 0 12px #fff; }
.mg-sum small { font-weight: 900; font-size: calc(var(--bs) * .017); color: #c8102e; letter-spacing: .15em; text-shadow: 0 1px 0 #fff; margin-top: 2px; }
.mg-sum.show { animation: mgSum 2.6s ease-out forwards; }
@keyframes mgSum { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.5); } 14% { opacity: 1; transform: translate(-50%, -100%) scale(1.2); } 24% { transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -110%) scale(1); } }

.mg-msg { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; min-height: 2.5em; max-width: 94%; padding: .4em .9em; border-radius: 10px;
  font-size: calc(var(--bs) * .02); line-height: 1.3; color: #2a241b; background: #fffaf0f2; border: 1px solid #2b261d33; box-shadow: 0 2px 6px #0002; }
.mg-msg.pop { animation: mgMsg .5s ease-out; }
@keyframes mgMsg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mg-actions { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: calc(var(--bs) * .07); }
.mg-actions .btn { font-size: calc(var(--bs) * .022); padding: .6em 1.1em; background: #1d1a16; color: #f6efdc; border: 1px solid #000; box-shadow: 0 3px 0 #000a; }
.mg-actions .btn.ghost { background: #fffaf0; color: #2a241b; border: 1px solid #2b261d55; box-shadow: 0 2px 0 #2b261d33; }
.mg-actions .btn:disabled { opacity: .45; }
.mg-actions .mg-roll { font-size: calc(var(--bs) * .028); background: linear-gradient(180deg, #e01b36, #a80d22); color: #fff; border: 1px solid #5c0614; box-shadow: 0 4px 0 #5c0614, 0 8px 18px #a80d2244; animation: mgRollGlow 1.8s ease-in-out infinite; }
@keyframes mgRollGlow { 50% { box-shadow: 0 4px 0 #5c0614, 0 8px 26px #e01b3666; } }
.mg-banner { position: absolute; left: 50%; top: 46%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .7em 1.6em; border-radius: 16px; max-width: 86%;
  font-size: calc(var(--bs) * .03); color: #fff; background: #0d0920ee; border: 2px solid var(--pc); box-shadow: 0 0 30px color-mix(in srgb, var(--pc) 55%, transparent), 0 12px 30px #000a;
  opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.mg-banner b { font-size: 1.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mg-banner small { font-size: .6em; opacity: .85; }
.mg-banner-tok .mg-pawn { width: 1.9em; height: 2.05em; filter: drop-shadow(0 2px 3px #000a); }
.mg-banner.show { animation: mgBanner 1.7s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes mgBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 26% { transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } }

.mg-pawn { display: block; overflow: visible; }
.mg-pawn-body { fill: url(#mgMetal); stroke: #24272d; stroke-width: .75; stroke-linejoin: round; }
.mg-pawn-base { fill: var(--pc, #c9a24f); stroke: #00000099; stroke-width: .7; }
.mg-tokens { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.mg-token { position: absolute; left: 0; top: 0; display: grid; place-items: center; transition: transform .3s cubic-bezier(.3, .7, .4, 1); filter: drop-shadow(1px 3px 2px #000a); }
.mg-token .mg-pawn { width: 100%; height: 100%; }
.mg-token.is-turn { z-index: 2; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px var(--pc)) drop-shadow(1px 4px 3px #000a); }
.mg-token.is-turn .mg-pawn { animation: mgIdle 1.3s ease-in-out infinite; }
.mg-token.hop .mg-pawn { animation: mgHop .32s ease-out; }
.mg-token.fly { transition: transform 1.1s cubic-bezier(.5, 0, .3, 1); }
.mg-token.in-jail { filter: grayscale(.5) drop-shadow(1px 3px 2px #000a); }
@keyframes mgIdle { 50% { transform: translateY(-14%); } }
@keyframes mgHop { 0% { transform: none; } 45% { transform: translateY(-55%) scale(1.1); } 100% { transform: none; } }
.mg-coin { position: absolute; left: 0; top: 0; z-index: 6; width: calc(var(--bs) * .028); height: calc(var(--bs) * .028); margin: calc(var(--bs) * -.014) 0 0 calc(var(--bs) * -.014); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #ffcf3d 45%, #c58a00); box-shadow: 0 0 0 1px #8a5d00, 0 0 10px #ffd166aa; }
.mg-float { position: absolute; left: 0; top: 0; z-index: 7; font-weight: 900; font-size: calc(var(--bs) * .03); white-space: nowrap; pointer-events: none; animation: mgFloat 2.2s ease-out forwards; text-shadow: 0 0 3px #000, 0 2px 6px #000; }
.mg-float.plus { color: #3ee6b0; } .mg-float.minus { color: #ff6b81; }
@keyframes mgFloat { 0% { opacity: 0; margin-top: 0; } 12% { opacity: 1; margin-top: -14px; } 70% { opacity: 1; } 100% { opacity: 0; margin-top: -70px; } }

.mg-pop { position: absolute; inset: 13%; z-index: 6; display: flex; align-items: center; justify-content: center; }
.mg-board:has(.mg-pop:not([hidden])) .mg-tray { opacity: 0; transition: opacity .25s; }
.mg-pop.show .mg-pop-box { animation: mgIn .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mgIn { from { opacity: 0; transform: scale(.7) translateY(20px); } to { opacity: 1; transform: none; } }
.mg-pop-box { max-width: 100%; max-height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 18px;
  background: #0d0920f0; border: 1px solid #ffffff22; box-shadow: 0 20px 60px #000c; }
.mg-pop-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mg-pop-note { font-size: 12px; opacity: .7; max-width: 260px; text-align: center; }
.mg-deed { width: min(250px, 100%); border-radius: 12px; overflow: hidden; background: #f6f2ff; color: #1d1540; box-shadow: 0 0 24px color-mix(in srgb, var(--gc) 50%, transparent); }
.mg-deed-h { padding: 10px; text-align: center; background: var(--gc); color: #fff; text-shadow: 0 1px 3px #0008; display: flex; flex-direction: column; gap: 2px; }
.mg-deed-h small { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .9; }
.mg-deed-h span { display: grid; place-items: center; } .mg-deed-h .mg-svg { width: 34px; height: 34px; }
.mg-deed-h b { font-size: 17px; }
.mg-deed-rows { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 10px 14px; font-size: 13px; }
.mg-deed-rows b { text-align: right; }
.mg-deed-f { padding: 7px 12px; font-size: 12px; text-align: center; background: #e6dfff; font-weight: 600; }
.mg-deed-info { padding: 14px; font-size: 14px; text-align: center; }
.mg-card { position: relative; width: 270px; max-width: 100%; height: 175px; perspective: 900px; animation: mgDeal .55s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes mgDeal { from { opacity: 0; transform: translateY(-60px) scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
/* Retournement en deux temps (le dos se couche, la face se relève) : fiable sur tous les navigateurs */
.mg-card-back, .mg-card-front { position: absolute; inset: 0; border-radius: 12px; }
.mg-card .mg-card-back { --bs: 520px; animation: mgFlipOut .32s .75s ease-in forwards; }
.mg-card-front { display: flex; flex-direction: column; align-items: stretch; text-align: center; overflow: hidden; color: #1d1a16;
  background: #fbf6e9; border: 3px solid #d4531a; box-shadow: 0 10px 30px #000a, inset 0 0 0 3px #fbf6e9, inset 0 0 0 4px #d4531a55;
  transform: perspective(900px) rotateY(-90deg); animation: mgFlipIn .36s 1.07s cubic-bezier(.2, .8, .3, 1) forwards; }
.mg-card-h { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px 6px; background: #d4531a; color: #fff;
  font: 900 15px / 1 'Segoe UI', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.mg-card-h span { display: grid; } .mg-card-h .mg-svg { width: 18px; height: 18px; stroke-width: 2.6; }
.mg-card-front p { flex: 1; display: grid; place-items: center; margin: 0; padding: 8px 16px; font: 600 16px / 1.35 Georgia, 'Times New Roman', serif; }
.mg-card-f { padding: 0 0 6px; font: italic 10px Georgia, serif; letter-spacing: .1em; color: #8a7a5c; }
.mg-card-chest .mg-card-front { border-color: #1a4f93; box-shadow: 0 10px 30px #000a, inset 0 0 0 3px #fbf6e9, inset 0 0 0 4px #1a4f9355; }
.mg-card-chest .mg-card-h { background: #1a4f93; }
@keyframes mgFlipOut { from { transform: perspective(900px) rotateY(0); } to { transform: perspective(900px) rotateY(90deg); visibility: hidden; } }
@keyframes mgFlipIn { from { transform: perspective(900px) rotateY(-90deg); } to { transform: perspective(900px) rotateY(0); } }

.mg-side { flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-radius: 18px; background: #ffffff0a; border: 1px solid #ffffff14; }
.mg-head { font-size: 14px; opacity: .85; text-align: center; }
.mg-head b { color: #ffd166; font-size: 1.15em; }
.mg-plist { display: flex; flex-direction: column; gap: 6px; flex: none; }
.mg-pl { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: #ffffff0b; border: 1px solid #ffffff12; transition: background .25s, border-color .25s, transform .25s; }
.mg-pl.on { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--pc) 30%, transparent); transform: translateX(3px); }
.mg-pl.out { opacity: .4; filter: grayscale(1); }
.mg-pl.gain { animation: mgGain .6s; } .mg-pl.loss { animation: mgLoss .6s; }
@keyframes mgGain { 30% { background: #3ee6b044; } } @keyframes mgLoss { 30% { background: #ff6b8144; } }
.mg-pl-tok { display: grid; place-items: center; flex: none; } .mg-pl-tok .mg-pawn { width: 26px; height: 28px; filter: drop-shadow(0 1px 1px #000a); }
.mg-turn-tok .mg-pawn { width: 1.3em; height: 1.4em; } .mg-rank .mg-pawn { display: inline-block; width: 20px; height: 22px; vertical-align: middle; }
.mg-pl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mg-pl-info b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-pl-info small { font-size: 11px; opacity: .7; }
.mg-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
.mg-dots i { width: 7px; height: 9px; border-radius: 2px; background: var(--gc); }
.mg-dots i.m { opacity: .3; }
.mg-cash { font-weight: 800; font-size: 15px; color: #ffd166; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-log { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12px; padding: 6px 8px; border-radius: 10px; background: #0003; }
.mg-log-line { opacity: .6; } .mg-log-line:first-child { opacity: 1; animation: mgMsg .3s; }
.mg-hint { font-size: 11px; opacity: .55; text-align: center; }
.mg-pl { cursor: pointer; } .mg-pl:hover { border-color: #ffffff30; }
.mg-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: #0003; flex: none; }
.mg-tab { flex: 1; min-width: 0; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: 700 12px/1.2 inherit; font-family: inherit; opacity: .6; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, opacity .2s; }
.mg-tab.on { opacity: 1; background: linear-gradient(135deg, #7c5cff55, #3ee6b033); box-shadow: inset 0 0 0 1px #ffffff22; }
.mg-log[hidden], .mg-assets[hidden] { display: none; }
.mg-assets { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px; border-radius: 10px; background: #0003; animation: mgMsg .25s; }
.mg-as-head { display: flex; align-items: center; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid #ffffff14; }
.mg-as-head b { display: block; font-size: 14px; } .mg-as-head small { font-size: 11px; color: #ffd166; }
.mg-as-sec { display: flex; flex-direction: column; gap: 6px; }
.mg-as-title { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.mg-as-empty { font-size: 12px; opacity: .55; font-style: italic; }
.mg-as-card { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(135deg, #ff9f1c, #ffbf69); color: #3a2200; box-shadow: 0 3px 10px #0005; transform: rotate(-1.2deg); }
.mg-as-card b { display: block; font-size: 13px; } .mg-as-card small { font-size: 10px; opacity: .8; }
.mg-as-card em { margin-left: auto; font-style: normal; font-weight: 900; font-size: 15px; }
.mg-as-ico .mg-svg { width: 24px; height: 24px; color: #3a2200; stroke-width: 2.4; }
.mg-as-group { display: flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 10px; border-left: 4px solid var(--gc); background: #ffffff07; }
.mg-as-group.full { background: color-mix(in srgb, var(--gc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 45%, transparent); }
.mg-as-gh { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; opacity: .85; }
.mg-as-gh b { margin-left: auto; color: #3ee6b0; font-size: 10px; }
.mg-as-gdot { width: 10px; height: 10px; border-radius: 3px; background: var(--gc); }
.mg-as-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; }
.mg-as-prop { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 0 0 5px; border: 0; border-radius: 7px; overflow: hidden; background: #f6efdc; color: #1d1a2b; font-family: inherit; text-align: center; cursor: pointer; box-shadow: 0 2px 6px #0006; transition: transform .15s; }
.mg-as-prop:hover { transform: translateY(-2px); }
.mg-as-prop.m { filter: grayscale(.9); opacity: .6; }
.mg-as-band { display: grid; place-items: center; height: 13px; background: var(--gc); }
.mg-as-band .mg-svg { width: 11px; height: 11px; color: #1d1a2b; }
.mg-as-name { padding: 0 4px; font-size: 11px; font-weight: 800; line-height: 1.15; }
.mg-as-build { display: flex; justify-content: center; gap: 2px; min-height: 8px; }
.mg-as-build i { width: 8px; height: 8px; border-radius: 2px; background: #1fa45b; box-shadow: 0 1px 0 #0005; }
.mg-as-build i.hotel { width: 18px; background: #e02f3f; }
.mg-as-prop small { font-size: 10px; opacity: .7; }
.mg-as-prop { position: relative; }
.mg-as-prop.can { box-shadow: 0 0 0 2px #3ee6b0, 0 2px 10px #3ee6b066; }
.mg-as-can { position: absolute; top: 14px; right: 3px; font-style: normal; font-size: 9px; font-weight: 900; color: #0d6b4c; }
.mg-as-prop.sel { box-shadow: 0 0 0 3px #ffd166, 0 0 16px #ffd16699; transform: translateY(-2px); }
.mg-as-prop.sel::after { content: '✔'; position: absolute; top: 1px; right: 4px; font-size: 10px; font-weight: 900; color: #1d1a2b; }

/* Enchères */
.mg-auc { width: min(300px, 100%); }
.mg-auc-h { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 10px; border-radius: 12px; background: var(--gc); color: #fff; text-shadow: 0 1px 3px #0009; }
.mg-auc-h small { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mg-auc-h b { font-size: 17px; text-align: center; } .mg-auc-h span { font-size: 11px; opacity: .9; }
.mg-auc-bid { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 18px; border-radius: 12px; background: #0005; border: 1px solid color-mix(in srgb, var(--pc, #ffffff) 50%, transparent); }
.mg-auc-bid b { font-size: 26px; font-weight: 900; color: #ffd166; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px #ffd16655; }
.mg-auc-bid small { font-size: 11px; opacity: .8; }
.mg-auc-bid.bump b { animation: mgBump .45s; }
@keyframes mgBump { 40% { transform: scale(1.3); color: #fff; } }
.mg-auc-pl { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.mg-auc-chip { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffffff0d; border: 2px solid #ffffff22; transition: transform .2s, opacity .2s, border-color .2s; }
.mg-auc-chip .mg-pawn { width: 22px; height: 24px; filter: drop-shadow(0 1px 1px #000a); }
.mg-auc-chip.on { border-color: var(--pc); transform: scale(1.15); box-shadow: 0 0 12px var(--pc); }
.mg-auc-chip.lead { border-color: #ffd166; }
.mg-auc-chip.out { opacity: .3; filter: grayscale(1); }
.mg-auc-done { margin: 0; padding: 6px 14px; border-radius: 10px; font-weight: 900; color: #3ee6b0; background: #3ee6b01a; animation: mgIn .3s; }
.mg-auc-done.no { color: #ff6b81; background: #ff6b811a; }

/* Échanges */
.mg-trade-box { width: min(440px, 100%); }
.mg-trade-title { font-weight: 900; font-size: 16px; }
.mg-trade-with { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mg-trade-pick { display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 99px; border: 1px solid #ffffff22; background: #ffffff0a; color: inherit; font: 700 12px inherit; font-family: inherit; cursor: pointer; }
.mg-trade-pick .mg-pawn { width: 18px; height: 18px; }
.mg-trade-pick.on { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 22%, transparent); }
.mg-trade-cols { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; }
.mg-trade-x { align-self: center; font-size: 20px; opacity: .6; }
.mg-trade-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 7px; border-radius: 12px; background: #ffffff08; border-top: 3px solid var(--pc); }
.mg-trade-who { display: flex; align-items: center; gap: 5px; font-size: 12px; min-width: 0; }
.mg-trade-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-trade-who .mg-pawn { width: 18px; height: 18px; }
.mg-trade-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; max-height: 170px; overflow: auto; padding: 3px; }
.mg-trade-cash { display: grid; place-items: center; padding: 6px; border-radius: 7px; font-weight: 900; color: #ffd166; background: #ffd16618; }
.mg-trade-money { display: flex; align-items: center; justify-content: center; gap: 3px; }
.mg-trade-money b { min-width: 52px; text-align: center; color: #ffd166; font-size: 13px; font-variant-numeric: tabular-nums; }
.mg-step { padding: 3px 6px; border-radius: 7px; border: 1px solid #ffffff22; background: #ffffff10; color: inherit; font: 700 11px inherit; font-family: inherit; cursor: pointer; }
.mg-step:disabled { opacity: .3; cursor: default; }
.mg-actions .btn.mg-build-btn { color: #14663a; border-color: #1f8f4e; box-shadow: 0 0 0 1px #1f8f4e, 0 2px 0 #2b261d33; animation: mgBuildGlow 1.8s infinite; }
@keyframes mgBuildGlow { 50% { box-shadow: 0 0 0 1px #1f8f4e, 0 0 14px #1f8f4e88; } }
.mg-board.is-small .mg-pop:has(.mg-trade-box) { inset: 2%; }
.mg-board.is-small .mg-trade-box { gap: 6px; padding: 8px; }
.mg-board.is-small .mg-trade-cols { gap: 4px; }
.mg-board.is-small .mg-trade-x { font-size: 14px; }
.mg-board.is-small .mg-trade-col { padding: 5px; gap: 4px; }
.mg-board.is-small .mg-trade-list { max-height: 96px; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 4px; }
.mg-board.is-small .mg-trade-list .mg-as-name { font-size: 9px; } .mg-board.is-small .mg-trade-list small { font-size: 8px; }
.mg-board.is-small .mg-trade-money { flex-wrap: wrap; gap: 2px; }
.mg-board.is-small .mg-trade-money b { order: -1; width: 100%; min-width: 0; }
.mg-board.is-small .mg-step { padding: 2px 4px; font-size: 10px; }
.mg-board.is-small .mg-trade-pick { padding: 2px 8px 2px 4px; font-size: 11px; }
.mg-board.is-small .mg-trade-box .mg-pop-note { font-size: 10px; }
.mg-board.is-tiny .mg-auc-bid b { font-size: 20px; } .mg-board.is-tiny .mg-auc-h b { font-size: 14px; }
.mg-board.is-tiny .mg-auc-chip { width: 28px; height: 28px; } .mg-board.is-tiny .mg-auc-chip .mg-pawn { width: 18px; height: 18px; }
.mg-board.is-tiny .mg-trade-title { font-size: 13px; }
.mg-wrap.is-tall .mg-tab { padding: 5px 6px; font-size: 11px; }
.mg-wrap.is-tall .mg-assets { padding: 6px; gap: 7px; }
.mg-wrap.is-tall .mg-as-list { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.mg-wrap.is-low .mg-side { padding: 6px; gap: 5px; }
.mg-wrap.is-low .mg-plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.mg-wrap.is-low .mg-pl { padding: 4px 7px; gap: 6px; transform: none; }
.mg-wrap.is-low .mg-pl-tok .mg-pawn { width: 20px; height: 20px; }
.mg-wrap.is-low .mg-pl-info b { font-size: 12px; }
.mg-wrap.is-low .mg-pl-info small, .mg-wrap.is-low .mg-dots, .mg-wrap.is-low .mg-head, .mg-wrap.is-low .mg-hint { display: none; }
.mg-wrap.is-low .mg-cash { font-size: 13px; }
.mg-wrap.is-low .mg-tab { padding: 4px 6px; font-size: 11px; }
.mg-wrap.is-low .mg-log { font-size: 11px; }
.mg-wrap.is-low .mg-assets { padding: 6px; gap: 7px; }
.mg-wrap.is-tall .mg-side { padding: 6px; gap: 5px; }
.mg-wrap.is-tall .mg-plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.mg-wrap.is-tall .mg-pl { padding: 5px 7px; gap: 6px; transform: none; }
.mg-wrap.is-tall .mg-pl-tok .mg-pawn { width: 20px; height: 20px; }
.mg-wrap.is-tall .mg-pl-info b { font-size: 12px; }
.mg-wrap.is-tall .mg-pl-info small, .mg-wrap.is-tall .mg-dots, .mg-wrap.is-tall .mg-head, .mg-wrap.is-tall .mg-hint { display: none; }
.mg-wrap.is-tall .mg-cash { font-size: 13px; }
.mg-wrap.is-tall .mg-log { font-size: 11px; }
.mg-board.is-small .mg-pop { inset: 4%; }
.mg-board.is-small .mg-deed-rows { font-size: 12px; padding: 7px 10px; }
.mg-board.is-small .mg-deck { display: none; }
.mg-board.is-small .mg-actions .btn { font-size: 13px; }
.mg-board.is-small .mg-msg { font-size: 12px; }
.mg-board.is-small .mg-turn { font-size: 13px; }
.mg-board.is-tiny .mg-t-prop .mg-nm, .mg-board.is-tiny .mg-l .mg-nm, .mg-board.is-tiny .mg-r .mg-nm, .mg-board.is-tiny .mg-b:not(.mg-t-prop) .mg-nm, .mg-board.is-tiny .mg-t:not(.mg-t-prop) .mg-nm { display: none; }
.mg-board.is-tiny .mg-cell { font-size: 7px; justify-content: space-between; }
.mg-board.is-tiny .mg-ic { margin: auto; padding: 0; } .mg-board.is-tiny .mg-svg { width: 13px; height: 13px; }
.mg-board.is-tiny .mg-l .mg-pr, .mg-board.is-tiny .mg-r .mg-pr { position: static; margin: auto; }
.mg-board.is-tiny .mg-cell.mg-k .mg-nm { display: block; font-size: 7px; }
.mg-board.is-tiny .mg-cell.mg-k .mg-ic { margin: 0; } .mg-board.is-tiny .mg-cell.mg-k .mg-svg { width: 18px; height: 18px; } .mg-board.is-tiny .mg-sub { display: none; } .mg-board.is-tiny .mg-cell.mg-k { padding: 1px; }
.mg-board.is-tiny .mg-pop-box { padding: 8px; gap: 6px; }
.mg-board.is-tiny .mg-deed-rows { font-size: 11px; gap: 1px 8px; padding: 5px 8px; }
.mg-board.is-tiny .mg-deed-h { padding: 5px; } .mg-board.is-tiny .mg-deed-h .mg-svg { width: 22px; height: 22px; } .mg-board.is-tiny .mg-deed-h b { font-size: 14px; }
.mg-board.is-tiny .mg-card { height: 140px; } .mg-board.is-tiny .mg-card-front p { font-size: 13px; padding: 4px 10px; } .mg-board.is-tiny .mg-card-h { font-size: 12px; padding: 5px; } .mg-board.is-tiny .mg-card .mg-card-back { --bs: 420px; }
.mg-board.is-tiny .mg-pop-box .btn { padding: 6px 10px; font-size: 12px; }
.mg-end .box { max-width: 420px; }
.mg-rank { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; text-align: left; }
.mg-rank li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 14px; border-radius: 12px; background: #ffffff0d; border-left: 4px solid var(--pc); }
.mg-rank li:first-child { background: #ffd16622; box-shadow: 0 0 20px #ffd16633; }
.mg-rank b { color: #ffd166; }
.mg-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mg-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: mgConf 3s linear forwards; }
@keyframes mgConf { to { transform: translateY(110vh) rotate(720deg); } }
@media (max-width: 760px) {
  .mg-setup { grid-template-columns: 1fr; padding: 16px; }
  .mg-setup > h3 { font-size: 26px; }
}
/* ================= Quiz Éclair ================= */
.qz-wrap { --qs: 1; position: relative; display: flex; flex-direction: column; gap: calc(12px * var(--qs)); padding: calc(10px * var(--qs)); color: #ece8ff; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 15% 0%, #ffd16618, transparent 45%), radial-gradient(circle at 90% 100%, #ff6bd018, transparent 45%); }
.qz-wrap .overlay { position: absolute; border-radius: 22px; }
.qz-wrap.is-setup { overflow: auto; justify-content: flex-start; }
.qz-setup { width: min(760px, 100%); margin: auto; padding: 24px 28px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: radial-gradient(circle at 50% 0%, #4dd6ff22, #1d1540 70%); border: 1px solid #4dd6ff55; box-shadow: 0 0 60px #4dd6ff22, 0 20px 50px #0007; }
.qz-logo { font-size: 46px; line-height: 1; filter: drop-shadow(0 0 18px #ffd166); animation: qzBolt 2.4s ease-in-out infinite; }
@keyframes qzBolt { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
.qz-setup h3 { font-size: 34px; letter-spacing: 1px; background: linear-gradient(90deg, #ffd166, #4dd6ff, #ff6bd0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-sub { opacity: .8; max-width: 520px; }
.qz-label { font-size: 13px; opacity: .7; margin-top: 6px; text-transform: uppercase; letter-spacing: 1.5px; }
.qz-themes { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qz-theme { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; cursor: pointer; color: #ece8ff; font: 600 14px 'Segoe UI', sans-serif; text-align: left;
  background: color-mix(in srgb, var(--tc) 9%, #ffffff06); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); transition: transform .15s, background .2s, box-shadow .2s; }
.qz-theme:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--tc) 18%, transparent); }
.qz-theme.on { background: color-mix(in srgb, var(--tc) 28%, transparent); border-color: var(--tc); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 45%, transparent); }
.qz-theme-ic { font-size: 22px; }
.qz-theme-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-best { color: #ffd166; font-weight: 700; }
.qz-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.qz-go { font-size: 17px; padding: 12px 28px; background: linear-gradient(180deg, #ffd166, #ff9f43); color: #2a1c52; box-shadow: 0 3px 0 #b86b14, 0 0 24px #ffd16655; }

.qz-hud { display: flex; align-items: stretch; justify-content: space-between; gap: calc(10px * var(--qs)); flex: none; }
.qz-hud > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(6px * var(--qs)) calc(14px * var(--qs)); border-radius: 14px; background: #ffffff0b; border: 1px solid #ffffff14; min-width: 0; }
.qz-hud small { font-size: calc(11px * var(--qs)); opacity: .65; text-transform: uppercase; letter-spacing: 1px; }
.qz-hud b { font-size: calc(22px * var(--qs)); font-variant-numeric: tabular-nums; }
.qz-lives { flex-direction: row !important; gap: 4px; font-size: calc(22px * var(--qs)); }
.qz-lives .on { color: #ff4d6d; text-shadow: 0 0 10px #ff4d6d; animation: qzBeat 1.2s ease-in-out infinite; }
.qz-lives .off { opacity: .2; filter: grayscale(1); }
@keyframes qzBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } }
.qz-level { flex: 1; }
.qz-level b { color: #4dd6ff; }
.qz-lvbar { display: block; width: 100%; max-width: 160px; height: 5px; border-radius: 3px; background: #ffffff18; overflow: hidden; margin-top: 3px; }
.qz-lvbar i { display: block; height: 100%; background: linear-gradient(90deg, #4dd6ff, #3ee6b0); transition: width .5s; }
.qz-score b { color: #ffd166; }
.qz-streak.hot { border-color: #ff9f43 !important; box-shadow: 0 0 18px #ff9f4366; }
.qz-streak.hot b { color: #ff9f43; }
.qz-pl { flex: 1; transition: all .3s; }
.qz-pl.on { border-color: #ffd166 !important; background: #ffd1661c !important; box-shadow: 0 0 20px #ffd16644; }
.qz-pl-nm { font-weight: 700; font-size: calc(14px * var(--qs)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-pl-sc { color: #ffd166; }
.qz-vs { flex: none !important; font-weight: 800; color: #ff6bd0; font-size: calc(15px * var(--qs)); }

.qz-timer { position: relative; flex: none; height: calc(14px * var(--qs)); border-radius: 10px; background: #ffffff12; overflow: hidden; }
.qz-timer-fill { height: 100%; width: 100%; border-radius: 10px; background: linear-gradient(90deg, #3ee6b0, #4dd6ff); box-shadow: 0 0 14px #3ee6b088; }
.qz-timer.urgent .qz-timer-fill { background: linear-gradient(90deg, #ff4d6d, #ff9f43); box-shadow: 0 0 16px #ff4d6d; animation: qzBlink .5s steps(2) infinite; }
@keyframes qzBlink { 50% { opacity: .65; } }
.qz-timer-txt { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: calc(10px * var(--qs)); font-weight: 800; text-shadow: 0 1px 2px #000; }

.qz-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(12px * var(--qs)); justify-content: center; }
.qz-card { --tc: #4dd6ff; position: relative; padding: calc(18px * var(--qs)) calc(22px * var(--qs)); border-radius: 22px; text-align: center;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tc) 22%, transparent), #1d1540 75%); border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--tc) 22%, transparent), 0 16px 40px #0006; }
.qz-card.enter { animation: qzEnter .45s cubic-bezier(.25, 1.4, .5, 1); }
.qz-card.shake { animation: qzShake .45s; }
.qz-card.win { box-shadow: 0 0 60px #3ee6b077, 0 16px 40px #0006; border-color: #3ee6b0; }
.qz-card.skip { animation: qzOut .45s forwards; }
@keyframes qzEnter { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes qzShake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes qzOut { to { opacity: 0; transform: translateX(-60px) rotate(-4deg); } }
.qz-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: calc(10px * var(--qs)); }
.qz-chip { padding: 4px 12px; border-radius: 20px; font-size: calc(12px * var(--qs)); font-weight: 700; background: color-mix(in srgb, var(--tc) 25%, transparent); border: 1px solid var(--tc); }
.qz-diff { display: flex; align-items: center; gap: 3px; font-size: calc(11px * var(--qs)); }
.qz-diff i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff22; }
.qz-diff em { font-style: normal; opacity: .7; margin-left: 4px; }
.qz-d0 i:nth-child(1), .qz-d1 i:nth-child(-n+2), .qz-d2 i { background: #ffd166; box-shadow: 0 0 6px #ffd166; }
.qz-d2 i { background: #ff6b81; box-shadow: 0 0 6px #ff6b81; }
.qz-q { font-size: calc(23px * var(--qs)); line-height: 1.3; font-weight: 700; }
.qz-note { margin-top: 10px; font-size: calc(14px * var(--qs)); color: #ffb3c0; animation: qzEnter .3s; }
.qz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10px * var(--qs)); }
.qz-ans { display: flex; align-items: center; gap: 12px; min-height: calc(58px * var(--qs)); padding: calc(10px * var(--qs)) calc(14px * var(--qs)); border-radius: 16px; cursor: pointer; text-align: left;
  color: #ece8ff; font: 600 calc(16px * var(--qs)) 'Segoe UI', sans-serif; background: linear-gradient(180deg, #2a2056, #1d1540); border: 1px solid #ffffff1f; box-shadow: 0 4px 0 #0d0920, 0 8px 18px #0005;
  opacity: 0; animation: qzAns .4s var(--d, 0s) cubic-bezier(.25, 1.4, .5, 1) forwards; transition: background .2s, border-color .2s, transform .12s, opacity .3s; -webkit-tap-highlight-color: transparent; }
@keyframes qzAns { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
.qz-ans:not(:disabled):hover { border-color: #ffd166; background: linear-gradient(180deg, #3a2a78, #251a52); transform: translateY(-2px); }
.qz-ans:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #0d0920; }
.qz-ans:disabled { cursor: default; }
.qz-letter { flex: none; display: grid; place-items: center; width: calc(32px * var(--qs)); height: calc(32px * var(--qs)); border-radius: 10px; font-weight: 900; background: #ffffff14; color: #ffd166; }
.qz-txt { min-width: 0; overflow-wrap: anywhere; }
.qz-ans.good { background: linear-gradient(180deg, #1f8f6e, #136b52); border-color: #3ee6b0; box-shadow: 0 0 26px #3ee6b088, 0 4px 0 #0b3d2f; animation: qzGood .5s; opacity: 1; }
.qz-ans.good .qz-letter { background: #3ee6b0; color: #0d2a22; }
.qz-ans.bad { background: linear-gradient(180deg, #8f1f3a, #6b1329); border-color: #ff4d6d; opacity: 1; animation: qzShake .4s; }
.qz-ans.bad .qz-letter { background: #ff4d6d; color: #fff; }
.qz-ans.dim { opacity: .35; animation: none; }
.qz-ans.gone { opacity: 0 !important; transform: scale(.9); pointer-events: none; animation: none; }
@keyframes qzGood { 40% { transform: scale(1.05); } }

.qz-jokers { display: flex; justify-content: center; gap: calc(10px * var(--qs)); flex: none; }
.qz-jokers:empty { display: none; }
.qz-joker { display: flex; align-items: center; gap: 6px; padding: calc(7px * var(--qs)) calc(14px * var(--qs)); border-radius: 30px; cursor: pointer; color: #ece8ff; font: 600 calc(13px * var(--qs)) 'Segoe UI', sans-serif;
  background: #9d6bff22; border: 1px solid #9d6bff88; transition: transform .12s, background .2s; }
.qz-joker:not(:disabled):hover { background: #9d6bff44; transform: translateY(-2px); }
.qz-joker:disabled { opacity: .3; cursor: default; }
.qz-joker-ic { font-size: 1.2em; }

.qz-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.qz-float { position: absolute; transform: translateX(-50%); font-weight: 900; font-size: calc(24px * var(--qs)); white-space: nowrap; text-shadow: 0 2px 8px #000; animation: qzFloat 1.3s ease-out forwards; }
.qz-float.plus { color: #3ee6b0; } .qz-float.minus { color: #ff4d6d; }
@keyframes qzFloat { from { opacity: 0; margin-top: 0; } 15% { opacity: 1; } to { opacity: 0; margin-top: -70px; } }
.qz-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; margin: -4px 0 0 -4px; animation: qzSpark .8s ease-out forwards; }
@keyframes qzSpark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.qz-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 40px; border-radius: 22px; white-space: nowrap;
  background: linear-gradient(135deg, #4dd6ffee, #9d6bffee); box-shadow: 0 0 60px #4dd6ff99; animation: qzBanner 1.9s ease-out forwards; }
.qz-banner small { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; }
.qz-banner b { font-size: 34px; font-weight: 900; }
.qz-banner span { font-size: 13px; }
@keyframes qzBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }

.qz-end .box { max-width: 440px; }
.qz-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qz-stats div { display: flex; flex-direction: column; padding: 10px; border-radius: 14px; background: #ffffff0d; }
.qz-stats b { font-size: 24px; color: #ffd166; }
.qz-stats small { font-size: 12px; opacity: .7; }
.qz-rec { opacity: .75; font-size: 14px; }
.qz-result { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.qz-result li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 12px; background: #ffffff0d; }
.qz-result li.win { background: #ffd16622; box-shadow: 0 0 20px #ffd16633; }
.qz-result b { color: #ffd166; }

.qz-wrap.is-narrow .qz-answers, .qz-answers.long { grid-template-columns: 1fr; }
.qz-wrap.is-wide .qz-main { flex-direction: row; align-items: stretch; }
.qz-wrap.is-wide .qz-card { flex: 1 1 45%; display: flex; flex-direction: column; justify-content: center; }
.qz-wrap.is-wide .qz-answers { flex: 1 1 55%; grid-template-columns: 1fr; align-content: center; }
.qz-wrap.is-wide.is-short .qz-main { gap: 8px; }
.qz-wrap.is-narrow .qz-hud > div { padding: 5px 8px; }
.qz-wrap.is-narrow .qz-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qz-wrap.is-narrow .qz-setup { padding: 16px 14px; }
.qz-wrap.is-narrow .qz-setup h3 { font-size: 26px; }
.qz-wrap.is-short .qz-setup { padding: 12px 18px; gap: 6px; }
.qz-wrap.is-short .qz-logo { display: none; }
.qz-wrap.is-short .qz-themes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qz-wrap.is-short .qz-theme { padding: 7px 8px; font-size: 12px; }
.qz-wrap.is-short .qz-theme-ic { font-size: 18px; }
.qz-banner.qz-say { white-space: normal; max-width: min(90%, 440px); text-align: center; padding: 16px 24px; }
.qz-banner.qz-say span { font-size: 15px; font-weight: 700; }
.qz-ans.picked { border-color: #ffd166; box-shadow: 0 0 22px #ffd16666, 0 4px 0 #6b4f12; opacity: 1; }
.qz-ans.picked .qz-letter { background: #ffd166; color: #2a1d00; }
.qz-ans { position: relative; }
.qz-who { position: absolute; right: 8px; top: -9px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 70%; pointer-events: none; }
.qz-who i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #1b1438; border: 1px solid #ffffff44; box-shadow: 0 2px 8px #0008; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: qzAns .3s both; }
.qz-pl.gone { opacity: .45; }
.qz-wait { color: #ffd166; animation: qzBlink 1s ease infinite; }

/* Parties en ligne : décompte central des 5 dernières secondes, avertissements, exclusion */
.afk-count { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 26px 16px; min-width: 230px; max-width: calc(100vw - 32px); border-radius: 22px; background: radial-gradient(circle at 50% 0%, #4a2d9cf0, #1b1338f2 70%); border: 1px solid #8f7bff88; box-shadow: 0 0 0 1px #0006, 0 18px 50px #000b, 0 0 40px #7b5cff55; color: #fff; text-align: center; pointer-events: none; animation: afkIn .25s ease-out; }
.afk-ring { --p: 1; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ffd166 calc(var(--p) * 360deg), #ffffff1a 0); box-shadow: 0 0 24px #ffd16655; }
.afk-ring b { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: #1b1338; font-size: 40px; font-weight: 900; color: #ffe29a; animation: afkBeat 1s ease-out; }
.afk-count strong { font-size: 18px; margin-top: 4px; }
.afk-count small { color: #cfc8f0; font-size: 13px; line-height: 1.35; }
.afk-count.last { border-color: #ff6b81aa; box-shadow: 0 18px 50px #000b, 0 0 46px #ff4d6d66; }
.afk-count.last .afk-ring { background: conic-gradient(#ff6b81 calc(var(--p) * 360deg), #ffffff1a 0); box-shadow: 0 0 28px #ff4d6d77; }
.afk-count.last .afk-ring b { color: #ff9aa8; }
.afk-toast { position: fixed; left: 50%; top: 74px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 3px; width: min(420px, calc(100vw - 24px)); padding: 12px 16px; border-radius: 16px; background: #2a1f55f5; border: 1px solid #ffb36b; box-shadow: 0 10px 30px #000a; color: #fff; text-align: center; pointer-events: none; animation: afkToast 4.6s ease forwards; }
.afk-toast b { color: #ffd08a; font-size: 16px; }
.afk-toast span { font-size: 14px; }
.afk-toast small { color: #ffb3bf; font-size: 12.5px; }
.afk-out .box h3 { color: #ffd08a; }
@keyframes afkIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes afkBeat { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes afkToast { 0% { opacity: 0; transform: translate(-50%, -12px); } 8%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
@media (max-height: 500px) { .afk-count { padding: 12px 20px; gap: 4px; } .afk-ring { width: 64px; height: 64px; } .afk-ring b { width: 52px; height: 52px; font-size: 30px; } .afk-toast { top: 52px; } }
@media (prefers-reduced-motion: reduce) { .afk-count, .afk-ring b, .afk-toast { animation: none; } }