:root {
  --accent-light: #9fe870;
  --accent-lighter: #c9f7a8;
  --accent: #4aa84a;
  --accent-dark: #2f6b2f;
  --pixel-dark: #1b1b1b;
  --pixel-mid: #2a2a2a;
  --pixel-light: #3a3a3a;
  --panel: #202020;
  --panel-border: #4a4a4a;
  --panel-glow: #6bd46b55;
  --pixel-gap: 10px;
  --button-shadow-light: #7bd87b;
  --button-shadow-dark: #2e5f2e;
  --button-shadow-size: 3px;
  --button-highlight-size: 2px;
  --input-border-width: 2px;
  --font-family: "Courier New", Courier, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
}

body {
  background:
    linear-gradient(135deg, #0f1a10 0%, #111 50%, #0e140f 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 2px,
      rgba(0, 0, 0, 0.03) 2px 4px
    );
  color: #e8ffe8;
  line-height: 1.35;
  font-family: var(--font-family);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    linear-gradient(180deg, #2b3f27 0%, #1d2c1a 60%, #141c13 100%);
  opacity: 0.35;
  pointer-events: none;
  z-index: -2;
}

h1 {
  font-family: var(--font-family);
}

hr {
  border: none;
  border-top: 2px solid var(--accent-light);
}

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

thead {
  font-weight: bold;
  white-space: nowrap;
}

td:not(:last-child) {
  padding-right: 0.5rem;
}

thead tr > td, tbody tr:not(:last-child) > td {
  padding-bottom: 0.5rem;
}

td:last-child {
  text-align: right;
}

a {
  color: var(--accent-lighter);
}

a:visited {
  color: var(--accent-light);
}

.header-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  white-space: nowrap;
}

.divider {
  display: flex;
  align-items: center;
  padding: 5px 0;
  gap: 0.5em;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid white;
}
.openid-logo {
  height: 3rem;
  vertical-align: middle;
}

.logo {
  color: #eaffea;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35em;
  text-shadow: 0 0 6px #7bd87b55;
}

.logo:visited {
  color: white;
}

.logo > img {
  width: 1em;
  height: 1em;
}

.honeypot {
  display: none;
}

input {
  font-family: var(--font-family);
}

summary {
  cursor: pointer;
}

input {
  color: white;
  accent-color: var(--accent);
}

input:disabled {
  color: gray;
  filter: grayscale(100%);
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"] {
  width: 20em;
  margin: 0.35em 0;
  background-color: var(--panel);
  padding: 0.6em 0.7em;
  border: var(--input-border-width) solid var(--accent);
  box-shadow:
    0 0 0 2px var(--pixel-dark),
    0 0 0 4px var(--pixel-light);
}

input.long {
  width: 22.5em;
}

/* Invite code note shown when the user entered from an invite link. */
.invite-note {
  margin: 0.05em 0 0;
  color: #727272;
  font-size: 1.00em;
}

.invite-note-invited {
  color: var(--accent);
}

/* User center layout: match /web and /web/registration framing */
.user-center {
  margin-top: 10px;
}

.user-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

@media (min-width: 900px) {
  .user-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .user-card-full {
    grid-column: 1 / -1;
  }
}

.user-card {
  background: rgba(10, 10, 10, 0.72);
  border-color: rgba(0, 0, 0, 0.55);
}

.account-summary {
  background: rgba(10, 10, 10, 0.72);
}

/* User center: keep blocks compact and aligned */
.user-center .pixel-card {
  margin: 8px 0;
}

.user-grid-areas {
  gap: 10px;
}

@media (min-width: 900px) {
  .user-grid-areas {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "skin invite"
      "skin security"
      "adminpanel adminpanel"
      "adminedit adminedit";
  }
  .user-area-skin { grid-area: skin; }
  .user-area-invite { grid-area: invite; }
  .user-area-security { grid-area: security; }
  .user-area-adminpanel { grid-area: adminpanel; }
  .user-area-admin-edit { grid-area: adminedit; }
}

/* When the skin block is disabled/hidden, don't leave a half-width empty column. */
@media (min-width: 900px) {
  .user-grid-areas .user-area-invite,
  .user-grid-areas .user-area-security,
  .user-grid-areas .user-area-admin-edit {
    grid-column: 1 / -1;
  }
}

.invite-link-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: nowrap;
}

.invite-link-row input.long {
  flex: 1 1 22.5em;
  min-width: 14em;
}

@media (max-width: 700px) {
  .invite-link-row {
    flex-wrap: wrap;
  }
}

.inline-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
}

.inline-row input[type="password"] {
  flex: 0 1 auto;
}

@media (max-width: 700px) {
  .inline-row {
    flex-wrap: wrap;
  }
}

.skin-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
}

