/* TapetIdle — modern clicker UI (no libs) */

:root{
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* dynamic from settings */
  --fontSize: 34px;
  --boxH: 320px;
  --boxW: 980px;

  --radius: 18px;
  --radius2: 26px;

  --ease: cubic-bezier(.2,.9,.2,1);

  /* defaults (dark) */
  --bg0: #070A12;
  --bg1: #0A1020;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.11);

  --text: #EAF0FF;
  --muted: rgba(234,240,255,.72);
  --muted2: rgba(234,240,255,.52);

  --a1: #7C5CFF;
  --a2: #31D7FF;
  --a3: #2BF39B;
  --ok: #2BF39B;
  --bad: #FF4D7D;
  --warn:#FFB020;

  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --shadow2: 0 10px 24px rgba(0,0,0,.22);
}

/* themes */
html[data-theme="mid"]{
  --bg0:#0A1020;
  --bg1:#111A33;
  --panel: rgba(255,255,255,.08);
  --panel2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.14);
  --text:#F2F6FF;
  --muted: rgba(242,246,255,.76);
  --muted2: rgba(242,246,255,.56);
  --a1:#8E7CFF;
  --a2:#43D7FF;
  --a3:#3AF7AE;
  --shadow: 0 20px 70px rgba(0,0,0,.38);
}

html[data-theme="light"]{
  --bg0:#F5F7FF;
  --bg1:#EEF2FF;
  --panel: rgba(10,16,32,.06);
  --panel2: rgba(10,16,32,.04);
  --stroke: rgba(10,16,32,.10);

  --text:#0A1020;
  --muted: rgba(10,16,32,.66);
  --muted2: rgba(10,16,32,.46);

  --a1:#5B3BFF;
  --a2:#008CFF;
  --a3:#12B981;
  --ok:#12B981;
  --bad:#E53961;

  --shadow: 0 18px 60px rgba(10,16,32,.12);
  --shadow2: 0 10px 24px rgba(10,16,32,.10);
}

/* Default = light when no data-theme is set (static pages + tapetype) */
html:not([data-theme]){
  --bg0:#F5F7FF;
  --bg1:#EEF2FF;
  --panel: rgba(10,16,32,.06);
  --panel2: rgba(10,16,32,.04);
  --stroke: rgba(10,16,32,.10);

  --text:#0A1020;
  --muted: rgba(10,16,32,.66);
  --muted2: rgba(10,16,32,.46);

  --a1:#5B3BFF;
  --a2:#008CFF;
  --a3:#12B981;
  --ok:#12B981;
  --bad:#E53961;

  --shadow: 0 18px 60px rgba(10,16,32,.12);
  --shadow2: 0 10px 24px rgba(10,16,32,.10);
}


*{ box-sizing:border-box; }
html,body{
  min-height:100%;
}
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 12% 0%, color-mix(in srgb, var(--a1) 30%, transparent), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--a2) 24%, transparent), transparent 55%),
    radial-gradient(900px 700px at 60% 100%, color-mix(in srgb, var(--a3) 14%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color:inherit; }

/* Layout */
/* Reserve space for the fixed backline (footer bar). */
.app{ min-height:100vh; display:flex; flex-direction:column; padding-bottom: 92px; }
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg1) 55%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top:0;
  z-index: 50;
}

.brand{ display:flex; align-items:center; gap:12px; min-width: 260px; }
.logo{
  width:40px; height:40px;
  border-radius: 14px;
  overflow:hidden;

  /* show your site logo */
  background:
    url("../logo.png") center/contain no-repeat,
    linear-gradient(135deg, var(--a1), var(--a2));

  box-shadow: 0 10px 26px color-mix(in srgb, var(--a1) 25%, transparent);

  /* hide the fallback letters (TI/TT) */
  font-size: 0;
}

