/* Hunting + rafting minigames (hunt.js, raft.js).
   Everything lives inside #screen (container-type: inline-size), so sizes use cqw. */
.mg { position: absolute; inset: 0; overflow: hidden; background: #2a1d12; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mg canvas.mg-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* parchment pill HUD along the top */
.mg-hud { position: absolute; top: 2cqw; left: 2cqw; right: 2cqw; display: flex; align-items: center; gap: 1.4cqw; z-index: 5;
  pointer-events: none; font: 700 2.8cqw/1.1 Nunito, sans-serif; }
.mg-pill { display: flex; align-items: center; gap: .7cqw; background: rgba(243, 230, 198, .93); color: var(--ink);
  padding: .8cqw 1.8cqw; border-radius: 3cqw; box-shadow: 0 .4cqw 0 rgba(58, 38, 20, .5); white-space: nowrap; }
.mg-pill b { font-weight: 800; }
.mg-pill.mg-warn b { color: #b42a1e; }
.mg-pill.mg-btn { margin-left: auto; pointer-events: auto; cursor: pointer; border: 0; font: inherit; background: var(--gold);
  color: #3a2210; box-shadow: 0 .4cqw 0 var(--gold-lo); }
.mg-pill.mg-btn:active { transform: translateY(.3cqw); box-shadow: none; }
.mg-pill .key { font-size: 2cqw; opacity: .6; }
.mg-bar { width: 20cqw; height: 1.5cqw; background: rgba(58, 38, 20, .22); border-radius: 1cqw; overflow: hidden; }
.mg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#78b9e8, #2f6f9e); border-radius: 1cqw; }
.mg-hud .mg-right { margin-left: auto; }

/* touch controls: shown on touch devices (or after the first touch) */
.mg-pad { position: absolute; left: 4cqw; bottom: 4cqw; width: 19cqw; height: 19cqw; border-radius: 50%; z-index: 4;
  background: rgba(255, 255, 255, .2); border: .5cqw solid rgba(255, 255, 255, .55); display: none; place-items: center; touch-action: none; }
.mg-pad span { width: 8cqw; height: 8cqw; border-radius: 50%; background: rgba(255, 255, 255, .8);
  box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .2); pointer-events: none; }
.mg-fire { position: absolute; right: 4cqw; bottom: 5cqw; width: 15cqw; height: 15cqw; border-radius: 50%; z-index: 4; border: 0; padding: 0;
  background: var(--red); color: #fff3d6; display: none; place-items: center; font: 800 3.3cqw Nunito, sans-serif; letter-spacing: .04em;
  box-shadow: 0 .7cqw 0 #7a2414, 0 0 0 .5cqw rgba(255, 255, 255, .4); cursor: pointer; touch-action: none; }
.mg-fire.pressed { transform: translateY(.5cqw); box-shadow: 0 .2cqw 0 #7a2414, 0 0 0 .5cqw rgba(255, 255, 255, .4); }
.mg-fire.empty { filter: grayscale(.85) brightness(.8); }
.mg-steer { position: absolute; bottom: 4cqw; width: 16cqw; height: 16cqw; border-radius: 50%; z-index: 4; display: none; place-items: center;
  background: rgba(255, 255, 255, .2); border: .5cqw solid rgba(255, 255, 255, .55); color: rgba(255, 255, 255, .95);
  font: 800 6cqw/1 Nunito, sans-serif; touch-action: none; pointer-events: none; }
.mg-steer.l { left: 4cqw; } .mg-steer.r { right: 4cqw; }
.mg-steer.on { background: rgba(255, 255, 255, .5); transform: scale(.95); }
@media (any-pointer: coarse) { .mg-pad, .mg-fire, .mg-steer { display: grid; } }
.mg.mg-touch .mg-pad, .mg.mg-touch .mg-fire, .mg.mg-touch .mg-steer { display: grid; }

/* instruction / result cards (built on .veil + .card from app.css) */
.mg .card { width: 74%; }
.mg-howto { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; margin: 1.2cqw 0 1.4cqw; text-align: left;
  font: 600 2.4cqw/1.4 Nunito, sans-serif; }
.mg-howto > div { background: rgba(138, 106, 68, .13); border-radius: .8cqw; padding: 1cqw 1.4cqw; }
.mg-howto b { display: block; font-weight: 800; font-size: 2cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3cqw; }
.mg kbd { font: 800 2cqw Nunito, sans-serif; background: #fffaf0; border: .2cqw solid #b89a68; border-bottom-width: .4cqw;
  border-radius: .5cqw; padding: 0 .6cqw; }
.mg-note { font-family: Nunito, sans-serif; font-size: 2.5cqw; color: var(--ink-soft); margin: 0 0 1.2cqw; }