:root {
  --paper: #e7e3dd; /* pale grey */
  --off-white: #f6f2ea;
  --ink: #1f1c18; /* charcoal */
  --ink-soft: #4a4338;

  --pei-red: #b7410e; /* PEI red dirt */
  --pei-red-dark: #8f330c;

  --wood: #6b4f35; /* wood brown */
  --blue: #3b6ea8; /* small blue accents */

  --grid: 4px;

  /* Prince Edward Island–inspired pastels (right column only): strait, sand, pasture, red earth */
  --isle-mist: #e4edf2; /* outer panel fill — cool fog / overcast sky */
  --isle-strait: #9eb6c9; /* frame & strong borders — Northumberland Strait blue-grey */
  --isle-shallow: #c2d9ea; /* avatar well — shallow water / summer sky */
  --isle-shallow-edge: #a8c4d8;
  --isle-sand: #f3eee4; /* inventory card — dune / sandstone */
  --isle-sand-edge: #b9a896;
  --isle-pasture: #d5e8d9; /* slot fill — muted field */
  --isle-pasture-deep: #a8c4b2;
  --isle-ink: #4a4f52; /* soft charcoal on pastels */
  --isle-ink-soft: #6d767c;
  --isle-rust: #c97b62; /* pastel red soil accent */
  --isle-focus: #5c85a6; /* focus ring — coastal blue */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "VT323", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 18px;
  line-height: 1.2;
  overflow-x: hidden;
  overflow-y: auto;
  text-rendering: optimizeSpeed;
}

/* Four conceptual columns: [ gutter | text | avatar+inventory | gutter ] */
.layout {
  height: auto;
  min-height: 100dvh;
  padding: calc(var(--grid) * 5) calc(var(--grid) * 3);
  display: grid;
  grid-template-columns:
    1fr
    minmax(0, min(60ch, 52vw))
    minmax(260px, 380px)
    1fr;
  column-gap: calc(var(--grid) * 8);
  row-gap: calc(var(--grid) * 6);
  align-items: start;
  width: 100%;
}

.column-left {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
}

.column-right {
  grid-column: 3;
  min-width: 0;
  position: sticky;
  top: calc(var(--grid) * 4);
}

.inscription {
  margin: 0;
}

.title {
  margin: 0 0 calc(var(--grid) * 2);
  font-weight: 400;
  font-size: clamp(30px, 3.9vw, 56px);
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.titleMain {
  white-space: nowrap;
  display: inline-block;
}

.subtitle {
  display: block;
  font-size: 0.58em;
  color: var(--ink-soft);
  line-height: 1.06;
}

.byline {
  margin: 0 0 calc(var(--grid) * 2);
  font-size: 22px;
  color: var(--ink-soft);
}

.stat {
  margin: 0 0 calc(var(--grid) * 2.5);
  font-size: 22px;
  color: var(--pei-red-dark);
}

.body {
  margin: 0;
  font-size: 20px;
  color: var(--ink-soft);
}

.body + .body {
  margin-top: calc(var(--grid) * 2.5);
}

/* —— Island panel (right column): PEI pastels —— */

.gbDevice {
  border: 3px solid var(--isle-strait);
  background: var(--isle-mist);
  padding: calc(var(--grid) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 3);
}

.gbScreen {
  position: relative;
  background: var(--isle-shallow);
  border: 3px solid var(--isle-shallow-edge);
  padding: calc(var(--grid) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--grid) * 3);
  min-height: 260px;
}

.gbSoundToggle {
  position: absolute;
  top: calc(var(--grid) * 1.5);
  right: calc(var(--grid) * 1.5);
  z-index: 2;
  margin: 0;
  padding: calc(var(--grid) * 1.25);
  border: 2px solid var(--isle-shallow-edge);
  background: var(--isle-shallow);
  background: color-mix(in srgb, var(--isle-shallow) 65%, var(--isle-mist));
  color: var(--isle-ink);
  cursor: pointer;
  font-family: inherit;
  line-height: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 2px 2px 0 var(--isle-shallow-edge);
}

