:root {
  --cream: #fff5dc;
  --paper: #fffdf4;
  --ink: #3c271f;
  --brown: #7c3f2a;
  --dark-brown: #4d281e;
  --orange: #e86f36;
  --yellow: #f7c94b;
  --mint: #69b59b;
  --red: #c84a42;
  --shadow: 0 18px 50px rgba(71, 40, 27, .18);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #f6e5c3;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 9%, rgba(255,255,255,.82) 0 2px, transparent 3px) 0 0 / 26px 26px,
    linear-gradient(135deg, #fff4d8 0%, #f4d5aa 100%);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  overscroll-behavior: none;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; touch-action: manipulation; }

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 9px max(18px, env(safe-area-inset-right)) 9px max(18px, env(safe-area-inset-left));
  color: #fff9e7;
  background: var(--dark-brown);
  border-bottom: 4px solid var(--yellow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-family: Georgia, serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.brand-stamp {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--dark-brown);
  background: var(--yellow);
  border-radius: 50%;
  font-size: .68rem;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55);
}

.sound-button {
  min-height: 38px;
  padding: 7px 13px;
  color: #fff6dd;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

.sound-button[aria-pressed="true"] { color: var(--yellow); background: rgba(247,201,75,.14); }

.page-shell {
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(390px, 520px);
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5vw, 80px);
  width: min(1160px, calc(100% - 42px));
  margin: 0 auto;
  padding: 40px 0 52px;
}

.intro { padding: 10px 0; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--orange);
  font: 800 .72rem/1.4 Georgia, serif;
  letter-spacing: .16em;
}

.eyebrow span { color: var(--mint); }

h1 {
  margin: 0;
  color: var(--dark-brown);
  font-size: clamp(2.9rem, 5vw, 5.15rem);
  font-weight: 1000;
  line-height: .99;
  letter-spacing: -.07em;
  text-wrap: balance;
  filter: drop-shadow(0 3px 0 #fff8e7);
}

h1 em {
  display: inline-block;
  margin-top: 8px;
  color: var(--orange);
  font-style: normal;
}

.lead {
  margin: 22px 0;
  font-size: clamp(1rem, 2vw, 1.22rem);
  font-weight: 750;
  line-height: 1.75;
}

.example-card {
  max-width: 390px;
  padding: 14px 18px;
  background: rgba(255,253,244,.72);
  border: 2px solid rgba(124,63,42,.16);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(89,51,31,.08);
}

.example-card > span {
  color: #7b655b;
  font-size: .76rem;
  font-weight: 800;
}

.example-card p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 7px 0 0;
}

