:root {
  --bg-top: #79dff2;
  --bg-bottom: #fff8db;
  --ink: #184059;
  --ink-soft: #54758b;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-strong: rgba(255, 255, 255, 0.94);
  --line: rgba(24, 64, 89, 0.1);
  --shadow: 0 18px 42px rgba(23, 72, 104, 0.16);
  --shadow-soft: 0 10px 24px rgba(23, 72, 104, 0.12);
  --mint: #6ce0cb;
  --sun: #ffc949;
  --coral: #ff8f74;
  --blue: #4b8cff;
  --green: #34b97d;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 32%),
    radial-gradient(circle at top right, rgba(255, 203, 112, 0.55), transparent 25%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

button {
  font: inherit;
  border: 0;
  cursor: pointer;
}

.app-shell {
  display: flex;
  justify-content: center;
  padding: 18px 12px calc(110px + env(safe-area-inset-bottom));
}

.app-frame {
  width: min(100%, 420px);
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-screen,
.stack-gap,
.game-screen {
  padding: 18px;
  border-radius: 32px;
  background: linear-gradient(180deg, var(--panel-strong), rgba(255, 255, 255, 0.7));
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.welcome-screen {
  padding: 0;
  overflow: hidden;
  position: relative;
  background: #0ba7f3;
}

.hero-screen {
  min-height: 72vh;
  justify-content: center;
}

.hero-badge,
.eyebrow,
.mini-badge,
.owned-group {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-badge,
.mini-badge {
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.hero-copy h1,
.section-header h2,
.detail-card h3,
.task-feature h2,
.final-screen h1 {
  margin: 0;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  line-height: 0.95;
}

.hero-copy h1,
.final-screen h1 {
  font-size: clamp(40px, 8vw, 58px);
}

.welcome-poster {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.welcome-poster-image {
  display: block;
  width: 100%;
  min-height: 100vh;
  object-fit: cover;
  pointer-events: none;
}

.welcome-hotspot {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.welcome-hotspot.is-start {
  left: 9%;
  width: 82%;
  bottom: 8.4%;
  height: 11.8%;
  border-radius: 999px;
}

.welcome-hotspot.is-rules {
  left: 31%;
  width: 38%;
  bottom: 1.8%;
  height: 4.8%;
  border-radius: 16px;
}

.welcome-hotspot:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: 2px;
}

.welcome-hotspot[disabled] {
  cursor: default;
}

.mivik-crop {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.mivik-crop-image {
  display: block;
  width: 300%;
  max-width: none;
  height: auto;
}

.section-header h2 {
  font-size: 34px;
}

.detail-card h3 {
  font-size: 26px;
}

.lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.lead.compact {
  font-size: 15px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
}

.hero-card,
.board-card,
.detail-card,
.metric-card,
.task-feature,
.task-row,
.leaderboard-row,
.rule-row,
.owned-card,
.check-card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.hero-card {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
}

.hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.primary-button,
.secondary-button,
.ghost-button,
.nav-item {
  transition:
    transform 150ms ease,
    opacity 150ms ease,
    box-shadow 150ms ease;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.nav-item:hover {
  transform: translateY(-1px);
}

.primary-button {
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--sun), #ffda6e 55%, #fff1b1);
  color: #5c4300;
  font-weight: 800;
  box-shadow: 0 14px 24px rgba(255, 195, 60, 0.34);
}

.secondary-button {
  padding: 15px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #edf8ff);
  color: var(--ink);
  font-weight: 700;
}

.ghost-button {
  align-self: flex-start;
  padding: 8px 0;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 700;
}

.button-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-grid,
.intro-stats,
.action-panel,
.owned-grid,
.final-summary {
  display: grid;
  gap: 12px;
}

.check-card,
.detail-card,
.metric-card,
.task-feature,
.task-row,
.leaderboard-row,
.rule-row,
.owned-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.86);
}

.check-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
}

.check-card h3,
.task-row strong,
.leaderboard-row strong,
.owned-card strong {
  margin: 0 0 4px;
}

.check-card p,
.detail-card p,
.task-feature p,
.task-row p,
.leaderboard-row p,
.rule-row p,
.owned-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.check-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, #dbfff2, #9ff4d8);
  font-weight: 800;
}

.check-card.is-done .check-icon {
  background: linear-gradient(135deg, #d7f4ff, #81d8ff);
}

.mivik-picker-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(231, 248, 255, 0.96));
}

.mivik-selector {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.mivik-option {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(24, 64, 89, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
}

.mivik-option strong,
.mivik-option span {
  display: block;
}

.mivik-option strong {
  color: var(--ink);
  font-size: 18px;
}

.mivik-option span {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
}

.mivik-option.is-selected {
  border-color: rgba(255, 190, 20, 0.7);
  box-shadow:
    inset 0 0 0 2px rgba(255, 225, 126, 0.7),
    0 12px 22px rgba(0, 67, 120, 0.16);
}

.mivik-crop.is-option {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(239, 250, 255, 1), rgba(221, 245, 255, 1));
}

.mivik-crop.is-option .mivik-crop-image {
  width: 300%;
  height: 100%;
  object-fit: cover;
}

.compact-header {
  margin-bottom: 12px;
}

.config-card {
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field span {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font: inherit;
}

.field textarea {
  resize: vertical;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-card span {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.metric-card strong {
  font-size: 28px;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.status-pill {
  padding: 14px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

.status-pill span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.status-pill strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}

.board-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
}

.board-copy {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
}

.board-copy-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.board-mode-chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(9, 118, 203, 0.1);
  color: #0b72b4;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.board-copy h2 {
  margin: 0 0 8px;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 28px;
}

.board-image {
  display: block;
  width: 100%;
  border-radius: 22px;
}

.board-stage {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 14px 26px rgba(0, 67, 120, 0.18);
}

.approved-board-image {
  border-radius: 24px;
}

.board-token {
  position: absolute;
  z-index: 3;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%) scale(var(--token-scale, 1));
  transform-origin: center;
  pointer-events: none;
}

.board-token--top {
  margin-top: 4px;
}

.board-token--right {
  margin-left: -4px;
}

.board-token--bottom {
  margin-top: -4px;
}

.board-token--left {
  margin-left: 4px;
}

.board-token--top-left-corner,
.board-token--top-right-corner,
.board-token--bottom-right-corner,
.board-token--bottom-left-corner {
  z-index: 4;
}

.board-token--top-left-corner {
  margin-top: 3px;
  margin-left: 3px;
}

.board-token--top-right-corner {
  margin-top: 3px;
  margin-left: -3px;
}

.board-token--bottom-right-corner {
  margin-top: -3px;
  margin-left: -3px;
}

.board-token--bottom-left-corner {
  margin-top: -3px;
  margin-left: 3px;
}

.board-token-pulse {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 92, 0.55), rgba(255, 214, 92, 0.04) 68%);
  animation: board-token-pulse 2.4s ease-in-out infinite;
}

.board-token-badge {
  position: absolute;
  right: -6px;
  top: -7px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdb5f, #f3a800);
  color: white;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 8px 14px rgba(144, 98, 0, 0.24);
}

.board-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.player-chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.board-info-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(6, 116, 196, 0.1);
  color: #0b6db0;
  font-size: 12px;
  font-weight: 800;
}

.accent-card {
  background: linear-gradient(160deg, rgba(108, 224, 203, 0.28), rgba(255, 255, 255, 0.94));
}

.calm-card {
  background: linear-gradient(160deg, rgba(238, 247, 255, 0.94), rgba(255, 255, 255, 0.96));
}

.mivik-status-card {
  background: linear-gradient(160deg, rgba(232, 248, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.mivik-status-layout {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: center;
}

.mivik-crop.is-status {
  width: 108px;
  height: 108px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(239, 250, 255, 1), rgba(221, 245, 255, 1));
}

.mivik-crop.is-status .mivik-crop-image {
  width: 300%;
  height: 100%;
  object-fit: cover;
}

.mivik-crop.is-board-token {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(214, 245, 255, 0.98));
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 12px 20px rgba(0, 67, 120, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mivik-crop.is-board-token .mivik-crop-image {
  width: 300%;
  height: 100%;
  object-fit: cover;
}

.badge-row,
.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-badge {
  background: rgba(75, 140, 255, 0.12);
  color: var(--blue);
}

.inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inline-header h3 {
  margin: 0;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 24px;
}

.owned-grid,
.task-list,
.leaderboard-list,
.rules-list {
  display: grid;
  gap: 12px;
}

.rules-screen {
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.9), transparent 24%),
    radial-gradient(circle at 18% 10%, rgba(255, 217, 96, 0.26), transparent 18%),
    radial-gradient(circle at 85% 14%, rgba(76, 197, 255, 0.2), transparent 18%),
    linear-gradient(180deg, #74d9f2 0%, #c4f7ff 34%, #fff8e4 100%);
}

.rules-hero-card,
.rules-footer-card {
  padding: 18px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(24, 64, 89, 0.08);
}

.rules-hero-card h2 {
  margin: 0;
  font-size: 34px;
}

.rules-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.rules-summary-item {
  padding: 14px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(246, 252, 255, 0.98), rgba(231, 247, 255, 0.92));
  text-align: center;
}

.rules-summary-item strong {
  display: block;
  color: #0e5a9f;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 28px;
}

.rules-summary-item span {
  display: block;
  margin-top: 6px;
  color: #4d7088;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.owned-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 255, 0.9));
}

.owned-group {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
}

.task-feature {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 245, 205, 0.88));
}

.leaderboard-row,
.rule-row {
  display: grid;
  gap: 12px;
  align-items: center;
}

.leaderboard-row {
  grid-template-columns: 44px 1fr auto;
}

.leaderboard-place {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(75, 140, 255, 0.1);
  font-weight: 800;
  color: var(--blue);
}

.leaderboard-row.is-me {
  background: linear-gradient(135deg, rgba(255, 201, 73, 0.28), rgba(255, 255, 255, 0.98));
}

.task-row.is-focused {
  background: linear-gradient(135deg, rgba(108, 224, 203, 0.22), rgba(255, 255, 255, 0.98));
}

.rule-row {
  grid-template-columns: 32px 1fr;
  padding: 16px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.rule-row span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(108, 224, 203, 0.18);
  font-weight: 800;
}

.rules-footer-card strong {
  display: block;
  margin-bottom: 8px;
  color: #173f61;
  font-size: 24px;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}

.rules-footer-card p {
  margin: 0;
  color: #55748c;
  line-height: 1.5;
}

@media (max-width: 420px) {
  .rules-summary-grid {
    grid-template-columns: 1fr;
  }
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(calc(100% - 24px), 420px);
  transform: translateX(-50%);
  padding: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.nav-item {
  padding: 12px 10px;
  border-radius: 16px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 13px;
}

.nav-item.is-active {
  background: linear-gradient(135deg, rgba(108, 224, 203, 0.3), rgba(75, 140, 255, 0.2));
  color: var(--ink);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 16px 12px calc(112px + env(safe-area-inset-bottom));
  background: rgba(18, 44, 59, 0.28);
}

.modal-card {
  position: relative;
  width: min(100%, 420px);
  padding: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 48px rgba(10, 37, 58, 0.28);
}

.modal-card h3 {
  margin: 0 0 10px;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 30px;
}

.modal-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: rgba(24, 64, 89, 0.06);
  color: var(--ink);
  font-size: 24px;
}

.reward-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(75, 140, 255, 0.08);
}

