.moon-page {
  --line: #4c5784;
  min-height: 100vh;
  color: #f5efff;
  background: radial-gradient(ellipse at 7% 20%, #414d87, transparent 50%),
    radial-gradient(ellipse at 95% 70%, #286970, transparent 50%), #171c3d;
}
.moon-page a { color: #e8e5ff; }
.moon-main { padding-top: 22px; }
.moon-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(24px, 5vw, 60px); margin: 18px 0 42px; }
.moon-intro { max-width: 425px; }
.moon-kicker { margin: 0; font-size: 12px; color: #f7c6e1; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.moon-title { margin: 16px 0; font-size: clamp(65px, 8vw, 105px); line-height: .9; letter-spacing: -.065em; }
.moon-title span { display: block; color: #ffda95; }
.moon-rule { margin: 0; color: #dce3fc; font-size: 19px; line-height: 1.5; }
.moon-rule strong { color: #fff6ec; }
.moon-note { display: inline-block; margin-top: 24px; padding: 7px 12px; border: 1px solid #9c9ccd; border-radius: 28px; color: #e6ddfd; font-size: 12px; font-weight: 800; }
.moon-console { width: 100%; max-width: 500px; min-width: 0; padding: 20px; border: 1px solid #8e92c5; border-radius: 25px; background: #282c56; box-shadow: 0 7px 0 #11172f, 0 20px 40px #050b352f; }
.moon-stats { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.moon-stats p { margin: 0; color: #e0d8f8; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.moon-stats strong { display: block; color: #fff4cc; font-size: 25px; font-variant-numeric: tabular-nums; }
.moon-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.moon-controls button { min-height: 44px; padding: 6px 14px; border: 1px solid #a5a1d5; border-radius: 12px; background: #484771; color: #fff2ff; font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; touch-action: manipulation; }
.moon-controls .moon-primary { background: #ffda95; border-color: #ffeac0; color: #3a2d4c; }
.moon-controls button:disabled { opacity: .6; cursor: default; }
.moon-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 12px; border: 1px solid #70769f; border-radius: 19px; background: radial-gradient(ellipse at 25% 0, #62649a, transparent 80%), #1c2446; }
.moon-card {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: .86;
  padding: 6px;
  border: 1px solid #cfbde5;
  border-radius: 14px;
  background: linear-gradient(140deg, #ecb6df, #b88cc7);
  box-shadow: 0 4px 0 #111a3b;
  color: #553e77;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.moon-card:nth-child(3n+1) { background: linear-gradient(140deg, #a5e4e6, #6ab7cd); border-color: #b5eef5; color: #285c77; }
.moon-card:nth-child(3n+2) { background: linear-gradient(140deg, #ffe6b3, #e8bb89); border-color: #ffebca; color: #81596b; }
.moon-card:disabled { opacity: 1; cursor: default; }
.moon-back { font-size: clamp(28px, 5vw, 42px); line-height: 1; text-shadow: 0 1px 0 #fff7; }
.moon-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid #fff8; border-radius: 9px; pointer-events: none; }
.moon-card[data-open="true"] { background: radial-gradient(circle at 30% 5%, #58548d, #293052); border-color: #bbb2ed; }
.moon-card[data-open="true"]::before { border-color: #ffffff24; }
.moon-card[data-kind="0"] { background: radial-gradient(circle at 30% 5%, #6a608c, #383457); }
.moon-card[data-kind="1"] { background: radial-gradient(circle at 30% 5%, #8d5b77, #453150); }
.moon-card[data-kind="2"] { background: radial-gradient(circle at 30% 5%, #5a5597, #302c5b); }
.moon-card[data-kind="3"] { background: radial-gradient(circle at 30% 5%, #3b828d, #21485f); }
.moon-card[data-kind="4"] { background: radial-gradient(circle at 30% 5%, #8d5f91, #4a345e); }
.moon-card[data-kind="5"] { background: radial-gradient(circle at 30% 5%, #54779a, #2b3c63); }
.moon-card svg { width: 88%; height: 88%; pointer-events: none; filter: drop-shadow(0 3px 0 #16193560); animation: moon-reveal .2s ease-out; }
.moon-card[data-matched="true"] { border-color: #a4e9ce; }
.moon-check { position: absolute; top: 3px; right: 3px; border-radius: 50%; background: #256152; color: #e6fff2; width: 17px; height: 17px; line-height: 17px; font-size: 12px; text-align: center; pointer-events: none; }
.moon-card:focus-visible, .moon-controls button:focus-visible { outline: 3px solid #fff3a8; outline-offset: 2px; z-index: 1; }
.moon-card[aria-disabled="false"]:hover { border-color: #fff; }
.moon-status { min-height: 2.5em; margin: 12px 0 0; color: #eee3fd; font-size: 13px; line-height: 1.3; }
.moon-console[data-state="complete"] { border-color: #91dcc9; }
.moon-page .mini-instructions, .moon-page .ad-slot { background: #282b50; border-color: #70729c; }
.moon-page .mini-instructions p { color: #ddd9f6; }
.moon-page .ad-label { color: #e4d8f4; }
@keyframes moon-reveal { from { transform: scale(.84); opacity: .6; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 720px) {
  .moon-main { padding-top: 4px; }
  .moon-hero { grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
  .moon-title { margin: 6px 0; font-size: clamp(38px, 11vw, 64px); line-height: 1; }
  .moon-title span { display: inline; }
  .moon-kicker { font-size: 10px; }
  .moon-rule { font-size: 14px; line-height: 1.4; }
  .moon-note { display: none; }
  .moon-console { padding: 11px; }
  .moon-stats { margin-bottom: 7px; }
  .moon-stats strong { font-size: 19px; }
  .moon-board { gap: 7px; padding: 8px; }
  .moon-card { border-radius: 11px; aspect-ratio: .82; padding: 3px; }
  .moon-card::before { inset: 4px; border-radius: 7px; }
  .moon-back { font-size: 27px; }
  .moon-status { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .moon-card svg { animation: none; } }