.brandText .title{ font-weight: 900; letter-spacing:-.02em; }
.brandText .subtitle{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.main{
  
  flex:1;
display:grid;
  grid-template-columns: 1.55fr .75fr;
  gap: 16px;
  padding: 16px;
  align-items:start;
}

.panel{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 14px;
}

.side{ display:flex; flex-direction:column; gap:12px; }

.card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.cardTitle{ font-weight: 900; letter-spacing:-.01em; }
.cardDesc{ color: var(--muted); margin-top: 6px; }
.cardFoot{ margin-top: 10px; font-size: 12px; }

.bullets{ margin:10px 0 0; padding-left: 18px; color: var(--muted); }
.bullets li{ margin: 6px 0; }

.hudline{ display:flex; align-items:center; gap: 18px; flex:1; justify-content:center; }
.hudMain{ position:relative; text-align:center; min-width: 210px; }
.hudLabel{ font-size: 12px; color: var(--muted); font-weight: 800; }
.hudPoints{
  font-size: 64px;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.0;
  background: linear-gradient(90deg, var(--a3), var(--a2), var(--a1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow:
    0 0 18px color-mix(in srgb, var(--a3) 25%, transparent),
    0 0 26px color-mix(in srgb, var(--a2) 20%, transparent),
    0 0 34px color-mix(in srgb, var(--a1) 18%, transparent);
}
.hudBump{
  position:absolute; inset:-6px -10px -10px -10px;
  border-radius: 22px;
  pointer-events:none;
  opacity:0;
  transform: scale(.98);
  background: radial-gradient(70% 70% at 50% 50%,
    color-mix(in srgb, var(--a2) 18%, transparent),
    transparent 60%);
}
body.bumpScore .hudBump{
  opacity: 1;
  animation: bump 140ms var(--ease);
}
@keyframes bump{
  0%{ transform: scale(.98); }
  60%{ transform: scale(1.03); }
  100%{ transform: scale(1.00); }
}

.hudMini{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; justify-content:center; }
.hudItem{
  background: var(--panel2);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 8px 10px;
  display:flex; gap: 8px;
  align-items:baseline;
}
.hudItem .k{ font-size: 11px; color: var(--muted2); font-weight: 800; }
.hudItem .v{ font-weight: 900; }

.actions{ display:flex; gap:12px; align-items:center; }
.actionsGroup{ display:flex; gap:10px; align-items:center; }
.btn{
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--panel2) 90%, transparent);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 900;
  transition: transform 120ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease);
}
.btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--a2) 26%, var(--stroke)); }
.btn:active{ transform: translateY(0px) scale(.98); }
.btnPrimary{
  background: linear-gradient(135deg, var(--a1), var(--a2));
  border-color: transparent;
  color:#fff;
}
.btnDanger{
  background: linear-gradient(135deg, var(--bad), color-mix(in srgb, var(--bad) 65%, #000));
  border-color: transparent;
  color:#fff;
}
.btnGhost{
  background: transparent;
}
.btnSoft{
  background: color-mix(in srgb, var(--a2) 10%, var(--panel2));
}
.btnGlow{
  background: linear-gradient(135deg, var(--a3), var(--a2));
  border-color: transparent;
  color:#0b1020;
}
.w100{ width:100%; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.chipGlow{
  color: var(--text);
  background: color-mix(in srgb, var(--a2) 16%, var(--panel2));
  border-color: color-mix(in srgb, var(--a2) 28%, var(--stroke));
}
.chipPause{
  background: color-mix(in srgb, var(--warn) 16%, var(--panel2));
  border-color: color-mix(in srgb, var(--warn) 26%, var(--stroke));
  color: var(--text);
}
.hidden{ display:none !important; }
[hidden]{ display:none !important; }

.typing{ padding: 8px 6px 6px; }
.typingTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding: 4px 2px 10px; }

.textBox{
  width: min(var(--boxW), 100%);
  height: var(--boxH);
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--a2) 18%, var(--stroke));
  background: color-mix(in srgb, var(--panel2) 98%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--a2) 9%, transparent), var(--shadow2);
  position:relative;
  overflow:hidden;
}
.popLayer{ position:absolute; inset:0; pointer-events:none; z-index: 4; }
.stackOuter{
  position:absolute; inset: 0;
  padding: 16px 16px 18px 16px;
  transform: translateY(var(--ty, 0px));
  transition: none;
  will-change: transform;
}
.stackInner{
  font-family: var(--mono);
  font-size: var(--fontSize);
  line-height: 1.36;
  letter-spacing: 0.01em;
  color: var(--muted);
  user-select:none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.word{ display:inline-block; white-space:nowrap; }
.word.word-long{ white-space: normal; overflow-wrap:anywhere; word-break: break-word; max-width: 100%; }

.ws{
  display:inline-block;
  width: .55ch;
}
.nlMarker{ display:inline-block; width:0; height:0; }

.char{
  display:inline-block;
  padding: 0 1px;
  border-radius: 6px;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.char.correct{ color: var(--ok); text-shadow: 0 0 14px color-mix(in srgb, var(--ok) 32%, transparent); }
.char.incorrect{ color: color-mix(in srgb, var(--bad) 88%, var(--text)); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.char.pending{ color: var(--muted); }

.char.current{
  position:relative;
  color: var(--text);
}
.char.current::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: -0.18em;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--a3), var(--a2));
  opacity: .95;
}

