:root {
  --bg: #0f1424; --panel: #182038; --panel2: #202a4a; --text: #e8ecff; --muted: #9aa6d0;
  --accent: #4f8cff; --good: #3ecf8e; --bad: #ff5d6c; --warn: #ffb84d; --cell: 56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: #0f1424; }
body { background: radial-gradient(1200px 700px at 20% -10%, #1b2750 0%, var(--bg) 60%); color: var(--text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid #33406b; border-radius: 10px; padding: 8px 14px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; }
select, input[type=text], #customName { font: inherit; color: var(--text); background: var(--panel); border: 1px solid #33406b; border-radius: 10px; padding: 8px 10px; }

/* вход */
#join { max-width: 820px; margin: 0 auto; padding: 48px 20px; text-align: center; }
#join h1 { font-size: 44px; margin: 0; letter-spacing: -0.5px; }
.sub { color: var(--muted); margin: 6px 0 28px; }
.names { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.names button { text-align: left; padding: 14px 16px; background: var(--panel); }
.names button small { display: block; color: var(--muted); }
.custom { margin: 22px 0 6px; display: flex; gap: 10px; justify-content: center; }
.hint { color: var(--muted); font-size: 14px; }
.error { color: var(--bad); min-height: 22px; }
a { color: var(--accent); }

/* игра */
#game { display: flex; flex-direction: column; height: 100vh; padding: 10px 14px; gap: 10px; }
#top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
#levelNo { color: var(--muted); }
#levelTitle { font-size: 22px; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { background: var(--panel); border: 1px solid #2c3760; padding: 6px 12px; border-radius: 999px; font-size: 14px; }
.pill.turn { border-color: var(--accent); }
.pill.turn.mine { background: var(--accent); color: #fff; font-weight: 700; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(79,140,255,.25); } }

main { flex: 1; min-height: 0; display: flex; gap: 14px; }
#boardWrap { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
#board { display: grid; border-radius: 14px; overflow: hidden; background-size: 100% 100%; background-position: center; box-shadow: 0 10px 40px rgba(0,0,0,.45); border: 2px solid #2c3760; }
#board.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }

.cell { width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: calc(var(--cell) * .42); user-select: none; position: relative; }
.cell.closed { background: linear-gradient(145deg, #3a58b0, #2a3f86); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.25); cursor: default; }
.cell.closed.can:hover { filter: brightness(1.25); cursor: pointer; }
.cell.open { background: transparent; }
.cell .n { text-shadow: 0 0 4px #000, 0 0 2px #000; }
.n1 { color: #7fd1ff; } .n2 { color: #7dff9a; } .n3 { color: #ff8f8f; } .n4 { color: #c9a0ff; } .n5, .n6, .n7, .n8 { color: #ffd166; }
.cell .ico { width: calc(var(--cell) * .62); height: calc(var(--cell) * .62); display: block; }
.cell .flag, .cell .known { display: flex; }
.cell .known { opacity: .5; }
.cell.bugcell { background: #7a1f2b; }
.cell.last { outline: 3px solid var(--bad); outline-offset: -3px; }

#side { width: 270px; background: var(--panel); border: 1px solid #2c3760; border-radius: 14px; padding: 12px; overflow: auto; }
#side h3 { margin: 4px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
#players, #log { list-style: none; margin: 0 0 14px; padding: 0; }
#players li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 14px; }
#players li.me { background: var(--panel2); }
#players li.turn { outline: 2px solid var(--accent); }
#players li.off { opacity: .4; }
#players .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex: none; }
#players li.off .dot { background: #666; }
#players .nm { flex: 1; min-width: 0; }
#players .nm small { display: block; color: var(--muted); font-size: 11px; }
#players .sc { font-size: 12px; color: var(--muted); white-space: nowrap; }
#log li { font-size: 13px; color: var(--muted); padding: 3px 0; border-bottom: 1px dashed #2c3760; }
#log li.bad { color: var(--bad); } #log li.good { color: var(--good); }

#controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#hostBar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toggle { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; }

/* Анна */
#anna { position: fixed; right: 18px; bottom: 18px; display: flex; align-items: flex-end; gap: 10px; max-width: min(560px, 92vw); animation: pop .35s ease-out; z-index: 20; }
@keyframes pop { from { transform: translateY(40px) scale(.9); opacity: 0; } }
#anna img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.bubble { background: #fff; color: #1a1f36; padding: 14px 16px; border-radius: 16px 16px 4px 16px; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.bubble b { color: #5a4bff; font-size: 13px; }
.bubble p { margin: 4px 0 8px; font-size: 18px; font-weight: 600; }
#anna.angry .bubble { background: #ffe9ec; } #anna.angry .bubble b { color: var(--bad); }
#anna.happy .bubble { background: #e9fff3; } #anna.happy .bubble b { color: #1f9d63; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 10; }
#flash.red { background: rgba(255, 60, 80, .35); animation: fl .6s; }
#flash.green { background: rgba(60, 255, 150, .25); animation: fl .9s; }
@keyframes fl { 0% { opacity: 1; } 100% { opacity: 0; } }

/* режим «Экран» для проектора: крупнее, без управления */
body.screen #game { padding: 18px 26px; }
body.screen #levelTitle { font-size: 34px; }
body.screen .pill { font-size: 20px; padding: 8px 16px; }
body.screen #side { width: 340px; }
body.screen #players li, body.screen #log li { font-size: 18px; }
body.screen #controls { display: none; }
body.screen #anna img { width: 220px; height: 220px; }
body.screen .bubble p { font-size: 26px; }

@media (max-width: 900px) { main { flex-direction: column; } #side { width: auto; max-height: 28vh; } }

/* выбор режима и участников */
.tabs { display: flex; gap: 10px; justify-content: center; margin: 0 0 18px; flex-wrap: wrap; }
.tab { padding: 12px 20px; font-size: 17px; background: var(--panel); }
.tab.on { background: var(--accent); border-color: var(--accent); font-weight: 700; }
.names.checks button { display: flex; align-items: center; gap: 10px; }
.names.checks button .box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #5a69a8; flex: none; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.names.checks button.on { border-color: var(--accent); background: #1f2c57; }
.names.checks button.on .box { background: var(--accent); border-color: var(--accent); }
.names.checks button .box::after { content: ""; }
.names.checks button.on .box::after { content: "✓"; color: #fff; }
button.big { margin-top: 18px; padding: 14px 26px; font-size: 18px; }
button.link { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 4px; }
.modal { position: fixed; inset: 0; background: rgba(5, 8, 20, .7); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 16px; }
.modal .box { background: var(--panel); border: 1px solid #33406b; border-radius: 16px; padding: 18px; max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; }
.modal h3 { margin: 0 0 12px; }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
/* объявление «Ходит: …» в режиме одного ноутбука */
#turnBanner { position: fixed; left: 50%; top: 14%; transform: translateX(-50%); z-index: 25; background: var(--accent); color: #fff; padding: 18px 40px; border-radius: 18px; font-size: 34px; font-weight: 800; text-align: center; box-shadow: 0 14px 50px rgba(0,0,0,.5); animation: bn 1.9s ease-out forwards; pointer-events: none; }
#turnBanner small { display: block; font-size: 16px; font-weight: 500; opacity: .85; }
@keyframes bn { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* «Ловим баги»: литры пива, пустое поле, итоги, цитаты */
.pill.beer.pos { border-color: var(--good); color: var(--good); }
.pill.beer.neg { border-color: var(--bad); color: var(--bad); }
#players .beer { font-weight: 800; font-size: 15px; white-space: nowrap; color: var(--muted); }
#players .beer.pos { color: var(--good); }
#players .beer.neg { color: var(--bad); }
#players .beer.top { text-shadow: 0 0 10px rgba(62, 207, 142, .6); }
#board .empty { padding: 56px 44px; max-width: 560px; text-align: center; color: var(--muted); font-size: 20px; line-height: 1.6; }
.quotes { margin: 0 0 6px; padding-left: 26px; font-size: 18px; line-height: 1.5; }
.quotes li { padding: 6px 0; border-bottom: 1px dashed #2c3760; }
.big-total { font-size: 24px; margin: 4px 0 12px; }
.big-total b { color: var(--good); }
table.res { width: 100%; border-collapse: collapse; font-size: 16px; }
table.res th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #33406b; }
table.res td { padding: 7px 8px; border-bottom: 1px dashed #2c3760; }
table.res td small { display: block; color: var(--muted); font-size: 12px; }
table.res td.pos { color: var(--good); font-weight: 700; } table.res td.neg { color: var(--bad); font-weight: 700; }
body.screen .quotes, body.screen table.res { font-size: 22px; }

/* награда за пойманный баг */
#beerPop { position: fixed; left: 50%; top: 34%; transform: translateX(-50%); z-index: 26; text-align: center; background: linear-gradient(135deg, #12b886, #2f9e44); color: #fff; padding: 20px 46px; border-radius: 22px; box-shadow: 0 16px 56px rgba(0,0,0,.55); pointer-events: none; animation: beerpop 2.3s ease-out forwards; }
#beerPop b { display: block; font-size: 44px; font-weight: 900; letter-spacing: .5px; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
#beerPop small { display: block; font-size: 17px; opacity: .92; margin-top: 4px; }
@keyframes beerpop { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.6); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 24% { transform: translate(-50%, 0) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50px) scale(1); } }
#players .beer.bump { animation: bump .9s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 25% { transform: scale(1.6); color: #7dffb5; } 100% { transform: scale(1); } }
body.screen #beerPop b { font-size: 72px; } body.screen #beerPop small { font-size: 26px; }

/* таймер, пропуск хода (автоклик), зачёркнутые клетки, итог */
.pill.timer { font-variant-numeric: tabular-nums; }
#btnSkip.skip { border-color: var(--warn); color: var(--warn); }
#btnSkip.skip[disabled] { opacity: .45; cursor: not-allowed; }
.cell.struck::after { content: ""; position: absolute; inset: 6%; pointer-events: none; background:
  linear-gradient(to top right, transparent calc(50% - 2.5px), #ff3b4d calc(50% - 2.5px), #ff3b4d calc(50% + 2.5px), transparent calc(50% + 2.5px)),
  linear-gradient(to top left, transparent calc(50% - 2.5px), #ff3b4d calc(50% - 2.5px), #ff3b4d calc(50% + 2.5px), transparent calc(50% + 2.5px)); filter: drop-shadow(0 0 3px rgba(0,0,0,.7)); }
.cell.struck { box-shadow: inset 0 0 0 2px rgba(255, 59, 77, .55); }
#flash.amber { background: rgba(255, 184, 77, .3); animation: fl .7s; }
#log li.warn { color: var(--warn); }
.sum { background: var(--panel2); border-radius: 14px; padding: 12px 16px; margin: 0 0 12px; }
.sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 17px; }
.sum b.pos { color: var(--good); } .sum b.neg { color: var(--bad); }
.sum .total { border-top: 1px solid #33406b; margin-top: 6px; padding-top: 8px; font-size: 24px; font-weight: 800; }
.sum .meta { color: var(--muted); font-size: 14px; }
#results h4 { margin: 14px 0 6px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
#results .box { max-width: 980px; }
table.res td.neg { color: var(--bad); } table.res td.pos { color: var(--good); }
body.screen .sum > div { font-size: 24px; } body.screen .sum .total { font-size: 34px; }

/* ===== Телефоны и планшеты: касания и компоновка ===== */
html { -webkit-text-size-adjust: 100%; }
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#board, .cell { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { min-height: 38px; }

@media (max-width: 700px) {
  body { overflow-x: hidden; }
  #join { padding: 20px 12px; }
  #join h1 { font-size: 32px; }
  .tab { flex: 1 1 100%; padding: 12px; font-size: 16px; }
  .names { grid-template-columns: 1fr 1fr; gap: 8px; }
  .names button { padding: 10px 12px; font-size: 15px; }
  .custom { flex-wrap: wrap; } .custom input { flex: 1 1 140px; min-width: 0; }

  #game { height: auto; min-height: 100dvh; padding: 8px 10px calc(14px + env(safe-area-inset-bottom)); gap: 8px; }
  #top { gap: 6px; }
  #levelTitle { font-size: 18px; } #levelNo { font-size: 13px; }
  .stats { gap: 5px; }
  .pill { font-size: 12.5px; padding: 4px 10px; }
  main { flex: none; flex-direction: column; gap: 10px; }
  #boardWrap { flex: none; width: 100%; align-items: flex-start; justify-content: center; }
  #board .empty { padding: 24px 14px; font-size: 15px; max-width: 100%; }
  #side { width: auto; padding: 10px; overflow: visible; }
  #players li { font-size: 13px; padding: 5px 6px; }
  #players .sc, #players .beer { font-size: 13px; }
  #log { max-height: 26dvh; overflow: auto; }
  #log li { font-size: 12px; }

  #controls { gap: 8px; }
  #hostBar { width: 100%; gap: 6px; }
  #hostBar button, #btnSkip, #btnQuotes { flex: 1 1 auto; min-height: 44px; font-size: 14px; padding: 8px 10px; }
  #btnSkip { flex: 1 1 100%; }
  .hint { font-size: 12.5px; flex: 1 1 100%; }

  #anna { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: none; gap: 6px; }
  #anna img { width: 78px; height: 78px; flex: none; }
  .bubble { padding: 10px 12px; flex: 1; min-width: 0; }
  .bubble p { font-size: 15px; margin: 2px 0 4px; }
  .bubble b { font-size: 11px; }
  #turnBanner { max-width: 92vw; padding: 10px 18px; font-size: clamp(18px, 6vw, 26px); top: 12%; white-space: normal; }
  #turnBanner small { font-size: 12px; }
  #beerPop { max-width: 92vw; padding: 12px 22px; top: 28%; }
  #beerPop b { font-size: clamp(24px, 8.5vw, 38px); }
  #beerPop small { font-size: 13px; }

  .modal { padding: 6px; }
  .modal .box { padding: 12px; max-height: 94dvh; border-radius: 14px; }
  #resultsBody { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.res { font-size: 12px; min-width: 560px; }
  table.res th, table.res td { padding: 5px 5px; }
  .sum > div { font-size: 14px; } .sum .total { font-size: 19px; }
  .sum { padding: 10px 12px; }
  .quotes { font-size: 15px; }
}

/* телефон на боку: поле слева, панель справа, меньше отступов */
@media (max-height: 500px) and (min-width: 701px) {
  #game { height: auto; min-height: 100dvh; padding: 6px 10px; gap: 6px; }
  main { flex: none; }
  #boardWrap { align-items: flex-start; }
  #levelTitle { font-size: 16px; } .pill { font-size: 12px; padding: 3px 9px; }
  #side { width: 220px; padding: 8px; } #log { display: none; }
  #controls button { min-height: 34px; padding: 4px 10px; font-size: 13px; }
  .hint { display: none; }
  #anna img { width: 64px; height: 64px; } .bubble p { font-size: 14px; }
  #turnBanner { top: 8%; font-size: 22px; padding: 8px 18px; } #beerPop { top: 22%; padding: 8px 20px; } #beerPop b { font-size: 30px; }
}

@media (max-width: 900px) { #side { max-height: none; } }
@media (max-width: 700px) {
  #side { max-height: none; overflow: visible; }
  #turnBanner, #beerPop { width: max-content; max-width: 92vw; box-sizing: border-box; }
}
#turnBanner, #beerPop { width: max-content; max-width: 92vw; }
@media (max-width: 700px) {
  #turnBanner { white-space: nowrap; font-size: clamp(15px, 5vw, 20px); padding: 8px 16px; top: 9%; border-radius: 14px; }
  #beerPop { top: 16%; padding: 8px 18px; border-radius: 16px; }
  #beerPop b { white-space: nowrap; font-size: clamp(20px, 6.5vw, 28px); }
}

#anna.boss .bubble { background: #fff4d6; } #anna.boss .bubble b { color: #b36b00; }
#timerPill.low { border-color: var(--bad); color: #ffb3bd; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* режим «Найди пару» */
#board.pairs { gap: 8px; padding: 10px; background: #141b33; box-sizing: content-box; width: max-content; }
.pcell { width: var(--cell); height: var(--cell); background: #1f2a52; border: 2px solid #2c3760; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; transition: transform .12s, opacity .2s; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.pcell .pic { width: 72%; height: 72%; display: block; pointer-events: none; }
.pcell:hover { filter: brightness(1.2); }
.pcell.sel { border-color: #4c8dff; box-shadow: 0 0 0 3px rgba(76,141,255,.5); transform: scale(1.06); }
.pcell.ok { border-color: #2fbf71; box-shadow: 0 0 0 4px rgba(47,191,113,.5); transform: scale(1.08); }
.pcell.hint { border-color: #f59f00; box-shadow: 0 0 0 4px rgba(245,159,0,.45); }
.pcell.bad { border-color: #ff4d5e; box-shadow: 0 0 0 3px rgba(255,77,94,.5); }
.pcell.dim { opacity: .35; }
#modeBar { display: inline-flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { #board.pairs { width: auto; max-width: 100%; box-sizing: border-box; gap: 6px; padding: 6px; } }
#modeBar[hidden] { display: none; }

/* режим «Кухня релизов» */
#modeKitchen[hidden], #modeBugs[hidden], #modePairs[hidden] { display: none; }
body.kmode #boardWrap { align-items: flex-start; overflow: auto; }
#board.kitchen { display: block; width: 100%; max-width: 980px; background: none; border: 0; box-shadow: none; overflow: visible; }
.kitchen .pic { width: 34px; height: 34px; display: block; }
.kitchen .pic.proc { filter: drop-shadow(0 0 3px #fcc419); }
.kitchen .node { position: relative; display: inline-block; }
.kitchen .node .tag { position: absolute; width: 16px; height: 16px; bottom: -3px; }
.kitchen .node .tag:nth-of-type(1) { right: -4px; } .kitchen .node .tag:nth-of-type(2) { left: -4px; }
.kitchen .tag { width: 15px; height: 15px; vertical-align: -3px; }
.korders { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; min-height: 96px; }
.kempty { color: #8c96c6; align-self: center; }
.kord { background: #1a2347; border: 2px solid #2c3760; border-radius: 12px; padding: 8px 10px; width: 210px; }
.kord.vip { border-color: #f59f00; background: #2b2410; }
.kord .kn { font-weight: 700; font-size: 14px; line-height: 1.2; }
.kord .badge { background: #f59f00; color: #1a1f36; border-radius: 6px; padding: 1px 6px; font-size: 12px; }
.kord .kby { font-size: 11px; color: #8c96c6; margin: 2px 0 4px; }
.kord .kparts { display: flex; gap: 2px; flex-wrap: wrap; } .kord .kparts .pic { width: 24px; height: 24px; }
.kord .kneeds { font-size: 12px; color: #aab3de; margin: 3px 0; }
.bar { height: 7px; background: #0e1430; border-radius: 4px; overflow: hidden; margin-top: 5px; }
.bar i { display: block; height: 100%; width: 0; background: #4c8dff; } .bar i.amber { background: #f59f00; } .bar i.red { background: #ff4d5e; }
.korders .bar i { background: #2fbf71; }
.kpantry { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.kl { color: #8c96c6; font-size: 13px; }
.kpart { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #1f2a52; border: 2px solid #2c3760; border-radius: 10px; padding: 6px 8px; min-width: 76px; color: #dbe2ff; cursor: pointer; touch-action: manipulation; }
.kpart small { font-size: 11px; }
.kpart:active { transform: scale(.94); }
.kstations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kst { background: #18204a; border: 2px solid #2c3760; border-radius: 12px; padding: 8px; min-height: 108px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; display: flex; flex-direction: column; gap: 4px; }
.kst b { font-size: 13px; color: #aab3de; }
.kst .kb { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: center; flex: 1; align-content: center; }
.kst .kb small { color: #6f7aa8; font-size: 11px; text-align: center; }
.kst .kb .bar { width: 100%; }
.kst.busy { border-color: #4c8dff; } .kst.done { border-color: #2fbf71; box-shadow: 0 0 0 3px rgba(47,191,113,.35); }
.kst .ready { color: #51cf66 !important; } .kst .fail { color: #ff8787 !important; font-weight: 700; }
.kst.serve { border-color: #f59f00; } .kst.trash { opacity: .8; }
.khand { margin-top: 12px; padding: 10px 14px; background: #101733; border: 2px dashed #4c8dff; border-radius: 12px; display: flex; align-items: center; gap: 10px; }
.khand .muted { color: #6f7aa8; }
@media (max-width: 700px) {
  .kstations { grid-template-columns: repeat(2, 1fr); }
  .kord { width: calc(50% - 6px); } .kpart { min-width: 68px; padding: 8px 6px; }
  .kst { min-height: 96px; }
  body.kmode #boardWrap { overflow: visible; }
  #board.kitchen { max-width: 100%; }
}
.khand { flex-wrap: wrap; } .khand > b, .khand > span { white-space: normal; }
@media (max-width: 700px) { .khand { position: sticky; bottom: 6px; z-index: 5; background: #0d1330; box-shadow: 0 -6px 16px rgba(0,0,0,.45); } }
#modeWrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #modeWrap[hidden] { display: none; }