.example-card b { font: 900 1.45rem/1 Georgia, serif; }
.example-card i { color: #9a7c6e; font-style: normal; }
.example-card strong { color: var(--orange); font-size: 1.45rem; }

.steps {
  display: grid;
  gap: 11px;
  max-width: 400px;
  margin: 22px 0 16px;
  padding: 0;
  list-style: none;
}

.steps li { display: flex; align-items: center; gap: 13px; }
.steps b { color: var(--orange); font: 900 1rem/1 Georgia, serif; }
.steps li > span { font-size: .9rem; font-weight: 750; }
.steps li > span span { color: var(--orange); }
.note { margin: 0; color: #7c6255; font-size: .74rem; line-height: 1.7; }

.game-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  min-height: 730px;
  background: var(--paper);
  border: 4px solid var(--dark-brown);
  border-radius: 25px;
  box-shadow: var(--shadow), 0 7px 0 var(--dark-brown);
  isolation: isolate;
}

.awning {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 25px;
  overflow: hidden;
  background: #fff7e7;
}

.awning i { background: var(--orange); border-radius: 0 0 12px 12px; }
.awning i:nth-child(even) { background: #fff7e7; }

.game-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 9px 12px;
  color: #fff8e8;
  background: var(--brown);
  text-align: center;
}

.game-bar div { min-width: 0; border-right: 1px dashed rgba(255,255,255,.25); }
.game-bar div:last-child { border: 0; }
.game-bar small { display: block; font-size: .63rem; font-weight: 700; opacity: .78; }
.game-bar strong { display: block; margin-top: 1px; font: 900 .92rem/1.2 Georgia, "Yu Gothic", sans-serif; white-space: nowrap; }
.game-bar .lives strong { color: #ffbd95; letter-spacing: .04em; }

.playfield {
  position: relative;
  min-height: 626px;
  padding: 9px 12px 12px;
  background: linear-gradient(#ffe9bb 0 158px, #f8edcf 158px 100%);
}

.cafe-scene { position: absolute; inset: 0 0 auto; height: 178px; overflow: hidden; }
.window { position: absolute; left: 18px; top: 14px; width: 118px; height: 85px; overflow: hidden; background: #a7d9d2; border: 7px solid #fff8e8; box-shadow: 0 0 0 3px var(--brown); }
.window::before, .window::after { content: ""; position: absolute; z-index: 2; background: #fff8e8; }
.window::before { left: 50%; top: 0; bottom: 0; width: 4px; }
.window::after { left: 0; right: 0; top: 50%; height: 4px; }
.window i { position: absolute; left: -8px; right: -8px; bottom: -12px; height: 38px; background: #79b685; border-radius: 50% 50% 0 0; }
.window b { position: absolute; right: 11px; top: 10px; width: 22px; height: 22px; background: #f8d965; border-radius: 50%; }
.window span { position: absolute; left: 17px; top: 5px; color: rgba(255,255,255,.76); font-size: 1.8rem; }
.shelf { position: absolute; right: 16px; top: 28px; display: flex; gap: 4px; align-items: end; padding: 8px 8px 3px; border-bottom: 7px solid var(--brown); }
.shelf span { font-size: 1.5rem; filter: drop-shadow(0 3px 0 rgba(112,60,35,.13)); }
.plant { position: absolute; right: 22px; bottom: 4px; color: var(--brown); font-size: 2.2rem; transform: rotate(180deg); }
.plant i { position: absolute; color: var(--mint); font-size: 1rem; }
.plant i:nth-child(1) { left: -5px; top: 9px; }
.plant i:nth-child(2) { right: -5px; top: 13px; }
.plant i:nth-child(3) { left: 9px; top: -2px; }
.lamp { position: absolute; left: 50%; top: -8px; color: var(--yellow); font-size: 2.1rem; filter: drop-shadow(0 0 12px rgba(255,195,46,.75)); }
.lamp::before { content: ""; position: absolute; left: 50%; bottom: 25px; width: 3px; height: 22px; background: var(--brown); }
.customer-shadow { position: absolute; left: 50%; bottom: -2px; width: 150px; height: 23px; background: rgba(95,54,32,.12); border-radius: 50%; transform: translateX(-54%); filter: blur(3px); }

.customer-area {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 129px;
  padding-top: 13px;
}

.customer {
  position: relative;
  font-size: 5rem;
  line-height: 1;
  filter: drop-shadow(0 6px 0 rgba(95,52,32,.12));
  transform-origin: 50% 100%;
}

.customer.arrive { animation: arrive .45s cubic-bezier(.2,.9,.35,1.25); }
.customer.happy { animation: happy .55s ease; }
.customer.sad { animation: sad .45s ease; }

.speech {
  position: absolute;
  top: 11px;
  left: calc(50% + 61px);
  width: 152px;
  padding: 8px 10px;
  background: #fffdf6;
  border: 2px solid var(--brown);
  border-radius: 13px;
  box-shadow: 0 4px 0 rgba(87,46,31,.12);
}

.speech::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 13px;
  width: 14px;
  height: 14px;
  background: #fffdf6;
  border-left: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
  transform: rotate(45deg);
}

.speech span { color: var(--orange); font-size: .63rem; font-weight: 900; }
.speech p { margin: 2px 0 0; font-size: .72rem; font-weight: 800; line-height: 1.35; }

.receipt {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 10px 12px 13px;
  background: #fffdf5;
  border: 2px solid #cdbda5;
  border-radius: 12px 12px 5px 5px;
  box-shadow: 0 5px 12px rgba(82,48,28,.1);
}

.receipt::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 3px;
  bottom: -7px;
  left: 3px;
  height: 10px;
  background: linear-gradient(135deg, transparent 5px, #fffdf5 0) 0 0 / 10px 10px repeat-x;
}

.receipt div { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 5px; border-bottom: 1px dashed #c6b59e; }
.receipt div:nth-child(2) { border-left: 1px dashed #c6b59e; padding-left: 10px; }
.receipt span { color: #7b695f; font-size: .69rem; font-weight: 800; }
.receipt strong { font: 900 1.08rem/1 Georgia, serif; }
.receipt p { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin: 0; }
.receipt p b { color: var(--orange); font-size: 1.25rem; }

.tray {
  margin-top: 13px;
  padding: 8px 10px 9px;
  color: #fffaf0;
  background: linear-gradient(145deg, #754533, #4d2b22);
  border: 3px solid #3f201a;
  border-radius: 15px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.28), 0 4px 0 #2f1914;
}

.tray-head { display: flex; align-items: center; justify-content: space-between; }
.tray-head span { font-size: .66rem; font-weight: 700; opacity: .76; }
.tray-head strong { color: var(--yellow); font-size: 1.14rem; }
.tray-coins { display: flex; align-items: center; min-height: 48px; padding: 5px 2px 1px; overflow: hidden; }
.tray-empty { width: 100%; color: rgba(255,255,255,.52); font-size: .7rem; text-align: center; }
.mini-money {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-right: -4px;
  place-items: center;
  color: var(--dark-brown);
  background: #e3c673;
  border: 2px solid #fff0ac;
  border-radius: 50%;
  font: 900 .63rem/1 Georgia, serif;
  box-shadow: 0 2px 0 #8b7139;
  animation: coinDrop .22s ease-out;
}
.mini-money.is-bill { width: 57px; height: 29px; background: #d7deb2; border-color: #eff2d2; border-radius: 5px; box-shadow: 0 2px 0 #87916a; }
.remaining { margin: 3px 0 0; color: #e8d8c8; font-size: .68rem; font-weight: 800; text-align: right; }
.remaining.is-over { color: #ff9f8a; }
.remaining.is-exact { color: #9ce1c4; }

.money-pad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-top: 11px;
}

.money-button {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  height: 54px;
  padding: 0;
  color: var(--dark-brown);
  background: #dfc16d;
  border: 2px solid #9d7b32;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255,244,175,.6), 0 4px 0 #85672d;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.money-button span { font: 900 .86rem/1 Georgia, serif; }
.money-button small { margin-top: 1px; font-size: .52rem; font-weight: 800; }
.money-button.bill { background: #d5ddb1; border-color: #77885d; border-radius: 7px; box-shadow: inset 0 0 0 3px rgba(247,250,220,.7), 0 4px 0 #687550; }
.money-button.coin-50, .money-button.coin-1 { background: #d9dadd; border-color: #85878d; box-shadow: inset 0 0 0 3px rgba(255,255,255,.72), 0 4px 0 #73757a; }
.money-button.coin-5 { background: #d1a85d; }
.money-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.money-button:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 1px 0 #72572a; }
.money-button:disabled { opacity: .48; cursor: default; filter: grayscale(.2); }

.action-row { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 7px; margin-top: 11px; }
.action-row button {
  min-height: 42px;
  padding: 6px 5px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}
.action-row button:disabled { opacity: .42; cursor: default; }
.secondary { color: var(--brown); background: #fffaf0; border: 2px solid #c9ac91; box-shadow: 0 3px 0 #c9ac91; }
.primary { color: #fff; background: var(--orange); border: 2px solid #a84426; box-shadow: 0 3px 0 #a84426; }
.primary.is-ready { animation: readyPulse 1s ease-in-out infinite; }

.feedback {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 215px;
  min-width: 185px;
  padding: 12px 18px;
  color: #fff;
  background: var(--mint);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(50,40,30,.24);
  font-size: 1rem;
  font-weight: 1000;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px) scale(.8);
}
.feedback.show { animation: feedback .75s ease; }
.feedback.bad { background: var(--red); }

.game-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fffdf4;
  border-top: 2px solid #dfccb2;
}
.game-nav button { min-height: 45px; color: #806557; background: transparent; border: 0; border-right: 1px solid #eadbc8; font-size: .69rem; font-weight: 800; cursor: pointer; }
.game-nav button:last-child { border: 0; }

.screen {
  position: absolute;
  z-index: 30;
  inset: 25px 0 45px;
  display: grid;
  padding: 22px;
  place-items: center;
  background: rgba(58,30,22,.82);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.screen.is-visible { opacity: 1; visibility: visible; }
.screen-card {
  width: min(380px, 100%);
  padding: 25px 23px 23px;
  background: var(--paper);
  border: 4px solid var(--dark-brown);
  border-radius: 22px;
  box-shadow: 0 8px 0 var(--yellow), 0 20px 45px rgba(0,0,0,.25);
  text-align: center;
}
.screen-icon { display: block; margin-bottom: 8px; font-size: 3.4rem; filter: drop-shadow(0 5px 0 rgba(103,53,28,.12)); }
.screen-kicker { margin: 0 0 4px !important; color: var(--orange); font: 900 .66rem/1 Georgia, serif !important; letter-spacing: .14em; }
.screen h2 { margin: 4px 0 12px; color: var(--dark-brown); font-size: 2rem; line-height: 1.15; letter-spacing: -.05em; }
.screen-card > p { margin: 0 0 15px; font-size: .82rem; font-weight: 650; line-height: 1.65; }
.rule-chips { display: flex; justify-content: center; gap: 6px; margin: 15px 0; }
.rule-chips span { padding: 6px 9px; color: var(--brown); background: #f6e5c3; border-radius: 999px; font-size: .69rem; font-weight: 900; }
.screen-button { width: 100%; min-height: 50px; color: #fff; background: var(--orange); border: 2px solid #a84426; border-radius: 12px; box-shadow: 0 4px 0 #a84426; font-weight: 900; cursor: pointer; }
.screen-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #a84426; }
.screen-card > small { display: block; margin-top: 13px; color: #8b7469; font-size: .61rem; line-height: 1.5; }
.help-card ol { display: grid; gap: 10px; margin: 12px 0; padding: 0; list-style: none; text-align: left; }
.help-card li { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 9px; font-size: .73rem; line-height: 1.55; }
.help-card li b { display: grid; width: 27px; height: 27px; place-items: center; color: #fff; background: var(--mint); border-radius: 50%; }
.help-card .tip { padding: 9px; background: #fff0c9; border-radius: 9px; font-size: .67rem; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 5px; }
.result-stats div { padding: 10px; background: #f5e8ca; border-radius: 10px; }
.result-stats small { display: block; color: #7e675d; font-size: .6rem; font-weight: 800; }
.result-stats strong { color: var(--orange); font: 900 1.55rem/1.1 Georgia, serif; }
.result-stars { margin: 7px 0 15px !important; color: var(--yellow); font-size: 1.65rem !important; letter-spacing: .15em; filter: drop-shadow(0 2px 0 #9e7524); }
.text-button { margin-top: 13px; color: #7c6255; background: transparent; border: 0; font-size: .7rem; font-weight: 800; text-decoration: underline; cursor: pointer; }

footer { padding: 0 16px max(18px, env(safe-area-inset-bottom)); color: #8e6a56; font: 800 .58rem/1 Georgia, serif; letter-spacing: .3em; text-align: center; }

@keyframes arrive { from { opacity: 0; transform: translateX(-60px) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes happy { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-16px) rotate(-6deg); } 70% { transform: translateY(-5px) rotate(6deg); } }
@keyframes sad { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px) rotate(-4deg); } 75% { transform: translateX(8px) rotate(4deg); } }
@keyframes coinDrop { from { opacity: 0; transform: translateY(-12px) rotate(-20deg) scale(.75); } to { opacity: 1; transform: none; } }
@keyframes readyPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes feedback { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.75); } 18%,70% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -15px) scale(.9); } }

@media (max-width: 820px) {
  .page-shell { display: block; width: min(520px, calc(100% - 24px)); padding: 22px 0 38px; }
  .intro { padding: 0 8px 23px; text-align: center; }
  h1 { font-size: clamp(2.8rem, 13vw, 4.7rem); }
  .lead { margin: 15px 0 0; }
  .intro .example-card, .intro .steps, .intro .note { display: none; }
  .game-card { margin: 0 auto; }
}

@media (max-width: 520px) {
  .topbar { min-height: 55px; padding-top: 7px; padding-bottom: 7px; }
  .page-shell { width: 100%; padding: 18px 0 0; }
  .intro { padding: 0 16px 17px; }
  .intro h1 { font-size: clamp(2.55rem, 12vw, 3.75rem); }
  .intro .lead { margin-bottom: 0; font-size: .92rem; line-height: 1.55; }
  .intro .example-card, .intro .steps { display: none; }
  .note { display: none; }
  .game-card { max-width: none; min-height: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -5px 24px rgba(71,40,27,.14); }
  .playfield { min-height: 620px; padding-right: 10px; padding-left: 10px; }
  .speech { right: 7px; left: auto; width: 135px; }
  .customer { margin-right: 23px; }
  .money-pad { gap: 5px; }
  .money-button { height: min(13.8vw, 53px); min-height: 45px; }
  .action-row button { font-size: .67rem; }
  .screen { inset: 25px 0 45px; padding: 16px; }
  footer { display: none; }
}

@media (max-width: 365px) {
  .brand { font-size: .7rem; }
  .brand-stamp { width: 30px; height: 30px; }
  .sound-button { padding: 5px 9px; font-size: .72rem; }
  .playfield { min-height: 607px; }
  .receipt { padding-right: 9px; padding-left: 9px; }
  .receipt strong { font-size: .94rem; }
  .customer { font-size: 4.5rem; }
  .money-button span { font-size: .73rem; }
  .action-row { gap: 4px; }
  .action-row button { font-size: .61rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}