* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #050507; color: #9aa; overflow: hidden;
  font-family: system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; display: flex; }
.zone { flex: 1; height: 100%; }
.zone-left:active { background: rgba(80,120,255,0.04); }
.zone-right:active { background: rgba(255,120,80,0.04); }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #050507; z-index: 10; transition: opacity .6s; }
.overlay.hidden { opacity: 0; pointer-events: none; }
.start-btn { background: none; border: 1px solid rgba(150,160,180,.25); color: #9aa;
  padding: 28px 36px; display: flex; flex-direction: column; gap: 10px; align-items: center;
  font-family: inherit; cursor: pointer; }
.start-btn .big { font-size: 18px; letter-spacing: 2px; }
.start-btn .small { font-size: 11px; color: #556; letter-spacing: 1px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.msg-box { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.msg-big { font-size: 20px; letter-spacing: 2px; color: #b22; }
.msg-big.good { color: #2b6; }

.hint { position: fixed; top: 6%; left: 50%; transform: translateX(-50%); max-width: 90%;
  text-align: center; color: #cdd; font-size: 17px; line-height: 1.5; letter-spacing: .5px;
  background: rgba(0,0,0,.6); padding: 14px 18px; border-radius: 10px; z-index: 5;
  transition: opacity .3s; pointer-events: none; }
.hint:empty { opacity: 0; }