body{background:#080d0a url("../assets/images/lobby-bg.png") center/cover fixed no-repeat}
#app{min-height:100vh}.home-screen{min-height:100vh;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);position:relative}.home-screen:before{content:"";position:fixed;inset:0;background:linear-gradient(#05090622,#02040377);pointer-events:none}.home-content{position:relative;width:min(72rem,94vw);text-align:center}.game-logo{width:min(72rem,92vw);margin:0 auto 1.2rem}.game-logo img{display:block;width:100%;max-height:26vh;object-fit:contain;filter:drop-shadow(0 .45rem .9rem #000b)}.home-intro{max-width:42rem;margin:1.2rem auto;color:#c2d0be;line-height:1.7}.home-actions{display:flex;justify-content:center;gap:1rem;margin-top:2.2rem}.image-button{aspect-ratio:300/55;min-width:min(15.5rem,28vw);padding:0 1.4rem;background-position:center;background-size:100% 100%;background-repeat:no-repeat;color:#f1d68c;letter-spacing:.07em;text-shadow:0 1px 2px #000;border:0;cursor:pointer}.image-button.green{background-image:url("../assets/images/green-button.png")}.image-button.gold{background-image:url("../assets/images/golden-button.png")}.image-button:hover{filter:brightness(1.14) drop-shadow(0 .35rem .7rem #0009)}.rules-link{margin-top:1.4rem;color:#d4dfcc;text-decoration:underline;cursor:pointer}.dialog-backdrop{display:none}.dialog-backdrop.open{display:grid}.name-dialog{width:min(27rem,100%);padding:1.7rem;border:2px solid #cfed89;background:#202b24;box-shadow:0 0 3rem #000;text-align:left}.name-dialog h2{margin:0;color:#cfed89}.name-dialog p{color:#aeb9ab}.name-dialog label{display:block;margin:.9rem 0 .3rem;color:#aeb9ab}.name-dialog input{display:block;width:100%;padding:.75rem;background:#101510;border:1px solid #526354;color:#e6ede3}.dialog-actions{display:flex;gap:.65rem;margin-top:1rem}.dialog-actions .image-button{flex:1;min-width:0}.dialog-hint{min-height:1.3rem;color:#efc475!important}
/* Shared modal system. Every modal surface uses the lobby artwork. */
.modal-scrim,
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 5, 4, 0.78);
  backdrop-filter: blur(4px);
}

.modal-scrim {
  display: grid;
}

.modal-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #76806f;
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(20, 25, 21, 0.83), rgba(7, 10, 8, 0.94)),
    url("../assets/images/lobby-bg.png") center / cover no-repeat;
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.88);
  color: #d9e2d6;
}

.modal-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 15%, rgba(207, 237, 137, 0.08), transparent 48%);
  pointer-events: none;
}

.name-dialog {
  position: relative;
  width: min(27rem, 100%);
  padding: clamp(1.35rem, 3vw, 1.8rem);
  border-color: #cfed89;
  border-radius: 0.75rem;
  background:
    linear-gradient(145deg, rgba(32, 43, 36, 0.88), rgba(10, 15, 11, 0.94)),
    url("../assets/images/lobby-bg.png") center / cover no-repeat;
}

.name-dialog > .modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
}

.name-dialog > h2 {
  padding-right: 3.25rem;
}

.modal-card {
  width: min(53rem, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.modal-head h2 {
  margin: 0;
  padding-top: 0.25rem;
  color: #e9c87e;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.modal-close {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.8rem;
  aspect-ratio: 70 / 55;
  overflow: hidden;
  border: 0;
  background: url("../assets/images/close-button.png") center / contain no-repeat;
  color: transparent;
  cursor: pointer;
}

.modal-close::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 0.12em;
  color: #f5e2ad;
  font-family: Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 5px #000;
}

.modal-close:hover::after {
  color: #fff3c8;
}

.rules-copy {
  line-height: 1.6;
}

.rules-copy h3 {
  margin: 1.25rem 0 0.35rem;
  color: #d3e78d;
}

.rules-copy p,
.rules-copy li {
  color: #c9d2c6;
}

.rules-copy ul,
.rules-copy ol {
  padding-left: 1.35rem;
}