* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07070a; color: #d9d2c3; font-family: Georgia, 'Times New Roman', serif; overflow: hidden; }
#cv { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; }
.hidden { display: none !important; }

.screen { position: fixed; inset: 0; overflow-y: auto; padding: 5vh 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 0%, rgba(120, 50, 20, .22), rgba(7, 7, 10, .9) 60%); }
.screen > * { width: 100%; max-width: 760px; }
h1 { margin: 0; text-align: center; font-weight: 400; font-size: clamp(30px, 6vw, 58px); letter-spacing: .18em; color: #e8dcc0; text-shadow: 0 0 28px rgba(230, 120, 40, .45); }
h2 { margin: 10px 0 0; font-weight: 400; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: #b8a67e; }
.sub { margin: 0 0 8px; text-align: center; color: #8d8573; letter-spacing: .08em; font-size: 14px; }
.dim { color: #7d7667; margin: 4px 0; }

.panel { background: rgba(18, 17, 20, .82); border: 1px solid #3a342a; padding: 14px 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.grow { flex: 1; min-width: 200px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8d8573; }
input { background: #0d0d10; border: 1px solid #3a342a; color: #e8dcc0; padding: 8px 10px; font: 15px Georgia, serif; outline: none; min-width: 0; }
input:focus { border-color: #b8873a; }
#status { font-size: 13px; padding-bottom: 9px; color: #8d8573; }
#status.ok { color: #8fbf7a; }
#status.bad { color: #cf6a5a; }

button { background: #1b191c; border: 1px solid #5a4c33; color: #e8dcc0; padding: 9px 16px; font: 15px Georgia, serif; cursor: pointer; transition: background .15s, border-color .15s; }
button:hover { background: #2a2520; border-color: #c9984a; }
button:disabled { opacity: .4; cursor: default; }
button small { display: block; margin-top: 4px; font-size: 12px; color: #8d8573; letter-spacing: 0; }
button.plain { border-color: #3a342a; color: #a79e8c; }
button.gold { border-color: #c9984a; color: #f0d58a; }
button.danger { border-color: #8a3a2c; color: #e59a86; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.big { padding: 18px 16px; font-size: 20px; letter-spacing: .06em; text-align: left; }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }

.room { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #2a2620; }
.room:last-child { border-bottom: 0; }
.room .info { flex: 1; min-width: 180px; }
.room .info span { display: block; font-size: 12px; color: #8d8573; margin-top: 2px; }
#menuMsg { min-height: 20px; margin: 0; text-align: center; color: #e0a070; }
.help { font-size: 13px; line-height: 1.7; color: #a79e8c; }
.help b { color: #d9c9a0; font-weight: 400; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); padding: 16px; }
.box { width: 100%; max-width: 380px; background: rgba(16, 15, 18, .96); border: 1px solid #5a4c33; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 60px rgba(230, 120, 40, .15); }
.box h2 { margin: 0; text-align: center; font-size: 22px; color: #e8dcc0; }
.box p { margin: 0 0 6px; text-align: center; font-size: 14px; color: #a79e8c; }
.box b { color: #f0d58a; font-weight: 400; }
.box button { text-align: left; }
.box button.plain { text-align: center; }