body, html { margin:0;padding:0;width:100%;height:100%; }
* { box-sizing:border-box; }
.container { width:100%;height:100%;margin:0 auto;background:#f5f5f5;text-align:center; }

.life-boxes { display:flex;height:100%;flex-wrap:wrap;align-content:space-around; }
.life-box { position:relative;flex:1 1 100%;display:flex;height:50%;border-top:1px solid #000; }
.life-box:nth-child(1) { transform:rotate(180deg); }
.life-control { position:absolute;top:0;left:0;width:50%;height:100%; }
.life-control.increase { left:50%; }
.life-control > div { position:absolute;top:50%;left:50%; }

.life-total { font-size:6rem;width:100%;pointer-events:none;border:none;background:transparent;text-align:center; }
.commander-damage { margin-top:10px;position:absolute;top:0;left:50%;transform:translateX(-50%); }
.commander-damage input { border:none;width:40px;text-align:center;pointer-events:none; }


/* layout-4 */
.layout-4 .life-box { height:25%; }
.layout-4 .life-box:nth-child(2), .layout-4 .life-box:nth-child(3) { flex:1 1 50%;}
.layout-4 .life-box:nth-child(3) {  }