* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07070f; color: #eef; font-family: 'Segoe UI', system-ui, sans-serif; overflow: hidden; user-select: none; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #12122a 0%, #07070f 70%); }
canvas#game { display: block; background: #0b0b18; box-shadow: 0 0 80px rgba(80, 120, 255, .15); cursor: crosshair; image-rendering: auto; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; background: rgba(5, 5, 15, .78); backdrop-filter: blur(6px); z-index: 10; animation: fade .25s ease; }
.overlay[hidden] { display: none !important; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

h1.title { font-size: clamp(42px, 9vw, 96px); margin: 0; letter-spacing: 6px; font-weight: 900; line-height: .95;
  background: linear-gradient(90deg, #ff7a3d, #ffd23d 40%, #3dd6ff 70%, #c86bff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 140, 60, .45)); animation: hue 8s linear infinite; }
@keyframes hue { to { filter: drop-shadow(0 0 24px rgba(80, 200, 255, .5)) hue-rotate(360deg); } }
.sub { opacity: .8; margin-top: -8px; font-size: 18px; letter-spacing: 2px; }

.panel { background: rgba(20, 20, 40, .85); border: 1px solid rgba(140, 160, 255, .25); border-radius: 16px; padding: 24px 28px; min-width: 340px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.row { display: flex; gap: 10px; align-items: center; }
input[type=text] { flex: 1; background: #0d0d1e; border: 1px solid #3a3a6a; border-radius: 10px; padding: 12px 14px; color: #fff; font-size: 16px; outline: none; text-transform: none; }
input[type=text]:focus { border-color: #7c9cff; box-shadow: 0 0 0 3px rgba(124, 156, 255, .2); }
input.code { text-transform: uppercase; letter-spacing: 4px; font-weight: 700; width: 120px; flex: none; text-align: center; }
button { background: linear-gradient(180deg, #5b6cff, #3b47d6); border: 0; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; letter-spacing: .5px; transition: transform .08s, filter .15s; box-shadow: 0 6px 20px rgba(80, 100, 255, .3); }
button:hover { transform: translateY(-1px); filter: brightness(1.15); }
button:active { transform: translateY(1px) scale(.98); }
button.big { font-size: 20px; padding: 16px 22px; background: linear-gradient(180deg, #ff8a3d, #e0552b); box-shadow: 0 6px 24px rgba(255, 120, 60, .35); }
button.ghost { background: transparent; border: 1px solid #4a4a7a; box-shadow: none; }
button:disabled { opacity: .5; cursor: default; transform: none; }
.help { font-size: 13px; opacity: .7; line-height: 1.6; }
.help kbd { background: #222244; border: 1px solid #444477; border-radius: 5px; padding: 1px 7px; font-family: inherit; font-size: 12px; }
.err { color: #ff6b6b; min-height: 18px; font-size: 14px; }

.code-big { font-size: 56px; font-weight: 900; letter-spacing: 12px; color: #ffd23d; text-shadow: 0 0 30px rgba(255, 210, 60, .5); }
.link { font-family: monospace; font-size: 14px; background: #0d0d1e; padding: 10px 12px; border-radius: 8px; border: 1px solid #333366; word-break: break-all; }
.dots::after { content: ''; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { to { content: '...'; } }

/* ── Sélection de cartes ── */
#cards .heading { font-size: 34px; font-weight: 900; letter-spacing: 3px; text-shadow: 0 0 20px rgba(255,255,255,.3); }
#cards .timer { font-size: 15px; opacity: .75; }
.hand { display: flex; gap: 22px; perspective: 1200px; }
.card { width: 230px; min-height: 320px; border-radius: 18px; padding: 20px 18px; background: linear-gradient(160deg, #1a1a36, #0e0e22); border: 2px solid var(--c, #8fd3ff);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 20px 50px rgba(0,0,0,.6), 0 0 32px color-mix(in srgb, var(--c) 35%, transparent);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; cursor: pointer; position: relative; overflow: hidden;
  transform-style: preserve-3d; animation: dealIn .55s cubic-bezier(.2,.9,.3,1.2) both; transition: transform .18s, box-shadow .18s; }
.card:nth-child(2) { animation-delay: .1s; } .card:nth-child(3) { animation-delay: .2s; }
@keyframes dealIn { from { opacity: 0; transform: translateY(80px) rotateY(60deg) scale(.7); } to { opacity: 1; transform: none; } }
.card:hover { transform: translateY(-14px) scale(1.06) rotateX(4deg); box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 0 60px color-mix(in srgb, var(--c) 70%, transparent); z-index: 2; }
.card::before { content: ''; position: absolute; inset: -60% -20%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); transform: translateX(-100%); transition: transform .6s; pointer-events: none; }
.card:hover::before { transform: translateX(60%); }
.card .icon { font-size: 64px; line-height: 1; margin-top: 8px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.card .name { font-size: 20px; font-weight: 800; color: var(--c); letter-spacing: 1px; }
.card .rar { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; opacity: .8; color: var(--c); }
.card .desc { font-size: 14px; line-height: 1.45; opacity: .9; }
.card.legendary { animation: dealIn .55s cubic-bezier(.2,.9,.3,1.2) both, glowpulse 1.6s ease-in-out infinite alternate; }
@keyframes glowpulse { from { box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 24px rgba(255,194,74,.4); } to { box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 70px rgba(255,194,74,.85); } }
.hand.readonly .card { cursor: default; opacity: .75; filter: saturate(.6); }
.hand.readonly .card:hover { transform: none; }
.hand.readonly .card::before { display: none; }

/* ── HUD cartes (bas) ── */
#mycards, #theircards { position: fixed; bottom: 10px; display: flex; gap: 4px; flex-wrap: wrap; max-width: 40vw; z-index: 5; pointer-events: auto; }
#mycards { left: 12px; } #theircards { right: 12px; justify-content: flex-end; }
.chip { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; background: rgba(20,20,45,.85); border: 1px solid var(--c, #666); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); cursor: help; animation: pop .3s ease; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
#mycards[hidden], #theircards[hidden] { display: none; }

/* ── Fin de partie ── */
.winner { font-size: 52px; font-weight: 900; letter-spacing: 3px; }
.score { font-size: 32px; font-weight: 800; opacity: .9; }
.recap { display: flex; gap: 40px; }
.recap .col { display: flex; flex-direction: column; gap: 6px; align-items: center; max-width: 320px; }
.recap .list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

#toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(255, 80, 80, .9); padding: 10px 18px; border-radius: 10px; font-weight: 700; z-index: 20; display: none; }
.small { font-size: 13px; opacity: .6; }

.seg { display: flex; gap: 4px; }
.seg button { padding: 7px 12px; font-size: 14px; border-radius: 8px; background: #1a1a36; box-shadow: none; border: 1px solid #3a3a6a; }
.seg button.on { background: linear-gradient(180deg, #ff8a3d, #e0552b); border-color: transparent; }
.seg button:disabled { opacity: .6; }
.winrow[hidden] { display: none; }
.chip.temp { border-style: dashed; opacity: .85; }
.recap.live { max-width: 90vw; }
.recap.live .col { max-width: 420px; align-items: stretch; }
.recap.live .cline { display: flex; gap: 10px; align-items: center; background: rgba(20,20,45,.85); border-left: 3px solid var(--c); border-radius: 8px; padding: 6px 10px; font-size: 13px; text-align: left; }
.recap.live .cline .ic { font-size: 20px; }
.recap.live .cline b { color: var(--c); }
.recap.live .cline.temp { border-left-style: dashed; opacity: .8; }
.otherwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.otherwrap[hidden] { display: none; }
.seg input.num { width: 64px; background: #0d0d1e; border: 1px solid #3a3a6a; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 700; padding: 6px 8px; text-align: center; outline: none; }
.seg input.num.on { border-color: #ff8a3d; box-shadow: 0 0 0 2px rgba(255,138,61,.35); }
.seg input.num:focus { border-color: #7c9cff; }