/* Échecs Live – GamersLive */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0b1e; color: #f4f1ff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; display: flex; gap: var(--gap, 12px); padding: var(--pad, 10px); align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 30% 20%, #221a4a 0%, #0d0b1e 60%); --bs: 320px; --u: calc(var(--bs) / 8); }
#app.landscape { flex-direction: row; }
#app.portrait { flex-direction: column; }

#table { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; width: var(--bs); }
.pbar { display: flex; align-items: center; gap: 8px; height: var(--bar, 40px); padding: 0 8px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: clamp(13px, calc(var(--bs) / 28), 17px); }
.pbar.turn { background: rgba(124,92,255,.22); box-shadow: inset 0 0 0 2px #7c5cff; }
.pname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.pname .dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .35em; vertical-align: -.05em; border: 1px solid #888; }
.pname .off { color: #ff8fb1; font-weight: 400; font-size: .85em; }
.caps { flex: 1; display: flex; align-items: center; min-width: 0; overflow: hidden; }
.caps i { display: inline-block; width: 1.25em; height: 1.25em; margin-right: -.35em; background-size: contain; background-repeat: no-repeat; }
.caps b { margin-left: .6em; font-size: .85em; color: #a99fd6; }
.clock { font-family: ui-monospace, "Courier New", monospace; font-weight: 800; font-size: 1.15em; padding: 2px 8px; border-radius: 6px; background: #1a1433; min-width: 4.2em; text-align: center; }
.clock.run { background: #f4f1ff; color: #0d0b1e; }
.clock.low { background: #ff3d7f; color: #fff; }
.clock.none { display: none; }

#board-wrap { position: relative; width: var(--bs); height: var(--bs); }
#board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 6px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 0 3px #2a2152; touch-action: none; }
.sq { position: relative; background: #b9a8e8; }
.sq.dark { background: #6a55b8; }
.sq.last { background: #e8d97a; }
.sq.dark.last { background: #c2a83c; }
.sq.sel { background: #7ee0c8 !important; }
.sq.check { background: radial-gradient(circle, #ff3d7f 0%, #ff3d7f 35%, transparent 75%) , #b9a8e8; }
.sq.dark.check { background: radial-gradient(circle, #ff3d7f 0%, #ff3d7f 35%, transparent 75%), #6a55b8; }
.sq .pc { position: absolute; inset: 4%; background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; }
.sq .pc.drag { opacity: .3; }
.sq.hint::after { content: ""; position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: rgba(13,11,30,.35); pointer-events: none; }
.sq.hint.cap::after { left: 4%; top: 4%; width: 92%; height: 92%; background: transparent; border: calc(var(--u) * .09) solid rgba(13,11,30,.4); box-sizing: border-box; }
.sq .co { position: absolute; font-size: calc(var(--u) * .2); font-weight: 700; opacity: .75; pointer-events: none; }
.sq .co.f { right: 4%; bottom: 2%; } .sq .co.r { left: 4%; top: 2%; }
.sq.dark .co { color: #e5ddff; } .sq:not(.dark) .co { color: #4b3b8f; }
#ghost { position: fixed; width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15); background-size: contain; background-repeat: no-repeat; pointer-events: none; z-index: 50; transform: translate(-50%, -55%); filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }

#promo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2%; background: rgba(13,11,30,.7); z-index: 5; border-radius: 6px; }
#promo button { width: 22%; aspect-ratio: 1; border-radius: 12px; border: 3px solid #7c5cff; background: #b9a8e8 center/80% no-repeat; }
#promo button:hover { background-color: #e8d97a; }

#side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#app.landscape #side { width: var(--side, 280px); height: calc(var(--bs) + 2 * var(--bar, 40px) + 12px); }
#app.portrait #side { width: var(--bs); flex: 1 1 auto; min-height: 0; }
#status { min-height: 1.6em; font-weight: 700; color: #ffd23f; font-size: clamp(13px, calc(var(--bs) / 26), 18px); }
#moves { flex: 1 1 auto; margin: 0; padding: 6px 8px; list-style: none; overflow: auto; background: rgba(255,255,255,.04); border-radius: 8px; font-family: ui-monospace, "Courier New", monospace; font-size: 14px; min-height: 0; counter-reset: mv; }
#moves li { display: grid; grid-template-columns: 2.6em 1fr 1fr; padding: 2px 0; }
#moves li::before { counter-increment: mv; content: counter(mv) "."; color: #a99fd6; }
#moves li span.cur { background: #7c5cff; border-radius: 4px; padding: 0 3px; }
#app.portrait #moves { flex: 0 0 auto; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; gap: 10px; height: 2.4em; align-items: center; }
#app.portrait #moves li { display: inline-flex; gap: 6px; }
#actions { display: flex; flex-wrap: wrap; gap: 6px; }
.act { flex: 1 1 auto; padding: 8px 10px; border-radius: 8px; border: 0; background: #241c4d; font-weight: 600; font-size: 14px; }
.act:hover { background: #33296b; }
.act:disabled { opacity: .35; cursor: default; }

#topbtns { position: fixed; top: 8px; right: 8px; z-index: 30; }
.icon { width: 40px; height: 40px; border-radius: 8px; border: 2px solid #7c5cff; background: rgba(13,11,30,.8); font-size: 18px; }
#app.portrait #topbtns { top: auto; bottom: 8px; }

.screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(8,6,20,.78); backdrop-filter: blur(3px); padding: 16px; }
.card { width: min(420px, 100%); max-height: 100%; overflow: auto; text-align: center; background: #15112e; border: 2px solid #2f2566; border-radius: 16px; padding: 22px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
h1 { margin: 0 0 4px; font-size: 42px; letter-spacing: 1px; }
h1 span { color: #2ee6ff; }
h2 { margin: 0 0 12px; font-size: 26px; }
.tagline { color: #cfc6ff; margin: 0 0 16px; }
.btn { display: block; width: 100%; margin: 8px 0; padding: 13px 16px; border-radius: 10px; border: 0; font-weight: 800; font-size: 18px; background: #2a2152; }
.btn.primary { background: #ffd23f; color: #1a1033; box-shadow: 0 4px 0 #b98700; }
.btn.cyan { background: #2ee6ff; color: #0d0b1e; box-shadow: 0 4px 0 #0b8ca3; }
.btn.ghost { background: transparent; border: 2px solid #7c5cff; }
.btn.link { background: transparent; color: #a99fd6; font-weight: 600; font-size: 15px; }
.btn.small { width: auto; margin: 0; padding: 10px 14px; font-size: 15px; background: #7c5cff; }
.lbl { margin: 12px 0 6px; color: #a99fd6; font-size: 14px; text-align: left; }
.seg { display: flex; gap: 4px; background: #0d0b1e; padding: 4px; border-radius: 10px; }
.seg button { flex: 1; padding: 9px 4px; border: 0; border-radius: 7px; background: transparent; font-weight: 700; font-size: 14px; color: #cfc6ff; }
.seg button.on { background: #7c5cff; color: #fff; }
.row { display: flex; gap: 6px; }
input { width: 100%; padding: 11px 12px; border-radius: 9px; border: 2px solid #2f2566; background: #0d0b1e; color: #fff; font-size: 16px; }
#room-code { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-weight: 800; }
.code { font-family: ui-monospace, monospace; font-size: 36px; font-weight: 900; letter-spacing: 6px; color: #2ee6ff; margin: 8px 0; }
.stats { color: #a99fd6; font-size: 13px; margin: 12px 0 0; }
.score { color: #ffd23f; font-weight: 800; }
.notice { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(255,61,127,.16); border: 2px solid #ff3d7f; color: #ffd0df; font-size: 14px; }
.spinner { width: 44px; height: 44px; margin: 10px auto; border-radius: 50%; border: 5px solid #2f2566; border-top-color: #2ee6ff; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 40; background: #15112e; border: 2px solid #7c5cff; border-radius: 10px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 92vw; }
#toast button { padding: 6px 10px; border-radius: 7px; border: 0; background: #7c5cff; font-weight: 700; }
#toast button.no { background: #3a2f63; }

#pseudo.locked { opacity: .75; cursor: default; }
#pseudo-lock { color: #3ee6c4; font-weight: 600; }