.flex {
 display: flex;
}
.column { flex-direction: column; }
.center { justify-content: center; }
.item-center { justify-items: center; align-items: center; }
.gap { gap: var(--global-spacing); }
.wide-gap { gap: calc(var(--base) / 2); }
.flex-wrap { flex-wrap: wrap; }
.icon {
 display: inline-block;
 width: 1em;
 height: 1em;
 &.tap { width: auto; aspect-ratio: 3 / 4; background: url('../../Images/SVG/Icons/Tap.svg'); }
 &.save { opacity: 0.4; background: url('../../Images/SVG/Icons/Save.svg'); }
 &.player { background: url('../../Images/SVG/Icons/Player.svg'); }
 &.role { background: url('../../Images/SVG/Icons/Role.svg'); }
 &.expansion { background: url('../../Images/SVG/Icons/Expansion.svg'); }
}
.menu:not(.current):not(.moving):not(.still-moving) {
 pointer-events: none;
 opacity: 0;
 scale: 0;
 transform-origin: 0 0;
}
.menu {
 --menu-padding: max(var(--global-spacing), calc(50vw - 50vh));
 container-type: inline-size;
 position: absolute;
 padding: var(--global-spacing) var(--menu-padding);
 width: 100%;
 height: 100%;
 overflow-y: auto;
 overflow-x: hidden;
}
.front { z-index: 1000; }
.still-front { z-index: 1001; }
.shadow { filter: drop-shadow(0 max(0.05em, 1px) max(0.01em, 1px) black) drop-shadow(0 max(0.05em, 1px) max(0.01em, 1px) black); }
.background {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 object-fit: cover;
 &.fixed {
  position: fixed;
  inset: 0;
 }
 &.blur { filter: blur(var(--global-spacing)); }
}
.vignette { background: radial-gradient(ellipse, #0000 70%, #000A); }
.line { display: block; width: 100%; height: calc(var(--global-spacing) / 3); border-radius: calc(var(--global-spacing) / 6); background: #EEF; }
.lightning { cursor: pointer; }
.light-button {
 background: white;
 border-radius: var(--global-spacing);
 color: #003;
 text-align: center;
 .icon { filter: invert(0.97); }
}
.text-shadow, .menu-head { text-shadow: 0 0 max(0.1em, 1px) #002; }
.text-center { text-align: center; }
.wide { width: 100%; }
.line {
 display: block;
 margin: calc(var(--global-spacing) / 2) 0;
 width: 100%;
 height: calc(var(--global-spacing) / 2);
 border-radius: calc(var(--global-spacing) / 4);
 background: #EEF;
}
.menu-head {
 width: 100%;
 min-height: calc(var(--global-icon-size) - var(--global-spacing) * 2);
 padding: 0 calc(var(--global-icon-size) - var(--global-spacing) * 2);
 text-align: center;
 align-content: center;
}
.center {
 text-align: center;
 align-content: center;
}
.hiding { position: fixed; top: 0; left: 0; opacity: 0; scale: 0 0; transform-origin; pointer-events: none; }
.hidden { display: none; }
.coming-soon {
 pointer-events: none;
 overflow: hidden;
 &::before {
  content: "";
  font-size: 10cqh;
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.3;
  z-index: 1;
 }
 &::after {
  content: "Coming Soon";
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  rotate: 22.5deg;
  opacity: 0.3;
  z-index: 1;
 }
}
@media (pointer: coarse) {
 .context::before { content: "Tap and hold"; }
 .lcontext::before { content: "tap and hold"; }
 .context-left::before { content: "Tap"; }
 .lcontext-left::before { content: "tap"; }
}
@media (pointer: fine) {
 .context::before { content: "Right click"; }
 .lcontext::before { content: "right click"; }
 .context-left::before { content: "Click"; }
 .lcontext-left::before { content: "click"; }
}