/*
  SKUARE — interface Windows 95.
  Toutes les cotes sont celles de Windows 95 à l'échelle 1:1 (police bitmap MS Sans Serif 8 pt = 11 px,
  barre de titre 18 px, boutons 23 px, relief à deux pixels). La fenêtre est ensuite agrandie par un
  facteur entier (--z, calculé dans app.js) afin de conserver des pixels nets.
  Polices : MS Sans Serif reconstruite par 98.css (MIT, assets/LICENSE-98css.txt), VT323 (OFL) pour l'affichage.
*/
@font-face{font-family:'MS Sans Serif Pixel';src:url('assets/ms_sans_serif.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'MS Sans Serif Pixel';src:url('assets/ms_sans_serif_bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:VT323;src:url('assets/vt323.ttf') format('truetype');font-display:block}

:root{
  --face:#c0c0c0;--hi:#fff;--light:#dfdfdf;--shadow:#808080;--dark:#000;
  --navy:#000080;--teal:#008080;--yellow:#F4CE36;--cell:#454545;--cyan:#00cece;
  --text:#000;--gray-text:#808080;--link:#0000ff;
  --z:2;
  /* Reliefs authentiques de Windows 95 */
  --raised:inset -1px -1px var(--dark),inset 1px 1px var(--hi),inset -2px -2px var(--shadow),inset 2px 2px var(--light);
  --pressed:inset -1px -1px var(--hi),inset 1px 1px var(--dark),inset -2px -2px var(--light),inset 2px 2px var(--shadow);
  --field:inset -1px -1px var(--hi),inset 1px 1px var(--shadow),inset -2px -2px var(--light),inset 2px 2px var(--dark);
  --window:inset -1px -1px var(--dark),inset 1px 1px var(--light),inset -2px -2px var(--shadow),inset 2px 2px var(--hi);
  --status:inset -1px -1px var(--hi),inset 1px 1px var(--shadow);
  --ui:11px/13px 'MS Sans Serif Pixel','MS Sans Serif',Tahoma,sans-serif;
  --display:'VT323',monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;background:var(--teal);overflow:hidden}
body{font:var(--ui);color:var(--text);-webkit-font-smoothing:none;font-smooth:never;text-rendering:optimizeSpeed;-webkit-user-select:none;user-select:none}
input,select,textarea{-webkit-user-select:text;user-select:text}
p,h1,h2,h3,h4,fieldset,legend{margin:0;padding:0}
img{image-rendering:pixelated}

/* ---------- Fenêtre ---------- */
.application-shell{display:flex;align-items:center;justify-content:center;width:100%;height:100dvh;padding:12px}
.app-window{zoom:var(--z);display:flex;flex-direction:column;flex-shrink:0;max-width:100%;max-height:100%;background:var(--face);box-shadow:var(--window);padding:4px;width:300px}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:4px;height:18px;flex-shrink:0;padding:0 2px 0 3px;background:var(--navy);color:#fff;font-weight:700;white-space:nowrap}
.title-text{display:flex;align-items:center;gap:4px;min-width:0}
#app-title{overflow:hidden;text-overflow:ellipsis}
.title-icon{width:12px;height:12px;flex-shrink:0;background:var(--yellow);border:1px solid #000}
.controls{display:flex;gap:0;flex-shrink:0}
.controls button{width:16px;height:14px;min-width:16px;min-height:14px;padding:0;background:var(--face) no-repeat;box-shadow:var(--raised);image-rendering:pixelated}
.controls button:active{box-shadow:var(--pressed)}
.controls [data-window=minimize]{background-image:url('assets/caption-minimize.svg');background-position:4px 9px}
.controls [data-window=maximize]{background-image:url('assets/caption-maximize.svg');background-position:3px 2px}
.controls [data-window=maximize][aria-pressed=true]{background-image:url('assets/caption-restore.svg')}
.controls [data-window=close]{margin-left:2px;background-image:url('assets/caption-close.svg');background-position:4px 3px}
.workspace{display:block;min-height:0;overflow:auto;scrollbar-color:var(--face) var(--light)}
.screen{display:block;width:100%}
.app-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:2px 0;margin-top:2px;border-bottom:1px solid var(--shadow);box-shadow:0 1px var(--hi)}
.app-toolbar button{min-width:0;min-height:21px;padding:0 8px}
.app-window.collapsed{width:200px}
.app-window.collapsed>.workspace,.app-window.collapsed>.app-toolbar{display:none}
.app-window.maximized{position:fixed!important;inset:12px;width:calc((100vw - 24px) / var(--z));height:calc((100dvh - 24px) / var(--z));max-width:none;max-height:none;margin:auto}
.app-window.maximized .workspace{flex:1;display:flex;align-items:center;justify-content:center}
.app-window.maximized .screen{max-width:340px;margin:auto}

/* Largeur de chaque écran (cotes 1:1) */
.app-window[data-screen=menu]{width:244px}
.app-window[data-screen=game]{width:340px}
.app-window[data-screen=ranking]{width:300px}
.app-window[data-screen=matchmaking]{width:260px}
.app-window[data-screen=profile]{width:344px}
.app-window[data-screen=private]{width:304px}
.app-window[data-screen=settings]{width:336px}
.app-window[data-screen=history]{width:300px}
.app-window[data-screen=victory],.app-window[data-screen=defeat]{width:312px}
.app-window[data-screen=discord],.app-window[data-screen=social]{width:272px}
.app-window[data-screen=besttimes]{width:272px}
.app-window[data-screen=login],.app-window[data-screen=verify]{width:292px}
.app-window[data-screen=register]{width:316px}
.app-window.maximized[data-screen]{width:calc((100vw - 24px) / var(--z))}

/* ---------- Boutons ---------- */
button{font:inherit;color:var(--text);min-width:75px;min-height:23px;padding:0 10px;border:0;border-radius:0;background:var(--face);box-shadow:var(--raised);cursor:default;text-align:center}
button:active:not(:disabled){box-shadow:var(--pressed);padding:1px 9px 0 11px}
button:focus-visible{outline:1px dotted var(--text);outline-offset:-4px}
button:disabled{color:var(--gray-text);text-shadow:1px 1px var(--hi)}
button.primary{outline:1px solid var(--dark);outline-offset:0;margin:1px}
button.primary:focus-visible{outline:1px solid var(--dark);outline-offset:0}
button.primary:focus-visible::after{content:'';position:absolute}
.ico{display:inline-block;flex-shrink:0;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-play{--ico:url('assets/icons/play.svg')}.ico-people{--ico:url('assets/icons/people.svg')}.ico-person{--ico:url('assets/icons/person.svg')}
.ico-gear{--ico:url('assets/icons/gear.svg')}.ico-target{--ico:url('assets/icons/target.svg')}.ico-power{--ico:url('assets/icons/power.svg')}

/* ---------- Champs ---------- */
input:not([type=checkbox]),select{font:inherit;color:var(--text);height:21px;min-width:0;padding:3px 4px;border:0;border-radius:0;background:#fff;box-shadow:var(--field);outline:0}
input:focus-visible,select:focus-visible{outline:0}
input[readonly]{background:var(--face)}
select{appearance:none;-webkit-appearance:none;padding-right:20px;background:#fff url('assets/icons/select-arrow.svg') right 2px top 2px/16px 16px no-repeat}
select:disabled{color:var(--gray-text);background-color:var(--face)}
input[type=checkbox]{appearance:none;-webkit-appearance:none;flex-shrink:0;width:13px;height:13px;margin:0;vertical-align:middle;border:0;background:#fff;box-shadow:var(--field)}
input[type=checkbox]:checked{background:#fff url('assets/icons/check.svg') 3px 3px/7px 7px no-repeat}
input[type=checkbox]:focus-visible{outline:1px dotted var(--text);outline-offset:2px}
label{display:block}
label.check,.remember{display:flex;align-items:center;gap:6px}
fieldset{border:1px solid var(--shadow);box-shadow:1px 1px var(--hi),inset 1px 1px var(--hi);padding:8px 10px 10px;margin:0 0 12px;min-width:0}
legend{padding:0 3px;margin-left:5px}
fieldset>label+label{margin-top:8px}
fieldset>label:not(.check){display:flex;align-items:center;justify-content:space-between;gap:8px}
fieldset>label:not(.check) select{width:150px;flex-shrink:0}
fieldset>label:not(.check){white-space:nowrap}
.small-note{margin-top:6px;color:#454545}
a,.link{color:var(--link)}

/* ---------- Onglets et panneaux ---------- */
.tabs{display:flex;padding-left:2px;position:relative;z-index:1;margin-bottom:-2px}
.tabs button{min-width:0;min-height:0;height:21px;margin:2px 1px 0 0;padding:3px 8px 2px;border:1px solid;border-color:var(--hi) var(--shadow) transparent var(--hi);border-bottom:0;box-shadow:1px 0 var(--dark);background:var(--face)}
.tabs button:active:not(:disabled){padding:3px 8px 2px;box-shadow:1px 0 var(--dark)}
.tabs button[aria-selected=true],.tabs button[aria-pressed=true]{height:25px;margin:0 -2px 0 -2px;padding:5px 10px 2px;position:relative;z-index:2;box-shadow:1px 0 var(--dark)}
.tabs button:focus-visible{outline-offset:-5px}
.tab-panel{background:var(--face);box-shadow:var(--raised);padding:12px;position:relative;z-index:0}
.settings-content{min-height:200px}

/* ---------- Tableaux ---------- */
.table-frame{background:#fff;box-shadow:var(--field);padding:2px;overflow:auto;scrollbar-color:var(--face) var(--light)}
table{width:100%;border-collapse:collapse;text-align:left}
th{background:var(--face);box-shadow:var(--raised);font-weight:400;padding:2px 6px;height:18px;position:sticky;top:0}
td{padding:2px 6px;height:18px;background:#fff;color:var(--text)}
tbody tr:nth-child(even) td{background:#f4f4f4}
.ranking tr.own-row td{background:#f8e79a}
.ranking td:first-child,.ranking th:first-child{width:28px;text-align:center}
.ranking td:nth-child(3),.ranking th:nth-child(3){text-align:right}
.empty-row td{height:96px;text-align:center;color:#454545;line-height:15px}
.player-link{display:inline;min-width:0;min-height:0;padding:0;background:none;box-shadow:none;color:var(--text);text-align:left}
.player-link:hover,.player-link:focus-visible{text-decoration:underline;color:var(--navy)}
.player-link:active:not(:disabled){box-shadow:none;padding:0}
.player-link:focus-visible{outline:1px dotted var(--text);outline-offset:1px}
.match-history{max-height:178px}
.match-history td.win-cell,.match-history td.loss-cell{box-shadow:inset -1px -1px #fff8,inset 1px 1px #0003;text-align:center}
.match-history td.win-cell{background:#b9ebb9!important;color:#004d00}
.match-history td.loss-cell{background:#f3b9b9!important;color:#800000}
.match-history td.elo-gain{color:#006400}.match-history td.elo-loss{color:#a00000}
.match-history td:last-child,.match-history th:last-child{text-align:right}
.badge{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:6px;background:var(--yellow);border:1px solid #000}
.badge.bronze{background:#ac5c16}.badge.silver{background:#dcdcdc}.badge.turquoise{background:var(--cyan)}.badge.inactive{background:var(--cell)}
.avatar{display:block;flex-shrink:0;width:22px;height:22px;background:var(--yellow);border:1px solid #000}
.avatar.cyan{background:var(--cyan)}
.performance-table th{text-align:left;font-weight:400;position:static;box-shadow:none;background:#fff}
.performance-table thead th{background:var(--face);box-shadow:var(--raised);text-align:center}
.performance-table td{text-align:right}
.performance-result{margin:10px 0 4px}
.performance-note{margin:6px 0 8px;font-size:11px}
#performance-profile{margin:0 0 10px}
.result-body .performance-note{color:#006400}

/* ---------- Écrans ---------- */
.window-body{padding:8px 4px 4px}
.brand{display:flex;justify-content:center}
.official-logo{display:block;width:168px;height:auto}

/* Menu */
.menu-body{padding:18px 16px 16px}
.menu-buttons{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.menu-buttons button{display:flex;align-items:center;gap:10px;width:100%;height:30px;padding:0 12px;font-weight:700;text-align:left}
.menu-buttons button:active:not(:disabled){padding:1px 11px 0 13px}
.menu-buttons .primary{background:var(--yellow);margin:0;outline-offset:-1px;outline:1px solid var(--dark)}
.menu-buttons .primary:focus-visible{outline:1px solid var(--dark)}
#logout-button{padding-left:38px}

/* Partie */
.game-body{padding:6px 4px 4px}
.players{display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);gap:4px;align-items:stretch}
.player{display:flex;align-items:center;gap:5px;padding:4px;min-width:0;box-shadow:var(--status)}
.who{display:flex;flex-direction:column;min-width:0;flex:1}
.who b,.who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{color:#454545}
.count{display:grid;place-items:center;min-width:20px;height:24px;padding:0 3px;background:#000;color:#fff;font:400 22px/1 var(--display);box-shadow:var(--status)}
.clock{display:grid;place-items:center;background:#000;color:var(--yellow);font:400 28px/1 var(--display);box-shadow:var(--field);padding:2px 0 0}
.board-wrap{position:relative;width:196px;margin:8px auto 6px;padding:4px;background:var(--face);box-shadow:var(--field)}
.board{display:grid;grid-template-columns:repeat(var(--grid-size,4),1fr);gap:2px;aspect-ratio:1}
.board.concealed{visibility:hidden}
.board .cell{min-width:0;min-height:0;padding:0;border:1px solid #000;background:var(--cell);box-shadow:none;cursor:default}
.board .cell.lit{background:var(--yellow)}
.board .cell:active:not(:disabled){padding:0}
.board .cell:disabled{color:inherit}
.board .cell:focus-visible{outline:1px dotted #fff;outline-offset:-4px}
.board .cell.lit:focus-visible{outline-color:#000}
.countdown{position:absolute;inset:4px;background:var(--face);color:#000;font:400 72px/1 var(--display);pointer-events:none}
.countdown:not([hidden]){display:grid;place-items:center}
.game-message{height:18px;padding-top:2px!important;padding:3px 4px;margin-bottom:4px;text-align:center;box-shadow:var(--status);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-message:empty{visibility:hidden}
.progress{height:18px;padding:2px;background:var(--face);box-shadow:var(--status)}
.progress>i{display:block;height:100%;width:50%;background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,transparent 6px 8px);transition:width 90ms steps(2)}
.game-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.game-footer button{display:inline-flex;align-items:center;gap:5px;min-width:0;height:21px;padding:0 8px}
#start-game[data-action=abandon]::before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:url('assets/icons/flag.svg') center/contain no-repeat;mask:url('assets/icons/flag.svg') center/contain no-repeat}

/* Best Times, in the spirit of the classic Minesweeper dialog */
.records{width:100%}
.records td{background:none!important;padding:3px 4px;height:auto}
.records td:last-child{text-align:right;font-weight:700}
.dialog-buttons{display:flex;justify-content:center;gap:8px;margin-top:4px}
.dialog-buttons button{min-width:90px}
.panel-actions{margin-top:8px;text-align:right}
.panel-actions button{min-width:0;padding:0 10px}
.h2h-line{margin:6px 0 0;min-height:13px;color:#454545}
.h2h-line:empty{min-height:0;margin:0}

/* Matchmaking */
.match-body{padding:12px 12px 14px;text-align:center}
.match-body h3{font-size:11px;font-weight:700;margin-bottom:12px}
.match-body p{margin:6px 0}
.match-body button{margin-top:12px}
.computer{width:60px;margin:0 auto}
.monitor{height:44px;width:54px;margin:0 auto;padding:4px;background:var(--face);box-shadow:var(--raised)}
.monitor>span{display:block;position:relative;width:100%;height:100%;background:#000;box-shadow:var(--field)}
.monitor>span::after{content:'';position:absolute;left:6px;top:6px;width:10px;height:10px;background:var(--yellow);animation:blink 1s steps(1) infinite}
.stand{width:20px;height:4px;margin:0 auto;background:var(--face);box-shadow:var(--raised)}
.keyboard{height:8px;margin-top:2px;font-size:0;background:var(--face);box-shadow:var(--raised)}
@keyframes blink{50%{opacity:0}}

/* Profil */
.profile-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:56px}
.profile-head h2{font:400 24px/20px var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-head>div:not(.stats){min-width:0;flex:1}
.profile-head p{margin-top:2px}
.stats{width:48%;flex-shrink:0;box-shadow:var(--field);background:#fff;padding:2px}
.stats td{background:#fff!important;padding:1px 6px;height:16px;font-variant-numeric:tabular-nums}
.stats td:last-child{text-align:right}
#profile-note{margin:0 0 8px}
#profile-history{padding:6px}

/* Partie privée */
.private .window-body{padding:10px 8px 4px}
.code-row{display:flex;gap:6px;align-items:center}
.code-row input{flex:1;height:28px;font:400 24px/1 var(--display);text-align:center;letter-spacing:2px}
.code-row button{min-width:64px}
.private fieldset>label:not(.check) select{width:132px}
.private fieldset p{margin:8px 0 0}
.private .wide{display:block;margin:10px auto 0;min-width:120px}

/* Paramètres, compte */
.account-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.account-head b{display:block;margin-bottom:2px}
.account-head button{margin-left:auto;min-width:0}
.discord-account{display:flex;gap:10px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--shadow);box-shadow:0 -1px var(--hi) inset}
.discord-account p{margin:3px 0 6px}
.settings-content h3{font-size:11px;font-weight:700}
.settings-content p{line-height:15px}
.settings-content>form label{margin:6px 0}
.settings-content>form button{margin:8px 4px 0 0}
.discord-icon{display:inline-block;flex-shrink:0;width:24px;height:24px;font-size:0;background:#5865f2 url('assets/discord.svg') center/20px no-repeat;border:1px solid #000;image-rendering:pixelated}

/* Résultats */
.result-body{padding:14px 12px 12px;text-align:center}
.result h2{display:flex;align-items:center;justify-content:center;gap:8px;font:400 40px/36px var(--display)}
.result h2 .badge{width:24px;height:24px;margin:0}
.result p{margin:8px 0}
.result-score{display:flex;align-items:center;justify-content:space-evenly;gap:6px;margin:10px 0}
.result-score b{font:400 30px/1 var(--display)}
.result-actions{display:flex;gap:6px;justify-content:center;margin-top:10px}
.result-actions button{min-width:0;padding:0 8px;flex:1;white-space:nowrap}

/* Discord / X */
.discord-body{margin:6px;padding:8px;background:#fff;box-shadow:var(--field)}
.discord-heading{display:flex;align-items:center;gap:8px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--shadow)}
.discord-heading small{display:block;color:#454545}
.discord-member{display:flex;align-items:center;line-height:22px}
.discord-member .badge{margin-right:6px}
.discord-member span{margin-left:auto;color:#454545}
.discord-body>p{margin:8px 0}
.discord-body>button{display:block;margin:0 auto}
.link-body{padding:16px 14px 14px;text-align:center}
.link-body h2{font-size:11px;font-weight:700;margin:10px 0 6px}
.link-body p{margin-bottom:10px}
.x-icon{display:block;width:32px;height:32px;margin:0 auto;background:url('assets/x.svg') center/contain no-repeat}
.link-status{padding:8px;margin-bottom:10px;box-shadow:var(--status)}

/* Connexion / inscription */
.auth-screen{padding:12px 10px 10px}
.auth-screen .brand{margin:6px 0 14px}
.auth-screen .official-logo{width:176px}
.auth-fields{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 8px;align-items:center}
#register .auth-fields{grid-template-columns:128px minmax(0,1fr)}
.auth-fields input{width:100%}
.auth-panel .remember{justify-content:center;margin:10px 0 0}
.auth-submit,.auth-submit.primary{display:block;min-width:120px;height:23px;margin:12px auto 0}
.auth-divider{height:0;border-top:1px solid var(--shadow);border-bottom:1px solid var(--hi);margin:14px 0 12px}
.community-button{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;min-width:0;height:32px;margin:0 auto;padding:0 12px 0 4px;font-weight:700}
.community-button:active:not(:disabled){padding:1px 11px 0 5px}
.community-button .discord-icon{width:24px;height:24px}
.auth-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:5px;margin-top:10px}
.auth-links button{min-width:0;min-height:0;padding:0;background:none;box-shadow:none;color:var(--link);text-decoration:underline;font-weight:400}
.auth-links button:active:not(:disabled){box-shadow:none;padding:0}
.auth-links button:focus-visible{outline:1px dotted var(--link);outline-offset:1px}
.auth-error,.auth-note{margin:8px 0 0;line-height:14px}
.auth-error{color:#800000}
.auth-error.auth-information{color:#454545}
.verify-body{text-align:center;padding:6px 4px}
.verify-body h3{font-size:11px;font-weight:700;margin-bottom:8px}
.verify-body p{line-height:15px;margin-bottom:8px}
.verify-body button{display:block;margin:6px auto 0;min-width:140px}

/* Infobulle et compteur FPS */
#toast{position:fixed;zoom:var(--z);bottom:6px;left:50%;transform:translateX(-50%);max-width:calc(90vw / var(--z));padding:4px 6px;background:#ffffe1;border:1px solid #000;color:#000;z-index:600}
#fps-counter{position:fixed;zoom:var(--z);top:4px;right:6px;padding:1px 4px;background:#000;color:var(--yellow);font:400 16px/1 var(--display);z-index:700;pointer-events:none}

@media(max-width:420px){
  .application-shell{padding:6px}
  .players{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)}
  .clock{font-size:24px}
  .auth-fields,#register .auth-fields{grid-template-columns:1fr;gap:4px}
  .auth-fields input{margin-bottom:6px}
  .profile-head{flex-wrap:wrap}.stats{width:100%}
}
@media(prefers-reduced-motion:reduce){.monitor>span::after{animation:none}.progress>i{transition:none}}