/* Simos Camp — Beach Date mini-game (owner: mgDate). Prefix: mgd-
 * Side-view beach scene (canvas) + DOM: love meter, speech bubbles, kind tips, bottom sheet (menu / choices / summary).
 * Mobile-first; on short landscape screens the sheet docks to the right (.mgd-side). Uses base.css tokens (dark-mode aware).
 */
.ui-fs.mg-beachDate { background: linear-gradient(180deg, #8fcbee 0%, #c9f2f8 45%, #3fd0d4 62%, #f6e7c6 63%, #fcf5e3 100%); }
.mgd-root {
  position: absolute; inset: 0; overflow: hidden; font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none;
}
.mgd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.mgd-canvas.mgd-tappable { cursor: pointer; }

/* ---------------------------------------------------------------- HUD: love meter + activity steps */
/* docked at the bottom over the foreground sand: the camp's toasts use the top band while a full-screen game is open */
.mgd-hud {
  position: absolute; z-index: 5; bottom: calc(var(--safe-bottom) + 14px); left: 50%; transform: translateX(-50%);
  width: min(470px, calc(100% - 24px)); display: flex; flex-direction: row; align-items: center; gap: 8px; pointer-events: none;
}
.mgd-meter {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: #fffaf0; border: 3px solid #ff8fb1; box-shadow: 0 4px 0 #d9487a, 0 10px 22px rgba(30, 50, 64, .22);
}
.mgd-mheart {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; line-height: 1;
  background: #ffe3ee; box-shadow: inset 0 -3px 0 rgba(217, 72, 122, .15); animation: mgd-beat 1.6s ease-in-out infinite;
}
.mgd-mbar {
  position: relative; flex: 1 1 auto; height: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 127, 168, .18); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .06);
}
.mgd-mbar > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #ffb3cb, #ff5c8a); transition: width .7s var(--ease-spring);
}
.mgd-mbar > i::after { content: ''; position: absolute; left: 6px; right: 6px; top: 2px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .55); }
.mgd-mlabel { flex: none; min-width: 84px; text-align: right; font-weight: 700; font-size: 13.5px; color: #c2356a; white-space: nowrap; }
.mgd-meter.mgd-up .mgd-mheart { animation: mgd-pop .55s var(--ease-spring); }
.mgd-meter.mgd-down { animation: mgd-shake .45s ease; }
.mgd-steps { flex: none; display: flex; gap: 5px; }
.mgd-step {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; line-height: 1;
  background: rgba(255, 250, 240, .82); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.mgd-step.mgd-empty { color: #b39c88; font-size: 14px; font-weight: 700; }
.mgd-step.mgd-now { border-color: #ff8fb1; animation: mgd-bob 1.4s ease-in-out infinite; }

/* ---------------------------------------------------------------- speech bubbles (positioned by JS) */
.mgd-bubbles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mgd-bubble { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mgd-bin {
  position: absolute; left: 0; bottom: 0; transform: translateX(-50%); width: max-content; max-width: min(260px, 64vw);
  padding: 8px 13px; border-radius: 18px; background: #fffaf0; color: #4a3b33; border: 3px solid #fff;
  font-weight: 600; font-size: 15px; line-height: 1.28; text-align: center;
  box-shadow: 0 3px 0 rgba(122, 81, 50, .28), 0 10px 20px rgba(30, 50, 64, .2);
  animation: mgd-bubble-in .42s var(--ease-spring) backwards; transform-origin: 50% 100%;
}
.mgd-bin::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px;
  background: inherit; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); border-radius: 0 0 4px 0;
}
.mgd-b-you .mgd-bin { border-color: #ffc2d6; }
.mgd-b-you .mgd-bin::after { border-color: #ffc2d6; }
.mgd-b-me .mgd-bin { border-color: #9be4e0; }
.mgd-b-me .mgd-bin::after { border-color: #9be4e0; }
.mgd-b-boundary .mgd-bin { border-color: #ffb0a8; background: #fff4ef; }
.mgd-b-boundary .mgd-bin::after { border-color: #ffb0a8; }
.mgd-b-boundary .mgd-bin::before { content: '✋ '; }
.mgd-bubble.mgd-out .mgd-bin { opacity: 0; transform: translateX(-50%) scale(.85); transition: opacity .22s ease, transform .22s ease; animation: none; }

/* ---------------------------------------------------------------- kind tips, caption, hint */
/* kind tips dock right above the love meter (clear of the camp's toast band at the top) */
.mgd-tips {
  position: absolute; z-index: 6; bottom: calc(var(--safe-bottom) + 70px); left: 50%; transform: translateX(-50%);
  width: min(470px, calc(100% - 24px)); display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.mgd-tip {
  --tk: var(--turq); --tkd: var(--turq-dark);
  display: flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 18px; pointer-events: auto; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 3px solid var(--tk); box-shadow: 0 4px 0 var(--tkd), 0 12px 24px rgba(30, 50, 64, .22);
  font-size: 14.5px; font-weight: 600; line-height: 1.3; animation: mgd-tip-in .5s var(--ease-spring) backwards;
}
.mgd-tip.mgd-good { --tk: var(--green); --tkd: var(--green-dark); }
.mgd-tip.mgd-bad { --tk: #ff9c8f; --tkd: #d9665a; }
.mgd-tip.mgd-info { --tk: #b9a6ff; --tkd: #7f68d6; }
.mgd-tip-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: rgba(0, 0, 0, .05); }
.mgd-tip.mgd-out { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .3s ease, transform .3s ease; animation: none; }
.mgd-caption {
  position: absolute; z-index: 5; left: 50%; top: calc(var(--safe-top) + 150px); transform: translate(-50%, -6px);
  padding: 7px 18px; border-radius: 999px; white-space: nowrap; pointer-events: none; opacity: 0;
  font-weight: 700; font-size: 16px; color: #fff; text-shadow: 0 2px 0 rgba(122, 81, 50, .6);
  background: var(--wood-grain), linear-gradient(180deg, var(--wood-light), var(--wood)); border: 3px solid var(--wood-dark); box-shadow: 0 3px 0 var(--wood-deep);
  transition: opacity .45s ease, transform .45s var(--ease-spring);
}
.mgd-caption.mgd-on { opacity: 1; transform: translate(-50%, 0); }
.mgd-hint {
  position: absolute; z-index: 6; left: 50%; top: calc(var(--safe-top) + 150px); transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(22, 30, 72, .78); color: #fff; font-weight: 600; font-size: 15px; border: 2px solid rgba(255, 240, 190, .7);
  animation: mgd-glow 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------- bottom sheet */
.mgd-sheet {
  position: absolute; z-index: 7; left: 50%; bottom: 0; width: min(620px, 100%); max-height: 64%;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  padding: 14px 14px calc(14px + var(--safe-bottom)); border-radius: 26px 26px 0 0;
  background: var(--panel-bg); color: var(--ink); border: 4px solid var(--wood); border-bottom: 0;
  box-shadow: 0 -6px 0 rgba(122, 81, 50, .18), 0 -14px 30px rgba(30, 50, 64, .25);
  transform: translate(-50%, 110%); transition: transform .42s var(--ease-soft); pointer-events: auto;
}
.mgd-sheet.mgd-open { transform: translate(-50%, 0); }
.mgd-sheet-in { display: flex; flex-direction: column; gap: 10px; animation: mgd-fade-up .38s ease backwards; }
.mgd-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sand); color: var(--ink-soft); font-weight: 700; font-size: 14px; line-height: 1;
}
.mgd-num-s { display: inline-grid; width: 20px; height: 20px; font-size: 11.5px; margin-right: 6px; vertical-align: 1px; }
.mgd-title { font-weight: 700; font-size: 19px; line-height: 1.2; }
.mgd-sub { color: var(--ink-soft); font-size: 13.5px; line-height: 1.3; }

/* conversation line */
.mgd-line { display: flex; gap: 10px; align-items: flex-start; }
.mgd-face {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, #bff3ec, #fcf5e3); border: 3px solid #fff; box-shadow: 0 0 0 2px #ff8fb1, 0 3px 0 rgba(0, 0, 0, .12);
}
.mgd-face canvas { width: 100% !important; height: 100% !important; display: block; }
.mgd-face-narr { font-size: 24px; box-shadow: 0 0 0 2px var(--turq), 0 3px 0 rgba(0, 0, 0, .12); }
.mgd-said {
  position: relative; flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: 16px;
  background: var(--paper); border: 2px solid var(--sand-dark);
}
.mgd-said::before {
  content: ''; position: absolute; left: -8px; top: 16px; width: 12px; height: 12px; background: inherit;
  border-left: 2px solid var(--sand-dark); border-bottom: 2px solid var(--sand-dark); transform: rotate(45deg);
}
.mgd-name { font-weight: 700; font-size: 13px; color: #d9487a; }
.mgd-text { font-size: 16px; font-weight: 600; line-height: 1.3; }
.mgd-narr .mgd-text { font-style: italic; font-weight: 500; color: var(--ink-soft); }

/* choices (same look for every tone until one is picked) */
.mgd-choices { display: flex; flex-direction: column; gap: 8px; }
.mgd-choice {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px 8px 10px; text-align: left;
  border-radius: 16px; border: 3px solid var(--sand-dark); background: var(--paper); color: var(--ink);
  font: 600 15.5px/1.25 var(--font); cursor: pointer; box-shadow: 0 4px 0 var(--sand-dark);
  transition: transform .12s var(--ease-spring), box-shadow .12s, opacity .3s, background .25s, border-color .25s;
  animation: mgd-fade-up .4s ease backwards;
}
.mgd-choice:nth-child(2) { animation-delay: .06s; }
.mgd-choice:nth-child(3) { animation-delay: .12s; }
.mgd-choice:nth-child(4) { animation-delay: .18s; }
.mgd-choice:hover { border-color: var(--turq); }
.mgd-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sand-dark); }
.mgd-choice:disabled { cursor: default; }
.mgd-ctext { flex: 1 1 auto; min-width: 0; }
.mgd-ctext small { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.mgd-tag { flex: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mgd-tag:empty { display: none; }
.mgd-choice.mgd-dim { opacity: .38; transform: scale(.98); }
.mgd-choice.mgd-picked { animation: mgd-pop-in .45s var(--ease-spring); }
.mgd-choice.mgd-t-kind { border-color: var(--green); background: #e3f8ea; color: #1f5d33; box-shadow: 0 4px 0 var(--green-dark); }
.mgd-choice.mgd-t-kind .mgd-num { background: var(--green); color: #fff; }
.mgd-choice.mgd-t-neutral { border-color: var(--sand-deep); background: var(--sand); box-shadow: 0 4px 0 var(--sand-deep); }
.mgd-choice.mgd-t-pushy, .mgd-choice.mgd-t-rude { border-color: var(--red); background: #ffe4e1; color: #8c2626; box-shadow: 0 4px 0 var(--red-dark); }
.mgd-choice.mgd-t-pushy .mgd-num, .mgd-choice.mgd-t-rude .mgd-num { background: var(--red); color: #fff; }
.mgd-choice-end .mgd-num { background: #ffe3ee; font-size: 17px; }
.mgd-end-sub { margin: 2px 4px -2px; }

/* activity menu */
.mgd-menu-head { display: flex; align-items: center; gap: 10px; }
.mgd-menu-head .mgd-face { width: 46px; height: 46px; }
.mgd-menu-head .mgd-said { padding: 6px 12px; }
.mgd-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mgd-act {
  display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 10px; text-align: left; cursor: pointer;
  border-radius: 16px; border: 3px solid #9be4e0; background: var(--paper); color: var(--ink); font-family: var(--font);
  box-shadow: 0 4px 0 #5fc4c6; transition: transform .12s var(--ease-spring), box-shadow .12s, border-color .2s;
  animation: mgd-fade-up .4s ease backwards;
}
.mgd-act:nth-child(2) { animation-delay: .04s; } .mgd-act:nth-child(3) { animation-delay: .08s; }
.mgd-act:nth-child(4) { animation-delay: .12s; } .mgd-act:nth-child(5) { animation-delay: .16s; } .mgd-act:nth-child(6) { animation-delay: .2s; }
.mgd-act:hover { border-color: var(--turq); }
.mgd-act:active { transform: translateY(3px); box-shadow: 0 1px 0 #5fc4c6; }
.mgd-act.mgd-off { cursor: default; border-color: var(--sand-dark); box-shadow: 0 3px 0 var(--sand-dark); filter: grayscale(.75); opacity: .62; }
.mgd-act-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; line-height: 1; background: #e3f8f6; }
.mgd-act-main { display: flex; flex-direction: column; min-width: 0; }
.mgd-act-label { font-weight: 700; font-size: 15px; line-height: 1.2; }
.mgd-act-desc { font-size: 12px; line-height: 1.25; color: var(--ink-soft); margin-top: 2px; }
.mgd-menu-foot { display: flex; justify-content: center; }
.mgd-end { min-width: 220px; }

/* summary */
.mgd-sum { align-items: center; text-align: center; gap: 9px; }
.mgd-sum-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mgd-sum-faces { display: flex; align-items: center; gap: 8px; }
.mgd-sum-heart { font-size: 28px; line-height: 1; animation: mgd-beat 1.4s ease-in-out infinite; }
.mgd-sum-meter { display: flex; align-items: center; gap: 8px; width: min(340px, 100%); font-weight: 700; font-size: 13.5px; color: #c2356a; }
.mgd-sum-meter .mgd-mbar { height: 12px; }
.mgd-sum-meter .mgd-mbar > i { transition: none; }
.mgd-sum-acts { display: flex; gap: 6px; justify-content: center; }
.mgd-sum-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mgd-sum-pts { font-weight: 700; color: var(--green-dark); font-size: 15px; }
.mgd-sum-msg { margin: 0; font-size: 15px; line-height: 1.35; max-width: 460px; }
.mgd-sum-tip { margin: 0; font-size: 13.5px; color: var(--ink-soft); max-width: 460px; }
.mgd-done { min-width: 200px; margin-top: 2px; }
.mgd-sum-btns { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; width: 100%; }
.mgd-sum-btns .sc-btn { margin-top: 2px; }
.mgd-workshop, .mgd-lock-go, .mgd-lock-ok { min-width: 200px; }

/* consent-workshop romance lock — friendly & calm (lilac "info" tone, never red) */
.mgd-lock-note {
  margin: 0; padding: 8px 12px; border-radius: 14px; max-width: 460px;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
  background: rgba(185, 166, 255, .18); border: 2px dashed #b9a6ff;
}
.mgd-sheet-choice .mgd-lock-note { margin: 0 2px; }
.mgd-lockbox .mgd-sum-heart { font-size: 34px; }
.mgd-lockbox .mgd-title { max-width: 420px; }

/* phones: slightly tighter */
@media (max-width: 380px) {
  .mgd-act { min-height: 58px; padding: 6px 8px; }
  .mgd-act-ico { width: 32px; height: 32px; font-size: 20px; }
  .mgd-act-desc { display: none; }
  .mgd-text { font-size: 15px; }
  .mgd-choice { font-size: 14.5px; min-height: 48px; }
  .mgd-done, .mgd-workshop, .mgd-lock-go, .mgd-lock-ok { min-width: 0; width: 100%; }
}
@media (min-width: 640px) {
  .mgd-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mgd-sheet { padding: 16px 18px calc(16px + var(--safe-bottom)); }
}

/* short landscape screens: the sheet docks right, the scene stays visible on the left */
.mgd-root.mgd-side .mgd-sheet {
  left: auto; right: 0; top: 0; bottom: 0; width: min(46%, 430px); max-height: none;
  padding-top: calc(var(--safe-top) + 64px); border-radius: 26px 0 0 26px; border: 4px solid var(--wood); border-right: 0;
  transform: translateX(110%);
}
.mgd-root.mgd-side .mgd-sheet.mgd-open { transform: none; }
.mgd-root.mgd-side .mgd-acts { grid-template-columns: 1fr; }
.mgd-root.mgd-side .mgd-hud { left: 27%; width: min(400px, 52%); bottom: calc(var(--safe-bottom) + 10px); }
.mgd-root.mgd-side .mgd-tips, .mgd-root.mgd-side .mgd-caption, .mgd-root.mgd-side .mgd-hint { left: 27%; }
.mgd-root.mgd-side .mgd-tips { top: calc(var(--safe-top) + 66px); bottom: auto; width: min(400px, 52%); flex-direction: column; }

/* ---------------------------------------------------------------- animations */
@keyframes mgd-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.09); } }
@keyframes mgd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes mgd-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes mgd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mgd-bubble-in { 0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.6); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes mgd-tip-in { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes mgd-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mgd-pop-in { 0% { transform: scale(.96); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes mgd-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 240, 190, .0), 0 6px 18px rgba(0, 0, 0, .3); } 50% { box-shadow: 0 0 0 6px rgba(255, 240, 190, .18), 0 6px 18px rgba(0, 0, 0, .3); } }
.sc-reduce-motion .mgd-mheart, .sc-reduce-motion .mgd-step.mgd-now, .sc-reduce-motion .mgd-sum-heart, .sc-reduce-motion .mgd-hint { animation: none; }