.yj-m3 {
  --m3-red: #ff4d5d;
  --m3-orange: #ffad42;
  --m3-cyan: #3cd7eb;
  --m3-green: #51d69a;
  --m3-ink: #07111f;
  --m3-panel: rgba(11, 27, 47, .92);
  position: relative;
  overflow: hidden;
  min-height: 680px;
  padding: clamp(18px, 3vw, 38px);
  border: 1px solid rgba(144, 193, 225, .17);
  border-radius: 28px;
  color: #edf8ff;
  background:
    radial-gradient(circle at 16% 5%, rgba(255, 76, 91, .18), transparent 26%),
    radial-gradient(circle at 83% 73%, rgba(39, 193, 220, .13), transparent 31%),
    linear-gradient(145deg, #0b1a2b 0%, #07111f 57%, #071522 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 28px 70px rgba(0, 0, 0, .3);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  isolation: isolate;
}

.yj-m3::before,
.yj-m3::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.yj-m3::before {
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(80, 151, 190, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 151, 190, .12) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.yj-m3::after {
  width: 270px;
  height: 270px;
  right: -85px;
  top: -95px;
  border: 1px solid rgba(255, 173, 66, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255, 173, 66, .025), 0 0 0 90px rgba(255, 173, 66, .018);
}

.yj-m3 *,
.yj-m3 *::before,
.yj-m3 *::after { box-sizing: border-box; }

.yj-m3 button { font: inherit; }

.yj-m3__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.yj-m3__mission span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #ffbe6b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.yj-m3__mission span::before {
  width: 19px;
  height: 2px;
  content: "";
  background: var(--m3-red);
  box-shadow: 7px 0 11px var(--m3-red);
}

.yj-m3__mission h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.yj-m3__mission p {
  max-width: 660px;
  margin: 9px 0 0;
  color: #9fb5c7;
  font-size: 14px;
  line-height: 1.7;
}

.yj-m3__meter {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  min-width: 116px;
  padding: 13px 18px 12px;
  border: 1px solid rgba(255, 173, 66, .27);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 173, 66, .12), rgba(255, 77, 93, .06));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

.yj-m3__meter::before {
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(255, 255, 255, .08);
  border-radius: 12px;
  content: "";
}

.yj-m3__meter small {
  grid-column: 1 / -1;
  color: #9bb1c1;
  font-size: 11px;
}

.yj-m3__meter strong {
  color: #ffbf62;
  font-family: Consolas, monospace;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 173, 66, .34);
}

.yj-m3__meter span { margin: 0 0 3px 4px; color: #8399aa; font-size: 12px; }

.yj-m3__goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.yj-m3__goal {
  --goal-color: #ff8b52;
  --goal-progress: 0%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  padding: 11px 14px 14px;
  border: 1px solid rgba(153, 192, 217, .14);
  border-radius: 15px;
  background: rgba(11, 30, 50, .76);
  transition: opacity .25s, border-color .25s, transform .25s;
}

.yj-m3__goal--exit { --goal-color: #f15d6f; }
.yj-m3__goal--door { --goal-color: #b98bff; }

.yj-m3__goal > i {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--goal-color) 45%, transparent);
  border-radius: 11px;
  color: #fff;
  background: color-mix(in srgb, var(--goal-color) 20%, #0a1726);
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 0 18px color-mix(in srgb, var(--goal-color) 18%, transparent);
  font-style: normal;
  font-weight: 900;
}

.yj-m3__goal span { display: grid; min-width: 0; }
.yj-m3__goal small { overflow: hidden; color: #94aaba; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.yj-m3__goal b { color: #eaf7ff; font-size: 14px; }
.yj-m3__goal em { color: var(--goal-color); font-size: 19px; font-style: normal; }

.yj-m3__goal u {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--goal-color) var(--goal-progress), rgba(255, 255, 255, .06) var(--goal-progress));
  box-shadow: 0 0 9px color-mix(in srgb, var(--goal-color) 50%, transparent);
}

.yj-m3__goal.is-done { border-color: rgba(75, 218, 155, .42); opacity: .72; }
.yj-m3__goal.is-done::after { margin-left: auto; color: #4cdda0; content: "✓"; font-size: 21px; font-weight: 900; }

.yj-m3__layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(205px, 268px);
  align-items: stretch;
  gap: clamp(14px, 2.4vw, 27px);
}

.yj-m3__board-wrap {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(9px, 1.4vw, 15px);
  border: 1px solid rgba(88, 174, 219, .24);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(17, 42, 65, .96), rgba(5, 15, 28, .97));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -20px 50px rgba(0, 0, 0, .24), 0 18px 45px rgba(0, 0, 0, .25);
}

