/* the game on a phone held upright: no scrolling, no zoom, no text picking */
html, body { overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
input, textarea { -webkit-user-select: text; user-select: text; }

.screen {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.screen.show { display: flex; }

/* ---------------------------------------------------------- home */
#home { background: radial-gradient(circle at 50% 30%, #fff 0, var(--cream) 60%); gap: 10px; }
.logo { width: min(56vw, 230px); margin-top: 4px; }
.logo.small { width: min(40vw, 160px); }
.hero { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.hero-bear { width: min(34vw, 150px); filter: drop-shadow(0 8px 10px rgba(120, 60, 20, .25)); animation: bob 2.4s ease-in-out infinite; }
h1 { margin: 0; font: italic 800 clamp(1.7rem, 8.5vw, 2.5rem)/1.05 var(--font); color: var(--ink); }
h1 span { color: var(--orange); }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 420px; }
.steps li {
  background: #fff; border-radius: 14px; padding: 8px 4px; text-align: center; font-size: .78rem; line-height: 1.25;
  box-shadow: 0 2px 0 var(--orange-l); counter-increment: s; position: relative;
}
.steps li::before {
  content: counter(s); position: absolute; top: -7px; left: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); color: #fff; font-weight: 600; font-size: .75rem; line-height: 20px;
}
.steps .ic { display: block; font-size: 1.5rem; }
#start-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
#start-form input[type=tel], #start-form input:not([type]) {
  width: 100%; font: 400 1.1rem var(--font); padding: .65em .9em; border-radius: 14px;
  border: 2px solid #f1d9cc; background: #fff; color: var(--ink); outline: none;
}
#start-form input:focus { border-color: var(--orange); }
#lead { display: flex; flex-direction: column; gap: 6px; }
#lead[hidden] { display: none; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--muted); line-height: 1.3; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--orange); flex: none; }
.form-msg { min-height: 1.2em; color: var(--red); font-size: .9rem; text-align: center; }
.btn.big { font-size: 1.35rem; padding: .6em 1.2em; width: 100%; max-width: 420px; }
.btn.big small { font-size: .8rem; font-weight: 400; opacity: .85; }
.fine { margin: 0; font-size: .85rem; color: var(--muted); text-align: center; }

