* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #171411;
  color: #f4ead2;
  font-family: Georgia, "Times New Roman", serif;
}

body { cursor: default; user-select: none; }

#game {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 17%, rgba(224, 184, 104, .12), transparent 20%),
    linear-gradient(180deg, rgba(11, 10, 9, .15), rgba(12, 10, 8, .48)),
    #33291f;
}

/* Klidná hrací plocha sevřená dřevěnými „trámy“. */
#game::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg,
      #17120f 0 7%,
      transparent 7% 14%,
      rgba(92, 69, 47, .42) 14% 16%,
      transparent 16% 84%,
      rgba(92, 69, 47, .42) 84% 86%,
      transparent 86% 93%,
      #17120f 93%),
    linear-gradient(180deg,
      #19130f 0 8%,
      transparent 8% 15%,
      rgba(91, 68, 46, .40) 15% 17%,
      transparent 17% 83%,
      rgba(91, 68, 46, .40) 83% 85%,
      transparent 85% 92%,
      #19130f 92%);
  box-shadow: inset 0 0 120px rgba(0,0,0,.72);
}

#game::after {
  content: "";
  position: absolute;
  inset: 8% 7%;
  z-index: -1;
  border: 14px solid rgba(70, 51, 36, .72);
  border-top-width: 11px;
  border-bottom-width: 11px;
  box-shadow:
    inset 0 0 0 3px rgba(118, 88, 56, .16),
    inset 0 0 70px rgba(0,0,0,.42),
    0 0 40px rgba(0,0,0,.45);
  pointer-events: none;
}

#hud {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 5000;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.hud-box {
  min-width: 82px;
  padding: 7px 10px 8px;
  text-align: center;
  border: 1px solid rgba(211, 177, 112, .34);
  border-radius: 7px;
  background: rgba(19, 15, 12, .82);
  box-shadow: 0 3px 15px rgba(0,0,0,.34);
}

.hud-box .label {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .72;
  margin-bottom: 2px;
}

.hud-box span:last-child {
  font-size: 22px;
  font-weight: bold;
}

.hud-box.bonus { min-width: 72px; }
.hud-box.score { min-width: 82px; }

.screen {
  position: absolute;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: rgba(7, 6, 5, .38);
  cursor: default;
}

.hidden { display: none !important; }

.parchment {
  width: min(560px, calc(100vw - 36px));
  padding: 32px 38px 34px;
  border: 1px solid rgba(209, 176, 110, .58);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 225, 159, .10), transparent 42%),
    linear-gradient(145deg, rgba(55, 41, 29, .97), rgba(29, 22, 17, .97));
  box-shadow:
    0 20px 70px rgba(0,0,0,.65),
    inset 0 0 0 2px rgba(255,255,255,.025);
  text-align: center;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  opacity: .68;
  margin-bottom: 9px;
}

h1, h2 {
  margin: 0 0 16px;
  font-weight: normal;
  color: #f5d58f;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

h1 { font-size: clamp(29px, 4vw, 43px); }
h2 { font-size: clamp(27px, 4vw, 38px); }

.parchment p {
  font-size: 17px;
  line-height: 1.55;
  margin: 12px 0;
}

.rules {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 22px 0 15px;
}

.rules div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}

.rules img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.rules b { color: #f5d58f; }

.record {
  font-size: 14px !important;
  opacity: .82;
}

button {
  margin-top: 18px;
  padding: 12px 27px;
  border: 1px solid #d8b66f;
  border-radius: 7px;
  background: linear-gradient(#80643b, #554125);
  color: #fff3d3;
  font: inherit;
  font-weight: bold;
  letter-spacing: .09em;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(0,0,0,.35);
}

button:hover { filter: brightness(1.12); }

#crosshair {
  position: fixed;
  width: 48px;
  height: 58px;
  z-index: 10000;
  pointer-events: none;
  transform: translate(-24px, -29px);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

.fly {
  position: fixed;
  width: 80px;
  height: 80px;
  object-fit: contain;
  z-index: 100;
  cursor: none;
  animation: flyIn .16s ease-out;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
}

.fly.golden {
  filter:
    drop-shadow(0 0 8px rgba(255, 208, 68, .70))
    drop-shadow(0 3px 5px rgba(0,0,0,.6));
  animation: flyIn .16s ease-out, goldenPulse 1s ease-in-out infinite;
}

@keyframes flyIn {
  from { transform: scale(.55); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes goldenPulse {
  50% { filter: drop-shadow(0 0 13px rgba(255, 208, 68, .92)) drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
}

#message {
  position: fixed;
  left: 50%;
  top: 51%;
  z-index: 8000;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #f5d58f;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 0 2px 10px #000;
  opacity: 0;
}

#message.show { animation: pop .65s ease-out; }

@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

.result-card { max-width: 600px; }

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 22px 0;
}

.result-grid > div {
  padding: 10px;
  border-radius: 7px;
  background: rgba(0,0,0,.22);
}

.result-grid span {
  display: block;
  font-size: 12px;
  opacity: .72;
}

.result-grid strong {
  display: block;
  margin-top: 2px;
  font-size: 25px;
  color: #f5d58f;
}

.result-grid .total {
  grid-column: 1 / -1;
  background: rgba(131, 96, 43, .18);
}

.result-grid .total strong { font-size: 32px; }

.shusniz {
  min-height: 76px;
  padding: 13px 18px;
  border-left: 3px solid #8f7041;
  border-right: 3px solid #8f7041;
  background: rgba(0,0,0,.17);
  font-size: 16px;
  line-height: 1.5;
}

.f5-note {
  font-size: 13px !important;
  opacity: .78;
}

@media (max-width: 800px) {
  #hud { right: 8px; top: 8px; gap: 4px; }
  .hud-box { min-width: 57px; padding: 5px 6px; }
  .hud-box span:last-child { font-size: 17px; }
  .hud-box .label { font-size: 8px; }
  .fly { width: 68px; height: 68px; }
  #game::after { inset: 9% 3%; border-width: 9px; }
}


/* Na úvodní a výsledkové obrazovce necháváme běžný kurzor.
   Ruka s terčem se objeví až po spuštění lovu. */
#intro, #result {
  cursor: default;
}

#crosshair.game-cursor {
  display: block;
}

#crosshair {
  display: none;
}