.yj-m3__board-wrap::before,
.yj-m3__board-wrap::after {
  position: absolute;
  z-index: 3;
  width: 35px;
  height: 35px;
  border-color: #ff6a62;
  border-style: solid;
  content: "";
  pointer-events: none;
}

.yj-m3__board-wrap::before { left: 7px; top: 7px; border-width: 2px 0 0 2px; border-radius: 13px 0 0; }
.yj-m3__board-wrap::after { right: 7px; bottom: 7px; border-width: 0 2px 2px 0; border-radius: 0 0 13px; }

.yj-m3__board-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: rgba(41, 188, 230, .16);
  filter: blur(38px);
  pointer-events: none;
}

.yj-m3__board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(3px, .65vw, 7px);
  aspect-ratio: 1;
  padding: clamp(6px, 1vw, 10px);
  border: 1px solid rgba(137, 204, 234, .13);
  border-radius: 17px;
  background:
    linear-gradient(rgba(76, 156, 197, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 156, 197, .045) 1px, transparent 1px),
    rgba(2, 12, 23, .84);
  background-size: 12.5% 12.5%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.yj-m3__tile {
  --tile-a: #368a9d;
  --tile-b: #155166;
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: clamp(7px, 1vw, 13px);
  color: #fff;
  background: transparent;
  cursor: grab;
  outline: 0;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .28));
  transition: transform .15s ease, filter .15s ease;
}

.yj-m3__tile:active { cursor: grabbing; }
.yj-m3__tile:hover { z-index: 2; transform: translateY(-2px) scale(1.035); filter: brightness(1.08) drop-shadow(0 7px 6px rgba(0, 0, 0, .34)); }

.yj-m3__tile:focus-visible {
  z-index: 5;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.yj-m3__tile-face {
  position: absolute;
  display: grid;
  inset: 0;
  place-content: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tile-a) 72%, white 12%);
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 31%),
    radial-gradient(circle at 50% 42%, var(--tile-a), var(--tile-b) 72%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), inset 0 -7px 13px rgba(0, 0, 0, .22), 0 0 12px color-mix(in srgb, var(--tile-a) 24%, transparent);
}

.yj-m3__tile-face::before {
  position: absolute;
  width: 55%;
  height: 18%;
  left: 8%;
  top: 7%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  content: "";
  filter: blur(2px);
  transform: rotate(-14deg);
}

.yj-m3__tile-face::after {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: calc(clamp(7px, 1vw, 13px) - 3px);
  content: "";
}

.yj-m3__tile-face > b {
  position: relative;
  z-index: 1;
  font-size: clamp(16px, 3.2vw, 30px);
  font-weight: 900;
  line-height: .95;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 0 12px rgba(255, 255, 255, .18);
}

