:root {
  color: #5c4638;
  background: #f0d2ae;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100dvh;
  background: linear-gradient(#f8e6cf, #f0d2ae);
}

button,
p,
h1 { margin: 0; }

.shell {
  width: min(480px, 100%);
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #f6dcc4;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    calc(56px + env(safe-area-inset-bottom))
    env(safe-area-inset-left);
  overflow: hidden;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 4px;
  flex: none;
}

.score {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.top-actions {
  display: flex;
  gap: 8px;
}

.mini {
  min-height: 44px;
  min-width: 64px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: #fffaf3;
  color: #6a5346;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
}

.mini:disabled {
  opacity: 0.45;
}

.tv-set {
  flex: none;
  padding: 0 12px;
}

.tv-body {
  background: #6e939e;
  border-radius: 18px 18px 12px 12px;
  padding: 10px 10px 6px;
  box-shadow: 0 7px 0 #5b7f89;
}

.tv-screen {
  position: relative;
  height: 108px;
  border-radius: 10px;
  overflow: hidden;
  background: #24343c;
}

.loud-stamp {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fffaf3;
  color: #5c3a2a;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.waves {
  position: absolute;
  right: 8px;
  top: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 54px;
}

.waves span {
  display: block;
  width: 12px;
  border: 4px solid #fffaf3;
  border-left: 0;
  border-radius: 0 40px 40px 0;
}

.waves span:nth-child(1) { height: 22px; }
.waves span:nth-child(2) { height: 36px; }
.waves span:nth-child(3) { height: 50px; }

#stage[data-tv="laugh"] .tv-body {
  animation: tv-rumble 0.12s linear infinite;
}

#stage[data-tv="laugh"] .waves span {
  animation: wave-pop 0.42s ease-in-out infinite;
}

#stage[data-tv="laugh"] .waves span:nth-child(2) { animation-delay: 0.08s; }
#stage[data-tv="laugh"] .waves span:nth-child(3) { animation-delay: 0.16s; }

#stage[data-tv="talk"] .loud-stamp { font-size: 1.15rem; }
#stage[data-tv="talk"] .waves span:nth-child(3) { display: none; }
#stage[data-tv="talk"] .waves span:nth-child(1) { height: 16px; border-width: 3px; }
#stage[data-tv="talk"] .waves span:nth-child(2) { height: 26px; border-width: 3px; }

#stage[data-tv="quiet"] .loud-stamp {
  font-size: 1.05rem;
  letter-spacing: 0.18em;
}

#stage[data-tv="quiet"] .waves span { display: none; }

#stage[data-tv="quiet"] .waves::after {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  margin-top: 24px;
  border-radius: 4px;
  background: #d5dde4;
}

.screen-art {
  display: none;
  width: 100%;
  height: 100%;
}

#stage[data-tv="laugh"] .screen-laugh,
#stage[data-tv="talk"] .screen-talk,
#stage[data-tv="quiet"] .screen-quiet {
  display: block;
}

.tv-chin {
  display: flex;
  justify-content: space-between;
  padding: 6px 16px 2px;
}

.tv-chin span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d7e7e6;
}

.readout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 10px;
  background: #fffaf3;
  border-radius: 16px;
}

.tv-name {
  font-size: 0.95rem;
  font-weight: 800;
}

.tv-hint {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.volume {
  text-align: right;
  font-weight: 800;
  font-size: 0.95rem;
}

.bars {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 3px;
  height: 26px;
  margin-top: 4px;
}

.bars span {
  width: 7px;
  border-radius: 3px;
  background: #6e939e;
  height: 6px;
}

.bars span:nth-child(1) { height: 8px; }
.bars span:nth-child(2) { height: 12px; }
.bars span:nth-child(3) { height: 16px; }
.bars span:nth-child(4) { height: 21px; }
.bars span:nth-child(5) { height: 26px; }

.volume[data-level="mid"] .bars span:nth-child(n + 4) { display: none; }
.volume[data-level="low"] .bars span:nth-child(n + 2) { display: none; }
.volume[data-level="low"] .bars span:nth-child(1) { height: 8px; }

#stage[data-tv="laugh"] .readout { box-shadow: inset 0 0 0 3px #e7a23a; }
#stage[data-tv="talk"] .readout { box-shadow: inset 0 0 0 2px #d7c4ae; }
#stage[data-tv="quiet"] .readout {
  background: #e7eef3;
  box-shadow: inset 0 0 0 3px #8aa0b0;
}

.volume[data-level="high"] .bars span {
  animation: bar-bounce 0.5s ease-in-out infinite;
}

.volume[data-level="high"] .bars span:nth-child(2) { animation-delay: 0.08s; }
.volume[data-level="high"] .bars span:nth-child(3) { animation-delay: 0.16s; }

.warning {
  grid-column: 1 / -1;
  font-size: 1.05rem;
  font-weight: 800;
  color: #8a3f2c;
  background: #ffe1c4;
  border-radius: 999px;
  text-align: center;
  padding: 4px 8px;
}

.scene-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
}

.scene {
  width: 100%;
  height: 100%;
  display: block;
}

.bubble {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 16px;
  background: #fffaf3;
  color: #5c4638;
  font-size: 1.2rem;
  font-weight: 800;
  pointer-events: none;
  box-shadow: 0 4px 0 rgba(92, 70, 56, 0.08);
}

.bubble[data-who="hero"] {
  top: 42%;
  bottom: auto;
}

.puff-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.puff {
  position: absolute;
  bottom: 34%;
  font-size: 1.15rem;
  font-weight: 800;
  color: #c47d72;
  animation: puff-up 0.7s ease-out forwards;
}