.ghostInput{
  position:absolute;
  inset:0;
  opacity:0;
  border:none;
  outline:none;
  background:transparent;
  font-size: 16px;
  /*
    UX: le ghostInput couvre toute la textbox pour capter la saisie.
    S'il y a des boutons dans la textbox, il peut les rendre non cliquables.
    On garde le focus via JS (click sur la textbox), donc on peut laisser
    passer les clics.
  */
  pointer-events:none;
}

/* feedback glow */
.textBox.flash-ok{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent),
    0 0 24px color-mix(in srgb, var(--ok) 22%, transparent),
    0 0 54px color-mix(in srgb, var(--ok) 14%, transparent),
    var(--shadow2);
}
.textBox.flash-bad{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent),
    0 0 24px color-mix(in srgb, var(--bad) 20%, transparent),
    0 0 54px color-mix(in srgb, var(--bad) 12%, transparent),
    var(--shadow2);
}
body:not(.reduce-motion) .textBox.flash-ok,
body:not(.reduce-motion) .textBox.flash-bad{
  animation: tbFlash 140ms var(--ease);
}
@keyframes tbFlash{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.006); }
  100%{ transform: scale(1); }
}

.hint{ color: var(--muted); font-size: 12px; margin-top: 10px; text-align:center; }
.muted{ color: var(--muted2); }
.small{ font-size: 12px; }