.skin-preview-img,
.skin-preview-empty {
  width: 110px;
  height: 110px;
  border: 2px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.22);
  box-shadow:
    0 0 0 3px var(--pixel-dark),
    inset 0 0 0 2px var(--pixel-light);
}

.skin-preview-img {
  object-fit: cover;
  image-rendering: pixelated;
}

.skin-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cfcfcf;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.invite-stats {
  gap: 0.9rem;
}

@media (max-width: 600px) {
  input[type="text"]:not([hidden]),
  input[type="number"]:not([hidden]),
  input[type="password"]:not([hidden]),
  input.long:not([hidden]) {
    display: block;
    width: 100%;
  }
}

input[type="number"] {
  width: 5rem;
}

input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled) {
  cursor: pointer;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder {
  color: white;
  opacity: 0.75;
}

button,
input[type="submit"],
input[type="file"]::file-selector-button {
  margin: 0.35em 0;
  font-family: var(--font-family);
  background-color: var(--accent);
  display: inline-block;
  color: #f0fff0;
  padding: 0.5em 1.2em;
  border: none;
  text-shadow: 0 1px 0 var(--pixel-dark);
  box-shadow:
    0 var(--button-shadow-size) 0 0 var(--button-shadow-light) inset,
    var(--button-shadow-size) 0 0 0 var(--button-shadow-light) inset,
    0 calc(-1 * var(--button-shadow-size)) 0 0 var(--button-shadow-dark) inset,
    calc(-1 * var(--button-shadow-size)) 0 0 0 var(--button-shadow-dark) inset,
    0 0 0 var(--button-highlight-size) var(--pixel-dark);
}

input[type="file"]::file-selector-button {
  margin-right: 0.5em;
}

button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="file"]::file-selector-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 var(--button-shadow-size) 0 0 var(--button-shadow-light) inset,
    var(--button-shadow-size) 0 0 0 var(--button-shadow-light) inset,
    0 calc(-1 * var(--button-shadow-size)) 0 0 var(--button-shadow-dark) inset,
    calc(-1 * var(--button-shadow-size)) 0 0 0 var(--button-shadow-dark) inset,
    0 0 0 var(--button-highlight-size) var(--accent-light);
}

button:active:not(:disabled),
input[type="submit"]:active:not(:disabled),
input[type="file"]::file-selector-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 var(--button-shadow-size) 0 0 var(--button-shadow-dark) inset,
    var(--button-shadow-size) 0 0 0 var(--button-shadow-dark) inset,
    0 calc(-1 * var(--button-shadow-size)) 0 0 var(--button-shadow-light) inset,
    calc(-1 * var(--button-shadow-size)) 0 0 0 var(--button-shadow-light) inset,
    0 0 0 var(--button-highlight-size) var(--accent-light);
}


#content {
  /* Always fit within viewport to avoid horizontal scrolling */
  width: calc(100% - 32px);
  /* Wider frame for nicer layout (still responsive). */
  max-width: 1100px;
  min-width: 0;
  margin: 16px auto;
  padding: 1em;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  box-shadow:
    0 0 0 4px var(--pixel-dark),
    0 0 18px var(--panel-glow);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  /* Allow vertical scrolling inside the panel, but never horizontal. */
  overflow-x: hidden;
  overflow-y: auto;
  align-self: center;
}

.pixel-title {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #eaffea;
  text-shadow: 0 0 6px #7bd87b55;
}

.pixel-card {
  margin: 12px 0;
  padding: 14px;
  border: 2px solid var(--panel-border);
  background: var(--pixel-mid);
  box-shadow:
    0 0 0 3px var(--pixel-dark),
    inset 0 0 0 2px var(--pixel-light);
}

.pixel-shell {
  margin: 8px 0;
  padding: 12px;
  border: 2px solid var(--panel-border);
  background: #1b1b1b;
  box-shadow:
    0 0 0 3px var(--pixel-dark),
    0 0 10px var(--panel-glow);
}

.center-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center-shell > .pixel-card {
  width: 100%;
}

.pixel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.inventory-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pixel-gap);
  background: #1a1a1a;
  padding: 16px;
  border: 3px solid #3f3f3f;
  box-shadow: 0 0 0 4px #0f0f0f;
}

.inventory-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--pixel-gap);
}

.pixel-slot {
  padding: 10px;
  background: #2b2b2b;
  border: 2px solid #4c4c4c;
  box-shadow:
    inset 0 0 0 2px #1a1a1a,
    0 0 0 2px #0f0f0f;
}

.pixel-slot h3 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: #eaffea;
}

.pixel-form .pixel-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 700px) {
  .pixel-form .pixel-row {
    grid-template-columns: 1fr;
  }
}

.pixel-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pixel-form .pixel-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pixel-form input[type="text"],
.pixel-form input[type="password"],
.pixel-form input[type="number"],
.pixel-form input[type="email"],
.pixel-form select {
  width: 40%;
  min-width: 220px;
}

