* { 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%, #2a1c52 0%, #120d26 55%, #0a0716 100%) fixed;
  overflow: auto;
  user-select: none;
}
[hidden] { display: none !important; }
.btn {
  background: linear-gradient(180deg, #6a4cff, #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 #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 #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: #9d6bff99; }
.category-button.is-active { color: #160f2c; border-color: #c4fff3; background: linear-gradient(110deg, #c4fff3, #9d6bff); box-shadow: 0 3px 14px #9d6bff44; }
#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: ''; height: 1px; flex: 1; background: linear-gradient(90deg, #ffffff35, transparent); }
.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; }
.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-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%); }
.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; }
@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; }

/* Mines */
.mines-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.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: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -8px 24px; border-radius: 14px; }
  .category-nav-label { position: sticky; left: 0; flex: none; padding: 6px 4px; background: #100b22; }
  .category-button { flex: none; }
  .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%, #3a2a78, #1d1540 70%); border: 1px solid #9d6bff80; box-shadow: 0 20px 70px #000a, 0 0 50px #9d6bff30; }
.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 { display: flex; flex-direction: column; gap: 14px; }
.sol .bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sol-board { display: grid; grid-template-columns: repeat(7, 92px); gap: 14px; grid-auto-rows: auto; }
.pile { position: relative; height: 122px; }
.tab { height: 520px; }
.slot { position: absolute; inset: 0 auto auto 0; width: 92px; height: 122px; border: 2px dashed #ffffff30; border-radius: 10px; }
.card {
  position: absolute; left: 0; width: 92px; height: 122px; border-radius: 10px; 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: 4px solid #e8e0ff;
}
.card .r { position: absolute; top: 4px; left: 8px; font-size: 20px; }
.card .su { position: absolute; bottom: 2px; right: 8px; font-size: 40px; 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 { 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; }
.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: 176px; 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 { position: absolute; left: 50%; top: 50%; z-index: 4; display: flex; align-items: center; gap: 14px; transform: translate(-50%, -50%) scale(.8); max-width: 440px; padding: 10px 26px 10px 10px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, color-mix(in srgb, var(--c, #8b6dff) 38%, #0b0820), #0b0820ee 75%); border: 1.5px solid color-mix(in srgb, var(--c, #8b6dff) 80%, #fff 10%); box-shadow: 0 12px 40px #000b, 0 0 34px color-mix(in srgb, var(--c, #8b6dff) 55%, transparent), inset 0 1px 0 #ffffff40; backdrop-filter: blur(8px); opacity: 0; pointer-events: none; }
.hp-msg .mi { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; color: var(--c); 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; box-shadow: 0 0 18px color-mix(in srgb, var(--c, #8b6dff) 70%, transparent); text-shadow: 0 0 8px #000a; }
.hp-msg .mt { font: 800 18px 'Segoe UI', sans-serif; line-height: 1.25; letter-spacing: .01em; text-shadow: 0 2px 6px #0009; }
.hp-msg.show { animation: msgin .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes msgin { 0% { opacity: 0; transform: translate(-50%, -38%) scale(.8); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.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; }
.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-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; }
.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: #9d6bff; box-shadow: 0 0 0 3px #9d6bff33; }
.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; }
.online-server { display: grid; gap: 6px; }
.online-server .inp { width: 100%; }
.online-note { font-size: 13px; color: #ffffffb0; min-height: 1em; }
.online-code { width: 110px; text-transform: uppercase; text-align: center; letter-spacing: 2px; }
.lobby-code { font-size: 22px; font-weight: 700; letter-spacing: 3px; }
.lobby-status, .lobby-players { color: #ece8ff; }
.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; }