/* Event banner */
.eventBanner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  margin-bottom: 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--a2) 20%, var(--stroke));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--a2) 14%, var(--panel2)),
    color-mix(in srgb, var(--a1) 10%, var(--panel2)));
}
.eventTitle{ font-weight: 950; letter-spacing:-.01em; }
.eventDesc{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.eventProg{ min-width: 220px; display:flex; flex-direction:column; gap:6px; }
.bar{ height: 10px; border-radius:999px; background: color-mix(in srgb, var(--panel2) 98%, transparent); border: 1px solid var(--stroke); overflow:hidden; }
.barFill{ height:100%; width:0%; background: linear-gradient(90deg, var(--a3), var(--a2)); transition: width 160ms var(--ease); }
.eventMeta{ display:flex; justify-content:space-between; font-size: 12px; color: var(--muted); }

/* Event banner (sidebar placement) */
.side .eventBanner{ flex-direction:column; align-items:stretch; }
.side .eventProg{ min-width: 0; }
.side .eventRight{ width:100%; }

/* Pops clicker */
.pop{
  position:absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-weight: 950;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #0b1020;
  background: linear-gradient(135deg, var(--a3), var(--a2));
  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    0 0 22px color-mix(in srgb, var(--a2) 18%, transparent);
  text-shadow: none;
  opacity: 0;
  will-change: transform, opacity;
}
.pop.big{
  font-size: 20px;
  padding: 7px 12px;
}
.pop.bad{
  background: linear-gradient(135deg, var(--bad), color-mix(in srgb, var(--bad) 70%, #000));
  color: #fff;
}

body:not(.reduce-motion) .pop{
  animation: popFloat 760ms var(--ease) forwards;
}
body.reduce-motion .pop{
  opacity:1;
}

@keyframes popFloat{
  0%{ opacity:0; transform: translate(-50%, -50%) scale(.86); filter: blur(.2px); }
  18%{ opacity:1; transform: translate(-50%, calc(-50% - 16px)) scale(1.16); }
  60%{ opacity:1; transform: translate(-50%, calc(-50% - 32px)) scale(1.02); }
  100%{ opacity:0; transform: translate(-50%, calc(-50% - 56px)) scale(.96); }
}

/* Backline */
.backline{
  margin: 0;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--panel2) 98%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.backlineRight{ display:flex; align-items:center; gap: 8px; flex-wrap:wrap; }
.backline a{ color: var(--muted2); text-decoration:none; }
.backline a:hover{ color: var(--text); }
.backline .sep{ opacity:.6; }

/* Toasts */
.toastStack{
  position: fixed;
  right: 14px;
  bottom: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  z-index: 80;
  pointer-events:none;
}
.toast{
  pointer-events:none;
  max-width: min(360px, 88vw);
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--panel2) 98%, transparent);
  box-shadow: var(--shadow2);
}
.toastTitle{ font-weight: 950; }
.toastMsg{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.toast.ok{ border-color: color-mix(in srgb, var(--ok) 26%, var(--stroke)); }
.toast.bad{ border-color: color-mix(in srgb, var(--bad) 26%, var(--stroke)); }
.toast.gold{ border-color: color-mix(in srgb, var(--warn) 30%, var(--stroke)); }

/* Quest list */
.questList{ display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
.questRow{
  padding: 10px 10px;
  border-radius: 18px;
  background: var(--panel2);
  border: 1px solid var(--stroke);
}
.questTop{ display:flex; justify-content:space-between; gap:10px; }
.questName{ font-weight: 950; }
.questReward{ color: var(--muted); font-size: 12px; }
.questBar{ margin-top: 8px; height: 8px; border-radius:999px; background: color-mix(in srgb, var(--panel2) 98%, transparent); border: 1px solid var(--stroke); overflow:hidden; }
.questFill{ height: 100%; width: 0%; background: linear-gradient(90deg, var(--a2), var(--a1)); transition: width 160ms var(--ease); }
.questMeta{ margin-top: 6px; display:flex; justify-content:space-between; color: var(--muted2); font-size: 12px; }


/* Quest/Event win micro-anim (feedback visuel) */
.questRow.questWin{
  border-color: color-mix(in srgb, var(--ok) 42%, var(--stroke));
  background: color-mix(in srgb, var(--ok) 10%, var(--panel2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 20%, transparent), var(--shadow2);
  animation: questWin 420ms var(--ease);
}
#eventBanner.eventWin{
  border-color: color-mix(in srgb, var(--ok) 42%, var(--stroke));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 18%, transparent), var(--shadow2);
  animation: questWin 520ms var(--ease);
}
@keyframes questWin{
  0%{ transform: translateY(0) scale(.995); filter: saturate(1); }
  40%{ transform: translateY(-1px) scale(1.01); filter: saturate(1.12); }
  100%{ transform: translateY(0) scale(1.0); filter: saturate(1); }
}
/* Achievements (Succès) — same DA as quests but clearer */
.achRow{
  position: relative;
  overflow: hidden;
}
.achRow::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: linear-gradient(180deg, var(--stroke), transparent);
  opacity:.6;
  pointer-events:none;
}
.achRow.isOk{
  border-color: color-mix(in srgb, var(--ok) 36%, var(--stroke));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ok) 12%, var(--panel2)),
    color-mix(in srgb, var(--a2) 10%, var(--panel))
  );
}
.achRow.isOk::after{
  background: linear-gradient(180deg, var(--ok), var(--a2));
  opacity:.85;
}
.achRow .questMeta{
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--panel2) 85%, transparent);
  color: var(--muted);
  font-weight: 950;
}
.achRow.isOk .questMeta{
  border-color: color-mix(in srgb, var(--ok) 34%, var(--stroke));
  background: color-mix(in srgb, var(--ok) 12%, var(--panel2));
  color: color-mix(in srgb, var(--ok) 78%, var(--text));
}

