.taskbar-tasks { display:flex; align-items:center; flex:1; min-width:0; height:100%; gap:3px; overflow-x:auto; scrollbar-width:thin; }
.taskbar-tasks .taskbar-app { min-width:38px; }
.game-app { top:48px; left:max(30px,calc((100vw - 820px)/2)); width:min(820px,calc(100vw - 60px)); height:min(790px,calc(100dvh - 105px)); }
.game-body { flex:1; min-height:0; overflow:auto; background:#165942; color:#f3f8ef; font:16px/1.5 Tahoma,Verdana,sans-serif; }
.game-toolbar { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:10px; color:#273327; background:#ece9d8; border-bottom:1px solid #aeb3a5; }
.game-action,.game-toolbar select { border:1px solid #8c988a; border-radius:3px; padding:8px 12px; color:#243028; background:linear-gradient(#fff,#e1e5d9); box-shadow:inset 1px 1px #fff; font:14px Tahoma,sans-serif; }
.game-action:hover:not(:disabled) { border-color:#2b68be; background:#fff; }
.game-action[aria-pressed="true"] { background:#cad9ec; border-color:#2762b1; box-shadow:inset 1px 1px 2px #36517250; }
.game-action:disabled { opacity:.48; cursor:default; }
.game-toolbar label { display:flex; align-items:center; gap:6px; font-size:14px; }
.game-tally { margin-left:auto; font-size:13px; }
.game-message { padding:10px 18px; margin:0; color:inherit; min-height:44px; font-size:14px; }
.game-message.game-won { background:#eff8d4; color:#214519; font-size:17px; font-weight:bold; border-block:1px solid #a0c777; }
.game-help { margin:0; padding:16px 18px; font-size:14px; line-height:1.7; color:#d2e4d8; }
.game-app :focus-visible { outline:3px solid #ffc959; outline-offset:2px; }
.desktop-dragging .game-body { pointer-events:none; }

/* Mines: raised squares and LED counters, like the desktop original. */
#mines-app { width:min(610px,calc(100vw - 60px)); left:max(30px,calc((100vw - 610px)/2)); }
#mines-game { color:#252e30; background:#c3c3c3; }
#mines-game .game-help { color:#343d40; }
.mines-panel { display:flex; justify-content:space-between; align-items:center; margin:18px 18px 0; padding:12px; border:3px solid; border-color:#808080 #f7f7f7 #f7f7f7 #808080; background:#bfbfbf; }
.mines-readout { display:grid; gap:4px; text-align:center; }
.mines-readout > span { min-width:3.3ch; padding:0 5px; background:#190b08; color:#ff4634; font:700 34px/1.1 "Courier New",monospace; letter-spacing:2px; }
.mines-readout small { font-size:12px; color:#303638; }
.mines-face { width:46px; height:46px; border:3px solid; border-color:#fff #777 #777 #fff; background:#d2d2d2; color:#403315; font:32px/1 Arial,sans-serif; }
.mines-scroll { overflow:auto; padding:3px 18px 10px; }
.mines-board { --mines-columns:9; display:grid; grid-template-columns:repeat(var(--mines-columns),minmax(26px,1fr)); width:100%; max-width:450px; margin-inline:auto; min-width:calc(var(--mines-columns) * 26px); border:3px solid; border-color:#777 #fff #fff #777; }
.mine-cell { aspect-ratio:1; width:100%; padding:0; min-width:0; border:3px solid; border-color:#fff #7a7a7a #7a7a7a #fff; background:#c6c6c6; font:700 clamp(16px,3vw,23px)/1 "Courier New",monospace; color:#242629; touch-action:manipulation; user-select:none; }
.mine-cell.revealed { border:1px solid #949494; background:#c3c3c3; }
.mine-cell[data-number="1"].revealed { color:#002bbd; }
.mine-cell[data-number="2"].revealed { color:#12631c; }
.mine-cell[data-number="3"].revealed { color:#bf0909; }
.mine-cell[data-number="4"].revealed { color:#00006c; }
.mine-cell[data-number="5"].revealed { color:#7c0808; }
.mine-cell[data-number="6"].revealed { color:#006767; }
.mine-cell.exploded { background:#ee4537; color:#100e0c; }
.mine-cell.mine { color:#151515; }
.mine-cell:focus-visible { outline:3px solid #074ed0; outline-offset:-3px; position:relative; z-index:1; }

/* Mahjongg: a compact 72-tile layered layout. */
.mahjong-scroll { padding:4px 18px 12px; overflow:auto; }
.mahjong-board { position:relative; width:100%; min-width:280px; aspect-ratio:1.29; border-radius:6px; background:radial-gradient(ellipse,#276747,#123e2d); box-shadow:inset 0 0 60px #082d2460; }
.mahjong-tile { position:absolute; left:calc(3% + var(--tile-x) * 5.75% + var(--tile-z) * .6%); top:calc(5% + var(--tile-y) * 7.15% - var(--tile-z) * .75%); width:11%; height:13.75%; z-index:calc(1 + var(--tile-z)); padding:0; border:1px solid #c7bea5; border-radius:5px; background:linear-gradient(120deg,#fffdf2,#e8e4ce); box-shadow:2px 4px 0 #b5ab8b,3px 5px 3px #082f25b3; color:#a22627; display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:Georgia,"Times New Roman",serif; user-select:none; touch-action:manipulation; }
.mahjong-tile span { font-size:clamp(12px,2.4vw,23px); font-weight:bold; line-height:1; }
.mahjong-tile strong { font-size:clamp(19px,3.6vw,34px); line-height:1.05; }
.mahjong-tile[data-suit="bamboo"] { color:#146143; }
.mahjong-tile[data-suit="circles"] { color:#194d8b; }
.mahjong-tile.blocked { background:linear-gradient(120deg,#d8d5bf,#c6c3ad); color:#746c60; border-color:#a69d85; cursor:default; }
.mahjong-tile.free:hover { background:#fff; transform:translateY(-2px); }
.mahjong-tile.selected,.mahjong-tile.hinted { outline:3px solid #ffcc3f; outline-offset:-3px; background:#fff1bd; }
.mahjong-tile.selected { transform:translateY(-3px); }

/* Solitaire: seven columns with overlapping, selectable card runs. */
#solitaire-game { background:#0c6b47; }
.solitaire-scroll { padding:6px 18px 12px; overflow:auto; }
.solitaire-table { container-type:inline-size; --card-height:clamp(67px,17cqw,137px); --card-step:clamp(19px,4cqw,31px); --card-gap:clamp(4px,1.2cqw,10px); width:100%; min-width:266px; }
.solitaire-top,.solitaire-columns { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--card-gap); }
.solitaire-top { margin-bottom:26px; }
.sol-slot { position:relative; min-width:0; height:var(--card-height); }
.sol-pile-label { position:absolute; top:calc(100% + 3px); width:100%; text-align:center; color:#d5ece0; white-space:nowrap; font-size:12px; }
.playing-card,.sol-empty { position:absolute; top:0; left:0; width:100%; height:var(--card-height); border:1px solid #d9decd; border-radius:5px; padding:0; background:#fffdf4; color:#172129; box-shadow:0 2px 2px #063b294f; font-family:Georgia,serif; touch-action:manipulation; }
.sol-empty,.playing-card.empty-card { border:2px solid #86c7a369; background:#08573a55; box-shadow:inset 0 1px 4px #073f2944; color:#acd2b79c; }
.playing-card.card-back { border:3px solid #eeedde; background:repeating-linear-gradient(45deg,transparent,transparent 3px,#fafaff33 3px,#fafaff33 4px),repeating-linear-gradient(-45deg,#184bb0,#184bb0 3px,#386ed4 3px,#386ed4 4px); }
.playing-card.red-card { color:#c12c31; }
.card-corner { position:absolute; top:3px; left:4px; display:flex; align-items:center; gap:2px; font-size:clamp(13px,2.8cqw,22px); font-weight:bold; line-height:.95; }
.card-corner i { display:inline; font-size:.9em; font-style:normal; }
.card-corner-bottom { top:auto; left:auto; bottom:3px; right:4px; transform:rotate(180deg); }
.card-suit { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(24px,6cqw,45px); }
.sol-column { position:relative; min-height:calc(var(--card-height) + (var(--pile-length) - 1) * var(--card-step)); padding-bottom:12px; }
.sol-column .playing-card { top:calc(var(--card-position) * var(--card-step)); }
.playing-card.selected-card { outline:3px solid #ffd95e; outline-offset:-3px; background:#fff2bc; }
.playing-card.face-up:hover { filter:brightness(.96); }
/* Face-down cards and covered placeholders pass clicks through to the column, so a run can be dropped anywhere on it. */
.sol-column .playing-card.card-back,.sol-column .sol-empty[aria-hidden="true"] { pointer-events:none; }
.hint-dest { outline:3px dashed #ffd95e; outline-offset:2px; border-radius:5px; }
.stock-card.empty-card { font-size:32px; }

@media(max-width:650px) {
  .game-app,#mines-app { inset:5px 5px 45px; width:auto; height:auto; }
  .game-toolbar { gap:6px; padding:8px; }
  .game-action,.game-toolbar select { font-size:14px; padding:8px; }
  .game-tally { width:100%; margin:0; }
  .game-message { padding:10px 12px; }
  .game-help { padding:12px; }
  .mines-panel { margin:12px 10px 0; padding:10px; }
  .mines-scroll { padding:2px 10px 8px; }
  .mahjong-scroll,.solitaire-scroll { padding:4px 8px 10px; }
  .taskbar-tasks .taskbar-app { flex:0 0 34px; min-width:34px; padding-inline:4px; }
  .mahjong-tile { border-radius:3px; box-shadow:1px 3px 0 #b5ab8b,2px 4px 2px #082f25b3; }
  .card-suit { opacity:.85; }
}