.reward-chip.is-bonus {
  background: rgba(108, 224, 203, 0.16);
}

.tone-sun {
  background: linear-gradient(180deg, rgba(255, 252, 239, 0.98), rgba(255, 244, 207, 0.98));
}

.tone-mint {
  background: linear-gradient(180deg, rgba(245, 255, 252, 0.98), rgba(219, 255, 242, 0.98));
}

.tone-warning {
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.98), rgba(255, 228, 210, 0.98));
}

.tone-calm {
  background: linear-gradient(180deg, rgba(249, 254, 255, 0.98), rgba(232, 245, 255, 0.98));
}

.tone-blue {
  background: linear-gradient(180deg, rgba(242, 250, 255, 0.98), rgba(215, 241, 255, 0.98));
}

.tone-violet {
  background: linear-gradient(180deg, rgba(248, 241, 255, 0.98), rgba(228, 214, 255, 0.98));
}

.final-screen {
  background:
    radial-gradient(circle at top right, rgba(255, 201, 73, 0.34), transparent 30%),
    radial-gradient(circle at left center, rgba(108, 224, 203, 0.28), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 222, 0.94));
}

.result-screen {
  position: relative;
  padding-top: 18px;
  background:
    radial-gradient(circle at top center, rgba(67, 213, 255, 0.6), transparent 34%),
    linear-gradient(180deg, #20b8ff 0%, #57dbff 32%, #fffdf5 33%, #fff7e3 100%);
}

.result-screen-top {
  position: relative;
  min-height: 220px;
}

.result-trophy {
  position: absolute;
  left: 14px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 74px;
  height: 92px;
  border-radius: 28px 28px 18px 18px;
  background: linear-gradient(180deg, #ffd965, #f1a900);
  color: white;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 14px 22px rgba(162, 118, 0, 0.28);
}

.result-mivik-hero {
  width: 220px;
  margin: 0 auto;
}

.mivik-crop.is-result {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.96), rgba(209, 244, 255, 0.9));
  box-shadow: 0 18px 32px rgba(0, 89, 137, 0.22);
}

