/* ============================================================
   Olisé — les salons (façon salons de discussion d'une messagerie d'époque) et les jeux d'époque.
   ============================================================ */

/* ---------- SALONS : comme les salons de discussion d'une messagerie d'époque — clair, bleu, net ---------- */
#w-salons .win-body.tight { background: #fff; }
.sal { position: relative; display: grid; grid-template-columns: 206px minmax(0, 1fr) 188px; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; background: #fff; color: #000; font: 12px var(--font-ui); }
.sal:not(.in-room) { grid-template-columns: 206px minmax(0, 1fr); }
.sal:not(.in-room) .sal-people { display: none; }
.sal-side, .sal-main, .sal-people { grid-row: 2; }   /* même quand la barre du haut est masquée (téléphone, dans un salon) */
/* la barre du haut */
.sal-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 5px 10px 5px 12px; border-bottom: 1px solid #93b2e0; background: linear-gradient(180deg, #eef5fe 0%, #d9e7fa 65%, #c9dcf6 100%); }
.sal-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sal-brand img { flex: none; width: 32px; height: 32px; }
.sal-brand span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sal-brand b { color: #10316b; font: 700 16px var(--font-title); }
.sal-brand small { overflow: hidden; color: #2f7a22; font: 11px var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.sal-me { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 2px 10px 2px 4px; border: 1px solid transparent; border-radius: 3px; background: none; color: #0b3bb5; font: 12px var(--font-ui); white-space: nowrap; }
.sal-me canvas { width: 16px; height: 32px; image-rendering: pixelated; }
.sal-me:hover, .sal-me:focus-visible { border-color: #9dbbe6; background: rgba(255, 255, 255, .7); text-decoration: underline; outline: none; }

/* la liste des salons, à gauche */
.sal-side { overflow-y: auto; padding: 4px 0 10px; border-right: 1px solid #b7cbe8; background: linear-gradient(180deg, #f5f9ff, #e6effb); }
.sal-side-head { padding: 10px 12px 4px; color: #1f4d99; font: 700 11.5px var(--font-ui); }
.sal-item { display: flex; align-items: center; gap: 8px; width: calc(100% - 10px); min-height: 34px; margin: 1px 5px; padding: 3px 8px 3px 6px; border: 0; border-radius: 3px; background: none; color: #000; font: 12px var(--font-ui); text-align: left; }
.sal-item:hover { background: #eef5fe; box-shadow: inset 0 0 0 1px #c3d8f6; }
.sal-item.on { background: linear-gradient(180deg, #e2eefd, #cfe1fa); box-shadow: inset 0 0 0 1px #86b0e6; font-weight: 700; }
.sal-item:focus-visible { outline: 1px dotted #000; outline-offset: -2px; }
.sal-item-img { flex: none; width: 36px; height: 26px; border-radius: 2px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); }
.sal-item-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sal-item-n { flex: none; min-width: 18px; padding: 0 5px; border-radius: 9px; color: #6b7a90; font: 10.5px/16px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }
.sal-item-n.some { background: #dff0d8; color: #2f7a22; font-weight: 700; }
.sal-item-n:empty { display: none; }

/* l'accueil : les salons en cartes, par catégorie */
.sal-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sal-lobby { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 22px; background: #fff; }
.sal-hello { max-width: 740px; margin: 0 auto; }
.sal-hello h2 { margin: 0 0 6px; color: #10316b; font: 700 19px var(--font-title); text-wrap: balance; }
.sal-intro { max-width: 64ch; margin: 0 0 14px; color: #333; font: 12.5px/1.5 var(--font-ui); }
.sal-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #c9d9ef; border-radius: 4px; background: #f4f8fe; }
.sal-state p { flex: 1 1 220px; margin: 0; color: #1d2b44; line-height: 1.45; }
.sal-state img { width: 32px; height: 32px; }
.sal-state.guest { border-color: #f0c36d; background: #fff8e1; }
.sal-spin { flex: none; width: 16px; height: 16px; border: 2px solid #b7cbe8; border-top-color: #3a6ea5; border-radius: 50%; animation: salspin .8s linear infinite; }
@keyframes salspin { to { transform: rotate(360deg); } }
.sal-avatar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 6px; padding: 8px 12px; border: 1px solid #c9d9ef; border-radius: 4px; background: linear-gradient(180deg, #fff, #f1f6fd); }
.sal-avatar canvas { width: 32px; height: 64px; image-rendering: pixelated; }
.sal-avatar p { display: flex; flex: 1 1 180px; flex-direction: column; gap: 2px; margin: 0; }
.sal-avatar p b { color: #10316b; }
.sal-avatar p span { color: #555; }
.sal-cat { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; color: #1f4d99; font: 700 12.5px var(--font-ui); }
.sal-cat::after { content: ''; flex: 1; border-top: 1px solid #d7e3f3; }
.sal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.sal-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 2px; padding: 8px 10px; border: 1px solid #c9d9ef; border-radius: 4px; background: #fff; color: #000; font: 12px var(--font-ui); text-align: left; }
.sal-card:hover { border-color: #86b0e6; background: #f4f8fe; box-shadow: 0 1px 3px rgba(31, 77, 153, .15); }
.sal-card:focus-visible { outline: 2px solid #5b8fdc; outline-offset: 1px; }
.sal-card-img { grid-row: 1 / 3; width: 88px; height: 58px; border-radius: 3px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.sal-card-t { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sal-card-t b { color: #0b2f6e; font: 700 13px var(--font-title); }
.sal-card-t small { color: #555; font-size: 11.5px; line-height: 1.35; }
.sal-card-n { align-self: end; color: #6b7a90; font-size: 11px; text-align: right; white-space: nowrap; }
.sal-card-n.some { color: #2f7a22; font-weight: 700; }
.sal-card-go { align-self: start; justify-self: end; color: #0b3bb5; font-size: 11.5px; text-decoration: underline; }
/* la Salle de jeux : une grande carte */
.sal-cards.games { grid-template-columns: minmax(0, 1fr); }
.sal-cards.games .sal-card { border-color: #e6c46a; background: linear-gradient(180deg, #fffdf4, #fff6d8); }
.sal-cards.games .sal-card:hover { border-color: #d9a520; }
.sal-cards.games .sal-card-img { width: 132px; height: 104px; }
.sal-rules { margin: 16px 0 0; color: #6b7280; font-size: 11.5px; }

/* dans un salon : la pièce en haut, la discussion en dessous */
.sal-room { display: grid; flex: 1; grid-template-rows: auto minmax(0, 1fr) 176px auto; grid-template-areas: "head" "stage" "log" "form"; min-height: 0; }
.sal-head { grid-area: head; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px; border-bottom: 1px solid #c9d9ef; background: linear-gradient(180deg, #fff, #eef4fc); }
.sal-back { display: none; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; color: #10316b; place-items: center; }
.sal-back svg { width: 18px; height: 18px; }
.sal-back:hover, .sal-back:focus-visible { border-color: #9dbbe6; background: #eaf2fd; outline: none; }
.sal-head-ico { flex: none; width: 48px; height: 32px; border-radius: 3px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.sal-head-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sal-head-t b { overflow: hidden; color: #0b2f6e; font: 700 15px var(--font-title); text-overflow: ellipsis; white-space: nowrap; }
.sal-head-t span { overflow: hidden; color: #555; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.sal-btn { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid #9dbbe6; border-radius: 3px; background: linear-gradient(180deg, #fff, #e6effb); color: #10316b; font: 12px var(--font-ui); }
.sal-btn:hover, .sal-btn:focus-visible { border-color: #5b8fdc; background: linear-gradient(180deg, #fff, #d8e7fb); outline: none; }
.sal-btn img { width: 16px; height: 16px; }
.sal-people-btn { display: none; }
.sal-games-btn { border-color: #d9a520; background: linear-gradient(180deg, #fffdf4, #ffeab0); color: #6b4200; font-weight: 700; }
.sal-games-btn:hover, .sal-games-btn:focus-visible { border-color: #b37d00; background: linear-gradient(180deg, #fff, #ffe08a); }

/* la pièce en pixels */
.sal-stage { grid-area: stage; position: relative; display: grid; min-height: 0; overflow: hidden; place-items: center; background: #0f1117 radial-gradient(ellipse at 50% 30%, #1b1f33, #0f1117 70%); }
/* touch-action: none — sur iPhone, marcher au doigt ne doit ni zoomer la page ni la faire glisser */
.sal-stage canvas.room { display: block; image-rendering: pixelated; cursor: crosshair; touch-action: none; }
.sal-stage .overlay { position: absolute; pointer-events: none; }
.sal-stage .grid { position: absolute; pointer-events: none; opacity: .85; }
.sal-stage .hint { position: absolute; left: 10px; bottom: 8px; padding: 4px 8px; border-radius: 10px; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .85); font: 11.5px var(--font-ui); pointer-events: none; transition: opacity .6s; }
.sal-stage .hint.off { opacity: 0; }
.nametag { position: absolute; transform: translate(-50%, 0); color: #fff; font: 700 10px/1 var(--font-ui); text-shadow: 0 1px 0 #000, 0 0 3px #000; white-space: nowrap; pointer-events: none; }
.nametag.me { color: #ffe08a; }
.bubble { position: absolute; z-index: 3; max-width: 190px; padding: 5px 8px; border: 2px solid #1b2a47; border-radius: 9px; background: #fff; color: #1b2a47; font: 12px/1.3 var(--font-ui); overflow-wrap: anywhere; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); transform: translate(-50%, -100%); pointer-events: none; animation: pop .15s ease-out; }
.bubble::after { content: ''; position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -8px; width: 8px; height: 8px; border-right: 2px solid #1b2a47; border-bottom: 2px solid #1b2a47; background: #fff; transform: translateX(-50%) rotate(45deg); }
.bubble .emo { width: 16px; height: 16px; vertical-align: -3px; }
.emote { position: absolute; transform: translate(-50%, -100%); image-rendering: pixelated; pointer-events: none; animation: rise 1.6s ease-out forwards; }
@keyframes pop { from { transform: translate(-50%, -100%) scale(.85); opacity: 0; } }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -100%) scale(1.1); } 80% { opacity: 1; transform: translate(-50%, -110%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -130%) scale(1); } }
/* l'écriteau d'une table : le jeu, et qui joue (on le touche pour jouer ou regarder) */
.tb-tag { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 150px; padding: 2px 7px 3px; border: 1px solid #1b2a47; border-radius: 6px; background: rgba(255, 253, 244, .94); color: #1b2a47; font: 10px/1.15 var(--font-ui); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; white-space: nowrap; }
.tb-tag b { font: 700 10.5px/1.1 var(--font-ui); color: #0b2f6e; }
.tb-tag span { max-width: 136px; overflow: hidden; color: #4b5563; text-overflow: ellipsis; }
.tb-tag.wait { border-color: #2f7a22; background: rgba(236, 250, 229, .96); }
.tb-tag.wait span { color: #2f7a22; font-weight: 700; }
.tb-tag.busy { border-color: #b35900; background: rgba(255, 244, 214, .97); }
.tb-tag.busy span { color: #8a4500; font-weight: 700; }
.tb-tag.mine { box-shadow: 0 0 0 2px #ffd23f, 0 2px 0 rgba(0, 0, 0, .35); }
.tb-tag:hover, .tb-tag:focus-visible { border-color: #316ac5; outline: none; }

/* la partie : un panneau par-dessus la pièce (et par-dessus la discussion pour le Pong, qui a besoin de hauteur) */
.sal-table { grid-area: stage; z-index: 6; display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 8px 10px; background: #eef4fc; border-bottom: 1px solid #b7cbe8; }
.sal-table[hidden] { display: none; }
.sal.at-table:is([data-game="pong"], [data-game="dames"], [data-game="reversi"], [data-game="navale"]) .sal-table { grid-row: stage / log; }
.tb-head { display: flex; flex: none; align-items: center; gap: 8px; }
.tb-ico { flex: none; width: 24px; height: 24px; }
.tb-title { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.tb-title b { color: #0b2f6e; font: 700 14px var(--font-title); }
.tb-sub { overflow: hidden; color: #4b5563; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tb-score { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #b7cbe8; border-radius: 4px; background: #fff; }
.tb-p { display: flex; flex-direction: column; min-width: 0; }
.tb-p.p1 { align-items: flex-end; text-align: right; }
.tb-n { overflow: hidden; color: #10316b; font: 700 12.5px var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.tb-p.empty .tb-n { color: #9aa3ad; font-weight: 400; font-style: italic; }
.tb-mark { color: #6b7280; font-size: 10.5px; }
.tb-live { color: #0b2f6e; font: 700 22px var(--font-title); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-stage { display: grid; flex: 1; min-height: 0; overflow: hidden; place-items: center; }
/* le terrain et les grilles tiennent toujours entiers dans la place disponible (hauteur comprise) */
.tb-stage { container-type: size; }
.tb-stage canvas.pong { width: min(100%, calc((100cqh - 8px) * .68)); height: auto; aspect-ratio: 300 / 440; }
.tb-stage .ttt { grid-template-rows: repeat(3, minmax(0, 1fr)); width: min(100%, 100cqh, 300px); height: auto; aspect-ratio: 1; }
.tb-stage .ttt-c { font-size: min(56px, 18cqh); }
.tb-stage .c4 { grid-template-rows: repeat(6, minmax(0, 1fr)); width: min(100%, calc(100cqh * 7 / 6), 380px); height: auto; aspect-ratio: 7 / 6; }
.tb-stage .c4-c { aspect-ratio: auto; }
.tb-stage .rps { gap: min(18px, 3cqh); }
.tb-stage .rps-hand { width: min(96px, 28cqh); height: min(96px, 28cqh); font-size: min(52px, 15cqh); }
.tb-stage .rps { width: 100%; }
.tb-wait { display: flex; align-items: center; gap: 10px; max-width: 42ch; padding: 12px 14px; border: 1px dashed #9dbbe6; border-radius: 6px; background: #fff; color: #1d2b44; line-height: 1.45; }
.tb-wait p { margin: 0; }
.tb-status { flex: none; min-height: 17px; margin: 0; color: #1f2937; font: 12.5px var(--font-ui); text-align: center; }
.tb-btns { display: flex; flex: none; justify-content: center; gap: 8px; }
.tb-btns:has(> [hidden]:only-child) { display: none; }

/* la discussion : « untel dit : », comme à l'époque */
.sal-log { grid-area: log; min-height: 0; overflow-y: auto; padding: 8px 12px 10px; border-top: 1px solid #b7cbe8; background: #fff; font: 13px/1.45 'Segoe UI', Tahoma, var(--font-ui); overflow-wrap: anywhere; }
.sal.at-table:is([data-game="pong"], [data-game="dames"], [data-game="reversi"], [data-game="navale"]) .sal-log { visibility: hidden; }
.sal-log:focus-visible { outline: 2px solid #5b8fdc; outline-offset: -2px; }
.sl-msg { padding: 3px 0 4px; }
.sl-msg.old { opacity: .7; }
.sl-who { display: flex; align-items: center; gap: 5px; color: #555; font: 12px var(--font-ui); }
.sl-who .face.sl-pic { width: 20px; height: 20px; border: 1px solid #b7c6dd; border-radius: 3px; }
.sl-who .face img, .sl-who .face canvas { width: 100% !important; height: 100% !important; }
.sl-name { padding: 0; border: 0; background: none; color: #1f4d99; font: 700 12px var(--font-ui); cursor: pointer; }
.sl-name:hover, .sl-name:focus-visible { text-decoration: underline; outline: none; }
.sl-name:disabled { color: #8a4b00; cursor: default; }
.sl-who time { margin-left: auto; color: #9aa3ad; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.sl-text { margin: 1px 0 0 27px; color: #000; }
.sl-text.mention { margin-left: 23px; padding: 1px 4px; border-radius: 3px; background: #fff4c2; box-shadow: inset 2px 0 #f0b400; }
.sl-sys { padding: 3px 0 3px 27px; color: #6b7280; font: italic 11.5px var(--font-ui); }
.sl-sys.join { color: #2f7a22; }
.sl-sys.part { color: #8a6d3b; }
.sl-sys.warn { color: #b3261e; font-style: normal; }
.sl-sys.jeu { margin: 3px 0; padding: 4px 8px 4px 27px; border-radius: 4px; background: #fff6d8 url("../assets/ico/16/jeux.png") no-repeat 6px 50%; color: #6b4200; font-style: normal; font-weight: 700; }
.sl-sys.sep { display: flex; align-items: center; gap: 8px; padding-left: 0; color: #8d99a8; font-style: normal; }
.sl-sys.sep::before, .sl-sys.sep::after { content: ''; flex: 1; border-top: 1px solid #e1e8f2; }
.sl-sys.sl-react { display: flex; align-items: center; gap: 6px; color: #4b5563; font-style: normal; }
.sl-sys.sl-react canvas { width: 16px; height: 16px; image-rendering: pixelated; }

/* écrire */
.sal-form { grid-area: form; position: relative; display: flex; flex-direction: column; margin: 6px 8px 8px; border: 1px solid #a9bfe0; border-radius: 3px; background: #fff; }
.sal-tools { display: flex; gap: 2px; padding: 2px 4px; border-bottom: 1px solid #e3eaf4; background: #f7faff; }
.sal-tools .conv-tool canvas, .sal-tools .conv-tool img { width: 18px; height: 18px; image-rendering: pixelated; }
.sal-tools .sal-tool { display: inline-flex; width: auto; gap: 5px; padding: 0 7px 0 5px; color: #10316b; font: 11.5px var(--font-ui); }
.sal-write { display: flex; gap: 6px; padding: 5px; }
.sal-write input { flex: 1; min-width: 0; height: 30px; padding: 3px 6px; border: 1px solid #c9d6e8; border-radius: 2px; font: 13px 'Segoe UI', Tahoma, var(--font-ui); }
.sal-write input:focus { border-color: #7f9db9; outline: none; box-shadow: 0 0 0 2px rgba(91, 143, 220, .2); }
.sal-send { flex: none; min-width: 76px; }
.sal .picker { position: absolute; left: 4px; bottom: calc(100% + 4px); z-index: 7; display: none; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 6px; border: 1px solid #7f9db9; border-radius: 3px; background: #fff; box-shadow: 2px 3px 8px rgba(0, 0, 0, .25); }
.sal .picker.open { display: grid; }
.sal .picker button { display: grid; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; place-items: center; }
.sal .picker button:hover, .sal .picker button:focus-visible { border-color: #9dbbe6; background: #eaf2fd; outline: none; }
.sal .picker canvas { width: 26px; height: 26px; image-rendering: pixelated; }

/* les participants, à droite */
.sal-people { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #b7cbe8; background: linear-gradient(180deg, #f5f9ff, #e6effb); }
.sal-people-head { display: flex; flex: none; align-items: center; gap: 6px; padding: 9px 10px 6px; color: #1f4d99; font: 700 11.5px var(--font-ui); }
.sal-people-head img { width: 16px; height: 16px; }
.sal-people-head span { flex: 1; }
.sal-people-x { display: none; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: #10316b; font: 22px/1 var(--font-ui); }
.sal-people-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 4px; }
.sal-person { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 32px; padding: 3px 6px; border: 0; border-radius: 3px; background: none; color: #000; font: 12px var(--font-ui); text-align: left; }
button.sal-person:hover, button.sal-person:focus-visible { background: #fff; box-shadow: inset 0 0 0 1px #c3d8f6; outline: none; }
.sal-person.me { font-weight: 700; }
.sal-person .face.sal-person-pic { width: 26px; height: 26px; border: 1px solid #b7c6dd; border-radius: 3px; }
.sal-person .face img, .sal-person .face canvas { width: 100% !important; height: 100% !important; }
.sal-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sal-person-game { flex: none; padding: 0 5px; border-radius: 8px; background: #fff0c2; color: #8a4500; font: 10px/15px var(--font-ui); }
.sal-people-tip { flex: none; margin: 0; padding: 8px 10px 10px; color: #6b7280; font-size: 11px; line-height: 1.4; }

/* choisir son avatar */
.av-pick p { margin: 0 0 10px; line-height: 1.45; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; max-height: min(52vh, 360px); overflow-y: auto; padding: 2px; }
.av-choice { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 92px; padding: 6px 2px 4px; border: 1px solid #c9d9ef; border-radius: 4px; background: linear-gradient(180deg, #fff, #eef4fc); font: 11px var(--font-ui); }
.av-choice canvas { width: 32px; height: 64px; image-rendering: pixelated; }
.av-choice:hover { border-color: #86b0e6; }
.av-choice[aria-checked="true"] { border-color: #316ac5; background: linear-gradient(180deg, #e2eefd, #cfe1fa); box-shadow: inset 0 0 0 1px #316ac5; }
.av-choice:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

/* écran peu haut : la discussion rétrécit */
@media (max-height: 700px) { .sal-room { grid-template-rows: auto minmax(0, 1fr) 120px auto; } }

/* tablette couchée et petites fenêtres : la liste des participants se replie derrière son bouton,
   pour laisser la pièce respirer (la barre des salons, elle, reste visible) */
@media (min-width: 1001px) and (max-width: 1240px) {
  .sal.in-room { grid-template-columns: 206px minmax(0, 1fr); }
  .sal.in-room .sal-people { display: none; }
  .sal.in-room .sal-people-btn { display: inline-flex; }
  .sal.in-room.show-people .sal-people { position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; display: flex; width: min(270px, 40%); box-shadow: -8px 0 22px rgba(0, 0, 0, .3); }
}
/* téléphone et tablette : une seule colonne ; la liste des salons est l'accueil ; dans un salon, la pièce en haut et la discussion en dessous */
@media (max-width: 1000px) {
  .sal, .sal:not(.in-room) { grid-template-columns: minmax(0, 1fr); }
  .sal-side, #sal-leave, .sal-head-t span { display: none; }
  .sal.in-room .sal-top { display: none; }
  .sal-top { padding: 4px 8px; }
  .sal-lobby { padding: 12px 12px 18px; }
  .sal-cards { grid-template-columns: minmax(0, 1fr); }
  .sal-card-img { width: 72px; height: 48px; }
  .sal-cards.games .sal-card-img { width: 96px; height: 76px; }
  .sal-back { display: grid; }
  .sal-head { gap: 6px; padding: 4px 6px; }
  .sal-head-ico { width: 40px; height: 28px; }
  .sal-people-btn { display: inline-flex; height: 32px; }
  .sal-games-btn { height: 32px; }
  .sal-people { display: none; }
  .sal.in-room.show-people .sal-people { position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; display: flex; width: min(270px, 84%); box-shadow: -8px 0 22px rgba(0, 0, 0, .3); }
  .sal-people-x { display: grid; place-items: center; }
  /* téléphone : la discussion ne prend que la place de ses messages (jusqu'à 40 % de l'écran), la pièce garde le reste */
  .sal-room { grid-template-rows: auto minmax(min(170px, 30dvh), 1fr) minmax(0, auto) auto; }
  .sal:not(.text-room) .sal-log { max-height: 40dvh; }
  .sal-log { overscroll-behavior: contain; }
  .sal-stage .bubble { max-width: min(250px, 78%); }
  .sal-table { padding: 6px 8px; }
  .sal-form { margin: 4px 6px 6px; }
  .sal-write input { height: 38px; font-size: 16px; }
  .sal-send { min-width: 0; padding: 0 12px; }
  .sal .picker { grid-template-columns: repeat(6, 34px); }
  .sal-tool-t { display: none; }
  .sal-tools .sal-tool { padding: 0; width: 34px; justify-content: center; }
  .sal-log { font-size: 14px; }
  .tb-tag { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .sal-spin { animation-duration: 2s; } }

/* ---------- DÉMINEUR : le gris en relief de l'époque, dans une fenêtre bleue ---------- */
.ms-body { background: #ece9d8; padding: 10px; overflow: auto; }
.ms { --ms-cell: 24px; display: flex; flex-direction: column; gap: 8px; align-items: center; color: #111; }
.ms-frame { position: relative; background: #c0c0c0; padding: 6px; border: 3px solid; border-color: #fff #808080 #808080 #fff; }
.ms-panel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px; margin-bottom: 6px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.lcd { background: #000; color: #ff2a1a; font: 700 22px/26px 'Courier New', ui-monospace, monospace; letter-spacing: 1px; padding: 0 4px; min-width: 54px; text-align: center; text-shadow: 0 0 6px rgba(255, 40, 20, .6); font-variant-numeric: tabular-nums; }
.ms-face { width: 36px; height: 36px; padding: 0; background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; display: grid; place-items: center; }
.ms-face:active { border-color: #808080 #fff #fff #808080; }
.ms-face canvas { width: 26px; height: 26px; image-rendering: pixelated; }
.ms-grid { display: grid; border: 3px solid; border-color: #808080 #fff #fff #808080; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.ms-cell { width: var(--ms-cell); height: var(--ms-cell); padding: 0; background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; font: 700 calc(var(--ms-cell) * .62)/1 Tahoma, Verdana, sans-serif; display: grid; place-items: center; color: #111; }
.ms-cell svg { width: 62%; height: 62%; }
.ms-cell:focus-visible { outline: 2px solid #316ac5; outline-offset: -3px; }
.ms-cell.open { border-width: 0 1px 1px 0; border-color: #7b7b7b; background: #bdbdbd; }
.ms-cell.boom { background: #ff2a1a; }
.ms-cell.wrong { background: repeating-linear-gradient(45deg, #c0c0c0, #c0c0c0 3px, #e8a0a0 3px, #e8a0a0 5px); }
.ms-best { max-width: 26em; color: #555; text-align: center; }
@media (pointer: coarse), (max-width: 640px) { .ms { --ms-cell: 30px; } }
/* au toucher : ouvrir ou planter un drapeau, deux gros boutons en relief sous la grille */
.ms-tools { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  .ms-tools { display: flex; gap: 4px; padding: 3px; background: #a8a8a8; border: 1px solid; border-color: #808080 #fff #fff #808080; }
  .ms-tools button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; color: #111; font: 700 14px var(--font-ui); touch-action: manipulation; }
  .ms-tools button[aria-checked="true"] { border-color: #808080 #fff #fff #808080; background: #d4d0c8; box-shadow: inset 1px 1px #6f6f6f; }
  .ms-tools button svg { width: 18px; height: 18px; }
  .ms-tico { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #7b7b7b; background: #bdbdbd; font: 700 12px/1 Tahoma, Verdana, sans-serif; color: #0000ff; }
  .ms-tico::before { content: '1'; }
}
/* la victoire : une vague lumineuse sur la grille, un bandeau « Bravo », puis le feu d'artifice */
.ms-win { position: absolute; left: 50%; top: 50%; z-index: 8; min-width: 160px; padding: 10px 20px 11px; transform: translate(-50%, -42%); text-align: center; cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #e9f0ff); border: 1px solid #0a246a; border-radius: 7px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .75), 0 12px 26px rgba(0, 0, 0, .42); animation: ms-pop .55s cubic-bezier(.18, 1.55, .4, 1) both; }
.ms-win b { display: block; font: italic 700 26px/1.1 var(--font-title); color: #0b4fd8; text-shadow: 0 1px #fff; }
.ms-win small { display: block; margin-top: 4px; font: 12px var(--font-ui); color: #2b2b2b; white-space: nowrap; }
@keyframes ms-pop { from { opacity: 0; transform: translate(-50%, -42%) scale(.3); } }
.ms-grid.won .ms-cell.open { animation: ms-wave .6s ease-out var(--wave, 0ms) both; }
@keyframes ms-wave { 35% { background: #fff4a8; } }
.fx-fireworks { position: absolute; z-index: 6; pointer-events: none; }

/* ---------- SNAKE : l'écran vert des téléphones d'époque ---------- */
.sn-body { background: #2b3a2a; padding: 10px 12px; display: flex; justify-content: center; }
.sn { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #c7f0d8; font: 13px var(--font-ui); }
.sn-top { display: flex; justify-content: space-between; width: 100%; font-variant-numeric: tabular-nums; }
.sn-top b { font-size: 15px; }
.sn-screen { position: relative; border: 6px solid #1b261a; border-radius: 6px; box-shadow: inset 0 0 0 2px #516a4f; background: #c7f0d8; }
.sn-screen canvas { display: block; width: max(160px, min(360px, 72vw, calc(100vh - var(--taskbar-h) - 210px))); height: auto; aspect-ratio: 1; image-rendering: pixelated; outline: none; touch-action: none; }
.sn-msg { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: #43523d; color: #c7f0d8; padding: 4px 10px; border-radius: 3px; font-size: 12px; white-space: nowrap; }
.sn-msg[hidden] { display: none; }


/* ---------- SOLITAIRE : le tapis vert, des cartes dessinées ici ---------- */
.sol-body { background: #ece9d8; padding: 0; display: flex; flex-direction: column; }
.sol { --cw: min(72px, calc((100vw - 70px) / 7.4)); --ch: calc(var(--cw) * 1.4); --gap: calc(var(--cw) * .12); --dn: calc(var(--cw) * .13); --up: calc(var(--cw) * .3);
  display: flex; flex-direction: column; flex: 1; color: #111; }
.sol-menu { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 6px; border-bottom: 1px solid #d6d2bf; }
.sol-menu button { font: 12px var(--font-ui); background: none; border: 1px solid transparent; padding: 3px 8px; border-radius: 2px; color: #111; }
.sol-menu button:hover:not(:disabled) { border-color: #7a96df; background: #dce6fb; }
.sol-menu button:disabled { color: #9a9a8a; cursor: default; }
.sol-menu button[aria-pressed="true"] { border-color: #316ac5; background: #c1d2ee; }
.sol-board { position: relative; flex: 1; display: flex; flex-direction: column; gap: calc(var(--gap) * 1.6); padding: 12px 10px 18px; min-height: calc(var(--ch) * 3.6); overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #22a354, #0e6b33 80%); touch-action: none; user-select: none; -webkit-user-select: none; }
.sol-row { display: grid; grid-template-columns: repeat(7, var(--cw)); gap: var(--gap); justify-content: center; }
.sol-tab { flex: 1; }
.sol-pile { position: relative; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); }
.sol-gap, .sol-waste, .sol-col { box-shadow: none; }
.sol-col { height: auto; min-height: calc(var(--ch) + var(--d, 0) * var(--dn) + var(--u, 0) * var(--up)); }
.sol-col::before { content: ''; position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); }
.sol-found::before { content: 'A'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .28); font: 700 calc(var(--cw) * .42) Georgia, serif; }
.sol-stock { cursor: pointer; }
.sol-stock.empty::before { content: '↻'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .5); font: 700 calc(var(--cw) * .5) var(--font-ui); }
.sol-card { position: absolute; left: 0; top: calc(var(--d, 0) * var(--dn) + var(--u, 0) * var(--up)); width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .08);
  background: #fff; border: 1px solid #555; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); color: #111; font-family: Georgia, 'Times New Roman', serif; cursor: grab; touch-action: none; }
.sol-card.red { color: #c8102e; }
.sol-card.down { cursor: default; border: 2px solid #fff; outline: 1px solid #555;
  background: radial-gradient(circle at 50% 50%, #f5a623 0 13%, transparent 14%), repeating-linear-gradient(45deg, #2b5fd9 0 3px, #1e46b0 3px 6px); }
.sol-stock .sol-card { cursor: pointer; }
.sol-card .ci { position: absolute; left: 2px; top: 2px; display: flex; flex-direction: column; align-items: center; font-weight: 700; font-size: calc(var(--cw) * .22); line-height: 1; }
.sol-card .ci i { font-style: normal; font-weight: 400; font-size: .85em; }
.sol-card .ci.b { left: auto; top: auto; right: 2px; bottom: 2px; transform: rotate(180deg); }
.sol-card .cc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cw) * .46); line-height: 1; }
.sol-card .cc small { font-size: .5em; }
/* les figures : un portrait tête-bêche dans un cadre, entre les deux index */
.sol-card .cf { position: absolute; left: 18%; right: 18%; top: 10.5%; bottom: 10.5%; border: 1px solid #c8102e; background: #fff7e6 center / 100% 100% no-repeat; image-rendering: pixelated; }
.sol-card.court:not(.red) .cf { border-color: #26408f; }
/* le bon geste : la carte rangée saute et brille, les étincelles fusent ; posée sur une colonne, elle se cale en vert */
.sol-card.home { z-index: 2; animation: sol-home .55s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes sol-home { 0% { transform: scale(1.22); box-shadow: 0 0 0 0 rgba(255, 214, 64, .95), 0 10px 20px rgba(0, 0, 0, .4); } 55% { box-shadow: 0 0 0 12px rgba(255, 214, 64, 0), 0 4px 8px rgba(0, 0, 0, .3); } 100% { transform: none; } }
.sol-card.placed { animation: sol-placed .42s ease-out calc(var(--k, 0) * 35ms) backwards; }
@keyframes sol-placed { 0% { transform: translateY(-7px) scale(1.05); box-shadow: 0 0 0 3px #8dffad, 0 0 16px 4px rgba(120, 255, 160, .7), 0 8px 14px rgba(0, 0, 0, .35); } 100% { transform: none; } }
.sol-card.flip { animation: sol-flip .38s ease-out; }
@keyframes sol-flip { 0% { transform: perspective(500px) rotateY(90deg) scale(1.06); } 100% { transform: none; } }
.sol-card.nope { animation: sol-nope .34s ease-in-out; }
@keyframes sol-nope { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.sol-spark { position: absolute; z-index: 6; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; pointer-events: none; background: #ffe066;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sol-spark .72s cubic-bezier(.15, .75, .3, 1) forwards; }
.sol-spark.big { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: #fff8cf; }
@keyframes sol-spark { 0% { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(180deg); opacity: 0; } }
/* où poser la carte choisie : les places possibles s'allument */
.sol-found.target::after, .sol-col.target:not(:has(.sol-card))::after { content: ''; position: absolute; left: -3px; top: -3px; width: calc(var(--cw) + 6px); height: calc(var(--ch) + 6px); border-radius: calc(var(--cw) * .1); pointer-events: none; animation: sol-glow .8s ease-in-out infinite alternate; }
.sol-col.target > .sol-card:last-child { animation: sol-glow .8s ease-in-out infinite alternate; }
@keyframes sol-glow { from { box-shadow: 0 0 0 2px rgba(141, 255, 173, .55), 0 0 8px 1px rgba(120, 255, 160, .3); } to { box-shadow: 0 0 0 3px #8dffad, 0 0 18px 4px rgba(120, 255, 160, .75); } }
.sol-card.sel { box-shadow: 0 0 0 3px #ffd23f, 0 1px 2px rgba(0, 0, 0, .35); z-index: 1; }
.sol-waste .sol-card { left: calc(var(--f, 0) * var(--cw) * .2); }
.sol-waste .sol-card.flat { cursor: default; }
.sol-drag { position: fixed; z-index: 80; pointer-events: none; }
.sol-drag .sol-card { box-shadow: 5px 8px 12px rgba(0, 0, 0, .45); }
.sol-win { position: absolute; left: 0; top: 0; pointer-events: none; }
.sol-status { padding: 4px 8px; border-top: 1px solid #fff; box-shadow: inset 0 1px 0 #d6d2bf; background: #ece9d8; color: #333; font: 12px var(--font-ui); font-variant-numeric: tabular-nums; }

/* ---------- GLOUTON : la borne d'arcade ---------- */
.gl-body { background: #05081f; padding: 10px 12px; display: flex; justify-content: center; }
.gl { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font: 13px var(--font-ui); }
.gl-top { display: flex; justify-content: space-between; gap: 16px; width: 100%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9fb3ff; font-variant-numeric: tabular-nums; }
.gl-top b { margin-left: 4px; color: #fff; font-size: 15px; letter-spacing: 0; }
.gl-screen { position: relative; border: 3px solid #1b2a8c; border-radius: 6px; background: #000; box-shadow: 0 0 0 1px #3d6bff, 0 0 24px rgba(61, 107, 255, .3); }
.gl-screen canvas { display: block; width: max(190px, min(342px, 80vw, calc((100vh - var(--taskbar-h) - 230px) * .905))); height: auto; aspect-ratio: 304 / 336; image-rendering: pixelated; outline: none; touch-action: none; }
.gl-msg { position: absolute; left: 50%; top: 57%; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 4px 10px; border-radius: 3px; background: rgba(0, 0, 0, .82); color: #ffd23f; font: 700 12px var(--font-ui); text-align: center; }
.gl-msg[hidden] { display: none; }
.gl-lives { display: flex; gap: 4px; min-height: 16px; }
.gl-lives canvas { width: 16px; height: 16px; image-rendering: pixelated; }

/* ---------- COMMANDES TACTILES de Snake et Glouton : la croix ou le joystick, sous le pouce ---------- */
.arcade { --pad-face: #4a5c43; --pad-hi: #66805d; --pad-lo: #35432f; --pad-edge: #141c13; --pad-ink: #d7f6e2; --pad-glow: #c7f0d8; }
.gl.arcade { --pad-face: #24379f; --pad-hi: #3e5ad4; --pad-lo: #19267a; --pad-edge: #060b3a; --pad-ink: #fff; --pad-glow: #a9c0ff; }
.arc-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 0; }
.arc-ctl { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  .arc-ctl { display: flex; flex-direction: column; gap: 8px; align-self: stretch; min-height: 0; }
  .arc-aux { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .arc-pad { position: relative; flex: none; height: 226px; container-type: size; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .sn-screen canvas { width: max(160px, min(360px, 72vw, calc(100dvh - var(--taskbar-h) - 400px))); }
  .gl-screen canvas { width: max(190px, min(342px, 80vw, calc((100dvh - var(--taskbar-h) - 420px) * .905))); }
}
/* la croix : deux barres qui n'en font qu'une, la branche appuyée s'enfonce et la croix bascule */
.dpad { --dpad: min(100cqh - 20px, 100cqw - 12px, 218px); position: absolute; left: 50%; top: calc(50% + clamp(0px, (100cqh - var(--dpad)) / 2 - 28px, 80px)); width: var(--dpad); height: var(--dpad); margin: calc(var(--dpad) / -2) 0 0 calc(var(--dpad) / -2);
  filter: drop-shadow(0 5px 0 var(--pad-edge)) drop-shadow(0 10px 10px rgba(0, 0, 0, .45)); transition: transform .07s ease-out; }
.dpad::before, .dpad::after { content: ''; position: absolute; border-radius: calc(var(--dpad) * .07); background: linear-gradient(180deg, var(--pad-hi), var(--pad-face) 55%, var(--pad-lo)) 0 0 / var(--dpad) var(--dpad) no-repeat; }
.dpad::before { left: 0; right: 0; top: 33.3%; bottom: 33.3%; background-position: 0 calc(var(--dpad) * -.333); box-shadow: inset 0 1px rgba(255, 255, 255, .2); }
.dpad::after { top: 0; bottom: 0; left: 33.3%; right: 33.3%; box-shadow: inset 0 1px rgba(255, 255, 255, .24); }
.dp-arm { position: absolute; z-index: 1; width: 33.4%; height: 33.4%; padding: 0; border: 0; border-radius: calc(var(--dpad) * .06); background: none; color: var(--pad-ink); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.dp-arm.up { left: 33.3%; top: 0; } .dp-arm.down { left: 33.3%; bottom: 0; } .dp-arm.left { left: 0; top: 33.3%; } .dp-arm.right { right: 0; top: 33.3%; }
.dp-arm svg { width: 42%; height: 42%; fill: currentColor; opacity: .72; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); transition: opacity .07s; }
.dp-arm.right svg { rotate: 90deg; } .dp-arm.down svg { rotate: 180deg; } .dp-arm.left svg { rotate: -90deg; }
.dp-hub { position: absolute; z-index: 1; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, .32), rgba(0, 0, 0, .1) 60%, transparent 72%); pointer-events: none; }
.arc-pad[data-dir="up"] .dp-arm.up, .arc-pad[data-dir="down"] .dp-arm.down, .arc-pad[data-dir="left"] .dp-arm.left, .arc-pad[data-dir="right"] .dp-arm.right { background: radial-gradient(circle, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 72%); }
.arc-pad[data-dir="up"] .dp-arm.up svg, .arc-pad[data-dir="down"] .dp-arm.down svg, .arc-pad[data-dir="left"] .dp-arm.left svg, .arc-pad[data-dir="right"] .dp-arm.right svg { opacity: 1; filter: drop-shadow(0 0 6px var(--pad-glow)); }
.arc-pad[data-dir="up"] .dpad { transform: perspective(460px) rotateX(10deg); }
.arc-pad[data-dir="down"] .dpad { transform: perspective(460px) rotateX(-10deg); }
.arc-pad[data-dir="left"] .dpad { transform: perspective(460px) rotateY(-10deg); }
.arc-pad[data-dir="right"] .dpad { transform: perspective(460px) rotateY(10deg); }
/* le joystick : le socle se pose sous le pouce, le chapeau suit le doigt */
.stick { position: absolute; inset: 0; }
.stick-base { --stick: min(100cqh - 24px, 100cqw - 16px, 172px); position: absolute; left: 50%; top: calc(50% + clamp(0px, (100cqh - var(--stick)) / 2 - 28px, 80px)); width: var(--stick); height: var(--stick); margin: calc(var(--stick) / -2) 0 0 calc(var(--stick) / -2); border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, .3) 0 44%, rgba(0, 0, 0, .12) 64%, rgba(255, 255, 255, .07) 66% 100%), var(--pad-lo);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .5), 0 0 0 2px var(--pad-edge), 0 0 0 5px rgba(255, 255, 255, .06); transition: transform .2s ease-out; }
.stick-base i { position: absolute; width: 0; height: 0; border: 7px solid transparent; opacity: .4; transition: opacity .08s; }
.stick-base i.up { left: 50%; top: 7px; margin-left: -7px; border-top-width: 0; border-bottom-color: var(--pad-ink); }
.stick-base i.down { left: 50%; bottom: 7px; margin-left: -7px; border-bottom-width: 0; border-top-color: var(--pad-ink); }
.stick-base i.left { top: 50%; left: 7px; margin-top: -7px; border-left-width: 0; border-right-color: var(--pad-ink); }
.stick-base i.right { top: 50%; right: 7px; margin-top: -7px; border-right-width: 0; border-left-color: var(--pad-ink); }
.arc-pad[data-dir="up"] .stick-base i.up, .arc-pad[data-dir="down"] .stick-base i.down, .arc-pad[data-dir="left"] .stick-base i.left, .arc-pad[data-dir="right"] .stick-base i.right { opacity: 1; filter: drop-shadow(0 0 4px var(--pad-glow)); }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 48%; height: 48%; margin: -24% 0 0 -24%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--pad-glow) 0, var(--pad-hi) 20%, var(--pad-face) 58%, var(--pad-lo) 100%);
  box-shadow: 0 5px 0 var(--pad-edge), 0 10px 14px rgba(0, 0, 0, .5), inset 0 -4px 8px rgba(0, 0, 0, .25); transition: transform .16s cubic-bezier(.3, 1.5, .5, 1); }
.arc-pad.held .stick-base, .arc-pad.held .stick-knob { transition: none; }
/* Jouer / Pause, et le choix des commandes */
.arc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-width: 104px; padding: 0 16px 0 14px; border: 0; border-radius: 21px; color: var(--pad-ink); font: 700 14px var(--font-ui); letter-spacing: .02em;
  background: linear-gradient(180deg, var(--pad-hi), var(--pad-face) 60%, var(--pad-lo)); box-shadow: 0 3px 0 var(--pad-edge), 0 5px 8px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .22); touch-action: manipulation; }
.arc-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pad-edge), 0 2px 4px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .22); }
.arc-start .ico { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.arc-start.on .ico { width: 12px; height: 14px; border-width: 0 4px; border-color: currentColor; }
.arc-mode { display: flex; gap: 3px; padding: 3px; border-radius: 13px; background: var(--pad-edge); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.arc-mode button { width: 44px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--pad-ink); opacity: .5; display: grid; place-items: center; touch-action: manipulation; }
.arc-mode button svg { width: 19px; height: 19px; fill: currentColor; }
.arc-mode button[aria-checked="true"] { opacity: 1; background: linear-gradient(180deg, var(--pad-hi), var(--pad-face)); box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 2px 3px rgba(0, 0, 0, .35); }
.arc-mode button:focus-visible, .arc-btn:focus-visible { outline: 2px solid var(--pad-glow); outline-offset: 2px; }

/* téléphone : la fenêtre prend tout l'écran — l'écran de jeu le plus grand possible, les commandes en bas, au pouce */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .sn-body, .gl-body { container-type: size; display: block; overflow: hidden; padding: 8px 12px 10px; }
  .arcade { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; align-items: start; }
  .arcade > .arc-stage { justify-self: center; }
  .arc-ctl { height: 100%; }
  .arc-pad { flex: 1 1 auto; height: auto; }
  .sn .sn-screen canvas { width: min(100cqw - 12px, 100cqh - 290px); }
  .gl .gl-screen canvas { width: min(100cqw - 6px, (100cqh - 306px) * .905); }
}
/* téléphone couché : la croix à gauche, l'écran au milieu sur toute la hauteur, le score et Jouer à droite */
@media (max-width: 760px) and (orientation: landscape), (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  .arcade { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 14px; row-gap: 12px; align-items: center; }
  .arcade > .arc-stage { grid-column: 2; grid-row: 1 / 3; }
  .arcade > .sn-top, .arcade > .gl-top { grid-column: 3; grid-row: 1; flex-wrap: wrap; justify-content: center; gap: 4px 16px; align-self: end; }
  .arc-ctl { display: contents; }
  .arc-pad { grid-column: 1; grid-row: 1 / 3; align-self: stretch; }
  .arc-aux { grid-column: 3; grid-row: 2; align-self: start; flex-direction: column; justify-content: flex-start; gap: 16px; }
  .sn .sn-screen canvas { width: min(100cqh - 12px, 100cqw - 470px); }
  .gl .gl-screen canvas { width: min((100cqh - 30px) * .905, 100cqw - 470px); }
}

/* ---------- raccords Olisé ---------- */

/* les niveaux du Démineur et les commandes du Solitaire passent dans la barre de menus « Jeu » */
.ms-body { background: #c0c0c0; padding: 6px; }
.ms-frame { padding: 5px; }
.ms-best { margin: 2px 0 0; color: #333; }
.sol-menu button[data-act="new"], .sol-menu button[data-act="undo"], .sol-menu button[data-act="draw"] { display: none; }
.sol-menu:not(:has(button[data-act="finish"]:not([hidden]))) { display: none; }
.sol-body { padding: 0; display: flex; flex-direction: column; container-type: inline-size; }
.sol { --cw: min(71px, calc((100cqw - 30px) / 7.6)); }
.sol-status { border-top: 1px solid var(--face-dark); box-shadow: inset 0 1px #fff; font: 11px var(--font-ui); padding: 3px 8px; color: #000; }

/* FreeCell et Spider Solitaire : les cartes du Solitaire sur plus de colonnes. Les longues colonnes se resserrent
   (patience.js), et sur les petites cartes l'indice grossit et tient sur une ligne, pour rester lisible. */
#w-freecell .sol-body, #w-spider .sol-body { overflow: hidden; }
.sol.fc, .sol.sp { min-height: 0; }
.sol.fc { --cw: min(71px, calc((100cqw - 24px) / 8.9)); }
.sol.sp { --cw: min(68px, calc((100cqw - 20px) / 11.1)); }
.sol.fc .sol-board, .sol.sp .sol-board { min-height: 0; padding: 10px 8px 12px; }
.sol.fc .sol-row { grid-template-columns: repeat(8, var(--cw)); }
.sol.sp .sol-row { grid-template-columns: repeat(10, var(--cw)); }
.sol.fc .sol-card .ci, .sol.sp .sol-card .ci { flex-direction: row; align-items: baseline; gap: 1px; left: 3px; top: 2px; font-size: calc(var(--cw) * .24); }
.sol.fc .sol-card .cf, .sol.sp .sol-card .cf { top: 24%; bottom: 19%; left: 27%; right: 27%; }   /* la figure laisse les deux indices lisibles */
.sol.small .sol-card { border-radius: calc(var(--cw) * .1); }
.sol.small .sol-card .ci { left: 2px; top: 1px; font-size: calc(var(--cw) * .36); letter-spacing: -.04em; }
.sol.small .sol-card .ci i { font-size: .8em; }
.sol.small .sol-card .ci.b { display: none; }
.sol.small .sol-card .cc { top: 34%; font-size: calc(var(--cw) * .52); }
.sol.small .sol-card .cf { top: 38%; bottom: 5%; left: 27%; right: 27%; }
.sol.small .sol-card.down { border-width: 1px; }
.fc-cell { background: rgba(0, 0, 0, .12); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2), inset 0 0 0 3px rgba(255, 255, 255, .1); }
.fc-cell.target:not(:has(.sol-card))::after { content: ''; position: absolute; left: -3px; top: -3px; width: calc(var(--cw) + 6px); height: calc(var(--ch) + 6px); border-radius: calc(var(--cw) * .1); pointer-events: none; animation: sol-glow .8s ease-in-out infinite alternate; }
.fc-top .sol-found:nth-child(5) { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), -5px 0 0 -3px rgba(255, 255, 255, .25); }
.sol.fc .fc-tab { margin-top: calc(var(--gap) * .8); }
.sp-foot { display: flex; justify-content: space-between; align-items: flex-end; width: calc(10 * var(--cw) + 9 * var(--gap)); margin: 0 auto; }
.sp-done, .sp-stock { box-shadow: none; }
.sp-done { width: calc(var(--cw) * 2.4); }
.sp-stock { width: calc(var(--cw) * 1.8); cursor: pointer; }
.sp-done::before { content: ''; position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); }
.sp-stock.empty::before { content: ''; position: absolute; right: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.sp-done .sol-card, .sp-stock .sol-card { left: calc(var(--f, 0) * var(--cw) * .2); }
.sp-done .sol-card { cursor: default; }
.sp-stock .sol-card { cursor: pointer; }
.sp-stock:focus-visible { outline: 2px solid #ffd23f; outline-offset: 3px; border-radius: 4px; }
.sol-card.hint { z-index: 1; animation: sol-hint .42s ease-in-out 4 alternate; box-shadow: 0 0 0 3px #7fd6ff, 0 0 14px 3px rgba(127, 214, 255, .75); }
.sol-col.hint::before { box-shadow: 0 0 0 3px #7fd6ff, 0 0 14px 3px rgba(127, 214, 255, .75); }
@keyframes sol-hint { from { transform: none; } to { transform: translateY(-3px); } }
.sol-col.nope::before { animation: sol-nope .34s ease-in-out; box-shadow: inset 0 0 0 2px #ffd23f; }
@media (prefers-reduced-motion: reduce) { .sol-card.hint { animation: none; } }

/* Démineur sur téléphone : la grille entière, centrée, les cases prennent la taille que l'écran permet */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .ms-body { container-type: size; display: grid; place-items: center; padding: 8px; }
  .ms { gap: 10px; --ms-cell: clamp(16px, min((100cqw - 26px) / var(--ms-w, 9), (100cqh - 168px) / var(--ms-h, 9)), 46px); }
  @supports (width: round(down, 10.5px, 1px)) { .ms { --ms-cell: round(down, clamp(16px, min((100cqw - 26px) / var(--ms-w, 9), (100cqh - 168px) / var(--ms-h, 9)), 46px), 1px); } }
  .ms-best { margin: 0; max-width: 100%; }
}
@media (max-width: 760px) and (orientation: landscape), (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  .ms { flex-direction: row; gap: 14px; --ms-cell: clamp(12px, min((100cqw - 290px) / var(--ms-w, 9), (100cqh - 26px) / var(--ms-h, 9)), 40px); }
  @supports (width: round(down, 10.5px, 1px)) { .ms { --ms-cell: round(down, clamp(12px, min((100cqw - 290px) / var(--ms-w, 9), (100cqh - 26px) / var(--ms-h, 9)), 40px), 1px); } }
  .ms-frame { display: flex; align-items: stretch; gap: 6px; }
  .ms-panel { flex-direction: column; justify-content: center; gap: 12px; margin: 0; }
  .ms-tools { flex-direction: column; }
  .ms-best { display: none; }
}

/* ---------- salons de discussion façon MSN et Caramail : pas de pièce, la discussion prend toute la place ---------- */
.sal.text-room .sal-room { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head" "log" "form"; }
.sal.text-room .sal-stage, .sal.text-room .sal-table, .sal.text-room #emojibtn, .sal.text-room .sal-games-btn { display: none !important; }
.sal-games { display: none; align-items: center; gap: 1px; margin-left: 4px; padding-left: 5px; border-left: 1px solid #d5e0ef; }
.sal.text-room .sal-games { display: flex; }
.sal-tools .sal-game { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; }
.sal-tools .sal-game img { width: 18px; height: 18px; image-rendering: auto; }
.sal-head-ico.chat, .sal-card-img.chat, .sal-item-img.chat { image-rendering: auto; object-fit: contain; }
.sal-cards.chats .sal-card-img.chat { background: linear-gradient(180deg, #f3f8ff, #dce9fb); padding: 8px; }
@media (max-width: 760px), (pointer: coarse) { .sal-tools .sal-game { width: 34px; height: 34px; } .sal-tools .sal-game img { width: 20px; height: 20px; } }

/* ---------- Le Donjon ---------- */
.dj-body { background: #14101f; padding: 10px 12px; display: flex; justify-content: center; }
.dj { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; color: #efe7ff; font: 13px var(--font-ui); }
.dj-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; width: 100%; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #b8a6e8; font-variant-numeric: tabular-nums; }
.dj-top b { margin-left: 4px; color: #fff; font-size: 15px; letter-spacing: 0; }
.dj-top i { font-style: normal; color: #8f7fc0; }
.dj-vague { color: #ffd23f; }
.dj-screen { position: relative; overflow: hidden; border: 3px solid #3a2a63; border-radius: 6px; background: #0b0814; box-shadow: 0 0 0 1px #6b4fb0, 0 0 22px rgba(107, 79, 176, .35); }
.dj-screen canvas { display: block; width: max(288px, min(576px, 92vw, calc((100dvh - var(--taskbar-h) - 260px) * 1.333))); height: auto; aspect-ratio: 192 / 144; image-rendering: pixelated; outline: none; touch-action: none; cursor: crosshair; }
.dj-msg { position: absolute; pointer-events: none; left: 50%; bottom: 6px; transform: translateX(-50%); width: max-content; max-width: 92%; padding: 3px 9px; border-radius: 3px; background: rgba(8, 6, 20, .82); color: #ffd23f; font: 700 12px var(--font-ui); text-align: center; }
.dj-msg[hidden] { display: none; }
.dj-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: 100%; }
.dj-tool { display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border: 2px solid; border-color: #6b5aa0 #2a2040 #2a2040 #6b5aa0; border-radius: 3px; background: #3a2e5e; color: #efe7ff; font: 12px var(--font-ui); }
.dj-tool i { font-style: normal; color: #ffd23f; font-variant-numeric: tabular-nums; }
.dj-tool.on { border-color: #2a2040 #6b5aa0 #6b5aa0 #2a2040; background: #55429a; color: #fff; }
.dj-tool:disabled { opacity: .45; }
.dj-aide { margin: 0; min-height: 30px; max-width: 46ch; text-align: center; font-size: 11.5px; line-height: 1.35; color: #b8a6e8; }
@media (max-width: 760px), (pointer: coarse) {
  .dj-body { padding: 6px 8px; align-items: center; }
  .dj-screen canvas { width: min(calc(100vw - 26px), calc((100dvh - var(--taskbar-h) - 248px) * 1.333)); }
  .dj-tool { min-height: 38px; padding: 0 11px; font-size: 13px; }
  .dj-aide { min-height: 0; font-size: 12px; }
}