.form-compact input[type="text"],
.form-compact input[type="password"],
.form-compact input[type="number"],
.form-compact input[type="email"],
.form-compact select {
  width: 40%;
  min-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

/* Login page inputs: keep shorter, matching the registration page's look. */
/* (reverted) login-form overrides removed; use standard form sizing */

.pixel-form .form-actions {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pixel-form .form-actions input[type="submit"] {
  min-width: 120px;
  font-size: 1.1rem;
  padding: 0.65em 1.1em;
}

/* Ensure "long" inputs are consistently sized (login + registration). */
.pixel-form input.long {
  width: 15em;
  max-width: 15em;
}

@media (max-width: 600px) {
  .pixel-form input.long:not([hidden]) {
    width: 100%;
    max-width: none;
  }
}

details.pixel-card > summary {
  cursor: pointer;
  list-style: none;
}
details.pixel-card > summary::-webkit-details-marker {
  display: none;
}

.error-message,
.success-message,
.warning-message {
  padding: 8px 12px;
  border: 2px solid var(--panel-border);
  background: var(--pixel-mid);
  box-shadow: 0 0 0 2px var(--pixel-dark);
}

button:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="file"]:not(:disabled)::file-selector-button {
  cursor: pointer;
}

select {
  font-family: var(--font-family);
  margin: 0.3em 0;
  background-color: black;
  color: white;
  padding: 0.5em;
  border: none;
  border: var(--input-border-width) solid var(--accent);
}

select:not(:disabled) {
  cursor: pointer;
}

fieldset {
  border: var(--input-border-width) solid var(--accent);
}

.svg-defs {
  width: 0;
  height: 0;
  position: absolute;
}

#background {
  z-index: -1;
  position: fixed;
  inset: 0;
}

@media (max-width: 700px) {
  #content {
    width: calc(100% - 32px);
    min-width: 0;
  }
  .user-center {
    width: calc(100% - 32px);
    min-width: 0;
  }
}

pre {
  border-left: 2px solid var(--accent-light);
  padding-left: 0.5em;
  white-space: pre-wrap;
  word-break: break-word;
}

.success-message {
  color: lime;
}

.warning-message {
  color: orange;
}

.error-message {
  color: lightcoral;
}

#skin-container {
  text-align: center;
}

#skin-canvas {
  display: inline-block;
}

.texture-preview {
  width: 256px;
  image-rendering: pixelated;
}

.small-texture-preview {
  width: 64px;
  image-rendering: pixelated;
}

.noscript-hidden {
  display: none !important;
}

.list-profile-picture {
  --list-profile-picture-size: 24px;
  width: var(--list-profile-picture-size);
  height: var(--list-profile-picture-size);
  position: relative;
}

.list-profile-picture-back,
.list-profile-picture-body,
.list-profile-picture-front {
  width: 100%;
  height: 100%;
  position: absolute;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-image: var(--list-profile-picture-image);
  background-position-y: calc(-1 * var(--list-profile-picture-size));
  background-size: calc(8 * var(--list-profile-picture-size)),
    calc(8 * var(--list-profile-picture-size));
}

.list-profile-picture-back {
  background-position-x: calc(-7 * var(--list-profile-picture-size));
}

.list-profile-picture-body {
  transform: scale(0.92);
  background-position-x: calc(-1 * var(--list-profile-picture-size));
}

.list-profile-picture-front {
  background-position-x: calc(-5 * var(--list-profile-picture-size));
}
.user-center {
  /* Match login/register container sizing for consistency */
  width: 100%;
  max-width: 1100px;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.security-section {
  margin: 0 0 16px;
}

.account-summary {
  padding: 16px;
}

.account-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-name {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.account-meta {
  opacity: 0.8;
  font-size: 0.9rem;
  word-break: break-all;
}

.account-stats {
  display: flex;
  gap: 12px;
}

.account-stats .stat {
  background: var(--pixel-mid);
  border: 2px solid var(--panel-border);
  padding: 8px 12px;
  min-width: 90px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--pixel-dark);
}

.account-stats .stat span {
  display: block;
  font-size: 0.75rem;
  opacity: 0.75;
}

.account-stats .stat strong {
  display: block;
  font-size: 1.2rem;
}

.pixel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}

.pixel-card {
  background: var(--panel);
  border: 2px solid var(--panel-border);
  padding: 16px;
  box-shadow:
    0 0 0 3px var(--pixel-dark),
    0 0 10px var(--panel-glow);
  min-width: 0;
}

/* page-center no longer used */