/* Modals */
.modal{ position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; z-index: 100; }
.modalBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(7px); }
.modalCard{
  position:relative;
  width: min(520px, 94vw);
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg1) 65%, var(--panel2));
  box-shadow: var(--shadow);
  overflow:hidden;
}
html[data-theme="light"] .modalCard{
  background: color-mix(in srgb, #fff 78%, var(--panel2));
}
.modalCardWide{ width: min(760px, 94vw); }
.modalHeader{ display:flex; align-items:center; justify-content:space-between; padding: 12px 12px; border-bottom: 1px solid var(--stroke); }
.modalTitle{ font-weight: 950; letter-spacing:-.01em; }
.modalBody{ padding: 12px 12px; }
.modalFooter{ padding: 12px 12px; border-top: 1px solid var(--stroke); display:flex; justify-content:flex-end; gap:10px; }

/* Stats modal: smaller + scrollable (content can be long) */
#statsModal .modalCard{
  width: min(640px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
#statsModal .modalBody{
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.rowCheck{ display:flex; align-items:center; gap:10px; padding: 10px 8px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--stroke); margin-bottom: 10px; }
.rowSelect{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 8px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--stroke); margin-bottom: 10px; }
.rowSelect select{ background: transparent; color: var(--text); border: 1px solid var(--stroke); border-radius: 12px; padding: 8px 10px; }
html[data-theme="light"] .rowSelect select{ color: var(--text); }

.rowRange{ padding: 10px 8px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--stroke); margin-bottom: 10px; }
.rowRangeHead{ display:flex; justify-content:space-between; align-items:center; color: var(--muted); font-weight: 900; font-size: 12px; margin-bottom: 8px; }
.rowRange input{ width:100%; }

.modalTabs{ display:flex; gap:10px; padding: 10px 12px 0; }
.tab{
  border: 1px solid var(--stroke);
  background: var(--panel2);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 950;
}
.tab.active{
  color: var(--text);
  background: color-mix(in srgb, var(--a2) 14%, var(--panel2));
  border-color: color-mix(in srgb, var(--a2) 22%, var(--stroke));
}
.pane{ padding-top: 6px; }

