:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --desk:#2F6F86; --chrome:#ECE9D8; --hi:#FFFFFF; --lo:#808080; --dk:#404040;
  --ink:#141414; --title-a:#0b6a7a; --title-b:#2aaabd; --accent:#F2C230;
  --felt:#1E7B3C; --felt-hi:#2A9449; --tb:40px;
  --n1:#1f3fd0; --n2:#157a15; --n3:#d41f1f; --n4:#1a1a80; --n5:#7a1515; --n6:#0f7a7a; --n7:#111; --n8:#666;
  --ui:Tahoma, Verdana, "Segoe UI", system-ui, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --px:"Pixelify Sans", Tahoma, Verdana, sans-serif;
  --lcd:"VT323", "Courier New", monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --desk:#173a47; --chrome:#3a3935; --hi:#6a6862; --lo:#1c1b19; --dk:#000;
    --ink:#ECEAE4; --title-a:#08515d; --title-b:#167f90; --felt:#175e2e; --felt-hi:#1f7a3b;
    --n1:#7aa6ff; --n2:#63d663; --n3:#ff6b6b; --n4:#b7a4ff; --n5:#ffa46b; --n6:#4fd6d6; --n7:#eee; --n8:#aaa;
  }
}
:root[data-theme="dark"]{
  --desk:#173a47; --chrome:#3a3935; --hi:#6a6862; --lo:#1c1b19; --dk:#000;
  --ink:#ECEAE4; --title-a:#08515d; --title-b:#167f90; --felt:#175e2e; --felt-hi:#1f7a3b;
  --n1:#7aa6ff; --n2:#63d663; --n3:#ff6b6b; --n4:#b7a4ff; --n5:#ffa46b; --n6:#4fd6d6; --n7:#eee; --n8:#aaa;
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:linear-gradient(var(--desk) 50%, var(--chrome) 50%)}
body{margin:0;height:100%;position:relative;overflow:hidden;background:var(--desk);color:var(--ink);font:13px/1.35 var(--ui);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1px dotted currentColor;outline-offset:-4px}

.raised{background:var(--chrome);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--lo)}
.sunken{border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.btn{color:var(--ink);background:var(--chrome);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--lo);padding:4px 14px;cursor:pointer}
.btn:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px var(--lo)}

/* Bureau */
#desktop{position:absolute;inset:0 0 var(--tb) 0;overflow:hidden;
  background-color:#3a7bd5}
