/* monopoly.css — Step 4: Universal 4-Seat Table Hub (Screen 09), 2.5D Sky Monopoly HUD (Screen 10) and
   Mythic cut-in + Victory Podium (Screen 11). Style 2 palette: cream parchment, roasted wood, royal gold;
   board HUD switches to bright sky-blue cards like the mockups. Uses --ui-scale / --safe-* from style2_hud.css
   with safe fallbacks so the standalone dev page works too. */
.hub-wrap, .mono-layer { --s: var(--ui-scale, 1); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); font-family: var(--font, "Trebuchet MS", "Nunito", system-ui, sans-serif); color: #3a2415; }
.mono-hud .inline-curr-ico { width: 13px; height: 13px; object-fit: contain; vertical-align: -2px; flex-shrink: 0; }

/* =============================================================== Screen 09 — Table Hub (Mockup 09) */
.hub-wrap {
  position: absolute; inset: 0; z-index: 24;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(28, 16, 8, 0.32), rgba(14, 8, 4, 0.72));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: calc(var(--st) + 72px * var(--s)) 8px calc(var(--sb) + 64px * var(--s));
}
.hub {
  width: min(100%, 412px); max-height: 100%;
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #fff8e8 0%, #f5e2bc 100%);
  border: 4.5px solid #6b3f1f;
  box-shadow: inset 0 0 0 2.5px #e6be74, 0 0 0 3px #3a2415, 0 18px 46px rgba(0, 0, 0, 0.65);
  font-size: calc(12.5px * var(--s));
}
.hub-head {
  display: flex; align-items: center; justify-content: center; position: relative;
  padding: 9px 42px; color: #fff8e7; font-weight: 900; letter-spacing: .5px;
  background: linear-gradient(180deg, #8f582a 0%, #5c3416 100%);
  border-bottom: 3px solid #3a2415;
  box-shadow: inset 0 1.5px 0 rgba(255, 232, 178, 0.45);
  text-shadow: 0 2px 0 #2a1406; font-size: 1.15em;
}
.hub-x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 9px; border: 2px solid #3a2415;
  background: linear-gradient(180deg, #e7b567, #a86c28);
  font-weight: 900; color: #3a2415; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 0 #2a1406;
}
.hub-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px 5px; }
.hub-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 2px; border-radius: 13px; border: 2.5px solid #bfa06a;
  background: linear-gradient(180deg, #efe0c2 0%, #dfd0b2 100%);
  color: #4b2a12; font-weight: 900; font-size: .84em; cursor: pointer; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 2px 0 #8a6938;
}
.hub-tab-ico {
  font-size: 1.65em; line-height: 1; height: 28px; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.22));
}
.hub-tab-img {
  width: 28px; height: 28px; object-fit: contain; pointer-events: none;
}
.hub-tab.on {
  background: linear-gradient(180deg, #ffe996 0%, #f4b638 100%);
  border-color: #3a2415; color: #3a2415;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), inset 0 -3px 0 #c57f16, 0 3px 6px rgba(0,0,0,0.22);
}
.hub-tab.locked { opacity: .68; }
.hub-tab em {
  position: absolute; top: -6px; right: -3px; font-style: normal; font-size: .68em;
  background: #4b2a12; color: #ffe08a; padding: 1px 5px; border-radius: 8px;
}

/* Illustrated 4-Seat VIP Table Diorama */
.hub-table-card {
  margin: 2px 10px 6px; border-radius: 16px; border: 3px solid #c9932c;
  background: radial-gradient(ellipse at 50% 48%, #8f2d38 0%, #581722 65%, #340b12 100%);
  overflow: hidden; box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.25);
}
.hub-table-card.moon {
  background: radial-gradient(ellipse at 50% 48%, #3c5496 0%, #243366 62%, #141c3c 100%);
  border-color: #e6b44c;
}
.hub-table-title {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 10px; font-weight: 900; color: #4b2a12;
  background: linear-gradient(180deg, #ffe9a8 0%, #efc158 100%);
  border-bottom: 2.5px solid #b57b1e;
}
.hub-table-title-txt { font-size: .98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-moon-pill {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(180deg, #3b4f8c 0%, #222e58 100%);
  border: 2px solid #3a2415; color: #fff5d6; font-size: .82em; font-weight: 900;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.45), 0 2px 0 #2a1406;
  text-shadow: 0 1.5px 0 #121830;
}
.hub-moon-pill img { width: 16px; height: 16px; object-fit: contain; }
.hub-stage.hub-stage-diorama {
  position: relative; height: calc(188px * var(--s));
  overflow: hidden;
}
.hub-board {
  position: absolute; left: 50%; top: 52%; width: 40%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(55deg) rotateZ(45deg);
  transform-style: preserve-3d; opacity: 0.35; z-index: 0;
}
.hub-table-card.moon .hub-board { display: none; }
.hub-board-top {
  position: absolute; inset: 0; border-radius: 14px;
  background: repeating-linear-gradient(90deg, #f6efe0 0 18%, #e7f0dc 18% 20%), #f6efe0;
  border: 5px solid #e2b04a; box-shadow: 0 8px 0 #a8771f, 0 14px 20px #0008;
  display: flex; align-items: center; justify-content: center;
}
.hub-board-top span { transform: rotateZ(-45deg); font-size: 1.8em; }
.hub-vip-table-img {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 66%; max-height: 86%; object-fit: contain;
  pointer-events: none; z-index: 1;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}
.hub-moon-diorama {
  position: absolute; left: 50%; top: 50%;
  width: 112px; height: 92px;
  transform: translate(-50%, -54%);
  pointer-events: none; z-index: 1;
}
.hub-moon-ring {
  position: absolute; left: 50%; top: 58%; width: 96px; height: 56px;
  transform: translate(-50%, -50%); object-fit: contain; opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(255, 220, 110, 0.85));
}
.hub-moon-bunny {
  position: absolute; left: 46%; top: 44%; width: 64px; height: 64px;
  transform: translate(-50%, -50%); object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
}
.hub-moon-cake {
  position: absolute; left: 72%; top: 58%; width: 36px; height: 36px;
  transform: translate(-50%, -50%); object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}
.hub-moon-boss {
  position: absolute; left: 26%; top: 34%; width: 42px; height: 42px;
  transform: translate(-50%, -50%); object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
}
.hub-info .inline-curr-ico { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; }
.hub-chair {
  position: absolute; width: 45%;
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 4px 7px; border-radius: 14px;
  background: rgba(34, 12, 16, 0.84);
  border: 1.8px solid rgba(255, 216, 107, 0.85);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer; z-index: 2; box-sizing: border-box;
}
.hub-chair.empty {
  border-style: dashed;
  background: rgba(28, 10, 14, 0.78);
}
.hub-chair.tl { left: 2%; top: 6%; }
.hub-chair.tr { right: 2%; top: 6%; }
.hub-chair.bl { left: 2%; bottom: 6%; }
.hub-chair.br { right: 2%; bottom: 6%; }
.hub-chair-seat {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: linear-gradient(180deg, #ffd774, #cf8a19);
  border: 2px solid #7a4808;
  box-shadow: inset 0 -3px 0 #9e6312, 0 2px 5px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.hub-chair.empty .hub-chair-seat {
  box-shadow: inset 0 -3px 0 #9e6312, 0 0 0 2px #ffe9a8, 0 0 12px #ffd774;
  animation: hubGlow 1.6s ease-in-out infinite;
}
@keyframes hubGlow { 50% { filter: brightness(1.2); } }
.hub-chair-ava {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 40px; height: 40px; overflow: hidden;
  background: linear-gradient(180deg, #fff8e7, #f2d8a7);
  border-radius: 50%; border: 2px solid #ffd86b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.hub-chair-ava .hub-ava-body {
  position: absolute; left: 50%; top: 2px; width: 158%; height: 158%;
  transform: translateX(-50%); object-fit: contain; pointer-events: none;
}
.hub-chair-ava .hub-ava-hair {
  position: absolute; left: 50%; top: -2px; width: 92%; height: 92%;
  transform: translateX(-50%); object-fit: contain; pointer-events: none; z-index: 2;
}
.hub-chair-ava.bot { filter: saturate(.75) hue-rotate(155deg); border-color: #8ad8ff; }
.hub-bot-ico { position: absolute; right: 0; bottom: 0; font-size: 0.95em; z-index: 3; }
.hub-chair-badge {
  position: relative; z-index: 2; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  color: #fff6e3; text-shadow: 0 1px 2px #000; font-size: .78em; line-height: 1.15;
  text-align: left;
}
.hub-seat-head { font-size: .88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hub-seat-name { font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hub-seat-name em { font-style: normal; opacity: .8; font-size: .88em; }
.hub-sit-pill {
  display: inline-block; margin-top: 1px; padding: 1.5px 6px; border-radius: 999px;
  background: rgba(32, 16, 12, 0.9); border: 1.5px solid #ffd86b;
  color: #ffe9a8; font-weight: 800; font-size: .84em; white-space: nowrap;
}
.hub-chair-badge select, .hub-bot-select {
  margin-top: 1px; font: inherit; font-weight: 800; font-size: .82em; max-width: 100%;
  border-radius: 999px; border: 1.5px solid #3a2415;
  background: linear-gradient(180deg, #fffdf7, #edd8b0);
  color: #3a2415; text-shadow: none; padding: 1px 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
.hub-ready {
  display: inline-block; margin-top: 1px;
  font-style: normal; font-weight: 900; font-size: .8em;
  padding: 1px 6px; border-radius: 999px; border: 1.5px solid #1d5e23;
  background: #6e6e6e; text-shadow: 0 1px 1px rgba(0,0,0,0.4); color: #fff;
}
.hub-ready.on { background: linear-gradient(180deg, #6ee364, #2ca034); }
.hub-off { font-style: normal; font-size: .78em; color: #ffd0d0; }
.hub-table-tools {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 4px 8px; background: rgba(24, 8, 10, 0.45); border-top: 1px solid rgba(255, 224, 138, 0.22);
}
.hub-botpick { color: #fff6e3; font-weight: 800; font-size: .84em; }
.hub-botpick select {
  font: inherit; font-weight: 800; border-radius: 8px; border: 1.5px solid #c9932c;
  background: #fff6e3; color: #3a2415; padding: 1px 4px;
}
.hub-info {
  display: flex; justify-content: space-between; align-items: center; gap: 4px;
  padding: 5px 8px 6px; background: rgba(20, 8, 8, 0.72);
  border-top: 1.5px solid rgba(201, 147, 44, 0.45);
  color: #f6e7c8; font-size: .76em; text-align: center;
}
.hub-info b { color: #ffe08a; }

/* Live Open Tables list */
.hub-list {
  margin: 0 10px; padding: 6px 8px; border-radius: 14px;
  background: linear-gradient(180deg, #f3e2bf, #ead3a7);
  border: 2px solid #c49a5c; overflow-y: auto; max-height: calc(130px * var(--s)); flex-shrink: 1;
}
.hub-list-title { text-align: center; font-weight: 900; font-size: .92em; margin-bottom: 4px; color: #4b2a12; }
.hub-live {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n n" "a b" "m b";
  gap: 2px 8px; background: #fff9eb; border: 2px solid #d5b274; border-radius: 12px;
  padding: 5px 8px; margin-bottom: 5px; box-shadow: 0 2px 0 rgba(138, 90, 43, 0.2);
}
.hub-live-name { grid-area: n; font-weight: 900; font-size: .92em; }
.hub-live-meta { grid-area: m; font-size: .84em; font-weight: 700; color: #6b3f1f; }
.hub-live-avas { grid-area: a; display: flex; gap: 4px; }
.hub-live-avas span {
  width: 28px; height: 28px; border-radius: 8px; border: 2px solid #c9932c;
  background: #ffe7a6 no-repeat 50% 8% / 150% auto; font-size: .78em;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
.hub-live .hub-btn { grid-area: b; align-self: center; }
.hub-empty { text-align: center; padding: 6px; font-size: .88em; opacity: .78; }

/* 2 Chunky Bottom Candy Buttons */
.hub-foot { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; padding: 8px 10px 9px; }
.hub-btn {
  border: 2.5px solid #3a2415; border-radius: 15px; font: inherit; font-weight: 900;
  cursor: pointer; padding: 6px 10px; color: #3a2415;
  background: linear-gradient(180deg, #fff6e3, #e9d3a6);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.65), 0 3.5px 0 #3a2415;
}
.hub-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a2415; }
.hub-btn:disabled { opacity: .55; }
.hub-btn small { display: block; font-size: .76em; font-weight: 800; opacity: .92; }
.hub-btn.big { font-size: 1.05em; padding: 9px 8px; border-radius: 16px; }
.hub-btn.blue {
  color: #fff;
  background: linear-gradient(180deg, #7be0ff 0%, #2b8be6 62%, #1b69bd 100%);
  text-shadow: 0 1.5px 0 #0d3b75;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.7), inset 0 -3px 0 #144d8f, 0 4px 0 #3a2415;
}
.hub-btn.gold {
  color: #3a2415;
  background: linear-gradient(180deg, #ffec99 0%, #f7b633 60%, #df8b16 100%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), inset 0 -3px 0 #b56b10, 0 4px 0 #3a2415;
}
.hub-btn.green {
  color: #fff;
  background: linear-gradient(180deg, #76e85c 0%, #2ea836 100%);
  font-size: .86em; text-shadow: 0 1.5px 0 #18571c;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.65), 0 3px 0 #3a2415;
}
.hub-btn.invite { font-size: .8em; padding: 3px 8px; border-radius: 10px; background: #fff6e3; }
.hub-btn.plain { font-size: .84em; }

/* =============================================================== Screen 10 — Monopoly Match HUD (Mockup 10) */
.mono-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.mono-hud { position: absolute; inset: 0; pointer-events: none; font-size: calc(13px * var(--s)); }
.mono-hud button { pointer-events: auto; font-family: inherit; cursor: pointer; }
.mono-top { position: absolute; top: calc(var(--st) + 6px); left: 6px; right: 6px; z-index: 10; isolation: isolate; }
.mono-round { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 5px; }
.mono-round-txt {
  background: linear-gradient(180deg, #1f64a8, #123d6b); color: #fff; font-weight: 900;
  padding: 4px 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35); text-shadow: 0 1.5px 0 #092240;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.mono-round-txt.is-mid {
  background: linear-gradient(180deg, #e89b1c, #9e5a08);
  border-color: #ffe891;
  box-shadow: 0 3px 10px rgba(232, 155, 28, 0.45);
  text-shadow: 0 1.5px 0 #4d2900;
}
.mono-round-txt.is-overdrive {
  background: linear-gradient(180deg, #ff5436, #9e1b12);
  border-color: #ffd36b;
  box-shadow: 0 0 14px rgba(255, 84, 54, 0.65), 0 3px 8px rgba(0,0,0,0.4);
  text-shadow: 0 1.5px 0 #4a0804;
}
.mono-round-txt.is-chaos {
  background: linear-gradient(180deg, #b83dff, #5a1496);
  border-color: #ff94e8;
  box-shadow: 0 0 14px rgba(184, 61, 255, 0.6), 0 3px 8px rgba(0,0,0,0.4);
  text-shadow: 0 1.5px 0 #2d064f;
}
.mono-mini {
  width: 30px; height: 30px; border-radius: 10px; border: 2px solid #fff;
  background: rgba(19, 61, 107, 0.85); color: #fff; font-weight: 900;
}

/* Top 4-Player Cards (.mono-pcard) matching Mockup 10 */
.mono-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mono-card, .mono-pcard {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--seat) 28%, #ffffff) 0%, #ffffff 48%, #fffaf0 100%);
  border: 3px solid var(--seat); border-radius: 16px;
  padding: 6px 4px 5px; text-align: center;
  box-shadow: 0 3px 0 #3a2415, 0 6px 12px rgba(0, 0, 0, 0.28);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column; align-items: center;
}
.mono-card.turn {
  transform: translateY(2px) scale(1.04);
  box-shadow: 0 0 0 3px #fff, 0 4px 0 #3a2415, 0 0 18px var(--seat);
}
.mono-card.bankrupt { filter: grayscale(1); opacity: .55; }
.mono-card.is-frozen {
  background: linear-gradient(180deg, #bfefff 0%, #e8f9ff 52%, #d2f2ff 100%);
  border-color: #47cfff;
  box-shadow: 0 0 0 2px #e6fbff, 0 3px 0 #1b5c7d, 0 0 14px rgba(71, 207, 255, 0.65);
}
.mono-card.is-frozen .mono-card-ava {
  border-color: #47cfff;
  box-shadow: inset 0 0 10px rgba(71, 207, 255, 0.75), 0 0 8px rgba(127, 227, 255, 0.8);
}
.mono-card.is-reversed {
  border-color: #c864ff;
  box-shadow: 0 0 0 2px #f5ddff, 0 3px 0 #46156b, 0 0 14px rgba(200, 100, 255, 0.55);
}
.mono-card.is-slowed,
.mono-card.is-fixed {
  border-color: #4ad8ff;
  box-shadow: 0 0 0 2px #dffaff, 0 3px 0 #164e63, 0 0 12px rgba(74, 216, 255, 0.5);
}
.mono-card.is-shielded .mono-card-ava {
  box-shadow: 0 0 0 2.5px #ffe27a, 0 0 12px rgba(255, 211, 77, 0.85);
}
.mono-card-tag {
  position: absolute; left: -2px; top: -2px;
  background: var(--seat); color: #fff; font-weight: 900; font-size: .78em;
  padding: 1.5px 7px; border-radius: 12px 0 10px 0;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.45); z-index: 3;
}
.mono-card-ava-wrap {
  position: relative; width: calc(46px * var(--s)); height: calc(46px * var(--s));
  margin: 2px auto 2px; display: flex; align-items: center; justify-content: center;
}
.mono-card-ava {
  width: 100%; height: 100%; border-radius: 50%;
  border: 3px solid var(--seat);
  background: #fff8ec no-repeat 50% 8% / 162% auto;
  box-shadow: inset 0 0 0 1.5px #fff, 0 2px 6px rgba(0,0,0,0.22);
}
.mono-card.ult-ready .mono-card-ava {
  box-shadow: 0 0 0 2.5px #fff, 0 0 14px #ff5ef0;
}
.mono-card-banner {
  position: absolute; left: 50%; top: -5px; transform: translateX(-50%);
  padding: 1px 6px; border-radius: 999px;
  font-size: .62em; font-weight: 900; letter-spacing: .2px; line-height: 1.25;
  white-space: nowrap; color: #fff;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.45);
  z-index: 4; pointer-events: none;
}
.mono-card-banner[data-kind="frozen"] {
  background: linear-gradient(180deg, #1b88c9, #0d4b78);
  border-color: #aef0ff;
}
.mono-card-banner[data-kind="reverse"] {
  background: linear-gradient(180deg, #9d38e6, #521485);
  border-color: #ecc4ff;
}
.mono-card-banner[data-kind="slow"],
.mono-card-banner[data-kind="fixed"] {
  background: linear-gradient(180deg, #1a7a99, #0e4259);
  border-color: #9ef2ff;
}
.mono-card-pet-pip {
  position: absolute; left: -4px; bottom: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, #9d5eff, #5b2bc4);
  border: 1.5px solid #fff; font-size: .68em; line-height: 15px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4); z-index: 2;
}
.mono-card-status {
  position: absolute; right: -5px; bottom: -3px;
  background: rgba(255, 255, 255, 0.92); border-radius: 999px;
  padding: 0 3px; font-size: .68em; line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 2;
}
.mono-card-status:empty { display: none; }
.mono-card-name {
  font-weight: 900; font-size: .88em; color: #2b180a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
  line-height: 1.15;
}
.mono-card-name i { font-weight: 700; opacity: .68; font-style: normal; font-size: .82em; }
.mono-card-row {
  font-size: .84em; white-space: nowrap; line-height: 1.18; color: #3a2415;
}
.mono-card-row b { font-size: 1.04em; font-weight: 900; }
.mono-card-ult { width: 92%; height: 4px; border-radius: 3px; background: #0002; overflow: hidden; margin-top: 2px; }
.mono-card-ult span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff5ef0, #ffd34d, #5ef0ff); transition: width .4s; }
.mono-card-pet-ult { width: 92%; height: 3px; border-radius: 3px; background: #2b164433; overflow: hidden; margin-top: 1.5px; position: relative; }
.mono-card-pet-ult span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9d5eff, #5ef2ff, #ffe07a); transition: width .4s; }
.mono-card.gain { animation: monoGain .5s; }
.mono-card.loss { animation: monoLoss .5s; }
@keyframes monoGain { 40% { box-shadow: 0 0 0 3px #7dffa0, 0 0 18px #7dffa0; } }
@keyframes monoLoss { 40% { box-shadow: 0 0 0 3px #ff7a7a, 0 0 18px #ff7a7a; transform: translateX(-2px); } 60% { transform: translateX(2px); } }

.mono-ticker {
  position: absolute; left: 50%; top: calc(var(--st) + 136px * var(--s)); transform: translateX(-50%);
  max-width: 92%; text-align: center; background: rgba(19, 61, 107, 0.92); color: #fff;
  font-weight: 800; padding: 6px 14px; border-radius: 14px; border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35); z-index: 18; pointer-events: none;
}
.mono-ticker.show { animation: monoPop .35s ease-out; }
@keyframes monoPop { from { transform: translate(-50%, -8px) scale(.9); opacity: 0; } }
.mono-floats { position: absolute; inset: 0; overflow: hidden; z-index: 14; pointer-events: none; }
.mono-float { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.15em; white-space: nowrap; text-shadow: 0 2px 0 #0008, 0 0 6px #0006; animation: monoFloat 1.4s ease-out forwards; }
.mono-float.big { font-size: 1.6em; }
@keyframes monoFloat { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }

/* Bottom Thumb Controls (.mono-controls) matching Mockup 10 */
.mono-bottom, .mono-controls {
  position: absolute; left: 0; right: 0; bottom: calc(var(--sb) + 8px);
  height: calc(154px * var(--s));
  z-index: 10; isolation: isolate;
  transition: opacity .16s ease;
}
.mono-hud:has(.mono-sheet:not([hidden])) .mono-controls,
.mono-hud:has(.mono-podium:not([hidden])) .mono-controls {
  opacity: 0; pointer-events: none;
}
.mono-turn-hint {
  position: absolute; left: 50%; bottom: calc(134px * var(--s)); transform: translateX(-50%);
  color: #fff; font-weight: 900; text-shadow: 0 2px 0 #0008; white-space: nowrap;
}
.mono-turn-hint.has-hex-alert {
  padding: 3px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(84, 20, 122, 0.92), rgba(44, 10, 68, 0.95));
  border: 2px solid #e2a4ff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 12px rgba(200, 100, 255, 0.5);
  font-size: .92em;
}
.mono-turn-hint.has-hex-alert[data-hex-kind="frozen"],
.mono-turn-hint.has-hex-alert[data-hex-kind="slow"] {
  background: linear-gradient(180deg, rgba(16, 86, 130, 0.92), rgba(10, 44, 74, 0.95));
  border-color: #8eeeff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 12px rgba(74, 216, 255, 0.5);
}
.mono-timer { color: #ffe07a; }

/* [🎲 1d6 | ⚡ 2d6] Dark Translucent Pill above ROLL */
.mono-dice-toggle {
  position: absolute; left: 50%; bottom: calc(92px * var(--s)); transform: translateX(-50%);
  display: inline-flex; align-items: center;
  background: rgba(24, 34, 48, 0.85); border-radius: 999px;
  padding: 3px 6px; gap: 2px; border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.38); pointer-events: auto;
}
.mono-dice-sep { color: rgba(255,255,255,0.45); font-weight: 900; font-size: .9em; padding: 0 2px; }
.mono-dice-toggle button {
  border: none; border-radius: 999px; padding: 4px 10px;
  font-weight: 900; font-size: .92em; color: #fff; background: transparent;
}
.mono-dice-toggle button.on {
  background: linear-gradient(180deg, #ffe794, #f4ab25);
  color: #3a2415; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}
.mono-dice-toggle button:disabled { opacity: .4; }

/* Winged Golden 🎲 ROLL Button */
.mono-roll {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: calc(166px * var(--s)); height: calc(70px * var(--s));
  border-radius: 38px; border: 3.5px solid #5c3408;
  background: linear-gradient(180deg, #ffefaa 0%, #f8be36 52%, #df8810 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.82), inset 0 -4px 0 #b8680a, 0 5px 0 #4a2805, 0 8px 18px rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #fff; font-weight: 900; font-size: 1.72em; letter-spacing: 0.8px;
  -webkit-text-stroke: 2.5px #4a2805; paint-order: stroke fill;
  text-shadow: 0 3px 0 #4a2805;
}
.mono-roll-winged-bg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 130%; height: 126%; object-fit: contain; pointer-events: none; z-index: -1;
  opacity: 0.95;
}
.mono-roll:disabled { filter: grayscale(.65) brightness(.92); }
.mono-roll.pulse { animation: monoPulse 1.2s ease-in-out infinite; }
@keyframes monoPulse { 50% { transform: translateX(-50%) scale(1.05); } }
.mono-roll:active { transform: translateX(-50%) translateY(4px); box-shadow: 0 2px 0 #4a2805; }
.mono-roll-face {
  background: linear-gradient(180deg, #ffffff, #f3e5c8);
  border: 2px solid #6b3f12; border-radius: 11px; padding: 2px 5px;
  font-size: .76em; -webkit-text-stroke: 0; text-shadow: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.mono-roll .wing {
  position: absolute; top: 4px; width: 38px; height: 52px;
  background: linear-gradient(180deg, #fff8d8, #f4c44e 60%, #cf8919);
  border: 2.5px solid #5c3408; border-radius: 65% 12% 65% 42%; z-index: -2;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), 0 4px 8px rgba(0,0,0,0.35);
}
.mono-roll .wing.l { left: -24px; transform: rotate(-18deg); }
.mono-roll .wing.r { right: -24px; transform: scaleX(-1) rotate(-18deg); }

/* Pet Soul-Link Orb (Bottom-Left) & Rainbow Crystal ULTIMATE + Overview (Bottom-Right) */
.mono-left-side {
  position: absolute; left: 6px; bottom: 8px; width: calc(82px * var(--s));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mono-pet-ult {
  border: none; background: none; display: flex; flex-direction: column; align-items: center;
  color: #fff; font-weight: 900; text-shadow: 0 2px 0 #0008; width: 100%; padding: 0;
}
.mono-pet-ult-orb {
  position: relative; width: calc(52px * var(--s)); height: calc(52px * var(--s));
  border-radius: 50%; overflow: hidden; border: 3px solid #e6ccff;
  background: radial-gradient(circle at 35% 30%, #4b2d7f, #22133b);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
}
.mono-pet-ult-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(180deg, #5ef2ff, #9d5eff, #ff7ae0);
  transition: height .4s; opacity: 0.88;
}
.mono-pet-ult-ico { position: relative; font-size: 1.35em; z-index: 1; }
.mono-pet-ult-pct {
  position: absolute; bottom: 2px; left: 0; right: 0;
  font-size: .64em; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px #000; z-index: 2;
}
.mono-pet-ult.ready .mono-pet-ult-orb { box-shadow: 0 0 0 3px #fff, 0 0 18px #5ef2ff; }
.mono-pet-ult.ready .mono-pet-ult-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.7) 0%, rgba(94,242,255,0.5) 60%, transparent 85%);
  animation: monoOrbGlow 1.2s ease-in-out infinite;
}
.mono-pet-ult.unlinked { opacity: 0.65; }

.mono-side {
  position: absolute; right: 6px; bottom: 8px; width: calc(84px * var(--s));
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mono-ult {
  border: none; background: none; display: flex; flex-direction: column; align-items: center;
  color: #fff; font-weight: 900; width: 100%; padding: 0;
  -webkit-text-stroke: 1.8px #2a1808; paint-order: stroke fill;
  text-shadow: 0 2px 0 #2a1808;
}
.mono-ult-orb {
  position: relative; width: calc(58px * var(--s)); height: calc(58px * var(--s));
  border-radius: 50%; overflow: hidden; border: 3px solid #ffffff;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #ff9be8 28%, #ffe36e 56%, #5ed6ff 85%, #8a5eff 100%);
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.85), 0 4px 12px rgba(0, 0, 0, 0.48);
  display: flex; align-items: center; justify-content: center;
}
.mono-ult-rainbow-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; z-index: 0; opacity: 0.92;
}
.mono-ult-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: conic-gradient(from 0deg, #ff5e8a, #ffd34d, #6dff9a, #5ec8ff, #b26bff, #ff5e8a);
  transition: height .4s; opacity: 0.85; z-index: 1;
}
.mono-ult-ico {
  position: relative; font-size: 1.65em; z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45));
}
.mono-ult-pct {
  position: absolute; bottom: 2px; left: 0; right: 0;
  font-size: .66em; font-weight: 900; color: #fff;
  -webkit-text-stroke: 1.2px #1f1208; text-shadow: 0 1px 2px #000; z-index: 3;
}
.mono-ult-txt {
  font-size: .74em; letter-spacing: .2px; margin-top: 2px;
  white-space: nowrap; line-height: 1.1;
}
.mono-ult-sub {
  display: none;
}
.mono-ult.ready .mono-ult-orb { box-shadow: 0 0 0 3px #fff, 0 0 24px #ff9bf0; }
.mono-ult.ready .mono-ult-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.7) 0%, rgba(255,155,240,0.5) 60%, transparent 85%);
  animation: monoOrbGlow 1.2s ease-in-out infinite;
}
@keyframes monoOrbGlow {
  0%, 100% { opacity: 0.25; transform: scale(0.92); }
  50% { opacity: 0.95; transform: scale(1.0); }
}
.mono-cam {
  border: 2px solid #173d6e; border-radius: 10px;
  background: linear-gradient(180deg, #63c5ff 0%, #1e74d4 100%);
  color: #fff; font-weight: 900; font-size: .76em; padding: 4px 8px;
  white-space: nowrap;
  text-shadow: 0 1.5px 0 #0c3566;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.65), 0 2.5px 0 #0c3566, 0 4px 8px rgba(0,0,0,0.3);
}

/* decision bottom sheet */
.mono-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 26; isolation: isolate; padding: 10px 10px calc(var(--sb) + 12px); pointer-events: auto; background: linear-gradient(#0000, #0007 30%); }
.mono-sheet-card { position: relative; z-index: 2; background: linear-gradient(#fff6e3, #fbecc8); border: 4px solid #8a5a2b; border-radius: 20px; padding: 10px; box-shadow: 0 -4px 20px #0006; animation: monoSheet .25s ease-out; }
@keyframes monoSheet { from { transform: translateY(40px); opacity: 0; } }
.mono-tilecard { border-radius: 14px; overflow: hidden; border: 3px solid var(--zone); background: #fff; text-align: center; margin-bottom: 6px; }
.mono-tilecard-strip { background: var(--zone); color: #fff; font-weight: 900; padding: 3px; text-shadow: 0 1px 0 #0006; }
.mono-tilecard-name { font-size: 1.4em; font-weight: 900; padding: 4px 0 0; }
.mono-tilecard-price { padding-bottom: 4px; font-weight: 800; color: #7a5a10; }
.mono-rents { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; padding: 4px 10px; background: #fff8; border-radius: 10px; font-size: .92em; }
.mono-rents .cur { color: #c03a2b; font-weight: 900; }
.mono-note { text-align: center; margin: 4px 0; } .mono-note.big { font-size: 1.15em; font-weight: 900; }
.mono-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.mono-btn {
  border: 2.5px solid #3a2415; border-radius: 15px; font-weight: 900; padding: 9px 14px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.65), 0 3.5px 0 #3a2415;
  color: #3a2415; background: linear-gradient(180deg, #fff6e3, #e9d3a6); font-size: 1em;
}
.mono-btn:disabled { opacity: .45; }
.mono-btn.gold {
  background: linear-gradient(180deg, #ffec99 0%, #f6b532 60%, #de8915 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), inset 0 -3px 0 #b3680e, 0 4px 0 #3a2415;
  flex: 1 1 55%;
}
.mono-btn.red { color: #fff; background: linear-gradient(#ff7a6a, #c9302c); flex: 1 1 55%; }
.mono-btn.card { flex: 1 1 100%; background: linear-gradient(#fffaf0, #f3e2bf); }
.mono-btn.plain { flex: 0 0 auto; }
.mono-btn.wood {
  color: #fff8e7; text-shadow: 0 1.5px 0 #2a1406;
  background: linear-gradient(180deg, #b87c40 0%, #7d4b22 65%, #5c3415 100%);
  box-shadow: inset 0 2px 0 rgba(255,232,185,0.45), inset 0 -3px 0 #3d210b, 0 4px 0 #2a1406;
}
.mono-btn small { display: block; font-size: .74em; font-weight: 800; }
.mono-warp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-height: 32vh; overflow-y: auto; width: 100%; }
.mono-btn.chip { padding: 6px 4px; font-size: .85em; box-shadow: 0 2px 0 #3a2415; }

/* =============================================================== Screen 11 — Cut-in + 4-Pillar Victory Podium (Mockup 11) */
.mono-cutin { position: absolute; left: 0; right: 0; top: calc(var(--st) + 0px); pointer-events: none; z-index: 28; isolation: isolate; }
.mono-cutin-band { position: relative; margin-top: 4px; padding: 8px 10px 10px; text-align: center; color: #fff; overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 60%, #ffcf3a 0 6deg, #ffb000 6deg 12deg); border-top: 4px solid #3a2415; border-bottom: 4px solid #3a2415; }
.mono-cutin-band.couple { background: repeating-conic-gradient(from 0deg at 50% 60%, #ffd1f0 0 6deg, #ffb3dd 6deg 12deg); }
.mono-cutin-band.pet-ult { background: repeating-conic-gradient(from 0deg at 50% 60%, #8f5eff 0 6deg, #4ac8ff 6deg 12deg); }
.mono-cutin-title { display: inline-block; background: #3a2415; padding: 3px 12px; border-radius: 10px; font-weight: 900; color: #ffe08a; letter-spacing: .5px; }
.mono-cutin-faces { display: flex; justify-content: center; gap: 10px; margin: 4px 0; }
.mono-cutin-face { width: 92px; height: 92px; border-radius: 50%; border: 4px solid #fff; background: #fff no-repeat 50% 6% / 150% auto; box-shadow: 0 4px 14px #0007; }
.mono-cutin-name { font-size: 1.7em; font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 3px 0 #3a2415, 0 0 10px #ff7a00; line-height: 1.1; }
.mono-cutin-name .strike { color: #ffef9a; font-size: 1.15em; }
.mono-cutin-who { font-weight: 900; color: #3a2415; }
.mono-cutin.play .mono-cutin-band { animation: monoCut 1.25s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes monoCut { 0% { transform: translateX(110%) skewX(-12deg); } 18% { transform: translateX(0) skewX(-6deg); } 82% { transform: translateX(0) skewX(-6deg); opacity: 1; } 100% { transform: translateX(-110%) skewX(-12deg); opacity: .6; } }

.mono-layer:has(.mono-podium:not([hidden])) .mono-cards,
.mono-layer:has(.mono-podium:not([hidden])) .mono-controls,
.mono-layer:has(.mono-podium:not([hidden])) .mono-ticker {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mono-podium {
  position: absolute; inset: 0; pointer-events: auto; z-index: 30; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
  padding: calc(var(--st) + 44px) 10px calc(var(--sb) + 10px);
  background: linear-gradient(180deg, rgba(14, 24, 48, 0.58) 0%, rgba(14, 22, 42, 0.82) 38%, rgba(10, 16, 30, 0.95) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
  animation: monoFade .4s;
}
@keyframes monoFade { from { opacity: 0; } }
.mono-finisher {
  align-self: stretch; text-align: center; padding: 6px 8px; border-radius: 12px;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #ffcf3a 0 6deg, #ff9d00 6deg 12deg);
  border: 3px solid #3a2415; color: #3a2415; font-weight: 900;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.mono-finisher b { font-size: 1.65em; font-style: italic; color: #fff; -webkit-text-stroke: 2px #3a2415; paint-order: stroke fill; text-shadow: 0 3px 0 #3a2415; }
.mono-podium-title {
  font-size: 1.85em; font-weight: 900; color: #ffe885;
  -webkit-text-stroke: 2.5px #3a2415; paint-order: stroke fill;
  text-shadow: 0 3px 0 #3a2415, 0 0 16px #ffcf3a; line-height: 1.05;
}
.mono-podium-reason { color: #fff; font-weight: 800; font-size: .9em; text-shadow: 0 1.5px 2px #000; text-align: center; }

/* 4-Pillar 2.5D Podium (2nd left, 1st tall center, 3rd & 4th right) */
.mono-pillars {
  display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  width: 100%; margin-top: 2px;
}
.mono-pillar { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.mono-pillar.first { flex: 1.22; }
.mono-pillar.empty { visibility: hidden; }
.mono-pillar-stage {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: -8px; z-index: 2;
}
.mono-pillar-ava {
  width: calc(70px * var(--s)); height: calc(70px * var(--s)); border-radius: 50%;
  border: 3px solid var(--seat);
  background: #fff9eb no-repeat 50% 6% / 155% auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
.mono-pillar.first .mono-pillar-ava {
  width: calc(88px * var(--s)); height: calc(88px * var(--s));
  border: 3.5px solid #ffd84d;
  box-shadow: 0 0 0 3px #fff, 0 0 22px #ffd34d;
}
.mono-pillar-pet {
  position: absolute; right: -10px; bottom: 0;
  width: calc(34px * var(--s)); height: calc(34px * var(--s));
  object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}
.mono-pillar-trophy {
  position: absolute; left: -8px; top: -4px; font-size: 1.45em;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.mono-pillar-block {
  position: relative; width: 100%; border-radius: 14px 14px 6px 6px;
  text-align: center; padding: 8px 3px 6px; color: #3a2415;
  border: 3px solid #3a2415;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.65), 0 6px 14px rgba(0,0,0,0.4);
}
.mono-pillar.first .mono-pillar-block {
  height: calc(122px * var(--s));
  background: linear-gradient(180deg, #fff3b0 0%, #f4b83a 60%, #d48817 100%);
}
.mono-pillar.second .mono-pillar-block {
  height: calc(96px * var(--s));
  background: linear-gradient(180deg, #ffffff 0%, #cfd8e3 60%, #9aa7b8 100%);
}
.mono-pillar.third .mono-pillar-block {
  height: calc(78px * var(--s));
  background: linear-gradient(180deg, #ffe5c4 0%, #d49356 60%, #a8682f 100%);
}
.mono-pillar.fourth .mono-pillar-block {
  height: calc(64px * var(--s));
  background: linear-gradient(180deg, #f5e5cf 0%, #be966c 60%, #8f6943 100%);
}
.mono-pillar-rank {
  font-size: 1.65em; font-weight: 900; line-height: 1;
  color: #fff; -webkit-text-stroke: 2px #3a2415; paint-order: stroke fill;
  text-shadow: 0 2px 0 #3a2415;
}
.mono-pillar-name { font-weight: 900; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mono-pillar-nw { font-size: .8em; font-weight: 800; opacity: .9; }
.mono-pillar-ribbon {
  margin-top: 3px; padding: 2px 6px; border-radius: 6px;
  background: linear-gradient(90deg, #4b2a12, #6b3f1f, #4b2a12);
  border: 1.5px solid #ffd86b; color: #ffe899;
  font-size: .74em; font-weight: 900; letter-spacing: .3px;
}

/* Ornate Parchment Moments of the Match Strip */
.mono-moments {
  align-self: stretch;
  background: linear-gradient(180deg, #fff9eb 0%, #f6e4be 100%);
  border: 2.5px solid #8a5624; border-radius: 14px;
  padding: 6px 8px;
  box-shadow: inset 0 0 0 1.5px #e6be74, 0 4px 12px rgba(0, 0, 0, 0.4);
}
.mono-moments-title {
  text-align: center; font-weight: 900; font-size: .84em; color: #4b2a12;
  margin-bottom: 4px; letter-spacing: .4px; text-transform: uppercase;
}
.mono-moments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px;
}
.mono-moment-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1.5px solid #dfc18b;
  border-radius: 10px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.mono-moment-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 2px;
  width: 100%;
}
.mono-moment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(44px * var(--s));
  height: calc(44px * var(--s));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.mono-moment-icon .mono-moment-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mono-moment-icon .mono-moment-emoji {
  font-size: calc(24px * var(--s));
  line-height: 1;
}
.mono-moment-label {
  font-size: .72em;
  font-weight: 900;
  color: #5c3412;
  white-space: nowrap;
}
.mono-moment-val {
  font-size: .82em;
  font-weight: 900;
  color: #3a2415;
  line-height: 1.1;
}
.mono-moment-sub {
  font-size: .68em;
  font-weight: 700;
  color: #7a491c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Painted moment icon hooks (replaces emoji via background-image when file exists) */
.mono-moment-icon[data-icon="bigRent"] { --moment-url: url('/assets/ui/moments/bigRent.png'); }
.mono-moment-icon[data-icon="takeover"] { --moment-url: url('/assets/ui/moments/takeover.png'); }
.mono-moment-icon[data-icon="landlord"] { --moment-url: url('/assets/ui/moments/landlord.png'); }
.mono-moment-icon[data-icon="ultMaster"] { --moment-url: url('/assets/ui/moments/ultMaster.png'); }
.mono-moment-icon[data-icon="underdog"] { --moment-url: url('/assets/ui/moments/underdog.png'); }
.mono-moment-icon[data-icon="dodge"] { --moment-url: url('/assets/ui/moments/dodge.png'); }

/* Ornate Gold-Filigree Victory Rewards Parchment Card */
.mono-rewards {
  align-self: stretch;
  background: linear-gradient(180deg, #fff9eb 0%, #f6e4be 100%);
  border: 3.5px solid #8a5624; border-radius: 18px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 2.5px #e6be74, 0 6px 18px rgba(0, 0, 0, 0.5);
}
.mono-rewards-title {
  text-align: center; font-weight: 900; font-size: 1.02em; color: #4b2a12;
  margin-bottom: 5px; letter-spacing: .3px;
}
.mono-rewards-title i { display: block; font-size: .74em; font-weight: 800; color: #7a491c; font-style: normal; }
.mono-rewards-body {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
}
.mono-rewards-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mono-reward-row {
  background: rgba(255, 255, 255, 0.72); border: 1.5px solid #dfc18b;
  border-radius: 10px; padding: 5px 8px; font-size: .94em; font-weight: 800;
}
.mono-reward-row i { font-size: .82em; opacity: .8; font-style: normal; }
.mono-rewards-chest {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(84px * var(--s)); padding: 6px 4px; border-radius: 14px;
  background: radial-gradient(circle at 50% 42%, #fff8d6 0%, #f3d285 100%);
  border: 2px solid #c9932c; text-align: center;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(0,0,0,0.18);
}
.mono-rewards-chest.won {
  border-color: #f0a018;
  box-shadow: 0 0 0 2px #ffe07a, 0 0 16px rgba(255, 208, 74, 0.65);
}
.mono-rewards-chest img {
  width: calc(54px * var(--s)); height: calc(54px * var(--s));
  object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.28));
}
.mono-rewards-chest span {
  font-size: .72em; font-weight: 900; color: #5c3412; margin-top: 2px; line-height: 1.1;
}
.mono-podium-actions { align-self: stretch; display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; }

/* =============================================================== Dopamine Patch: Pet Auto/Manual, Combo Cut-in, Chaos & Podium EXP */
.mono-pet-auto-chip { border: 2px solid #fff; border-radius: 10px; padding: 2px 8px; font-size: .72em; font-weight: 900; letter-spacing: .4px; color: #fff; background: linear-gradient(#69d36d, #2f9a3c); box-shadow: 0 2px 5px #0006; margin-bottom: -2px; z-index: 3; }
.mono-pet-auto-chip.manual { background: linear-gradient(#7b5ef2, #4a2fb8); color: #ffe89e; border-color: #ffe89e; }
.mono-pet-ult.armed .mono-pet-ult-orb { box-shadow: 0 0 0 3px #ffe07a, 0 0 20px #ff5ef0; border-color: #ffe07a; }

.hub-chaos-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; font-size: .78em; color: #fff; background: linear-gradient(90deg, #ff4d6d, #9d4edd); text-shadow: 0 1px 2px #0008; }
.hub-table-card.chaos { border-color: #ff6bd6; box-shadow: inset 0 0 34px #590d8288, 0 0 14px #ff6bd655; }
.hub-btn.chaos-on { color: #fff; font-size: .78em; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #ff4d6d, #9d4edd); border-color: #ffe07a; text-shadow: 0 1px 2px #0008; }
.hub-btn.chaos-off { font-size: .78em; padding: 3px 8px; border-radius: 999px; opacity: .92; }

.mono-cutin-band.combo-split { position: relative; min-height: calc(126px * var(--s)); display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(128deg, #ff9f1c 0 48%, #fff 48% 52%, #5ef2ff 52% 100%); border-top: 4px solid #3a2415; border-bottom: 4px solid #3a2415; }
.mono-cutin-band.combo-split.chaos { background: linear-gradient(128deg, #ff4d6d 0 48%, #ffe07a 48% 52%, #9d4edd 52% 100%); }
.mono-combo-half { position: absolute; top: 8px; z-index: 1; }
.mono-combo-half.owner { left: 14px; top: 6px; }
.mono-combo-half.pet { right: 14px; bottom: 6px; top: auto; }
.mono-combo-half .mono-cutin-face { width: calc(78px * var(--s)); height: calc(78px * var(--s)); }
.mono-combo-ribbon { position: relative; z-index: 2; background: linear-gradient(90deg, #3a2415, #5b1865, #3a2415); color: #ffe07a; border: 2px solid #fff;
  padding: 3px 14px; border-radius: 999px; font-weight: 900; font-size: .92em; letter-spacing: .6px; transform: rotate(-5deg); box-shadow: 0 3px 10px #0008; margin-bottom: 4px; }
.mono-cutin-band.combo-split .mono-cutin-name,
.mono-cutin-band.combo-split .mono-cutin-who { position: relative; z-index: 2; }

.mono-fly-ico { position: absolute; pointer-events: none; font-size: 1.25em; z-index: 20; animation: monoFlyIco .55s cubic-bezier(.2,.85,.35,1) forwards; }
@keyframes monoFlyIco { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.85); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.15); } }

.mono-confetti { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; z-index: 25; animation: monoConfetti 2.2s ease-in forwards; }
@keyframes monoConfetti { 0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); } 100% { opacity: 0; transform: translate3d(var(--drift, 0px), 92vh, 0) rotate(540deg); } }

.mono-hud.mono-tension::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px #ff2a55; opacity: 0.4; animation: monoTensionPulse 1.4s ease-in-out infinite; }
@keyframes monoTensionPulse { 50% { opacity: 0.72; } }
.mono-hud.mono-hb { animation: monoHb .32s ease-out; }
@keyframes monoHb { 35% { transform: scale(1.012); } }

.mono-exp-row { background: linear-gradient(90deg, #e8f7ff, #f6eaff); border: 1.5px solid #9ec5fe; }
.mono-exp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.mono-lvup-badge { display: inline-block; background: linear-gradient(90deg, #ff9f1c, #ff4d6d); color: #fff; font-weight: 900; font-size: .8em; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px #ff4d6d66; animation: monoLvUp .6s ease-out infinite alternate; }
@keyframes monoLvUp { to { transform: scale(1.06); filter: brightness(1.15); } }
.mono-exp-bar { display: inline-block; width: 64px; height: 8px; vertical-align: middle; margin: 0 4px; border-radius: 999px; background: #1e293b22; overflow: hidden; }
.mono-exp-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #38bdf8, #a855f7, #f59e0b); border-radius: 999px; transition: width .85s cubic-bezier(.2,.9,.2,1); }

/* =============================================================== Match Intro & 100% Ready Theme Reveal Banner */
.mono-intro {
  position: absolute; inset: 0; z-index: 32;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 42%, rgba(20, 14, 36, 0.45) 0%, rgba(10, 8, 20, 0.78) 100%);
  opacity: 0; pointer-events: auto; cursor: pointer;
  transition: opacity .28s cubic-bezier(.22, 1, .36, 1);
}
.mono-intro[hidden] { display: none !important; }
.mono-intro.open { opacity: 1; }
.mono-intro.closing {
  opacity: 0; pointer-events: none;
  transition: opacity .32s cubic-bezier(.4, 0, .2, 1);
}
.mono-intro-card {
  width: min(94vw, calc(456px * var(--s)));
  background: linear-gradient(180deg, #fffdf7 0%, #f9ebd2 100%);
  border: 3.5px solid #3a2415; border-radius: 22px;
  padding: calc(12px * var(--s)) calc(14px * var(--s));
  color: #3a2415;
  box-shadow: inset 0 0 0 2.5px #f0c471, 0 14px 36px rgba(14, 8, 24, 0.55), 0 0 28px color-mix(in srgb, var(--theme-accent, #48b8e8) 45%, transparent);
  display: flex; flex-direction: column; gap: calc(9px * var(--s));
  transform: translateY(10px) scale(0.95);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.mono-intro.open .mono-intro-card { transform: translateY(0) scale(1); }
.mono-intro.closing .mono-intro-card { transform: translateY(-14px) scale(0.975); }
.mono-intro-card.chaos {
  border-color: #4b1d52;
  box-shadow: inset 0 0 0 2.5px #ff9de2, 0 14px 36px rgba(34, 8, 48, 0.65), 0 0 30px rgba(255, 90, 196, 0.5);
}
.mono-intro-pill {
  align-self: center;
  background: linear-gradient(90deg, #3a2415, #5e381d, #3a2415);
  border: 1.5px solid #ffd86b; color: #ffe899;
  font-size: .74em; font-weight: 900; letter-spacing: .7px;
  padding: 3px 12px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}
.mono-intro-card.chaos .mono-intro-pill {
  background: linear-gradient(90deg, #ff4d6d, #9d4edd);
  border-color: #ffe899; color: #fff;
}
.mono-intro-theme {
  display: flex; align-items: center; gap: calc(10px * var(--s));
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, color-mix(in srgb, var(--theme-accent, #48b8e8) 16%, #fff9eb) 100%);
  border: 2px solid color-mix(in srgb, var(--theme-accent, #48b8e8) 55%, #c9932c);
  border-radius: 16px; padding: calc(8px * var(--s)) calc(11px * var(--s));
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(58, 36, 21, 0.08);
}
.mono-intro-emoji {
  width: calc(46px * var(--s)); height: calc(46px * var(--s));
  border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(26px * var(--s));
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, color-mix(in srgb, var(--theme-accent, #48b8e8) 32%, #fff3d1) 100%);
  border: 2px solid #3a2415;
  box-shadow: 0 3px 8px rgba(0,0,0,0.16);
}
.mono-intro-tmeta { min-width: 0; flex: 1; }
.mono-intro-tkicker {
  font-size: .66em; font-weight: 900; letter-spacing: .8px;
  color: #8a5624; text-transform: uppercase;
}
.mono-intro-tname {
  font-size: 1.12em; font-weight: 900; color: #3a2415;
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mono-intro-tsub {
  font-size: .75em; font-weight: 800; color: #6e4826;
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mono-intro-roster {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(6px * var(--s));
}
.mono-intro-pcard {
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid var(--seat, #e0494f);
  border-radius: 13px; padding: calc(6px * var(--s)) calc(4px * var(--s));
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,0.08);
}
.mono-intro-pava {
  position: relative;
  width: calc(46px * var(--s)); height: calc(46px * var(--s));
  border-radius: 50%;
  background: #fdf4e3 center 22% / 150% no-repeat;
  border: 2.5px solid var(--seat, #e0494f);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.mono-intro-ptag {
  position: absolute; left: -4px; top: -4px;
  background: var(--seat, #e0494f); color: #fff;
  font-size: .62em; font-weight: 900; padding: 1px 5px;
  border-radius: 999px; border: 1.5px solid #3a2415;
}
.mono-intro-ppet {
  position: absolute; right: -4px; bottom: -3px;
  background: #fff8e6; border: 1.5px solid #3a2415;
  border-radius: 50%; width: 18px; height: 18px;
  font-size: .66em; display: flex; align-items: center; justify-content: center;
}
.mono-intro-pname {
  margin-top: 4px; font-size: .76em; font-weight: 900;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mono-intro-pname i { font-style: normal; opacity: .75; font-size: .88em; }
.mono-intro-pskill {
  font-size: .64em; font-weight: 800; color: #6e4826;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mono-intro-pready {
  margin-top: 3px; font-size: .62em; font-weight: 900;
  padding: 1px 6px; border-radius: 999px;
  background: #efe2c6; color: #7a5228;
  border: 1px solid #d4b483;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mono-intro-pready.done {
  background: linear-gradient(180deg, #5fd36a, #2ba84a);
  color: #fff; border-color: #1e7a35;
  transform: scale(1.04);
}
.mono-intro-prog-wrap {
  background: rgba(255, 255, 255, 0.78);
  border: 1.5px solid #dfc18b; border-radius: 12px;
  padding: 6px 10px;
}
.mono-intro-prog-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78em; font-weight: 800; color: #4b2a12; margin-bottom: 4px;
}
.mono-intro-prog-pct {
  font-weight: 900; color: #3a2415;
}
.mono-intro-prog-bar {
  height: 9px; border-radius: 999px;
  background: #e5d2b0; border: 1.5px solid #3a2415;
  overflow: hidden;
}
.mono-intro-prog-fill {
  display: block; height: 100%; width: 28%;
  background: linear-gradient(90deg, #38bdf8 0%, #5fd36a 50%, #ffd84d 100%);
  border-radius: 999px;
  transition: width .08s linear;
}
.mono-intro.ready .mono-intro-prog-fill {
  background: linear-gradient(90deg, #4ade80 0%, #facc15 55%, #f59e0b 100%);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.8);
}