/* 麻將's own few rules over heirloom.css: the panel at the end of each hand,
   and the choices over a lit tile. */
.result {
  position: fixed; z-index: 20; left: 50%; top: calc(76px + var(--top-safe));
  width: min(420px, calc(100cqw - 24px)); transform: translateX(-50%);
  padding: 18px 20px 14px; text-align: center;
  animation: lift 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.result h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: 0.24em; color: var(--brass-bright); }
.result p { margin: 8px 0 10px; font-size: 13px; line-height: 1.7; color: var(--ivory-dim); letter-spacing: 0.05em; }
.result .note { margin: 8px 0 0; font-size: 12px; color: var(--ivory-faint); }
.result-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; }
.result-items span {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--brass-faint);
  font-size: 12px; letter-spacing: 0.06em; color: var(--ivory);
}
.result-items b { margin-left: 6px; color: var(--brass-bright); font-family: var(--caps); }
.result .over-rows { margin-bottom: 0; }
.result .over-row b { font-size: 16px; }
.over-row b.up { color: #B8D9A0; }
.over-row b.down { color: #F0A58F; }
@container page (width <= 760px) or (aspect-ratio <= 4/5) {
  .result { top: calc(108px + var(--top-safe)); }
}

/* the choices over a lit tile, its bottom edge just above the tile */
.tile-menu {
  position: fixed; z-index: 18; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: calc(100cqw - 16px); padding: 8px 10px 10px;
  animation: menu-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes menu-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 10px)); } }
.tile-menu-name { font-size: 12px; letter-spacing: 0.2em; color: var(--brass-bright); }
.tile-menu .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }