/* 01-base.css: page foundations.
   Default font, background, header, headings, shared fields, and buttons. */

/* ===================================================================
   DEFAULT FONT AND BACKGROUND
   =================================================================== */
* {
  font-family: var(--ui-game-font);
  font-size: var(--ui-base-font-size);
}

* {
  box-sizing: border-box;
}

/* The hidden attribute takes precedence over other display rules. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ui-page-background) radial-gradient(var(--ui-page-grid-color) 1px, transparent 1px);
  background-size: var(--ui-page-grid-size) var(--ui-page-grid-size);
  color: var(--ink);
  font-family: var(--ui-body-font);
}

/* ===================================================================
   HEADER BEFORE ENTERING THE GAME
   =================================================================== */
.shell {
  max-width: var(--ui-shell-width);
  margin: auto;
  padding: var(--ui-shell-padding);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  color: var(--paper);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-header-gap);
}

.account-badge {
  color: var(--mint);
  font-weight: 700;
  font-size: var(--ui-account-size);
}

/* Typography. */
.brand,
h1,
.eyebrow {
  font-family: var(--ui-heading-font);
}

.brand {
  font-size: var(--ui-brand-size);
  line-height: 1.5;
}

.brand span {
  display: block;
  margin-top: 5px;
  color: var(--mint);
  font-size: var(--ui-brand-subtitle-size);
}

.language {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ui-language-size);
}

.eyebrow {
  color: var(--orange);
  font-size: var(--ui-eyebrow-size);
  line-height: 1.5;
}

h1 {
  margin: 14px 0;
  font-size: var(--ui-heading-size);
  line-height: 1.5;
}

.muted {
  color: var(--muted);
}

/* Shared form controls and buttons. */
select,
input,
button {
  font: inherit;
}

select,
input {
  padding: var(--ui-field-padding);
  border: var(--ui-field-border);
  border-radius: var(--ui-field-radius);
  background: var(--ui-field-background);
}

button {
  padding: var(--ui-button-padding);
  border: var(--ui-button-border);
  border-radius: var(--ui-button-radius);
  font-weight: 700;
  cursor: pointer;
}

.primary {
  background: var(--ui-primary-background);
  box-shadow: var(--ui-primary-shadow);
}

.secondary,
.leave {
  background: var(--ui-secondary-background);
}

.leave {
  color: var(--ui-leave-color);
}

.small {
  display: block;
  margin: 12px 0 2px;
  padding: 7px 9px;
  background: var(--ui-small-background);
  font-size: 18px;
}

.error {
  min-height: 20px;
  color: var(--ui-error-color);
  font-weight: 700;
}

/* ===================================================================
   IMAGE ICONS
   Definitions: js/icons.js. Size: --ui-icon-image-size.
   =================================================================== */
/* Inherit font size from the icon's container; the universal rule above would force 14 px. */
.icon-image { font-size: inherit; display: inline-block; width: var(--ui-icon-image-size); height: var(--ui-icon-image-size); vertical-align: -0.2em; object-fit: contain; image-rendering: pixelated; }