.mas {
  --mas-bg: #07070d;
  --mas-panel: #100b16;
  --mas-panel-2: #17101f;
  --mas-gold: #e2b35b;
  --mas-gold-soft: #f5dca5;
  --mas-brass: #8f6425;
  --mas-violet: #9f82e5;
  --mas-ink: #fff9ee;
  --mas-muted: #c8bfd0;
  --mas-line: rgba(226, 179, 91, .28);
  color: var(--mas-ink);
  margin: 2rem auto 0;
  max-width: 1180px;
  font-family: inherit;
}

.mas *, .mas *::before, .mas *::after { box-sizing: border-box; }
.mas [hidden] { display: none !important; }
.mas .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mas-defs { position: absolute; pointer-events: none; }

.mas-hero {
  position: relative;
  min-height: clamp(510px, 61vw, 690px);
  overflow: hidden;
  border: 1px solid rgba(226, 179, 91, .36);
  border-radius: 28px;
  background: #070912;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .56), inset 0 0 0 1px rgba(255, 255, 255, .025);
  isolation: isolate;
}

.mas-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mas-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 77% 32%, rgba(229, 169, 61, .08), transparent 28%),
    linear-gradient(90deg, rgba(3, 5, 12, .98) 0%, rgba(3, 5, 12, .91) 32%, rgba(3, 5, 12, .2) 59%, rgba(3, 5, 12, .03) 100%),
    linear-gradient(0deg, rgba(3, 4, 10, .55), transparent 38%);
}

.mas-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  width: min(54%, 600px);
  padding: clamp(3rem, 6vw, 6.4rem);
}

