/* Interface des comptes et salons : ardoise, émeraude et cuivre. */
:root{--panel:#152423;--panel-raised:#203532;--panel-border:#397568;--panel-text:#eef4f1;--panel-muted:#b0c4bd;--copper:#c77b4a}
body #modal{box-sizing:border-box;width:min(760px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:32px;border:1px solid var(--panel-border);border-radius:18px;background:linear-gradient(145deg,#203330,#111d20);color:var(--panel-text);box-shadow:0 24px 80px #0009;font:15px/1.55 system-ui;overflow:auto;overscroll-behavior:contain}
body #modal::before,body #modal::after{display:none}body #modal::backdrop{background:#071310c9;backdrop-filter:blur(7px)}
body #modal h2{font:650 clamp(23px,4vw,30px)/1.2 system-ui;color:var(--panel-text);border:0;padding:0;margin:0 0 24px}body #modal h3{color:var(--panel-text);font:600 18px/1.4 system-ui;margin:24px 0 12px}body #modal p{overflow-wrap:anywhere}body #modal label{display:block;color:var(--panel-muted);font-weight:550}
body #modal button{min-height:44px;padding:10px 16px;background:var(--panel-raised);color:var(--panel-text);border:1px solid var(--panel-border);border-radius:9px;font:600 14px/1.4 system-ui;box-shadow:none;text-shadow:none;white-space:normal;cursor:pointer}body #modal button:hover{background:#2b4840;border-color:#78ad99}body #modal button:disabled{opacity:.5;cursor:default}body #modal :is(button,input,select,a):focus-visible{outline:3px solid var(--copper);outline-offset:3px}
body #modal :is(input:not([type=checkbox]),select){box-sizing:border-box;display:block;width:100%;min-height:46px;margin-top:8px;padding:10px 12px;border:1px solid #4b6f65;border-radius:8px;background:#0d1b1c;color:var(--panel-text);font:16px/1.4 system-ui;color-scheme:dark}
body #modal :is(#account-form,#friend-form){display:grid;gap:18px;margin:20px 0}body #modal:has(#account-form){width:min(480px,calc(100vw - 32px))}body #modal #account-form button[type=submit],body #modal :is(#online-quick,#secret-send,#end-again){background:var(--copper);border-color:var(--copper);color:#101c1b}body #modal:has(#account-form)>button{display:block;width:100%;margin-top:10px}body #modal #account-forgot{background:none;border-color:transparent;color:#a8d2c2;text-decoration:underline}
#account-error:empty{display:none}body #modal #account-error{color:#f4b4a5;background:#73392e35;border-left:3px solid #bc705b;padding:10px 14px;margin:12px 0}
body #modal .profile-heading{display:flex;align-items:center;gap:18px;background:#203732;padding:20px;border:1px solid var(--panel-border);border-radius:12px;margin-bottom:20px;overflow-wrap:anywhere}body #modal .profile-avatar{background:#24483d;color:#d3eee0;border-color:#669380;flex:none}body #modal .menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body #modal .menu-list button{text-align:left}body #modal :is(#profile-logout,#menu-resign){color:#f0b4a5;border-color:#815449}body #modal :is(#account-close,#account-back,#online-back,#notes-close,#end-menu){margin-top:20px}
body #modal .verify-notice{background:#c77b4a15;border:1px solid #986143;border-radius:10px;padding:14px 16px;margin:16px 0}body #modal .verify-notice p{margin:0 0 12px;color:#e6c2ae}
body #modal .friend-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px;background:#203330;border:1px solid #365b50;border-radius:10px;margin:10px 0}body #modal .friend-row>span:not(.profile-avatar){flex:1 1 140px;overflow-wrap:anywhere}body #modal .friend-row small{color:var(--panel-muted)}body #modal .friend-row :is([data-block],[data-remove],[data-refuse-play],[data-refuse-friend]){background:transparent;color:#dfb3a4;border-color:#73554d}body #modal #friend-form{grid-template-columns:minmax(0,1fr) auto;align-items:end;background:#10201e;padding:16px;border-radius:10px}
body #modal .match-list{list-style:none;padding:0;display:grid;gap:12px}body #modal .match-list li{padding:18px;border:1px solid #385e53;border-radius:10px;background:#1c302b;color:var(--panel-muted);line-height:1.7}body #modal .match-list strong{color:var(--panel-text)}body #modal .avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}body #modal .avatar-grid button{padding:8px;min-width:0}
body #modal #chat-messages{height:clamp(120px,28dvh,260px);overflow:auto;border:1px solid #385e53;border-radius:12px;background:#0f201e;padding:14px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px}body #modal p.chat-message{max-width:85%;align-self:flex-start;background:#294038;border-radius:12px 12px 12px 3px;padding:10px 14px;margin:0;line-height:1.5;color:var(--panel-text)}body #modal p.chat-message.mine{align-self:flex-end;background:#355847;border-radius:12px 12px 3px 12px}body #modal .chat-message strong{color:#c8dbd0;font-size:12px}
body #modal #chat-phrases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}body #modal #chat-phrases fieldset{min-width:0;margin:0;border:1px solid #385e53;padding:12px;border-radius:10px;display:flex;flex-direction:column;gap:8px}body #modal #chat-phrases legend{color:#dba17e;padding:0 8px;font-weight:650}body #modal [data-phrase]{text-align:left;font-weight:450}
body #modal #favorite-note{color:var(--panel-muted);padding:12px 16px;border-left:3px solid var(--copper);background:#203330}body #modal .collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}body #modal .collection-item{border:1px solid #365c50;border-radius:12px;overflow:hidden;background:#182c26}body #modal .collection-item>button[data-collection]{border:0;border-radius:0;background:transparent}body #modal .favorite-star{min-height:44px;padding:6px 16px;border:0;background:#20352d;color:#b5ccc0;font-size:25px}body #modal .favorite-star[aria-pressed=true]{color:var(--copper);background:#c77b4a15}body #modal .collection-grid button.active{outline:3px solid var(--copper);outline-offset:2px}
body #modal :is(.ai-level-setting,.stone-setting){display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,1fr);gap:12px;align-items:center;margin:16px 0}body #modal .ai-level-setting select{margin:0}body #modal:has(#online-time) .localized>label{margin-bottom:18px}body #modal #online-quick{width:100%}body #modal #online-modal-clocks{padding:12px;background:#0e201b;border:1px solid #426e5d;border-radius:10px;font-variant-numeric:tabular-nums;margin-bottom:18px}
body #modal .catalog-return{background:#233e34;color:#d5e7dd;border-color:#487561}body #modal .menu-eyebrow{color:#ca936f}body #modal .map-picker button[aria-pressed=true]{border-color:var(--copper);box-shadow:0 0 0 2px #c77b4a33;color:var(--panel-text)}body #modal .new-game #draft,body #modal .pause-menu #menu-continue{background:var(--copper);color:#14221d;border-color:var(--copper)}body #modal .pause-menu button:hover,body #modal .new-game button:hover{background:#355648;border-color:#6f9b83;color:var(--panel-text)}body #modal .team-fields input{color:var(--panel-text)}
body main header #notification-bell{position:absolute;right:90px;top:20px;min-width:48px;height:48px;padding:8px 12px;background:#152d25;color:#eff6f1;border:1px solid #47725e;border-radius:9px}body main header #notification-bell.has-notes{border-color:var(--copper);box-shadow:0 0 0 3px #c77b4a25}
body .online-clock{box-sizing:border-box;min-width:155px;border:1px solid #487c63;border-radius:9px;background:#122920ee;padding:9px 14px;color:#b5cbbd;font:600 18px/1.3 system-ui;font-variant-numeric:tabular-nums;opacity:1;white-space:nowrap}body .online-clock.running{background:#254e39;border-color:#87b698;color:#f2fff6;text-shadow:none}body .online-clock.low{border-color:#dd816b;color:#ffc0ad}body #clock-top{position:absolute;top:88px;left:31px;z-index:12;max-width:360px;overflow:hidden;text-overflow:ellipsis}body #clock-bottom{flex:none;max-width:240px;overflow:hidden;text-overflow:ellipsis}body .online-clock[hidden]{display:none}
@media(max-width:600px){body #modal{max-width:calc(100vw - 20px);width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:22px 18px;border-radius:14px}body #modal:has(#account-form){width:calc(100vw - 20px)}body #modal .team-fields,body #modal .menu-list,body #modal .pause-menu .menu-list,body #modal #chat-phrases{grid-template-columns:1fr}body #modal .new-game-actions{flex-direction:column}body #modal .new-game-actions button{width:100%}body #modal .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}body #modal .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body #modal .friend-row>span:not(.profile-avatar){flex-basis:calc(100% - 70px)}body #modal .friend-row button{flex:1 1 auto}body #modal #friend-form{grid-template-columns:1fr}body #modal .map-picker{gap:10px}body #modal .map-picker span{padding:8px;font-size:13px}body #modal :is(.ai-level-setting,.stone-setting){grid-template-columns:1fr}body #modal .catalog-card-heading{gap:12px}body #modal #chat-messages{height:24dvh}}
@media(prefers-reduced-motion:reduce){body #modal *{scroll-behavior:auto}}
/* Neutralise les anciens ornements dorés des fenêtres les plus spécifiques. */
body #modal:has(.new-game),body #modal:has(.pause-menu),body #modal:has(.fusion-scene){border-color:var(--panel-border);background:linear-gradient(145deg,#203330,#111d20);color:var(--panel-text)}body #modal .map-picker legend,body #modal .new-game h2,body #modal .pause-menu h2{color:var(--panel-text)}body #modal .menu-eyebrow{color:#d29a79}body #modal label{margin:0;padding:0}body #modal .inspiration-origin,body #modal .inspiration-sheet a{color:#a9d2bd}body #modal .fusion-caption h2,body #modal .fusion-destiny{color:var(--panel-text)}body #modal #fusion-continue{background:var(--copper);color:#14221d;border-color:var(--copper)}body #modal .avatar-grid .profile-avatar{color:#d8eee2;background:#264a3b;border-color:#4f816a}body #modal .avatar-grid .profile-avatar:before{color:inherit}
@media(max-width:600px){body #modal:has(.new-game),body #modal:has(.pause-menu){padding:22px 18px;max-width:calc(100vw - 20px);width:calc(100vw - 20px)}}
.board-frame .files{grid-template-columns:repeat(9,minmax(0,1fr))}
/* Nom (et temps en ligne) à gauche de chaque case de victoire, au-delà de l'ornement carré qui la borde
   (environ 55 px) et sans atteindre les coins du cadre : largeur limitée, texte coupé par « … ». */
body #board .goal-cell .goal-player-name{left:auto;right:calc(100% + 84px);top:50%;transform:translateY(-50%);width:auto;max-width:230px;padding:5px 14px;text-align:right;font:600 19px/1.3 system-ui;background:#0d1a16d9;border:1px solid #47725e;border-radius:9px;text-shadow:none;font-variant-numeric:tabular-nums}
body #board .goal-cell.edge-far .goal-player-name{color:#ffd2c2;border-color:#a3584a}
body #board .goal-cell.edge-near .goal-player-name{color:#cfeaff;border-color:#4a7fa6}
body #board .goal-cell .goal-player-name.running{background:#254e39;border-color:#87b698;color:#f2fff6}
body #board .goal-cell .goal-player-name.low{color:#ffc0ad;border-color:#dd816b}
/* Un long pseudo est coupé par « … », le temps reste toujours visible. */
body #board .goal-cell .goal-player-name{display:flex;justify-content:flex-end}body #board .goal-cell .goal-player-name .gp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body #board .goal-cell .goal-player-name .gp-time{flex:none;white-space:pre}