/* EDH Life v2 — vertical-only layout rebuilt from scratch. */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --panel-pad:clamp(5px,1.5vw,10px);
  --panel-gap:clamp(4px,1.1vw,7px);
  --control-h:clamp(34px,5.1vh,46px);
  --tool-size:44px;
  --tool-gap:4px;
  --tool-clearance:calc(var(--safe-bottom) + 62px);
}

html.layout-vertical-v2,
html.layout-vertical-v2 body{
  width:100%;
  height:100%;
  min-height:100dvh;
  margin:0;
  overflow:hidden;
  background:var(--bg);
}

html.layout-vertical-v2 #stage{
  position:fixed;
  inset:0;
  left:0;
  top:0;
  width:100vw;
  height:100dvh;
  transform:none;
  transform-origin:center;
  overflow:hidden;
  background:var(--bg);
}

html.layout-vertical-v2 #app,
html.layout-vertical-v2 .diceLayer{
  position:absolute;
  inset:0;
}

html.layout-vertical-v2 #app{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  background:var(--bg);
}
html.layout-vertical-v2 #app.c3 .p:nth-child(1){grid-column:1/3}
html.layout-vertical-v2 #app.c2{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
}

html.layout-vertical-v2 .p{
  min-width:0;
  min-height:0;
  overflow:hidden;
}

html.layout-vertical-v2 .pc{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  align-items:stretch;
  gap:var(--panel-gap);
  padding:var(--panel-pad);
  overflow:hidden;
  transform-origin:center;
}

/* Physical top-side players are rotated. Padding-bottom therefore becomes physical top safe area. */
html.layout-vertical-v2 #app.c4 .p:nth-child(1) .pc,
html.layout-vertical-v2 #app.c4 .p:nth-child(2) .pc,
html.layout-vertical-v2 #app.c3 .p:nth-child(1) .pc,
html.layout-vertical-v2 #app.c2 .p:nth-child(1) .pc{
  transform:rotate(180deg);
  padding-bottom:calc(var(--panel-pad) + var(--safe-top));
}

/* Bottom players keep their controls above the floating utility bar/home indicator. */
html.layout-vertical-v2 #app.c4 .p:nth-child(3) .pc,
html.layout-vertical-v2 #app.c4 .p:nth-child(4) .pc,
html.layout-vertical-v2 #app.c3 .p:nth-child(2) .pc,
html.layout-vertical-v2 #app.c3 .p:nth-child(3) .pc,
html.layout-vertical-v2 #app.c2 .p:nth-child(2) .pc{
  padding-bottom:var(--tool-clearance);
}

html.layout-vertical-v2 .name{
  position:relative;
  z-index:2;
  max-width:72%;
  min-width:0;
  margin:0 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transform:none;
  text-align:center;
  font-size:clamp(13px,4vw,19px);
  font-weight:900;
  line-height:1.05;
}

/* Main life area consumes every pixel left after name/commander controls. */
html.layout-vertical-v2 .lifeRow{
  width:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) var(--control-h) var(--control-h);
  gap:var(--panel-gap);
  align-items:stretch;
  overflow:hidden;
}
html.layout-vertical-v2 .life{
  grid-column:1/3;
  grid-row:1;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:12px;
  background:transparent;
  font-size:clamp(70px,12.5vh,124px);
  line-height:.88;
}
html.layout-vertical-v2 #app.c2 .life{font-size:clamp(84px,15vh,150px)}
html.layout-vertical-v2 .lifeValue{padding:0 3px}

