/* BOSS WORK - modes.css : ENDLESS / NEW GAME+ title row, onboarding gate + hint, endless game-over card, NG+ HUD badge (js/modes.js) */

/* ---------- title menu: compact when crowded, one row for the extra modes ---------- */
.tt-menu.md-dense { top: 350px; gap: 7px; }
.tt-menu.md-dense > button { font-size: 22px; padding-top: 8px; padding-bottom: 8px; }
.tt-menu.md-dense ~ .tt-warn { left: auto; right: 180px; bottom: 36px; }     /* a long menu needs the bottom-left corner */
.tt-menu .md-row { display: flex; gap: 10px; }
.tt-menu .md-row button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  font-size: 21px; padding: 6px 12px 6px 16px; white-space: nowrap; }
.tt-menu .md-row button small { margin-left: 0; font-size: 11px; letter-spacing: .12em; }
.tt-menu .md-row button:hover::before, .tt-menu .md-row button:focus-visible::before { display: none; }
.tt-menu .md-row button.md-plus { background: linear-gradient(#fff3a0, #ffd36e); }
.tt-menu .md-row button.md-locked { position: relative; padding-right: 44px; }
.tt-menu .md-row button.md-locked .md-lock { position: absolute; right: 10px; top: 50%; width: 26px; height: 26px; margin-top: -13px; }
html.portrait .tt-menu.md-dense { gap: 12px; }
html.portrait .tt-menu.md-dense > button { font-size: 28px; padding-top: 14px; padding-bottom: 14px; }
html.portrait .tt-menu .md-row button { font-size: 27px; padding: 12px 16px 12px 20px; }
html.portrait .tt-menu .md-row button small { font-size: 13px; }

/* ---------- NEW GAME+ badge on the HUD day pill ---------- */
#hud.ngplus .hud-day { position: relative; }
#hud.ngplus .hud-day::after { content: '+'; position: absolute; right: -8px; top: -17px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 900 21px/1 var(--font-cute); color: var(--ink-a);
  background: #ffd36e; border: 2px solid var(--ink-a); box-shadow: 0 3px 0 var(--ink-a); }

/* ---------- onboarding: the first command waits for you ---------- */
.md-gate { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(58,36,51,.42);
  animation: md-in .25s ease-out both; }
.md-gate.out { animation: md-out .22s ease-in both; }
@keyframes md-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes md-out { to { opacity: 0; transform: scale(1.04); } }
.md-card { width: 640px; max-width: calc(100% - 40px); box-sizing: border-box; padding: 22px 34px 26px; border-radius: 26px; background: var(--cream); border: 3px solid var(--ink-a);
  box-shadow: 0 8px 0 var(--ink-a), 0 24px 70px rgba(58,36,51,.35); color: var(--ink-a); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  animation: md-pop .4s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes md-pop { from { transform: scale(.6) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.md-kick { font: 900 14px var(--font-cute); letter-spacing: .3em; background: var(--butter); border: 2px solid var(--ink-a); border-radius: 999px; padding: 3px 14px; }
.md-cmd { font: 400 84px/1 var(--font-display); color: #fff; -webkit-text-stroke: 4px var(--ink-a); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink-a);
  transform: rotate(-4deg) skewX(-8deg); letter-spacing: .02em; white-space: nowrap; }
.md-mid { display: flex; align-items: center; gap: 22px; text-align: left; }
.md-how { display: flex; flex-direction: column; gap: 4px; max-width: 300px; }
.md-how b { font: 900 30px/1 var(--font-cute); letter-spacing: .08em; color: #ff4f86; }
.md-how span { font: 800 18px/1.3 var(--font-cute); }
.md-bomb { display: flex; align-items: center; gap: 10px; font: 800 15px/1.3 var(--font-cute); color: #7a3a5a; text-align: left; max-width: 520px; }
.md-bico { width: 38px; height: 38px; flex: none; }
.md-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.md-go { min-width: 180px; }
.md-skip { font-size: 15px !important; }

/* the drawn input, moving */
.md-demo, .md-hint { position: relative; width: 112px; height: 112px; flex: none; }
.md-demo .md-hand, .md-hint .md-hand { position: absolute; inset: 12px; filter: drop-shadow(0 4px 0 rgba(58,36,51,.35)); }
.md-ring { position: absolute; left: 50%; top: 26%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 4px solid #ff4f86; opacity: 0; }
.ctl-tap .md-hand { animation: md-tap 1s ease-in-out infinite; }
.ctl-tap .md-ring { animation: md-ripple 1s ease-out infinite; }
.ctl-mash .md-hand { animation: md-tap .3s ease-in-out infinite; }
.ctl-mash .md-ring { animation: md-ripple .3s ease-out infinite; }
.ctl-hold .md-hand { animation: md-hold 2s ease-in-out infinite; }
.ctl-hold .md-ring { animation: md-fill 2s ease-in-out infinite; }
.ctl-drag .md-hand { animation: md-drag 1.8s ease-in-out infinite; }
.ctl-swipe .md-hand { animation: md-swipe 1.1s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes md-tap { 0%, 100% { transform: translateY(-6px); } 45% { transform: translateY(5px) scale(.94); } }
@keyframes md-ripple { 0%, 40% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes md-hold { 0%, 100% { transform: translateY(-6px); } 20%, 80% { transform: translateY(5px) scale(.94); } }
@keyframes md-fill { 0%, 18% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(.6); } 78% { opacity: 1; transform: scale(1.7); background: rgba(255,79,134,.35); } 85%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes md-drag { 0%, 100% { transform: translateX(-26px) translateY(4px); } 50% { transform: translateX(26px) translateY(4px); } }
@keyframes md-swipe { 0% { transform: translateX(-34px) rotate(-8deg); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateX(34px) rotate(6deg); opacity: 1; } 75%, 100% { transform: translateX(40px); opacity: 0; } }

/* games 2-3: the same drawn input in the corner (top-right is the pause button) */
.md-hint { position: absolute; left: 18px; top: 18px; z-index: 6; width: 78px; height: 78px; border-radius: 20px; background: rgba(255,247,240,.92); border: 3px solid var(--ink-a);
  box-shadow: 0 5px 0 var(--ink-a); pointer-events: none; animation: md-pop .3s cubic-bezier(.2,.9,.3,1.2) both; }
.md-hint .md-hand { inset: 10px; }
.md-hint .md-ring { top: 30%; }

html.portrait .md-card { width: 620px; padding: 26px 30px 30px; gap: 18px; }
html.portrait .md-cmd { font-size: 92px; }
html.portrait .md-mid { flex-direction: column; text-align: center; gap: 14px; }
html.portrait .md-how { align-items: center; max-width: 520px; }
html.portrait .md-how span { font-size: 22px; }
html.portrait .md-bomb { font-size: 18px; }
html.portrait .md-go { min-width: 240px; }

/* ---------- endless game over ---------- */
.md-over { align-items: center; text-align: center; }
.md-score { font: 400 120px/1 var(--font-display); color: #fff; -webkit-text-stroke: 4px var(--ink-a); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink-a); }
.md-label { font: 900 16px var(--font-cute); letter-spacing: .3em; }
.md-newbest { font: 900 26px/1 var(--font-cute); letter-spacing: .1em; color: var(--ink-a); background: #ffd36e; border: 3px solid var(--ink-a); border-radius: 14px;
  padding: 8px 18px; box-shadow: 0 5px 0 var(--ink-a); transform: rotate(-4deg); animation: md-best 1.2s ease-in-out infinite; }
@keyframes md-best { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(-2deg) scale(1.08); } }
.md-bestline { font: 900 18px var(--font-cute); letter-spacing: .2em; color: #7a3a5a; }

@media (prefers-reduced-motion: reduce) {
  .md-hand, .md-ring, .md-newbest { animation: none !important; }
  .md-ring { opacity: 1; }
}