/* Skesia 3D buttons, in the spirit of Synty INTERFACE Modern Menus: a slanted slab with a light top face,
   a bevel highlight and a thick side in a darker shade of the same colour (it sinks when pressed).
   Shared by every Skesia mini-game: copy this file as is. Markup: <button class="btn [green|lilac|white|small]"><span class="t">Texte</span></button>
   Optional icon on the left: <i class="badge play"></i> (play / reload) as the first child, then add class "has-badge".
   Icon paths are relative to this file (assets/ui/), so they are declared here, not in the page. */
.btn { --face: #ff9a3c; --face2: #f0640f; --side: #a63e0a; --ink: #fff; --shade: var(--side);
  position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 58px; padding: 0 30px; margin: 0 0 7px; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; vertical-align: middle;
  font: 600 22px Fredoka, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-shadow: 0 2px 0 var(--shade);
  background: linear-gradient(180deg, var(--face), var(--face2));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.08), 0 7px 0 var(--side), 0 13px 18px rgba(0,0,0,.32);
  transform: skewX(-8deg); transition: transform .1s, box-shadow .1s, filter .15s; -webkit-tap-highlight-color: transparent; user-select: none; }
.btn > .t { display: inline-flex; align-items: center; gap: 8px; transform: skewX(8deg); } /* the text stays upright */
.btn:hover:not(:disabled):not(.done) { filter: brightness(1.06); transform: skewX(-8deg) translateY(-2px);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.08), 0 9px 0 var(--side), 0 16px 20px rgba(0,0,0,.32); }
.btn:active:not(:disabled):not(.done) { transform: skewX(-8deg) translateY(5px);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.08), 0 2px 0 var(--side), 0 4px 8px rgba(0,0,0,.3); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.btn.green { --face: #5ee08a; --face2: #22a851; --side: #12703a; }
.btn.purple { --face: #9466dc; --face2: #6a3db3; --side: #432277; }
.btn.lilac { --face: #fbf8ff; --face2: #e6dcfb; --side: #a28bd6; --ink: #7445bb; --shade: rgba(255,255,255,.8); }
.btn.white { --face: #fff; --face2: #ece8f4; --side: #b3abc8; --ink: #7445bb; --shade: rgba(255,255,255,.8); }
.btn:disabled, .btn.done { --face: #f1eef6; --face2: #ddd8e6; --side: #b1abc0; --ink: #8b86a0; --shade: rgba(255,255,255,.8); cursor: default; }
.btn.small { height: 46px; padding: 0 20px; font-size: 17px; border-radius: 7px; }
/* icon on the left end: a white Modern Menus icon, with the same shadow as the text */
.btn.has-badge { padding-left: 54px; }
.btn .badge { position: absolute; left: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; transform: skewX(8deg); filter: drop-shadow(0 2px 0 var(--shade)); }
.btn .badge::after { content: ''; display: block; width: 100%; height: 100%; background: var(--ink); -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.btn.small.has-badge { padding-left: 42px; } .btn.small .badge { left: 14px; width: 22px; height: 22px; margin-top: -11px; }
.badge.play { --img: url(mm/i_play.webp); } .badge.reload { --img: url(mm/i_reload.webp); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }