:root {
  --bg: #1a0f0c;
  --panel: rgba(54, 31, 23, 0.91);
  --panel-2: rgba(95, 58, 38, 0.72);
  --gold: #d4aa5a;
  --gold-2: #f1d58b;
  --cream: #f8eed0;
  --ink: #311b13;
  --rose: #7a1f2a;
  --green: #2f4d38;
  --shadow: rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cream);
  background:
    radial-gradient(circle at 20% 10%, rgba(189, 133, 67, .15), transparent 28%),
    radial-gradient(circle at 80% 25%, rgba(122, 31, 42, .22), transparent 32%),
    linear-gradient(rgba(20, 10, 8, .84), rgba(20, 10, 8, .9)),
    url('assets/krumlov-bg.svg') center/cover fixed;
  overscroll-behavior: none;
}

button { font: inherit; }
.app-shell { width: min(100%, 1024px); margin: 0 auto; padding: 14px 12px 28px; }
.hero {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  background: linear-gradient(135deg, rgba(68,39,29,.97), rgba(35,21,16,.97));
  border: 1px solid rgba(212,170,90,.6);
  border-radius: 18px;
  box-shadow: 0 12px 34px var(--shadow), inset 0 0 0 2px rgba(255,255,255,.03);
}
.crest {
  width: 58px; height: 58px; flex: 0 0 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--gold-2);
  font-size: 31px;
  border: 2px solid var(--gold);
  background: radial-gradient(circle, #742331, #311717 70%);
  box-shadow: inset 0 0 16px rgba(0,0,0,.5), 0 5px 14px rgba(0,0,0,.3);
}
h1 { margin: 0; color: var(--gold-2); font-size: clamp(1.55rem, 5.4vw, 2.35rem); letter-spacing: .02em; }
.hero p { margin: 4px 0 0; font-size: .93rem; line-height: 1.35; opacity: .92; }

.hud {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 10px 0;
}
.hud div {
  text-align: center; padding: 8px 5px;
  background: var(--panel); border: 1px solid rgba(212,170,90,.35); border-radius: 12px;
}
.hud span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .75; }
.hud strong { display: block; margin-top: 2px; font-size: 1.1rem; color: var(--gold-2); }

.board-wrap {
  width: 100%; overflow: auto; padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(52,78,55,.95), rgba(26,54,36,.96));
  border: 4px ridge #8e6b3e;
  box-shadow: inset 0 0 32px rgba(0,0,0,.45), 0 12px 28px var(--shadow);
  -webkit-overflow-scrolling: touch;
}
.board {
  position: relative;
  width: 760px;
  height: 520px;
  margin: 0 auto;
  transform-origin: top left;
}
.tile {
  position: absolute;
  width: 66px; height: 84px;
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.9), transparent 26%),
    linear-gradient(145deg, #fff9e7, #dcc38e 75%);
  color: var(--ink);
  cursor: pointer;
  box-shadow:
    5px 6px 0 #8f7146,
    8px 10px 12px rgba(0,0,0,.42),
    inset 0 0 0 2px #efe0b5,
    inset 0 0 0 4px #7f6037;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 8px 5px 7px;
  transition: transform .16s ease, filter .16s ease, opacity .25s ease;
  touch-action: manipulation;
}
.tile:hover { transform: translateY(-2px); }
.tile.blocked { filter: saturate(.42) brightness(.68); cursor: not-allowed; }
.tile.free { filter: drop-shadow(0 0 4px rgba(241,213,139,.15)); }
.tile.selected {
  transform: translateY(-5px) scale(1.035);
  outline: 4px solid #f3c453;
  filter: brightness(1.08);
}
.tile.hint { animation: hintPulse .85s ease-in-out 3; }
.tile.removing { opacity: 0; transform: scale(.55) rotate(8deg); pointer-events: none; }
.tile-icon { font-size: 35px; line-height: 1; text-shadow: 0 1px 0 #fff; }
.tile-label { font-size: 10px; font-weight: bold; text-align: center; line-height: 1.05; letter-spacing: .02em; }
@keyframes hintPulse { 50% { transform: translateY(-6px) scale(1.07); box-shadow: 5px 6px 0 #8f7146, 0 0 18px #ffd66e; } }

.controls { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.btn {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(212,170,90,.55);
  color: var(--cream);
  background: linear-gradient(#6c4430, #42281d);
  box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.12);
  font-weight: bold;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn.gold { color: #2e1a11; background: linear-gradient(#f0d48c, #c8953f); border-color: #f4d88d; }
.rules { margin-top: 12px; padding: 11px 13px; background: var(--panel); border: 1px solid rgba(212,170,90,.32); border-radius: 12px; }
.rules summary { cursor: pointer; color: var(--gold-2); font-weight: bold; }
.rules p { margin: 9px 0 1px; line-height: 1.45; font-size: .92rem; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(100px);
  background: rgba(31,18,14,.96); color: var(--cream); border: 1px solid var(--gold);
  padding: 10px 16px; border-radius: 999px; z-index: 50; opacity: 0;
  transition: .25s ease; box-shadow: 0 8px 20px rgba(0,0,0,.35); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(12,7,6,.8); backdrop-filter: blur(5px); z-index: 100; }
.hidden { display: none; }
.modal-card {
  width: min(92vw, 430px); text-align: center; padding: 28px 22px;
  background: linear-gradient(145deg, #f7edcf, #d5b97d);
  color: var(--ink); border: 5px double #7a5026; border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
.modal-card h2 { margin: 8px 0; color: #6d1d29; }
.seal { width: 74px; height: 74px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 38px; color: #f5d88b; background: #761f2b; border: 4px double #e5bc62; box-shadow: inset 0 0 15px rgba(0,0,0,.45); }
.final-stats { font-weight: bold; }

@media (max-width: 720px) {
  .app-shell { padding: 8px 7px 20px; }
  .hero { padding: 12px; border-radius: 14px; }
  .crest { width: 48px; height: 48px; flex-basis: 48px; font-size: 25px; }
  .hero p { font-size: .82rem; }
  .board-wrap { padding: 7px; }
  .controls { grid-template-columns: 1fr 1fr; }
  .controls .btn:last-child { grid-column: 1 / -1; }
}