html.layout-vertical-v2 .lifeRow .delta,
html.layout-vertical-v2 .lifeRow .quick5{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  border-radius:clamp(10px,2.8vw,16px);
}
html.layout-vertical-v2 .lifeRow .delta[data-d="-1"]{grid-column:1;grid-row:2}
html.layout-vertical-v2 .lifeRow .delta[data-d="1"]{grid-column:2;grid-row:2}
html.layout-vertical-v2 .lifeRow .quick5[data-d="-5"]{grid-column:1;grid-row:3}
html.layout-vertical-v2 .lifeRow .quick5[data-d="5"]{grid-column:2;grid-row:3}
html.layout-vertical-v2 .lifeRow .delta .mi{
  width:clamp(22px,7vw,34px);
  height:clamp(22px,7vw,34px);
}
html.layout-vertical-v2 .lifeRow .quick5{font-size:clamp(15px,5vw,22px)}

/* Commander damage is a compact vertical stack, not a leftover horizontal strip. */
html.layout-vertical-v2 .cmd{
  width:100%;
  min-width:0;
  margin:0;
  padding:3px;
  border-radius:11px;
}
html.layout-vertical-v2 .cg{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:3px;
}
html.layout-vertical-v2 .cc{
  min-width:0;
  min-height:36px;
  border-radius:9px;
}

html.layout-vertical-v2 .cc.commanderQuick{
  min-height:38px;
  display:grid;
  grid-template-columns:minmax(56px,.95fr) minmax(92px,1.25fr);
  align-items:center;
  gap:4px;
  padding:3px 4px;
}
html.layout-vertical-v2 .cc.commanderQuick .cw{
  min-width:0;
  padding-left:1px;
  text-align:left;
  font-size:clamp(9px,2.8vw,12px);
}
html.layout-vertical-v2 .cc.commanderQuick .commanderQuickRow{
  display:grid;
  grid-template-columns:minmax(20px,.48fr) minmax(22px,.52fr) minmax(46px,.9fr);
  align-items:center;
  gap:3px;
  margin:0;
}
html.layout-vertical-v2 .cc.commanderQuick .cv{
  margin:0;
  font-size:clamp(17px,5vw,23px);
}
html.layout-vertical-v2 .cmdQuickPlus{
  min-height:32px;
  padding:0 5px;
  border-radius:7px;
  font-size:clamp(14px,4vw,18px);
}
html.layout-vertical-v2 .cmdTax{
  padding:2px 3px;
  font-size:8px;
}

html.layout-vertical-v2 .partnerCc{padding:3px 4px}
html.layout-vertical-v2 .partnerCc>.cw{
  margin:0 0 2px;
  font-size:clamp(9px,2.7vw,11px);
}
html.layout-vertical-v2 .partnerRows{display:grid;gap:2px;margin:0}
html.layout-vertical-v2 .partnerRow{
  display:grid;
  grid-template-columns:12px 22px minmax(20px,1fr) minmax(50px,34%);
  align-items:center;
  gap:3px;
  min-height:29px;
}
html.layout-vertical-v2 .partnerRow b{font-size:clamp(15px,4.4vw,20px)}
html.layout-vertical-v2 .partnerMark{font-size:9px}
html.layout-vertical-v2 .partnerRow .cmdQuickPlus{
  min-height:28px;
  font-size:clamp(13px,3.7vw,17px);
}
html.layout-vertical-v2 .partnerRow .cmdTax{font-size:7.5px}

html.layout-vertical-v2 .counterBadges{
  top:var(--panel-pad);
  right:var(--panel-pad);
  gap:3px;
}
html.layout-vertical-v2 .counterBadge{
  min-width:22px;
  height:21px;
  padding:2px 4px;
  font-size:12px;
}
html.layout-vertical-v2 .counterIcon{width:13px;height:13px}

/* One floating toolbar, over the player backgrounds rather than reserving a black strip. */
html.layout-vertical-v2 #tools{
  position:absolute;
  left:50%;
  right:auto;
  top:auto;
  bottom:calc(var(--safe-bottom) + 6px);
  z-index:25;
  display:flex;
  flex-direction:row;
  gap:var(--tool-gap);
  padding:5px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:#0d121be8;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
}
html.layout-vertical-v2 #tools>button,
html.layout-vertical-v2 .dw>button{
  width:var(--tool-size);
  height:var(--tool-size);
  padding:10px;
  border-radius:12px;
  box-shadow:none;
}
html.layout-vertical-v2 .dw{position:relative}
html.layout-vertical-v2 .dm{
  left:50%;
  right:auto;
  top:auto;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
}

