/* ============================================================
   GOYSWEEPER XP : bureau Windows XP (Luna)
   Le chrome est permanent ; les skins (en bas) ne changent
   QUE le design de la grille (.grid / .cell).
   ============================================================ */

html, body { height: 100%; overflow: hidden; }
body {
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 13px;
  /* fond Bliss : ciel + colline */
  background:
    radial-gradient(140% 90% at 50% 118%, #3f9b2f 0%, #58b944 18%, #7ed453 32%, transparent 46%),
    radial-gradient(90% 60% at 18% 112%, #2e8123 0%, #4aa737 24%, transparent 52%),
    linear-gradient(180deg, #2f71d8 0%, #5a9ae6 34%, #9cc6f2 58%, #cfe6fa 74%, #e8f4fd 100%);
  background-attachment: fixed;
}
::selection { background: #316ac5; color: #fff; }

/* scrollbars XP-ish */
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: #f0f0ea; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #d6e5fa, #b0ccf5);
  border: 1px solid #7b9ebd; border-radius: 4px;
}

/* ---------- bureau ---------- */
#desktop {
  position: relative;
  height: calc(100vh - 42px);
  overflow: hidden;
}

.desktop-icons {
  position: absolute; left: 14px; top: 14px; z-index: 1;
  display: flex; flex-direction: column; gap: 18px;
  user-select: none;
}
.dicon {
  width: 88px; text-align: center; color: #fff; font-size: 11px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.85); line-height: 1.25;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 2px; cursor: default; border: 1px dotted transparent;
}
.dicon span { font-size: 32px; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.45)); }
.dicon em { font-style: normal; }
.dicon.selected { background: rgba(49,106,197,.45); border-color: #fff; }
.dicon:focus-visible { outline: none; border-color: #fff; }

/* ---------- fenêtres ---------- */
.window {
  position: absolute;
  background: #ece9d8;
  border: 3px solid #0855dd;
  border-top: none;
  border-radius: 8px 8px 3px 3px;
  box-shadow: 2px 6px 18px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  max-height: calc(100% - 8px);
  min-width: 320px;
}
.window.minimized { display: none; }
.window.maxed { height: 100%; max-height: 100%; border-radius: 0; }
.window:not(.active) { border-color: #7697d8; }

.titlebar {
  flex: none;
  height: 30px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #0058ee 0%, #3593ff 8%, #288eff 40%, #127dff 88%, #0361e2 93%, #0058ee 100%);
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 0 8px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  cursor: default; user-select: none; touch-action: none;
}
.window:not(.active) .titlebar {
  background: linear-gradient(180deg, #7697e7 0%, #9db9f2 45%, #7697e7 100%);
}
.t-ico { font-size: 15px; }
.t-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-btns { display: flex; gap: 2px; }
.tb {
  width: 22px; height: 22px; border-radius: 3px;
  border: 1px solid #fff; color: #fff; font-size: 11px; font-weight: 700;
  background: linear-gradient(180deg, #7ab1f7 0%, #3b8af0 50%, #2f7ae8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  cursor: default; display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
}
.tb:hover { filter: brightness(1.15); }
.tb:active { filter: brightness(.9); }
.tb.close { background: linear-gradient(180deg, #f2a48c 0%, #e0603d 45%, #c93a13 100%); }

.win-body {
  flex: 1; overflow: auto;
  padding: 10px;
}

/* ---------- barre d'outils de l'app ---------- */
.app-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  padding: 4px 2px 10px;
  border-bottom: 1px solid #d8d2bd;
  margin-bottom: 12px;
}
.tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tab {
  border-radius: 3px; color: #000;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  border: 1px solid #aca899;
  box-shadow: none;
  font-family: inherit; font-size: 12px; padding: 5px 14px;
  cursor: default;
}
.tab:hover { border-color: #f7a53b; box-shadow: inset 0 0 0 1px #ffd9a0; }
.tab.active {
  color: #000;
  background: #fff;
  border-color: #003c74;
  box-shadow: inset 0 2px 0 #ffb32e;
}
.skin-select {
  border-radius: 0; background: #fff; color: #000;
  border: 1px solid #7f9db9;
  font-size: 12px; padding: 4px 6px; cursor: default; outline: none;
}

/* ---------- panneaux du jeu (façon groupbox XP) ---------- */
.view { max-width: none; margin: 0; padding: 0; }
.panel {
  border-radius: 3px; background: #ece9d8;
  border: 2px solid; border-color: #fff #aca899 #aca899 #fff;
  box-shadow: none;
  position: relative; padding: 8px;
}
.menubar {
  margin: -4px -4px 8px; padding: 0 2px 2px;
  border-bottom: 1px solid #aca899;
  box-shadow: 0 1px 0 #fff;
  display: flex; gap: 2px; font-size: 12px; color: #000;
  user-select: none;
}
.menubar span { padding: 3px 9px; cursor: default; }
.menubar span:hover { background: #316ac5; color: #fff; }

/* menus déroulants authentiques */
.menus .menu { position: relative; }
.menus .m-label { display: inline-block; padding: 3px 9px; cursor: default; }
.menus .menu.open .m-label, .menus .m-label:hover { background: #316ac5; color: #fff; }
.m-drop {
  display: none; position: absolute; left: 0; top: 100%; z-index: 300;
  background: #fff; border: 1px solid #aca899;
  box-shadow: 3px 3px 6px rgba(0,0,0,.3);
  min-width: 200px; padding: 2px; white-space: nowrap;
}
.menu.open .m-drop { display: block; }
.m-item {
  position: relative; padding: 5px 24px 5px 28px; font-size: 12px;
  color: #000; cursor: default; display: flex; justify-content: space-between; gap: 18px;
}
.m-item:hover { background: #316ac5; color: #fff; }
.m-item.checked::before {
  content: "✓"; position: absolute; left: 9px; font-weight: 700;
}
.m-key { color: #888; }
.m-item:hover .m-key { color: #dce6f5; }
.m-sep { height: 1px; background: #d8d2bd; margin: 3px 2px; }

/* fenêtre du démineur classique ajustée à la grille */
#win-classic { width: fit-content; max-width: calc(100% - 8px); }

/* fenêtre compte */
.acct-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.acct-form input { border-radius: 0; background: #fff; color: #000; border: 1px solid #7f9db9; padding: 7px 10px; font-size: 13px; outline: none; }
.acct-form input:focus { border-color: #f7a53b; box-shadow: 0 0 0 1px #ffd9a0; }
.acct-hello { margin-bottom: 8px; color: #000; }
.acct-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#acct-in .board-note { display: block; margin-top: 4px; }

.difficulty { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.diff {
  border-radius: 3px; color: #000;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  border: 1px solid #aca899;
  font-family: inherit; font-size: 12px; box-shadow: none;
  padding: 5px 16px; cursor: default;
}
.diff:hover { border-color: #f7a53b; box-shadow: inset 0 0 0 1px #ffd9a0; }
.diff.active { color: #000; background: #fff; border-color: #003c74; box-shadow: inset 0 2px 0 #ffb32e; }

/* HUD rétro du démineur (fidèle à l'app XP) */
.hud {
  background: #ece9d8; padding: 8px; margin-bottom: 12px;
  border: 2px solid; border-color: #aca899 #fff #fff #aca899;
}
.led {
  border-radius: 0; background: #000; color: #f00;
  border: 1px solid; border-color: #808080 #fff #fff #808080;
  text-shadow: none; font-family: "Courier New", monospace;
}
.status-led {
  border-radius: 0; background: #000; color: #0f0;
  border: 1px solid; border-color: #808080 #fff #fff #808080;
  text-shadow: none;
}
.face {
  border-radius: 3px; width: 46px; height: 46px; font-size: 1.5rem;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  color: #000; text-shadow: none;
  border: 1px solid #aca899;
  box-shadow: none; cursor: default;
}
.face:hover { transform: none; border-color: #f7a53b; box-shadow: inset 0 0 0 1px #ffd9a0; }
.face:active { background: #ece9d8; }

/* barre d'état */
.hint {
  color: #000; text-shadow: none; font-size: 12px; text-align: left;
  background: #ece9d8; padding: 4px 10px; margin-top: 10px;
  border: 1px solid; border-color: #aca899 #fff #fff #aca899;
  box-shadow: none; border-radius: 0;
}
.hint::before { content: "💡 "; }

/* ---------- multijoueur ---------- */
.lobby { max-width: 460px; margin: 0 auto; }
.lobby h2, .lobby h2 * { color: #000; }
.rules, .room-line, .vs { color: #444; }
.rules b { color: #000; }
.room-line b { color: #0855dd; text-shadow: none; }
.lobby input, .join-row input {
  border-radius: 0; background: #fff; color: #000;
  border: 1px solid #7f9db9;
}
.lobby input:focus, .join-row input:focus { border-color: #f7a53b; box-shadow: 0 0 0 1px #ffd9a0; }
.btn {
  border-radius: 3px; background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  color: #000; border: 1px solid #aca899;
  box-shadow: none; font-family: inherit; font-size: 12px; cursor: default;
}
.btn:hover { border-color: #f7a53b; box-shadow: inset 0 0 0 1px #ffd9a0; }
.btn:active { background: #ece9d8; box-shadow: none; }
.btn.primary { border: 1px solid #003c74; box-shadow: 0 0 0 1px #7f9db9; font-weight: 700; }
.btn.primary:hover { border-color: #f7a53b; box-shadow: 0 0 0 1px #7f9db9, inset 0 0 0 1px #ffd9a0; }
.btn.ghost { background: linear-gradient(180deg, #fff 0%, #ece9d8 100%); color: #000; }
.score { border-radius: 3px; border: 1px solid #aca899; background: #fff; }
.score.p0 .pts { color: #0000ff; text-shadow: none; }
.score.p1 .pts { color: #ff0000; text-shadow: none; }
.error { color: #c00; }
.live-dot { background: #3c9838; box-shadow: none; }
.canvas-wrap {
  border-radius: 0;
  border: 1px solid; border-color: #aca899 #fff #fff #aca899;
}

/* ---------- classement ---------- */
.board-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.bt {
  border-radius: 3px 3px 0 0; font-size: 12px; padding: 5px 12px;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  border: 1px solid #aca899; cursor: default; color: #000;
}
.bt:hover { border-color: #f7a53b; }
.bt.active { background: #fff; border-color: #003c74; box-shadow: inset 0 2px 0 #ffb32e; font-weight: 700; }
.board-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #7f9db9; font-size: 12px;
}
.board-table th {
  text-align: left; padding: 4px 8px;
  background: linear-gradient(180deg, #fff, #ece9d8);
  border-right: 1px solid #d8d2bd; border-bottom: 1px solid #aca899;
  font-weight: 400; color: #000;
}
.board-table td { padding: 4px 8px; border-bottom: 1px solid #f0ede0; color: #000; }
.board-table tbody tr:hover { background: #e8f0fb; }
.board-empty { text-align: center; color: #777; padding: 14px !important; }
.board-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
}
.board-note { font-size: 11px; color: #555; }
.board-foot .btn { padding: 5px 14px; }

/* ---------- barre des tâches ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 42px; z-index: 5000;
  display: flex; align-items: stretch; gap: 8px;
  background: linear-gradient(180deg, #4993e6 0%, #2157d7 6%, #245edb 50%, #1941a5 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.start-btn {
  border: none; cursor: default;
  padding: 0 22px 0 12px;
  font-family: inherit; font-size: 16px; font-weight: 700; font-style: italic;
  color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.6);
  background: linear-gradient(180deg, #7ede70 0%, #3c9838 45%, #2f7d2a 100%);
  border-radius: 0 12px 12px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 2px 0 4px rgba(0,0,0,.3);
  display: flex; align-items: center; gap: 6px;
}
.start-btn:hover { filter: brightness(1.08); }
.start-btn.open, .start-btn:active { filter: brightness(.88); }
.start-ico { font-style: normal; font-size: 18px; }

.task-btns { flex: 1; display: flex; align-items: center; gap: 4px; padding: 5px 0; overflow: hidden; }
.task-btn {
  height: 100%; min-width: 130px; max-width: 200px;
  border-radius: 3px; border: 1px solid rgba(0,0,0,.25);
  background: linear-gradient(180deg, #5c94ef 0%, #3671dd 50%, #2d62c9 100%);
  color: #fff; font-family: inherit; font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default;
}
.task-btn.active {
  background: linear-gradient(180deg, #1c48a8 0%, #2b5cc4 100%);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.45);
}

.xp-tray {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px 0 18px;
  background: linear-gradient(180deg, #38b0f2 0%, #1290e9 50%, #0d6fc4 100%);
  box-shadow: inset 2px 1px 3px rgba(0,0,0,.25);
  color: #fff;
}
.clock { font-size: 12px; color: #fff; min-width: 40px; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,.4); font-variant-numeric: tabular-nums; }
.mute-btn {
  border: none; background: transparent; color: #fff;
  width: 24px; height: 24px; font-size: 14px; border-radius: 3px; cursor: default;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.mute-btn:hover { background: rgba(255,255,255,.18); border: none; }

/* ---------- menu Démarrer ---------- */
.start-menu {
  position: fixed; left: 0; bottom: 42px; z-index: 6000;
  width: 300px;
  background: #fff;
  border: 2px solid #0855dd; border-radius: 6px 6px 0 0;
  box-shadow: 4px -2px 14px rgba(0,0,0,.4);
  overflow: hidden;
}
.sm-head {
  background: linear-gradient(180deg, #1c5cd0 0%, #4293f5 50%, #1c5cd0 100%);
  color: #fff; font-weight: 700; font-size: 15px;
  padding: 12px 12px; display: flex; align-items: center; gap: 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.sm-avatar {
  width: 36px; height: 36px; border-radius: 5px;
  background: #fff; border: 2px solid #9cc0f0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.sm-body { padding: 6px; }
.sm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; font-size: 13px; color: #000; cursor: default;
  border-radius: 3px;
}
.sm-item span { font-size: 20px; }
.sm-item:hover { background: #316ac5; color: #fff; }
.sm-sep { height: 1px; background: #d8d2bd; margin: 5px 8px; }

/* détails XP */
.tab:focus-visible, .btn:focus-visible, .diff:focus-visible, .face:focus-visible, .bt:focus-visible {
  outline: 1px dotted #000; outline-offset: -4px;
}

@media (max-width: 900px) {
  .window { min-width: 0; }
  #win-classic { left: 4px !important; top: 4px !important; width: calc(100% - 8px) !important; }
}

/* ============================================================
   SKINS DE GRILLE : structure rétro commune (fidèle à l'original),
   seule la palette change par thème.
   ============================================================ */

/* structure : cases biseautées collées, coins carrés, chiffres pixel */
.grid {
  gap: 0; padding: 0; border-radius: 0;
  background: var(--gFace);
  border: 3px solid;
  border-color: var(--gDark) var(--gLight) var(--gLight) var(--gDark);
}
.cell {
  width: 30px; height: 30px; border-radius: 0;
  background: var(--gFace);
  border: 3px solid;
  border-color: var(--gLight) var(--gDark) var(--gDark) var(--gLight);
  box-shadow: none; transition: none;
  font-family: Arial, sans-serif; font-weight: 900; font-size: 1.05rem;
  position: relative;
}
.cell:hover:not(.open) {
  background: var(--gFaceHi);
  border-color: var(--gLight) var(--gDark) var(--gDark) var(--gLight);
  box-shadow: none;
}
.cell.open {
  background: var(--gOpen);
  border: 1px solid var(--gOpenEdge);
  border-top-color: var(--gDark); border-left-color: var(--gDark);
  box-shadow: none; animation: none;
}
.cell.flag::before {
  content: "⚑"; color: var(--gFlag);
  text-shadow: 1px 1px 0 rgba(0,0,0,.35); font-size: 1.1rem;
}

/* bombe à pointes redessinée (SVG masqué, recolorée par thème) */
.cell.mine::before {
  content: ""; width: 18px; height: 18px; border-radius: 0;
  background: var(--gBomb);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.6'/%3E%3Crect x='7.25' y='1' width='1.5' height='14'/%3E%3Crect x='1' y='7.25' width='14' height='1.5'/%3E%3Crect x='7.25' y='1.8' width='1.5' height='12.4' transform='rotate(45 8 8)'/%3E%3Crect x='7.25' y='1.8' width='1.5' height='12.4' transform='rotate(-45 8 8)'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.6'/%3E%3Crect x='7.25' y='1' width='1.5' height='14'/%3E%3Crect x='1' y='7.25' width='14' height='1.5'/%3E%3Crect x='7.25' y='1.8' width='1.5' height='12.4' transform='rotate(45 8 8)'/%3E%3Crect x='7.25' y='1.8' width='1.5' height='12.4' transform='rotate(-45 8 8)'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
}
/* reflet blanc de la bombe, comme l'original */
.cell.mine::after {
  content: ""; position: absolute;
  width: 3px; height: 3px; background: #fff;
  left: calc(50% - 4px); top: calc(50% - 4px);
}
.cell.mine.p0::before { background: var(--gBombP0, var(--gBomb)); }
.cell.mine.p1::before { background: var(--gBombP1, var(--gBomb)); }
.cell.boom { background: var(--gBoom) !important; }

/* ---------- ORIGINAL : Windows classique ---------- */
body.skin-original {
  --gFace: #c0c0c0; --gFaceHi: #c8c8c8;
  --gLight: #ffffff; --gDark: #808080;
  --gOpen: #c0c0c0; --gOpenEdge: #adadad;
  --gFlag: #ff0000; --gBomb: #000000; --gBoom: #ff0000;
  --gBombP0: #0048c0; --gBombP1: #c00468;
}
.skin-original .cell.n1 { color: #0000ff; text-shadow: none; }
.skin-original .cell.n2 { color: #008000; text-shadow: none; }
.skin-original .cell.n3 { color: #ff0000; text-shadow: none; }
.skin-original .cell.n4 { color: #000080; text-shadow: none; }
.skin-original .cell.n5 { color: #800000; text-shadow: none; }
.skin-original .cell.n6 { color: #008080; text-shadow: none; }
.skin-original .cell.n7 { color: #000000; text-shadow: none; }
.skin-original .cell.n8 { color: #808080; text-shadow: none; }

/* ---------- NÉON : mêmes biseaux, palette synthwave ---------- */
body.skin-neon {
  --gFace: #1a2547; --gFaceHi: #24315e;
  --gLight: #3d5296; --gDark: #0a0e1a;
  --gOpen: #0c1226; --gOpenEdge: #1e2a44;
  --gFlag: #ff2ec4; --gBomb: #ff4d5e; --gBoom: #3a0d16;
  --gBombP0: #00e5ff; --gBombP1: #ff2ec4;
}
.skin-neon .cell.n1 { color: #00e5ff; text-shadow: 0 0 8px rgba(0,229,255,.7); }
.skin-neon .cell.n2 { color: #a3ff3c; text-shadow: 0 0 8px rgba(163,255,60,.7); }
.skin-neon .cell.n3 { color: #ff2ec4; text-shadow: 0 0 8px rgba(255,46,196,.7); }
.skin-neon .cell.n4 { color: #ffd23c; text-shadow: 0 0 8px rgba(255,210,60,.7); }
.skin-neon .cell.n5 { color: #ff8a3c; text-shadow: 0 0 8px rgba(255,138,60,.7); }
.skin-neon .cell.n6 { color: #3cffd2; text-shadow: 0 0 8px rgba(60,255,210,.7); }
.skin-neon .cell.n7 { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,.7); }
.skin-neon .cell.n8 { color: #6b7aa3; text-shadow: none; }
.skin-neon .cell.flag::before { text-shadow: 0 0 10px rgba(255,46,196,.9); }

/* ---------- AURUM : mêmes biseaux, obsidienne & or ---------- */
body.skin-aurum {
  --gFace: #221c11; --gFaceHi: #2c2416;
  --gLight: #55461f; --gDark: #0a0805;
  --gOpen: #0e0c08; --gOpenEdge: #241d10;
  --gFlag: #d4af37; --gBomb: #d4af37; --gBoom: #2e130a;
  --gBombP0: #f1d689; --gBombP1: #b08d57;
}
.skin-aurum .cell.n1 { color: #e6c968; text-shadow: 0 0 8px rgba(230,201,104,.5); }
.skin-aurum .cell.n2 { color: #b8c47e; text-shadow: 0 0 8px rgba(184,196,126,.5); }
.skin-aurum .cell.n3 { color: #cf7d4e; text-shadow: 0 0 8px rgba(207,125,78,.5); }
.skin-aurum .cell.n4 { color: #9db4c9; text-shadow: 0 0 8px rgba(157,180,201,.5); }
.skin-aurum .cell.n5 { color: #c98a8a; text-shadow: 0 0 8px rgba(201,138,138,.5); }
.skin-aurum .cell.n6 { color: #8ec9b8; text-shadow: 0 0 8px rgba(142,201,184,.5); }
.skin-aurum .cell.n7 { color: #ede3cb; text-shadow: 0 0 8px rgba(237,227,203,.5); }
.skin-aurum .cell.n8 { color: #8d7f5f; text-shadow: none; }
.skin-aurum .cell.flag::before { text-shadow: 0 0 12px rgba(212,175,55,.8); }

/* ---------- ZEN : mêmes biseaux, washi & vermillon ---------- */
body.skin-zen {
  --gFace: #ece5d3; --gFaceHi: #f4eddb;
  --gLight: #fffdf6; --gDark: #b8ac90;
  --gOpen: #faf7ef; --gOpenEdge: #d5cab2;
  --gFlag: #c0402b; --gBomb: #26232b; --gBoom: #f3cfc5;
  --gBombP0: #1f4e5f; --gBombP1: #c0402b;
}
.skin-zen .cell.n1 { color: #1f4e5f; text-shadow: none; }
.skin-zen .cell.n2 { color: #5a7d4f; text-shadow: none; }
.skin-zen .cell.n3 { color: #c0402b; text-shadow: none; }
.skin-zen .cell.n4 { color: #4a3f78; text-shadow: none; }
.skin-zen .cell.n5 { color: #8a3324; text-shadow: none; }
.skin-zen .cell.n6 { color: #2e6e63; text-shadow: none; }
.skin-zen .cell.n7 { color: #26232b; text-shadow: none; }
.skin-zen .cell.n8 { color: #8d8677; text-shadow: none; }
.skin-zen .cell.flag::before { text-shadow: none; }

/* ---------- ARCADE : mêmes biseaux, pixel sombre & orange ---------- */
body.skin-arcade {
  --gFace: #464b54; --gFaceHi: #545a65;
  --gLight: #6b727e; --gDark: #26282e;
  --gOpen: #313439; --gOpenEdge: #26282e;
  --gFlag: #ffffff; --gBomb: #16181c; --gBoom: #8c2a1c;
  --gBombP0: #35c2f1; --gBombP1: #ff4fd2;
}
.skin-arcade .cell { font-family: "Courier New", monospace; }
.skin-arcade .cell.n1 { color: #35c2f1; text-shadow: 0 0 6px rgba(53,194,241,.4); }
.skin-arcade .cell.n2 { color: #7ede3f; text-shadow: 0 0 6px rgba(126,222,63,.4); }
.skin-arcade .cell.n3 { color: #ff5340; text-shadow: 0 0 6px rgba(255,83,64,.4); }
.skin-arcade .cell.n4 { color: #b064ff; text-shadow: 0 0 6px rgba(176,100,255,.4); }
.skin-arcade .cell.n5 { color: #ffb03c; text-shadow: 0 0 6px rgba(255,176,60,.4); }
.skin-arcade .cell.n6 { color: #3cf1c8; text-shadow: 0 0 6px rgba(60,241,200,.4); }
.skin-arcade .cell.n7 { color: #ffffff; text-shadow: 0 0 6px rgba(255,255,255,.4); }
.skin-arcade .cell.n8 { color: #9aa1ad; text-shadow: none; }
/* drapeau = tuile orange, signature du thème */
.skin-arcade .cell.flag {
  background: #ff9526;
  border-color: #ffc27a #b35c07 #b35c07 #ffc27a;
}
.skin-arcade .cell.mine::before { box-shadow: none; }
.skin-arcade .cell.mine { background: var(--gFaceHi); }

/* ---------- PARTY : mêmes biseaux, herbe & sable ---------- */
body.skin-party {
  --gFace: #6fd968; --gFaceHi: #82e57b;
  --gLight: #a8f1a0; --gDark: #3c8437;
  --gOpen: #e9d6a4; --gOpenEdge: #d6c28e;
  --gFlag: #e02b4d; --gBomb: #1c1f27; --gBoom: #f0a48c;
  --gBombP0: #2762d9; --gBombP1: #e02b4d;
}
.skin-party .cell.alt:not(.open):not(.flag) { background: #60cc59; }
.skin-party .cell.alt:not(.open):not(.flag):hover { background: #74dc6d; }
.skin-party .cell.open.alt { background: #e0cb96; }
.skin-party .cell.n1 { color: #2762d9; text-shadow: none; }
.skin-party .cell.n2 { color: #2f7d2f; text-shadow: none; }
.skin-party .cell.n3 { color: #d93030; text-shadow: none; }
.skin-party .cell.n4 { color: #20208f; text-shadow: none; }
.skin-party .cell.n5 { color: #8f2020; text-shadow: none; }
.skin-party .cell.n6 { color: #2a9c9c; text-shadow: none; }
.skin-party .cell.n7 { color: #222222; text-shadow: none; }
.skin-party .cell.n8 { color: #666666; text-shadow: none; }

/* ---------- PARTY 3D : rendu voxel Three.js du démineur classique ---------- */
#solo-3d-wrap { display: none; width: 620px; max-width: 100%; height: 430px; }
body.skin-party3d #view-solo .grid-wrap { display: none; }
body.skin-party3d #solo-3d-wrap { display: block; }

/* les autres grilles (duel, etc.) reprennent la palette Party */
body.skin-party3d {
  --gFace: #6fd968; --gFaceHi: #82e57b;
  --gLight: #a8f1a0; --gDark: #3c8437;
  --gOpen: #e9d6a4; --gOpenEdge: #d6c28e;
  --gFlag: #e02b4d; --gBomb: #1c1f27; --gBoom: #f0a48c;
  --gBombP0: #2762d9; --gBombP1: #e02b4d;
}
.skin-party3d .cell.alt:not(.open):not(.flag) { background: #60cc59; }
.skin-party3d .cell.open.alt { background: #e0cb96; }
.skin-party3d .cell.n1 { color: #2762d9; text-shadow: none; }
.skin-party3d .cell.n2 { color: #2f7d2f; text-shadow: none; }
.skin-party3d .cell.n3 { color: #d93030; text-shadow: none; }
.skin-party3d .cell.n4 { color: #20208f; text-shadow: none; }
.skin-party3d .cell.n5 { color: #8f2020; text-shadow: none; }
.skin-party3d .cell.n6 { color: #2a9c9c; text-shadow: none; }
.skin-party3d .cell.n7 { color: #222222; text-shadow: none; }
.skin-party3d .cell.n8 { color: #666666; text-shadow: none; }

/* ---------- popup de volume façon XP ---------- */
.vol-pop {
  position: fixed; right: 46px; bottom: 46px; z-index: 6500;
  width: 74px; background: #ece9d8;
  border: 1px solid #7f9db9;
  box-shadow: 3px 3px 8px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 8px 6px;
}
.vol-pop.hidden { display: none; }
.vol-title { font-size: 11px; color: #000; }
#vol-slider {
  writing-mode: vertical-lr; direction: rtl;
  height: 96px; width: 22px;
  accent-color: #316ac5;
  background: transparent; cursor: default;
}
.vol-mute { font-size: 11px; color: #000; display: flex; align-items: center; gap: 4px; cursor: default; }
.vol-mute input { accent-color: #316ac5; }

/* ---------- boutons de difficulté des apps 3D (mêmes styles que .diff) ---------- */
.gbtn {
  border-radius: 3px; color: #000;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  border: 1px solid #aca899;
  font-family: inherit; font-size: 12px; box-shadow: none;
  padding: 5px 16px; cursor: default;
}
.gbtn:hover { border-color: #f7a53b; box-shadow: inset 0 0 0 1px #ffd9a0; }
.gbtn.active { color: #000; background: #fff; border-color: #003c74; box-shadow: inset 0 2px 0 #ffb32e; }

/* ---------- fenêtre mixeur "Contrôle de volume" ---------- */
.mixer {
  display: flex; gap: 4px; justify-content: space-between;
  background: #ece9d8; padding: 6px 2px;
}
.mix-ch {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 8px 4px; border-left: 1px solid #d8d2bd;
}
.mix-ch:first-child { border-left: none; }
.mix-ch:first-child .mix-name { font-weight: 700; }
.mix-name { font-size: 11px; color: #000; text-align: center; min-height: 26px; }
.mix-slider {
  writing-mode: vertical-lr; direction: rtl;
  height: 110px; width: 22px;
  accent-color: #316ac5; background: transparent; cursor: default;
}

/* ---------- Internet Explorer ---------- */
.ie-e {
  font-family: "Times New Roman", serif; font-style: italic; font-weight: 700;
  color: #2f6fdd; font-size: 34px; line-height: 1;
  text-shadow: 1px 1px 0 rgba(0,0,0,.25), 0 0 6px rgba(255,200,60,.55);
}
.ie-e.small { font-size: 15px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.4); }
.task-btn .ie-e.small { font-size: 14px; }

.ie-body { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden !important; }
.ie-menubar {
  display: flex; gap: 2px; font-size: 12px; padding: 2px 4px;
  border-bottom: 1px solid #d8d2bd; background: #ece9d8; user-select: none;
}
.ie-menubar span { padding: 3px 8px; cursor: default; }
.ie-menubar span:hover { background: #316ac5; color: #fff; }
.ie-toolbar {
  display: flex; align-items: center; gap: 3px; padding: 4px 6px;
  border-bottom: 1px solid #d8d2bd; background: #ece9d8;
}
.ie-btn {
  border: 1px solid transparent; background: transparent; border-radius: 3px;
  font-family: inherit; font-size: 12px; padding: 5px 9px; cursor: default; color: #000;
  white-space: nowrap;
}
.ie-btn:hover { border-color: #aca899; background: linear-gradient(180deg, #fff, #ece9d8); }
.ie-btn:active { background: #ded9c4; }
.ie-sep { width: 1px; height: 20px; background: #aca899; margin: 0 4px; }
.ie-addrbar {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px;
  border-bottom: 1px solid #d8d2bd; background: #ece9d8;
}
.ie-addr-label { font-size: 12px; color: #555; }
#ie-addr {
  flex: 1; border: 1px solid #7f9db9; background: #fff; color: #000;
  font-size: 12px; padding: 4px 6px; outline: none;
}
.ie-tabstrip {
  display: flex; align-items: flex-end; gap: 2px; padding: 4px 6px 0;
  background: #dcd8c4; border-bottom: 1px solid #aca899; overflow-x: auto;
}
.ie-tab {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #f4f2e8, #dcd8c4);
  border: 1px solid #aca899; border-bottom: none;
  border-radius: 4px 4px 0 0; padding: 4px 6px 4px 10px;
  font-size: 12px; max-width: 180px; cursor: default; color: #000;
}
.ie-tab.active { background: #fff; padding-bottom: 5px; margin-bottom: -1px; }
.ie-tab-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 120px; }
.ie-tab-x {
  border: none; background: transparent; font-size: 10px; color: #666;
  width: 16px; height: 16px; border-radius: 2px; cursor: default; padding: 0;
}
.ie-tab-x:hover { background: #e0603d; color: #fff; }
.ie-tab-plus {
  border: 1px solid #aca899; border-bottom: none; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #f4f2e8, #dcd8c4);
  width: 26px; padding: 4px 0; font-size: 12px; font-weight: 700; cursor: default;
}
.ie-frames { flex: 1; position: relative; background: #fff; }
.ie-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ie-frame.hidden { display: none; }
.ie-statusbar {
  display: flex; justify-content: space-between; font-size: 11px; color: #333;
  padding: 3px 8px; background: #ece9d8; border-top: 1px solid #fff;
  box-shadow: inset 0 1px 0 #aca899;
}

/* ---------- fenêtres redimensionnables ---------- */
.window { resize: both; overflow: hidden; min-height: 120px; }
.window.maxed { resize: none; }

/* ---------- MSN Messenger ---------- */
.msn-body { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden !important; }
.msn-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #eaf4fd 0%, #cfe6fa 55%, #b8d9f5 100%);
  border-bottom: 1px solid #9cc0e4;
}
.msn-fly { font-size: 26px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.25)); }
.msn-title { font-size: 13px; font-weight: 700; color: #1c3f94; }
.msn-sub { font-size: 11px; color: #3a6ea5; }
.msn-msgs {
  flex: 1; overflow-y: auto; background: #fff;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.msn-line.system { font-size: 11px; color: #888; font-style: italic; text-align: center; }
.msn-who { font-size: 11px; color: #808080; }
.msn-line.me .msn-who { color: #3a6ea5; }
.msn-text { font-size: 13px; color: #000; padding-left: 12px; word-break: break-word; }
.msn-compose {
  display: flex; gap: 6px; padding: 8px;
  background: #ece9d8; border-top: 1px solid #aca899;
}
#msn-input {
  flex: 1; border: 1px solid #7f9db9; background: #fff; color: #000;
  font-size: 13px; padding: 6px 8px; outline: none; border-radius: 0;
}
.msn-compose .btn { padding: 6px 10px; white-space: nowrap; }

@keyframes wizz {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -3px); }
  80% { transform: translate(6px, 4px); }
}
.window.wizzing { animation: wizz .45s linear 2; }

/* ============================================================
   RESPONSIVE MOBILE (≤ 700px) : fenêtres plein écran,
   icônes en grille tactile, contrôles agrandis
   ============================================================ */
@media (max-width: 700px) {
  #desktop { height: calc(100vh - 40px); height: calc(100dvh - 40px); }

  .desktop-icons {
    position: static; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 12px 2px; padding: 10px 6px;
    max-height: none;
  }
  .dicon { width: auto; font-size: 10px; }
  .dicon span { font-size: 28px; }
  .dicon .ie-e { font-size: 30px; }

  .window {
    position: fixed;
    left: 0 !important; top: 0 !important;
    width: 100vw !important; height: calc(100vh - 40px) !important; height: calc(100dvh - 40px) !important;
    max-height: none; min-width: 0;
    border-radius: 0; border-left: none; border-right: none;
    resize: none;
  }
  #win-classic { width: 100vw !important; max-width: none; }
  .titlebar { height: 36px; border-radius: 0; }
  .tb { width: 32px; height: 28px; font-size: 13px; }
  .win-body { padding: 8px; }

  .taskbar { height: 40px; gap: 4px; }
  .start-btn { font-size: 14px; padding: 0 14px 0 10px; border-radius: 0 10px 10px 0; }
  .task-btn { min-width: 44px; max-width: 64px; padding: 0 8px; font-size: 0; }
  .task-btn span { font-size: 17px; }
  .xp-tray { padding: 0 8px 0 10px; gap: 5px; }
  .clock { min-width: 34px; font-size: 11px; }
  .start-menu { width: calc(100vw - 8px); left: 4px; bottom: 40px; }
  .vol-pop { right: 6px; bottom: 44px; }

  .hud { gap: 8px; padding: 6px; }
  .led { font-size: 1.15rem; min-width: 68px; padding: 4px 8px; }
  .status-led { font-size: .85rem; min-width: 68px; padding: 6px 8px; }
  .face { width: 40px; height: 40px; font-size: 1.2rem; }

  .app-toolbar { gap: 6px; padding-bottom: 6px; }
  .gbtn, .diff { padding: 6px 10px; font-size: 11px; }
  .canvas-wrap { height: 50vh; min-height: 240px; }

  .scoreboard { gap: 8px; }
  .score { min-width: 110px; padding: 6px 10px; }
  .menubar { overflow-x: auto; }
  .mixer { flex-wrap: wrap; }
  .mix-ch { min-width: 42%; border-left: none; border-top: 1px solid #d8d2bd; }
  .ie-toolbar { flex-wrap: wrap; }
  .board-foot { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- SAKURA : kanji japonais ---------- */
body.skin-sakura {
  --gFace: #f6dfe4; --gFaceHi: #fbeaee;
  --gLight: #fff6f8; --gDark: #c9a3ad;
  --gOpen: #fdf6f7; --gOpenEdge: #e8ccd3;
  --gFlag: #e0529c; --gBomb: #3a3341; --gBoom: #f3b8c8;
  --gBombP0: #4a76c9; --gBombP1: #e0529c;
}
.skin-sakura .cell.n1 { color: #4a76c9; } .skin-sakura .cell.n2 { color: #4f8a5b; }
.skin-sakura .cell.n3 { color: #d0405a; } .skin-sakura .cell.n4 { color: #6a4a9c; }
.skin-sakura .cell.n5 { color: #a34a2a; } .skin-sakura .cell.n6 { color: #2a8a8a; }
.skin-sakura .cell.n7 { color: #3a3341; } .skin-sakura .cell.n8 { color: #9c8a94; }
.skin-sakura .cell.open { font-size: 0; }
.skin-sakura .cell.open::after {
  font-size: 15px; font-weight: 700;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
.skin-sakura .cell.n1::after { content: "一"; } .skin-sakura .cell.n2::after { content: "二"; }
.skin-sakura .cell.n3::after { content: "三"; } .skin-sakura .cell.n4::after { content: "四"; }
.skin-sakura .cell.n5::after { content: "五"; } .skin-sakura .cell.n6::after { content: "六"; }
.skin-sakura .cell.n7::after { content: "七"; } .skin-sakura .cell.n8::after { content: "八"; }
.skin-sakura .cell.flag::before { font-size: 15px; }

/* ---------- JADE : numéraux financiers chinois, laque & or ---------- */
body.skin-jade {
  --gFace: #a32c24; --gFaceHi: #b53a30;
  --gLight: #d4675c; --gDark: #6e1712;
  --gOpen: #7c1d17; --gOpenEdge: #641511;
  --gFlag: #ffd766; --gBomb: #1c1410; --gBoom: #3f0b08;
  --gBombP0: #7ec9e8; --gBombP1: #ffd766;
}
.skin-jade .cell.n1 { color: #ffd766; } .skin-jade .cell.n2 { color: #9fe08a; }
.skin-jade .cell.n3 { color: #ffa26b; } .skin-jade .cell.n4 { color: #9fc4ff; }
.skin-jade .cell.n5 { color: #f2b8d0; } .skin-jade .cell.n6 { color: #8ae0d0; }
.skin-jade .cell.n7 { color: #ffffff; } .skin-jade .cell.n8 { color: #d8a898; }
.skin-jade .cell.open { font-size: 0; }
.skin-jade .cell.open::after {
  font-size: 13px; font-weight: 700;
  font-family: "PingFang SC", "Songti SC", "Noto Serif SC", serif;
}
.skin-jade .cell.n1::after { content: "壹"; } .skin-jade .cell.n2::after { content: "贰"; }
.skin-jade .cell.n3::after { content: "叁"; } .skin-jade .cell.n4::after { content: "肆"; }
.skin-jade .cell.n5::after { content: "伍"; } .skin-jade .cell.n6::after { content: "陆"; }
.skin-jade .cell.n7::after { content: "柒"; } .skin-jade .cell.n8::after { content: "捌"; }
.skin-jade .cell.flag::before { font-size: 15px; text-shadow: 0 0 8px rgba(255,215,102,.7); }

/* ---------- HANGUL : coréen, blanc & taegeuk ---------- */
body.skin-hangul {
  --gFace: #f4f6fb; --gFaceHi: #ffffff;
  --gLight: #ffffff; --gDark: #b9c4dc;
  --gOpen: #e9edf6; --gOpenEdge: #ccd5e8;
  --gFlag: #cd2e3a; --gBomb: #1c2333; --gBoom: #f3c3c8;
  --gBombP0: #0047a0; --gBombP1: #cd2e3a;
}
.skin-hangul .cell.n1 { color: #0047a0; } .skin-hangul .cell.n2 { color: #cd2e3a; }
.skin-hangul .cell.n3 { color: #0047a0; } .skin-hangul .cell.n4 { color: #cd2e3a; }
.skin-hangul .cell.n5 { color: #1c2333; } .skin-hangul .cell.n6 { color: #0047a0; }
.skin-hangul .cell.n7 { color: #cd2e3a; } .skin-hangul .cell.n8 { color: #8a93a8; }
.skin-hangul .cell.open { font-size: 0; }
.skin-hangul .cell.open::after {
  font-size: 13px; font-weight: 800;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
.skin-hangul .cell.n1::after { content: "일"; } .skin-hangul .cell.n2::after { content: "이"; }
.skin-hangul .cell.n3::after { content: "삼"; } .skin-hangul .cell.n4::after { content: "사"; }
.skin-hangul .cell.n5::after { content: "오"; } .skin-hangul .cell.n6::after { content: "육"; }
.skin-hangul .cell.n7::after { content: "칠"; } .skin-hangul .cell.n8::after { content: "팔"; }
.skin-hangul .cell.flag::before { font-size: 15px; }

/* ---------- ZOO : zodiaque animalier ---------- */
body.skin-zoo {
  --gFace: #7cc96f; --gFaceHi: #8fd982;
  --gLight: #b5eda8; --gDark: #4d9143;
  --gOpen: #f0e6c8; --gOpenEdge: #d8ccaa;
  --gFlag: #d0402b; --gBomb: #222; --gBoom: #f0a48c;
}
.skin-zoo .cell.open { font-size: 0; }
.skin-zoo .cell.open::after { font-size: 15px; }
.skin-zoo .cell.n1::after { content: "🐭"; } .skin-zoo .cell.n2::after { content: "🐮"; }
.skin-zoo .cell.n3::after { content: "🐯"; } .skin-zoo .cell.n4::after { content: "🐰"; }
.skin-zoo .cell.n5::after { content: "🐲"; } .skin-zoo .cell.n6::after { content: "🐍"; }
.skin-zoo .cell.n7::after { content: "🐴"; } .skin-zoo .cell.n8::after { content: "🐑"; }
.skin-zoo .cell.flag::before { content: "🐾"; font-size: 14px; text-shadow: none; }
.skin-zoo .cell.mine::before {
  content: "💥"; background: none; -webkit-mask: none; mask: none;
  width: auto; height: auto; font-size: 16px;
}
.skin-zoo .cell.mine::after { display: none; }
.skin-zoo .cell.boom::before { content: "🐺"; }

/* ---------- pas de sélection de texte (comme un vrai OS) ---------- */
body, .window, .taskbar, .start-menu, .desktop-icons, .panel, .hint,
.menubar, .board-table, .msn-head, .ie-menubar, .ie-toolbar, .ie-statusbar {
  -webkit-user-select: none; user-select: none;
}
input, textarea, .msn-msgs, .ie-frame {
  -webkit-user-select: auto; user-select: auto;
}