/* Exalted Conquer - classic Conquer Online styled website skin
   CSS-only visual refresh. No PHP, PayPal, cart, or donation logic changed. */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #f4e7c2;
  background:
    radial-gradient(circle at 50% 0%, rgba(110, 18, 18, 0.35), transparent 360px),
    radial-gradient(circle at 15% 18%, rgba(170, 117, 45, 0.18), transparent 260px),
    linear-gradient(180deg, #180909 0%, #070404 45%, #020202 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018), rgba(255,255,255,0.018) 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, rgba(0,0,0,0.55), transparent 22%, transparent 78%, rgba(0,0,0,0.55));
}

.site {
  position: relative;
  max-width: 1020px;
  margin: 26px auto;
  background: #120b08;
  border: 1px solid #6e4b1f;
  box-shadow:
    0 0 0 2px #241407,
    0 0 28px rgba(0, 0, 0, 0.9),
    inset 0 0 35px rgba(0, 0, 0, 0.8);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 132px;
  padding: 24px 30px;
  background:
    linear-gradient(180deg, rgba(255, 221, 121, 0.14) 0%, rgba(80, 15, 12, 0.72) 42%, rgba(19, 8, 5, 0.95) 100%),
    radial-gradient(circle at 76% 24%, rgba(216, 150, 45, 0.26), transparent 220px),
    linear-gradient(135deg, #2a0807 0%, #140807 48%, #050303 100%);
  border-bottom: 3px double #b58439;
  color: #ffffff;
  text-shadow: 0 2px 2px #000;
}

.header-text h1,
.header h1 {
  margin: 0 0 7px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: bold;
  letter-spacing: 1.2px;
  color: #ffe0a0;
  text-shadow:
    0 2px 0 #4a160d,
    0 0 12px rgba(222, 142, 46, 0.65),
    2px 2px 3px #000;
}

.header-text p,
.header p {
  margin: 0;
  color: #d9bd85;
  font-size: 13px;
  letter-spacing: 0.4px;
}

.account-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.logged-in {
  color: #dec58a;
  font-size: 12px;
  text-shadow: 0 1px 1px #000;
}

.login-button,
.button,
.small-button {
  display: inline-block;
  border-radius: 2px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.28),
    0 2px 4px rgba(0,0,0,0.45);
}

