/* One button style for the whole site: the soft 3D orange pill from the landing page's start button.
   Only the size (padding / min-width / font-size) is set per place, in the page's own css. */
:root{--b-top:#ffd36b;--b-mid:#ffb02e;--b-bot:#ff9418;--b-edge:#c46a0d;--b-ink:#5a2a05}
.btn,.btn.sun,.btn.ghost,.btn.start,.hs-go,.m-next,.m-skip,.kbtn,.kbtn.main,.kbtn.ghost,.speak,.speak2,
.dock .btn,.les-dock .btn,.copy-b .btn,.tutor .btn,.nav .btn{
  border:0!important;border-radius:999px!important;
  background:linear-gradient(180deg,var(--b-top) 0%,var(--b-mid) 55%,var(--b-bot) 100%)!important;
  color:var(--b-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.55);font-weight:800;
  box-shadow:0 6px 0 var(--b-edge),0 11px 16px rgba(90,40,0,.26),inset 0 3px 0 rgba(255,255,255,.65),inset 0 -4px 6px rgba(200,100,0,.35)!important;
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.btn:hover:not(:disabled):not([aria-disabled="true"]),.hs-go:hover,.m-next:hover,.m-skip:hover,.kbtn:hover,.speak:hover,.speak2:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:active:not(:disabled),.hs-go:active,.m-next:active,.m-skip:active,.kbtn:active,.speak:active,.speak2:active,
.dock .btn:active:not(:disabled),.les-dock .btn:active:not(:disabled),.copy-b .btn:active,.tutor .btn:active{
  transform:translateY(4px);margin-top:0;
  box-shadow:0 2px 0 var(--b-edge),0 4px 6px rgba(90,40,0,.22),inset 0 3px 0 rgba(255,255,255,.55)!important}
.btn:disabled,.btn[aria-disabled="true"],.tutor .btn[aria-disabled="true"]{
  background:linear-gradient(180deg,#e4e8ea 0%,#cfd5d8 55%,#c0c7cb 100%)!important;color:#7b878d!important;text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:0 5px 0 #a3adb2,inset 0 3px 0 rgba(255,255,255,.7)!important;cursor:default;filter:none;transform:none}
.speak svg{stroke:var(--b-ink)}
.m-skip{box-shadow:0 4px 0 var(--b-edge),inset 0 2px 0 rgba(255,255,255,.65)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:disabled,:root:not([data-theme="light"]) .btn[aria-disabled="true"]{background:linear-gradient(180deg,#46545c,#38454c)!important;color:#93a2a9!important;box-shadow:0 5px 0 #263137!important;text-shadow:none}}
:root[data-theme="dark"] .btn:disabled,:root[data-theme="dark"] .btn[aria-disabled="true"]{background:linear-gradient(180deg,#46545c,#38454c)!important;color:#93a2a9!important;box-shadow:0 5px 0 #263137!important;text-shadow:none}

/* ---- 3D icons (replace the old flat SVG ones) ---- */
.hs-dot.lock img{width:22px;height:auto;display:block;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.hs-lockic{width:min(11vmin,64px)}
.speak img,.icon-btn img,.icon-btn>img{display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.speak img{width:28px;height:28px}
.unit-stars{align-items:center}.unit-stars img{width:22px;height:22px;display:block}
.lesson-stars img,.stars img{display:block}
.stars img:not([style]){width:56px;height:56px}
/* right / wrong marks on answer buttons */
.lopt.ok,.lopt.bad,.opt.ok,.opt.bad{position:relative}
.lopt.ok::after,.lopt.bad::after,.opt.ok::after,.opt.bad::after{content:"";position:absolute;top:-12px;inset-inline-start:-10px;width:34px;height:34px;background:url(../img/ui/check.webp) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));animation:markpop .35s cubic-bezier(.34,1.56,.64,1) both}
.lopt.bad::after,.opt.bad::after{background-image:url(../img/ui/cross.webp)}
@keyframes markpop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lopt.ok::after,.lopt.bad::after,.opt.ok::after,.opt.bad::after{animation:none}}

/* ---- house dots: 3D discs (orange = done, blue = now, grey + lock = locked) ---- */
.hs-dot{width:42px;height:42px;border:0;border-radius:50%;background:center/contain no-repeat url(../img/ui/disc-open.webp);box-shadow:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));text-shadow:0 1px 2px rgba(0,0,0,.45);line-height:1;padding:0 0 2px}
.hs-dot.done{background:center/contain no-repeat url(../img/ui/disc-done.webp)}
.hs-dot.now{background:center/contain no-repeat url(../img/ui/disc-now.webp)}
.hs-dot.lock{background:center/contain no-repeat url(../img/ui/disc-lock.webp)}
.hs-dot.lock img{width:20px;margin-top:2px}
.hs-dot.cur{transform:scale(1.2);box-shadow:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 3px 3px rgba(0,0,0,.35))}
@media (max-width:520px){.hs-dot{width:36px;height:36px;font-size:15px}.hs-dot.lock img{width:17px}}
/* level chip gets the star coin */
.rd-lv::before{content:"";display:inline-block;width:18px;height:18px;margin-inline-end:6px;vertical-align:-4px;background:url(../img/ui/star-badge.webp) center/contain no-repeat}
/* sound buttons are the 3D blue / grey discs now */
#pMute,#mute{width:46px;height:46px;border:0!important;background:none!important;box-shadow:none!important;padding:0}
#pMute img,#mute img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}