@font-face { font-family: "Barlow Condensed"; src: url("assets/barlow-condensed-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bevan"; src: url("assets/bevan.ttf") format("truetype"); font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #16213A; overflow: hidden; overscroll-behavior: none; }
body { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; color: #1A1A1C; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; }

#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

.round {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px);
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #A6322A; background: #EFE4CB; color: #1A1A1C;
  font: 700 24px/1 "Barlow Condensed", sans-serif; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.45); cursor: pointer; padding: 0;
}
.round svg { width: 24px; height: 24px; }
#btn-help { right: calc(env(safe-area-inset-right, 0px) + 64px); }
#btn-sound { right: calc(env(safe-area-inset-right, 0px) + 12px); }

.card {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-1.2deg);
  width: min(320px, 84vw); padding: 14px 18px 14px;
  background: #EFE4CB; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 22px rgba(0,0,0,.5), 0 3px 5px rgba(0,0,0,.35);
  text-align: center;
}
.card[hidden] { display: none; }
.eyebrow { margin: 0 0 6px; color: #A6322A; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.card h1, .card h2 { font-family: "Bevan", Georgia, serif; font-weight: 400; margin: 0 0 8px; line-height: 1.02; letter-spacing: .01em; }
.card h1 { font-size: clamp(28px, 8vw, 36px); }
.card h2 { font-size: clamp(24px, 7vw, 30px); }
.lead { margin: 0 0 10px; font-size: 18px; line-height: 1.2; font-weight: 700; color: #34302b; }
.keys { list-style: none; padding: 8px 0 0; margin: 0 0 12px; border-top: 2px solid #A6322A33; font-size: 17px; line-height: 1.35; text-align: left; }
.keys li { margin: 3px 0; }
.keys b { color: #A6322A; }
.card button {
  font: 700 20px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  background: #A6322A; color: #EFE4CB; border: 0; border-radius: 3px; padding: 12px 22px; min-height: 46px; cursor: pointer;
  box-shadow: 0 3px 0 #6d1f1a;
}
.card button:active { transform: translateY(2px); box-shadow: 0 1px 0 #6d1f1a; }
.final { margin: 2px 0 2px; font-size: 56px; line-height: 1; }
#board { margin: 0 auto 12px; padding: 0; list-style: none; font-size: 17px; max-width: 240px; text-align: left; }
#board li { display: flex; justify-content: space-between; border-bottom: 1px dotted #1A1A1C44; padding: 2px 0; }
#board li.mine { color: #A6322A; }
#board a { color: inherit; }

.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) { .touch-only { display: block; } .mouse-only { display: none; } }

#hint {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%);
  pointer-events: none; padding: 7px 14px; border-radius: 3px;
  background: rgba(239,228,203,.92); color: #1A1A1C; font-size: 17px; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: opacity .3s;
}
#hint:empty { opacity: 0; }