/*
 * base.css
 * Base visual rules for the Magic Game template.
 */

html,
body {
  background: var(--color-bg-deep);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: var(--line-height-body);
  overscroll-behavior-x: none;
}

body {
  min-height: 100dvh;
  isolation: isolate;
}

body.magic-game {
  overflow-x: hidden;
}

body.no-js .game-root {
  display: none;
}

.noscript-warning {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  text-align: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 157, 79, 0.22), transparent 30%),
    radial-gradient(circle at 75% 75%, rgba(126, 20, 16, 0.34), transparent 34%),
    linear-gradient(140deg, #080303, #1f0907 48%, #090202);
}

.noscript-warning h1,
.noscript-warning p {
  width: min(620px, 100%);
}

.noscript-warning h1 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-title);
}

.noscript-warning p {
  font-size: var(--font-size-md);
  color: var(--color-text-soft);
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-title);
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.58), 0 0 30px rgba(255, 190, 105, 0.22);
}

h2 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-title);
}

p,
li,
dd,
dt {
  overflow-wrap: anywhere;
  word-break: normal;
}

p + p,
p + ul,
p + ol,
ul + p,
ol + p {
  margin-top: 0.8em;
}

strong {
  font-weight: 700;
  color: #fff8eb;
}

em {
  color: var(--color-gold);
}

button,
input,
select,
textarea {
  font-family: var(--font-primary);
}

button {
  font-weight: 700;
  letter-spacing: 0.015em;
}

button,
[role="button"] {
  -webkit-user-select: none;
  user-select: none;
}

input[type="number"],
input[type="text"] {
  width: 100%;
  min-height: 48px;
  border: var(--input-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  background: var(--input-bg);
  color: var(--input-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

input[type="number"]:focus,
input[type="text"]:focus {
  border: var(--input-border-focus);
  box-shadow: 0 0 0 4px rgba(255, 218, 155, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

input::placeholder {
  color: rgba(255, 243, 223, 0.48);
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

.game-root,
.game-app,
.screen-content,
.game-screen,
.screen-inner,
.text-box,
.modal-box,
.carousel,
.choice-grid,
.drag-challenge,
.ghost-challenge {
  max-width: 100%;
}

.game-root,
.game-app,
.screen-content,
.game-screen {
  overflow-x: hidden;
}

.text-box,
.modal-box,
.game-button,
.answer-option,
.choice-label,
.debug-panel {
  overflow-wrap: anywhere;
  word-break: normal;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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

.is-visually-muted {
  opacity: 0.56;
}

.is-disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  filter: saturate(0.72);
  pointer-events: auto;
}

body.is-modal-open {
  overflow: hidden;
}

@supports not (height: 100dvh) {
  body {
    min-height: 100vh;
  }
}