.panel {
  flex: none;
  padding: 0 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gauges {
  display: grid;
  gap: 6px;
}

.gauge-name {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.track {
  height: 16px;
  border-radius: 999px;
  background: #efe1d0;
  overflow: hidden;
}

.track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0b27a, #e07a4c);
}

.track-sus span {
  background: repeating-linear-gradient(
    -45deg,
    #8d6b8a,
    #8d6b8a 6px,
    #c4a3c2 6px,
    #c4a3c2 12px
  );
}

h1 {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 800;
}

.lead {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.help {
  font-size: 0.92rem;
  line-height: 1.45;
}

.action {
  appearance: none;
  width: 100%;
  min-height: 64px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.action-primary {
  background: #3f8f78;
  color: #fffaf3;
  box-shadow: 0 5px 0 #2d6b59;
}

.action-secondary {
  background: #fffaf3;
  color: #6a5346;
  box-shadow: 0 5px 0 #ead8c4;
}

.action:active,
.vent.is-down {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #2d6b59;
}

.vent {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.vent.is-empty {
  background: #b7cfc6;
  box-shadow: 0 2px 0 #8eaea3;
}

#title-screen,
#pause-screen,
#result-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-actions {
  display: flex;
  gap: 8px;
}

.result-actions .action {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 0 10px;
}

a.action {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.empty-hint {
  min-height: 1.2em;
  text-align: center;
  color: #9a5a3c;
  font-weight: 800;
  font-size: 0.92rem;
}

.result-score {
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
}

.result-reason,
.result-time {
  text-align: center;
  font-weight: 700;
}

.privacy {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2147483000;
  background: #fff;
  color: #3f6212;
  border: 1px solid #d9f99d;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 12px;
  text-decoration: none;
  white-space: nowrap;
}

#futon.is-shaking {
  transform-box: fill-box;
  transform-origin: center top;
  animation: wobble 0.16s ease-in-out infinite;
}

#hero[data-expr="fidget"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: fidget 0.42s ease-in-out infinite;
}

#hero[data-expr="distress"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: shake 0.12s linear infinite;
}

#hero[data-emitting="yes"] {
  animation: none;
}

#hero .face,
#hero .sweat { display: none; }

#hero[data-expr="calm"] .face-calm,
#hero[data-expr="fidget"] .face-fidget,
#hero[data-expr="distress"] .face-distress,
#hero[data-expr="poker"] .face-poker,
#hero[data-expr="freeze"] .face-freeze,
#hero[data-expr="burst"] .face-burst { display: block; }

#hero[data-emitting="yes"] .face { display: none; }
#hero[data-emitting="yes"] .face-poker { display: block; }

#hero[data-expr="freeze"] .face { display: none; }
#hero[data-expr="freeze"] .face-freeze { display: block; }
#hero[data-expr="burst"] .face { display: none; }
#hero[data-expr="burst"] .face-burst { display: block; }

#hero[data-expr="fidget"] .sweat,
#hero[data-expr="distress"] .sweat,
#hero[data-expr="burst"] .sweat { display: block; }

#hero[data-emitting="yes"] .sweat { display: none; }
#hero[data-expr="distress"] .blush,
#hero[data-expr="burst"] .blush { fill: #e9897e; }

.person .body,
.person .eyes {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s ease;
}

#stage[data-gaze="calm"] .eyes { transform: translate(0, -2px); }

#stage[data-gaze="side"] #dad .eyes { transform: translate(2px, 3px); }
#stage[data-gaze="side"] #mom .eyes,
#stage[data-gaze="side"] #kid .eyes { transform: translate(0, -2px); }

#stage[data-gaze="all"] .eyes,
#stage[data-gaze="turn"] .eyes { transform: translate(0, 3px); }

#stage[data-gaze="turn"] #dad .body { transform: translate(12px, 10px) rotate(6deg); }
#stage[data-gaze="turn"] #mom .body { transform: translate(-12px, 10px) rotate(-6deg); }
#stage[data-gaze="turn"] #kid .body { transform: translate(0, 14px); }

#stage[data-tv="laugh"] .bob { animation: bob 0.45s ease-in-out infinite; }
#stage[data-tv="laugh"] .bob-b { animation-delay: 0.1s; }
#stage[data-tv="laugh"] .bob-c { animation-delay: 0.2s; }

@keyframes wobble {
  0%, 100% { transform: rotate(-0.7deg); }
  50% { transform: rotate(0.9deg); }
}

@keyframes fidget {
  0%, 100% { transform: translateX(-1px); }
  50% { transform: translateX(1.5px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(-1px) rotate(-0.4deg); }
  50% { transform: translateX(1px) rotate(0.4deg); }
}

@keyframes bar-bounce {
  0%, 100% { transform: scaleY(0.85); }
  50% { transform: scaleY(1); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes tv-rumble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes wave-pop {
  0%, 100% { transform: scaleY(0.82); }
  50% { transform: scaleY(1); }
}

@keyframes puff-up {
  from { opacity: 0; transform: translateY(6px); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translateY(-28px); }
}

@media (max-height: 740px) {
  .tv-screen { height: 78px; }
  .tv-body { padding: 8px 8px 4px; }
  .loud-stamp { font-size: 1rem; bottom: 4px; left: 6px; }
  .waves { top: 8px; height: 40px; }
  .waves span:nth-child(3) { height: 36px; }
  .tv-hint { font-size: 1.02rem; }
  .readout { margin-top: 6px; padding: 6px 8px; }
  h1 { font-size: 1.05rem; }
  .help { font-size: 0.82rem; line-height: 1.35; }
  .lead { font-size: 0.92rem; }
  .panel { gap: 6px; }
  #title-screen,
  #pause-screen,
  #result-screen { gap: 6px; }
  .scene-wrap { min-height: 108px; }
  .shell {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}