.course-menu {
  position: fixed;
  inset: 0;
  z-index: 12030;
  pointer-events: none;
  font-family: "Andika", sans-serif;
}
.course-menu-button {
  position: fixed;
  top: max(.65rem, env(safe-area-inset-top, 0px));
  left: max(.65rem, env(safe-area-inset-left, 0px));
  z-index: 12050;
  box-sizing: border-box !important;
  
  width: clamp(2.4rem,6.4vw,3.5rem) !important;
  min-width: clamp(2.4rem,6.4vw,3.5rem) !important;
  max-width: clamp(2.4rem,6.4vw,3.5rem) !important;

  aspect-ratio: 1;
  margin: 0 !important;
  padding: .72rem !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,250,223,.96) !important;
  box-shadow: 0 .25rem .7rem rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  cursor:pointer;
  pointer-events:auto;
}
.course-menu-button span {
  display:block;
  width:100%;
  height:3px;
  background:#4b2c18;
  border-radius:999px;
}
.course-menu-panel {
  position:fixed;
  top:0;
  left:0;
  z-index:12040;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  padding:calc(max(.8rem,env(safe-area-inset-top,0px)) + .6rem)
          max(.8rem,env(safe-area-inset-right,0px))
          1.15rem
          max(.8rem,env(safe-area-inset-left,0px));
  border:0;
  border-bottom:clamp(.65rem,2vw,1.1rem) solid #6f3e1c;
  border-radius:0;
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.12) 0 .08rem,transparent .1rem),
    radial-gradient(circle at 76% 62%,rgba(71,37,14,.12) 0 .09rem,transparent .11rem),
    linear-gradient(95deg,rgba(255,255,255,.06),transparent 35%,rgba(58,29,11,.06)),
    #b77a3e;
  background-size:1.25rem 1.25rem,1.55rem 1.55rem,auto,auto;
  box-shadow:inset 0 -.22rem 0 #a86732,0 .8rem 1.5rem rgba(0,0,0,.34);
  pointer-events:auto;
}
.course-menu-panel[hidden]{display:none}
.course-menu-panel button,
.course-demo-toggle {
  box-sizing:border-box;
  display:block;
  width:min(92%,22rem) !important;
  margin:.55rem auto !important;
  padding:.75rem .7rem !important;
  border:0 !important;
  border-radius:.18rem .3rem .2rem .25rem !important;
  background:#fff4bd !important;
  box-shadow:0 .3rem .55rem rgba(44,24,9,.3);
  color:#332515;
  text-align:center;
  font:700 clamp(.78rem,2.5vw,1.15rem)/1.15 "Andika",sans-serif;
  cursor:pointer;
}
.course-menu-panel button:nth-of-type(2n){background:#c8e9f3 !important}
.course-menu-panel button:nth-of-type(3n){background:#d7efc4 !important}
.course-demo-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  background:#f5d4dc !important;
}
.course-demo-toggle input{width:1.15rem;height:1.15rem;margin:0}


/* Child-friendly notice-board menu: irregular pinned paper notes. */
.course-menu-panel button,
.course-demo-toggle {
  position: relative;
  transform-origin: center;
}
.course-menu-panel button::before,
.course-demo-toggle::before {
  content: "";
  position: absolute;
  top: .18rem;
  left: 50%;
  width: .56rem;
  height: .56rem;
  border-radius: 50%;
  background: #b6382d;
  box-shadow: inset -.08rem -.1rem .08rem rgba(0,0,0,.28),
              0 .08rem .12rem rgba(0,0,0,.28);
  transform: translateX(-50%);
}
.course-menu-panel button:nth-of-type(3n+1) { transform: rotate(-1.8deg); }
.course-menu-panel button:nth-of-type(3n+2) { transform: rotate(1.3deg); }
.course-menu-panel button:nth-of-type(3n)   { transform: rotate(-.7deg); }
.course-demo-toggle { transform: rotate(1.1deg); }

.course-menu-panel button:nth-of-type(4n+1) {
  clip-path: polygon(1% 2%, 99% 0, 98% 97%, 3% 100%);
}
.course-menu-panel button:nth-of-type(4n+2) {
  clip-path: polygon(2% 0, 98% 2%, 100% 96%, 1% 99%);
}
.course-menu-panel button:nth-of-type(4n+3) {
  clip-path: polygon(0 3%, 99% 1%, 97% 100%, 2% 98%);
}
.course-demo-toggle {
  clip-path: polygon(1% 1%, 98% 0, 100% 97%, 2% 100%);
}


/* Closed course control inside the shared 10/80/10 course canvas.
   The opened notice-board panel intentionally remains a viewport overlay. */
.canvas-layout .course-menu {
  position: absolute;
  inset: 0;
}
.canvas-layout .course-menu-button {
  position: absolute;
  top: calc(var(--canvas-unit) * 2) !important;
  left: calc(var(--canvas-unit) * 1.5) !important;
  width: calc(var(--canvas-unit) * 7) !important;
  min-width: calc(var(--canvas-unit) * 7) !important;
  max-width: calc(var(--canvas-unit) * 7) !important;
  padding: calc(var(--canvas-unit) * 1.4) !important;
  box-shadow: 0 calc(var(--canvas-unit) * .6) calc(var(--canvas-unit) * 1.7) rgba(0,0,0,.28);
}
.canvas-layout .course-menu-button span {
  height: calc(var(--canvas-unit) * .45);
}