/* ---------------------------------------------------------- game */
#game { padding: 0; background: #fdf1e7; overflow: hidden; touch-action: none; }
.hud {
  width: 100%; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(6px + env(safe-area-inset-top)) 12px 0; background: var(--orange); color: #fff; position: relative;
}
.hud small { display: block; font-size: .7rem; opacity: .85; line-height: 1; }
.hud b { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.hud-time { text-align: center; }
.hud-time b { font-size: 1.9rem; display: block; line-height: 1; }
.hud-time.hurry b { color: #fff200; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.15); } }
.hud-coins { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.coin-ic {
  width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #8a5a00; font-weight: 800; font-size: .85rem;
  display: inline-grid; place-items: center; box-shadow: inset 0 -2px 0 #d99a00;
}
#mute { border: 0; background: rgba(255, 255, 255, .2); color: #fff; border-radius: 50%; width: 30px; height: 30px; font-size: .9rem; margin-left: 4px; }
.timebar { grid-column: 1 / -1; height: 6px; margin: 6px -12px 0; background: rgba(0, 0, 0, .18); }
.timebar i { display: block; height: 100%; width: 100%; background: #fff200; transform-origin: left; }

.shop {
  flex: 1; width: 100%; min-height: 0; position: relative;
  display: grid; grid-template-rows: 1.1fr 1fr 1fr; gap: 4px; padding: 4px 6px calc(6px + env(safe-area-inset-bottom));
}
.row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 0; border-radius: 16px; padding: 16px 4px 4px; }
.row-label { position: absolute; top: 2px; left: 10px; font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.counter {
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(#fff 0 66%, #f6c9ad 66% 70%, #f9dcc9 70%);
}
.machines { background: #fff7f1; box-shadow: inset 0 0 0 2px #f6e3d6; }

/* a slot at the counter */
.slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.cust {
  position: relative; cursor: grab; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%;
  justify-content: flex-end; animation: walk-in .45s ease-out;
}
@keyframes walk-in { from { transform: translateX(120%); opacity: 0; } }
.cust.leave-happy { animation: leave-happy .6s ease-in forwards; }
.cust.leave-mad { animation: leave-mad .7s ease-in forwards; }
@keyframes leave-happy { 30% { transform: translateY(-14px); } to { transform: translate(-130%, 0); opacity: 0; } }
@keyframes leave-mad { 0%, 30% { transform: translateX(0); } 10% { transform: translateX(-5px); } 20% { transform: translateX(5px); } to { transform: translateX(140%); opacity: 0; } }
.patience { width: 82%; height: 7px; border-radius: 4px; background: #eadbd2; overflow: hidden; flex: none; margin-bottom: 2px; }
.patience i { display: block; height: 100%; width: 100%; background: var(--green); transform-origin: left; }
.cust.meh .patience i { background: #f2b200; }
.cust.mad .patience i { background: var(--red); }
.cust.mad .person { animation: shake .35s infinite; }
@keyframes shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.person { width: 78%; max-width: 70px; flex: 1 1 auto; min-height: 0; object-fit: contain; }
.person svg { width: 100%; height: 100%; display: block; }
.person .f-meh, .person .f-mad { display: none; }
.cust.meh .f-ok, .cust.mad .f-ok { display: none; }
.cust.meh .f-meh { display: inline; }
.cust.mad .f-mad { display: inline; }
.desk { height: 34%; min-height: 34px; width: 100%; display: grid; place-items: center; flex: none; }
.cust.owner .person { filter: drop-shadow(0 0 6px #22c55e) drop-shadow(0 0 2px #22c55e); }
.cust.owner::after {
  content: "ส่งที่นี่"; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff; font-size: .62rem; padding: 1px 6px; border-radius: 8px; white-space: nowrap;
  animation: pulse .5s infinite alternate;
}

/* things you carry: a basket, a load in the drum, folded clothes */
.basket {
  --c: #3b82f6; position: relative; width: 54px; height: 40px; touch-action: none;
}
.basket::before { /* clothes peeking out */
  content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 19px; border-radius: 10px 10px 4px 4px;
  background: radial-gradient(circle at 25% 60%, var(--c) 0 6px, transparent 7px), radial-gradient(circle at 60% 40%, var(--c) 0 8px, transparent 9px),
    radial-gradient(circle at 85% 65%, var(--c) 0 6px, transparent 7px);
  filter: brightness(1.05);
}
.basket::after { /* the woven basket */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-radius: 4px 4px 10px 10px;
  background: repeating-linear-gradient(90deg, #c98a4a 0 5px, #b07436 5px 7px), #c98a4a;
  box-shadow: inset 0 3px 0 #8f5a26, 0 2px 3px rgba(0, 0, 0, .2);
}
.folded { --c: #3b82f6; position: relative; width: 54px; height: 40px; touch-action: none; }
.folded i {
  position: absolute; left: 3px; right: 3px; height: 12px; border-radius: 3px; background: var(--c);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 0 #fff;
}
.folded i:nth-child(1) { bottom: 0; }
.folded i:nth-child(2) { bottom: 11px; left: 5px; right: 5px; }
.folded i:nth-child(3) { bottom: 22px; left: 7px; right: 7px; }
.folded::after { content: "✨"; position: absolute; right: -8px; top: -8px; font-size: 14px; }
.tag {
  position: absolute; right: -6px; bottom: -4px; z-index: 2; min-width: 20px; height: 20px; border-radius: 10px;
  background: #fff; color: var(--ink); border: 2px solid var(--c, #333); font: 700 .72rem/16px var(--font); text-align: center;
}
.ticket {
  --c: #3b82f6; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px;
  background: #fff; border: 2px dashed var(--c); font-size: .75rem; font-weight: 600; color: var(--ink);
}
.ticket i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.grab { cursor: grab; animation: wiggle 1.6s ease-in-out infinite; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
.picked { opacity: .3; animation: none; }
.selected { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 10px; animation: none; }

/* a washing machine / dryer */
.cell { display: grid; place-items: center; min-width: 0; min-height: 0; position: relative; container-type: size; }
.machine {
  /* as big as the cell allows, never wider or taller (the cell is a size container) */
  --w: min(100cqw, 100cqh * .84);
  position: relative; width: var(--w); height: calc(var(--w) / .84); border-radius: 12%/10%;
  background: linear-gradient(#fff, #eef1f4); box-shadow: 0 3px 0 #cfd5db, inset 0 0 0 2px #dfe4e9;
  display: flex; flex-direction: column; align-items: center; font-size: calc(var(--w) * .12);
}
.dryer .machine { background: linear-gradient(#fff, #f3ece8); }
.panel {
  width: 100%; height: 19%; display: flex; align-items: center; justify-content: space-between; padding: 0 12%;
  border-bottom: 2px solid #e3e7eb;
}
.panel .brand { font: italic 800 1em var(--font); color: var(--orange); }
.panel .mtime { font: 600 1em ui-monospace, monospace; color: #9aa4ad; background: #263238; color: #7CFC9A; padding: 0 .35em; border-radius: 3px; min-width: 2em; text-align: center; }
.door {
  position: relative; width: 74%; aspect-ratio: 1; margin: auto; border-radius: 50%;
  background: conic-gradient(var(--orange) calc(var(--p, 0) * 1turn), #d5dbe1 0);
  padding: 7%;
}
.drum {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #e9f6ff, #9fc2d8 75%); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
}
.dryer .drum { background: radial-gradient(circle at 40% 35%, #fff4e6, #d9b597 75%); }
.load { --c: #3b82f6; position: absolute; inset: 14%; border-radius: 50%; }
.load i { position: absolute; width: 40%; height: 40%; border-radius: 45%; background: var(--c); box-shadow: inset -2px -3px 0 rgba(0, 0, 0, .2); }
.load i:nth-child(1) { left: 8%; top: 40%; }
.load i:nth-child(2) { left: 40%; top: 12%; }
.load i:nth-child(3) { left: 50%; top: 50%; }
.running .load { animation: spin .7s linear infinite; }
.running.dryer .load, .dryer.running .load { animation-duration: 1.1s; }
@keyframes spin { to { transform: rotate(1turn); } }
.washer.running .drum::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, .8) 0 3px, transparent 4px), radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .8) 0 4px, transparent 5px), radial-gradient(circle at 60% 80%, rgba(255, 255, 255, .7) 0 2px, transparent 3px);
  animation: spin 1.3s linear infinite reverse;
}
.dryer.running .drum { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 18px rgba(255, 120, 0, .6); }
.done .door { background: var(--green); animation: pulse .45s infinite alternate; }
.done .machine::after {
  content: "เสร็จ!"; position: absolute; top: 2%; left: 50%; transform: translateX(-50%); z-index: 1;
  background: var(--green); color: #fff; font-size: .75rem; font-weight: 600; padding: 0 8px; border-radius: 8px; white-space: nowrap;
}
.cell .carry { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) scale(.95); z-index: 2; }
.target .machine, .target.cust { outline: 3px dashed var(--green); outline-offset: 2px; }
.target .machine { box-shadow: 0 0 0 6px rgba(34, 169, 91, .15), 0 3px 0 #cfd5db; }
.hover .machine { outline-style: solid; transform: scale(1.04); }
.wobble { animation: shake .3s 2; }

/* the bear's hints, the pointing hand, flying numbers */
.guide {
  grid-column: 1 / -1; margin: 0 -12px; height: 34px; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; background: #fff; color: var(--ink); overflow: hidden; border-bottom: 2px solid #f6d9c8;
}
.guide img { height: 30px; width: auto; flex: none; align-self: flex-end; }
.guide p { margin: 0; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide.say p { animation: say .3s ease-out; }
@keyframes say { from { transform: translateY(8px); opacity: 0; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.hand { position: absolute; z-index: 30; font-size: 34px; pointer-events: none; left: 0; top: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.float {
  position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 1.25rem; color: var(--green);
  text-shadow: 0 2px 0 #fff, 0 0 6px #fff; animation: float-up 1s ease-out forwards; white-space: nowrap;
}
.float.bad { color: var(--red); }
.float.gold { color: #c78a00; }
@keyframes float-up { to { transform: translate(-50%, -190%); opacity: 0; } }
.ghost { position: fixed; z-index: 50; pointer-events: none; left: 0; top: 0; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .3)); will-change: transform; }
.bonus {
  position: absolute; z-index: 25; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff6c4, var(--gold) 45%, #e0a000); color: #8a5a00; font: 800 1.2rem var(--font);
  box-shadow: 0 0 0 4px rgba(255, 194, 26, .35), 0 4px 6px rgba(0, 0, 0, .25); animation: bonus-bob .6s ease-in-out infinite alternate;
  touch-action: none;
}
.bonus.fade { animation: bonus-bob .6s infinite alternate, blink .2s infinite; }
@keyframes bonus-bob { to { transform: translateY(-8px) rotate(10deg); } }
@keyframes blink { 50% { opacity: .35; } }
.puff { position: absolute; transform: translate(-50%, -50%); font-size: 2rem; animation: float-up .8s forwards; }

.overlay { position: absolute; inset: 0; z-index: 60; background: rgba(42, 31, 26, .55); display: grid; place-items: center; }
.overlay[hidden] { display: none; }
.overlay-box { background: #fff; border-radius: 22px; padding: 22px 26px; text-align: center; max-width: 86vw; animation: pop .25s; }
.overlay-box .count { font: italic 800 5rem/1 var(--font); color: var(--orange); }
.overlay-box h2 { margin: 0 0 6px; font-size: 1.5rem; }
.overlay-box p { margin: 0 0 12px; color: var(--muted); }

/* ---------------------------------------------------------- end */
#end { background: var(--cream); gap: 10px; }
.end-head { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 440px; }
.end-head img { width: 32%; max-width: 140px; animation: bob 2.4s ease-in-out infinite; }
.end-head p { margin: 0; font-size: .95rem; line-height: 1.3; }
.end-head b { display: block; font: italic 800 clamp(2.4rem, 13vw, 3.6rem)/1.05 var(--font); color: var(--orange); }
.rank { background: var(--ink); color: #fff; border-radius: 999px; padding: .35em 1em; font-weight: 600; text-align: center; }
.rank.top { background: linear-gradient(90deg, #ffb300, #ff7a00); }
.bill { width: 100%; max-width: 440px; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; font-size: .92rem; }
.bill td { padding: 6px 12px; border-bottom: 1px solid #f4e6dd; }
.bill td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.bill tr.minus td:last-child { color: var(--red); }
.bill tr.total td { font-weight: 800; border: 0; background: var(--orange-l); }
.sales {
  width: 100%; max-width: 440px; background: linear-gradient(135deg, var(--orange), #ff7b45); color: #fff;
  border-radius: 18px; padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.sales p { margin: 0; font-weight: 600; line-height: 1.35; }
.sales .btn.white { width: 100%; }
.sales .done { background: #fff; color: var(--green); border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.sales-link { color: #fff; font-size: .9rem; }
.sales-link[hidden] { display: none; }

.turn { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .turn {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 100;
    background: var(--orange); color: #fff; font-size: 1.4rem; font-weight: 600;
  }
}
.mtag { right: 4px; bottom: 4px; }