/* ============ جنرال-تحريك — طاولة قيادة من الحجر الرملي ============ */
:root{
  --sand:#E8D9B5; --sand2:#C9B183; --olive:#5A6B4A; --brass:#B8893B;
  --ink:#2A2620; --blue:#2D6FB8; --red:#B03A32;
  --wood1:#5A4632; --wood2:#3A2C1E;
  --tile:40px;
  --fui:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ftx:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--ftx);color:var(--ink);
  background:radial-gradient(125% 85% at 26% 0%,#F3E8CC 0%,#E8D9B5 46%,#D3BF95 100%);
  overflow:hidden;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:120;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hidden{display:none !important}

.app{height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;z-index:1}

/* ---------- HUD ---------- */
.hud{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px 4px}
.iconbtn{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;
  border:1.5px solid rgba(184,137,59,.55);background:rgba(255,250,236,.65);
  color:#5A4A2E;display:grid;place-items:center;cursor:pointer;
  transition:transform .12s ease,background .15s ease;padding:0;
}
.iconbtn:active{transform:scale(.93);background:#F7EDD7}
.iconbtn.muted{color:#A79madness}
.iconbtn.muted .wv{opacity:.2}
.iconbtn .wv{transition:opacity .2s}
.hud-mid{flex:1 1 auto;min-width:0}
.brand{font-family:var(--fui);font-weight:900;font-size:19px;line-height:1;color:#3A2E1C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .dash{color:var(--brass)}
.hud-sub{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#7A6746;font-weight:500;margin-top:3px}
.hud-sub .sep{opacity:.5}
.dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2.5px rgba(45,111,184,.18);transition:background .2s,box-shadow .2s}
.dot.enemy{background:var(--red);box-shadow:0 0 0 2.5px rgba(176,58,50,.18)}
.dot.over{background:#8A7A5E;box-shadow:0 0 0 2.5px rgba(138,122,94,.18)}

/* ---------- flag bar ---------- */
.flagbar{flex:0 0 auto;display:flex;gap:6px;padding:2px 12px 6px;overflow-x:auto;scrollbar-width:none}
.flagbar::-webkit-scrollbar{display:none}
.fchip{
  flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:3px 8px 3px 7px;border-radius:9px;
  border:1px solid rgba(140,110,60,.35);background:#EFE3C6;font-size:11px;font-weight:700;color:#5A4A2E;
  transition:background .25s,border-color .25s,color .25s;
}
.fchip .fg{width:9px;height:11px;display:block;clip-path:polygon(0 0,100% 38%,0 72%);background:#BF5548;transition:background .25s}
.fchip .cen{opacity:.55;font-weight:700}
.fchip.you{background:#DDEAF9;border-color:rgba(45,111,184,.5);color:#17427A}
.fchip.you .fg{background:var(--blue)}
.fchip.foe{background:#F4DEDA;border-color:rgba(176,58,50,.45);color:#7C211B}
.fchip.foe .fg{background:var(--red)}
.fbcount{margin-inline-start:auto;flex:0 0 auto;font-size:11px;font-weight:900;color:#7A6746;display:flex;align-items:center;padding-inline-start:6px}

/* ---------- board ---------- */
.stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 6px}
.board{
  --face:300px;
  width:calc(var(--face) + 34px);height:calc(var(--face) + 34px);
  display:grid;grid-template-columns:14px 1fr;grid-template-rows:14px 1fr;
  padding:10px;direction:ltr;
  background:linear-gradient(158deg,#63503A 0%,#3E3021 55%,#4D3C29 100%);
  border-radius:15px;
  box-shadow:0 14px 30px rgba(50,35,18,.42),0 2px 0 rgba(255,225,180,.14) inset,0 -4px 0 rgba(0,0,0,.34) inset;
}
.gut{font-size:9px;font-weight:700;color:#C6AC7F;opacity:.85;display:grid;direction:ltr;font-family:var(--fui)}
.gutter-top{grid-column:2;grid-row:1;grid-template-columns:repeat(8,1fr);align-items:center;justify-items:center}
.gutter-side{grid-column:1;grid-row:2;grid-template-rows:repeat(8,1fr);align-items:center;justify-items:center}
.face{grid-column:2;grid-row:2;position:relative;width:100%;height:100%;border-radius:5px;overflow:visible}
.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);direction:ltr}
.tile{
  position:relative;border:0;padding:0;margin:0;cursor:pointer;
  background:linear-gradient(152deg,#F0E5C8 0%,#E2D2AC 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(140,112,70,.32),inset 0 0 0 1px rgba(122,96,58,.26);
  transition:background .2s ease,box-shadow .2s ease;
}
.tile.d{background:linear-gradient(152deg,#E8DBBA 0%,#D6C59E 100%)}
.tile:active{background:linear-gradient(152deg,#F7EED4,#E9DBB6)}
.tile.obj{background:linear-gradient(152deg,#E9D6AE 0%,#D5BE92 100%)}
.tile.city{background:linear-gradient(152deg,#E4CDA1 0%,#C9AF80 100%)}
.tile.d.obj{background:linear-gradient(152deg,#E3CFA5 0%,#CFB98B 100%)}
.tile.sel{box-shadow:inset 0 0 0 2px #E0A93C,inset 0 0 14px rgba(224,169,60,.55)}
.tile.adj{box-shadow:inset 0 0 0 1px rgba(184,137,59,.55)}

.layer{position:absolute;inset:0;pointer-events:none;direction:ltr}
.deco{z-index:3}
.tokens{z-index:5}
.hints{z-index:6}
.flags{z-index:7}
.fx{z-index:9}

/* objective art */
.obj{position:absolute;left:0;top:0;width:12.5%;height:12.5%;pointer-events:none}
.obj .art{position:absolute;inset:6% 4% 2% 4%;opacity:.92;display:grid;place-items:end center}
.obj .art svg{width:100%;height:100%;display:block}
.obj.city .art{inset:2% 0 0 0;opacity:.95}

/* flags */
.flag{position:absolute;left:0;top:0;width:12.5%;height:12.5%;pointer-events:none}
.flag .holder{position:absolute;left:6%;top:-14%;width:42%;height:70%}
.flag .pole{position:absolute;left:0;top:0;width:1.6px;height:100%;border-radius:2px;background:linear-gradient(#E2BE74,#8A6526);box-shadow:0 0 0 .5px rgba(80,55,20,.35)}
.flag .cloth{position:absolute;left:1.4px;top:4%;width:min(16px,88%);height:44%;background:#BF5548;clip-path:polygon(0 0,100% 50%,0 100%);transform-origin:0 50%;animation:flutter 3s ease-in-out infinite;transition:background .35s ease}
.flag.enemy .cloth{background:var(--red)}
.flag.player .cloth{background:var(--blue)}
.flag.player .pole{background:linear-gradient(#9FC6F0,#265E9C)}
.flag.cap{animation:flagcap .7s cubic-bezier(.2,1.4,.4,1)}
.flag.cap .cloth{animation:flutter .5s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:scaleX(1) skewY(0deg)}35%{transform:scaleX(.9) skewY(-5deg)}70%{transform:scaleX(1.04) skewY(4deg)}}
@keyframes flagcap{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-22%) scale(1.22)}100%{transform:translateY(0) scale(1)}}

.prot{
  position:absolute;left:0;top:0;width:12.5%;height:12.5%;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:flex-end;
}
.prot span{
  margin:2px;display:inline-flex;align-items:center;gap:1px;
  font-family:var(--fui);font-weight:900;font-size:calc(var(--tile)*.2);line-height:1;
  color:#4A3B22;background:rgba(255,247,229,.92);border:1px solid rgba(140,110,60,.55);
  border-radius:5px;padding:1px 3px;box-shadow:0 1px 2px rgba(60,40,15,.25);
}

/* tokens */
.token{
  position:absolute;left:0;top:0;width:12.5%;height:12.5%;
  display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.22,.9,.25,1);
  will-change:transform;
}
.token .ti{
  position:relative;width:86%;height:86%;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 0 0 2px #C6A058,inset 0 -3px 6px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.3),0 3px 7px rgba(50,35,15,.45);
  transition:transform .13s ease-out,box-shadow .2s ease,filter .2s ease,opacity .2s ease;
}
.side-player .ti{background:radial-gradient(circle at 34% 24%,#7EAEE3 0%,#2D6FB8 56%,#1A487C 100%)}
.side-enemy .ti{background:radial-gradient(circle at 34% 24%,#DA7166 0%,#B03A32 56%,#74211A 100%)}
.token .helmet{position:absolute;width:74%;height:74%;fill:#fff;opacity:.17;pointer-events:none}
.side-enemy .helmet{transform:rotate(6deg) scale(1.04)}
.token .str{
  position:relative;font-family:var(--fui);font-weight:900;
  font-size:calc(var(--tile)*.33);line-height:1;color:#FFF7E4;
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.25);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.token.sel .ti{transform:scale(1.09);box-shadow:0 0 0 3px #F4D182,0 0 0 6px rgba(244,209,130,.22),0 0 16px rgba(244,209,130,.75),inset 0 -3px 6px rgba(0,0,0,.4)}
.token.acted .ti{filter:grayscale(.55) brightness(.92);opacity:.66}
.token.dying .ti{transform:scale(.05) rotate(35deg);opacity:0}
.token.thinking .ti{animation:think .55s ease-in-out infinite}
@keyframes think{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.token.strike{transition:transform .13s ease-out}

/* hints */
.hint{position:absolute;left:0;top:0;width:12.5%;height:12.5%;display:grid;place-items:center}
.hint .ring{
  width:66%;height:66%;border-radius:50%;
  border:2px dashed rgba(184,137,59,.9);background:rgba(255,250,232,.4);
  animation:hintpulse 1.8s ease-in-out infinite;
}
.hint.atk .ring{border:2px solid var(--red);background:rgba(176,58,50,.16);box-shadow:0 0 12px rgba(176,58,50,.5)}
.hint.merge .ring{border:2px solid var(--brass);background:rgba(184,137,59,.2)}
.hint.flag .ring{border:2px solid var(--blue);background:rgba(45,111,184,.18);box-shadow:0 0 10px rgba(45,111,184,.4)}
.hint.shield .ring{border:2px dashed rgba(90,107,74,.95);background:rgba(90,107,74,.16)}
.hint.split .ring{border:2px solid rgba(45,111,184,.8);background:rgba(45,111,184,.12);border-style:dotted}
@keyframes hintpulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.1);opacity:.7}}
.hint .lbl{
  position:absolute;bottom:4%;left:50%;transform:translateX(-50%);
  font-family:var(--fui);font-weight:900;font-size:calc(var(--tile)*.2);line-height:1;
  color:#FFF7E4;background:#B03A32;border-radius:4px;padding:1px 3px;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.hint.merge .lbl{background:#96692A}
.hint.flag .lbl{background:#1F5C9B}

/* fx */
.dust{position:absolute;left:0;top:0;width:12.5%;height:12.5%;display:grid;place-items:center;pointer-events:none}
.dust i{width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(190,155,100,.85),rgba(190,155,100,0) 70%);animation:dust .55s ease-out forwards}
@keyframes dust{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.ripple{position:absolute;left:0;top:0;width:12.5%;height:12.5%;display:grid;place-items:center;pointer-events:none}
.ripple i{width:40%;height:40%;border-radius:50%;border:3px solid rgba(45,111,184,.9);animation:rip .8s ease-out forwards}
@keyframes rip{0%{transform:scale(.4);opacity:1}100%{transform:scale(3.4);opacity:0}}
.intent{position:absolute;left:0;top:0;width:12.5%;height:12.5%;display:grid;place-items:center;pointer-events:none}
.intent i{
  width:70%;height:70%;border-radius:50%;
  border:2px solid rgba(176,58,50,.75);background:rgba(176,58,50,.1);
  animation:intentp 1s ease-in-out infinite;
}
.intent i::after{content:'';display:block;width:10%;height:10%}
@keyframes intentp{0%,100%{transform:scale(.85);opacity:.5}50%{transform:scale(1.08);opacity:1}}

/* ---------- log + dock ---------- */
.logline{
  flex:0 0 auto;margin:0 14px 4px;padding:4px 10px;min-height:24px;
  font-size:12px;font-weight:500;color:#6B5836;text-align:center;
  background:rgba(255,250,236,.5);border-radius:8px;border:1px solid rgba(184,137,59,.22);
  transition:color .2s ease,background .2s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.logline.ok{color:#2F5B33;background:rgba(224,240,220,.6);border-color:rgba(90,140,80,.35)}
.logline.warn{color:#7A5410;background:rgba(250,238,205,.75);border-color:rgba(184,137,59,.45)}
.logline.bad{color:#8C2A22;background:rgba(248,224,220,.75);border-color:rgba(176,58,50,.4)}

.dock{
  flex:0 0 auto;padding:8px 12px 10px;
  background:linear-gradient(#F1E5C7,#E1CFA7);
  border-top:2px solid var(--brass);
  box-shadow:0 -6px 18px rgba(60,45,25,.16),inset 0 1px 0 rgba(255,255,255,.7);
  min-height:92px;
}
.dock-inner{display:flex;flex-direction:column;gap:7px}
.dock-info{
  font-size:12px;font-weight:700;color:#5A4A2E;height:17px;line-height:17px;
  display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dock-info .tag{font-size:10px;padding:1px 6px;border-radius:6px;background:rgba(90,107,74,.16);color:#4A5B3C;font-weight:700}
.dock-info .tag.done{background:rgba(120,100,70,.16);color:#7A6746}
.dock-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{
  font-family:var(--fui);font-weight:700;border:0;cursor:pointer;
  border-radius:11px;min-height:46px;padding:6px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{
  background:linear-gradient(#3C82CC,#2D6FB8 60%,#245D9C);color:#FFF6E0;
  box-shadow:0 2px 0 #1A487C,0 4px 10px rgba(29,74,128,.35),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:active{box-shadow:0 1px 0 #1A487C,0 2px 6px rgba(29,74,128,.35)}
.btn-primary .bl{font-size:14px;font-weight:900;line-height:1.1}
.btn-primary .bs{font-size:10px;font-weight:600;opacity:.85;line-height:1.1}
.btn-primary.off{background:linear-gradient(#B7AC96,#A2957C);box-shadow:0 2px 0 #8B7F68;color:#F4EDDD}
.btn-ghost{
  background:rgba(255,251,240,.75);color:#4A3B22;
  border:1.5px solid rgba(184,137,59,.75);
  box-shadow:0 2px 0 rgba(184,137,59,.35),inset 0 1px 0 rgba(255,255,255,.8);
  font-size:14px;font-weight:900;
}
.btn-ghost:active{background:#F7EDD7}
.btn-big{
  width:100%;min-height:52px;font-size:16px;font-weight:900;border-radius:12px;
  background:linear-gradient(#3C82CC,#2D6FB8 60%,#245D9C);color:#FFF6E0;
  box-shadow:0 3px 0 #1A487C,0 6px 16px rgba(29,74,128,.3),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-big.ghost{background:rgba(255,251,240,.8);color:#4A3B22;border:1.5px solid rgba(184,137,59,.7);box-shadow:none}

/* split panel */
.split-inner{display:flex;flex-direction:column;gap:6px}
.split-top{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#5A4A2E}
.split-top b{font-family:var(--fui);font-weight:900;font-size:16px;color:#245D9C;margin-inline-start:auto}
.mini-x{width:30px;height:30px;border-radius:8px;border:1.5px solid rgba(140,110,60,.4);background:rgba(255,250,236,.8);color:#7A5410;font-size:13px;cursor:pointer;display:grid;place-items:center;padding:0}
.mini-x:active{background:#F2E3C4}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:4px;background:linear-gradient(90deg,#C9B183,#B8893B);box-shadow:inset 0 1px 2px rgba(60,45,25,.35)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7EAEE3,#2D6FB8 60%,#1A487C);box-shadow:0 0 0 2px #C6A058,0 2px 5px rgba(0,0,0,.3);border:0}
input[type=range]::-moz-range-track{height:7px;border-radius:4px;background:linear-gradient(90deg,#C9B183,#B8893B)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#2D6FB8;border:2px solid #C6A058}
.split-note{font-size:11px;color:#7A6746;text-align:center}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;
  background:rgba(42,33,22,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:fadein .25s ease-out;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.panel{
  width:100%;max-width:400px;max-height:100%;overflow:hidden;
  background:linear-gradient(170deg,#F5EAD0 0%,#EADCB9 100%);
  border:2px solid var(--brass);border-radius:18px;
  box-shadow:0 18px 46px rgba(30,20,8,.5),inset 0 1px 0 rgba(255,255,255,.85);
  padding:20px 18px 16px;display:flex;flex-direction:column;gap:11px;
  animation:pop .32s cubic-bezier(.2,1.3,.4,1);
}
@keyframes pop{from{transform:scale(.94) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.panel-scroll{overflow-y:auto;max-height:88vh}
.crest{display:flex;justify-content:center;margin-bottom:2px}
.ptitle{font-family:var(--fui);font-weight:900;font-size:25px;line-height:1.1;color:#332818;margin:0;text-align:center;letter-spacing:-.01em}
.ptitle.sm{font-size:19px}
.ptitle .dash{color:var(--brass)}
.psub{margin:0;text-align:center;font-size:12.5px;color:#7A6746;line-height:1.6}
.rules-mini{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.6;color:#5A4A2E}
.rules-mini li::marker{color:var(--brass)}
.rules-list{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.7;color:#4A3B22}
.rules-list b{color:#2D6FB8}
.rules-list li::marker{color:var(--brass)}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#7A6746;padding-top:2px}
.pfoot b{font-family:var(--fui);font-weight:900;color:#332818;font-size:14px}
.linkbtn{background:none;border:0;color:#2D6FB8;font-family:var(--fui);font-weight:700;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:6px}
.endflag{display:flex;justify-content:center;padding:4px 0 2px}
.scorebox{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;background:rgba(255,251,240,.65);border:1px solid rgba(184,137,59,.35);border-radius:12px;padding:10px 12px}
.scorebox>div{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6B5836}
.scorebox b{font-family:var(--fui);font-weight:900;color:#332818;font-size:13px}
.scorebox .tot{grid-column:1/-1;border-top:1px dashed rgba(184,137,59,.5);padding-top:7px;margin-top:2px}
.scorebox .tot b{font-size:17px;color:#245D9C}
.savenote{margin:0;font-size:11.5px;color:#4A5B3C;text-align:center;min-height:14px}
.boardnote{font-size:12px;color:#7A6746;text-align:center;margin:0;line-height:1.6}
.lb{display:flex;flex-direction:column;gap:5px;max-height:44vh;overflow-y:auto}
.lbrow{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:rgba(255,251,240,.7);border:1px solid rgba(184,137,59,.28);font-size:12.5px}
.lbrow.me{background:rgba(221,234,249,.9);border-color:rgba(45,111,184,.45)}
.lbrow .rk{font-family:var(--fui);font-weight:900;width:20px;color:#8A7448;text-align:center}
.lbrow .hd{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.lbrow .sc{font-family:var(--fui);font-weight:900;color:#245D9C}
.lbempty{font-size:12px;color:#8A7A5E;text-align:center;padding:14px 0}

.toast{
  position:fixed;left:50%;bottom:104px;transform:translate(-50%,10px);
  background:rgba(42,33,22,.92);color:#F6EACB;font-family:var(--fui);font-weight:700;font-size:12.5px;
  padding:8px 14px;border-radius:10px;z-index:90;pointer-events:none;opacity:0;
  transition:opacity .2s ease,transform .2s ease;max-width:86vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- landscape phones ---------- */
@media (orientation:landscape) and (max-height:560px){
  .app{
    display:grid;grid-template-columns:1fr 288px;
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"stage hud" "stage flags" "stage log" "stage dock";
    gap:0 6px;
  }
  .hud{grid-area:hud;padding:6px 8px 2px}
  .flagbar{grid-area:flags;flex-wrap:wrap;overflow:visible;padding:0 8px 4px}
  .fbcount{margin-inline-start:0}
  .stage{grid-area:stage;padding:6px}
  .logline{grid-area:log;align-self:end;margin:0 8px 4px;font-size:11px}
  .dock{grid-area:dock;min-height:0;padding:6px 8px 8px}
  .btn{min-height:42px}
  .panel{max-width:430px}
}
@media (min-width:900px){
  .brand{font-size:22px}
  .hud{padding:12px 20px 6px}
  .flagbar{padding:2px 20px 8px}
  .dock{padding:12px 20px 14px}
  .dock-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .dock-info{flex:1}
  .dock-btns{width:340px;flex:0 0 auto}
  .logline{margin:0 20px 6px;font-size:13px}
}