#icons{display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:2px;height:100%;padding:12px 8px}
.icon{width:86px;padding:6px 2px 8px;background:none;border:0;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font:12px/1.2 var(--ui)}
.icon svg{width:40px;height:40px;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.35))}
.icon span{padding:1px 4px;text-shadow:1px 1px 1px rgba(0,0,0,.8)}
.icon:hover span,.icon:focus-visible span{background:var(--title-a);text-shadow:none;outline:1px dotted #fff}
.icon:focus-visible{outline:none}

/* Fenêtre */
.win{position:absolute;left:0;top:0;max-width:calc(100% - 16px);max-height:calc(100% - 16px);display:flex;flex-direction:column;padding:2px;z-index:calc(10 + var(--z, 0))}
.win.opening{animation:pop .14s ease-out}
@keyframes pop{from{opacity:.4;transform:scale(.95)}}
.titlebar{background:linear-gradient(90deg,var(--title-a),var(--title-b));color:#fff;font:600 14px/1 var(--px);display:flex;align-items:center;gap:6px;padding:3px 3px 3px 6px;min-height:26px;flex:none}
.titlebar svg{width:16px;height:16px;flex:none}
.titlebar .ttl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.tbtn{width:24px;height:21px;padding:0;display:grid;place-items:center;font:700 13px/1 var(--ui);background:var(--chrome);color:var(--ink);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);cursor:pointer}
.tbtn:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}
.menubar{display:flex;flex-wrap:nowrap;gap:1px;padding:2px;align-items:center;flex:none;overflow:hidden;white-space:nowrap}
.menubar button{white-space:nowrap;flex:none}
.menubar.tight button{padding:3px 5px}
.menubar.tight .sep{margin:2px 2px}
.menubar.tiny{font-size:11px}
.menubar.tiny button{padding:3px 4px}
.menubar select{font:inherit;color:inherit;background:var(--chrome);border:1px solid var(--lo);padding:3px 2px;max-width:46vw;flex:0 1 auto;min-width:0}
.menubar button{background:none;border:1px solid transparent;padding:3px 9px;cursor:pointer}
.menubar button:hover{border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.menubar button[aria-pressed="true"]{border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:rgba(0,0,0,.06)}
.menubar .rules-btn{font-weight:700;min-width:30px}
.menubar .sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--lo);box-shadow:1px 0 var(--hi)}
.winbody{flex:1;min-height:0;overflow:auto;position:relative;padding:4px}
.status{display:flex;gap:3px;padding:3px 0 0;flex:none;font-size:12px}
.status span{flex:1;padding:2px 6px;border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status span:last-child{flex:2}
@media (max-width:640px){
  .win{left:0;top:0;transform:none;width:100%;height:100%;max-width:none;max-height:none}
  .win.opening{animation:none}
  #icons{flex-direction:row;height:auto}
}

#balloon{position:absolute;right:10px;bottom:calc(var(--tb) + 12px);max-width:270px;background:#FFFFE1;color:#141414;border:1px solid #141414;border-radius:8px;padding:10px 30px 10px 12px;z-index:35;box-shadow:2px 3px 0 rgba(0,0,0,.25);font-size:12.5px}
#balloon strong{display:block;margin-bottom:3px}
#balloon::after{content:"";position:absolute;right:34px;bottom:-11px;border:11px solid transparent;border-bottom:0;border-top-color:#141414}
#balloon::before{content:"";position:absolute;right:35px;bottom:-9px;border:10px solid transparent;border-bottom:0;border-top-color:#FFFFE1;z-index:1}
#balloon button{position:absolute;top:5px;right:6px;width:18px;height:18px;border:1px solid #888;background:#fff;color:#141414;font:11px/1 var(--ui);padding:0;cursor:pointer}

/* Boîte de dialogue en jeu */
.dlg-wrap{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;background:rgba(0,0,0,.28);z-index:5;padding:12px}
.dlg{color:var(--ink);padding:2px;min-width:240px;max-width:320px;max-height:100%;display:flex;flex-direction:column}
.dlg-body{overflow:auto;min-height:0}
.dlg.rules{width:440px;max-width:100%}
.dlg.rules .dlg-text{text-align:left}
.dlg.rules .dlg-text p{margin:0 0 8px}
.dlg.rules .dlg-body .btn{display:block;margin:4px auto 0}
.dlg-body{padding:14px 16px 16px;text-align:center}
.dlg-body .dlg-text{margin:0 0 14px;line-height:1.45}

/* Démineur */
.ms{display:inline-flex;flex-direction:column;gap:6px;padding:6px;max-width:100%}
.ms-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px}
.lcd{background:#000;color:#ff2a1a;font:30px/1 var(--lcd);padding:1px 5px 0;min-width:54px;text-align:right;letter-spacing:1px;text-shadow:0 0 4px rgba(255,42,26,.5)}
.face{width:38px;height:38px;font-size:21px;line-height:1;padding:0;display:grid;place-items:center}
.ms-scroll{overflow:auto;max-width:100%}
.ms-grid{--cs:26px;display:grid;border:3px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);width:max-content;touch-action:manipulation}
.cell{width:var(--cs);height:var(--cs);padding:0;display:grid;place-items:center;font:700 15px/1 var(--ui);background:var(--chrome);border:3px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);cursor:pointer}
.cell.flag{font-size:13px}
.cell.open{border:0;border-right:1px solid var(--lo);border-bottom:1px solid var(--lo);cursor:default;font-size:15px}
.cell.boom{background:#e22}
.cell.wrong{font-size:12px}
.n1{color:var(--n1)}.n2{color:var(--n2)}.n3{color:var(--n3)}.n4{color:var(--n4)}.n5{color:var(--n5)}.n6{color:var(--n6)}.n7{color:var(--n7)}.n8{color:var(--n8)}
@media (max-width:640px){.ms-grid{--cs:30px}}
.ms-grid .cell{font-size:calc(var(--cs) * .56)}
.ms-grid .cell.flag,.ms-grid .cell.wrong{font-size:calc(var(--cs) * .46)}
.ms-grid .cell:not(.open){border-width:max(2px, calc(var(--cs) * .11))}

/* Solitaire */
.sol{--g:8px;width:min(660px, calc(100vw - 36px));min-height:470px;padding:12px;background:radial-gradient(ellipse at 50% 20%, var(--felt-hi), var(--felt) 70%);position:relative}
.sol-top,.sol-tab{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--g)}
.sol-tab{margin-top:calc(var(--g) * 2)}
.pile{position:relative;height:var(--ch);cursor:pointer}
.tcol{position:relative;cursor:pointer}
.slot{position:absolute;inset:0 0 auto 0;height:var(--ch);border:2px solid rgba(255,255,255,.28);border-radius:6px;display:grid;place-items:center;color:rgba(255,255,255,.4);font:600 calc(var(--cw) * .38)/1 var(--px)}
.card{position:absolute;left:0;width:100%;height:var(--ch);border-radius:6px;background:#fff;border:1px solid #1a1a1a;color:#141414;font:700 calc(var(--cw) * .27)/1 var(--ui);box-shadow:0 1px 1px rgba(0,0,0,.25)}
.card.red{color:#c8102e}
.card .ck{position:absolute;top:.16em;left:.22em;white-space:nowrap;letter-spacing:-.04em}
.card .ck.br{top:auto;left:auto;bottom:.16em;right:.22em;transform:rotate(180deg)}
.card .cs{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw) * .52);padding-top:.25em}
.sol.narrow .ck.br{display:none}
.card.back{background-color:#24489e;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 3px,transparent 3px 7px),repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0 3px,transparent 3px 7px);box-shadow:inset 0 0 0 3px #fff,0 1px 1px rgba(0,0,0,.25)}
.card.sel{box-shadow:0 0 0 3px var(--accent),0 2px 6px rgba(0,0,0,.4);z-index:2}
.sol{touch-action:manipulation}
.sol.c8 .card{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.card-ghost .card{box-shadow:0 8px 18px rgba(0,0,0,.45)}
.card-ghost{cursor:grabbing}
.sol.narrow .tcol .card:not(:last-child) .cs{visibility:hidden}

/* Snake */
.snake-wrap{display:flex;justify-content:center;padding:6px}
.phone{width:min(330px, calc(100vw - 32px));background:linear-gradient(160deg,#3a4d63,#243243);border-radius:30px 30px 46px 46px;padding:16px 16px 22px;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 3px 0 #141c26}
.speaker{width:54px;height:6px;margin:0 auto 12px;border-radius:3px;background:repeating-linear-gradient(90deg,#141c26 0 4px,transparent 4px 7px)}
.screen{background:#141c26;border-radius:12px;padding:10px}
.screen canvas{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:3px;touch-action:none}
.keypad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,46px);gap:6px;justify-content:center;margin-top:16px}
.k{border:0;border-radius:14px;background:linear-gradient(#eef2f5,#b7c2cc);color:#26344a;font-size:16px;box-shadow:0 3px 0 #141c26;cursor:pointer;touch-action:manipulation}
.k:active{transform:translateY(2px);box-shadow:0 1px 0 #141c26}
.k-up{grid-area:1/2}.k-left{grid-area:2/1}.k-ok{grid-area:2/2;border-radius:50%;background:linear-gradient(#ffe38a,#e0a92a)}.k-right{grid-area:2/3}.k-down{grid-area:3/2}

/* Casse-briques */
.br-wrap{display:flex;justify-content:center;padding:4px}
.br-wrap canvas{display:block;width:min(560px, calc(100vw - 32px));height:auto;touch-action:none;cursor:none;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}

/* Blocs */
.blocs{display:flex;gap:12px;justify-content:center;align-items:flex-start;padding:8px;flex-wrap:wrap}
.bl-c{display:block;height:min(56vh, 440px);width:auto;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);touch-action:none}
.bl-side{display:flex;flex-direction:column;gap:8px;min-width:110px}
.bl-box{padding:6px 8px}
.bl-lab{font-size:11.5px;margin-bottom:2px}
.bl-v{font:26px/1 var(--lcd);font-variant-numeric:tabular-nums}
.bl-n{display:block;width:72px;height:72px;background:#231a3a}
.bl-hold{cursor:pointer}
.bl-lab kbd{font:10px var(--ui);padding:0 3px;border:1px solid var(--lo);border-radius:2px;opacity:.7}
.pad .btn.bl-rot{font-size:22px;line-height:1}
.pad{display:flex;gap:6px;justify-content:center;padding:4px 8px 10px;flex-wrap:wrap}
.pad .btn{min-width:54px;height:44px;font-size:17px;touch-action:manipulation;padding:0 10px}

/* Pong */
.pong-wrap{display:flex;justify-content:center;padding:4px}
.pong-wrap canvas{display:block;width:min(560px, calc(100vw - 32px));height:auto;background:#000;touch-action:none;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}

/* Morpion */
.ttt{display:flex;justify-content:center;padding:8px}
.ttt-paper{width:min(380px, calc(100vw - 40px));padding:18px 18px 16px 54px;color:#1d3a9a;
  background-color:#fbfbf4;
  background-image:linear-gradient(90deg,transparent 38px,#e4546a 38px 40px,transparent 40px),linear-gradient(#9fb6e0 1px,transparent 1px),linear-gradient(#dde6f5 1px,transparent 1px);
  background-size:100% 100%,100% 32px,100% 8px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.ttt-head{display:flex;justify-content:space-between;gap:8px;font:600 14px/1.2 var(--px);margin-bottom:14px;flex-wrap:wrap}
.ttt-head [data-s="O"]{color:#c42a3a}
.ttt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));aspect-ratio:1}
.ttt-cell{position:relative;background:none;border:0;padding:0;cursor:pointer;min-width:0;min-height:0;overflow:hidden}
.ttt-cell:nth-child(3n+1),.ttt-cell:nth-child(3n+2){border-right:3px solid #1d3a9a}
.ttt-cell:nth-child(-n+6){border-bottom:3px solid #1d3a9a}
.ttt-cell svg{position:absolute;left:14%;top:14%;width:72%;height:72%;display:block;overflow:visible;pointer-events:none}
.ttt-cell .ink{fill:none;stroke-width:9;stroke-linecap:round}
.ttt-cell .x{stroke:#1d3a9a}.ttt-cell .o{stroke:#c42a3a}
.ttt-cell.new .ink{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .28s ease-out forwards}
.ttt-cell.new .x + .x{animation-delay:.2s}
@keyframes draw{to{stroke-dashoffset:0}}
.ttt-cell.ttt-win{background:rgba(255,226,0,.55)}
.ttt-paper .btn{color:#141414;background:#ECE9D8;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px #808080}
.ttt-paper .btn:active{border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px #808080}
.ttt-msg{margin:14px 0 10px;font:600 16px/1.3 var(--px);min-height:1.3em}

/* Dame de pique */
.hearts{--cw:60px;--ch:84px;position:relative;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". n ." "w t e" "bar bar bar" "hand hand hand";gap:6px 8px;width:min(660px, calc(100vw - 36px));min-height:470px;padding:12px;background:radial-gradient(ellipse at 50% 30%, var(--felt-hi), var(--felt) 70%);color:#fff}
.h-seat{font-size:12px;min-width:0;overflow:hidden}
.h-n{grid-area:n;text-align:center}.h-w{grid-area:w;align-self:center}.h-e{grid-area:e;align-self:center;text-align:right}
.h-name{font:600 15px/1.2 var(--px)}
.h-seat.turn .h-name{color:var(--accent)}
.h-pts{opacity:.85}
.h-minis{display:flex;margin-top:5px;padding-left:8px}
.h-n .h-minis{justify-content:center}.h-e .h-minis{justify-content:flex-end}
.h-minis{padding-left:12px;align-items:center}
.h-minis b{margin-left:6px;font:600 13px/1 var(--px);opacity:.9}
.h-minis i{width:16px;height:22px;margin-left:-11px;border-radius:3px;flex:none;border:1.5px solid #fff;background-color:#24489e;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 4px);box-shadow:1px 0 2px rgba(0,0,0,.45)}
.h-trick{grid-area:t;position:relative;width:calc(var(--cw) * 3.3);height:calc(var(--ch) * 2.5)}
.hearts .card{width:var(--cw)}
.h-trick .card{animation:fadein .15s ease-out}
@keyframes fadein{from{opacity:.2}}
.h-trick .pos0{left:50%;top:auto;bottom:0;transform:translateX(-50%)}
.h-trick .pos2{left:50%;top:0;transform:translateX(-50%)}
.h-trick .pos1{left:0;top:50%;transform:translateY(-50%)}
.h-trick .pos3{left:auto;right:0;top:50%;transform:translateY(-50%)}
.h-bar{grid-area:bar;display:flex;align-items:center;justify-content:center;gap:12px;min-height:36px;font-weight:700;text-align:center}
.h-bar .btn{color:var(--ink)}
.h-bar .btn:disabled{opacity:.55;cursor:default}
.h-hand{grid-area:hand;position:relative;height:calc(var(--ch) + 18px)}
.h-hand .card{top:14px;cursor:pointer;transition:top .12s}
.h-hand .card.up{top:0;box-shadow:0 0 0 3px var(--accent)}
.h-hand .card.new{box-shadow:0 0 0 2px #8fd8ff}
.h-hand .card.no{filter:brightness(.6);cursor:not-allowed}
.h-hand .card.ok:hover{top:6px}
.card .ck.v{white-space:normal;text-align:center;line-height:1.02}
.h-table{margin:10px auto 0;border-collapse:collapse;font-size:13px}
.h-table th,.h-table td{padding:2px 10px;text-align:right}
.h-table td:first-child{text-align:left}

/* Flipper */
.pin{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;background:#10141a}
.pin canvas{display:block;width:min(calc(min(62vh, 520px) * var(--r, 1.2)), calc(100vw - 40px));height:auto;touch-action:none;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
@media (prefers-reduced-motion: reduce){ .ttt-cell.new .ink{stroke-dashoffset:0 !important} }

/* ===== Bureau façon années 2000 ===== */
#wall{position:absolute;inset:0;width:100%;height:100%;display:block}
#icons{position:relative}
.icon span{text-shadow:1px 1px 2px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.5)}
.icon:hover span,.icon:focus-visible span{background:rgba(49,106,197,.85);text-shadow:none;outline:1px dotted #fff}

/* Barre des tâches */
#taskbar{position:absolute;left:0;right:0;bottom:0;height:var(--tb);display:flex;align-items:stretch;gap:6px;z-index:30;
  background:linear-gradient(#1a96aa 0%,#5cc8d8 6%,#16889b 14%,#127f92 55%,#0f7688 90%,#0b6a7a 100%);border-top:1px solid #085866;color:#fff}
#start{display:flex;align-items:center;gap:7px;padding:0 20px 0 9px;border:0;border-radius:0 14px 14px 0;cursor:pointer;
  background:linear-gradient(#ff9a80 0%,#f26a4a 10%,#e8553a 45%,#e0502f 60%,#ea5c3c 88%,#b8401f 100%);
  color:#fff;font:italic 700 19px/1 "Trebuchet MS", Tahoma, sans-serif;text-shadow:1px 1px 2px rgba(0,0,0,.55);
  box-shadow:inset -3px 0 4px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.35),2px 0 5px rgba(0,0,0,.35)}
#start:hover{filter:brightness(1.08)}
#start[aria-expanded="true"]{filter:brightness(.9);box-shadow:inset 2px 2px 5px rgba(0,0,0,.45)}
#start svg{width:22px;height:22px;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.4))}
#tasks{flex:1;min-width:0;display:flex;align-items:center;padding:3px 0}
#tasks button{display:flex;align-items:center;gap:6px;height:100%;max-width:200px;min-width:0;padding:0 10px;border-radius:3px;border:1px solid #085866;cursor:pointer;
  background:linear-gradient(#0e6e7f,#0c6474);box-shadow:inset 1px 1px 3px rgba(0,0,0,.45);color:#fff;font-weight:700;overflow:hidden;white-space:nowrap}
#tasks button span{overflow:hidden;text-overflow:ellipsis}
#tasks svg{width:16px;height:16px;flex:none}
#tray{display:flex;align-items:center;gap:4px;padding:0 12px 0 8px;border-left:1px solid #085866;
  background:linear-gradient(#117c8e,#168da0 8%,#0f7688 50%,#0b6a7a);box-shadow:inset 1px 0 rgba(255,255,255,.35)}
#sound{width:28px;height:28px;display:grid;place-items:center;border:0;background:none;cursor:pointer;font-size:15px;padding:0;border-radius:3px}
#sound:hover{background:rgba(255,255,255,.18)}
#clock{padding:0 2px 0 4px;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3)}

/* Menu Démarrer */
#startmenu{position:absolute;left:0;bottom:var(--tb);width:min(400px, 100vw);display:flex;flex-direction:column;z-index:40;
  background:#fff;border:1px solid #0f7a8c;border-bottom:0;border-radius:8px 8px 0 0;box-shadow:3px 0 10px rgba(0,0,0,.45);color:#141414;font:12px/1.3 var(--ui)}
.sm-head{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px 7px 0 0;
  background:linear-gradient(#16889b,#127f92 12%,#127f92 60%,#117c8e);color:#fff;font:700 16px "Trebuchet MS", Tahoma, sans-serif;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
.sm-avatar{width:46px;height:46px;border:2px solid #fff;border-radius:4px;overflow:hidden;box-shadow:1px 1px 3px rgba(0,0,0,.4);flex:none}
.sm-avatar svg{width:100%;height:100%;display:block}
.sm-cols{display:flex;border-top:2px solid #ff6f4f;min-height:300px}
.sm-left{flex:1.15;display:flex;flex-direction:column;padding:6px 4px;min-width:0}
.sm-right{flex:1;background:#e2f5f8;border-left:1px solid #a9dce5;padding:6px 4px;min-width:0}
.sm-grow{flex:1}
.sm-item{display:flex;align-items:center;gap:8px;width:100%;padding:4px 6px;border:0;background:none;text-align:left;cursor:pointer;border-radius:2px;color:inherit;font:inherit}
.sm-item svg{width:30px;height:30px;flex:none}
.sm-item .sm-t{display:block;min-width:0}
.sm-item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-item small{display:block;color:#6d6d6d;font-size:11px}
.sm-right .sm-item{font-weight:700;color:#0b5563;padding:5px 6px}
.sm-right .sm-item svg{width:24px;height:24px}
.sm-item:hover,.sm-item:focus-visible,.sm-item.open{background:#127f92;color:#fff;outline:none}
.sm-item:hover small,.sm-item:focus-visible small{color:#e2f5f8}
.sm-sep{height:1px;margin:5px 6px;background:linear-gradient(90deg,transparent,#b9b6a6,transparent);flex:none}
.sm-all{justify-content:center;font-weight:700;padding:6px}
.sm-left.all .sm-sep:first-of-type{display:none}
.sm-item.sm-compact{padding:3px 6px}
.sm-item.sm-compact svg{width:24px;height:24px}
.sm-go.back{background:linear-gradient(#ffa48c,#f45f3e)}
.sm-go{width:17px;height:17px;border-radius:50%;background:linear-gradient(#ffa48c,#f45f3e);color:#fff;display:grid;place-items:center;font-size:8px;box-shadow:inset 0 1px rgba(255,255,255,.5)}
.sm-foot{display:flex;justify-content:flex-end;gap:10px;padding:6px 8px;background:linear-gradient(#16889b,#127f92 12%,#117c8e 60%,#0f7688)}
.sm-foot button{display:flex;align-items:center;gap:6px;background:none;border:0;color:#fff;cursor:pointer;padding:3px 6px;border-radius:3px;font:12px var(--ui)}
.sm-foot button:hover,.sm-foot button:focus-visible{background:rgba(255,255,255,.18);outline:none}
.sm-foot svg{width:24px;height:24px}
.cascade{position:absolute;min-width:190px;background:#fff;border:1px solid #7cc4d0;box-shadow:3px 3px 6px rgba(0,0,0,.35);padding:2px;z-index:2}
#casc1{left:52%;bottom:44px}
.c-item{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px 4px 6px;background:none;border:0;text-align:left;cursor:pointer;color:#141414;font:12px var(--ui);white-space:nowrap}
.c-item svg{width:18px;height:18px;flex:none}
.c-item .ar{margin-left:auto;padding-left:18px;font-size:9px}
.c-item:hover,.c-item:focus-visible,.c-item.open{background:#127f92;color:#fff;outline:none}
#casc3,#casc4{left:calc(100% - 4px);min-width:150px}
.ck-l{width:14px;display:inline-block;text-align:center;font-weight:700}
.sm-ar{margin-left:auto;font-size:9px;padding-left:8px}
@media (max-width:640px){
  #casc3,#casc4{left:auto;right:4px}
  #casc1{left:30%;right:4px}
  #casc2{left:12% !important;right:4px}
  .sm-item small{display:none}
}

/* Fenêtres façon années 2000 */
.win{padding:0;border:3px solid #13889b;border-top:0;border-radius:8px 8px 0 0;box-shadow:2px 4px 14px rgba(0,0,0,.45)}
.win .titlebar,.dlg .titlebar{min-height:30px;padding:3px 4px 3px 8px;border-radius:6px 6px 0 0;
  background:linear-gradient(#5cc8d8 0%,#16889b 9%,#127f92 40%,#127f92 88%,#117c8e 95%,#0b6a7a 100%);
  font:700 13.5px/1 "Trebuchet MS", Tahoma, sans-serif;text-shadow:1px 1px 1px rgba(0,0,0,.5)}
.win .tbtn{width:23px;height:23px;border:1px solid #fff;border-radius:50%;background:linear-gradient(#7fd6e3,#2aaabd 45%,#14899d);color:#fff;font:700 13px/1 var(--ui);box-shadow:inset 0 0 2px rgba(0,0,0,.3)}
.win .tbtn:active{filter:brightness(.85);border-color:#fff}
.win .tclose{background:linear-gradient(#ffa48c,#ff6f4f 45%,#e0532f)}
.win .menubar{border-bottom:1px solid var(--lo)}
.win .status{padding:3px 3px 3px}
@media (max-width:640px){ .win{border-radius:0;border-width:0} .win .titlebar{border-radius:0} }

/* Records et aide */
.doc{width:min(520px, calc(100vw - 36px));background:#fff;color:#141414;padding:16px 20px;line-height:1.5}
.doc h2{font:700 15px "Trebuchet MS", Tahoma, sans-serif;color:#0b5563;margin:14px 0 4px}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 6px}
.rec-table{width:100%;border-collapse:collapse}
.doc.legal h3{font:700 13.5px "Trebuchet MS", Tahoma, sans-serif;margin:12px 0 2px}
.doc.legal a{color:#0b7d90}
.doc mark.todo{background:#ffe89a;color:inherit;padding:0 2px}
.sm-head{border:0;width:100%;text-align:left;cursor:pointer}
.sm-head:hover,.sm-head:focus-visible{filter:brightness(1.08);outline:none}
.win-msg{margin:0;padding:28px 24px;min-width:260px;text-align:center;color:var(--ink)}
.doc.account{max-width:440px}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:300px;height:44px;margin:10px auto 0;padding:0 16px;border-radius:6px;font:500 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer}
.auth-btn svg{width:18px;height:18px;flex:none}
.auth-btn:disabled{opacity:.6;cursor:default}
.auth-google{background:#fff;color:#1f1f1f;border:1px solid #747775}
.auth-google:hover:not(:disabled){background:#f2f2f2}
.auth-apple{background:#000;color:#fff;border:1px solid #000}
.auth-apple:hover:not(:disabled){background:#222}
.auth-apple svg{height:20px}
.acc-small{margin-top:14px !important;font-size:12px;color:#555}
.acc-small a,.acc-del{color:#0b7d90}
.acc-del{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;color:#b3261e}
.acc-err{color:#b3261e;font-weight:700}
.acc-form{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.acc-form input{font:16px var(--ui);padding:6px 8px;width:100%;max-width:260px;border:2px solid;border-color:#808080 #fff #fff #808080;background:#fff;color:#141414}
.acc-form small{color:#555}
.acc-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.acc-mail{word-break:break-all}
.legal-upd{margin-top:14px !important;color:#666;font-size:12px}
.rec-table td{padding:6px 4px;border-bottom:1px solid #e3e1d6}
.rec-table td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* Écran d'arrêt */
#off{position:fixed;inset:0;background:#000;display:grid;place-content:center;justify-items:center;gap:26px;z-index:100;padding:24px;text-align:center}
#off p{margin:0;max-width:22em;color:#f59a23;font:700 clamp(18px,3.2vw,28px)/1.4 Tahoma, Verdana, sans-serif}
#off.busy p{color:#fff;font-weight:400}
#off.busy .btn{visibility:hidden}


/* ===== Plein écran sur mobile ===== */
.pong-wrap,.br-wrap,.pin-fit,.bl-fit,.snake-wrap{touch-action:none;-webkit-user-select:none;user-select:none}
.pin-fit,.bl-fit{display:block}
@media (max-width:640px){
  .win{position:fixed;inset:0;left:0 !important;top:0 !important;transform:none;width:auto;height:auto;max-width:none;max-height:none;z-index:calc(60 + var(--z, 0));border:0;border-radius:0;padding:0 0 env(safe-area-inset-bottom,0px);box-shadow:none}
  .win.opening{animation:none}
  .win .titlebar{border-radius:0;padding-top:calc(3px + env(safe-area-inset-top,0px));min-height:calc(34px + env(safe-area-inset-top,0px))}
  .win .tbtn{width:30px;height:30px;font-size:15px}
  .win .menubar .sep{display:none}
  .win .menubar button{padding:6px 8px}
  .win .menubar.tight button{padding:6px 5px}
  .win .menubar.tiny button{padding:6px 4px}
  .win .status span:nth-child(n+3){display:none}
  .winbody{display:flex;flex-direction:column;padding:0;overflow:hidden;border:0}
  .winbody > *{flex:none}
  .sol{width:100%;flex:1;min-height:0;overflow:auto}
  .hearts{width:100%;flex:1;min-height:0;overflow:auto;grid-template-rows:auto 1fr auto auto}
  .h-trick{align-self:center}
  .ms{flex:1;width:100%;max-width:none;align-items:center;border:0;overflow:auto}
  .ms-head{width:100%}
  .ms-grid{--cs:clamp(22px, calc((100vw - 28px) / var(--cols, 9)), 46px)}
  .cell{font-size:calc(var(--cs) * .55)}
  .cell.flag,.cell.wrong{font-size:calc(var(--cs) * .48)}
  .ttt{flex:1;min-height:0;padding:0;overflow:auto}
  .ttt-paper{width:100%;min-height:100%;display:flex;flex-direction:column;padding:16px 14px 16px 50px;box-shadow:none}
  .ttt-grid{width:min(100%, 56vh);align-self:center}
  .ttt-again{align-self:flex-start}
  .snake-wrap{flex:1;min-height:0;padding:8px;background:var(--chrome)}
  .phone{width:100%;height:100%;display:flex;flex-direction:column;border-radius:26px 26px 38px 38px;padding:14px 14px 18px}
  .speaker{flex:none}
  .screen{flex:1;min-height:0;display:grid;place-items:center;container-type:size;padding:8px}
  .screen canvas{width:min(100cqw, calc(100cqh * 244 / 178));height:auto}
  .keypad{flex:none;grid-template-columns:repeat(3,76px);grid-template-rows:repeat(3,56px);gap:8px}
  .pong-wrap,.br-wrap{flex:1;min-height:0;padding:0;container-type:size;display:grid;place-items:center;background:#000}
  .br-wrap{background:#0a0f22}
  .pong-wrap canvas,.br-wrap canvas{width:min(100cqw, calc(100cqh * var(--r, 1.5)));height:auto;border:0}
  .pin{flex:1;min-height:0;padding:0;gap:0;background:#10141a}
  .pin-fit{flex:1;min-height:0;width:100%;container-type:size;display:grid;place-items:center}
  .pin canvas{height:auto;width:min(100cqw, calc(100cqh * var(--r, .56)));border:0}
  .pin .pad{width:100%;flex-wrap:nowrap;padding:8px;background:var(--chrome)}
  .pad .btn{flex:1;height:56px;min-width:0}
  .blocs{flex:1;min-height:0;flex-wrap:nowrap;padding:8px;gap:8px;align-items:stretch}
  .bl-fit{flex:1;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}
  .bl-c{height:auto;width:min(100cqw, calc(100cqh * 12 / 21))}
  .bl-side{min-width:0;width:86px;gap:6px}
  .bl-box{padding:4px 6px}
  .bl-v{font-size:22px}
  .bl-n{width:60px;height:60px}
  .bl-lab kbd{display:none}
  .blocs + .pad{flex-wrap:nowrap;padding:4px 8px 8px}
  .doc{width:100%;flex:1;min-height:0;overflow:auto}
}

/* Quatre en ligne */
.c4{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 12px;background:#e9edf5;color:#1a2a55}
.c4-head{display:flex;justify-content:space-between;gap:10px;width:100%;font:600 14px/1.2 var(--px);flex-wrap:wrap}
.c4-head [data-s="R"]{color:#c8262e}.c4-head [data-s="Y"]{color:#9a7300}
.c4-fit{width:min(440px, calc(100vw - 48px), calc((100vh - 290px) * 7 / 6))}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);aspect-ratio:7/6;gap:clamp(3px,1.4vmin,8px);padding:clamp(4px,1.6vmin,10px);box-sizing:border-box;background:linear-gradient(#2f6fe0,#1f4fb8);border-radius:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 4px 0 #173a8a;cursor:pointer;overflow:hidden;touch-action:manipulation}
.c4-cell{min-width:0;min-height:0;border-radius:50%;background:radial-gradient(circle at 50% 40%, #0d2a6a, #163e96);box-shadow:inset 0 3px 4px rgba(0,0,0,.5);position:relative}
.c4-disc{position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.35)}
.c4-disc.R{background:radial-gradient(circle at 40% 35%, #ff7a6b, #d42a2a 60%, #a3161b)}
.c4-disc.Y{background:radial-gradient(circle at 40% 35%, #fff09a, #f2c230 60%, #c9960c)}
.c4-disc.drop{animation:c4drop .35s cubic-bezier(.45,0,.7,1)}
@keyframes c4drop{from{transform:translateY(var(--dy))}}
.c4-cell.c4-won .c4-disc{inset:4%;box-shadow:inset 0 0 0 3px #fff,0 0 12px 3px rgba(255,255,255,.85);animation:c4win .8s ease-in-out infinite alternate}
@keyframes c4win{to{filter:brightness(1.25)}}
.c4-foot,.dm-foot{display:flex;align-items:center;justify-content:center;gap:12px;min-height:36px;flex-wrap:wrap}
.c4-msg,.dm-msg{margin:0;font:600 15px/1.3 var(--px);text-align:center}
.c4-msg[data-turn="R"]::before,.c4-msg[data-turn="Y"]::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:#d42a2a}
.c4-msg[data-turn="Y"]::before{background:#f2c230}
.c4 .btn,.sdk .btn,.dm .btn{color:#141414;background:#ECE9D8;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px #808080}
/* Sudoku */
.sdk{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px;background:#f7f5ee;color:#1a2233}
.sdk-fit{width:min(420px, calc(100vw - 48px), calc(100vh - 320px));aspect-ratio:1;container-type:size;display:grid;place-items:center}
.sdk-grid{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);box-sizing:border-box;width:min(100cqw, 100cqh);aspect-ratio:1;border:3px solid #1a2233;background:#9aa3b5;gap:1px}
.sdk-c{min-width:0;min-height:0;border:0;padding:0;background:#fff;color:#2f5fd0;font:600 calc(min(100cqw, 100cqh) / 9 * .56)/1 var(--ui);cursor:pointer}
.sdk-c.given{color:#1a2233;font-weight:800}
.sdk-c.br{border-right:2px solid #1a2233}.sdk-c.bb{border-bottom:2px solid #1a2233}
.sdk-c.peer{background:#eef3fb}.sdk-c.same{background:#d6e4ff}.sdk-c.sel{background:#ffe89a}
.sdk-c.bad{color:#d42a2a;background:#ffe0e0}
.sdk-c{position:relative}
.sdk-n{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}
.sdk-n i{font:600 calc(min(100cqw, 100cqh) / 9 * .24)/1 var(--ui);font-style:normal;color:#5a6a88;display:grid;place-items:center}
.sdk.noting .sdk-pad .btn{color:#2f5fd0;font-style:italic}
.sdk.noting .sdk-c.sel{background:#dfe9ff}
.sdk-pad{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:min(420px, calc(100vw - 48px))}
.sdk-pad .btn{padding:8px 0;font:700 18px/1 var(--ui);min-width:0}
/* Dames */
.dm{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;background:#3b2a1e;color:#f3e6cf}
.dm-fit{width:min(440px, calc(100vw - 48px), calc(100vh - 270px));aspect-ratio:1;container-type:size;display:grid;place-items:center}
.dm-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);box-sizing:border-box;width:min(100cqw, 100cqh);aspect-ratio:1;border:6px solid #5a3a22;border-radius:4px;box-shadow:0 3px 0 #22160d;touch-action:manipulation}
.dm-sq{min-width:0;min-height:0;position:relative;display:grid;place-items:center}
.dm-sq.lt{background:#f0d9b5}.dm-sq.dk{background:#a4704a;cursor:pointer}
.dm-sq.last{background:#b98a52}
.dm-sq.sel{box-shadow:inset 0 0 0 3px #ffd24a}
.dm-sq.can::after{content:"";position:absolute;inset:8%;border-radius:50%;box-shadow:0 0 0 3px #ffd24a;animation:dmpulse .8s infinite alternate}
@keyframes dmpulse{to{box-shadow:0 0 0 5px rgba(255,210,74,.35)}}
.dm-p{width:78%;aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center}
.dm-p.w{background:radial-gradient(circle at 40% 35%,#fff,#e8e0cf 60%,#b9ad96);box-shadow:0 3px 0 #8a7f6a,inset 0 0 0 3px rgba(0,0,0,.08)}
.dm-p.b{background:radial-gradient(circle at 40% 35%,#6a6a6a,#2a2a2a 60%,#111);box-shadow:0 3px 0 #000,inset 0 0 0 3px rgba(255,255,255,.08)}
.dm-p.dm-k::after{content:"♛";color:#c9960c;font-size:calc(min(100cqw, 100cqh) / 8 * .45);line-height:1}
.dm-dot{width:30%;height:30%;border-radius:50%;background:rgba(255,210,74,.85)}
.rec-table th{text-align:right;font-size:12px;color:#555;padding:6px 4px;font-weight:400}
.rec-table th:first-child{text-align:left}
.rec-table.stats td{text-align:right}.rec-table.stats td:first-child{text-align:left;font-weight:400}
@media (max-width:640px){
  .c4,.sdk,.dm{flex:1;min-height:0;width:100%;padding:8px}
  .c4-fit{flex:1;min-height:0;width:100%;container-type:size;display:grid;place-items:center}
  .c4-board{width:min(100cqw, calc(100cqh * 7 / 6))}
  .dm-fit{flex:1;min-height:0;width:100%;aspect-ratio:auto}
  .sdk{justify-content:center}
  .sdk-fit{flex:0 1 auto;width:100%;min-height:0;aspect-ratio:1;max-height:calc(100% - 64px)}
  .sdk-pad{width:100%}
}

@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} }

/* ===== Fenêtres multiples ===== */
.win .titlebar{cursor:default;touch-action:none}
.win.dragging{user-select:none}
.win.dragging .titlebar{cursor:grabbing}
.win .tbtn.tmin{background:linear-gradient(#7fd6e3,#2aaabd 55%,#14899d);font-size:14px;line-height:.4;padding-top:6px}
.win.inactive{border-color:#7fbcc6}
.win.inactive .titlebar{background:linear-gradient(#a9dce5,#7fbcc6 12%,#78b6c1 60%,#8cc6d0)}
.win.inactive .titlebar .ttl{color:#0b4a55;text-shadow:none}
.win.inactive .tbtn{filter:saturate(.45) brightness(1.05)}
#tasks{gap:3px}
#tasks button{flex:0 1 180px}
#tasks button:not(.on){background:linear-gradient(#3aa8ba,#117c8e 45%,#10798b);box-shadow:inset 0 1px rgba(255,255,255,.35),0 1px 1px rgba(0,0,0,.25)}
#tasks button:not(.on):hover{filter:brightness(1.1)}
.win-toast{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:6;max-width:calc(100% - 20px);padding:6px 12px;background:#FFFFE1;color:#141414;border:1px solid #141414;border-radius:6px;box-shadow:2px 2px 0 rgba(0,0,0,.25);font-size:12.5px;pointer-events:none;animation:toast 2.6s ease forwards}
@keyframes toast{0%,80%{opacity:1}100%{opacity:0}}

/* FreeCell et Spider : tables à 8 et 10 colonnes */
.sol.c8{width:min(700px, calc(100vw - 36px))}
.sol.c10{width:min(820px, calc(100vw - 36px));--g:6px}
.sol.c8 .sol-top,.sol.c8 .sol-tab{grid-template-columns:repeat(8,1fr)}
.sol.c10 .sol-top,.sol.c10 .sol-tab{grid-template-columns:repeat(10,1fr)}
.sol .cell-slot{border-style:dashed}
.sp-done{grid-column:3/-1;position:relative;height:var(--ch);display:flex;justify-content:flex-end;padding-right:4px}
.sp-done .card{position:relative;flex:none;width:var(--cw);margin-left:calc(var(--cw) * -.72)}
.sp-done .card:first-child{margin-left:0}
@media (max-width:640px){ .sol.c8,.sol.c10{width:100%} }

/* Mahjong : tuiles ivoire en relief, étages décalés vers le haut à gauche */
.mj{display:grid;place-items:center;padding:14px;min-width:min(640px, calc(100vw - 36px));background:radial-gradient(ellipse at 50% 30%, #2a7a5a, #134a36 75%)}
.mj-board{position:relative;margin:auto}
.mj-t{position:absolute;width:var(--tw);height:var(--th);padding:0;border:0;border-radius:calc(var(--tw) * .12);cursor:pointer;
  background:linear-gradient(145deg,#fffdf4,#f1e9d2 60%,#e4d9b8);
  box-shadow:1px 1px 0 #d9cda8,2px 2px 0 #cdbf95,calc(var(--dz) * .75) calc(var(--dz) * .75) 0 #b8a676,var(--dz) var(--dz) 0 #9c8a5a,calc(var(--dz) + 3px) calc(var(--dz) + 4px) 6px rgba(0,0,0,.35);
  transition:transform .08s}
.mj-t svg{position:absolute;inset:8%;width:84%;height:84%}
.mj-t:hover{filter:brightness(1.04)}
.mj-t.sel{background:linear-gradient(145deg,#fff6c2,#ffe07a);outline:2px solid #e0a92a;outline-offset:-2px;transform:translate(-1px,-1px)}
.mj-t.hint{animation:mjhint .5s ease-in-out infinite alternate}
@keyframes mjhint{to{background:linear-gradient(145deg,#d8f5ff,#9fe3ff)}}
.mj-t:focus-visible{outline:2px dotted #141414;outline-offset:-4px}
@media (max-width:640px){ .mj{flex:1;min-height:0;width:100%;min-width:0;padding:8px;overflow:hidden} }

/* Reversi : tapis vert, pions bombés qui se retournent */
.rv{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;background:#1c3a2c;color:#e8f3ec}
.rv-head{display:flex;justify-content:space-between;gap:12px;width:100%;font:600 14px/1.2 var(--px)}
.rv-fit{width:min(440px, calc(100vw - 48px), calc(100vh - 270px));aspect-ratio:1;container-type:size;display:grid;place-items:center}
.rv-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(100cqw, 100cqh);aspect-ratio:1;gap:2px;padding:6px;box-sizing:border-box;background:#0d2b1c;border-radius:6px;box-shadow:inset 0 0 0 3px #3b2414,0 4px 0 #0a1a10}
.rv-sq{min-width:0;min-height:0;border:0;padding:0;background:radial-gradient(circle at 50% 40%,#2f9a5c,#1f7a45);display:grid;place-items:center;cursor:pointer}
.rv-d{width:80%;height:80%;border-radius:50%;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.rv-d.b{background:radial-gradient(circle at 38% 32%,#6a6a6a,#1a1a1a 60%,#000)}
.rv-d.w{background:radial-gradient(circle at 38% 32%,#fff,#e6e6e6 55%,#b9b9b9)}
.rv-d.last{box-shadow:0 3px 0 rgba(0,0,0,.35),0 0 0 3px #ffd24a}
.rv-d.flip{animation:rvflip .35s ease-out}
@keyframes rvflip{0%{transform:scaleX(1)}50%{transform:scaleX(.08)}100%{transform:scaleX(1)}}
.rv-hint{width:26%;height:26%;border-radius:50%;background:rgba(255,255,255,.28)}
.rv-msg{margin:0;font:600 15px/1.3 var(--px);min-height:1.3em;text-align:center}
@media (max-width:640px){ .rv{flex:1;min-height:0;width:100%} .rv-fit{flex:1;min-height:0;width:100%;aspect-ratio:auto} }

/* Envahisseurs : terrain vertical */
.br-wrap canvas.tall{width:min(400px, calc(100vw - 32px), calc((100vh - 200px) * .75))}
@media (max-width:640px){ .br-wrap canvas.tall{width:min(100cqw, calc(100cqh * .75))} }

/* Taquin : tuiles en bois clair */
.tq{display:grid;place-items:center;padding:14px;background:#6b4226}
.tq-fit{width:min(400px, calc(100vw - 48px), calc(100vh - 220px));aspect-ratio:1;container-type:size;display:grid;place-items:center}
.tq-board{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:4px;padding:6px;width:min(100cqw, 100cqh);aspect-ratio:1;box-sizing:border-box;background:#3b2414;border-radius:6px;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.tq-t{min-width:0;min-height:0;border:0;border-radius:6px;cursor:pointer;color:#4a2a12;font:700 calc(min(100cqw, 100cqh) / var(--n) * .38)/1 var(--ui);
  background:linear-gradient(145deg,#f6dcaa,#e0b877 55%,#c99a55);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.18),0 2px 0 #2a180c}
.tq-t.ok{color:#1e5a2a}
.tq-t:active{transform:translateY(1px)}
.tq-hole{border-radius:6px;background:rgba(0,0,0,.25)}
@media (max-width:640px){ .tq{flex:1;min-height:0;width:100%} .tq-fit{flex:1;min-height:0;width:100%;aspect-ratio:auto} }

/* Code secret */
.csq{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:#2b2a33;color:#f0eee8;min-width:min(360px, calc(100vw - 36px))}
.csq-secret{display:flex;gap:8px;padding:6px 10px;background:#15141a;border-radius:6px}
.csq-rows{display:flex;flex-direction:column-reverse;gap:4px}
.csq-row{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:5px}
.csq-row.act{background:rgba(255,255,255,.1)}
.csq-n{width:18px;text-align:right;font:13px var(--lcd);opacity:.6}
.csq-p{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.35);border:1px solid rgba(0,0,0,.4)}
.csq-p[style*="transparent"]{background:#15141a;box-shadow:inset 0 2px 3px rgba(0,0,0,.6)}
.csq-p.hidden{background:#4a4856;color:#d9d6ce;font-weight:700}
.csq-keys{display:grid;grid-template-columns:repeat(2,9px);gap:3px;margin-left:6px}
.csq-keys i{width:9px;height:9px;border-radius:50%;background:#15141a}
.csq-keys i.b{background:#111;box-shadow:0 0 0 1px #aaa}
.csq-keys i.w{background:#fff}
.csq-pal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;align-items:center}
.csq-peg{width:34px;height:34px;border-radius:50%;border:2px solid rgba(0,0,0,.4);background:var(--c);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.35)}
.csq .btn{color:#141414;background:#ECE9D8;border-color:#fff #404040 #404040 #fff}
.csq-msg{margin:0;font:600 14px/1.3 var(--px);min-height:1.3em;text-align:center}
@media (max-width:640px){ .csq{flex:1;min-height:0;width:100%;overflow:auto} }

/* Pendu : ardoise */
.pd{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;background:#24352c;color:#f1f4ea;min-width:min(420px, calc(100vw - 36px))}
.pd-draw{width:150px;height:160px;color:#f1f4ea}
.pd-word{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;font:600 28px/1 var(--px)}
.pd-l{min-width:22px;text-align:center;border-bottom:3px solid #f1f4ea;padding-bottom:2px}
.pd-l.miss{color:#ff8a7a}
.pd-sep{min-width:10px;text-align:center}
.pd-keys{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;max-width:380px}
.pd-k{padding:6px 0;min-width:0;font-weight:700;color:#141414;background:#ECE9D8;border-color:#fff #404040 #404040 #fff}
.pd-k.hit{background:#9be0a8}.pd-k.miss{background:#e6a19a}
.pd-k:disabled{opacity:.75;cursor:default}
.pd-msg{margin:0;font:600 14px/1.3 var(--px);min-height:1.3em}
@media (max-width:640px){ .pd{flex:1;min-height:0;width:100%;overflow:auto} .pd-keys{width:100%} .pd-k{padding:10px 0} }

/* Bataille navale */
.bn{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;background:#0f2c4a;color:#dfefff;width:min(720px, calc(100vw - 36px))}
.bn-side h3{margin:0 0 6px;font:600 14px var(--px);text-align:center}
.bn-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;padding:4px;background:#08192b;border-radius:4px;aspect-ratio:1}
.bn-c{min-width:0;min-height:0;border:0;padding:0;border-radius:2px;background:linear-gradient(#1f5f8f,#174e78);cursor:pointer;position:relative}
.bn-grid[data-g="me"] .bn-c{cursor:default}
.bn-c:not(:disabled):hover{background:#2f7ab0}
.bn-c.ship{background:linear-gradient(#9aa6b4,#6b7785)}
.bn-c.miss::after{content:"";position:absolute;inset:36%;border-radius:50%;background:#bfe3ff}
.bn-c.hit{background:linear-gradient(#ff7a4a,#d42a2a)}
.bn-c.hit::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 70% var(--ui)}
.bn-c.sunk{background:linear-gradient(#5a1a14,#3a0d0a)}
.bn-c.last{outline:2px solid #ffd24a;outline-offset:-2px}
.bn{position:relative}
.bn-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;min-height:34px}
.bn-msg{margin:0;text-align:center;font:600 15px/1.3 var(--px);min-height:1.3em}
.bn-c.aim{background:linear-gradient(#ffd24a,#c9960c);animation:bnaim .5s infinite alternate}
@keyframes bnaim{to{opacity:.55}}
.bn-cover{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;
  background:repeating-linear-gradient(135deg,#0f2c4a 0 14px,#0c243d 14px 28px)}
.bn-cover[hidden]{display:none}
.bn-cover-t{margin:0;max-width:34ch;font:600 18px/1.35 var(--px)}
/* Accueil du jeu en ligne (commun aux jeux à deux) */
.net-wrap{z-index:6}
.dlg.net{width:300px;max-width:100%}
.net label{display:block;margin:0 0 4px;font-weight:600}
.net-row{display:flex;gap:6px;justify-content:center}
.net-row input{width:8ch;font:600 18px var(--px);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:2px 4px}
.net .net-create{display:block;margin:0 auto}
.net-or{margin:10px 0;opacity:.7}
.net-code{margin:0 0 12px;font:700 34px/1 var(--px);letter-spacing:.2em;user-select:all}
.net-link{width:100%;font:13px var(--ui)}
.net-wait{margin:14px 0 12px;display:flex;align-items:center;justify-content:center;gap:8px}
.net-dots{width:14px;height:14px;border-radius:50%;border:3px solid #9ab;border-top-color:#1f5fd0;animation:netspin .8s linear infinite}
@keyframes netspin{to{transform:rotate(360deg)}}
.net-err{margin:0 0 10px;color:#b3261e;font-weight:600}
@media (prefers-reduced-motion: reduce){ .net-dots,.bn-c.aim{animation:none} }
@media (max-width:640px){ .bn{grid-template-columns:1fr;width:100%;flex:1;min-height:0;overflow:auto} .bn-side:first-child .bn-grid{width:min(60%, 28vh);margin:0 auto} .bn-side:nth-child(2) .bn-grid{width:min(100%, 40vh);margin:0 auto} }

/* Belote */
.belote .h-trick .be-turned{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);box-shadow:0 0 0 3px var(--accent),0 4px 10px rgba(0,0,0,.4)}
.be-bids{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.be-bids .btn{color:var(--ink);padding:4px 12px}
.be-bids .be-suit{font-size:20px;line-height:1;padding:3px 12px;color:#141414}
.be-bids .be-suit.red{color:#c8102e}
.belote .h-bar{flex-wrap:wrap}
.be-tag{display:inline-block;margin-left:4px;padding:0 5px;border-radius:3px;background:#fff;color:#141414;font:700 13px var(--ui)}

/* Tarot : atouts numérotés sur fond bleu, Excuse étoilée, chien étalé */
.card.tr-trump{background:linear-gradient(160deg,#eef5ff,#cfe0fb);color:#1a3a7a}
.card.tr-trump .cs{font:700 calc(var(--cw) * .42)/1 var(--ui)}
.card.tr-exc{background:linear-gradient(160deg,#fff4d6,#f7d98a);color:#8a5a00}
.tarot .h-trick .tr-chien{transform:translateX(-50%) rotate(-2deg)}
.tarot .h-trick{width:calc(var(--cw) * 4.2)}

/* Écran de veille et écran de démarrage */
#saver{position:fixed;inset:0;width:100%;height:100%;z-index:95;cursor:none;background:#000}
#boot{position:fixed;inset:0;z-index:96;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.2vh,20px);padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));overflow:hidden;background:#1a58cc;color:#fff;text-align:center;cursor:pointer;font-family:var(--px)}
#boot .b-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
#boot > :not(.b-bg){position:relative}
#boot h1{margin:0;font:600 clamp(36px,min(9vw,7vh),64px)/1 var(--px);text-shadow:3px 3px 0 #0B2A78;letter-spacing:.01em}
#boot h1 span{display:block;margin-top:.08em;font-size:1.3em;color:#F2C230}
#boot .b-sub{margin:0;font:400 clamp(17px,2.6vh,22px)/1.3 var(--px);text-shadow:1px 1px 0 #0B2A78}
#boot .b-pc{display:block;width:min(64vw,300px,36vh);height:auto}
#boot .b-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:200px;height:56px;padding:0 28px;border:0;border-radius:14px;cursor:pointer;background:linear-gradient(#ff9a80 0%,#f26a4a 10%,#e8553a 45%,#e0502f 60%,#ea5c3c 88%,#b8401f 100%);box-shadow:inset 0 1px rgba(255,255,255,.35),0 3px 0 #1f5a1a,0 6px 12px rgba(0,0,0,.25);color:#fff;font:600 24px/1 var(--px);text-shadow:1px 1px 2px rgba(0,0,0,.55)}
#boot .b-go:hover{filter:brightness(1.08)}
#boot .b-go:active{transform:translateY(2px);box-shadow:inset 0 1px rgba(255,255,255,.35),0 1px 0 #1f5a1a}
#boot .b-go:focus-visible{outline:2px dotted #fff;outline-offset:3px}
#boot .b-hint{margin:0;font:24px/1 var(--lcd);text-shadow:1px 1px 0 #1f5a1a;animation:bootIn .5s ease-out 2.4s both,blinkHint 1.1s steps(1) 2.9s infinite}
#boot .crt{transform-box:fill-box;transform-origin:center;animation:crtOn 1.8s ease-out .35s both}
@keyframes crtOn{0%,18%{transform:scale(0,.02);opacity:0;filter:brightness(1)}22%{transform:scale(.05,.02);opacity:1;filter:brightness(4)}38%{transform:scale(1,.04);opacity:1;filter:brightness(3.5)}58%{transform:scale(1,1.06);filter:brightness(2.2)}68%{transform:scale(1,1);filter:brightness(1.3)}100%{transform:scale(1,1);opacity:1;filter:brightness(1)}}
#boot .glow{opacity:0;animation:glowOn 1.8s linear .35s both}
@keyframes glowOn{0%,54%{opacity:0}58%{opacity:.55}72%,100%{opacity:0}}
#boot .led{animation:ledOn 1.8s step-end .35s both}
@keyframes ledOn{0%{opacity:0}12%,100%{opacity:1}}
#boot .b-in{animation:bootIn .5s ease-out 2.1s both}
@keyframes bootIn{from{opacity:0;transform:translateY(10px)}}
@keyframes blinkHint{50%{opacity:0}}
#boot.gone{animation:bootOut .35s ease-in forwards;pointer-events:none}
@keyframes bootOut{to{opacity:0;transform:scale(1.04)}}

/* Réglages */
.cfg{width:min(460px, calc(100vw - 36px));background:var(--chrome);color:var(--ink);padding:12px;display:grid;gap:10px}
.cfg fieldset{border:1px solid var(--lo);box-shadow:1px 1px 0 var(--hi) inset,1px 1px 0 var(--hi);padding:8px 12px 10px;margin:0;display:grid;gap:8px}
.cfg legend{padding:0 4px;color:#0b7d90;font-weight:700}
.cfg label{display:flex;align-items:center;gap:8px;min-width:0}
.cfg label > span{flex:1;min-width:0}
.cfg input[type=range]{flex:1;min-width:0}
.cfg select{font:inherit;min-width:0;max-width:60%}
.cfg .cfg-row{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){ .cfg{width:100%;flex:1;min-height:0;overflow:auto} }
.pad-toast{position:fixed;right:10px;bottom:calc(var(--tb) + 12px);z-index:36;background:#FFFFE1;color:#141414;border:1px solid #141414;border-radius:8px;padding:8px 12px;box-shadow:2px 3px 0 rgba(0,0,0,.25);font-size:12.5px}

/* Trophées */
.doc.trophies h2 small{color:#555;font-weight:400}
.tro-bar{height:10px;border:1px solid #9aa6b4;border-radius:5px;overflow:hidden;background:#eef1f5;margin:6px 0 10px}
.tro-bar i{display:block;height:100%;background:linear-gradient(#5fcf54,#2c9a25)}
.tro-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:min(420px, 60vh);overflow:auto}
.tro-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:4px;background:#f3f4f6;color:#7a808a}
.tro-list li.on{background:#fff7d6;color:#141414}
.tro-ic{font-size:20px;width:26px;text-align:center}
.tro-t{flex:1;min-width:0;display:flex;flex-direction:column}
.tro-t small{font-size:11.5px}
.tro-d{font-size:11px;color:#8a7a50;white-space:nowrap}
.tro-toast{position:fixed;right:10px;bottom:calc(var(--tb) + 12px);z-index:37;max-width:290px;display:flex;gap:10px;align-items:center;background:#FFFFE1;color:#141414;border:1px solid #141414;border-radius:8px;padding:10px 12px;box-shadow:2px 3px 0 rgba(0,0,0,.25);font-size:12.5px;animation:toast 4.5s ease forwards}
.tro-toast b{display:block}
.tro-toast span:first-child{font-size:26px}
/* Défi du jour */
.defi-date{color:#555;margin-bottom:8px !important;text-transform:capitalize}
.defi-card{display:flex;gap:12px;align-items:center;padding:10px;border-radius:6px;background:linear-gradient(#eef5ff,#dbe8fd);border:1px solid #9db9eb}
.defi-card h2{margin:0 !important}
.defi-card p{margin:2px 0 0 !important;color:#444}
.defi-ic svg{width:44px;height:44px}
.defi-state{margin:10px 0 !important}
.defi-go{font-weight:700}
.defi-days{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.defi-days li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:4px;background:#f3f4f6;font-size:11px;text-align:center;min-width:0}
.defi-days li svg{width:20px;height:20px}
.defi-days li.ok{background:#e3f6df}
.defi-days li.today{outline:2px solid #2b72d6}

/* Classements */
.doc.ranks select{font:inherit;max-width:100%}
.rk-note{margin:8px 0 !important;font-size:12.5px;color:#444}
.rk-list{max-height:min(420px, 55vh);overflow:auto}
.rk-list tr.me td{background:#fff7d6;font-weight:700}
.rk-rep{background:none;border:0;cursor:pointer;color:#b3261e;font-size:14px;padding:0 4px}
.acc-lb{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12.5px}