/* RICOSHET host — portrait, safe-area, pointer/touch. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --garden: #1b2a18;
  --leaf: #d7ecc0;
  --gold: #e7c56a;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--garden);
  color: var(--leaf);
  font-family: Georgia, "Times New Roman", serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.shell-root {
  min-height: 100dvh;
  padding:
    calc(0.6rem + max(var(--sat-host, 0px), env(safe-area-inset-top, 0px)))
    calc(0.6rem + max(var(--sar-host, 0px), env(safe-area-inset-right, 0px)))
    calc(0.6rem + max(var(--sab-host, 0px), env(safe-area-inset-bottom, 0px)))
    calc(0.6rem + max(var(--sal-host, 0px), env(safe-area-inset-left, 0px)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hud { text-align: center; }
.brand { margin: 0; letter-spacing: 0.12em; font-size: 0.7rem; opacity: 0.8; }
h1 { margin: 0.15rem 0; font-size: 1.4rem; color: var(--gold); }
.phase { margin: 0; font-size: 0.85rem; }
.stage-wrap {
  width: min(100%, calc((100dvh - 11rem) * 941 / 1673));
  max-height: calc(100dvh - 11rem);
  aspect-ratio: 941 / 1673;
  border-radius: 1rem;
  overflow: hidden;
  background: #140f0a;
  box-shadow: 0 0 0 2px rgba(231, 197, 106, 0.35);
  touch-action: none;
}
#field { display: block; width: 100%; height: 100%; touch-action: none; }
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
}
button, select {
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: #e7c56a;
  color: #1b2a18;
  font: 700 0.95rem Georgia, "Times New Roman", serif;
}
.status { margin: 0; font-size: 0.8rem; text-align: center; max-width: 36rem; }
.tutorial { margin: 0.2rem 0 0; font-size: 0.85rem; max-width: 28rem; }
.field-select { display: flex; align-items: center; gap: 0.35rem; }
button[hidden] { display: none; }

/* Slice 7 Hint System: text/technical overlays only; no generated art. */
.hint-text { margin: 0; max-width: 36rem; min-height: 1.25rem; padding: 0.35rem 0.6rem; border-radius: 0.65rem; background: rgba(20, 15, 10, 0.76); color: var(--leaf); font-size: 0.85rem; text-align: center; }
.hint-text[hidden] { display: none; }

/* Slice 10 Audio Integration: host controls only; canonical field pixels are untouched. */
.audio-settings {
  width: min(100%, 36rem);
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(231, 197, 106, 0.4);
  border-radius: 0.75rem;
  background: rgba(20, 15, 10, 0.66);
  font-size: 0.8rem;
}
.audio-settings summary { cursor: pointer; color: var(--gold); font-weight: 700; }
.audio-setting-row { display: grid; grid-template-columns: 3.5rem minmax(7rem, 1fr) auto; gap: 0.5rem; align-items: center; margin-top: 0.45rem; }
.audio-setting-row input[type="range"] { width: 100%; min-height: 32px; touch-action: pan-x; }
.audio-mute { display: flex; gap: 0.3rem; align-items: center; min-height: 44px; }
.audio-status { margin: 0; max-width: 36rem; color: var(--gold); font-size: 0.78rem; text-align: center; }
.audio-status[hidden] { display: none; }


/* Approved SCR_01 splash: exact pixels; only the baked PLAY artwork gets an invisible hit target. */
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #140f0a;
  padding:
    max(var(--sat-host, 0px), env(safe-area-inset-top, 0px))
    max(var(--sar-host, 0px), env(safe-area-inset-right, 0px))
    max(var(--sab-host, 0px), env(safe-area-inset-bottom, 0px))
    max(var(--sal-host, 0px), env(safe-area-inset-left, 0px));
}
.splash-overlay[hidden] { display: none; }
.splash-frame {
  position: relative;
  width: min(100vw, calc(100dvh * 941 / 1672));
  max-width: 100%;
  max-height: 100dvh;
  aspect-ratio: 941 / 1672;
}
.splash-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
#ricoshet-splash-play.splash-play-target {
  position: absolute;
  left: 28%;
  top: 86.5%;
  width: 48%;
  height: 10%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  opacity: 1;
  cursor: pointer;
  touch-action: manipulation;
}
#ricoshet-splash-play.splash-play-target:disabled { cursor: default; }
#ricoshet-splash-play.splash-play-target:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}
.splash-error {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2%;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 0.6rem;
  background: rgba(20, 15, 10, 0.9);
  color: #fff;
  font: 600 0.8rem system-ui, sans-serif;
  text-align: center;
}
.splash-error[hidden] { display: none; }