:root {
  --night: #160f0b;
  --warm: #ede0c8;
  --champagne: #e6c591;
  --border: rgba(204, 163, 104, .42);
}

.user-screen {
  width: min(1060px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(22px, 4vh, 42px) 0 28px;
}

.user-hero {
  min-height: clamp(235px, 28vw, 345px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 23px 65px rgba(0,0,0,.53), 0 0 0 5px rgba(8,5,3,.20);
  background: #23150f url('user-hero.webp') center center / cover no-repeat;
}
.user-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,8,5,.17), rgba(15,8,4,.04) 52%, rgba(13,7,4,.36));
  z-index: -1;
}
.hero-type { padding: 28px 10px; max-width: 100%; }
.hero-type h1 {
  margin: 8px 0 16px;
  font-size: clamp(37px, 7.2vw, 80px);
  font-weight: 700;
  letter-spacing: .012em;
  line-height: 1.06;
  font-variant: small-caps;
  text-shadow: 0 3px 2px #0a0604, 0 7px 18px #0a0604;
  color: #f8e4bf;
}
.hero-ornament { color: #d6ab64; font-size: 28px; text-shadow: 0 2px 5px #000; }
.hero-line {
  width: min(300px, 64%);
  height: 1px;
  margin-inline: auto;
  background: linear-gradient(90deg,transparent,#ddaf65,transparent);
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px,2vw,18px);
  padding: 26px 5px 20px;
}
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 28px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: clamp(17px, 2vw, 20px);
  text-decoration: none;
  text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.action-button.primary {
  color: #fff1db;
  background: linear-gradient(180deg, #916038, #5e361f);
  border-color: #d9aa6d;
}
.action-button.secondary {
  color: #edd1a7;
  background: linear-gradient(180deg, #322015, #20130e);
}
.action-button:hover, .action-button:focus-visible { border-color: #fff0d0; background: #7e4a28; color: #fff5e3; }
.action-button:focus-visible { outline: 2px solid #ffe3a3; outline-offset: 3px; }
.action-divider { color: #bd996f; font-size: 25px; }

.game-description {
  max-width: 900px;
  margin: 4px auto 0;
  padding: clamp(24px,3.5vw,42px) clamp(22px,4.4vw,56px);
  background: linear-gradient(160deg, rgba(65,39,25,.74), rgba(32,19,14,.96));
  border: 1px solid rgba(210, 166, 104, .31);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,235,190,.04);
}
.game-description h2 {
  margin: 0 0 22px;
  color: var(--champagne);
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px,3vw,30px);
}
.game-description p {
  margin: 0 0 17px;
  color: #eadbc4;
  font-size: clamp(16px,1.8vw,18px);
  line-height: 1.72;
}
.game-description p:last-child { margin-bottom: 0; }
.screen-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 4px 10px;
  font-size: 14px;
}
.back-link { color: #d6b789; text-decoration: none; border-bottom: 1px dotted #8f714f; }
.back-link:hover { color: #fff0d8; }
.screen-footer .version { font-size: 14px; }

.account-page {
  width: min(650px,calc(100% - 36px));
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.account-card {
  width: 100%;
  text-align: center;
  border: 1px solid var(--border);
  background: #26170f;
  padding: clamp(28px,7vw,60px);
  box-shadow: 0 20px 45px rgba(0,0,0,.5);
}
.account-card h1 { margin: 12px 0 18px; font-size: clamp(28px,4vw,40px); color: #f5dfbe; }
.account-card p { line-height: 1.65; margin: 0 0 30px; color:#e4cda8; }
.mini-brand { font-size: 19px; color: #c3a173; letter-spacing: .1em; text-transform: uppercase; }

@media(max-width:630px) {
  .user-screen { width: min(520px, calc(100% - 24px)); padding-top: 16px; }
  .user-hero { min-height: 220px; }
  .hero-type h1 { font-size: clamp(37px, 9vw, 57px); }
  .account-actions { gap: 8px; padding: 17px 0; }
  .action-button { padding: 10px 12px; min-height: 52px; font-size: 16px; }
  .action-divider { display:none; }
  .account-actions .action-button { flex: 1 1 170px; }
  .game-description { padding: 23px 19px; }
  .game-description p { line-height: 1.65; }
  .screen-footer { flex-direction: column; gap: 14px; }
}
@media(prefers-reduced-motion:reduce) { .action-button { transition:none; } }
.account-card-actions{display:flex;flex-direction:column;align-items:center;gap:17px}.account-card-actions .action-button{width:100%}