/* Hamster Friendship: The Lost Alice. Site and game chrome styles. */

:root {
  /* Primitives: named by hue. Components never use these directly. */
  --bark-950: #1a110b;
  --bark-900: #26180f;
  --bark-800: #352216;
  --bark-700: #563823;
  --bark-600: #7a5233;
  --cream-50: #fbf3e4;
  --cream-200: #e6d3b5;
  --amber-400: #f2a93b;
  --amber-300: #f8c878;
  --amber-200: #fbdba6;
  --berry-400: #e9735f;

  /* Semantic roles. */
  --color-bg: var(--bark-950);
  --color-surface: var(--bark-900);
  --color-surface-raised: var(--bark-800);
  --color-border: var(--bark-700);
  --color-border-strong: var(--bark-600);
  --color-text: var(--cream-50);
  --color-text-muted: var(--cream-200);
  --color-accent: var(--amber-400);
  --color-accent-hover: var(--amber-300);
  --color-on-accent: var(--bark-950);
  --color-focus: var(--amber-200);
  --color-danger: var(--berry-400);
  --color-overlay: rgb(26 17 11 / 0.84);

  /* Type: two families, two weights, five sizes (four per breakpoint). */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;

  /* Spacing steps. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --stage-max: 960px;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--text-xl);
}

h2 {
  font-size: var(--text-lg);
}

p {
  margin: 0;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition-property: background-color, color, scale;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}

.btn:active {
  scale: 0.96;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn-secondary {
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

@media (hover: hover) {
  .btn-primary:hover {
    background: var(--color-accent-hover);
  }

  .btn-secondary:hover {
    background: var(--color-border);
  }
}

.btn-small {
  min-height: 40px;
  padding: 8px 14px;
}

kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  box-shadow: inset 0 -2px 0 var(--color-border-strong);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}


/* The authored canvas remains the game. All utilities float over it. */
html, body { width: 100%; min-height: 100%; }
body { overflow: hidden; }
.game.page { width: 100%; height: 100vh; height: 100dvh; padding: 0; margin: 0; }
.stage { width: 100%; height: 100%; position: relative; isolation: isolate; background: var(--color-bg); }
#game { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; touch-action: none; }
.site-header { position: absolute; z-index: 8; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); background: rgb(26 17 11 / 0.92); }
.site-header h1 { font-size: var(--text-lg); white-space: nowrap; }
.stage-tools { display: flex; gap: var(--space-2); }
.stage-tools .btn { min-height: 44px; padding: 8px 12px; font-size: var(--text-sm); }
.hud { position: absolute; z-index: 8; inset: 62px auto auto max(12px, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; gap: 4px 16px; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.hud-item { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.hud-value { color: var(--color-text); }
#hud-pending:not(:empty) { color: var(--color-text-muted); font-size: var(--text-sm); }
.map-status { position: absolute; z-index: 2; inset: 104px auto auto max(12px, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-muted); }
.map-status strong { color: var(--color-text); }
.boss-status { position: absolute; z-index: 2; inset: 62px max(12px, env(safe-area-inset-right)) auto auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); }
.hud-bar { display: inline-block; position: relative; width: 80px; height: 8px; background: var(--color-surface-raised); overflow: hidden; border-radius: 8px; }
.hud-bar-fill { position: absolute; inset: 0; background: var(--color-danger); }
.overlay { position: absolute; z-index: 4; inset: 0; padding: 140px 16px 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; background: rgb(26 17 11 / 0.68); overflow-y: auto; }
.overlay h2 { font-size: var(--text-xl); }
.overlay-text { color: var(--color-text-muted); max-width: 36ch; font-size: var(--text-sm); text-wrap: pretty; }
.overlay-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.overlay-actions .btn { white-space: normal; }
.stats { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: var(--text-sm); }
.stats div { display: flex; gap: 8px; }
.stats dt { color: var(--color-text-muted); }
.stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.victory-hamster { width: 120px; height: auto; max-height: 96px; object-fit: contain; }
.dialogue { position: absolute; z-index: 6; inset: auto max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left)); padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-md); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; }
.dialogue-name { grid-column: 1 / -1; font-weight: 700; }
.dialogue-text { max-width: 65ch; }
.dialogue-actions { display: grid; align-self: end; gap: 4px; }
.dialogue-hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.toast { position: absolute; z-index: 7; inset: 150px auto auto 50%; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content; background: var(--color-surface); border-radius: var(--radius-sm); color: var(--color-text); padding: 8px 12px; font-size: var(--text-sm); pointer-events: none; opacity: 0; }
.toast.is-visible { opacity: 1; }
.error { color: var(--color-danger); }
.error:empty { display: none; }
.game-error { position: absolute; z-index: 10; inset: 100px 16px auto; padding: 12px; border-radius: var(--radius-sm); background: var(--color-surface); }
.save-summary { position: absolute; z-index: 2; inset: auto 16px 12px; width: fit-content; max-width: calc(100% - 32px); padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.rotate-hint { display: none; position: absolute; z-index: 5; inset: 144px 16px auto; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.touchpad { position: absolute; z-index: 3; inset: 0; pointer-events: none; user-select: none; }
.touchpad > * { pointer-events: auto; }
.joystick { display: none; position: absolute; inset: auto auto max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); width: 96px; height: 96px; border-radius: 50%; background: rgb(38 24 15 / 0.88); box-shadow: inset 0 0 0 2px var(--color-border-strong); touch-action: none; }
.joystick-track { position: absolute; inset: 0; display: grid; place-content: center; color: var(--color-text-muted); font-size: var(--text-xl); pointer-events: none; }
.joystick-thumb { position: absolute; width: 42px; height: 42px; left: calc(50% - 21px); top: calc(50% - 21px); border-radius: 50%; background: var(--color-surface-raised); box-shadow: inset 0 0 0 2px var(--color-accent); transform: translate(var(--stick-x,0px),var(--stick-y,0px)); pointer-events: none; }
.weapon-slots { position: absolute; inset: auto 16px 48px auto; display: flex; gap: 6px; }
.weapon-slot { position: relative; display: grid; grid-template-columns: auto auto; align-content: center; justify-content: center; gap: 0 3px; min-width: 56px; min-height: 64px; padding: 4px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); box-shadow: inset 0 0 0 1px var(--color-border-strong); touch-action: manipulation; }
.weapon-slot svg { width: 20px; height: 20px; }
.weapon-slot .slot-name { grid-column: 1 / -1; }
.slot-ammo { grid-column: 1 / -1; font-variant-numeric: tabular-nums; }
.weapon-slot:disabled { cursor: default; opacity: 0.7; }
.weapon-slot.is-owned { color: var(--color-text); }
.weapon-slot[aria-pressed="true"] { color: var(--color-on-accent); background: var(--color-accent); }
.weapon-slot[aria-pressed="true"]::after { content: ''; position: absolute; inset: 2px; border: 1px solid var(--color-on-accent); border-radius: 4px; pointer-events: none; }
.pad-btn { display: none; position: absolute; min-width: 44px; touch-action: none; border-radius: 50%; font-size: var(--text-sm); padding: 6px; }
.attack-btn { inset: auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto; width: 84px; height: 84px; }
.jump-btn { inset: auto max(28px, env(safe-area-inset-right)) max(112px, calc(env(safe-area-inset-bottom) + 96px)) auto; width: 60px; height: 60px; }
#context-interact { position: absolute; z-index: 4; inset: auto auto 128px 50%; transform: translateX(-50%); font-size: var(--text-sm); }
body:not([data-game-state="playing"]) .touchpad, body:not([data-game-state="playing"]) #context-interact { display: none; }
.menu-dialog { max-width: 400px; }
.game-utilities { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.game-utilities .btn { font-size: var(--text-sm); white-space: normal; }
.game-utilities #btn-wallet { grid-column: 1 / -1; }
.panel-subtitle { margin: 0; font-size: var(--text-lg); }
.guild-chapter { border-block-end: 1px solid var(--color-border); padding-block-end: 12px; }
.guild-chapter summary { min-height: 44px; cursor: pointer; padding-block: 8px; font-weight: 700; }
.guild-chapter p + p { margin-block-start: 12px; }
.guild-chapter p, .guild-chapter li { max-width: 65ch; }
.controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 16px; }
.controls dt { display: flex; flex-wrap: wrap; gap: 4px; align-items: start; }
.controls dd { margin: 0; color: var(--color-text-muted); }
.tips { padding-inline-start: 20px; margin-block: 8px; color: var(--color-text-muted); }
.tips li + li { margin-block-start: 8px; }
.prose p + p { margin-block-start: 12px; }
.audio-setting { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.audio-setting > label { font-weight: 700; }
.audio-setting output { font-variant-numeric: tabular-nums; }
.audio-setting input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 44px; accent-color: var(--color-accent); margin: 0; }
.mute-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.mute-label input { width: 20px; height: 20px; accent-color: var(--color-accent); flex: none; }
.player-dialog {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  overscroll-behavior: contain;
  overflow-y: auto;
  overflow-wrap: break-word;
}
.player-dialog::backdrop { background: rgb(10 7 5 / 0.8); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); position: sticky; inset-block-start: 0; z-index: 1; background: var(--color-surface); }
.panel-header h2 { font-size: var(--text-lg); min-width: 0; }
.close-dialog { flex: none; width: 44px; min-height: 44px; padding: 0; font-size: var(--text-lg); }
#panel-content { display: grid; gap: var(--space-4); }
.panel-note { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
.profile-form { display: grid; gap: var(--space-2); }
.profile-form label { font-weight: 700; }
.profile-form input {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-base);
}
.profile-form .btn { justify-self: start; margin-block-start: var(--space-2); }
.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); margin: 0; }
.profile-stats dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.profile-stats dd { margin: 0; font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.balance-label { font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-list { display: grid; gap: var(--space-5); }
.shop-item { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: var(--space-3); }
.item-art { display: inline-flex; width: 48px; height: 48px; }
.item-art svg { image-rendering: pixelated; }
.item-description h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); font-weight: 700; }
.shop-item .btn { font-size: var(--text-sm); padding-inline: var(--space-3); }
.item-feedback { grid-column: 2 / -1; font-size: var(--text-sm); }
.leaderboard { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.leaderboard th, .leaderboard td { padding: var(--space-3) var(--space-2); text-align: start; border-block-end: 1px solid var(--color-border); overflow-wrap: anywhere; }
.leaderboard th:nth-child(3), .leaderboard td:nth-child(3) { text-align: end; }
.wallet-dialog { max-width: 460px; }
.wallet-options { display: grid; gap: var(--space-3); margin-block: var(--space-4); }
.wallet-row { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; justify-content: flex-start; width: 100%; }
.wallet-row img { width: 28px; height: 28px; object-fit: contain; }
.wallet-address { overflow-wrap: anywhere; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
  .player-dialog { padding: var(--space-4); }
  .wallet-dialog { margin-block: auto 0; width: 100%; border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: max(var(--space-4), env(safe-area-inset-bottom)); }
  .shop-item { grid-template-columns: 40px minmax(0,1fr); }
  .shop-item > .btn { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .toast, .hud-bar-fill { transition-duration: 0ms; }
  .btn:active, .pad-btn.is-pressed { scale: 1; }
}


@media (max-width: 52rem), (pointer: coarse) {
  .joystick, .pad-btn { display: grid; place-content: center; }
  .weapon-slots { right: max(112px, calc(env(safe-area-inset-right) + 96px)); bottom: max(20px, env(safe-area-inset-bottom)); }
  .save-summary { inset: 137px auto auto 12px; max-width: calc(100% - 24px); }
  .rotate-hint { inset-block-start: 172px; }
}
@media (orientation: portrait) {
  #game { height: auto; aspect-ratio: 5/3; position: absolute; inset-block-start: 50%; transform: translateY(-50%); }
  .rotate-hint { display: block; }
  .map-status { inset-block-start: 101px; }
  .hud { column-gap: 12px; }
  .boss-status { inset: 204px 12px auto auto; }
}
@media (max-width: 28rem) {
  .tool-label { display: none; }
  .stage-tools { gap: 6px; }
  .stage-tools .btn { padding-inline: 8px; }
  .site-header h1 { font-size: var(--text-base); }
  .weapon-slot { min-width: 44px; min-height: 60px; }
  .weapon-slots { gap: 4px; right: 88px; }
  .attack-btn { width: 64px; height: 64px; right: 12px; }
  .jump-btn { width: 52px; height: 52px; right: 18px; bottom: 96px; }
  .joystick { width: 80px; height: 80px; left: 12px; }
  .overlay h2 { font-size: var(--text-lg); }
  .overlay-actions { max-width: 280px; }
}
@media (orientation: landscape) and (max-height: 34rem) {
  .overlay { padding: 96px 16px 12px; gap: 8px; }
  .overlay h2 { font-size: var(--text-lg); }
  .save-summary { display: none; }
  .map-status { inset-block-start: 98px; }
  .toast { inset-block-start: 138px; }
  .victory-hamster { width: 64px; max-height: 48px; }
  .dialogue { inset-block-end: 12px; }
}
@media (max-width: 22rem) {
  .hud { gap: 4px 10px; font-size: var(--text-sm); }
  .controls { grid-template-columns: 1fr; }
  .controls dd { margin-block-end: 8px; }
  .profile-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .btn, .toast, .hud-bar-fill { transition: none; } .btn:active, .pad-btn.is-pressed { scale: 1; } }
@media (forced-colors: active) { .btn, .joystick, .weapon-slot, .dialogue { border: 1px solid CanvasText; } }

/* Supplemental status belongs to the compact menu, leaving only four HUD metrics. */
.menu-dialog .map-status { position: static; display: grid; padding: 0; margin-block-end: 8px; background: transparent; }
.menu-dialog .save-summary { position: static; display: block; padding: 0; margin-block-end: 16px; width: auto; max-width: none; background: transparent; }
.rotate-hint { inset-block-start: 112px; }

.game-chrome { position: absolute; z-index: 8; inset: 0 0 auto; display: grid; gap: 6px; pointer-events: none; container: game-chrome / inline-size; }
/* No band: the brand sits in the top-left corner and the tools in the top-right, over the scene. */
.game-chrome .site-header { position: static; pointer-events: none; background: transparent; }
.game-chrome .site-header h1 { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-shadow: 0 1px 0 var(--color-bg), 1px 0 0 var(--color-bg), 0 -1px 0 var(--color-bg), -1px 0 0 var(--color-bg), 0 0 6px var(--color-bg); }
.game-chrome .stage-tools { pointer-events: auto; }
.rotate-hint.is-notice { display: block; justify-self: center; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.stage-tools { flex-shrink: 0; }
.game-chrome .hud { position: static; translate: none; justify-self: start; margin-inline: max(12px, env(safe-area-inset-left)); max-width: calc(100% - 24px); }
.game-chrome .hud-item { flex-wrap: wrap; min-width: 0; }
.game-chrome .hud-value { overflow-wrap: anywhere; }
/* Keep landscape positioning after the base rule: static flow and a centring translation cannot mix. */
@media (orientation: landscape) and (min-width: 48rem) {
  /* em follows the chrome's text size, keeping enlarged text in the wrapping row when space is tight. */
  @container game-chrome (min-width: 48em) {
    .game-chrome .hud { position: absolute; inset: max(11px, calc(env(safe-area-inset-top) + 5px)) auto auto 50%; translate: -50% 0; margin-inline: 0; flex-wrap: nowrap; white-space: nowrap; max-width: none; }
  }
}
@media (orientation: landscape) and (min-width: 48rem) and (max-height: 34rem) {
  .tool-label { display: none; }
}
.game-chrome .rotate-hint { position: static; padding-inline: 12px; margin-block-start: 4px; }
@media (max-width: 40rem) { .controls { grid-template-columns: 1fr; gap: 4px; } .controls dd { margin-block-end: 12px; } }

.weapon-slot:not(.is-owned) svg { visibility: hidden; }

.game-chrome .boss-status { position: static; justify-self: end; margin-inline: max(12px, env(safe-area-inset-right)); }

@media (max-width: 28rem) { .weapon-slot { width: 44px; min-width: 44px; padding-inline: 2px; } }
@media (max-width: 22rem) { .joystick { left: 8px; width: 76px; height: 76px; } }
.stage-tools .btn { min-width: 44px; }
#game:focus-visible { outline-offset: -3px; }
.pad-btn.is-pressed { background: var(--color-accent-hover); color: var(--color-on-accent); }