html.layout-vertical-v2 .diceLayer{z-index:30;pointer-events:none}
html.layout-vertical-v2 .die{width:92px;height:92px}
html.layout-vertical-v2 .die.player{width:78px;height:78px}

/* Table-state hub sits exactly on the 4-way split. */
html.layout-vertical-v2 #unifiedTableStateHub{
  width:58px;
  height:58px;
}
html.layout-vertical-v2 .tableStateCenter{width:44px;height:26px}

/* Dialogs use safe area internally; the board itself remains full bleed. */
html.layout-vertical-v2 .ov{
  position:absolute;
  inset:0;
  padding:calc(var(--safe-top) + 10px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 10px);
}
html.layout-vertical-v2 .modal{
  width:min(94%,560px);
  max-height:100%;
}
html.layout-vertical-v2 .counterGrid,
html.layout-vertical-v2 .commanderDetailGrid{grid-template-columns:1fr}

html.layout-vertical-v2 #helpOverlay{z-index:55}
html.layout-vertical-v2 #helpOverlay .helpPanel{width:min(94%,560px);padding:14px}
html.layout-vertical-v2 #helpOverlay .helpHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
html.layout-vertical-v2 #helpOverlay .helpHead h2{margin:0;font-size:22px}
html.layout-vertical-v2 #helpOverlay .helpHead span{color:var(--mut);font-size:11px;font-weight:800}
html.layout-vertical-v2 #helpOverlay .helpGrid{display:grid;grid-template-columns:1fr;gap:7px}
html.layout-vertical-v2 #helpOverlay .helpCard{padding:8px 9px;border:1px solid var(--line);border-radius:11px;background:#0d1119}
html.layout-vertical-v2 #helpOverlay .helpCard h3{margin:0 0 4px;font-size:14px}
html.layout-vertical-v2 #helpOverlay .helpCard p{margin:2px 0;color:#d7dce6;font-size:11.5px;line-height:1.35}
html.layout-vertical-v2 #helpOverlay .helpToolsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:5px}
html.layout-vertical-v2 #helpOverlay .helpTool{padding:5px 6px;border-radius:8px;background:#171c26;font-size:10.5px;line-height:1.25}
html.layout-vertical-v2 #helpOverlay .helpTool b{display:block;color:#fff;font-size:11px;margin-bottom:1px}

/* Short devices shrink low-priority UI first instead of creating external margins. */
html.layout-vertical-v2.layout-short{
  --panel-pad:4px;
  --panel-gap:3px;
  --control-h:32px;
  --tool-size:40px;
  --tool-clearance:calc(var(--safe-bottom) + 56px);
}
html.layout-vertical-v2.layout-short .life{font-size:clamp(60px,11vh,98px)}
html.layout-vertical-v2.layout-short .cc.commanderQuick{min-height:34px;padding:2px 3px}
html.layout-vertical-v2.layout-short .partnerRow{min-height:25px}
html.layout-vertical-v2.layout-short .partnerRow .cmdQuickPlus{min-height:25px}

html.layout-vertical-v2.layout-tablet{
  --panel-pad:clamp(8px,1.3vw,14px);
  --panel-gap:clamp(6px,1vw,10px);
  --control-h:clamp(44px,5vh,64px);
  --tool-size:52px;
  --tool-clearance:calc(var(--safe-bottom) + 72px);
}
html.layout-vertical-v2.layout-tablet .life{font-size:clamp(110px,12vh,180px)}
html.layout-vertical-v2.layout-tablet .cmdQuickPlus{min-height:38px}
html.layout-vertical-v2.layout-tablet .partnerRow .cmdQuickPlus{min-height:34px}

@media (prefers-reduced-motion:reduce){
  html.layout-vertical-v2 #stage{transition:none}
}