.gbSoundToggle:hover {
  background: var(--off-white);
  background: color-mix(in srgb, var(--isle-shallow) 45%, var(--off-white));
  color: var(--isle-ink);
}

.gbSoundToggle.gbSoundToggle--muted {
  background: var(--isle-mist);
  background: color-mix(in srgb, var(--isle-mist) 55%, var(--isle-shallow-edge) 45%);
  border-color: color-mix(in srgb, var(--isle-shallow-edge) 65%, var(--isle-mist));
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--isle-shallow-edge) 70%, transparent);
}

.gbSoundToggle.gbSoundToggle--muted:hover {
  background: color-mix(in srgb, var(--isle-mist) 50%, var(--isle-shallow) 50%);
  border-color: var(--isle-shallow-edge);
}

.gbSoundToggle:focus-visible {
  outline: 2px solid var(--isle-focus);
  outline-offset: 2px;
}

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

.gbSoundToggle__img {
  display: block;
  width: 36px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  opacity: 1;
  filter: none;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.gbSoundToggle.gbSoundToggle--muted .gbSoundToggle__img {
  opacity: 0.4;
  filter: grayscale(0.55) brightness(0.68) contrast(0.92);
}

.gbSoundToggle.gbSoundToggle--muted:hover .gbSoundToggle__img {
  opacity: 0.52;
  filter: grayscale(0.4) brightness(0.78) contrast(0.95);
}

.panelHearts {
  display: block;
  width: auto;
  height: auto;
  max-width: 85%;
  max-height: 28px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  margin-top: 0;
  margin-bottom: 0;
}

.panelAvatar {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(38vh, 228px);
  margin-top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  background: transparent;
}

.gbInventoryBlock {
  background: var(--isle-sand);
  border: 3px solid var(--isle-sand-edge);
  padding: calc(var(--grid) * 2.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 2);
}

.gbInventoryTitle {
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--isle-ink);
  line-height: 1;
  text-align: center;
  padding-bottom: calc(var(--grid) * 1);
  border-bottom: 2px solid var(--isle-pasture-deep);
}

.gbGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, minmax(36px, auto));
  gap: calc(var(--grid) * 1.5);
  align-items: stretch;
  justify-items: stretch;
}

.gbSlot {
  margin: 0;
  padding: calc(var(--grid) * 0.75) calc(var(--grid) * 0.625);
  border: 2px solid var(--isle-strait);
  background: var(--isle-pasture);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.12;
  color: var(--isle-ink);
}

.gbSlot:focus-visible {
  outline: 2px solid var(--isle-focus);
  outline-offset: 2px;
}

.gbSlot--empty {
  border-style: dashed;
  border-color: var(--isle-pasture-deep);
  background: var(--isle-sand);
  opacity: 0.75;
  pointer-events: none;
  cursor: default;
  padding: 0;
  min-height: 36px;
}

.gbSlotLabel {
  display: block;
  pointer-events: none;
}

.gbCaption {
  margin: 0;
  min-height: 4.2em;
  font-size: 17px;
  line-height: 1.2;
  color: var(--isle-ink-soft);
  border-top: 2px solid var(--isle-pasture-deep);
  padding-top: calc(var(--grid) * 2);
}

@media (max-width: 960px) {
  body {
    overflow: auto;
  }

  .layout {
    min-height: 100dvh;
    padding: calc(var(--grid) * 4) calc(var(--grid) * 3);
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .column-left {
    grid-column: 1;
    order: 1;
  }

  .column-right {
    grid-column: 1;
    order: -1;
    position: static;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .title {
    font-size: clamp(26px, 3.6vw, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gbSoundToggle {
    display: none;
  }

  .panelAvatar {
    image-rendering: crisp-edges;
  }
}