.mivik-crop.is-result .mivik-crop-image {
  width: 300%;
  height: 100%;
  object-fit: cover;
}

.result-ribbon {
  margin: -10px auto 16px;
  padding: 18px 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ff6666, #d92929);
  color: white;
  text-align: center;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 28px;
  box-shadow: 0 14px 24px rgba(154, 35, 35, 0.28);
}

.result-panel {
  display: grid;
  gap: 14px;
}

.result-stat-card {
  padding: 18px 18px;
  border-radius: 24px;
  background: rgba(255, 251, 244, 0.96);
  border: 1px solid rgba(206, 189, 147, 0.4);
  box-shadow: 0 12px 22px rgba(0, 67, 120, 0.12);
  text-align: center;
}

.result-stat-label,
.result-stat-foot {
  display: block;
  color: #124f8f;
  font-size: 16px;
  font-weight: 800;
}

.result-rank-value,
.result-score-value {
  display: block;
  margin: 10px 0 6px;
  color: #0c4e8f;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: clamp(52px, 12vw, 76px);
  line-height: 0.92;
}

.result-score-value {
  font-size: clamp(44px, 11vw, 68px);
}

.result-stat-card.is-message {
  text-align: center;
}

.result-stat-card.is-message strong {
  display: block;
  margin-bottom: 8px;
  color: #124f8f;
  font-size: 26px;
}

.result-stat-card.is-message p {
  margin: 0;
  color: #3a6388;
  font-size: 17px;
  line-height: 1.45;
}

