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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);

  
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;

  
  image-rendering: pixelated;

  
  -webkit-tap-highlight-color: transparent;
}


.app {
  max-width: var(--app-max);
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--bg-room);
  display: grid;
  grid-template-rows: auto 1fr auto;

  
}


.app-nohead { grid-template-rows: 1fr auto; }


.screen {
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  min-width: 0;   
}


.screen-bleed {
  padding: 0;
  gap: 0;
}




h1, h2, h3 {
  margin: 0;
  font-family: var(--f-title);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: .02em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-body); }

p { margin: 0; }

.t-small { font-size: var(--fs-small); color: var(--fg-soft); }
.t-micro { font-size: var(--fs-micro); color: var(--fg-soft); }
.t-dim   { color: var(--fg-dim); }


.num {
  font-family: var(--f-pixel);
  font-size: var(--fs-num);
  font-feature-settings: "palt" 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: none;
  letter-spacing: .04em;
  line-height: 1;
}

.num-lg { font-size: var(--fs-num-lg); }


ruby { ruby-position: over; }
rt {
  font-size: .5em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--fg-soft);
  user-select: none;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}




.spr {
  --spr-src: 16px;            
  --spr-box: var(--tile);
  display: inline-block;
  width: var(--spr-box);
  height: var(--spr-box);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-size: round(down, var(--spr-box), var(--spr-src))
                   round(down, var(--spr-box), var(--spr-src));
  image-rendering: pixelated;
  flex: none;
}

.spr-sm { --spr-box: 24px; }
.spr-2x { --spr-box: calc(var(--tile) * 1.5); }
.spr-3x { --spr-box: calc(var(--tile) * 2); }
.spr-4x { --spr-box: calc(var(--tile) * 3); }


.spr-mame, .spr-mame-sleep, .spr-stove, .spr-window,
.spr-gift, .spr-blanket { --spr-src: 24px; }

.spr-mame       { background-image: url('./sprites/mame.svg'); }
.spr-mame-sleep { background-image: url('./sprites/mame-sleep.svg'); }
.spr-mame-face  { background-image: url('./sprites/mame-face.svg'); }
.spr-melon      { background-image: url('./sprites/melon.svg'); }
.spr-imo        { background-image: url('./sprites/imo.svg'); }
.spr-dango      { background-image: url('./sprites/dango.svg'); }
.spr-yarn       { background-image: url('./sprites/yarn.svg'); }
.spr-cushion    { background-image: url('./sprites/cushion.svg'); }
.spr-bowl       { background-image: url('./sprites/bowl.svg'); }
.spr-basket     { background-image: url('./sprites/basket.svg'); }
.spr-chest      { background-image: url('./sprites/chest.svg'); }
.spr-lantern    { background-image: url('./sprites/lantern.svg'); }
.spr-talk       { background-image: url('./sprites/talk.svg'); }
.spr-stamp      { background-image: url('./sprites/stamp.svg'); }
.spr-pine       { background-image: url('./sprites/pine.svg'); }
.spr-stove      { background-image: url('./sprites/stove.svg'); }
.spr-window     { background-image: url('./sprites/window.svg'); }
.spr-selburose  { background-image: url('./sprites/selburose.svg'); }
.spr-coin       { background-image: url('./sprites/coin.svg'); }

.spr-gift       { background-image: url('./sprites/gift.svg'); }
.spr-toy        { background-image: url('./sprites/toy.svg'); }
.spr-blanket    { background-image: url('./sprites/blanket.svg'); }
.spr-flower     { background-image: url('./sprites/flower.svg'); }
.spr-picture    { background-image: url('./sprites/picture.svg'); }




.glyph {
  
  --glyph-src: 16px;
  --glyph-box: 16px;
  display: inline-block;
  width: var(--glyph-box);
  height: var(--glyph-box);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-size: round(down, var(--glyph-box), var(--glyph-src))
                     round(down, var(--glyph-box), var(--glyph-src));
  mask-size: round(down, var(--glyph-box), var(--glyph-src))
             round(down, var(--glyph-box), var(--glyph-src));
  flex: none;
}


.glyph-lg { --glyph-box: 32px; }

.glyph-check     { -webkit-mask-image: url('./sprites/g-check.svg');     mask-image: url('./sprites/g-check.svg'); }
.glyph-chevron   { -webkit-mask-image: url('./sprites/g-chevron.svg');   mask-image: url('./sprites/g-chevron.svg'); }
.glyph-arrow     { -webkit-mask-image: url('./sprites/g-arrow.svg');     mask-image: url('./sprites/g-arrow.svg'); }
.glyph-close     { -webkit-mask-image: url('./sprites/g-close.svg');     mask-image: url('./sprites/g-close.svg'); }
.glyph-gear      { -webkit-mask-image: url('./sprites/g-gear.svg');      mask-image: url('./sprites/g-gear.svg'); }
.glyph-stamp     { -webkit-mask-image: url('./sprites/stamp.svg');       mask-image: url('./sprites/stamp.svg'); }
.glyph-selburose { -webkit-mask-image: url('./sprites/selburose.svg');   mask-image: url('./sprites/selburose.svg'); }

.glyph-room      { -webkit-mask-image: url('./sprites/g-room.svg');      mask-image: url('./sprites/g-room.svg'); }
.glyph-talk      { -webkit-mask-image: url('./sprites/g-talk.svg');      mask-image: url('./sprites/g-talk.svg'); }
.glyph-enter     { -webkit-mask-image: url('./sprites/g-enter.svg');     mask-image: url('./sprites/g-enter.svg'); }
.glyph-snack     { -webkit-mask-image: url('./sprites/g-snack.svg');     mask-image: url('./sprites/g-snack.svg'); }
.glyph-together  { -webkit-mask-image: url('./sprites/g-together.svg');  mask-image: url('./sprites/g-together.svg'); }
.glyph-box       { -webkit-mask-image: url('./sprites/g-box.svg');       mask-image: url('./sprites/g-box.svg'); }
.glyph-mic       { -webkit-mask-image: url('./sprites/g-mic.svg');       mask-image: url('./sprites/g-mic.svg'); }
.glyph-plus      { -webkit-mask-image: url('./sprites/g-plus.svg');      mask-image: url('./sprites/g-plus.svg'); }
.glyph-dots      { -webkit-mask-image: url('./sprites/g-dots.svg');      mask-image: url('./sprites/g-dots.svg'); }


.glyph-back { transform: scaleX(-1); }





.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


:focus-visible {
  outline: var(--px) solid var(--action-lo);
  outline-offset: var(--px);
}


.touch { min-width: var(--touch); min-height: var(--touch); }