.mas-kicker {
  display: inline-block;
  color: var(--mas-gold);
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.mas-hero h2,
.mas-section-head h2,
.mas-result h2,
.mas-rank {
  margin: .55rem 0 1rem;
  color: #fffaf0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.04;
}

.mas-hero h2 { max-width: 610px; font-size: clamp(2.65rem, 5.35vw, 5.65rem); }
.mas-hero-copy > p { max-width: 525px; margin: 0; color: #ddd5e5; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.72; }

.mas-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.65rem;
}

.mas-hero-points span {
  padding: .54rem .78rem;
  border: 1px solid rgba(226, 179, 91, .29);
  border-radius: 999px;
  background: rgba(6, 7, 14, .72);
  color: #f1dfba;
  font-size: .77rem;
  font-weight: 750;
  letter-spacing: .035em;
  backdrop-filter: blur(8px);
}

.mas-game {
  position: relative;
  margin-top: 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(226, 179, 91, .27);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% -8%, rgba(94, 50, 130, .26), transparent 39%),
    radial-gradient(circle at 94% 88%, rgba(190, 125, 38, .1), transparent 32%),
    linear-gradient(145deg, #110b18 0%, #07060c 67%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}

.mas-game::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.2px);
  background-size: 43px 43px;
  mask-image: linear-gradient(to bottom, #000, transparent 42%);
}

.mas-start,
.mas-play-inner,
.mas-result { position: relative; z-index: 1; padding: clamp(2rem, 5vw, 4.8rem); }

.mas-section-head { max-width: 760px; margin: 0 auto 2.1rem; text-align: center; }
.mas-section-head h2 { font-size: clamp(2rem, 4vw, 3.55rem); }
.mas-section-head p { margin: 0; color: var(--mas-muted); font-size: 1.03rem; line-height: 1.72; }

.mas-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

.mas-mode {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 1rem;
  min-height: 182px;
  padding: 1.25rem;
  border: 1px solid rgba(193, 173, 218, .22);
  border-radius: 19px;
  background: rgba(8, 7, 13, .76);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.mas-mode:hover { transform: translateY(-3px); border-color: rgba(226, 179, 91, .52); }
.mas-mode.is-selected { border-color: var(--mas-gold); background: linear-gradient(145deg, rgba(67, 40, 78, .78), rgba(12, 9, 18, .94)); box-shadow: 0 12px 35px rgba(0,0,0,.25), inset 0 0 30px rgba(226,179,91,.04); }
.mas-mode input { position: absolute; opacity: 0; pointer-events: none; }
.mas-mode:focus-within { outline: 2px solid #fff; outline-offset: 3px; }

.mas-mode-medal {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(226, 179, 91, .45);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,179,91,.18), rgba(226,179,91,.02));
  color: var(--mas-gold-soft);
  font: 500 1.55rem Georgia, serif;
}

.mas-mode > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.mas-mode strong { color: #fff9ef; font: 600 1.35rem Georgia, serif; }
.mas-mode small { margin-top: .28rem; color: var(--mas-gold); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mas-mode em { margin-top: .8rem; color: var(--mas-muted); font-size: .91rem; font-style: normal; line-height: 1.55; }
.mas-mode b { display: block; margin-top: .55rem; color: #d9cbea; font-size: .76rem; font-weight: 650; line-height: 1.4; }
.mas-daily-best { color: #84d9b0 !important; }

.mas-rules {
  max-width: 900px;
  margin: 1rem auto 0;
  padding: 1.35rem;
  border: 1px solid rgba(226,179,91,.17);
  border-radius: 18px;
  background: rgba(7, 6, 11, .54);
}

.mas-rules h3 { margin: 0 0 .95rem; color: var(--mas-gold-soft); font: 600 1.1rem Georgia, serif; text-align: center; }
.mas-rules ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mas-rules li { display: grid; grid-template-columns: 30px 1fr; gap: .65rem; align-items: start; color: #d6cfdd; font-size: .87rem; line-height: 1.5; }
.mas-rules li b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--mas-line); border-radius: 50%; color: var(--mas-gold); font-size: .75rem; }

.mas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 52px;
  padding: .85rem 1.35rem;
  border: 1px solid #edc56f;
  border-radius: 999px;
  background: linear-gradient(135deg, #f2cf7c, #c78527);
  color: #17100a;
  font: 850 .78rem/1.1 inherit;
  letter-spacing: .075em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(181, 112, 24, .2), inset 0 1px rgba(255,255,255,.5);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.mas-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.mas-btn:focus-visible, .mas-sound:focus-visible, .mas-reel:focus-visible, .mas-book summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mas-btn:disabled { cursor: wait; opacity: .55; transform: none; }
.mas-btn.is-secondary { border-color: rgba(226,179,91,.48); background: rgba(16, 11, 23, .9); color: var(--mas-gold-soft); box-shadow: none; }
.mas-begin { display: flex; min-width: min(100%, 330px); margin: 1.35rem auto 0; }

.mas-scoreboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr)) auto;
  gap: .65rem;
  max-width: 940px;
  margin: 0 auto 1rem;
}

.mas-scoreboard p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 66px;
  margin: 0;
  padding: .65rem .85rem;
  border: 1px solid rgba(226,179,91,.19);
  border-radius: 14px;
  background: rgba(5, 5, 9, .62);
  text-align: center;
}
.mas-scoreboard small { color: #a99fb4; font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mas-scoreboard strong { margin-top: .18rem; color: #fff6e3; font: 600 1.25rem Georgia, serif; }
.mas-sound { min-width: 104px; border: 1px solid rgba(226,179,91,.25); border-radius: 14px; background: rgba(5,5,9,.62); color: #d9c7a4; font: 750 .7rem inherit; cursor: pointer; }

.mas-cabinet {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 2px solid #9b6b28;
  border-radius: 30px 30px 22px 22px;
  background:
    linear-gradient(90deg, transparent, rgba(255,222,139,.09), transparent) 0 0/100% 2px no-repeat,
    radial-gradient(circle at 50% 0, rgba(214,151,56,.15), transparent 45%),
    linear-gradient(145deg, #251408, #100905 46%, #211208);
  box-shadow:
    0 28px 65px rgba(0,0,0,.5),
    inset 0 0 0 4px #080604,
    inset 0 0 0 6px rgba(217,159,68,.38),
    inset 0 -24px 50px rgba(0,0,0,.4);
}

.mas-cabinet::before,
.mas-cabinet::after {
  content: '✦';
  position: absolute;
  top: 50%;
  color: rgba(226,179,91,.52);
  font-size: 1.25rem;
  transform: translateY(-50%);
}
.mas-cabinet::before { left: .55rem; }
.mas-cabinet::after { right: .55rem; }

.mas-marquee {
  position: relative;
  min-height: 150px;
  padding: 1.2rem clamp(1rem, 4vw, 2.2rem);
  border: 1px solid rgba(232,193,111,.48);
  border-radius: 18px 18px 9px 9px;
  background:
    radial-gradient(circle at 50% 0, rgba(124,75,160,.25), transparent 66%),
    linear-gradient(180deg, #130e1c, #07060b);
  text-align: center;
  box-shadow: inset 0 0 28px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.25);
}

.mas-marquee::before {
  content: '';
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px dotted rgba(226,179,91,.25);
  border-radius: 12px;
}

.mas-combo-kicker { position: relative; display: block; color: var(--mas-gold); font-size: .66rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.mas-combo-name { position: relative; display: block; margin-top: .38rem; color: #fff8ea; font: 600 clamp(1.45rem, 3.2vw, 2.35rem) Georgia, serif; }
.mas-combo-text { position: relative; max-width: 680px; margin: .45rem auto 0; color: #bfb5c7; font-size: .87rem; line-height: 1.5; }
.mas-combo-points { position: relative; display: block; min-height: 1.1em; margin-top: .48rem; color: #86deb5; font-size: .78rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.mas-marquee.is-win { border-color: rgba(239,194,91,.82); box-shadow: inset 0 0 36px rgba(209,143,37,.08), 0 8px 24px rgba(0,0,0,.28); }
.mas-marquee.is-new { animation: mas-glow 1.2s ease both; }

.mas-path-hint {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .18rem .8rem;
  align-items: center;
  margin: .75rem 1rem 0;
  padding: .72rem .9rem;
  border: 1px solid rgba(159,130,229,.32);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(71,43,96,.42), rgba(8,7,13,.72));
}
.mas-path-hint > span { grid-row: 1 / 3; color: #bfa8f5; font-size: .58rem; font-weight: 900; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }
.mas-path-hint strong { color: #fff2d5; font: 600 1rem Georgia, serif; }
.mas-path-hint p { margin: 0; color: #c9bfce; font-size: .75rem; line-height: 1.45; }

.mas-reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.55rem, 2vw, 1rem);
  padding: clamp(.9rem, 2.5vw, 1.5rem);
  border-right: 1px solid rgba(230,184,95,.34);
  border-left: 1px solid rgba(230,184,95,.34);
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(98,53,17,.16), rgba(0,0,0,.42));
}

.mas-reel {
  position: relative;
  min-width: 0;
  padding: .45rem;
  border: 2px solid #9c6d2c;
  border-radius: 16px;
  background: linear-gradient(145deg, #c59646, #3b220a 35%, #d3a557 50%, #40260d 72%, #b27e31);
  color: #f3d68d;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,235,171,.35);
  transition: transform .18s ease, filter .18s ease;
}
.mas-reel:not(:disabled):hover { transform: translateY(-3px); }
.mas-reel:disabled { cursor: default; }

.mas-reel-window {
  display: flex;
  aspect-ratio: 4 / 5;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,222,137,.36);
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 42%, rgba(121,75,156,.24), transparent 54%),
    linear-gradient(180deg, #171021, #08070d 52%, #130c18);
  box-shadow: inset 0 14px 24px rgba(0,0,0,.48), inset 0 -14px 24px rgba(0,0,0,.52);
}

.mas-reel svg {
  width: clamp(50px, 10vw, 112px);
  height: clamp(50px, 10vw, 112px);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(226,179,91,.2));
}
.mas-reel-window strong { margin-top: .75rem; color: #fff3d7; font: 600 clamp(.92rem, 2vw, 1.35rem) Georgia, serif; }
.mas-reel-window small { margin-top: .22rem; color: #9d91aa; font-size: clamp(.55rem, 1.3vw, .68rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.mas-held {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  display: none;
  padding: .28rem .46rem;
  border: 1px solid #f1ce7a;
  border-radius: 999px;
  background: #16100b;
  color: #f4d990;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.mas-reel.is-held { filter: brightness(1.13); box-shadow: 0 0 0 2px #f0c564, 0 10px 30px rgba(223,157,53,.3); }
.mas-reel.is-held .mas-held { display: block; }
.mas-reel.is-suggested:not(.is-held) { box-shadow: 0 0 0 2px rgba(168,137,235,.82), 0 10px 30px rgba(100,67,153,.35); animation: mas-suggest 1.45s ease-in-out infinite; }
.mas-reel.is-spinning .mas-reel-window { animation: mas-reel-spin .16s linear infinite; }

.mas-rewards {
  position: relative;
  margin: 0 1rem;
  padding: .9rem;
  border: 1px solid rgba(226,179,91,.26);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(9,7,13,.96), rgba(26,16,33,.92));
  box-shadow: inset 0 0 24px rgba(0,0,0,.42);
}

.mas-reward-main {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: .8rem;
  align-items: center;
}

.mas-fragment-vessel {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(237,197,111,.58);
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 40%, rgba(245,210,126,.2), rgba(45,25,8,.9) 68%);
  color: #f4d47d;
  font-size: 1.35rem;
  box-shadow: inset 0 -8px 14px rgba(0,0,0,.45), 0 0 18px rgba(226,179,91,.08);
}

.mas-reward-copy { min-width: 0; }
.mas-reward-copy > small { display: block; color: var(--mas-gold); font-size: .59rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.mas-reward-copy > strong { display: block; margin-top: .14rem; color: #f4ead7; font-size: .78rem; font-weight: 700; }
.mas-reward-copy > strong b { color: #fff6d9; font: 600 1.1rem Georgia, serif; }
.mas-reward-copy > em { display: block; margin-top: .28rem; color: #aaa0b3; font-size: .66rem; font-style: normal; }

.mas-star-track { display: grid; grid-template-columns: repeat(5, minmax(18px, 1fr)); gap: .28rem; max-width: 340px; margin-top: .42rem; }
.mas-star-track i { height: 5px; border-radius: 999px; background: rgba(218,198,231,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.mas-star-track i.is-lit { background: linear-gradient(90deg, #9d78df, #f0c66f); box-shadow: 0 0 10px rgba(226,179,91,.38); }

.mas-fragment-rain { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
.mas-fragment-rain i {
  --mas-x: 0px;
  position: absolute;
  top: -165px;
  left: 22px;
  color: #ffe09a;
  font: 700 1rem Georgia, serif;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255,210,105,.8));
  animation: mas-fragment-fall .9s cubic-bezier(.22,.75,.28,1) forwards;
}

.mas-seals {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .38rem;
  margin-top: .78rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(226,179,91,.13);
}
.mas-seals > span { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: .2rem; color: #62586d; opacity: .58; }
.mas-seals b { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(173,149,194,.2); border-radius: 50%; background: #09070d; font: 500 .9rem Georgia, serif; }
.mas-seals small { overflow: hidden; width: 100%; color: inherit; font-size: .48rem; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mas-seals > span.is-lit { color: #edc96f; opacity: 1; }
.mas-seals > span.is-lit b { border-color: rgba(237,201,111,.65); background: radial-gradient(circle, rgba(224,170,65,.2), #0b080e 70%); box-shadow: 0 0 15px rgba(226,179,91,.14); }
.mas-seals > span.is-new b { animation: mas-seal-unlock 1.25s ease both; }

.mas-objectives { margin-top: .82rem; padding-top: .72rem; border-top: 1px solid rgba(159,130,229,.16); }
.mas-objectives > span { display: block; color: #bba3ef; font-size: .56rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.mas-objectives ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .38rem; margin: .48rem 0 0; padding: 0; list-style: none; }
.mas-objectives li { display: grid; grid-template-columns: 20px 1fr; gap: .08rem .38rem; align-items: center; min-width: 0; padding: .48rem .55rem; border: 1px solid rgba(196,174,216,.12); border-radius: 9px; background: rgba(4,4,8,.42); color: #aaa0b3; }
.mas-objectives li i { grid-row: 1 / 3; color: #70657b; font-style: normal; }
.mas-objectives li span { overflow: hidden; font-size: .61rem; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mas-objectives li b { color: #82778d; font-size: .5rem; letter-spacing: .04em; text-transform: uppercase; }
.mas-objectives li.is-complete { border-color: rgba(117,216,169,.28); color: #d8f6e6; background: rgba(30,78,57,.18); }
.mas-objectives li.is-complete i, .mas-objectives li.is-complete b { color: #82dab0; }
.mas-objective-all { margin: .48rem 0 0; color: #8f8599; font-size: .57rem; text-align: right; }
.mas-objective-all.is-complete { color: #e8c66f; font-weight: 800; }
.mas-reward-toast { min-height: 1.05em; margin: .45rem 0 0; color: #f0d283; font-size: .65rem; font-weight: 800; text-align: center; }

.mas-controls {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 92px;
  padding: 1.15rem 1rem .25rem;
}
.mas-controls > .mas-btn { min-width: min(100%, 330px); }
.mas-choice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: min(100%, 660px); }

.mas-spin { position: relative; padding-left: 4.2rem; }
.mas-lever { position: absolute; left: .4rem; bottom: .36rem; width: 45px; height: 44px; border: 1px solid #8b5b1d; border-radius: 50%; background: #382008; box-shadow: inset 0 0 0 4px #130c05; }
.mas-lever::before { content: ''; position: absolute; left: 21px; bottom: 22px; width: 5px; height: 39px; border-radius: 5px; background: linear-gradient(90deg, #5d3a13, #e2b55b, #603b12); transform: rotate(20deg); transform-origin: bottom; }
.mas-lever i { position: absolute; left: 28px; bottom: 54px; width: 17px; height: 17px; border: 2px solid #9b6726; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe19b, #b67825 52%, #4b2a0b); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.mas.is-spinning .mas-lever::before { animation: mas-lever .7s ease; }
.mas.is-spinning .mas-lever i { animation: mas-knob .7s ease; }

.mas-result { max-width: 820px; margin: 0 auto; text-align: center; }
.mas-result h2 { font-size: clamp(2.3rem, 5vw, 4.1rem); }
.mas-result-score { display: block; color: var(--mas-gold); font: 600 clamp(2.1rem, 5vw, 3.7rem) Georgia, serif; }
.mas-new-record { display: inline-flex; margin-top: .75rem; padding: .36rem .7rem; border: 1px solid rgba(226,179,91,.6); border-radius: 999px; color: var(--mas-gold-soft); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.mas-rank { margin-top: 1.6rem; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.mas-rank-text { max-width: 620px; margin: 0 auto; color: #cfc6d5; line-height: 1.7; }
.mas-result-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 1.5rem 0; }
.mas-result-stats span { padding: .57rem .78rem; border: 1px solid rgba(226,179,91,.2); border-radius: 999px; background: rgba(5,5,9,.6); color: #ddd3e1; font-size: .78rem; }
.mas-result-actions { display: grid; grid-template-columns: 1fr; gap: .7rem; max-width: 520px; margin: 0 auto; }
.mas-share-status { min-height: 1.4em; color: #85d9b1; font-size: .8rem; }

.mas-book {
  margin-top: 1.2rem;
  border: 1px solid rgba(226,179,91,.23);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(20,12,26,.9), rgba(6,5,10,.94));
  overflow: hidden;
}
.mas-book summary { position: relative; display: flex; flex-direction: column; padding: 1.25rem 3.2rem 1.25rem 1.4rem; cursor: pointer; list-style: none; }
.mas-book summary::-webkit-details-marker { display: none; }
.mas-book summary::after { content: '+'; position: absolute; right: 1.4rem; top: 50%; color: var(--mas-gold); font: 300 1.8rem Georgia, serif; transform: translateY(-50%); }
.mas-book[open] summary::after { content: '−'; }
.mas-book summary span { color: #fff5df; font: 600 1.25rem Georgia, serif; }
.mas-book summary small { margin-top: .3rem; color: #aaa0b3; line-height: 1.5; }
.mas-book ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0 1.2rem 1.2rem; list-style: none; }
.mas-book li { display: grid; grid-template-columns: 28px 1fr auto; gap: .7rem; align-items: center; min-width: 0; padding: .85rem; border: 1px solid rgba(196,174,216,.14); border-radius: 14px; background: rgba(5,5,9,.56); opacity: .68; }
.mas-book li i { color: #786a83; font-style: normal; }
.mas-book li span { min-width: 0; }
.mas-book li strong { display: block; overflow: hidden; color: #d8cedd; font: 600 1rem Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.mas-book li small { display: block; margin-top: .2rem; overflow: hidden; color: #8f8599; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.mas-book li em { color: #82768c; font-size: .63rem; font-style: normal; font-weight: 800; text-align: right; text-transform: uppercase; }
.mas-book li.is-discovered { border-color: rgba(226,179,91,.35); opacity: 1; }
.mas-book li.is-discovered i, .mas-book li.is-discovered em { color: var(--mas-gold); }
.mas-book li.is-discovered strong { color: #fff4dc; }

.mas-disclaimer { max-width: 760px; margin: 1rem auto 0; color: #8f8797; font-size: .72rem; line-height: 1.55; text-align: center; }

@keyframes mas-reel-spin {
  0% { filter: blur(0); transform: translateY(-2px); }
  50% { filter: blur(1.5px); transform: translateY(3px); }
  100% { filter: blur(0); transform: translateY(-2px); }
}
@keyframes mas-lever { 0%,100% { transform: rotate(20deg); } 48% { transform: rotate(78deg); } }
@keyframes mas-knob { 0%,100% { transform: translate(0,0); } 48% { transform: translate(22px,20px); } }
@keyframes mas-glow { 0% { box-shadow: inset 0 0 20px rgba(226,179,91,.02); } 45% { box-shadow: inset 0 0 55px rgba(226,179,91,.23), 0 0 28px rgba(226,179,91,.12); } 100% { box-shadow: inset 0 0 35px rgba(226,179,91,.08); } }
@keyframes mas-suggest { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes mas-fragment-fall { 0% { opacity: 0; transform: translate(var(--mas-x), -18px) rotate(0) scale(.7); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 168px) rotate(210deg) scale(.38); } }
@keyframes mas-seal-unlock { 0% { transform: scale(.72); box-shadow: 0 0 0 rgba(226,179,91,0); } 45% { transform: scale(1.22); box-shadow: 0 0 28px rgba(226,179,91,.65); } 100% { transform: scale(1); box-shadow: 0 0 15px rgba(226,179,91,.14); } }

@media (max-width: 760px) {
  .mas { margin-top: 1.15rem; }
  .mas-hero { min-height: 610px; border-radius: 22px; }
  .mas-hero > img { object-position: 65% center; }
  .mas-hero-veil { background: linear-gradient(0deg, rgba(3,4,10,.98) 0%, rgba(3,4,10,.82) 48%, rgba(3,4,10,.2) 84%), linear-gradient(90deg, rgba(3,4,10,.35), transparent); }
  .mas-hero-copy { justify-content: flex-end; width: 100%; padding: 2rem 1.25rem 2.25rem; }
  .mas-hero h2 { max-width: 520px; font-size: clamp(2.4rem, 12vw, 3.75rem); }
  .mas-hero-copy > p { line-height: 1.58; }
  .mas-game { border-radius: 22px; }
  .mas-start, .mas-play-inner, .mas-result { padding: 1.45rem .8rem 1.8rem; }
  .mas-modes { grid-template-columns: 1fr; }
  .mas-mode { min-height: auto; grid-template-columns: 50px 1fr; padding: 1rem; }
  .mas-mode-medal { width: 48px; height: 48px; font-size: 1.25rem; }
  .mas-rules ol { grid-template-columns: 1fr; gap: .7rem; }
  .mas-scoreboard { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .mas-scoreboard p { min-height: 57px; padding: .45rem .25rem; }
  .mas-scoreboard small { font-size: .52rem; letter-spacing: .07em; }
  .mas-scoreboard strong { font-size: 1.02rem; }
  .mas-sound { grid-column: 1 / -1; min-height: 36px; }
  .mas-cabinet { padding: .75rem .45rem 1rem; border-radius: 22px; box-shadow: 0 18px 42px rgba(0,0,0,.5), inset 0 0 0 3px #080604, inset 0 0 0 5px rgba(217,159,68,.34); }
  .mas-cabinet::before, .mas-cabinet::after { display: none; }
  .mas-marquee { min-height: 147px; padding: 1rem .7rem; }
  .mas-combo-name { font-size: 1.42rem; }
  .mas-combo-text { font-size: .75rem; line-height: 1.42; }
  .mas-reels { gap: .32rem; padding: .58rem .18rem; }
  .mas-reel { padding: .24rem; border-width: 1px; border-radius: 11px; }
  .mas-reel-window { border-radius: 8px; }
  .mas-reel svg { width: clamp(45px, 16vw, 64px); height: clamp(45px, 16vw, 64px); stroke-width: 2.2; }
  .mas-reel-window strong { margin-top: .38rem; font-size: clamp(.68rem, 3.2vw, .9rem); }
  .mas-reel-window small { font-size: .47rem; letter-spacing: .04em; }
  .mas-held { top: .43rem; right: .38rem; padding: .2rem .28rem; font-size: .44rem; }
  .mas-path-hint { grid-template-columns: 1fr; gap: .16rem; margin: .55rem .25rem 0; padding: .62rem .7rem; }
  .mas-path-hint > span { grid-row: auto; font-size: .5rem; }
  .mas-path-hint strong { font-size: .88rem; }
  .mas-path-hint p { font-size: .68rem; }
  .mas-rewards { margin: 0 .18rem; padding: .72rem .58rem; }
  .mas-reward-main { grid-template-columns: 43px 1fr; gap: .58rem; }
  .mas-fragment-vessel { width: 41px; height: 41px; font-size: 1.05rem; }
  .mas-reward-copy > strong { font-size: .66rem; }
  .mas-reward-copy > strong b { font-size: .92rem; }
  .mas-seals { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .48rem .25rem; }
  .mas-seals b { width: 28px; height: 28px; }
  .mas-seals small { font-size: .44rem; }
  .mas-objectives ul { grid-template-columns: 1fr; }
  .mas-objectives li span { white-space: normal; }
  .mas-objective-all { text-align: left; }
  .mas-controls { min-height: 88px; padding: 1rem .2rem 0; }
  .mas-choice-actions { grid-template-columns: 1fr; }
  .mas-btn { min-height: 48px; padding: .75rem .75rem; font-size: .68rem; }
  .mas-book ul { grid-template-columns: 1fr; padding: 0 .75rem .75rem; }
  .mas-book li { grid-template-columns: 24px 1fr; }
  .mas-book li em { grid-column: 2; text-align: left; }
}

@media (max-width: 390px) {
  .mas-hero { min-height: 580px; }
  .mas-hero-points { gap: .35rem; }
  .mas-hero-points span { padding: .42rem .55rem; font-size: .66rem; }
  .mas-reel svg { width: 43px; height: 43px; }
  .mas-reel-window strong { font-size: .66rem; }
  .mas-combo-name { font-size: 1.28rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mas *, .mas *::before, .mas *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}