.pixel-section-title {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* keep input width control above; avoid stretching to full width */

.pixel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pixel-link {
  padding: 6px 10px;
  border: 2px solid var(--panel-border);
  background: var(--pixel-mid);
  box-shadow: 0 0 0 2px var(--pixel-dark);
  text-decoration: none;
  color: var(--accent-lighter);
}

.muted {
  opacity: 0.8;
}

.text-danger {
  color: #ff6b6b;
}

.form-note {
  margin: 0.2em 0 0.5em;
  font-size: 0.92rem;
  line-height: 1.25;
}

.form-note em {
  font-style: normal;
}

.center-text {
  text-align: center;
}

.text-danger {
  color: #ff6b6b;
}

.pixel-collapsible summary {
  cursor: pointer;
  font-weight: bold;
  margin: -4px 0 8px;
}

@media (max-width: 700px) {
  .account-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .account-stats {
    width: 100%;
  }
}
.pixel-table {
  /* Avoid horizontal scrollbars; wrap long content instead. */
  overflow-x: hidden;
  padding-bottom: 4px;
}

.pixel-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.pixel-table th,
.pixel-table td {
  word-break: break-word;
}

/* --- PORTAL THEME OVERRIDES (match / portal look) --- */
/* Keep Drasl's layout, but align colors/background/typography with the portal. */
:root {
  --font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC",
    "Noto Sans CJK SC", Arial, sans-serif;

  /* Grass block-ish green (deep) */
  --accent-light: #66c85f;
  --accent-lighter: #8fe087;
  --accent: #2f8f3c;
  --accent-dark: #1f6a2a;

  /*
    Theme: match the screenshot
    - Outer frame: dirt/brown
    - Inner panel: dark charcoal
    - Inputs: brown
    - Buttons: deep green
  */
  --frame: rgba(154, 116, 66, 0.94);
  --frame-border: rgba(58, 34, 12, 0.92);
  --panel-dark: rgba(28, 28, 28, 0.94);
  --panel-dark-border: rgba(12, 12, 12, 0.85);
  --input-brown: rgba(145, 108, 62, 0.92);
  --input-brown-border: rgba(88, 62, 32, 0.92);

  /* Legacy vars consumed by existing Drasl CSS */
  --pixel-dark: var(--panel-dark-border);
  --pixel-mid: rgba(0, 0, 0, 0.18);
  --pixel-light: rgba(255, 255, 255, 0.12);
  --panel: var(--frame);
  --panel-border: var(--frame-border);
  --panel-glow: rgba(220, 190, 120, 0.14);

  --button-shadow-light: rgba(210, 174, 110, 0.32);
  --button-shadow-dark: rgba(0, 0, 0, 0.48);
}

body {
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(246, 211, 122, 0.16), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(86, 224, 108, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.72)),
    var(--portal-background-image, url("./images/back_1.jpg"));
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: rgba(255, 255, 255, 0.92);
}

body::before {
  opacity: 0.0;
}

/* Make main containers look like portal cards */
#content,
.user-center {
  /* Outer frame */
  background: var(--frame);
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow:
    0 22px 65px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 2px rgba(58, 34, 12, 0.85);
}

/* Inner card surfaces: dark panel */
.pixel-card,
.account-stats .stat,
.inventory-panel,
#skin-container {
  background: var(--panel-dark);
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(58, 34, 12, 0.55),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Registration page uses .pixel-shell; match its color to .pixel-card */
.pixel-shell {
  background: var(--panel-dark);
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(58, 34, 12, 0.55),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Links/buttons closer to portal */
a {
  color: rgba(255, 255, 255, 0.92);
}

a:hover {
  color: var(--accent-lighter);
}

/* Reduce the thick inner outlines on cards/inputs to match the portal's cleaner look */
.pixel-card,
.account-stats .stat,
.pixel-link {
  border-width: 1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
fieldset {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Inputs: remove thick black "pixel" frame; keep portal-like dirt tone */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"] {
  background: var(--input-brown);
  border: 2px solid var(--input-brown-border);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Simple modal used for "login" popup on the registration page (and elsewhere). */
.modal-overlay[hidden] {
  display: none !important;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  z-index: 1000;
}

.modal-card {
  width: min(540px, 92vw);
  background: rgba(132, 132, 132, 0.96);
  border: 1px solid rgba(64, 36, 14, 0.72);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28);
  padding: 0.9rem 1rem 1rem;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.modal-head-title {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.modal-close {
  appearance: none;
  border: 1px solid rgba(64, 36, 14, 0.55);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.9);
  width: 2.2rem;
  height: 2.2rem;
  line-height: 2.1rem;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Download page (portal) */
.pixel-card-inner {
  border: 2px solid #3b2f1f;
  background: #1f1f1f;
  padding: 14px;
  margin: 12px 0 16px;
}

.download-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.download-item {
  display: block;
  padding: 10px 12px;
  border: 2px solid #3b2f1f;
  background: #2a2a2a;
  color: #e9e1d1;
  text-decoration: none;
}

.download-item:hover {
  border-color: #6e4f2a;
  background: #2f2f2f;
}