.shusniz span {
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .78;
}


.best-records {
  margin: 21px auto 4px;
  padding: 12px 14px 10px;
  border: 1px solid rgba(211, 177, 112, .24);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.best-title {
  margin-bottom: 7px;
  font-size: 10px;
  letter-spacing: .17em;
  opacity: .68;
}

.best-row {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 2px;
  border-top: 1px solid rgba(255,255,255,.055);
  font-size: 13px;
}

.best-row:first-of-type { border-top: 0; }

.best-rank {
  color: #f5d58f;
  font-weight: bold;
}

.best-score {
  color: #f5d58f;
  font-weight: bold;
}

.best-label {
  display: block;
  font-size: 9px;
  opacity: .52;
  letter-spacing: .05em;
  margin-bottom: 1px;
}

#bestEmpty {
  font-size: 12px;
  opacity: .55;
  padding: 3px 0 1px;
}

.clear-records {
  margin: 7px 0 0;
  padding: 3px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #cdb98f;
  font-size: 10px;
  font-weight: normal;
  letter-spacing: .03em;
  cursor: pointer;
}

.clear-records:hover {
  filter: brightness(1.3);
  text-decoration: underline;
}

@media (max-width: 620px) {
  .parchment { padding: 25px 19px 28px; }
  .best-row { grid-template-columns: 24px 1fr 1fr 1fr; gap: 4px; font-size: 11px; }
  .best-label { font-size: 8px; }
}


.return-btn {
  margin-top: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: .06em;
  background: rgba(70, 51, 36, .72);
  border-color: rgba(211, 177, 112, .42);
}


.reaction-stage {
  position: relative;
  min-height: 220px;
  margin: 18px 0 10px;
  display: grid;
  grid-template-columns: minmax(130px, 210px) 1fr;
  gap: 10px;
  align-items: center;
}

.ghoul-reaction {
  position: relative;
  height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-origin: 50% 90%;
}

.ghoul-reaction img {
  display: block;
  max-width: 205px;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.55));
}

.ghoul-reaction.react {
  animation: ghoulEntrance .85s ease-out, ghoulSway 1.8s ease-in-out .85s 2;
}

@keyframes ghoulEntrance {
  0%   { opacity: 0; transform: translateY(22px) scale(.88); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ghoulSway {
  0%,100% { transform: rotate(0deg); }
  30% { transform: rotate(-2deg) translateY(-2px); }
  70% { transform: rotate(2deg) translateY(0); }
}

.shusniz {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 3px solid #8f7041;
  border-right: 3px solid #8f7041;
  background: rgba(0,0,0,.17);
  font-size: 16px;
  line-height: 1.5;
}

.shusniz strong {
  color: #f5d58f;
  font-size: 19px;
}

.shusniz span {
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .78;
}

@media (max-width: 620px) {
  .reaction-stage {
    grid-template-columns: 1fr;
    min-height: 300px;
  }
  .ghoul-reaction { height: 170px; }
  .ghoul-reaction img { max-height: 170px; max-width: 155px; }
  .shusniz { min-height: 86px; }
}


/* Šušnížův žaludek: jen drobný herecký detail, žádná změna jeho charakteristických výrazů. */
.ghoul-reaction.appetite-good {
  animation:
    ghoulEntrance .85s ease-out,
    ghoulSway 1.8s ease-in-out .85s 2,
    bellySatisfaction 1.4s ease-in-out 1.15s 2;
}

.ghoul-reaction.appetite-hungry {
  animation:
    ghoulEntrance .85s ease-out,
    ghoulSway 1.8s ease-in-out .85s 2,
    bellyHunger 1.1s ease-in-out 1.05s 2;
}

.ghoul-reaction.appetite-golden {
  animation:
    ghoulEntrance .85s ease-out,
    ghoulSway 1.8s ease-in-out .85s 2,
    bellySatisfaction 1.1s ease-in-out 1.05s 3;
}

@keyframes bellySatisfaction {
  0%, 100% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.025, 1.045) rotate(-1deg); }
  70% { transform: scale(1.015, 1.035) rotate(1deg); }
}

@keyframes bellyHunger {
  0%, 100% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(.985, 1.01) rotate(-1.2deg); }
  55% { transform: scale(1.01, .99) rotate(1.2deg); }
}