/* Меню «Проспал!»: школьная доска с названием, счётчики в синей рамке, герой во дворе, большая «Играть», круглые кнопки. База 390 x 700. */
.m3 { --frame-a: #ffb347; --frame-b: #e07a1f; --frame-c: #a8520c; --edge: #4a1f00; --board-a: #1f8a5a; --board-b: #136b44; --chalk: #f3f7ea;
  --play-a: #ffc233; --play-b: #ff8a00; --play-c: #f25c00; --play-d: #ff7a00; --play-rim: #ffd98a; --play-edge: #7a2a00; --play-deep: #3a1200;
  --screen-a: #0b1440; --screen-b: #182a6b; --num: #ffe27a; --num-glow: rgba(255, 200, 40, .65); --label: #ffffff;
  position: absolute; inset: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 900; }
.m3-hero { position: absolute; left: 40px; top: 190px; width: 310px; height: 290px; touch-action: none; }

.m3-top { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; justify-content: space-between; }
.m3-stat { position: relative; display: flex; align-items: center; height: 40px; padding: 3px 3px 3px 26px; margin-left: 16px; border-radius: 12px;
  background: linear-gradient(#5fb0ff, #1e63d8 55%, #1747a8); border: 2px solid #0b1f5c; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #0b1f5c, 0 7px 10px rgba(0, 0, 0, .35); }
.m3-stat svg { position: absolute; left: -20px; top: -6px; width: 46px; height: 46px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45)); }
.m3-val { min-width: 78px; height: 100%; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; justify-content: flex-end;
  background: linear-gradient(var(--screen-a), var(--screen-b)); box-shadow: inset 0 2px 4px #000, inset 0 -1px 0 rgba(255, 255, 255, .15);
  color: var(--num); font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: .5px; text-shadow: 0 0 8px var(--num-glow); }
.m3-stat * { pointer-events: none; }
.m3-plus { width: 28px; height: 28px; margin-left: 3px; border-radius: 8px; border: 2px solid #0d4a14; position: relative; padding: 0;
  background: linear-gradient(#7df067, #1f9e2c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 0 #0b3510; }
.m3-plus::before, .m3-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px; }
.m3-plus::before { width: 12px; height: 4px; margin: -2px 0 0 -6px; } .m3-plus::after { width: 4px; height: 12px; margin: -6px 0 0 -2px; }
.dot { position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a80, #e00020 70%); border: 2px solid #fff; display: none; }
.dot.on { display: block; animation: dotp 1s ease-in-out infinite; }
@keyframes dotp { 50% { transform: scale(1.25); } }

/* школьная доска в деревянной раме, мел внизу */
.m3-plate { position: absolute; left: 50%; top: 58px; width: 334px; margin-left: -167px; padding: 12px 0 14px; border-radius: 10px; line-height: 0;
  background: radial-gradient(ellipse at 40% 30%, #2aa86d, var(--board-a) 45%, var(--board-b)); border: 8px solid var(--frame-b);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 6px 14px rgba(0, 0, 0, .35), 0 0 0 2px var(--edge), 0 3px 0 2px var(--frame-c), 0 8px 0 2px var(--edge), 0 14px 22px rgba(0, 0, 0, .45); }
.m3-plate::before { content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 30%; border-radius: 8px; background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); pointer-events: none; }
.m3-plate i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d0, #a8520c 70%); box-shadow: 0 1px 1px #000; }
.m3-plate i:nth-child(1) { left: -6px; top: -6px; } .m3-plate i:nth-child(2) { right: -6px; top: -6px; } .m3-plate i:nth-child(3) { left: -6px; bottom: -6px; } .m3-plate i:nth-child(4) { right: -6px; bottom: -6px; }
.m3-plate .chalk { position: absolute; left: 30px; bottom: -14px; width: 270px; height: 10px; border-radius: 3px; background: linear-gradient(var(--frame-a), var(--frame-c)); box-shadow: 0 2px 0 var(--edge); }
.m3-plate .chalk::before { content: ""; position: absolute; left: 40px; top: -6px; width: 34px; height: 8px; border-radius: 4px; background: #fffdf0; box-shadow: 46px 1px 0 -1px #ffd0e0, 190px 0 0 #d6f0ff; }
#m3-title { position: relative; display: flex; justify-content: center; }

.m3-bubble { position: absolute; left: 150px; top: 236px; max-width: 210px; padding: 8px 12px; border-radius: 16px; background: #fff; color: #1b2a6b; font-size: 14px; font-weight: 800; line-height: 1.25;
  border: 3px solid #1b2a6b; box-shadow: 0 4px 0 #1b2a6b; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 5; }
.m3-bubble.show { opacity: 1; transform: scale(1); }
.m3-bubble::after { content: ""; position: absolute; left: 22px; bottom: -14px; border: 9px solid transparent; border-top-color: #1b2a6b; }

.m3-menu { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.m3-guest { display: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: rgba(13, 25, 80, .78); color: #ffe9a8; font-size: 12px; font-weight: 700; }
.m3-guest.show { display: flex; }
.m3-play { position: relative; width: 286px; height: 74px; border-radius: 20px; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 0;
  background: linear-gradient(var(--play-a), var(--play-b) 48%, var(--play-c) 52%, var(--play-d));
  box-shadow: 0 0 0 3px var(--play-edge), 0 0 0 6px var(--play-rim), 0 0 0 8px var(--play-edge), 0 10px 0 8px var(--play-deep), 0 22px 24px rgba(0, 0, 0, .5);
  transition: transform .06s; animation: m3pulse 1.7s ease-in-out infinite; margin-bottom: 8px; }
.m3-play::before { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 34%; border-radius: 14px; background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .1)); pointer-events: none; }
.m3-play:active { transform: translateY(6px); }
.m3-play > * { position: relative; pointer-events: none; }
.m3-tut { height: 40px; min-width: 200px; padding: 0 18px; border-radius: 14px; border: 3px solid #0b1f5c; color: #fff; font: inherit; font-size: 17px; font-weight: 900; letter-spacing: .3px;
  background: linear-gradient(#6fc0ff, #1e88e5 55%, #1565c0); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #0b1f5c; text-shadow: 0 2px 0 #0b1f5c; }
.m3-tut:active { transform: translateY(3px); }
.m3-row { display: flex; gap: 8px; margin-top: 4px; }
.m3-rb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; background: none; border: 0; padding: 0; color: var(--label); font: inherit; font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,.6); }
.m3-rb b { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #14161a;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 4px 0 #14161a, 0 8px 10px rgba(0, 0, 0, .4); transition: transform .06s; }
.m3-rb:active b { transform: translateY(4px); }
.m3-rb * { pointer-events: none; }
.m3-rb .dot { right: 2px; top: -2px; }
.m3-g b { background: radial-gradient(circle at 35% 25%, #8df27a, #1f9e2c 70%); }
.m3-r b { background: radial-gradient(circle at 35% 25%, #ff9aa8, #e0203c 70%); }
.m3-s b { background: radial-gradient(circle at 35% 25%, #ffe98a, #e0a100 70%); }
.m3-b b { background: radial-gradient(circle at 35% 25%, #8fd8ff, #1877d8 70%); }
.m3-p b { background: radial-gradient(circle at 35% 25%, #8ff5e4, #00a58e 70%); }
.mult { color: #fff; font-size: 19px; font-weight: 900; text-shadow: 0 2px 0 #7a0010, 0 0 6px rgba(0,0,0,.4); }
@keyframes m3pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }