:root {
  --cream: #fff8ef;
  --paper: #fffdf9;
  --ink: #423630;
  --muted: #776962;
  --rose: #e8839c;
  --rose-dark: #c95d79;
  --peach: #f7c9a7;
  --mint: #cfe9d5;
  --sky: #cfe9f5;
  --lavender: #ded8f4;
  --line: #eadfd5;
  --wood: #9c6445;
  --wood-dark: #70452f;
  --wall: #f6d6c6;
  --floor: #d89c69;
  --shadow: 0 18px 45px rgba(94, 70, 58, 0.13);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(247, 201, 167, 0.52), transparent 32rem),
    radial-gradient(circle at top right, rgba(222, 216, 244, 0.55), transparent 28rem),
    var(--cream);
  color: var(--ink);
  font-family: ui-rounded, "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button { font: inherit; }
button:focus-visible, dialog:focus-visible { outline: 3px solid #836fd4; outline-offset: 3px; }

.game-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 48px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.topbar h1 { margin: 2px 0 0; font-size: clamp(2rem, 6vw, 3.7rem); line-height: .95; letter-spacing: -0.05em; }
.eyebrow { margin: 0; font-weight: 900; letter-spacing: .15em; font-size: .72rem; color: var(--rose-dark); }

.screen { animation: fadeIn .24s ease; }
.hidden { display: none !important; }

.intro-card, .setup-section, .customer-panel, .choice-panel, .end-card, .leaderboard-section {
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.intro-card { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding: 24px; }
.intro-card h2, .customer-panel h2, .end-card h2 { margin: 7px 0 8px; font-size: clamp(1.45rem, 4vw, 2.2rem); }
.intro-card p, .section-heading p, .leaderboard-section p { color: var(--muted); margin: 0; line-height: 1.55; }
.pill { display: inline-block; background: var(--mint); border-radius: 999px; padding: 7px 11px; font-size: .78rem; font-weight: 900; }
.setup-status { display: grid; gap: 7px; min-width: max-content; text-align: right; font-weight: 800; color: var(--muted); }

.setup-section { margin-top: 18px; padding: 22px; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 16px; }
.section-heading h3 { margin: 0; font-size: 1.2rem; }
.card-grid { display: grid; gap: 14px; }
.cat-grid { grid-template-columns: repeat(4, 1fr); }
.decor-grid { grid-template-columns: repeat(3, 1fr); }

.select-card {
  border: 2px solid transparent;
  border-radius: 20px;
  background: #fff;
  padding: 18px;
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  color: var(--ink);
}
.select-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(94, 70, 58, .09); }
.select-card.selected { border-color: var(--rose); background: #fff7f8; }
.select-card .emoji { display: block; font-size: 2.4rem; margin-bottom: 8px; }
.select-card strong { display: block; font-size: 1.06rem; margin-bottom: 4px; }
.select-card small { color: var(--muted); font-weight: 700; }

.button {
  border: 0;
  border-radius: 999px;
  padding: 11px 17px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .14s ease, opacity .14s ease, box-shadow .14s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-primary { background: var(--rose); color: white; box-shadow: 0 8px 18px rgba(201, 93, 121, .25); }
.button-primary:hover:not(:disabled) { background: var(--rose-dark); }
.button-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.big-button { display: block; margin: 18px auto 0; min-width: 220px; padding: 14px 22px; }

.hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.hud > div { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 13px 16px; box-shadow: var(--shadow); text-align: center; }
.hud-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .55; }
.hud-label { display: block; color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.hud strong { display: block; margin-top: 3px; font-size: 1.4rem; }

/* Illustrated café scene */
.cafe-stage {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 28px;
  border: 3px solid #8a5c43;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.22), transparent 48%),
    linear-gradient(to bottom, var(--wall) 0 66%, var(--floor) 66% 100%);
  box-shadow: 0 24px 50px rgba(73, 49, 37, .18), inset 0 0 0 3px rgba(255,255,255,.35);
  isolation: isolate;
}
.cafe-stage::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 34%;
  background: repeating-linear-gradient(100deg, rgba(116,67,40,.11) 0 2px, transparent 2px 85px);
  pointer-events: none;
}
.wall-stripe { position: absolute; left: 0; right: 0; top: 63%; height: 18px; background: #b77654; box-shadow: 0 4px 0 rgba(93,55,36,.12); }
.cafe-sign {
  position: absolute; left: 4%; top: 5%; width: 29%; min-width: 240px; padding: 15px 18px 12px;
  text-align: center; color: #5f3e2d; background: #f4bb78; border: 4px solid #8a5536; border-radius: 18px;
  box-shadow: 0 5px 0 #6f452f, inset 0 0 0 3px rgba(255,245,211,.55); transform: rotate(-1deg); z-index: 4;
}
.cafe-sign strong { display: block; font-size: clamp(1.15rem, 2.5vw, 1.8rem); line-height: 1; }
.cafe-sign small { display: block; margin-top: 7px; font-weight: 900; letter-spacing: .08em; font-size: .65rem; }
.sign-paw { position: absolute; left: 10px; top: 8px; }
.window-scene {
  position: absolute; left: 5%; top: 24%; width: 31%; height: 39%; border: 9px solid #fff0dc; border-radius: 18px;
  background: linear-gradient(#9edcf6, #e4f7ff 62%, #c9e2aa 62%); overflow: hidden; box-shadow: inset 0 0 0 3px #9c6445, 0 8px 14px rgba(85,51,34,.12); z-index: 1;
}
.window-scene::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 7px; background: #fff0dc; transform: translateX(-50%); z-index: 4; }
.window-scene::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 7px; background: #fff0dc; transform: translateY(-50%); z-index: 4; }
.sun { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #ffd865; right: 12%; top: 10%; box-shadow: 0 0 0 8px rgba(255,216,101,.18); }
.hill { position: absolute; border-radius: 50% 50% 0 0; bottom: -8%; background: #9fc58d; }
.hill-one { left: -8%; width: 75%; height: 38%; }
.hill-two { right: -12%; width: 70%; height: 30%; background: #82b47d; }
.window-plant { position: absolute; left: 8%; bottom: -3%; font-size: 2.2rem; z-index: 5; }
.wall-frame {
  position: absolute; top: 7%; width: 11%; min-width: 96px; padding: 10px 6px; border: 5px solid #9b6548; border-radius: 8px;
  background: #4c4038; color: #f8dfc1; text-align: center; font-size: 1.6rem; box-shadow: 0 6px 9px rgba(70,45,32,.15); z-index: 2;
}
.wall-frame small { display: block; margin-top: 4px; font-size: .56rem; line-height: 1.35; font-weight: 900; }
.frame-one { left: 40%; transform: rotate(1deg); }
.frame-two { left: 52%; transform: rotate(-1deg); }
.wall-shelf { position: absolute; left: 39%; top: 31%; width: 24%; height: 18px; border-radius: 6px; background: #8f5c3d; box-shadow: 0 6px 0 #68432e; z-index: 2; }
.wall-shelf span { position: relative; bottom: 29px; margin: 0 8px; font-size: 1.65rem; }
.ceiling-lamp { position: absolute; top: -4px; width: 4px; height: 72px; background: #5a4035; z-index: 6; }
.ceiling-lamp span { position: absolute; left: 50%; bottom: -22px; width: 62px; height: 31px; transform: translateX(-50%); border-radius: 50% 50% 10px 10px; background: #f2b65b; border: 4px solid #654738; box-shadow: 0 12px 22px rgba(255,210,116,.32); }
.lamp-one { left: 38%; }
.lamp-two { left: 70%; height: 58px; }
.service-counter {
  position: absolute; right: 3%; top: 20%; width: 32%; height: 44%; min-width: 300px; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(90deg, #956043, #a87351 55%, #8a583f); border: 4px solid #694431; box-shadow: 0 14px 0 rgba(102,61,39,.13); z-index: 3;
}
.counter-top { position: absolute; left: -8px; right: -8px; top: -13px; height: 23px; border-radius: 10px; background: #724630; border: 3px solid #553528; }
.coffee-machine { position: absolute; left: 11%; top: 14%; font-size: 2.7rem; background: #e6d6c4; border: 3px solid #614a3e; border-radius: 12px; padding: 6px 10px; }
.pastry-case { position: absolute; left: 8%; right: 8%; bottom: 9%; height: 39%; display: flex; justify-content: space-around; align-items: center; border: 4px solid #6c4a39; border-radius: 12px; background: rgba(237,245,240,.78); font-size: 2rem; }
.menu-board { position: absolute; right: 8%; top: 10%; width: 42%; padding: 9px 7px; border: 4px solid #6c4a39; border-radius: 8px; background: #3d3934; color: #fff5e9; text-align: center; font-size: .8rem; font-weight: 1000; }
.menu-board small { display: block; margin-top: 5px; font-size: .57rem; line-height: 1.5; font-weight: 700; }
.rug { position: absolute; left: 28%; bottom: 4%; width: 38%; height: 23%; border-radius: 50%; background: #e8a99a; border: 8px solid #f1cab8; box-shadow: inset 0 0 0 7px rgba(202,108,110,.2); z-index: 1; }
.rug span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; opacity: .28; }
.sofa { position: absolute; left: 5%; bottom: 8%; width: 22%; height: 22%; border-radius: 28px 28px 16px 16px; background: #d98a92; border: 5px solid #955b61; box-shadow: inset 0 12px 0 rgba(255,255,255,.16), 0 10px 0 rgba(111,72,63,.12); z-index: 3; }
.sofa::before { content: ""; position: absolute; left: 7%; right: 7%; bottom: 22%; height: 43%; border-radius: 18px; background: #eaa2a8; border: 3px solid rgba(123,76,77,.28); }
.sofa-pillow { position: absolute; left: 16%; top: 19%; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #f8d5c9; z-index: 2; }
.armchair { position: absolute; left: 64%; bottom: 6%; width: 15%; height: 23%; border-radius: 28px 28px 18px 18px; background: #82986f; border: 5px solid #586c4c; z-index: 3; }
.armchair::before { content: ""; position: absolute; inset: 12% 12% 18%; border-radius: 20px; background: #94aa7e; }
.table { position: absolute; bottom: 6%; width: 16%; height: 12%; border-radius: 50%; background: #a86a45; border: 4px solid #72452f; z-index: 4; box-shadow: 0 8px 0 rgba(108,67,43,.18); }
.table::after { content: ""; position: absolute; width: 15%; height: 80%; left: 42.5%; top: 80%; background: #75482f; border-radius: 4px; }
.table-left { left: 39%; bottom: 26%; }
.table-right { right: 4%; bottom: 5%; }
.table-vase { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); font-size: 1.6rem; }
.chair { position: absolute; width: 7%; height: 19%; border: 5px solid #6f482f; border-bottom-width: 9px; border-radius: 16px 16px 8px 8px; z-index: 2; }
.chair::after { content: ""; position: absolute; left: -8px; right: -8px; top: 48%; height: 22%; background: #da8d8d; border: 3px solid #7b4f3b; border-radius: 8px; }
.chair-a { left: 36%; bottom: 5%; transform: rotate(-4deg); }
.chair-b { left: 55%; bottom: 7%; transform: rotate(4deg); }
.chair-c { right: 22%; bottom: 4%; transform: rotate(-4deg); }

.placed-decor { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.decor-item { position: absolute; display: grid; justify-items: center; filter: drop-shadow(0 5px 4px rgba(80,55,45,.16)); }
.decor-item > span { font-size: 2.9rem; }
.decor-item small { margin-top: -4px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.88); color: #5b493e; font-size: .58rem; font-weight: 900; white-space: nowrap; }
.decor-plant { left: 27%; bottom: 28%; }
.decor-lamp { right: 35%; top: 9%; }
.decor-flowers { left: 50%; bottom: 28%; }

.stage-cats { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.stage-cat { position: absolute; display: grid; justify-items: center; animation: catBob 2.8s ease-in-out infinite; }
.stage-cat:nth-child(2) { animation-delay: -.9s; }
.stage-cat:nth-child(3) { animation-delay: -1.7s; }
.cat-bubble { width: 68px; height: 58px; display: grid; place-items: center; border-radius: 46% 46% 40% 40%; background: rgba(255,250,242,.92); border: 3px solid rgba(119,78,56,.25); font-size: 2.65rem; box-shadow: 0 7px 12px rgba(76,50,37,.13); }
.stage-cat small { margin-top: -2px; padding: 3px 9px; border-radius: 999px; background: #fff5e8; border: 2px solid rgba(119,78,56,.18); font-weight: 1000; font-size: .68rem; }
.cat-spot-1 { left: 10%; bottom: 17%; }
.cat-spot-2 { left: 45%; bottom: 12%; }
.cat-spot-3 { left: 67%; bottom: 15%; }

.scene-customer { position: absolute; right: 5%; bottom: 24%; z-index: 10; display: flex; align-items: flex-start; gap: 10px; transition: transform .3s ease, opacity .3s ease; }
.customer-body { display: grid; justify-items: center; }
.scene-customer-avatar { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50% 50% 43% 43%; background: #f7c9a7; border: 4px solid #8c5e48; font-size: 2.3rem; box-shadow: 0 7px 12px rgba(74,46,35,.17); }
.customer-body span { margin-top: -3px; padding: 3px 9px; border-radius: 999px; background: #fff7eb; border: 2px solid rgba(111,71,50,.2); font-size: .68rem; font-weight: 1000; }
.scene-speech { max-width: 155px; padding: 9px 11px; border-radius: 16px 16px 16px 4px; background: #fffdf9; border: 3px solid #8b5b43; box-shadow: 0 6px 12px rgba(74,46,35,.12); font-size: .72rem; font-weight: 900; line-height: 1.25; }
.scene-customer.served { transform: translateY(-3px) scale(1.03); }
.scene-customer.served .scene-speech { background: #e2f3df; }
.scene-customer.missed { opacity: .72; transform: translateX(7px); }
.scene-customer.missed .scene-speech { background: #f7dddd; }

.customer-panel { margin-top: 16px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; }
.customer-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--lavender); display: grid; place-items: center; font-size: 2.1rem; flex: 0 0 auto; }
.request-text { margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.45; }

.play-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.choice-panel { padding: 18px; }
.choice-panel h3 { margin: 0 0 13px; }
.choice-buttons { display: grid; gap: 9px; }
.choice-button {
  width: 100%; border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 15px;
  padding: 12px 14px; text-align: left; cursor: pointer; font-weight: 850;
}
.choice-button:hover { background: #fff9f2; }
.choice-button.selected { border-color: var(--rose); background: #fff1f4; }
.choice-button span { margin-right: 7px; }

.submit-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-top: 14px; }
.selection-status { color: var(--muted); font-weight: 700; }
.feedback { margin-top: 13px; padding: 13px 15px; border-radius: 16px; font-weight: 900; text-align: center; }
.feedback.good { background: var(--mint); }
.feedback.mixed { background: #fff0c8; }
.feedback.bad { background: #f8d4d8; }

.end-card { text-align: center; padding: 34px 24px; }
.end-cat { font-size: 4rem; }
.final-label { color: var(--muted); font-weight: 800; margin: 20px 0 0; }
.final-score { font-size: clamp(4rem, 15vw, 7rem); line-height: 1; font-weight: 1000; margin: 3px 0 10px; color: var(--rose-dark); }
.final-message { margin: 0 auto; max-width: 540px; color: var(--muted); line-height: 1.55; }
.leaderboard-section { margin-top: 18px; padding: 22px; }
.leaderboard-section h2 { margin: 0 0 5px; }
#mis-leaderboard { margin-top: 14px; min-height: 24px; }

.how-dialog { width: min(560px, calc(100% - 28px)); border: 0; border-radius: 24px; padding: 0; box-shadow: 0 28px 80px rgba(50,35,28,.25); color: var(--ink); }
.how-dialog::backdrop { background: rgba(55,42,36,.45); }
.how-dialog form { padding: 28px; position: relative; }
.how-dialog h2 { margin: 6px 0 12px; }
.how-dialog ol { padding-left: 22px; color: var(--muted); line-height: 1.55; }
.dialog-close { position: absolute; right: 16px; top: 12px; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 2rem; line-height: 1; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes catBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }

@media (max-width: 900px) {
  .cafe-stage { min-height: 500px; }
  .service-counter { min-width: 260px; width: 34%; }
  .wall-frame { display: none; }
  .wall-shelf { left: 42%; width: 18%; }
  .scene-speech { max-width: 118px; }
}

@media (max-width: 760px) {
  .game-shell { width: min(100% - 18px, 1180px); padding-top: 14px; }
  .topbar { align-items: flex-start; }
  .topbar .button { padding: 9px 13px; }
  .intro-card, .section-heading { display: block; }
  .setup-status { text-align: left; margin-top: 16px; }
  .section-heading p { margin-top: 5px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .decor-grid { grid-template-columns: 1fr; }
  .play-columns { grid-template-columns: 1fr; }
  .submit-row { align-items: stretch; flex-direction: column; }
  .submit-row .button { width: 100%; }
  .cafe-stage { min-height: 460px; }
  .cafe-sign { min-width: 0; width: 42%; left: 3%; }
  .cafe-sign strong { font-size: 1rem; }
  .window-scene { left: 4%; top: 26%; width: 38%; height: 33%; }
  .service-counter { right: 2%; width: 42%; min-width: 0; height: 42%; }
  .menu-board { display: none; }
  .coffee-machine { left: 14%; }
  .wall-shelf { display: none; }
  .rug { left: 24%; width: 48%; }
  .sofa { width: 25%; }
  .armchair { left: 61%; width: 18%; }
  .table-left { left: 37%; }
  .table-right { right: 3%; }
  .scene-customer { right: 4%; bottom: 24%; }
  .scene-speech { display: none; }
  .cat-spot-1 { left: 8%; }
  .cat-spot-2 { left: 42%; }
  .cat-spot-3 { left: 65%; }
}

@media (max-width: 520px) {
  .hud { gap: 7px; }
  .hud > div { padding: 10px 5px; }
  .hud-icon { display: none; }
  .customer-panel { align-items: flex-start; }
  .customer-avatar { width: 54px; height: 54px; }
  .cafe-stage { min-height: 390px; border-width: 2px; }
  .cafe-sign { top: 4%; width: 46%; padding: 10px; }
  .cafe-sign small { display: none; }
  .window-scene { top: 22%; height: 32%; border-width: 6px; }
  .service-counter { top: 18%; width: 44%; height: 39%; }
  .pastry-case { font-size: 1.4rem; }
  .coffee-machine { font-size: 1.8rem; }
  .ceiling-lamp { display: none; }
  .rug { bottom: 3%; height: 24%; }
  .sofa { bottom: 9%; height: 24%; }
  .armchair { display: none; }
  .table-left { left: 45%; bottom: 27%; width: 18%; }
  .table-right { right: 5%; bottom: 6%; width: 18%; }
  .chair { display: none; }
  .cat-bubble { width: 54px; height: 48px; font-size: 2rem; }
  .stage-cat small { font-size: .58rem; }
  .cat-spot-1 { left: 7%; bottom: 16%; }
  .cat-spot-2 { left: 42%; bottom: 9%; }
  .cat-spot-3 { left: 65%; bottom: 11%; }
  .scene-customer { right: 5%; bottom: 22%; }
  .scene-customer-avatar { width: 58px; height: 58px; font-size: 1.8rem; }
  .decor-item > span { font-size: 2.2rem; }
  .decor-item small { display: none; }
  .decor-plant { left: 28%; bottom: 25%; }
  .decor-flowers { left: 51%; bottom: 25%; }
}

@media (max-width: 440px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cafe-stage { min-height: 360px; }
  .cafe-sign { width: 49%; }
  .cafe-sign strong { font-size: .9rem; }
  .window-scene { width: 40%; }
  .service-counter { width: 45%; }
  .sofa { width: 27%; }
  .table-left { left: 43%; }
}

/* Version 3.0 drag-and-drop service */
.stage-cats { pointer-events: none; }
.stage-cat {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage-cat:active { cursor: grabbing; }
.stage-cat:hover .cat-bubble { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 18px rgba(76,50,37,.18); }
.stage-cat.at-table .cat-bubble { outline: 4px solid #88c99a; outline-offset: 3px; }
.stage-cat.at-table small { background: #e5f5e8; }
.stage-cat:disabled { opacity: .72; cursor: default; }
.cat-bubble { transition: transform .16s ease, box-shadow .16s ease, outline .16s ease; }

.drink-tray {
  position: absolute;
  left: 7%;
  right: 7%;
  top: -8px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 8;
  transform: translateY(-100%);
  pointer-events: auto;
}
.counter-drink {
  width: 82px;
  min-height: 72px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 3px solid #6c4938;
  border-radius: 16px;
  background: #fff7e9;
  color: var(--ink);
  box-shadow: 0 7px 0 rgba(99,61,40,.16);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .16s ease, box-shadow .16s ease, outline .16s ease;
}
.counter-drink:hover { transform: translateY(-4px); box-shadow: 0 10px 0 rgba(99,61,40,.13); }
.counter-drink:active { cursor: grabbing; }
.counter-drink > span { font-size: 2rem; line-height: 1; }
.counter-drink small { font-size: .58rem; line-height: 1.05; font-weight: 1000; }
.counter-drink.at-table { outline: 4px solid #88c99a; outline-offset: 2px; background: #ebf8ed; }
.counter-drink:disabled { opacity: .7; cursor: default; }

.customer-table { z-index: 11; }
.customer-drop-zone {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 132px;
  min-height: 94px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 8px;
  border: 3px dashed rgba(255,255,255,.95);
  border-radius: 22px;
  background: rgba(86,58,42,.34);
  color: #fffdf9;
  text-align: center;
  pointer-events: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  z-index: 5;
}
.customer-drop-zone .drop-icon { font-size: 1.3rem; line-height: 1; }
.customer-drop-zone strong { font-size: .68rem; }
.customer-drop-zone small { font-size: .56rem; font-weight: 900; }
.customer-drop-zone.drag-over {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(90,155,103,.78);
  border-color: #fff;
  box-shadow: 0 0 0 7px rgba(255,255,255,.22);
}
.customer-drop-zone.ready { background: rgba(70,145,91,.82); border-style: solid; }
.customer-drop-zone.drop-pop { transform: translate(-50%, -50%) scale(1.12); }

.drag-guide {
  margin-top: 16px;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: rgba(255,253,249,.95);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.drag-guide h3 { margin: 5px 0 5px; font-size: 1.15rem; }
.drag-guide p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.45; }
.order-slots { display: grid; grid-template-columns: repeat(2, minmax(135px, 1fr)); gap: 8px; min-width: 300px; }
.order-slots span {
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px dashed var(--line);
  background: #fff;
  font-size: .8rem;
  font-weight: 900;
  text-align: center;
}
.order-slots span.filled { background: #e6f5e8; border-style: solid; border-color: #9bcea4; }

.drag-source { opacity: .38 !important; }
.drag-ghost {
  position: fixed !important;
  z-index: 99999 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(-4deg) scale(1.08) !important;
  pointer-events: none !important;
  opacity: .94 !important;
  animation: none !important;
  filter: drop-shadow(0 14px 14px rgba(60,40,30,.25));
}

@media (max-width: 900px) {
  .drink-tray { gap: 5px; }
  .counter-drink { width: 68px; min-height: 64px; }
  .counter-drink > span { font-size: 1.7rem; }
  .customer-drop-zone { width: 110px; min-height: 82px; }
}

@media (max-width: 760px) {
  .drag-guide { align-items: stretch; flex-direction: column; }
  .order-slots { min-width: 0; width: 100%; }
  .drink-tray { left: 3%; right: 3%; top: -5px; }
  .counter-drink { width: 62px; min-height: 58px; border-width: 2px; }
  .counter-drink small { font-size: .5rem; }
  .customer-drop-zone { width: 96px; min-height: 74px; }
  .customer-drop-zone strong { font-size: .58rem; }
}

@media (max-width: 520px) {
  .order-slots { grid-template-columns: 1fr 1fr; }
  .counter-drink { width: 52px; min-height: 51px; padding: 4px; border-radius: 11px; }
  .counter-drink > span { font-size: 1.45rem; }
  .counter-drink small { display: none; }
  .customer-drop-zone { width: 82px; min-height: 64px; padding: 5px; }
  .customer-drop-zone .drop-icon { font-size: 1rem; }
  .customer-drop-zone small { display: none; }
}

/* Version 3.0 drag reliability patch */
.customer-table { isolation: isolate; }

/* Version 3.0.2: keep the primary serve action visible directly under the café scene. */
.customer-panel {
  align-items: center;
}
.customer-copy {
  flex: 1 1 260px;
  min-width: 0;
}
.customer-serve-button {
  flex: 0 0 auto;
  min-width: 160px;
  margin-left: auto;
}
@media (max-width: 700px) {
  .customer-panel {
    align-items: stretch;
  }
  .customer-serve-button {
    width: 100%;
    margin-left: 0;
  }
}


/* Version 3.0.3 — illustrated cat adoption corner */
.adoption-section {
  overflow: hidden;
}

.adoption-area {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 2px solid #eadbd2;
  border-radius: 28px;
  background:
    linear-gradient(to bottom, #fff4e9 0 68%, #ddb99a 68% 72%, #c8956d 72% 100%);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.28);
}

.adoption-area::before {
  content: "";
  position: absolute;
  inset: 68% 0 auto;
  height: 4px;
  background: rgba(119,75,52,.12);
}

.adoption-wall-sign {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  min-width: 245px;
  padding: 10px 18px 9px;
  border: 2px solid #e7c4ad;
  border-radius: 16px;
  background: #fffaf2;
  text-align: center;
  box-shadow: 0 6px 0 rgba(137,93,63,.09);
}
.adoption-wall-sign > span { margin-right: 5px; }
.adoption-wall-sign strong { color: #7c5545; font-size: .95rem; }
.adoption-wall-sign small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.adoption-window {
  position: absolute;
  left: 26px;
  top: 38px;
  width: 145px;
  height: 122px;
  overflow: hidden;
  border: 9px solid #fff9f1;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(#bee5ee 0 72%, #9bc88d 72%);
  box-shadow: 0 3px 0 #d9b7a0;
}
.adoption-window::before,
.adoption-window::after {
  content: "";
  position: absolute;
  z-index: 2;
  background: rgba(255,255,255,.85);
}
.adoption-window::before { left: 50%; top: 0; width: 5px; height: 100%; }
.adoption-window::after { left: 0; top: 50%; width: 100%; height: 5px; }
.adoption-sun { position: absolute; right: 10px; top: 8px; font-size: 1.6rem; }
.adoption-cloud { position: absolute; opacity: .8; font-size: 1.2rem; }
.cloud-a { left: 9px; top: 12px; }
.cloud-b { left: 45px; top: 48px; transform: scale(.75); }

.adoption-shelf {
  position: absolute;
  z-index: 1;
  right: 34px;
  top: 54px;
  display: flex;
  align-items: end;
  gap: 13px;
  padding: 5px 11px 7px;
  border-bottom: 8px solid #b98562;
  font-size: 1.7rem;
}

.adoption-couch {
  position: absolute;
  left: 50%;
  top: 163px;
  width: 310px;
  height: 126px;
  transform: translateX(-50%);
  border: 5px solid #bd7d75;
  border-radius: 38px 38px 20px 20px;
  background: #efafa8;
  box-shadow: inset 0 -19px 0 rgba(159,89,85,.12), 0 8px 0 rgba(111,73,58,.12);
}
.adoption-couch::before,
.adoption-couch::after {
  content: "";
  position: absolute;
  bottom: -22px;
  width: 20px;
  height: 25px;
  border-radius: 0 0 5px 5px;
  background: #8d604c;
}
.adoption-couch::before { left: 30px; }
.adoption-couch::after { right: 30px; }
.adoption-couch span::before,
.adoption-couch span::after {
  content: "";
  position: absolute;
  bottom: 13px;
  width: 111px;
  height: 55px;
  border-radius: 18px;
  background: rgba(255,232,220,.38);
  border: 2px solid rgba(150,87,80,.14);
}
.adoption-couch span::before { left: 34px; }
.adoption-couch span::after { right: 34px; }

.adoption-rug {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 480px;
  max-width: 82%;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, #fff1ce 0 18%, #e8c7ba 19% 37%, #fff1ce 38% 56%, #dba39d 57% 75%, #f5d7bd 76%);
  opacity: .9;
}

.adoption-basket {
  position: absolute;
  z-index: 2;
  bottom: 40px;
  font-size: 2.8rem;
  filter: drop-shadow(0 4px 0 rgba(92,62,49,.12));
}
.basket-left { left: 40px; transform: rotate(-7deg); }
.basket-right { right: 42px; transform: rotate(7deg); }

.adoption-cats {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.adoption-cat {
  position: absolute;
  width: 112px;
  min-height: 128px;
  padding: 4px 6px 8px;
  border: 0;
  border-radius: 50% 50% 18px 18px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  text-align: center;
  transition: transform .16s ease, filter .16s ease;
}
.adoption-cat:hover,
.adoption-cat:focus-visible {
  transform: translateY(-7px) scale(1.04);
  outline: none;
  filter: drop-shadow(0 8px 8px rgba(111,73,58,.15));
}
.adoption-cat.selected {
  transform: translateY(-8px) scale(1.05);
}
.adoption-cat.selected::before {
  content: "";
  position: absolute;
  inset: 12px 8px 34px;
  z-index: -1;
  border: 3px solid var(--rose);
  border-radius: 48%;
  background: rgba(255,246,248,.58);
  box-shadow: 0 0 0 5px rgba(255,255,255,.6);
}
.adoption-cat-emoji {
  display: block;
  font-size: 4.6rem;
  line-height: 1;
  filter: drop-shadow(0 4px 0 rgba(92,62,49,.08));
}
.adoption-name {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 6px rgba(93,67,52,.08);
  font-size: .84rem;
  font-weight: 900;
}
.adoption-trait {
  display: block;
  margin-top: 3px;
  color: #765e55;
  font-size: .7rem;
  font-weight: 800;
}
.adoption-heart {
  position: absolute;
  z-index: 5;
  right: 7px;
  top: 4px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  opacity: 0;
  transform: scale(.4) rotate(-20deg);
  box-shadow: 0 3px 8px rgba(151,73,92,.24);
  transition: opacity .15s ease, transform .15s ease;
}
.adoption-cat.selected .adoption-heart {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Cats are deliberately arranged as part of the room instead of a card grid. */
.adoption-cat-1 { left: calc(50% - 182px); top: 184px; transform: rotate(-2deg); }
.adoption-cat-2 { left: calc(50% - 62px); top: 154px; }
.adoption-cat-3 { left: calc(50% + 67px); top: 190px; transform: rotate(2deg); }
.adoption-cat-4 { right: 50px; bottom: 20px; transform: rotate(3deg); }

.adoption-cat-1:hover, .adoption-cat-1:focus-visible, .adoption-cat-1.selected,
.adoption-cat-2:hover, .adoption-cat-2:focus-visible, .adoption-cat-2.selected,
.adoption-cat-3:hover, .adoption-cat-3:focus-visible, .adoption-cat-3.selected,
.adoption-cat-4:hover, .adoption-cat-4:focus-visible, .adoption-cat-4.selected {
  transform: translateY(-7px) scale(1.04);
}

.adoption-hint {
  margin: 12px 4px 0;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 700px) {
  .adoption-area { min-height: 480px; }
  .adoption-wall-sign { top: 16px; min-width: 210px; }
  .adoption-window { left: 15px; top: 87px; width: 112px; height: 95px; }
  .adoption-shelf { right: 15px; top: 105px; }
  .adoption-couch { top: 196px; width: 265px; height: 116px; }
  .adoption-rug { bottom: 15px; height: 90px; }
  .adoption-basket { bottom: 44px; font-size: 2.4rem; }
  .basket-left { left: 16px; }
  .basket-right { right: 14px; }
  .adoption-cat { width: 98px; min-height: 116px; }
  .adoption-cat-emoji { font-size: 4rem; }
  .adoption-cat-1 { left: calc(50% - 135px); top: 225px; }
  .adoption-cat-2 { left: calc(50% - 49px); top: 188px; }
  .adoption-cat-3 { left: calc(50% + 43px); top: 225px; }
  .adoption-cat-4 { right: calc(50% - 47px); bottom: 13px; }
}

/* Version 3.0.4 — richer six-cat adoption profiles */
.adoption-area {
  min-height: 560px;
}
.adoption-cat {
  width: 148px;
  min-height: 178px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 8px 18px rgba(93,67,52,.08);
}
.adoption-cat-emoji {
  font-size: 4.15rem;
}
.adoption-name {
  font-size: .92rem;
}
.adoption-profile {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  color: #6f5a51;
  font-size: .67rem;
  font-weight: 800;
  line-height: 1.25;
}
.adoption-profile span {
  display: block;
}
.adoption-cat.selected::before {
  inset: 6px;
  border-radius: 22px;
}
.adoption-cat-1 { left: 8%; top: 185px; }
.adoption-cat-2 { left: 28%; top: 150px; }
.adoption-cat-3 { left: 48%; top: 190px; }
.adoption-cat-4 { left: 68%; top: 155px; right: auto; bottom: auto; }
.adoption-cat-5 { left: 18%; top: 345px; }
.adoption-cat-6 { left: 58%; top: 345px; }

@media (max-width: 900px) {
  .adoption-area { min-height: 720px; }
  .adoption-cat { width: 136px; min-height: 168px; }
  .adoption-cat-1 { left: 8%; top: 205px; }
  .adoption-cat-2 { left: 54%; top: 205px; }
  .adoption-cat-3 { left: 8%; top: 380px; }
  .adoption-cat-4 { left: 54%; top: 380px; }
  .adoption-cat-5 { left: 8%; top: 555px; }
  .adoption-cat-6 { left: 54%; top: 555px; }
  .adoption-couch { top: 250px; opacity: .65; }
}
@media (max-width: 560px) {
  .adoption-area { min-height: 940px; }
  .adoption-cat {
    width: calc(50% - 28px);
    max-width: 155px;
  }
  .adoption-cat-1 { left: 16px; top: 210px; }
  .adoption-cat-2 { right: 16px; left: auto; top: 210px; }
  .adoption-cat-3 { left: 16px; top: 430px; }
  .adoption-cat-4 { right: 16px; left: auto; top: 430px; }
  .adoption-cat-5 { left: 16px; top: 650px; }
  .adoption-cat-6 { right: 16px; left: auto; top: 650px; }
  .adoption-couch, .adoption-rug, .adoption-basket { opacity: .35; }
}

/* Version 3.0.6 — personality clue rounds */
.memory-tip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid #eadbd2;
  border-radius: 14px;
  background: rgba(255, 248, 240, .92);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
}
.memory-tip strong { color: var(--ink); }

/* Version 3.0.7 — adoption strategy reminder */
.adoption-warning {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 2px solid #f1c8d2;
  border-radius: 18px;
  background: #fff5f7;
  box-shadow: 0 6px 14px rgba(143, 82, 99, .07);
}
.adoption-warning-icon {
  flex: 0 0 auto;
  font-size: 1.75rem;
}
.adoption-warning strong {
  display: block;
  margin-bottom: 2px;
  color: var(--rose-dark);
  font-size: .98rem;
}
.adoption-warning p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Version 3.0.8 — expanded décor and drink menu */
.decor-grid {
  grid-template-columns: repeat(4, 1fr);
}
.decor-fairylights { left: 38%; top: 5%; }
.decor-catTree { left: 4%; bottom: 27%; }
.decor-pillows { right: 24%; bottom: 14%; }
.decor-books { right: 8%; top: 24%; }
.decor-yarn { left: 35%; bottom: 10%; }

.drink-tray {
  left: 2%;
  right: 2%;
  gap: 5px;
  flex-wrap: nowrap;
}
.counter-drink {
  width: 68px;
  min-height: 68px;
  padding: 5px 3px;
}
.counter-drink > span { font-size: 1.75rem; }
.counter-drink small { font-size: .52rem; }

@media (max-width: 850px) {
  .decor-grid { grid-template-columns: repeat(2, 1fr); }
  .drink-tray {
    left: 1%;
    right: 1%;
    gap: 3px;
  }
  .counter-drink {
    width: 58px;
    min-height: 63px;
  }
  .counter-drink > span { font-size: 1.55rem; }
  .counter-drink small { font-size: .47rem; }
}