@font-face {
  font-family: 'PapyrusCustom';
  src: url('fonts/papyrus.ttf') format('truetype');
}

.page-title {
  font-family: 'PapyrusCustom', Papyrus, fantasy;
}


/* --- reset i baza --- */
* { box-sizing: border-box; font-family: system-ui, Arial, sans-serif; }
:root{
  --bg: #0f172a;      /* tło strony */
  --panel: #111827;   /* panele/karty */
  --muted: #1f2937;   /* przyciski/akcenty */
  --text: #e5e7eb;    /* tekst */
  --text-dim: #9ca3af;/* przytłumiony tekst */
  --brand: #60a5fa;   /* akcent (niebieski) */
}
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  display: flex;
}

/* --- sidebar --- */
.sidebar{
  width: 260px; min-height: 100vh; padding: 20px 16px;
  background: #0b1224; border-right: 1px solid rgba(255,255,255,.06);
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.brand{
  font-weight: 700; letter-spacing: .5px;
  color: var(--brand);
}
.nav{ display: grid; gap: 8px; }
.nav-link{
  display: block; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--text);
  background: transparent; transition: background .2s, transform .04s;
}
.nav-link:hover{ background: rgba(255,255,255,.06); }
.nav-link:active{ transform: scale(.99); }
.nav-link.active{
  background: var(--panel); outline: 1px solid rgba(255,255,255,.08);
}
.foot{ margin-top: auto; color: var(--text-dim); font-size: .9rem; }

/* --- content --- */
.content{
  flex: 1; padding: 28px; max-width: 1000px; margin: 0 auto;
}
.page-title{ margin: 0 0 20px 0; font-weight: 700; }