.login-button,
.button {
  margin-top: 15px;
  padding: 10px 18px;
  color: #1d0804;
  background: linear-gradient(180deg, #f1c775 0%, #b67e2c 48%, #7e4815 100%);
  border: 1px solid #f2d38f;
}

.login-button {
  margin-top: 0;
  white-space: nowrap;
}

.login-button:hover,
.button:hover {
  background: linear-gradient(180deg, #ffe3a1 0%, #d09232 48%, #915216 100%);
  color: #120502;
}

.tabs {
  display: flex;
  justify-content: center;
  background:
    linear-gradient(180deg, #26100a 0%, #100805 100%);
  border-bottom: 1px solid #6e4b1f;
  border-top: 1px solid rgba(255, 221, 138, 0.2);
}

.tab {
  display: block;
  padding: 12px 23px;
  border-right: 1px solid #3e2410;
  border-left: 1px solid rgba(255, 218, 132, 0.06);
  background: linear-gradient(180deg, #28130b 0%, #130806 100%);
  color: #d7bd80;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.3px;
  text-decoration: none;
  text-shadow: 0 1px 1px #000;
}

.tab:first-child {
  border-left: 1px solid #3e2410;
}

.tab:hover {
  color: #fff0bc;
  background: linear-gradient(180deg, #3a1b0e 0%, #1d0b07 100%);
}

.tab.active {
  color: #fff0bc;
  background:
    linear-gradient(180deg, rgba(145, 24, 18, 0.95) 0%, rgba(74, 16, 11, 0.95) 100%);
  border-bottom: 3px solid #d6a04b;
}

.content {
  padding: 26px;
  min-height: 420px;
  background:
    radial-gradient(circle at 50% 0%, rgba(138, 89, 37, 0.14), transparent 360px),
    linear-gradient(180deg, #160d09 0%, #0b0705 100%);
}

.panel {
  display: block;
  padding: 2px;
}

h2 {
  margin-top: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  color: #ffe0a0;
  border-bottom: 1px solid #6e4b1f;
  padding-bottom: 9px;
  text-shadow: 0 2px 2px #000;
}

h3 {
  margin-top: 0;
  color: #f2cf83;
  text-shadow: 0 1px 1px #000;
}

p {
  line-height: 1.55;
  color: #ead7ad;
}

a {
  color: #ffd47b;
}

a:hover {
  color: #fff1c2;
}

.info-box,
.form-box,
.cart-box,
.ranking-summary,
.ranking-card,
.donation-card {
  margin-top: 18px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(50, 27, 14, 0.96) 0%, rgba(22, 12, 8, 0.98) 100%);
  border: 1px solid #6e4b1f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 132, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.45);
}

.info-box h3,
.form-box h3,
.cart-box h3,
.ranking-card h3,
.donation-card h3 {
  color: #ffd47b;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: rgba(7, 4, 3, 0.35);
}

td,
th {
  padding: 9px;
  border: 1px solid #4b3018;
  text-align: left;
}

td:first-child {
  width: 40%;
  color: #ffd47b;
}

th {
  background: linear-gradient(180deg, #3a1a0e 0%, #1d0d08 100%);
  color: #fff0bc;
}

ul {
  line-height: 1.7;
  color: #ead7ad;
}

.form-box label {
  display: block;
  margin: 12px 0 5px;
  color: #ffd47b;
  font-weight: bold;
}

.form-box input {
  width: 100%;
  max-width: 360px;
  padding: 10px;
  background: #090504;
  color: #fff1c2;
  border: 1px solid #6e4b1f;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.75);
}

.form-box input:focus {
  outline: none;
  border-color: #d6a04b;
}

.hidden-field {
  display: none;
}

.muted {
  color: #a9956b;
  font-weight: normal;
}

.message {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid;
  font-weight: bold;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
}

.message.success {
  color: #e6ffd1;
  background: #183015;
  border-color: #5c9a43;
}

.message.error {
  color: #ffd6c7;
  background: #3a1210;
  border-color: #a64c37;
}

.footer {
  padding: 14px 28px;
  background: linear-gradient(180deg, #120805 0%, #070403 100%);
  border-top: 1px solid #6e4b1f;
  color: #a9956b;
  font-size: 12px;
  text-align: center;
}

.donation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.donation-card {
  position: relative;
  overflow: hidden;
}

.donation-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d6a04b, transparent);
}

.donation-card h3 {
  margin-bottom: 8px;
}

.donation-price {
  margin: 0 0 10px;
  color: #ffe0a0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: bold;
  text-shadow: 0 2px 2px #000;
}

.paypal-button-box {
  margin-top: 14px;
  min-height: 48px;
}

.inline-form {
  display: inline-block;
  margin: 0;
}

.cart-table td:first-child {
  width: auto;
  color: #ead7ad;
}

.cart-total {
  margin-top: 14px;
  font-size: 18px;
  color: #ffe0a0;
  text-align: right;
}

.cart-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}

.checkout-button {
  font-size: 15px;
}

.small-button {
  padding: 7px 10px;
  background: linear-gradient(180deg, #3a2414 0%, #1b0e08 100%);
  color: #f2cf83;
  border: 1px solid #6e4b1f;
  text-shadow: 0 1px 1px #000;
}

.small-button:hover {
  background: linear-gradient(180deg, #553117 0%, #281208 100%);
}

.ranking-summary {
  margin: 0 0 18px 0;
}

.ranking-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #4b3018;
}

.ranking-summary-row:last-child {
  border-bottom: 0;
}

.ranking-summary-row span {
  color: #ffd47b;
  font-weight: bold;
}

.ranking-summary-row strong {
  color: #fff1c2;
}

.ranking-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.ranking-card h3 {
  margin-bottom: 10px;
}

.ranking-table td:first-child {
  width: 48px;
  color: #ffd47b;
  font-weight: bold;
}

.info-table td:first-child {
  color: #ffd47b;
}

/* Download page */

.download-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.download-option {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(50, 27, 14, 0.96) 0%, rgba(22, 12, 8, 0.98) 100%);
  border: 1px solid #6e4b1f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 132, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.45);
}

.download-option::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d6a04b, transparent);
}

.download-option h3 {
  margin: 0 0 8px;
  color: #ffd47b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
}

.download-option p {
  min-height: 42px;
  margin: 0 0 14px;
  color: #ead7ad;
}

.download-option .button {
  margin-top: 8px;
}

@media (max-width: 650px) {
  .site {
    margin: 0;
    border-left: 0;
    border-right: 0;
  }

  .header {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
  }

  .header-text h1,
  .header h1 {
    font-size: 29px;
  }

  .account-area {
    justify-content: flex-start;
  }

  .tabs {
    flex-wrap: wrap;
  }

  .tab {
    flex: 1 1 50%;
    border-bottom: 1px solid #3e2410;
    text-align: center;
  }

  .content {
    padding: 18px;
  }

  .ranking-summary-row {
    flex-direction: column;
    gap: 4px;
  }

  .download-options {
    grid-template-columns: 1fr;
  }
}