.result-primary-button {
  margin-top: 8px;
  background: linear-gradient(180deg, #2db2ff, #0f7fda);
  color: white;
  font-size: 28px;
}

.event-modal-backdrop {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.event-modal {
  position: relative;
  width: min(100%, 420px);
  padding: 18px 16px 18px;
  border-radius: 34px;
  box-shadow: 0 22px 44px rgba(0, 67, 120, 0.28);
}

.event-modal--chest {
  background: linear-gradient(180deg, #17a9ff 0%, #0f88dc 20%, #eaf8ff 20.5%, #fff7ea 100%);
}

.event-modal--wave {
  background: linear-gradient(180deg, #ffd83c 0%, #ffb800 20%, #fff8d9 20.5%, #fff6e8 100%);
}

.event-modal--technical-break {
  background: linear-gradient(180deg, #8d69e9 0%, #6940cb 20%, #f1eaff 20.5%, #fff8ea 100%);
}

.event-modal-close {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.event-modal-header {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.event-status-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16, 65, 104, 0.22);
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.event-title-panel {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}

.event-title-panel h3 {
  margin: 0;
  color: white;
  text-align: center;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 34px;
  line-height: 1;
}

.event-illustration {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin-bottom: 12px;
}

.event-icon {
  position: relative;
  width: 200px;
  height: 160px;
}

.event-icon::before,
.event-icon::after {
  content: "";
  position: absolute;
}

.event-icon--chest::before {
  left: 28px;
  top: 46px;
  width: 144px;
  height: 100px;
  border-radius: 22px;
  background: linear-gradient(180deg, #1e8be0, #1159a5);
  box-shadow:
    inset 0 0 0 5px #cce7ff,
    0 16px 28px rgba(10, 70, 120, 0.26);
}

.event-icon--chest::after {
  left: 44px;
  top: 84px;
  width: 112px;
  height: 42px;
  border-radius: 16px;
  border: 4px solid #dcefff;
  box-sizing: border-box;
}

.event-icon--wave::before {
  left: 20px;
  top: 28px;
  width: 162px;
  height: 124px;
  border-radius: 54% 46% 58% 42% / 60% 50% 50% 40%;
  background: linear-gradient(180deg, #4fd6ff, #1282db 70%, #0f6ebb);
  box-shadow: 0 18px 26px rgba(151, 106, 0, 0.22);
}

.event-icon--wave::after {
  right: 28px;
  bottom: 26px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.event-icon--technical-break::before {
  left: 34px;
  top: 28px;
  width: 132px;
  height: 132px;
  border-radius: 30px;
  background: linear-gradient(180deg, #9b84f7, #6f4ad0);
  transform: rotate(-12deg);
  box-shadow: 0 18px 26px rgba(83, 56, 160, 0.24);
}

.event-icon--technical-break::after {
  left: 62px;
  top: 62px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 8px solid #fff;
  box-sizing: border-box;
}

.event-copy {
  margin: 0 8px 18px;
  color: #29506f;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}

.event-action-stack {
  display: grid;
  gap: 10px;
}

.event-primary-button {
  font-size: 22px;
}

.event-secondary-button {
  font-size: 20px;
}

.event-footer-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
}

.event-footer-card strong {
  display: block;
  color: #154c86;
  font-size: 18px;
}

.event-footer-card p {
  margin: 4px 0 0;
  color: #53708b;
  line-height: 1.35;
}

.event-footer-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
}

.event-footer-icon--chest {
  background: linear-gradient(180deg, #2ea4ff, #1467bd);
}

.event-footer-icon--wave {
  background: linear-gradient(180deg, #ffd14f, #f0a900);
}

.event-footer-icon--technical-break {
  background: linear-gradient(180deg, #9477f0, #6745c6);
}

@keyframes board-token-pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.app-shell {
  padding: 0;
  min-height: 100vh;
}

.single-app-frame {
  width: min(100%, 460px);
  margin: 0 auto;
}

.single-screen,
.single-empty {
  min-height: 100vh;
  padding: 18px 14px 28px;
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.88), transparent 24%),
    radial-gradient(circle at 18% 12%, rgba(255, 221, 118, 0.34), transparent 22%),
    radial-gradient(circle at 86% 18%, rgba(68, 193, 255, 0.24), transparent 20%),
    linear-gradient(180deg, #6ed5f1 0%, #aef1ff 18%, #e8fbff 46%, #fff5d7 100%);
}

.single-banner,
.single-empty-card,
.single-board-card,
.single-modal-card {
  box-shadow: 0 18px 36px rgba(16, 72, 104, 0.12);
}

.single-banner {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-weight: 700;
}

.single-banner.is-error {
  background: rgba(255, 239, 234, 0.96);
  color: #9d3b21;
}

.single-topbar-shell {
  position: relative;
  margin-bottom: 12px;
}

.single-topbar-copy h1 {
  margin: 0;
  color: #184b6d;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 29px;
  line-height: 0.96;
}

.single-inline-stats {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(110, 157, 188, 0.2);
}

.single-inline-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.single-topbar-player {
  color: #62819a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.single-inline-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.single-inline-stat {
  min-width: 0;
  padding: 8px 0 6px;
}

.single-inline-stat span {
  display: block;
  color: #5d7c96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.single-inline-stat strong {
  display: block;
  margin-top: 4px;
  color: #183d58;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 20px;
  line-height: 1;
}

.single-inline-stat small {
  display: block;
  margin-top: 3px;
  color: #67849b;
  font-size: 10px;
  line-height: 1.3;
}

.single-inline-buy-roll-button {
  min-height: 28px;
  margin-top: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff1a7, #ffd24d 58%, #ffbe2e 100%);
  color: #6b4b00;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 8px 14px rgba(255, 188, 51, 0.24);
}

.single-inline-buy-roll-button[disabled] {
  opacity: 0.65;
  cursor: default;
}

.single-mivik-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.single-mivik-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 18px rgba(17, 84, 119, 0.16));
}

.single-mivik-frame.is-token {
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  isolation: isolate;
}

.single-mivik-image.is-token {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 82px;
  height: 82px;
  transform: translateX(-50%);
  filter:
    saturate(1.18)
    contrast(1.12)
    brightness(1.06)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 9px rgba(255, 255, 255, 0.72))
    drop-shadow(0 8px 18px rgba(16, 72, 104, 0.24));
}

.single-stat span,
.single-strip-label {
  color: #5d7c96;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.single-stat strong {
  color: #183d58;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 28px;
  line-height: 0.95;
}

.single-stat small {
  color: #67849b;
  font-size: 12px;
  line-height: 1.35;
}

.single-board-card {
  position: relative;
  padding: 10px 10px 12px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255, 208, 88, 0.24), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 255, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.single-board-card::before {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0, 144, 205, 0.12), transparent 72%);
  pointer-events: none;
}

.single-board-stage {
  position: relative;
  margin-top: 8px;
  overflow: hidden;
  border: 6px solid rgba(255, 248, 226, 0.95);
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.8), transparent 34%),
    linear-gradient(180deg, #fdf7e8, #f7efdc);
  box-shadow:
    0 18px 28px rgba(18, 73, 103, 0.16),
    inset 0 0 0 1px rgba(176, 137, 63, 0.1);
}

.single-board-image {
  display: block;
  width: 100%;
  height: auto;
}

.single-board-stage.is-rolling .single-token {
  filter: drop-shadow(0 16px 24px rgba(20, 96, 138, 0.24));
}

.owned-highlight {
  position: absolute;
  z-index: 2;
  border-radius: 8px;
  background: rgba(75, 215, 175, 0.1);
  border: 1.5px solid rgba(58, 190, 152, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.single-token {
  position: absolute;
  z-index: 4;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-top: -27px;
  transform: scale(var(--token-scale, 1));
  transition:
    left var(--token-move-duration, 320ms) linear,
    top var(--token-move-duration, 320ms) linear,
    transform 320ms ease;
  filter: drop-shadow(0 10px 18px rgba(255, 220, 118, 0.36));
  will-change: left, top, transform;
}

.single-token-core {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15) 26%, transparent 27%),
    linear-gradient(180deg, #5ae1ff, #1394df 72%, #0d72bb 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 10px 18px rgba(13, 88, 141, 0.28);
  color: #fffdf2;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(8, 91, 147, 0.28);
}

.single-board-controls {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.single-board-controls.is-technical-break {
  inset: auto 12px 12px;
  gap: 10px;
  pointer-events: auto;
}

.single-board-controls > * {
  position: relative;
  z-index: 1;
}

.single-dice-tray,
.single-board-note {
  pointer-events: none;
}

.single-dice-tray {
  position: absolute;
  left: 50%;
  top: 68.1%;
  z-index: 5;
  display: grid;
  justify-items: center;
  width: min(56%, 168px);
  transform: translate(-50%, -50%);
}

.single-dice-plaque {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 74px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.28) 22%, transparent 23%),
    linear-gradient(180deg, rgba(249, 254, 255, 0.94), rgba(218, 239, 251, 0.92) 58%, rgba(194, 226, 243, 0.94) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.84),
    inset 0 -6px 10px rgba(150, 188, 210, 0.2),
    0 12px 22px rgba(18, 82, 117, 0.14);
  transform: translate(-50%, -50%);
}

.single-dice-pair {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.single-die {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #eef5ff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 8px 14px rgba(44, 95, 136, 0.14);
  transform-origin: center center;
}

.single-die.is-left {
  transform: rotate(-8deg);
}

.single-die.is-right {
  transform: rotate(8deg);
}

.single-die.is-rolling {
  animation: dice-shake-left 0.55s ease-in-out infinite;
}

.single-die.is-rolling.delay {
  animation: dice-shake-right 0.55s ease-in-out infinite;
  animation-delay: 0.08s;
}

.single-die-face {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.single-die-pip {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f5f94;
}

.single-die-pip.is-tl,
.single-die-pip.is-ml,
.single-die-pip.is-bl {
  left: 2px;
}

.single-die-pip.is-tr,
.single-die-pip.is-mr,
.single-die-pip.is-br {
  right: 2px;
}

.single-die-pip.is-tl,
.single-die-pip.is-tr {
  top: 2px;
}

.single-die-pip.is-ml,
.single-die-pip.is-mr,
.single-die-pip.is-c {
  top: 50%;
  transform: translateY(-50%);
}

.single-die-pip.is-bl,
.single-die-pip.is-br {
  bottom: 2px;
}

.single-die-pip.is-c {
  left: 50%;
  transform: translate(-50%, -50%);
}

.single-dice-tray.is-moving .single-die,
.single-dice-tray.is-result .single-die {
  animation: none;
}

.single-roll-launcher {
  position: absolute;
  left: 50%;
  top: 69.2%;
  z-index: 4;
  width: 27%;
  height: 15.5%;
  min-width: 180px;
  min-height: 110px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.single-roll-hitarea {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px 999px 38px 38px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.single-roll-hitarea:hover:not([disabled]) {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.24),
    0 0 0 10px rgba(255, 214, 76, 0.16);
}

.single-roll-hitarea:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}

.single-roll-hitarea[disabled] {
  opacity: 0.72;
  cursor: default;
}

.single-roll-button,
.single-modal-primary,
.single-modal-secondary,
.single-task-button,
.single-link-button {
  font: inherit;
  border: 0;
  cursor: pointer;
}

.single-roll-button,
.single-modal-primary,
.single-task-button {
  min-height: 52px;
  padding: 13px 18px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fff3af, #ffd24d 54%, #ffbe2e 100%);
  color: #654500;
  font-size: 19px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 26px rgba(255, 188, 51, 0.34);
}

.single-roll-button[disabled],
.single-task-button[disabled],
.single-link-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.single-link-button,
.single-modal-secondary {
  min-height: 50px;
  padding: 12px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  color: #24455f;
  font-size: 18px;
  font-weight: 800;
}

.single-board-note {
  margin: 0;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  color: #58748a;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 12px 20px rgba(18, 73, 103, 0.08);
}

.single-board-note p {
  margin: 0;
}

.single-board-note.is-floating {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: auto;
  min-width: 180px;
  max-width: 280px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(96, 108, 116, 0.54);
  color: rgba(255, 255, 255, 0.96);
  font-size: 14px;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: none;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.single-position-pill {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #effaff, #dff1fb);
  color: #2c628e;
  font-size: 14px;
  font-weight: 800;
}

.single-focus-card {
  margin-top: 12px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.96));
  border: 1px solid rgba(174, 213, 231, 0.38);
  box-shadow:
    0 14px 24px rgba(16, 72, 104, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.single-focus-card.is-buyable {
  background: linear-gradient(180deg, rgba(255, 249, 223, 0.98), rgba(255, 242, 208, 0.98));
}

.single-focus-card.is-event {
  background: linear-gradient(180deg, rgba(234, 248, 255, 0.98), rgba(244, 252, 255, 0.98));
}

.single-focus-card.is-technical-break {
  background: linear-gradient(180deg, rgba(245, 239, 255, 0.98), rgba(251, 248, 255, 0.98));
}

.single-focus-card.is-owned {
  background: linear-gradient(180deg, rgba(240, 252, 247, 0.98), rgba(248, 255, 251, 0.98));
}

.single-focus-card.is-task {
  background: linear-gradient(180deg, rgba(232, 247, 255, 0.98), rgba(248, 252, 255, 0.98));
}

.single-focus-card.is-featured-task {
  margin-top: 0;
}

.single-focus-card.is-task-list-item {
  margin-top: 0;
  padding: 16px;
  border-radius: 24px;
}

.single-focus-card.is-task.is-spotlight {
  background:
    radial-gradient(circle at top right, rgba(255, 222, 111, 0.28), transparent 28%),
    linear-gradient(180deg, rgba(239, 250, 255, 0.99), rgba(255, 252, 227, 0.98));
  border-color: rgba(255, 205, 92, 0.52);
  box-shadow:
    0 18px 28px rgba(16, 72, 104, 0.1),
    0 0 0 6px rgba(255, 221, 118, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.single-focus-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.single-focus-card-head strong {
  display: block;
  margin-top: 4px;
  color: #173f5d;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 22px;
  line-height: 1.08;
}

.single-tasks-section {
  display: grid;
  gap: 12px;
}

.single-tasks-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.single-tasks-header h2 {
  margin: 0;
  color: #184b6d;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 22px;
  line-height: 1.05;
}

.single-tasks-count {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #35b3fb, #147fdd);
  color: #fff;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 18px;
  box-shadow: 0 12px 18px rgba(20, 127, 221, 0.24);
}

.single-tasks-list {
  display: grid;
  gap: 12px;
}

.single-focus-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.single-cell-chip,
.single-cell-meta,
.single-task-deadline {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.single-cell-chip {
  background: #173f5d;
  color: white;
}

.single-cell-chip-button {
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(24, 63, 93, 0.18);
}

.single-cell-chip-button:hover:not([disabled]) {
  transform: translateY(-1px);
}

.single-cell-chip-button:focus-visible {
  outline: 3px solid rgba(255, 214, 76, 0.7);
  outline-offset: 2px;
}

.single-cell-chip-button[disabled] {
  opacity: 0.7;
  cursor: default;
}

.single-cell-chip.is-new-task {
  background: linear-gradient(180deg, #ffcb4d, #f3a81b);
  color: #6b4300;
}

.single-cell-meta,
.single-task-deadline {
  background: #ecf7fd;
  color: #466a86;
}

.single-cell-meta.is-accent {
  background: rgba(236, 247, 253, 0.82);
  color: #2d587a;
}

.single-focus-copy {
  margin: 14px 0 0;
  color: #58748a;
  font-size: 14px;
  line-height: 1.45;
}

.single-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(12, 40, 59, 0.18);
  backdrop-filter: blur(6px);
}

.single-modal-card {
  --single-modal-accent: #1f7fd0;
  --single-modal-tint: rgba(231, 245, 255, 0.96);
  width: min(100%, 360px);
  position: relative;
  padding: 18px 18px 18px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.94), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(251, 253, 255, 0.97));
  border: 1px solid rgba(142, 198, 220, 0.24);
  text-align: center;
  box-shadow:
    0 28px 50px rgba(16, 65, 96, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.single-modal-close {
  position: absolute;
  top: 20px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #67829a;
  font-size: 34px;
  line-height: 1;
  box-shadow: 0 14px 24px rgba(21, 74, 108, 0.14);
}

.single-modal-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 118px;
  margin-bottom: 6px;
}

.single-modal-orb {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.22) 28%, transparent 29%),
    linear-gradient(180deg, #53c7ff, #1289da);
  color: #fff;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 34px;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.34),
    0 18px 30px rgba(31, 127, 208, 0.28);
}

.single-modal-spark {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 212, 97, 0.92);
  box-shadow: 0 0 14px rgba(255, 212, 97, 0.5);
}

.single-modal-spark.is-one {
  top: 14px;
  left: 84px;
  width: 10px;
  height: 10px;
}

.single-modal-spark.is-two {
  right: 82px;
  top: 32px;
  width: 8px;
  height: 8px;
}

.single-modal-spark.is-three {
  right: 96px;
  bottom: 18px;
  width: 12px;
  height: 12px;
}

.single-modal-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--single-modal-tint);
  color: var(--single-modal-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.single-modal-title {
  max-width: 250px;
  margin: 0 auto;
}

.single-modal-card h3 {
  margin: 0;
  color: #183d58;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 31px;
  line-height: 1.02;
}

.single-modal-body,
.single-modal-meta {
  margin: 12px 0 0;
  color: #57748c;
  line-height: 1.45;
}

.single-modal-body {
  font-size: 18px;
}

.single-modal-meta {
  font-size: 16px;
}

.single-modal-reward {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(231, 251, 245, 0.96);
  color: #1d7552;
  font-weight: 900;
}

.single-modal-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.single-modal-card.is-purchase {
  --single-modal-accent: #1f7fd0;
  --single-modal-tint: rgba(233, 244, 255, 0.96);
  width: min(100%, 344px);
  padding: 24px 18px 18px;
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.98), transparent 36%),
    linear-gradient(180deg, rgba(255, 251, 255, 0.99), rgba(245, 248, 255, 0.97));
}

.single-modal-card.is-purchase h3 {
  font-size: 22px;
  line-height: 1.1;
}

.single-modal-card.is-purchase .single-modal-body {
  margin-top: 10px;
  font-size: 15px;
  color: #6e7c99;
}

.single-modal-card.is-purchase .single-modal-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.single-modal-card.is-purchase .single-modal-primary,
.single-modal-card.is-purchase .single-modal-secondary {
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 24px rgba(41, 94, 130, 0.12);
}

.single-modal-card.is-purchase .single-modal-primary {
  background: linear-gradient(180deg, #52e59f, #26c874 100%);
  color: white;
}

.single-modal-card.is-purchase .single-modal-secondary {
  background: linear-gradient(180deg, #d7dcec, #c2cae3 100%);
  color: white;
}

.single-modal-board-preview {
  position: relative;
  margin: 0 auto 12px;
  overflow: hidden;
  border-radius: 24px;
  background: white;
  box-shadow:
    0 20px 30px rgba(19, 82, 117, 0.14),
    inset 0 0 0 1px rgba(189, 213, 230, 0.6);
}

.single-modal-board-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
}

.single-modal-stats {
  margin-top: 18px;
  border-top: 1px solid rgba(183, 202, 224, 0.44);
  border-bottom: 1px solid rgba(183, 202, 224, 0.44);
}

.single-modal-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  color: #5c7089;
  font-size: 17px;
}

.single-modal-stat-row + .single-modal-stat-row {
  border-top: 1px solid rgba(183, 202, 224, 0.3);
}

.single-modal-stat-row strong {
  color: #183d58;
  max-width: 176px;
  font-size: 15px;
  line-height: 1.2;
  text-align: right;
}

.single-modal-card.is-technical-break {
  --single-modal-accent: #6d48c9;
  --single-modal-tint: rgba(240, 233, 255, 0.96);
  background: linear-gradient(180deg, rgba(247, 242, 255, 0.99), rgba(255, 252, 255, 0.97));
}

.single-modal-card.is-technical-break .single-modal-orb {
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.22) 28%, transparent 29%),
    linear-gradient(180deg, #9c79ff, #6d48c9);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.34),
    0 18px 30px rgba(109, 72, 201, 0.28);
}

.single-modal-card.is-info,
.single-modal-card.is-event {
  --single-modal-accent: #1f7fd0;
  --single-modal-tint: rgba(231, 245, 255, 0.96);
}

.single-modal-card.is-purchase.is-rose {
  --single-modal-accent: #1b4d88;
  --single-modal-tint: rgba(238, 244, 255, 0.98);
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.98), transparent 38%),
    linear-gradient(180deg, rgba(255, 247, 251, 0.99), rgba(244, 248, 255, 0.97));
}

.single-modal-card.is-purchase.is-sky {
  --single-modal-accent: #1f7fd0;
  --single-modal-tint: rgba(231, 245, 255, 0.96);
}

.single-modal-card.is-purchase.is-sun {
  --single-modal-accent: #8d6300;
  --single-modal-tint: rgba(255, 246, 214, 0.98);
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.98), transparent 38%),
    linear-gradient(180deg, rgba(255, 252, 239, 0.99), rgba(255, 247, 222, 0.97));
}

.single-modal-card.is-purchase.is-coral {
  --single-modal-accent: #b24f4f;
  --single-modal-tint: rgba(255, 236, 233, 0.98);
}

.single-modal-card.is-purchase.is-gold {
  --single-modal-accent: #8f6a00;
  --single-modal-tint: rgba(255, 247, 212, 0.98);
}

.single-modal-card.is-purchase.is-mint {
  --single-modal-accent: #167160;
  --single-modal-tint: rgba(230, 250, 244, 0.98);
}

.single-modal-card.is-purchase.is-deep {
  --single-modal-accent: #205b8d;
  --single-modal-tint: rgba(231, 241, 255, 0.98);
}

.single-task-button {
  margin-top: 14px;
}

.single-task-answer-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.single-task-answer-row .single-task-button {
  margin-top: 0;
}

.single-task-button.is-secondary {
  background: rgba(255, 255, 255, 0.96);
  color: #24455f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 12px 22px rgba(36, 69, 95, 0.16);
}

.single-task-button.is-inline {
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 14px;
  box-shadow: 0 12px 18px rgba(255, 188, 51, 0.22);
}

@media (max-width: 540px) {
  .single-task-answer-row {
    grid-template-columns: 1fr;
  }
}

.single-empty {
  display: grid;
  place-items: center;
}

.single-empty-card {
  width: min(100%, 360px);
  padding: 28px 22px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
}

.single-empty-card strong {
  display: block;
  color: #183d58;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 28px;
}

.single-empty-card p {
  margin: 12px 0 0;
  color: #5c788e;
  line-height: 1.5;
}

@media (min-width: 460px) {
  .single-inline-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .single-inline-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .single-topbar-shell {
    margin-bottom: 12px;
  }

  .single-topbar-copy h1 {
    font-size: 25px;
  }

  .single-inline-stats-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .single-inline-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
  }

  .single-inline-stat strong {
    font-size: 18px;
  }

  .single-roll-launcher {
    top: 69%;
    width: 28%;
    min-width: 164px;
    min-height: 98px;
  }

  .single-dice-tray {
    top: 67.5%;
    width: min(52%, 148px);
  }

  .single-dice-plaque {
    width: 118px;
    height: 68px;
  }

  .single-die {
    width: 30px;
    height: 30px;
    padding: 5px;
  }

}