/* --- karta placeholder --- */
.card{
  background: var(--panel); border-radius: 18px; padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* --- kalkulator (poprzedni styl idk)--- */
.calc {
  width: min(92vw, 420px);
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.screen {
  background: #000; color: #0ee67a;
  font-size: 2.2rem; text-align: right;
  padding: 18px; border-radius: 12px; min-height: 64px;
  overflow-x: auto;
}
.keys {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
button {
  font-size: 1.1rem;
  padding: 14px 10px;
  border: 0; border-radius: 12px;
  background: var(--muted); color: var(--text);
  cursor: pointer;
  transition: transform .05s ease, opacity .2s;
}
button:active { transform: scale(0.98); }
button:hover { opacity: .9; }
button.equals { background: #2563eb; }
button[data-op] { background: #374151; }
button[data-action="clear"] { background: #ef4444; }
button.span-2 { grid-column: span 2; }

/* --- responsywnosc --- */
@media (max-width: 820px){
  .sidebar{ position: fixed; inset: 0 auto 0 0; width: 220px; z-index: 10; }
  .content{ margin-left: 220px; }
}
@media (max-width: 560px){
  .sidebar{
    width: 100%; min-height: auto; position: sticky; top: 0;
    flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px;
  }
  .nav{ grid-auto-flow: column; overflow: auto; white-space: nowrap; }
  .foot{ display: none; }
  .content{ margin: 0; padding: 16px; }
  .calc{ width: 100%; }
}

/* ---- rząd narzedzi (kalkulator + historia) ---- */
.tools-row{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

/* panel histori */
.history{
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-height: 520px;
  overflow: auto;
}
.history h2{
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: var(--text);
}
#historyList{
  margin: 0;
  padding-left: 20px; /* dla numeracji ol */
}
#historyList li{
  margin: 6px 0;
  color: var(--text);
  word-break: break-word;
  line-height: 1.25;
  opacity: .95;
}

/* responsywka */
@media (max-width: 900px){
  .tools-row{ grid-template-columns: 1fr; }
  .history{ max-height: none; }
}

/* actuall timer */
.timer { max-width: 680px; }

.timer__inputs{
  display: grid;
  grid-template-columns: repeat(3, 80px) 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}
.timer__inputs label{
  display: grid; gap: 6px; color: var(--text-dim); font-size: .9rem;
}
.timer__inputs input{
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0b1224; color: var(--text);
}
.timer__buttons{ display: flex; gap: 8px; justify-content: flex-end; }
.timer__buttons button{
  background: var(--muted); color: var(--text);
  border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer;
}
.timer__buttons button:hover{ opacity:.9; }
.timer__display{
  display: flex; align-items: baseline; gap: 10px; margin: 8px 0 12px;
}
.timer__time{
  font-variant-numeric: tabular-nums;
  font-size: 2.2rem; font-weight: 700;
}
.timer__units{ color: var(--text-dim); }

.progress{
  height: 14px; background: #0b1224; border-radius: 999px; overflow: hidden;
  outline: 1px solid rgba(255,255,255,.08);
}
.progress__bar{
  height: 100%; width: 0%;
  background: linear-gradient(90deg,#2563eb,#60a5fa);
  transition: width .2s linear;
}

.timer__hint{ margin-top: 10px; color: var(--text-dim); font-size: .9rem; }

/* nav separator (thin, subtle line) */
.nav-sep{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 6px 0 10px 0;
  border-radius: 1px;
}

/* small helpers for achievements list */
.muted{ color: var(--text-dim); }
.ach-list{ list-style: none; padding: 0; margin: 0; }
.ach-list li{
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.06);
}
.ach-list li:last-child{ border-bottom: 0; }
.ach-name{ color: var(--text); }
.ach-code{ color: var(--text-dim); font-size: .85rem; }
.ach-actions{ margin-top: 12px; }
.btn-ghost{
  background: transparent; color: var(--text-dim);
  border: 1px solid rgba(255,255,255,.15);
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
.btn-ghost:hover{ color: var(--text); border-color: rgba(255,255,255,.25); }

/* ===== CLICKER ===== */
.clicker { max-width: 860px; }

.clicker__top{
  display:flex; gap:16px; justify-content:space-between; align-items:center; margin-bottom:10px;
}
.score{ font-weight:700; }

.playground{
  position: relative;
  height: 360px;
  background: #0b1224;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* main red button */
.btn-main{
  position: absolute; /* so we can teleport */
  padding: 16px 22px;
  border-radius: 14px;
  border: 0;
  background: #ef4444;
  color: #fff;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  transition: transform .06s ease, filter .2s, background .2s, opacity .2s, left .15s, top .15s;
  user-select: none;
}
.btn-main:active{ transform: scale(.98) }

/* disabled (true block) */
.btn-disabled{
  background: #6b7280 !important;
  cursor: not-allowed !important;
  opacity: .8;
}

/* fake blocked (cursor not-allowed but still clickable) */
.btn-fakeblocked{
  cursor: not-allowed !important;
  filter: grayscale(.1) brightness(.95);
}

/* rainbow glow */
.btn-rainbow{
  animation: rainbowGlow 1.2s linear infinite;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
}
@keyframes rainbowGlow{
  0%{ filter: hue-rotate(0deg) brightness(1.1); }
  100%{ filter: hue-rotate(360deg) brightness(1.1); }
}

/* helicopter spin */
.btn-spin{
  animation: heli 1.2s ease-in-out 1;
}
@keyframes heli{
  0%{ transform: rotate(0deg) scale(1); }
  50%{ transform: rotate(540deg) scale(1.1); }
  100%{ transform: rotate(720deg) scale(1); }
}

/* decoy buttons wrapper */
.decoys{
  position: absolute;
  top: 12px; right: 12px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.btn-decoy{
  padding: 12px 14px; border-radius: 10px; border:0; cursor:pointer;
  font-weight: 700;
}
.btn-decoy.green{ background:#10b981; color:#052016; }
.btn-decoy.red{ background:#ef4444; color:#fff; }

/* ensure teleports stay inside nicely on small screens */
@media (max-width: 520px){
  .playground{ height: 300px; }
}

/* CLICKER — upgrades */
.score{ font-weight:800; font-size: 2rem; letter-spacing:.3px; }
.playground{ height: 520px; } /* większa arena */

/* arena shake */
.playground.shake { animation: shakey .35s linear 1; }
@keyframes shakey{
  0%,100%{ transform: translate(0,0); }
  20%{ transform: translate(-4px,2px) rotate(-0.3deg); }
  40%{ transform: translate(4px,-3px) rotate(0.4deg); }
  60%{ transform: translate(-3px,3px) rotate(-0.2deg); }
  80%{ transform: translate(3px,-2px) rotate(0.3deg); }
}

/* button trail (ghost afterimage) */
.btn-trail::after{
  content:""; position:absolute; inset:0; border-radius:14px;
  background: rgba(255,255,255,.08);
  filter: blur(8px);
  transform: translate(6px,6px); pointer-events:none;
}

/* flying distractions cuz i woant you to get epilepsy */
.fly{
  position:absolute; opacity:.9; user-select:none; pointer-events:none;
  animation: floatUp 3.5s linear forwards;
  font-size: 18px;
}
@keyframes floatUp{
  from{ transform: translateY(30px); opacity:.9; }
  to  { transform: translateY(-160px); opacity:0; }
}

/* ghost decoy button */
.btn-ghostfake{
  position:absolute; padding: 12px 14px; border-radius: 10px; border:0;
  background:#9ca3af; color:#111827; opacity:.85; cursor: pointer;
}

/* bounce path helper (for freaky MISCHIEF.BOUNCE) */
.btn-bounce{ will-change: left, top; }

/* ===== Achievements styling ===== */
.ach-cat { margin: 8px 0 16px; }
.ach-cat-title{ margin: 8px 0 10px; color: var(--text); font-size: 1rem; font-weight: 700; }

.ach-grid{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.ach-item{
  display: grid; grid-template-columns: 42px 1fr; gap: 10px;
  align-items: center;
  padding: 10px; border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.ach-item.locked{
  filter: grayscale(100%); opacity: .65;
}
.ach-item.unlocked{
  border-style: solid;
  border-color: rgba(96,165,250,.35); /* blue accent */
  background: rgba(96,165,250,.08);
}
.ach-icon{
  width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 1.2rem; border-radius: 10px; background: rgba(255,255,255,.06);
}
.ach-name{ font-weight: 700; }
.ach-desc{ color: var(--text-dim); font-size: .9rem; }

/* ===== PLATFORMER ===== */
.platformer{ max-width: 980px; }

.pf__hud{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px;
}
.pf__legend .muted{ display:block; margin-bottom:4px; }
#legend{ display:flex; gap:8px; flex-wrap:wrap; }
.keytag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font-size:.95rem;
}
.keycap{
  font-weight:800; background:#111; color:#0ee67a;
  padding:2px 6px; border-radius:6px;
  font-variant-numeric: tabular-nums;
}

.pf__world{
  position: relative;
  height: 420px;
  background:#0b1224;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow: hidden;
}
.pf__player{
  position:absolute; width:28px; height:28px; background:#ef4444;
  border-radius:6px; left:24px; bottom:24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.pf__platform{
  position:absolute; background:#1f2937; border-radius:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* death flash */
.pf__world.flash { animation: pfFlash .25s linear 1; }
@keyframes pfFlash {
  0%{ box-shadow: inset 0 0 0 0 rgba(239,68,68,.55); }
  100%{ box-shadow: inset 0 0 0 18px rgba(239,68,68,0); }
}