.shopItems{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.shopItem{
  background: var(--panel2);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 12px 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.shopName{ font-weight: 950; }
.shopDesc{ color: var(--muted); font-size: 12px; }
.shopFoot{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.price{ font-weight: 950; }
.shopTop{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 980px){
  .main{ grid-template-columns: 1fr; }
  .brand{ min-width:auto; }
  .hudline{ justify-content:space-between; }
  .shopItems{ grid-template-columns: 1fr; }
}


/* --- Compatibility aliases for TapeType (training page) --- */
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(7px); }
.modal-card{ position:relative; width: min(520px, 94vw); border-radius: 22px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--bg1) 65%, var(--panel2)); box-shadow: var(--shadow); overflow:hidden; }
html[data-theme="light"] .modal-card{ background: color-mix(in srgb, #fff 78%, var(--panel2)); }
.modal-card--wide{ width: min(760px, 94vw); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding: 12px 12px; border-bottom: 1px solid var(--stroke); }
.modal-body{ padding: 12px 12px; }
.modal-foot{ padding: 12px 12px; border-top: 1px solid var(--stroke); display:flex; justify-content:flex-end; gap:10px; }
.icon-btn{ border: 1px solid var(--stroke); background: transparent; color: var(--muted); border-radius: 12px; padding: 8px 10px; cursor:pointer; }
.icon-btn:hover{ color: var(--text); }

.btn-primary{ border:1px solid color-mix(in srgb, var(--a2) 28%, var(--stroke)); background: linear-gradient(135deg, color-mix(in srgb, var(--a2) 70%, var(--a1)), color-mix(in srgb, var(--a2) 70%, var(--a3))); color: #061018; padding: 10px 12px; border-radius: 14px; font-weight: 950; cursor:pointer; }
.btn-secondary{ border: 1px solid var(--stroke); background: var(--panel2); color: var(--text); padding: 10px 12px; border-radius: 14px; font-weight: 900; cursor:pointer; }
.btn-danger{ border: 1px solid color-mix(in srgb, var(--bad) 36%, var(--stroke)); background: color-mix(in srgb, var(--bad) 14%, var(--panel2)); color: var(--text); padding: 10px 12px; border-radius: 14px; font-weight: 950; cursor:pointer; }
.btn-mini{ padding: 8px 10px; border-radius: 12px; font-size: 13px; }
.select{ background: transparent; color: var(--text); border: 1px solid var(--stroke); border-radius: 12px; padding: 8px 10px; }

/* pills from TapeType */
.pill{ background: var(--panel2); border: 1px solid var(--stroke); border-radius: 16px; padding: 10px 12px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pill span{ color: var(--muted); font-size: 12px; font-weight: 900; }
.pill b{ font-weight: 950; }

.progress{ position:relative; height: 14px; background: var(--panel2); border: 1px solid var(--stroke); border-radius: 999px; overflow:hidden; }
.progress-bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--a2), var(--a3)); }
.progress-label{ position:absolute; inset:0; display:grid; place-items:center; font-size: 12px; font-weight: 950; color: color-mix(in srgb, var(--text) 80%, transparent); }

.toast-host, .toastStack{ position: fixed; right: 16px; bottom: 16px; display:flex; flex-direction:column; gap:10px; z-index: 120; }

/* Topbar dropdown menu */
.dropdown{ position: relative; }

#topMenuBtn{
  width: 44px;
  height: 44px;
  padding: 0;
  display:grid;
  place-items:center;
  font-size: 18px;
  line-height: 1;
}

.dropdownMenu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 250px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--stroke) 90%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg1) 96%, transparent),
    color-mix(in srgb, var(--bg0) 96%, transparent)
  );
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow), 0 18px 60px rgba(0,0,0,.35);
  transform-origin: top right;
  z-index: 80;
}
.dropdownMenu:not(.hidden){
  animation: dropdownIn 140ms var(--ease);
}
@keyframes dropdownIn{
  from{ opacity: 0; transform: translateY(-6px) scale(.985); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}

.menuTitle{
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.menuSep{ height: 1px; background: var(--stroke); margin: 8px 4px; }

.menuItem{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--a2) 10%, var(--stroke));
  background: color-mix(in srgb, var(--a2) 7%, var(--panel2));
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  text-align: left;
  transition: transform 120ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease);
}
.menuItem:hover{
  background: color-mix(in srgb, var(--a2) 11%, var(--panel2));
  border-color: color-mix(in srgb, var(--a2) 26%, var(--stroke));
}
.menuItem:active{ transform: translateY(1px); }

.menuItem .miLeft{ display:flex; align-items:center; gap:10px; }
.miIcon{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--panel2) 85%, transparent);
  font-size: 14px;
}
.menuItem:hover .miIcon{
  border-color: color-mix(in srgb, var(--a2) 34%, var(--stroke));
  background: color-mix(in srgb, var(--a2) 10%, var(--panel2));
}

