* { box-sizing: border-box; margin: 0; padding: 0; }

/* Each piece on its own background, a colour complementary to it, and a night version of it
   in the dark (house.js sets --bg). */
html, body {
  height: 100%;
  overflow: hidden;
  touch-action: none; /* a drag anywhere moves the piece (house.js), never the page */
  background: var(--bg, #c8c0f0);
  color: #4565ad;
  font: 500 14px/1.4 system-ui, -apple-system, sans-serif;
}

/* The piece's design frame (1254² or 2048²), placed and scaled by house.js.
   Fixed, so the unscaled frame can't widen the layout viewport on phones. */
.stage {
  position: fixed;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the piece can be taken anywhere on the page (house.js), so the cursor follows the page */
:root:has(.stage.can-grab) body { cursor: grab; }
:root:has(.stage.grabbing) body { cursor: grabbing; }

/* Quiet: the name, and the speaker that mutes the sound */
.nav {
  position: fixed;
  top: 24px;
  left: 24px;
  right: 24px;
  z-index: 2; /* over the turn strips, so the name and speaker stay clickable */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  pointer-events: none;
}

.nav a {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}

/* the sound switch: just the speaker, the height of the nav text, with a finger-sized hit area */
.sound {
  pointer-events: auto;
  position: relative;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sound::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.sound svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound .off, .sound[aria-pressed="true"] .on { display: none; }
.sound[aria-pressed="true"] .off { display: block; }
.sound:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }

/* the dictionary entry, bottom centre: the reading, the character in a calligraphy practice
   square, its meaning */
.entry {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  pointer-events: none;
}


/* the square (米字格): a solid frame, a dashed cross and dashed diagonals, in the coral of
   red-ruled paper */
.entry .glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 56px;
  line-height: 1;
}
.entry .grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #e0694c;
}
.entry .grid .frame { stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.entry .grid .lines { stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0.8; }
.entry .hanzi { position: relative; }

/* previous / next: each side's whole strip, top to bottom, is the button, with the arrow in
   the middle. On hover the strip takes a faint wash of the ink and the arrow leans out. */
.turn {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: clamp(48px, 6vw, 96px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.turn.prev { left: 0; }
.turn.next { right: 0; }
/* on a desktop each strip reaches in past the end of "Character House", with the same 24px
   gap the name keeps from the edge (house.js measures it into --turn-w) */
@media (min-width: 768px) { .turn { width: var(--turn-w, 187px); } }
.turn svg { width: 28px; height: 28px; fill: currentColor; transition: transform 0.2s ease; }
.turn:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }

/* only where there's a real hover, so a tap on a phone doesn't leave the wash behind */
@media (hover: hover) {
  .turn:hover { background-color: color-mix(in srgb, currentColor 7%, transparent); }
  .turn.prev:hover svg { transform: translateX(-4px); }
  .turn.next:hover svg { transform: translateX(4px); }
}

/* In the dark the nav, the entry and the pieces' deep-blue characters turn light blue; the
   furniture keeps its colours (the clock its coral), and the lamp glows. */
html, body, .stage .char { transition: background-color 0.3s ease, color 0.3s ease; }
:root[data-theme="dark"] body,
:root[data-theme="dark"] .stage:not(.piece-clock) .char { color: #94add7; }
:root[data-theme="dark"] .piece-lamp .glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html, body, .turn, .turn svg { transition: none; }
}