@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  font-family:'Roboto',sans-serif;color:#e5e5e5;
  background:#111 url(../img/bg.jpg) center/cover no-repeat fixed;
}
body::after{content:'';position:fixed;inset:0;background:url(../img/vignette.png) center/cover no-repeat;pointer-events:none}

/* — Левый блок — */
#info{position:absolute;bottom:170px;left:64px;max-width:420px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
#info h1{font-size:36px;font-weight:700;letter-spacing:.5px;margin-bottom:28px}
.row{display:flex;gap:12px;align-items:center;margin:6px 0}
.label{color:#888;font-size:13px;width:80px}
.tag{background:#0a0d11;border:1px solid #c65118;font-size:12px;padding:2px 8px;border-radius:2px;margin-right:6px}

/* — Нижняя панель — */
footer{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:36px;background:rgba(0,0,0,.55);padding:18px 48px}
#tip{flex:1;display:flex;align-items:center;gap:14px;font-size:14px}
#cancel{background:#c65118;border:none;color:#fff;font-weight:700;padding:14px 38px;font-size:17px;cursor:not-allowed}
#status{width:180px;text-align:right}
#word{font-size:28px;font-weight:700}
#phase{font-size:12px;opacity:.8}