.menuItem.isActive{
  border-color: color-mix(in srgb, var(--a2) 42%, var(--stroke));
  background: color-mix(in srgb, var(--a2) 13%, var(--panel2));
}
.menuItem.isActive::after{ content:"✓"; color: var(--ok); font-weight: 900; }
/* --- Patch UI: CTA nav buttons --- */
#toIdleBtn, #toTypeBtn{
  font-weight: 950;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--stroke));
  box-shadow: var(--shadow2);
}
#toIdleBtn{
  background: linear-gradient(135deg, var(--bad), var(--warn));
  color: rgba(10,10,10,.92);
}
#toTypeBtn{
  background: linear-gradient(135deg, var(--warn), color-mix(in srgb, #ffffff 20%, var(--warn)));
  color: rgba(12,10,0,.90);
}
#toIdleBtn:hover, #toTypeBtn:hover{
  transform: translateY(-1px);
  filter: saturate(1.08);
}

/* --- Patch UI: shop more colorful --- */
.shopItem{
  position: relative;
  overflow: hidden;
  --si1: var(--a1);
  --si2: var(--a2);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--si1) 14%, var(--panel2)),
    color-mix(in srgb, var(--si2) 10%, var(--panel))
  );
  border: 1px solid color-mix(in srgb, var(--si1) 28%, var(--stroke));
  box-shadow: var(--shadow2);
  transition: transform 140ms var(--ease), filter 140ms var(--ease), border-color 140ms var(--ease);
  padding-left: 14px;
}
.shopItem::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(70% 70% at 10% 0%,
      color-mix(in srgb, var(--si1) 40%, transparent),
      transparent 70%),
    radial-gradient(70% 70% at 90% 110%,
      color-mix(in srgb, var(--si2) 26%, transparent),
      transparent 70%);
  opacity: .55;
}
.shopItem::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background: linear-gradient(180deg, var(--si1), var(--si2));
  opacity: .92;
  pointer-events:none;
}
.shopItem:hover{
  transform: translateY(-2px);
  filter: saturate(1.08);
  border-color: color-mix(in srgb, var(--si1) 38%, var(--stroke));
}
.shopItem .price{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--si1) 34%, var(--stroke));
  background: color-mix(in srgb, var(--si1) 12%, var(--panel));
}
.shopItem .btn.btnSoft{
  border-color: color-mix(in srgb, var(--si2) 32%, var(--stroke));
  background: color-mix(in srgb, var(--si2) 14%, var(--panel2));
  font-weight: 950;
}
.shopItem .btn.btnSoft:hover{
  filter: saturate(1.1);
}
.shopItem--ppc{ --si1: var(--warn); --si2: var(--bad); }
.shopItem--baseMult{ --si1: var(--a1); --si2: var(--a2); }
.shopItem--pps{ --si1: var(--a2); --si2: var(--ok); }
.shopItem--combo{ --si1: var(--a1); --si2: var(--bad); }
.shopItem--eventReward{ --si1: var(--ok); --si2: var(--warn); }
.shopItem--eventLuck{ --si1: var(--a2); --si2: var(--warn); }

/* --- Patch UI: fly points to score --- */
.flyPop{
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: rgba(10,10,10,.92);
  border: 1px solid color-mix(in srgb, var(--warn) 55%, rgba(0,0,0,.18));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ok) 70%, #fff),
    color-mix(in srgb, var(--warn) 75%, #fff)
  );
  box-shadow: 0 18px 60px rgba(0,0,0,.35), 0 0 18px color-mix(in srgb, var(--warn) 35%, transparent);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition:
    left 520ms var(--ease),
    top 520ms var(--ease),
    transform 520ms var(--ease),
    opacity 520ms var(--ease);
  will-change: left, top, transform, opacity;
}
.flyPop.big{ font-size: 16px; padding: 9px 12px; }