:root {
  color: #e9e0ce;
  background: #0b1116;
  font-family: 'Trebuchet MS', Arial, sans-serif;
}

#app { background: #0b1116; }
.topbar, .footer {
  background: linear-gradient(180deg, #1d252a 0%, #11191f 100%);
  box-shadow: none;
}
.topbar {
  height: 94px;
  border-bottom: 1px solid #89744c;
}
.topbar::after {
  content: '';
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, transparent, #a08350 21%, #665536 50%, #a08350 79%, transparent);
  opacity: .55;
}
.brand {
  color: #f2e7cc;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: -1.7px;
  text-shadow: 0 2px 12px #0008;
}
.brand-mark { color: #c9a86b; text-shadow: 0 0 16px #dc965688; }
.brand-accent { color: #cba876; }
.brand small { color: #8d8d7d; letter-spacing: 1.8px; font-family: 'Trebuchet MS', Arial, sans-serif; }
.eyebrow { color: #9b998c; }
.mission {
  position: relative;
  padding: 8px 30px;
}
.mission::before, .mission::after {
  content: '◆';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #8c744b;
  font-size: 8px;
}
.mission::before { left: 0; }
.mission::after { right: 0; }
.mission strong {
  color: #efe2c2;
  font-family: Georgia, serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
}
#target-icon svg { filter: drop-shadow(0 0 8px #d59e5977); }
.stats strong { color: #e5d8ba; font-family: Georgia, serif; }
.stats .mistakes strong { color: #c45f4d; }
#game { background: #121b22; }
.game-shell { box-shadow: inset 0 0 80px #0009; }
.corner-note { color: #b7aa8d; text-shadow: 0 2px 6px #000; }
.corner-note span { color: #c99e64; }
.corner-note strong { margin-left: 12px; color: #f0bf78; font-size: 9px; letter-spacing: 1.4px; }
.zoom-controls {
  position: absolute;
  z-index: 3;
  top: 126px;
  right: 3vw;
  display: grid;
  grid-template-rows: 29px 25px 29px;
  justify-items: center;
  width: 43px;
  background: #172229e8;
  border: 1px solid #766244;
  box-shadow: 0 8px 20px #0009;
}
.zoom-controls button { width: 100%; border: 0; background: transparent; color: #ecd09e; font: 700 22px Georgia,serif; }
.zoom-controls button:hover { background: #3d3a2e; }
.zoom-controls span { align-self: center; color: #d0bd99; font: 700 9px Arial,sans-serif; }
.difficulty-select { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: 17px 0 6px; }
.difficulty-select button {
  border: 1px solid #75694c;
  border-radius: 2px;
  background: #17232a;
  color: #baa98a;
  min-height: 34px;
  padding: 3px;
  font: 700 9px 'Trebuchet MS',Arial,sans-serif;
  letter-spacing: .7px;
}
.difficulty-select button:hover { border-color: #d4a466; color: #f5d6a3; }
.difficulty-select button.selected { background: #79552f; border-color: #e2b975; color: #fff0d3; box-shadow: inset 0 1px #ffdd9b44; }
.difficulty-note { min-height: 15px; margin-bottom: 11px; color: #a9997a; font-size: 10px; letter-spacing: .3px; }
.secondary { display: block; margin: 12px auto 0; border: 0; background: transparent; color: #c9aa74; font: 700 11px 'Trebuchet MS',Arial,sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.secondary:hover { color: #f2d19b; }
.ability-bar {
  background: linear-gradient(180deg, #252d32f5, #151e24f5);
  border: 1px solid #746442;
  border-radius: 5px;
  box-shadow: 0 15px 32px #000a, inset 0 1px #ffffff15;
  padding: 7px;
}
.ability {
  border-radius: 3px;
  background: linear-gradient(135deg, #a43e2d, #612624);
  border: 1px solid #d18455;
  color: #fff2da;
  box-shadow: inset 0 1px #ffc17d55, 0 5px 15px #1608068c;
  text-shadow: 0 1px 3px #3d1712;
}
.ability:hover:not(:disabled) { filter: brightness(1.18); }
.ability.empowered {
  background: linear-gradient(135deg, #d1923c, #9f3f28);
  border-color: #ffe09a;
  box-shadow: 0 0 22px #f3a44b9c, inset 0 1px #ffeab7;
  animation: power-glow 1.3s ease-in-out infinite alternate;
}
.ability b { background: #1f151580; font-family: Georgia, serif; }
.ability i { background: #f3b15f; }
.bonus-status { color: #baab8c; }
.round-button {
  background: #303a3d;
  border: 1px solid #62624e;
  border-radius: 3px;
  color: #d6cbaa;
}
.round-button:hover { background: #45504c; }
.footer { border-top: 1px solid #514c3e; }
.legend { color: #a29d8d; }
.target-dot { background: #d2a45a; box-shadow: 0 0 8px #d2a45a; }
.bonus-dot { background: #70acae; box-shadow: 0 0 8px #70acae; }
.obstacle-dot { background: #68737b; }
.fame ol { color: #d7c9a9; font-family: Georgia, serif; }
.fame li span { color: #c9a365; }
.footer-right { color: #777d78; }
.footer-right span { color: #ba8f51; }

.modal {
  background: #0a0e12b8;
  backdrop-filter: blur(6px);
}
.modal-glow {
  background: radial-gradient(circle, #a3643335, transparent 65%);
}
.modal-content {
  background: linear-gradient(145deg, #253038f9 0%, #171f26fa 55%, #11191ffa 100%);
  border: 1px solid #977d4e;
  border-radius: 6px;
  box-shadow: 0 30px 90px #000d, inset 0 0 0 4px #1d2428, inset 0 0 0 5px #685a3c88;
}
.modal-content::before, .modal-content::after {
  content: '◆';
  position: absolute;
  top: 10px;
  color: #aa8853;
  font-size: 11px;
}
.modal-content::before { left: 14px; }
.modal-content::after { right: 14px; }
.modal-kicker { color: #ca9f62; }
.modal h1, .modal h2 {
  color: #f1e5c9;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: -3px;
  text-shadow: 0 4px 15px #000b;
}
.modal h1::after {
  content: '';
  display: block;
  width: 75px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, #b98c4c, transparent);
}
.lead { color: #c2bba8; }
.instructions {
  border-color: #5e584a;
  color: #d0c5af;
}
.instructions span { color: #d1a061; font-family: Georgia, serif; }
.primary {
  border-radius: 3px;
  border: 1px solid #d7ac68;
  background: linear-gradient(135deg, #b58a4b, #73532f);
  color: #fff1d2;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.3px;
  box-shadow: 0 10px 24px #0008, inset 0 1px #ffe3a455;
}
.primary:hover { background: linear-gradient(135deg, #cba263, #8d6738); }
.tiny { color: #988f79; letter-spacing: 1.2px; }
.toast {
  border-radius: 3px;
  border: 1px solid #9d8050;
  background: #1d2729ed;
  color: #edddb9;
  box-shadow: 0 10px 25px #0009;
  max-width: 90vw;
  text-align: center;
  white-space: normal;
}
.final-score strong { color: #d8ac69; font-family: Georgia, serif; }
.final-score small, .name-label { color: #b5a587; }
.name-row input {
  border-radius: 2px;
  border-color: #655b45;
  background: #101b20;
  color: #efdfc0;
}
.name-row input:focus { border-color: #c99a5a; }
.name-row button {
  border-radius: 2px;
  background: #9c7444;
  color: #fff2dc;
}
@keyframes power-glow { to { box-shadow: 0 0 30px #ffba5be6, inset 0 1px #fff5d8; } }
@media (max-width: 850px) {
  .topbar { height: 79px; }
  .mission { padding: 5px 8px; }
  .mission::before, .mission::after { display: none; }
  .mission strong { font-size: 16px; }
}
@media (max-width: 520px) {
  .topbar { height: 74px; }
  .brand { font-size: 18px; }
  .mission strong { font-size: 13px; }
  .modal-content { border-radius: 4px; }
  .modal h1 { font-size: 58px; }
  .ability { font-size: 9px; }
  .primary { padding: 0 12px; font-size: 10px; letter-spacing: .8px; white-space: nowrap; }
  .primary span { margin-left: 8px; }
  .corner-note strong { display: block; margin: 5px 0 0; }
  .zoom-controls { top: 102px; right: 10px; }
  .difficulty-select { grid-template-columns: repeat(2,1fr); margin-top: 9px; }
  .difficulty-select button { min-height: 29px; }
  .difficulty-note { font-size: 9px; margin-bottom: 7px; }
}

/* Kroniki Figur: compact learning UI and touch controls */
.atlas-content { width: min(910px, 94vw); max-height: min(92%, 850px); padding: 27px 33px; }
.atlas-content h2 { font-size: clamp(30px, 5vw, 46px); margin: 8px 0; }
.atlas-content .lead { max-width: 650px; margin-bottom: 15px; }
.atlas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: min(42vh, 360px); overflow-y: auto; padding: 3px 5px 12px; margin-bottom: 14px; text-align: left; }
.atlas-card { display: grid; grid-template-columns: 47px 1fr; gap: 8px; min-height: 112px; padding: 12px; background: #101a20; border: 1px solid #786a4d; color: #e3d4b4; }
.atlas-card.locked { border-color: #485052; color: #aba697; }
.atlas-icon { width: 39px; height: 39px; display: grid; place-items: center; background: #25323a; border: 1px solid #806d4c; }
.atlas-icon svg { width: 32px; height: 32px; }
.atlas-card.locked .atlas-icon { filter: grayscale(1); opacity: .55; }
.atlas-card h3 { font: 700 13px/1.25 Georgia,serif; margin: 0 0 6px; }
.atlas-card p { margin: 2px 0; font-size: 10px; line-height: 1.3; color: #bbaf96; }
.atlas-card b { color: #dfbc7d; }
.feedback-bubble { display: none; position: absolute; z-index: 5; max-width: min(310px, 70vw); padding: 10px 13px; color: #fff0d6; background: #672e29f2; border: 1px solid #e8aa77; box-shadow: 0 8px 22px #000a; font: 700 12px/1.35 'Trebuchet MS',Arial,sans-serif; pointer-events: none; transform: translate(-50%, -100%); }
.feedback-bubble.show { display: block; }
.frenzy-banner { display: none; position: absolute; z-index: 4; top: 17px; left: 50%; transform: translateX(-50%); color: #ffe7aa; background: #53331be8; border: 1px solid #f9bc63; padding: 10px 16px; font: 700 12px Georgia,serif; letter-spacing: 1.2px; box-shadow: 0 0 30px #ed944c8c; white-space: nowrap; pointer-events: none; }
.frenzy-banner.show { display: block; }
.frenzy-banner span { font-size: 17px; }
.game-shell.frenzy::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border: 5px solid #d98a3b; box-shadow: inset 0 0 60px #d46e2a55; animation: frenzy-pulse .7s ease-in-out infinite alternate; }
@keyframes frenzy-pulse { to { opacity: .35; } }
.touch-controls { display: none; position: absolute; z-index: 4; bottom: 17px; left: 16px; align-items: center; gap: 10px; }
.touch-controls > button { align-self: flex-end; min-width: 96px; min-height: 42px; background: #1e2b32eb; color: #efce92; border: 1px solid #a58658; font: 700 10px 'Trebuchet MS',Arial,sans-serif; letter-spacing: .5px; }
.touch-pad { position: relative; width: 112px; height: 112px; border-radius: 50%; border: 2px solid #bb985dbb; background: #243139aa; touch-action: none; box-shadow: inset 0 0 25px #0009; }
.touch-pad-ring { position: absolute; inset: 26px; border: 1px solid #b9966166; border-radius: 50%; }
.touch-knob { position: absolute; width: 47px; height: 47px; left: 31px; top: 31px; border-radius: 50%; border: 2px solid #edc88b; background: radial-gradient(circle at 35% 30%, #ab8551, #433d35); box-shadow: 0 4px 12px #000a; pointer-events: none; }
#touch-hint { display: none; }
#game { touch-action: none; }
@media (pointer: coarse) { .touch-controls { display: flex; } .corner-note { display: none; } .round-button { min-width: 44px; min-height: 44px; } .ability { min-height: 48px; } }
.touch-controls.follow .touch-pad { display: none; }
.touch-controls.follow #touch-hint { display: block; max-width: 104px; font-size: 10px; line-height: 1.25; color: #dbc397; text-shadow: 0 2px 4px #000; }
@media (max-width: 720px) and (pointer: coarse) { .touch-controls { bottom: 90px; left: 8px; } .touch-pad { width: 95px; height: 95px; } .touch-knob { left: 24px; top: 24px; } .touch-pad-ring { inset: 21px; } .touch-controls > button { min-width: 80px; font-size: 9px; } .ability-bar { bottom: 8px; } .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .atlas-content { padding: 23px 12px 16px; } .atlas-grid { grid-template-columns: 1fr; max-height: 38vh; } .atlas-card { min-height: 95px; } .feedback-bubble { font-size: 11px; } }