/* Préférences personnelles : la palette change sur la page, les panneaux et le tapis. */
body { --felt-light:#245a44; --felt-dark:#123c2c; --surface:#172e24; --surface-raised:#263f30; --theme-bg:#0b1917; --theme-glow:#193a2d80; --theme-muted:#b6c8b3; --theme-edge:#7b9c7738; --card-back-fill:#183f37; --card-back-pattern:repeating-linear-gradient(45deg,#f0d38e27 0 1px,transparent 1px 5px); }
body[data-theme="midnight"] { --felt-light:#294c75; --felt-dark:#142945; --surface:#192b40; --surface-raised:#29425e; --theme-bg:#101824; --theme-glow:#2b497b70; --theme-muted:#bdcce2; --theme-edge:#7c9ac13c; --paper:#101824; --panel:#192b40; --muted:#aebed3; --green:#84b5e7; }
body[data-theme="wine"] { --felt-light:#713a4c; --felt-dark:#401e30; --surface:#3c2631; --surface-raised:#533341; --theme-bg:#21151c; --theme-glow:#783a5360; --theme-muted:#d6bdc9; --theme-edge:#b788a13b; --paper:#21151c; --panel:#3c2631; --muted:#c9b0c1; --green:#d4a1bd; }
body[data-theme="sunset"] { --felt-light:#d58a56; --felt-dark:#a94d4d; --surface:#7b4743; --surface-raised:#a6604e; --theme-bg:#563638; --theme-glow:#ee9b626e; --theme-muted:#ffe2c5; --theme-edge:#ffd2a44d; --paper:#563638; --panel:#7b4743; --muted:#f4cdbb; --green:#ffd08a; }
body[data-theme="violet"] { --felt-light:#8870c8; --felt-dark:#554393; --surface:#4d417c; --surface-raised:#6e5ca5; --theme-bg:#332d59; --theme-glow:#9e8be36e; --theme-muted:#e5ddff; --theme-edge:#d7caff4d; --paper:#332d59; --panel:#4d417c; --muted:#d7cff1; --green:#cbbcff; }
body, body.in-room { background:radial-gradient(ellipse at 25% 36%,var(--theme-glow),transparent 60%),var(--theme-bg); }
.table-felt, .appearance-preview { background:repeating-linear-gradient(25deg,#ffffff01 0 1px,#00000003 1px 3px),radial-gradient(ellipse at 44% 32%,var(--felt-light),var(--felt-dark) 77%); border-color:var(--surface-raised); }
.phase-banner, .phase-banner.your-turn, .seat, .entry-panel, .action-panel, .invite-panel, .lobby-teams, .game-dialog { background:linear-gradient(125deg,var(--surface-raised),var(--surface)); }
.seat.occupied .avatar { background:var(--surface-raised); }
.phase-help, .account-copy, .team-help, .invitation-link-label { color:var(--theme-muted); }
.game-dialog input:not([type="checkbox"]), .game-dialog select, .entry-panel input, .invitation-link { background:var(--theme-bg); color:var(--ink); border-color:var(--theme-edge); }
input[readonly]:not(.room-code):not(.invitation-link) { opacity:.7; }
body[data-card-back="diamond"] { --card-back-fill:#263c66; --card-back-pattern:repeating-conic-gradient(from 45deg,#d0b66d88 0% 25%,transparent 0% 50%); }
body[data-card-back="waves"] { --card-back-fill:#683c51; --card-back-pattern:repeating-radial-gradient(ellipse at 10% 50%,transparent 0 4px,#ead2a856 5px 6px,transparent 7px 11px); }
body[data-card-back="royal"] { --card-back-fill:#513a84; --card-back-pattern:repeating-linear-gradient(135deg,#f6df9d55 0 2px,transparent 2px 8px); }
body[data-card-back="confetti"] { --card-back-fill:#187e75; --card-back-pattern:radial-gradient(circle at 25% 25%,#ffe08f 0 2px,transparent 3px),radial-gradient(circle at 70% 65%,#ff9eaf 0 2px,transparent 3px); }
.mini-card, .flying-card, .preview-back { background-color:var(--card-back-fill); background-image:var(--card-back-pattern); }
body[data-card-back="diamond"] .mini-card, body[data-card-back="diamond"] .flying-card, body[data-card-back="diamond"] .preview-back { background-size:12px 18px; }
body.no-game-motion *, body.no-game-motion *::before, body.no-game-motion *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
body[data-card-size="large"] .hand-cards { height:178px; }
body[data-card-size="large"] .hand-cards > [role="listitem"] { height:166px; flex-basis:119px; margin-left:-25px; }
body[data-card-size="large"] .hand-cards.complete-hand > [role="listitem"] { flex-basis:119px; margin-left:-43px; }
body[data-card-size="large"] .hand-cards > [role="listitem"]:first-child { margin-left:0; }
.account-button { display:flex; align-items:center; gap:9px; min-height:37px; max-width:220px; padding:7px 12px; border:1px solid #dbc68c44; border-radius:24px; background:#ffffff06; color:#e8d7b1; font:600 11px "Segoe UI",sans-serif; }
#accountAvatar { font-size:19px; line-height:1; }
#accountButtonLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-dialog { width:min(740px,calc(100% - 28px)); padding:26px; }
.account-tabs { display:flex; gap:6px; margin:0 0 20px; }
.account-tabs button { flex:1; min-height:43px; padding:10px 5px; border:1px solid #d5eee344; border-radius:11px; background:#071f282d; color:#e8f3ef; font-size:13px; font-weight:700; }
.account-tabs button[aria-selected="true"] { border-color:#ffd76c; background:#ffdb7033; color:#ffe394; box-shadow:inset 0 0 0 1px #ffd76c44; }
.account-dialog fieldset { border:0; padding:0; margin:0; min-width:0; }
.account-dialog fieldset:disabled { opacity:.55; }
.account-dialog h3 { color:#fffdf4; margin:20px 0 8px; font-size:17px; }
.account-dialog .button { margin-top:15px; }
.account-copy { margin:7px 0 15px; color:#e1eee9; font-size:12px; line-height:1.7; }
.account-message { margin:0 0 18px; padding:10px 12px; border:1px solid #c7cda038; border-radius:9px; color:#d7e5c4; background:#ffffff05; font-size:12px; line-height:1.5; }
.account-message.is-error { color:var(--error); border-color:#eead8e55; }
.profile-identity { display:flex; align-items:center; gap:17px; margin:8px 0 18px; }
.profile-identity h3 { margin:0 0 5px; overflow-wrap:anywhere; }
.profile-identity .account-copy { margin:0; }
.profile-avatar { flex:0 0 60px; height:68px; display:grid; place-items:center; border:1px solid #d9c49777; border-radius:12px; font-size:40px; color:var(--gold); background:#ffffff06; }
.password-details { padding:15px 0; border-top:1px solid #ffffff20; }
.password-details summary { cursor:pointer; font-size:13px; color:var(--gold); }
.appearance-preview { display:flex; align-items:center; gap:13px; padding:23px 17px; border:5px solid var(--surface-raised); border-radius:35px; margin:15px 0 23px; min-height:126px; }
.appearance-preview strong { display:block; font-size:14px; color:#fff5de; }
.appearance-preview small { display:block; max-width:160px; font-size:11px; line-height:1.5; color:#eadccb; margin-top:6px; }
.preview-avatar { color:#ecd2a0; font-size:30px; }
.preview-back, .preview-face { width:49px; height:69px; flex:0 0 49px; border:3px solid #eee4cb; border-radius:5px; box-shadow:0 5px 12px #0004; transform:rotate(-8deg); }
.preview-face { color:#183333; background:#fffaf0; padding:3px; margin-left:-30px; transform:rotate(9deg); }
.preview-face b { font-size:14px; }.preview-face span { display:block; text-align:center; font-size:27px; }
.avatar-fieldset legend { font-size:12px; color:#f1f7f4; margin-bottom:8px; }
.avatar-choices { display:grid; grid-template-columns:repeat(8,1fr); gap:9px; margin-bottom:15px; }
.avatar-choices button { height:47px; border:1px solid #e5d8b533; border-radius:9px; font-size:28px; color:#e8d5ac; background:#ffffff04; }
.avatar-choices button[aria-pressed="true"] { border-color:var(--gold); background:#e4c48322; box-shadow:0 0 0 1px var(--gold); }
.preference-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.account-dialog label,.account-dialog legend,.account-dialog summary { color:#f1f7f4; }
.account-dialog select,.account-dialog input:not([type="checkbox"]) { color:#fffdf4!important; -webkit-text-fill-color:#fffdf4; background:#082d36c9!important; border-color:#d5eee34f!important; opacity:1; }
.account-dialog .button-secondary { color:#fffdf4; background:#ffffff12; border-color:#d5eee34f; }
.account-dialog .check-label { font-size:12px; margin:14px 0; }
.stats-section + .stats-section { border-top:1px solid #ffffff20; margin-top:25px; padding-top:4px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:15px 0; }
.stats-grid > div { padding:14px 11px; border:1px solid #d6cdae20; border-radius:10px; background:#ffffff04; }
.stats-grid dd { font-size:25px; margin:0 0 4px; color:var(--gold); font-weight:650; }
.stats-grid dt { font-size:10px; line-height:1.5; color:var(--theme-muted); }
.round-history { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:7px; }
.round-history li { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:9px 11px; border:1px solid #ffffff17; border-radius:9px; background:#ffffff05; font-size:11px; }
.round-history li span { color:var(--theme-muted); overflow-wrap:anywhere; }
.round-history li small { color:var(--muted); white-space:nowrap; }
.history-win { color:#a8e6b8; }.history-loss { color:#ffc4b2; }
.lobby-teams { padding:18px; border:1px solid var(--theme-edge); border-radius:14px; }
.lobby-teams .panel-eyebrow { font-size:9px; margin-bottom:13px; }
.lobby-team-names { display:grid; gap:12px; }
.lobby-team-names strong { display:block; font-size:11px; color:var(--gold); margin-bottom:3px; }
.lobby-team-names span { font-size:12px; line-height:1.6; color:var(--theme-muted); overflow-wrap:anywhere; }
#partnerForm { margin-top:18px; padding-top:13px; border-top:1px solid #ffffff15; }
#partnerForm label { font-size:11px; margin-bottom:7px; }
#partnerForm .button { min-height:39px; font-size:11px; }
#partnerMessage { font-size:11px; line-height:1.6; color:var(--error); }
.seat.occupied .avatar.has-symbol { font-size:24px; font-weight:400; }
@media (max-width:1100px) {
 body[data-card-size="large"] .hand-cards > [role="listitem"] { height:148px; flex-basis:105px; }
 body[data-card-size="large"] .hand-cards.complete-hand > [role="listitem"] { flex-basis:105px; margin-left:-53px; }
 body[data-card-size="large"] .hand-cards { height:161px; }
}
@media (max-width:680px) {
 .account-button { max-width:150px; padding:6px 10px; font-size:10px; gap:6px; }
 .account-dialog { padding:18px; max-height:92dvh; }
 .account-tabs button { font-size:11px; }
 .profile-avatar { flex-basis:45px; height:54px; font-size:31px; }
 .profile-identity { gap:12px; }.profile-identity h3 { font-size:16px; }
 .avatar-choices { grid-template-columns:repeat(4,1fr); }
 .preference-grid { gap:0 12px; }.preference-grid label { font-size:11px; }.preference-grid select { font-size:11px; padding:10px 7px; }
 .appearance-preview { gap:10px; padding:18px 12px; }.appearance-preview strong { font-size:12px; }.appearance-preview small { font-size:10px; }
 .avatar-choices { gap:7px; }.avatar-choices button { height:42px; font-size:24px; }
 .stats-grid { gap:7px; }.stats-grid > div { padding:11px 8px; }.stats-grid dd { font-size:22px; }.stats-grid dt { font-size:9px; }
 .round-history li { grid-template-columns:1fr auto; }.round-history li span { grid-column:1 / -1; grid-row:2; }
 body[data-card-size="large"] .hand-cards { height:128px; }
 body[data-card-size="large"] .hand-cards > [role="listitem"] { height:115px; flex-basis:82px; margin-left:-24px; }
 body[data-card-size="large"] .hand-cards.complete-hand > [role="listitem"], body[data-card-size="large"] .room:has(#playPanel:not([hidden])) .hand-cards.complete-hand > .hand-slot { height:115px; flex-basis:82px; margin-left:-45px; }
 body[data-card-size="large"] .hand-cards > [role="listitem"]:first-child, body[data-card-size="large"] .room:has(#playPanel:not([hidden])) .hand-cards.complete-hand > .hand-slot:first-child { margin-left:0; }
 .seat.occupied .avatar.has-symbol { font-size:20px; }
}
@media (max-width:360px) {
 .account-button { max-width:127px; }.account-dialog { padding:15px; }
 .preference-grid { grid-template-columns:1fr; }.appearance-preview { gap:8px; }.preview-avatar { font-size:24px; }
 body[data-card-size="large"] .hand-cards > [role="listitem"] { height:105px; flex-basis:75px; margin-left:-26px; }
 body[data-card-size="large"] .hand-cards.complete-hand > [role="listitem"], body[data-card-size="large"] .room:has(#playPanel:not([hidden])) .hand-cards.complete-hand > .hand-slot { height:105px; flex-basis:75px; margin-left:-44px; }
}
.account-dialog > .dialog-heading { position:sticky; top:-26px; z-index:5; margin:-26px -26px 14px; padding:20px 26px 15px; background:var(--surface); border-bottom:1px solid #ffffff16; }
@media (max-width:680px) { .account-dialog > .dialog-heading { top:-18px; margin:-18px -18px 14px; padding:17px 18px 13px; } }
@media (max-width:360px) { .account-dialog > .dialog-heading { top:-15px; margin:-15px -15px 14px; padding:15px 15px 12px; } }
.score-board { background:var(--surface); border-color:var(--theme-edge); }
.table-controls .button-secondary { background:var(--surface); border-color:var(--theme-edge); }