@import url(/assets/fonts/fonts.css);
/* Shared Mango Puddle layer for game pages: top-corner nav, parent gate, session end card. */
.gate { position: relative; border: 2px solid #e6e2d4; background: #fff; color: #24443C; border-radius: 999px; padding: 8px 14px;
  font: 700 14px Nunito, system-ui, sans-serif; cursor: pointer; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.gate .fill { display: none; }
.gate .lbl { position: relative; }
.gate.holding { background: #eef8fc; border-color: #4FA9CC; }

.mp-end { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 64px 16px 24px; background: #FAF9F2f7; overflow-y: auto; justify-content: safe center; color: #24443C; text-align: center; font-family: Nunito, system-ui, sans-serif; animation: mp-fade 1.2s ease; }
.mp-end h1 { font: 600 clamp(30px, 6vw, 54px)/1.1 Fredoka, system-ui, sans-serif; margin: 0; }
.mp-end p { font-size: clamp(18px, 3.4vw, 26px); margin: 0; }
.mp-end-mascot { width: clamp(64px, 10vw, 110px); animation: mp-sway 3s ease-in-out infinite; transform-origin: 50% 95%; }
.mp-end-sheet { width: min(340px, 70vw); border-radius: 10px; border: 1px solid #e6e2d4; background: #fff; box-shadow: 0 6px 20px #0001; }
.mp-end-home { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; opacity: .8; }
.mp-end-sheet { cursor: pointer; }
.mp-end-gate { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); opacity: .8; }
.mp-end-again { position: fixed; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); opacity: .8; }
@keyframes mp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .mp-end, .mp-end-mascot { animation: none; } }

/* End card: the other games still awake today, as big tappable pictures */
.mp-end-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 920px; margin: 6px 0; }
.mp-end-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: clamp(104px, 15vw, 140px); padding: 10px 6px 12px;
  background: #fff; border: 3px solid #e6e2d4; border-radius: 22px; color: #24443C; text-decoration: none; font: 600 16px Fredoka, system-ui, sans-serif;
  box-shadow: 0 4px 0 #e6e2d4; touch-action: manipulation; }
.mp-end-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6e2d4; }
.mp-end-tile .mp-art { width: 84px; height: 84px; display: block; }
.mp-end-tile .mp-art svg { width: 100%; height: 100%; }
.mp-end-paper { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; color: #5b6f66; }
.mp-end-paper .mp-end-sheet { width: min(150px, 40vw); }
@media (max-height: 640px) { .mp-end-mascot { display: none; } .mp-end-paper { display: none; } }