.yj-m3__tile-face > small {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 90%;
  margin: 4px auto 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(7px, 1.2vw, 10px);
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yj-m3__tile--battery { --tile-a: #f19535; --tile-b: #9f3c24; }
.yj-m3__tile--exit { --tile-a: #ef5268; --tile-b: #8c284d; }
.yj-m3__tile--door { --tile-a: #a66ee3; --tile-b: #503b98; }
.yj-m3__tile--smoke { --tile-a: #4ea9d8; --tile-b: #245787; }
.yj-m3__tile--hydrant { --tile-a: #e84949; --tile-b: #89252d; }
.yj-m3__tile--sprinkler { --tile-a: #42cba3; --tile-b: #17716b; }

.yj-m3__tile.is-selected { z-index: 6; transform: scale(1.08); filter: drop-shadow(0 0 9px #fff) drop-shadow(0 0 18px var(--tile-a)); }
.yj-m3__tile.is-selected .yj-m3__tile-face { border-color: #fff; }
.yj-m3__tile.is-swapping { animation: yjM3Swap .18s ease; }
.yj-m3__tile.is-invalid { animation: yjM3Invalid .32s ease; }
.yj-m3__tile.is-clearing { z-index: 7; animation: yjM3Clear .3s ease forwards; }
.yj-m3__tile.is-charging { z-index: 8; animation: yjM3Charge .45s ease; }
.yj-m3__tile.is-falling { animation: yjM3Fall .28s cubic-bezier(.2, .9, .35, 1.2); }
.yj-m3__tile.is-hint { z-index: 5; animation: yjM3Hint .7s ease-in-out infinite alternate; }
.yj-m3__board.is-shuffling .yj-m3__tile { animation: yjM3Shuffle .36s ease both; }

.yj-m3__special {
  position: absolute;
  z-index: 3;
  display: block;
  inset: 2px;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: inherit;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, .35), 0 0 12px #56e6ff;
  pointer-events: none;
}

.yj-m3__special--row i,
.yj-m3__special--column i {
  position: absolute;
  border-color: transparent #fff;
  border-style: solid;
  filter: drop-shadow(0 0 4px #36dcff);
}

.yj-m3__special--row i:first-child { left: 1px; top: 42%; border-width: 6px 9px 6px 0; }
.yj-m3__special--row i:last-child { right: 1px; top: 42%; border-width: 6px 0 6px 9px; }
.yj-m3__special--column i:first-child { left: 42%; top: 1px; border-color: transparent transparent #fff; border-width: 0 6px 9px; }
.yj-m3__special--column i:last-child { left: 42%; bottom: 1px; border-color: #fff transparent transparent; border-width: 9px 6px 0; }

.yj-m3__special--bomb {
  display: grid;
  inset: auto -1px -1px auto;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: #07101d;
  background: #fff36e;
  box-shadow: 0 0 0 2px #fff, 0 0 14px #ff7c3f;
  font-size: 15px;
  animation: yjM3Bomb 1s ease-in-out infinite alternate;
}

.yj-m3__combo {
  position: absolute;
  z-index: 12;
  display: grid;
  left: 50%;
  top: 50%;
  min-width: 130px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 14px;
  opacity: 0;
  color: #fff;
  background: rgba(7, 18, 31, .9);
  box-shadow: 0 0 30px rgba(255, 97, 74, .42);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.6);
}

.yj-m3__combo b { color: #ffd066; font: 900 25px/1 Consolas, monospace; text-shadow: 0 0 14px rgba(255, 173, 66, .6); }
.yj-m3__combo span { margin-top: 4px; color: #c4d7e3; font-size: 10px; letter-spacing: .17em; }
.yj-m3__combo.is-show { animation: yjM3Combo .75s ease forwards; }

.yj-m3__console {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(127, 190, 223, .17);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(16, 40, 62, .94), rgba(6, 17, 30, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 18px 35px rgba(0, 0, 0, .18);
}

.yj-m3__console-head { display: flex; align-items: center; gap: 8px; color: #8ba6ba; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.yj-m3__console-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--m3-green); box-shadow: 0 0 10px var(--m3-green); animation: yjM3Online 1s ease-in-out infinite alternate; }
.yj-m3__console-head b { margin-left: auto; color: var(--m3-green); font: 700 9px Consolas, monospace; }

.yj-m3__score {
  display: grid;
  margin: 13px 0;
  padding: 13px;
  border: 1px solid rgba(61, 217, 237, .17);
  border-radius: 14px;
  background: rgba(1, 12, 23, .56);
}

.yj-m3__score small { color: #768fa2; font-size: 10px; }
.yj-m3__score strong { margin: 3px 0; color: #60e3f4; font: 800 clamp(25px, 4vw, 36px)/1 Consolas, monospace; letter-spacing: .08em; text-shadow: 0 0 16px rgba(60, 215, 235, .4); }
.yj-m3__score span { color: #8ea4b3; font-size: 10px; }
.yj-m3__score span b { color: #ffd064; }

.yj-m3__radar {
  position: relative;
  overflow: hidden;
  width: min(142px, 70%);
  aspect-ratio: 1;
  margin: 2px auto 14px;
  border: 1px solid rgba(69, 219, 223, .28);
  border-radius: 50%;
  background:
    linear-gradient(rgba(74, 223, 218, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 223, 218, .09) 1px, transparent 1px),
    radial-gradient(circle, transparent 20%, rgba(58, 214, 210, .09) 21%, transparent 22%, transparent 43%, rgba(58, 214, 210, .09) 44%, transparent 45%),
    rgba(2, 20, 27, .8);
  background-size: 20px 20px, 20px 20px, auto, auto;
  box-shadow: inset 0 0 24px rgba(49, 215, 218, .12);
}

.yj-m3__radar::before,
.yj-m3__radar::after { position: absolute; background: rgba(87, 230, 223, .18); content: ""; }
.yj-m3__radar::before { width: 1px; inset-block: 0; left: 50%; }
.yj-m3__radar::after { height: 1px; inset-inline: 0; top: 50%; }
.yj-m3__radar > span { position: absolute; width: 50%; height: 50%; left: 50%; top: 0; transform-origin: 0 100%; background: conic-gradient(from 180deg at 0 100%, rgba(64, 231, 211, .45), transparent 32deg); animation: yjM3Radar 3.5s linear infinite; }
.yj-m3__radar i { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #ff765f; box-shadow: 0 0 8px #ff765f; }
.yj-m3__radar i:nth-child(1) { left: 28%; top: 38%; }
.yj-m3__radar i:nth-child(2) { left: 66%; top: 27%; }
.yj-m3__radar i:nth-child(3) { left: 59%; top: 70%; }

.yj-m3__intel { margin-bottom: 14px; padding: 11px 12px; border-left: 2px solid var(--m3-orange); background: rgba(255, 173, 66, .055); }
.yj-m3__intel > b { color: #f1f7fb; font-size: 12px; }
.yj-m3__intel p { margin: 6px 0 0; color: #8199aa; font-size: 10px; line-height: 1.55; }
.yj-m3__intel p span { color: #ffc467; font-weight: 800; }

.yj-m3__tools { display: grid; gap: 8px; margin-top: auto; }
.yj-m3__tools button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(118, 181, 213, .17);
  border-radius: 12px;
  color: #dcebf4;
  background: rgba(21, 47, 68, .65);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s, transform .2s;
}

.yj-m3__tools button:hover:not(:disabled) { border-color: rgba(64, 216, 235, .45); background: rgba(28, 66, 90, .82); transform: translateY(-1px); }
.yj-m3__tools button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.yj-m3__tools button:disabled { cursor: not-allowed; opacity: .36; }
.yj-m3__tools button > i { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #69e4f3; background: rgba(50, 208, 226, .1); font-size: 18px; font-style: normal; }
.yj-m3__tools button > span { display: grid; font-size: 12px; font-weight: 700; }
.yj-m3__tools small { color: #70899a; font-size: 9px; font-weight: 400; }

.yj-m3__status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 47px;
  margin-top: 18px;
  padding: 11px 15px;
  border: 1px solid rgba(113, 175, 204, .13);
  border-radius: 14px;
  color: #9cb1c0;
  background: rgba(6, 19, 32, .68);
  font-size: 12px;
  transition: border-color .2s, color .2s;
}

.yj-m3__status > i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #7a93a5; box-shadow: 0 0 8px #7a93a5; }
.yj-m3__status.is-good { border-color: rgba(76, 221, 159, .23); color: #b6decf; }
.yj-m3__status.is-good > i { background: var(--m3-green); box-shadow: 0 0 9px var(--m3-green); }
.yj-m3__status.is-bad { border-color: rgba(255, 80, 92, .27); color: #ffc1c6; }
.yj-m3__status.is-bad > i { background: var(--m3-red); box-shadow: 0 0 9px var(--m3-red); }

.yj-m3__fail {
  position: absolute;
  z-index: 30;
  display: grid;
  inset: 0;
  padding: 24px;
  place-items: center;
  background: rgba(3, 10, 18, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.yj-m3__fail[hidden] { display: none; }
.yj-m3__fail > div { width: min(420px, 100%); padding: 30px; border: 1px solid rgba(255, 105, 89, .35); border-radius: 24px; background: linear-gradient(145deg, #152b40, #081522); box-shadow: 0 28px 70px rgba(0, 0, 0, .45); text-align: center; }
.yj-m3__fail span { color: #ffb45f; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.yj-m3__fail h3 { margin: 8px 0; color: #fff; font-size: 28px; }
.yj-m3__fail p { margin: 0 0 20px; color: #91a8b8; font-size: 13px; line-height: 1.7; }
.yj-m3__fail button { padding: 11px 24px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #ff6b57, #e6334f); box-shadow: 0 9px 25px rgba(233, 54, 75, .3); cursor: pointer; font-weight: 800; }

@keyframes yjM3Swap { 50% { transform: scale(.86) rotate(3deg); } }
@keyframes yjM3Invalid { 20%, 60% { transform: translateX(-5px); filter: brightness(1.25) drop-shadow(0 0 7px #ff3857); } 40%, 80% { transform: translateX(5px); } }
@keyframes yjM3Clear { 35% { transform: scale(1.16); filter: brightness(1.55) drop-shadow(0 0 14px #fff); } 100% { opacity: 0; transform: scale(.2) rotate(18deg); filter: brightness(2); } }
@keyframes yjM3Charge { 50% { transform: scale(1.22); filter: brightness(1.5) drop-shadow(0 0 16px #fff); } }
@keyframes yjM3Fall { from { opacity: .25; transform: translateY(-23px) scale(.88); } }
@keyframes yjM3Hint { to { transform: scale(1.09); filter: brightness(1.28) drop-shadow(0 0 12px #fff75c); } }
@keyframes yjM3Shuffle { 50% { opacity: .25; transform: scale(.65) rotate(16deg); } }
@keyframes yjM3Bomb { to { transform: scale(1.12) rotate(16deg); box-shadow: 0 0 0 2px #fff, 0 0 22px #ff7c3f; } }
@keyframes yjM3Combo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); } 20%, 65% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -65%) scale(1.08); } }
@keyframes yjM3Radar { to { transform: rotate(360deg); } }
@keyframes yjM3Online { to { opacity: .45; } }

@media (max-width: 820px) {
  .yj-m3 { min-height: 0; padding: 20px; border-radius: 22px; }
  .yj-m3__layout { grid-template-columns: 1fr; }
  .yj-m3__console { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .yj-m3__console-head { grid-column: 1 / -1; }
  .yj-m3__score { margin: 0; }
  .yj-m3__radar { display: none; }
  .yj-m3__intel { margin: 0; }
  .yj-m3__tools { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .yj-m3 { padding: 14px 10px 16px; border-radius: 17px; }
  .yj-m3__topline { gap: 10px; }
  .yj-m3__mission p { font-size: 12px; }
  .yj-m3__meter { min-width: 85px; padding: 10px 12px; }
  .yj-m3__meter strong { font-size: 28px; }
  .yj-m3__goals { gap: 5px; }
  .yj-m3__goal { gap: 6px; padding: 7px 7px 10px; border-radius: 11px; }
  .yj-m3__goal > i { flex-basis: 28px; width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
  .yj-m3__goal small { font-size: 8px; }
  .yj-m3__goal b { font-size: 9px; }
  .yj-m3__goal em { font-size: 15px; }
  .yj-m3__board-wrap { padding: 7px; border-radius: 17px; }
  .yj-m3__board { gap: 3px; padding: 5px; border-radius: 12px; }
  .yj-m3__tile-face > small { display: none; }
  .yj-m3__tile-face > b { font-size: clamp(15px, 6vw, 24px); }
  .yj-m3__special--bomb { width: 18px; height: 18px; font-size: 10px; }
  .yj-m3__console { grid-template-columns: 1fr; padding: 12px; }
  .yj-m3__console-head, .yj-m3__tools { grid-column: auto; }
  .yj-m3__intel { display: none; }
  .yj-m3__status { margin-top: 11px; font-size: 10px; }
}

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