:root {
  color-scheme:dark;
  --bg:#0f1015;
  --text:#eee8dc;
  --gold:#dfbb77;
  --muted:#aaa6a2;
  --line:#3c3630;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:18px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 Georgia,'Times New Roman',serif;
}

button,a {
  font:inherit;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  color:inherit;
  cursor:pointer;
}

a:focus-visible,button:focus-visible {
  outline:3px solid #eac483;
  outline-offset:4px;
}

header,footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px,6vw,110px);
  gap:24px;
}

header {
  height:73px;
  border-bottom:1px solid #665342;
  background:#101016;
}

.brand img {
  width:143px;
  display:block;
}

nav,.buttons {
  display:flex;
  gap:30px;
  align-items:center;
}

nav a,.header-link,.button,.eyebrow,small,th,#refresh,footer a {
  font-family:Georgia,serif;
  letter-spacing:.09em;
}

nav a,.header-link {
  font-size:14px;
}

.header-link {
  border:1px solid #776046;
  padding:7px 17px;
  color:var(--gold);
}

nav a:hover,footer a:hover {
  color:var(--gold);
}

.hero {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  text-align:center;
  min-height:clamp(465px,43vw,660px);
  background:linear-gradient(0deg,#0f1015 0%,transparent 34%),linear-gradient(90deg,#0d071e45,#08041255 48%,#0b081b20),url(assets/castle.jpg) center 45%/cover;
}

.hero-inner {
  padding:60px 20px 70px;
}

.eyebrow,small {
  color:var(--gold);
  text-transform:uppercase;
  font:600 11px/1.4 Georgia,serif;
  letter-spacing:.23em;
}

.ornament {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  text-shadow:0 1px 5px #000;
}

.ornament:before,.ornament:after {
  content:'';
  width:48px;
  height:1px;
  background:#b89a67;
}

.hero h1 {
  margin:12px 0 0;
}

.hero h1 img {
  width:min(560px,84vw);
  display:block;
  margin:auto;
  filter:drop-shadow(0 5px 14px #070511);
}

.hero-copy {
  font-size:clamp(17px,1.6vw,22px);
  line-height:1.45;
  text-shadow:0 2px 6px #080514;
  margin:10px auto 26px;
}

.buttons {
  justify-content:center;
  gap:13px;
}

.button {
  padding:11px 22px;
  font-size:15px;
  border:1px solid #a7895f;
}

.button span,.header-link span {
  margin-left:10px;
}

.gold {
  background:linear-gradient(120deg,#efd39b,#c69b60);
  color:#281b11;
  font-weight:bold;
}

.glass {
  background:#12101ddd;
}

.button:hover,.card:hover,#refresh:hover {
  filter:brightness(1.17);
}

.descend {
  position:absolute;
  bottom:12px;
  color:var(--gold);
  font-size:25px;
}

.wrap {
  max-width:1320px;
  margin:auto;
  padding:42px clamp(20px,6vw,82px) 20px;
}

.section-title {
  display:flex;
  flex-direction:column;
  align-items:start;
  position:relative;
}

.section-title:after {
  content:'';
  position:absolute;
  bottom:15px;
  right:0;
  width:56%;
  height:1px;
  background:linear-gradient(90deg,transparent,#554632);
}

.eyebrow {
  margin:0 0 7px;
}

h2 {
  font-size:clamp(32px,3.2vw,47px);
  font-weight:normal;
  line-height:1.1;
  margin:0 0 20px;
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.card {
  position:relative;
  display:flex;
  align-items:center;
  text-align:left;
  gap:16px;
  padding:24px 18px;
  background:linear-gradient(110deg,#222c28,#171b1c);
  border:1px solid #49453a;
  min-height:134px;
}

.magic {
  background:linear-gradient(110deg,#282433,#1b1822);
}

.craft {
  background:linear-gradient(110deg,#322921,#201b19);
}

.card img {
  width:clamp(48px,5.4vw,82px);
  height:84px;
  object-fit:contain;
  filter:drop-shadow(0 4px 5px #07080a);
}

.card-copy {
  display:grid;
  gap:3px;
}

.card-copy strong {
  font-size:clamp(19px,1.8vw,27px);
  font-weight:normal;
}

.card-copy span {
  font-size:14px;
  color:#c5beb5;
}

.card small {
  font-size:9px;
}

.card b {
  position:absolute;
  right:10px;
  top:7px;
  color:var(--gold);
  font-weight:normal;
}

.panel,dialog {
  background:#19191e;
  border:1px solid var(--line);
}

.panel {
  padding:18px 24px;
}

.rank-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.rank-head p {
  margin:5px 0 15px;
}

#refresh,#close {
  background:transparent;
  border:0;
  color:var(--gold);
}

table {
  width:100%;
  border-collapse:collapse;
}

th,td {
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:10px 6px;
}

th {
  font-size:12px;
  color:var(--gold);
}

#status,.play li {
  color:#c5bfb6;
}

.play {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:22px;
  padding-bottom:50px;
}

.play ol {
  margin:0;
}

.play li {
  padding:3px;
}

footer {
  padding-top:20px;
  padding-bottom:20px;
  border-top:1px solid var(--line);
  font-size:12px;
}

footer img {
  width:105px;
}

dialog {
  color:var(--text);
  width:min(490px,91vw);
  padding:32px;
  box-shadow:0 15px 80px #0009;
}

dialog::backdrop {
  background:#070710bd;
}

dialog img {
  height:66px;
  margin-bottom:18px;
}

#close {
  position:absolute;
  right:12px;
  top:6px;
  font-size:30px;
}

dialog p {
  color:#ccc5bf;
}

dialog h3 {
  color:var(--gold);
  font-size:18px;
  margin-bottom:0;
}

dialog h3+p {
  margin-top:5px;
}

@media(max-width:850px) {
  .cards {
    grid-template-columns:1fr;
  }

  .card {
    min-height:92px;
    padding:12px 20px;
  }

  .card img {
    height:62px;
    width:62px;
  }

  .section-title:after {
    width:40%;
  }

}

@media(max-width:600px) {
  header {
    height:auto;
    padding:10px 16px;
    gap:9px;
    flex-wrap:wrap;
  }

  .brand img {
    width:105px;
  }

  nav {
    order:3;
    width:100%;
    justify-content:center;
    gap:25px;
  }

  nav a,.header-link {
    font-size:12px;
  }

  .hero {
    min-height:440px;
  }

  .hero-copy br {
    display:none;
  }

  .play {
    display:block;
  }

  .buttons {
    gap:8px;
  }

  .button {
    padding:10px 14px;
  }

  .panel {
    padding:12px;
  }

  th,td {
    font-size:12px;
  }

  .section-title:after {
    width:18%;
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

}


#conta fieldset { display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin:16px 0; padding:20px; border:1px solid var(--line); }
#conta legend { padding:0 8px; font-size:21px; color:var(--gold); }
#conta label, .rank-head label { display:grid; gap:5px; }
input, select { min-width:0; background:#17171c; color:var(--text); border:1px solid #74624d; font:inherit; padding:8px 12px; }
#account-status { min-height:1.5em; color:var(--gold); }
#conta ul { padding-left:22px; }
#conta li { margin:6px 0; }
#conta h3 { font-weight:normal; font-size:22px; }
@media(max-width:600px) { #conta fieldset { padding:12px; } #conta label { width:100%; } .rank-head select { max-width:58vw; } }

.wallet { display:flex; align-items:center; gap:18px; padding:18px 24px; border:1px solid #6299af; background:linear-gradient(115deg,#163847,#1a202a); }
.wallet > span { color:#92e1ff; font-size:48px; }
.wallet strong { display:block; font-size:clamp(23px,3vw,36px); color:#b8eaff; }
.wallet a { margin-left:auto; color:#e9cf99; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; }
#conta .shop-grid label { position:relative; display:grid; justify-items:center; text-align:center; padding:16px 10px; border:1px solid var(--line); background:#201e24; cursor:pointer; }
.shop-grid label:has(:checked) { outline:2px solid var(--gold); }
.shop-grid input { position:absolute; top:6px; left:6px; accent-color:var(--gold); }
.shop-grid img { width:60px; height:60px; object-fit:contain; }
.shop-grid span { color:#a6dff3; }
@media(max-width:520px) { .wallet { flex-wrap:wrap; } .wallet a { margin-left:0; } }