@keyframes dice-shake {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }

  20% {
    transform: rotate(-10deg) translateY(-2px);
  }

  40% {
    transform: rotate(9deg) translateY(2px);
  }

  60% {
    transform: rotate(-8deg) translateY(-1px);
  }

  80% {
    transform: rotate(7deg) translateY(2px);
  }
}

@keyframes dice-shake-left {
  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }

  25% {
    transform: rotate(-14deg) translateY(-2px);
  }

  50% {
    transform: rotate(4deg) translateY(2px);
  }

  75% {
    transform: rotate(-12deg) translateY(-1px);
  }
}

@keyframes dice-shake-right {
  0%,
  100% {
    transform: rotate(8deg) translateY(0);
  }

  25% {
    transform: rotate(14deg) translateY(-2px);
  }

  50% {
    transform: rotate(-4deg) translateY(2px);
  }

  75% {
    transform: rotate(12deg) translateY(-1px);
  }
}

@keyframes dice-spin-left {
  0%,
  100% {
    transform: rotate(-10deg) rotateX(-8deg) rotateY(6deg) translateY(0) scale(1);
    filter: blur(0);
  }

  20% {
    transform: rotate(-42deg) rotateX(58deg) rotateY(-42deg) translateY(-8px) scale(1.06);
    filter: blur(0.2px);
  }

  50% {
    transform: rotate(118deg) rotateX(-68deg) rotateY(58deg) translateY(3px) scale(0.96);
    filter: blur(0.4px);
  }

  75% {
    transform: rotate(206deg) rotateX(42deg) rotateY(-56deg) translateY(-6px) scale(1.03);
    filter: blur(0.2px);
  }
}

@keyframes dice-spin-right {
  0%,
  100% {
    transform: rotate(10deg) rotateX(-8deg) rotateY(-6deg) translateY(-1px) scale(1);
    filter: blur(0);
  }

  18% {
    transform: rotate(54deg) rotateX(-58deg) rotateY(44deg) translateY(-7px) scale(1.05);
    filter: blur(0.2px);
  }

  48% {
    transform: rotate(-112deg) rotateX(70deg) rotateY(-60deg) translateY(4px) scale(0.95);
    filter: blur(0.4px);
  }

  74% {
    transform: rotate(-196deg) rotateX(-44deg) rotateY(54deg) translateY(-5px) scale(1.02);
    filter: blur(0.2px);
  }
}

@keyframes dice-pop-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dice-settle {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(4px) scale(0.98);
  }
}

.system-banner {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(75, 140, 255, 0.12);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.system-banner.is-error {
  background: rgba(255, 143, 116, 0.2);
}

@media (min-width: 720px) {
  .action-panel,
  .intro-stats,
  .final-summary,
  .owned-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}