/* Strata: Corelight — game shell, HUD, touch controls. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d1418; color: #dfeef2;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.bar { pointer-events: auto; }
#top { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; padding: 8px 12px; background: linear-gradient(#0c1418e8, #0c141800); }
#name { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: #7cf2df; }
.chip { font-size: 13px; padding: 4px 9px; border-radius: 999px; background: #14232a; border: 1px solid #2a414c; }
.chip b { color: #ffd166; }
.meters { display: flex; gap: 10px; align-items: center; }
.meter { width: 120px; }
.meter span { display: block; font-size: 10px; letter-spacing: .1em; opacity: .8; }
.meter i { display: block; height: 7px; border-radius: 4px; background: #22333b; overflow: hidden; }
.meter i u { display: block; height: 100%; width: 100%; text-decoration: none; }
#ph p u { background: #2fd6c3; } #eh p u, .meter.e i u { background: #ff5f6d; }
#ph i u { background: #2fd6c3; } #eh i u { background: #ff5f6d; }
#build { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
button { pointer-events: auto; font: inherit; font-size: 13px; color: #dfeef2; background: #16262e;
  border: 1px solid #2c4753; border-radius: 8px; padding: 9px 11px; cursor: pointer; }
button:hover { background: #1d333d; }
button:disabled { opacity: .45; cursor: default; }
button kbd { display: inline-block; min-width: 15px; text-align: center; background: #0b1418;
  border-radius: 4px; padding: 1px 4px; margin-left: 6px; font-size: 11px; color: #7cf2df; }
#touch { position: absolute; right: 10px; bottom: 10px; display: grid; gap: 6px;
  grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
#touch button { padding: 0; border-radius: 10px; font-size: 17px; display: flex; align-items: center; justify-content: center; }
#touch .up { grid-area: 1 / 2; } #touch .dn { grid-area: 3 / 2; } #touch .lf { grid-area: 2 / 1; }
#touch .rt { grid-area: 2 / 3; } #touch .zi { grid-area: 1 / 1; } #touch .zo { grid-area: 1 / 3; }
#touch .ry { grid-area: 3 / 1; } #touch .cy { grid-area: 3 / 3; } #touch .cmd { grid-area: 2 / 2; font-size: 13px; }
#sel { position: absolute; left: 12px; top: 64px; font-size: 12px; opacity: .9; }
#marquee { position: fixed; display: none; border: 1px solid #7cf2df; background: #7cf2df22;
  pointer-events: none; z-index: 6; }
#msg { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-size: 14px;
  color: #ffd166; text-shadow: 0 2px 8px #000; opacity: 0; transition: opacity .35s; text-align: center; }
#msg.show { opacity: 1; }
#mm { position: absolute; right: 10px; top: 10px; width: 140px; height: 140px; border: 1px solid #2a414c;
  border-radius: 6px; background: #0b1418cc; pointer-events: auto; }
#overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #14262ecc, #080f13f2); pointer-events: auto; }
#overlay.hidden { display: none; }
#panel { max-width: 620px; width: calc(100% - 32px); padding: 26px; border-radius: 14px;
  background: #101d23ee; border: 1px solid #2c4753; box-shadow: 0 20px 60px #0009; }
#panel h1 { font-size: 30px; letter-spacing: .12em; color: #7cf2df; text-transform: uppercase; }
#panel h2 { font-size: 18px; color: #ff9aa4; }
#panel p { font-size: 14px; line-height: 1.6; margin: 10px 0; color: #c3d8de; }
#panel .keys { font-size: 13px; color: #9fb6bd; line-height: 1.9; }
#panel .keys b { color: #ffd166; }
.big { font-size: 16px; padding: 12px 22px; margin-top: 12px; background: #1d4b44; border-color: #2fd6c3; color: #eafff9; }
@media (max-width: 700px) {
  #mm { width: 92px; height: 92px; }
  .meter { width: 84px; }
  #name { display: none; }
  #build { left: 6px; bottom: 156px; }
  #sel { top: 56px; font-size: 11px; }
}
@media (pointer: coarse) { #build { bottom: 158px; } }