*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#050301;display:grid;place-items:center;overflow:hidden;font-family:"MS Sans Serif","Microsoft Sans Serif","Courier New",monospace;image-rendering:pixelated}

:root{--w:600;--h:400}
.wrap{width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform:scale(min(calc(100vw / (var(--w) * 1px)),calc(100vh / (var(--h) * 1px))));transform-origin:center center;background:url('../../assets/UI.png') center/100% 100% no-repeat;filter:drop-shadow(0 16px 60px rgba(0,0,0,.8));}
.game{width:600px;height:400px;display:grid;grid-template-rows:18px 188px 18px 176px;padding:0}

.bar{height:18px;background:transparent;color:#fff;font:bold 12px/18px "MS Sans Serif","Courier New",monospace;padding:0 8px;display:flex;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden;text-shadow:1px 1px #000}
.bar span:first-child{overflow:hidden;text-overflow:ellipsis}
.bar span:last-child{flex:0 0 auto}

.mid{display:grid;grid-template-columns:52px 1fr 52px;gap:4px;padding:2px 4px 0;min-height:0}
.rail{display:grid;grid-template-rows:repeat(4,42px);gap:4px;align-content:start}
.ico{appearance:none;padding:0;margin:0;background:transparent;border:none;display:grid;place-items:center;position:relative;color:#220b04;font:bold 18px "Courier New",monospace;cursor:pointer}
.ico:active{transform:translate(1px,1px)}
.ico.x:before,.ico.x:after{content:"";position:absolute;width:35px;height:6px;background:#e31710;border:1px solid #741006;box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.ico.x:before{transform:rotate(45deg)}.ico.x:after{transform:rotate(-45deg)}
.face:before{content:"";width:28px;height:30px;border-radius:50%;background:#d9985c;box-shadow:inset 0 -9px #6b3317,inset 0 7px #d6a16d,0 0 0 2px #35190a}
.target:before{background:#e9c56d;box-shadow:inset 0 -9px #755021,inset 0 7px #f3d98a,0 0 0 2px #35190a}
.heart:before{content:"♥";color:#f00000;font-size:24px;line-height:1;text-shadow:1px 1px #310}

.screen{border:2px solid #fff;background:#000;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #203a7d}
.screen canvas{width:100%;height:100%;display:block;image-rendering:pixelated;background:#000}

.msg{margin:0 8px;height:18px;border:1px solid #222;background:#f7f7ef;color:#111;font:14px/16px "Courier New",monospace;padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 1px 1px #fff,inset -1px -1px #aaa}

.bottom{position:relative;margin:3px 6px 5px;min-height:0;display:grid;grid-template-columns:220px 1fr;gap:10px;padding:14px 16px;background:transparent;overflow:hidden}
.panel{position:relative;min-width:0;min-height:0;background:transparent;padding:8px 14px;font:bold 13px/14px "Courier New",monospace;color:#160900;overflow:hidden}
ul{list-style:none;margin:0;padding:0}
.panel-options ul{columns:2;column-gap:14px}
li{cursor:pointer;white-space:nowrap;padding:1px 3px;break-inside:avoid;user-select:none}
li:hover,.sel{background:#a97d1e;color:#120800}
.mapbox{display:none;position:absolute;right:20px;bottom:18px;width:230px;height:135px;background:#21d829;border:2px solid #333;box-shadow:0 0 0 2px #c99d43}
#map{width:100%;height:100%;image-rendering:pixelated}

@media(max-width:640px),(max-height:430px){
  .wrap{transform:scale(min(calc((100vw - 8px) / (var(--w) * 1px)),calc((100vh - 8px) / (var(--h) * 1px))))}
}