/* Minesweeper. Everything is scoped to .ms. */
.ms { --line: #1c2b4a; --panel: #0b1328; --text: #dfe9ff; --muted: #8aa3c4; --accent: #55d6ff; --warm: #ffd166;
  --cs: 32px; --bv: 3px; --vc: 9; --vr: 9;
  --n1: #55d6ff; --n2: #5ee67a; --n3: #ff6b81; --n4: #b48cff; --n5: #ffb347; --n6: #3fe0d0; --n7: #f4f6fb; --n8: #9fb2cf;
  position: relative; max-width: 1060px; margin: 0 auto; padding: 4px 0 6px; color: var(--text);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ms [hidden] { display: none !important; }
.ms button { font-family: inherit; line-height: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ms :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ms-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- difficulty ---------- */
.ms-top { display: flex; justify-content: center; margin: 0 0 10px; }
.ms-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); width: min(100%, 560px); }
.ms-lv { border: 0; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; padding: 6px 4px 5px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: background-color .18s, color .18s; min-width: 0; }
.ms-lv b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ms-lv small { font-size: 11px; opacity: 0.8; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) { .ms-lv:hover { color: #fff; background: rgba(255,255,255,0.05); } }
.ms-lv[aria-checked="true"] { background: #e8edf2; color: #0b1328; }
.ms-lv[aria-checked="true"] small { opacity: 0.7; }

/* ---------- the classic frame: counter, face, timer, field ---------- */
.ms-panel { width: max-content; max-width: 100%; margin: 0 auto; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, #13203d, #0d1730); border: 1px solid #22375c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 30px rgba(0,0,0,0.35); box-sizing: border-box; }
.ms-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 6px 8px; border-radius: 9px; background: #081024; box-shadow: inset 0 2px 4px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.05); }
.ms-lcd { position: relative; min-width: 66px; height: 38px; padding: 0 8px; border-radius: 6px; background: #12060a; box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 0 0 1px #2a1218;
  font: 800 27px/38px ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing: 2px; text-align: right; color: #ff4d5e; text-shadow: 0 0 8px rgba(255,60,80,0.65); font-variant-numeric: tabular-nums; box-sizing: border-box; }
.ms-lcd::before { content: '888'; position: absolute; right: 8px; top: 0; color: #ff4d5e; opacity: 0.08; text-shadow: none; }
.ms-lcd span { position: relative; }
.ms-face { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 12px; border: 0; cursor: pointer; background: linear-gradient(180deg, #2c4774, #1f3459);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.18), inset -2px -2px 0 rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.35); display: grid; place-items: center; transition: transform .12s; }
.ms-face:active { transform: translateY(1px) scale(0.96); box-shadow: inset -1px -1px 0 rgba(255,255,255,0.12), inset 2px 2px 0 rgba(0,0,0,0.4); }
.ms-face svg { width: 36px; height: 36px; display: block; overflow: visible; }
.ms-f-head { fill: #ffd166; stroke: #b88a1c; stroke-width: 1.4; }
.ms-f-eyes { fill: #1a1200; }
.ms-f-smile, .ms-f-dead path { fill: none; stroke: #1a1200; stroke-width: 2.2; stroke-linecap: round; }
.ms-f-oh { fill: #1a1200; display: none; }
.ms-f-cool { display: none; } .ms-f-cool path { stroke: #0b0f1a; stroke-width: 2; fill: none; } .ms-f-cool rect { fill: #0b0f1a; }
.ms-f-dead { display: none; }
.ms-face.is-press .ms-f-smile { display: none; } .ms-face.is-press .ms-f-oh { display: block; }
.ms-face.is-win .ms-f-cool { display: block; } .ms-face.is-win .ms-f-eyes { display: none; }
.ms-face.is-lose .ms-f-dead { display: block; } .ms-face.is-lose .ms-f-eyes, .ms-face.is-lose .ms-f-smile, .ms-face.is-lose .ms-f-oh { display: none; }
.ms-face.is-lose .ms-f-head { fill: #f2b950; }
.ms-face.is-busy svg { animation: ms-spin 0.9s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms-face.pop svg { animation: ms-facepop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes ms-facepop { from { transform: scale(.6); } }

.ms-area { position: relative; }
.ms-wrap { position: relative; margin: 0 auto; border-radius: 6px; padding: 3px; background: #050a18; box-shadow: inset 2px 2px 0 #030712, inset -2px -2px 0 #2a3f66; box-sizing: border-box; }
.ms-view { position: relative; overflow: auto; overscroll-behavior: contain; touch-action: none; scrollbar-width: thin; scrollbar-color: #2a3f66 transparent; border-radius: 3px; }
.ms-board { display: grid; grid-template-columns: repeat(var(--vc), var(--cs)); grid-auto-rows: var(--cs); width: max-content; font-size: calc(var(--cs) * 0.6); font-weight: 800; touch-action: none; outline: none; }
.ms-row { display: contents; }

/* cells: raised tiles, sunk once opened */
.ms-c { position: relative; display: grid; place-items: center; line-height: 1; cursor: pointer; box-sizing: border-box;
  background: linear-gradient(145deg, #3d5f92, #2c4a78); box-shadow: inset var(--bv) var(--bv) 0 rgba(255,255,255,0.2), inset calc(var(--bv) * -1) calc(var(--bv) * -1) 0 rgba(0,0,0,0.42); }
@media (hover: hover) { .ms-c:not(.ms-o):hover { background: linear-gradient(145deg, #4a6ea6, #33558a); } }
.ms-c.ms-p, .ms-c.ms-o { background: #0f1a33; box-shadow: inset 0 0 0 0.5px rgba(70,104,160,0.42); cursor: default; }
.ms-c.ms-p { background: #14213f; }
.ms-c:focus { outline: none; }
.ms-c:focus-visible { outline: none; }
.ms-kb .ms-c:focus { outline: none; z-index: 2; box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 1px var(--accent); }
.ms-c svg { width: 74%; height: 74%; display: block; pointer-events: none; }
.ms-c.n1 { color: var(--n1); } .ms-c.n2 { color: var(--n2); } .ms-c.n3 { color: var(--n3); } .ms-c.n4 { color: var(--n4); }
.ms-c.n5 { color: var(--n5); } .ms-c.n6 { color: var(--n6); } .ms-c.n7 { color: var(--n7); } .ms-c.n8 { color: var(--n8); }
.ms-c.ms-o[class*=" n"] { text-shadow: 0 0 calc(var(--cs) * 0.25) currentColor; }
.ms-c.ms-q { color: #dfe9ff; font-size: 0.9em; }
.ms-c.ms-q::after { content: '?'; }
.ms-c.ms-f svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
.ms-c.ms-f.ms-new svg { animation: ms-plant .28s cubic-bezier(.2,1.6,.4,1); transform-origin: 40% 90%; }
@keyframes ms-plant { from { transform: scale(0.2) translateY(40%); opacity: 0; } }
.ms-c.ms-m { background: #172440; }
.ms-c.ms-boom { background: radial-gradient(circle, #ff8a5b 0 20%, #e5394b 60%, #a8162a); z-index: 1; }
.ms-c.ms-boom svg { animation: ms-boom .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes ms-boom { from { transform: scale(1.8); } }
.ms-c.ms-wrong { background: #2a1830; }
.ms-c.ms-wrong svg + svg { position: absolute; width: 74%; height: 74%; }
.ms-c.ms-hint { animation: ms-hint 1s ease-in-out infinite; z-index: 1; }
@keyframes ms-hint { 50% { box-shadow: inset 0 0 0 3px var(--warm), 0 0 14px 2px rgba(255,209,102,0.75); } }
.ms-c.ms-flash { background: #1a2b52; box-shadow: inset 0 0 0 2px rgba(255,107,129,0.75); }

/* opening cascade, mines appearing, win shimmer */
.ms-c.ms-pop { animation: ms-open .26s cubic-bezier(.2,.8,.3,1) both; animation-delay: var(--d, 0ms); }
@keyframes ms-open {
  0% { background: linear-gradient(145deg, #3d5f92, #2c4a78); box-shadow: inset var(--bv) var(--bv) 0 rgba(255,255,255,0.2), inset calc(var(--bv) * -1) calc(var(--bv) * -1) 0 rgba(0,0,0,0.42); color: transparent; text-shadow: none; transform: scale(1); }
  45% { transform: scale(0.84); }
  100% { transform: scale(1); }
}
.ms-c.ms-reveal svg { animation: ms-mine .32s cubic-bezier(.2,1.5,.4,1) both; animation-delay: var(--d, 0ms); }
@keyframes ms-mine { from { transform: scale(0); opacity: 0; } }
.ms-c.ms-shine { animation: ms-shine .7s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes ms-shine { 30% { background: #2a5a8a; box-shadow: inset 0 0 0 1px rgba(85,214,255,0.7), 0 0 10px rgba(85,214,255,0.5); } }
.ms-panel.ms-shake { animation: ms-shake .42s; }
@keyframes ms-shake { 15% { transform: translate(-5px, 2px); } 30% { transform: translate(5px, -2px); } 45% { transform: translate(-4px, -1px); } 60% { transform: translate(3px, 2px); } 80% { transform: translate(-1px, 0); } }

/* scroll hints when the field is bigger than its window */
.ms-edge { position: absolute; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 3; }
.ms-edge-l, .ms-edge-r { top: 3px; bottom: 3px; width: 18px; } .ms-edge-t, .ms-edge-b { left: 3px; right: 3px; height: 18px; }
.ms-edge-l { left: 3px; background: linear-gradient(90deg, rgba(4,6,15,0.85), transparent); } .ms-edge-r { right: 3px; background: linear-gradient(270deg, rgba(4,6,15,0.85), transparent); }
.ms-edge-t { top: 3px; background: linear-gradient(180deg, rgba(4,6,15,0.85), transparent); } .ms-edge-b { bottom: 3px; background: linear-gradient(0deg, rgba(4,6,15,0.85), transparent); }
.ms-wrap.ov-l .ms-edge-l, .ms-wrap.ov-r .ms-edge-r, .ms-wrap.ov-t .ms-edge-t, .ms-wrap.ov-b .ms-edge-b { opacity: 1; }

/* long-press progress ring (drawn around the finger, not under it) */
.ms-ring { position: fixed; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; pointer-events: none; z-index: 1150; opacity: 0; transform: scale(0.7); transition: opacity .12s, transform .12s; }
.ms-ring circle { fill: none; stroke-width: 5; }
.ms-ring-bg { stroke: rgba(4,6,15,0.55); stroke-width: 9; }
.ms-ring-fg { stroke: var(--warm); stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: 170; transform: rotate(-90deg); transform-origin: 32px 32px; }
.ms-ring.on { opacity: 1; transform: scale(1); transition-delay: 80ms; }
.ms-ring.on .ms-ring-fg { animation: ms-ring var(--lp, 350ms) linear forwards; }
.ms-ring.flagmode .ms-ring-fg { stroke: var(--accent); }
@keyframes ms-ring { to { stroke-dashoffset: 0; } }
.ms-ring.done { opacity: 0; transform: scale(1.35); transition: opacity .25s, transform .25s; }
.ms-ring.done .ms-ring-fg { stroke-dashoffset: 0; animation: none; }

/* effects layer: shockwave, confetti */
.ms-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; border-radius: 6px; }
.ms-wave { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid rgba(255,140,90,0.9); animation: ms-wave .6s ease-out forwards; }
@keyframes ms-wave { to { transform: scale(14); opacity: 0; border-width: 1px; } }
.ms-bit { position: absolute; width: 7px; height: 11px; border-radius: 2px; animation: ms-bit 1.3s cubic-bezier(.2,.7,.4,1) forwards; animation-delay: var(--dl, 0ms); opacity: 0; }
@keyframes ms-bit { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }

.ms-toast { position: absolute; left: 50%; top: 14px; z-index: 7; transform: translate(-50%, -6px); opacity: 0; pointer-events: none; background: rgba(232,237,242,0.96); color: #0b1328; font-weight: 700; font-size: 13.5px;
  padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); white-space: nowrap; transition: opacity .18s, transform .18s; }
.ms-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- bottom bar ---------- */
.ms-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 10px auto 0; max-width: 760px; }
.ms-mode { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); flex: none; }
.ms-md { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 13.5px; padding: 0 14px 0 11px; min-height: 40px; border-radius: 999px; cursor: pointer; transition: background-color .18s, color .18s; }
.ms-md svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .ms-md:hover { color: #fff; } }
#ms-md-dig[aria-checked="true"] { background: #e8edf2; color: #0b1328; }
#ms-md-flag[aria-checked="true"] { background: #ff6b81; color: #22040a; }
.ms-status { order: 3; flex: 1 1 100%; min-width: 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.35; }
.ms-status b { color: #fff; font-weight: 700; }
.ms-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.ms-ib { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: #c9d7ef; cursor: pointer; transition: background-color .18s, color .18s; }
@media (hover: hover) { .ms-ib:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: #fff; } }
.ms-ib:disabled { opacity: 0.35; cursor: default; }
.ms-ib svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; min-height: 40px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
@media (hover: hover) { .ms-btn:hover:not(:disabled) { border-color: var(--accent); } }
.ms-btn:active:not(:disabled) { transform: translateY(1px); }
.ms-btn:disabled { opacity: 0.4; cursor: default; }
.ms-btn-primary { background: var(--warm); color: #1a1200; border-color: var(--warm); }
@media (hover: hover) { .ms-btn-primary:hover:not(:disabled) { background: #ffe08a; border-color: #ffe08a; } }

/* ---------- dialogs ---------- */
.ms-overlay { position: fixed; inset: 0; background: rgba(2,5,14,0.74); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 16px; }
.ms-overlay:not([hidden]) .ms-dialog { animation: ms-pop .2s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ms-pop { from { transform: scale(.94) translateY(8px); opacity: 0; } }
.ms-dialog { background: #0b1328; border: 1px solid #244b6b; border-radius: 16px; padding: 22px 20px 18px; width: min(100%, 420px); max-height: calc(100% - 8px); overflow: auto; overscroll-behavior: contain; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.55); box-sizing: border-box; }
.ms-dialog:focus { outline: none; }
.ms-dialog h3 { margin: 0 0 4px; color: #fff; font-size: 23px; letter-spacing: -0.01em; }
.ms-dialog p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.ms-big { font: 800 40px/1.1 var(--font, inherit); color: #fff; margin: 6px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ms-badge { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1200; background: var(--warm); padding: 3px 9px; border-radius: 999px; margin: 0 0 10px; }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 16px; }
.ms-grid div { background: #0f1a33; border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px 6px; }
.ms-grid b { display: block; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.ms-grid span { font-size: 11px; color: var(--muted); }
.ms-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ms-actions .ms-btn { flex: 1 1 auto; }
.ms-close { position: sticky; top: 0; float: right; margin: -12px -8px 0 0; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.ms-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.ms-dialog.ms-left { text-align: left; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; margin: 8px 0 14px; }
.ms-table th, .ms-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: right; }
.ms-table th:first-child, .ms-table td:first-child { text-align: left; }
.ms-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.ms-table td.cur { color: var(--warm); font-weight: 700; }
.ms-tabs { display: flex; gap: 4px; margin: 4px 0 6px; flex-wrap: wrap; }
.ms-tab { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 0 12px; min-height: 34px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ms-tab[aria-selected="true"] { background: #e8edf2; color: #0b1328; border-color: #e8edf2; }
.ms-h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ms-opt { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.ms-opt input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.ms-opt span { flex: 1 1 auto; font-size: 14.5px; color: #fff; font-weight: 600; }
.ms-opt small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.ms-opt select { background: #0f1a33; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 14px; }
.ms-keys { margin: 4px 0 12px; padding: 0; list-style: none; font-size: 13.5px; color: var(--text); }
.ms-keys li { padding: 4px 0; display: flex; gap: 10px; }
.ms-keys b { flex: 0 0 136px; color: var(--muted); font-weight: 600; }
.ms-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 8px; text-align: left; }
.ms-form label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ms-form input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; background: #0f1a33; color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 8px; font-size: 16px; font-variant-numeric: tabular-nums; }
.ms-form input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.ms-presets { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 4px 0 8px; }
.ms-note { font-size: 12.5px !important; min-height: 1.5em; }
.ms-note.bad { color: #ff8a9a !important; }

/* ---------- phones ---------- */
@media (max-width: 560px) {
  .ms-top { margin-bottom: 8px; }
  .ms-lv b { font-size: 12.5px; }
  .ms-lv small { font-size: 10.5px; }
  .ms-panel { padding: 6px; border-radius: 12px; }
  .ms-hud { margin-bottom: 6px; padding: 5px 6px; }
  .ms-bar { margin-top: 8px; }
  .ms-status { order: 3; flex-basis: 100%; }
  .ms-md { padding: 0 12px 0 9px; }
  .ms-tools .ms-btn { padding: 0 11px; }
  .ms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) { .ms:not(.ms-fit) .ms-tools .ms-btn { display: none; } }
@media (max-width: 380px) { .ms-lv[data-level="intermediate"] b { font-size: 0; } .ms-lv[data-level="intermediate"] b::after { content: 'Medium'; font-size: 12.5px; } }

/* ---------- full screen (.ms-fit is set by game.js inside the immersive stage) ---------- */
.ms.ms-fit { max-width: none; height: 100%; margin: 0; padding: 6px 4px 6px; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.ms-fit .ms-top { flex: none; margin: 0 0 6px; }
.ms-fit .ms-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: auto; max-width: none; margin: 0; align-self: stretch; }
.ms-fit .ms-hud { flex: none; }
.ms-fit .ms-area { flex: 1 1 auto; min-height: 0; }
.ms-fit .ms-wrap { position: absolute; inset: 0; margin: auto; }   /* sized by game.js; never feeds back into the layout */
.ms-fit .ms-bar { flex: none; margin-top: 6px; width: 100%; max-width: none; }
.ms-fit .ms-status { order: 0; flex: 1 1 120px; }
@media (max-width: 560px) {   /* full screen on a phone held upright: one slim row of controls, the status line under it */
  .ms-fit:not(.ms-land) .ms-bar { flex-wrap: wrap; gap: 2px 6px; }
  .ms-fit:not(.ms-land) .ms-tools .ms-btn { display: none; }
  .ms-fit:not(.ms-land) .ms-status { order: 3; flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
}
/* landscape: controls in a column beside the field */
.ms.ms-land { display: grid; grid-template-columns: clamp(184px, 22vw, 250px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 8px 10px; padding: 6px; }
.ms-land .ms-top { grid-column: 1; grid-row: 1; margin: 0; }
.ms-land .ms-levels { grid-template-columns: 1fr 1fr; }
.ms-land .ms-panel { display: contents; }
.ms-land .ms-hud { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
.ms-land .ms-area { grid-column: 2; grid-row: 1 / -1; padding: 6px; border-radius: 14px; background: linear-gradient(180deg, #13203d, #0d1730); border: 1px solid #22375c; box-sizing: border-box; }
.ms-land .ms-bar { grid-column: 1; grid-row: 3; margin: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
.ms-land .ms-mode { align-self: stretch; } .ms-land .ms-md { flex: 1 1 50%; justify-content: center; }
.ms-land .ms-status { order: 0; flex: 0 0 auto; }
.ms-land .ms-tools { justify-content: space-between; flex-wrap: wrap; }
.ms-land .ms-tools .ms-btn { flex: 1 1 auto; }
@media (max-height: 430px) {
  .ms-land .ms-lv { min-height: 40px; padding: 3px; } .ms-land .ms-lv small { display: none; }
  .ms-land .ms-lcd { min-width: 56px; height: 32px; font-size: 22px; line-height: 32px; }
  .ms-land .ms-face { width: 40px; height: 40px; } .ms-land .ms-face svg { width: 31px; height: 31px; }
  .ms-land .ms-status { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-c.ms-pop, .ms-c.ms-shine, .ms-panel.ms-shake, .ms-c.ms-reveal svg, .ms-face.pop svg { animation: none !important; }
}