/* ======================================================================
   Heckmeck am Bratwurmeck
   ====================================================================== */

.hm-worm-svg { width: 100%; height: 100%; display: block; }

/* ---------- Worm tiles (like the original: cream, blue number, worms) ---------- */
.hm-tile {
  position: relative; aspect-ratio: .64; border-radius: 12% / 8%;
  background: linear-gradient(170deg, #fbf3dc 0%, #efe2bd 70%, #e3d3a6 100%);
  box-shadow: inset 0 -2px 0 rgba(120, 90, 40, .25), inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 6%; container-type: inline-size;
  transition: transform 160ms, box-shadow 160ms, opacity 200ms;
}
.hm-tile b {
  font-weight: 900; font-size: 40cqw; line-height: 1; color: #1d2c73;
  border-bottom: 3cqw solid #1d2c73; padding: 0 4% 3%; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.hm-worms { flex: 1; width: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0 2%; padding: 4% 6%; }
.hm-worms i { width: 44%; aspect-ratio: 1; display: block; }
.hm-tile[data-v="21"] .hm-worms i, .hm-tile[data-v="22"] .hm-worms i, .hm-tile[data-v="23"] .hm-worms i, .hm-tile[data-v="24"] .hm-worms i { width: 72%; }
.hm-tile.back {
  background:
    repeating-linear-gradient(45deg, rgba(160, 120, 60, .12) 0 3px, transparent 3px 7px),
    linear-gradient(170deg, #e7d6a8, #cdb57e);
  opacity: .55;
}
.hm-slot { aspect-ratio: .64; border-radius: 12% / 8%; border: 1.5px dashed rgba(255,255,255,.14); }
.hm-tile.target {
  transform: translateY(-6%) scale(1.06); z-index: 2;
  box-shadow: 0 0 0 3px #3ddc84, 0 0 18px rgba(61, 220, 132, .7), 0 4px 8px rgba(0,0,0,.4);
  animation: hm-target 1s ease-in-out infinite alternate;
}
@keyframes hm-target { to { box-shadow: 0 0 0 3px #3ddc84, 0 0 26px rgba(61, 220, 132, .95), 0 4px 8px rgba(0,0,0,.4); } }
.hm-tile.near { box-shadow: 0 0 0 2px rgba(255, 210, 63, .7), 0 2px 4px rgba(0,0,0,.35); }

/* ---------- Grill ---------- */
.hm-grill {
  grid-area: grill; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px 5px;
  padding: 8px; border-radius: 16px; align-self: start;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #3a3f48, #262a31);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.5);
  width: 100%; max-width: 640px; justify-self: center;
}

/* ---------- Dice: blue pips, worm on the 6 ---------- */
.die.hm-die { width: 16cqw; height: 16cqw; border-radius: 3cqw; --pip: #1f4fa8; }
.die.hm-die .hm-worm-face { display: none; position: absolute; inset: 9%; }
.die.hm-die[data-face="6"] .pip { opacity: 0 !important; }
.die.hm-die[data-face="6"] .hm-worm-face { display: block; }
.die.hm-die.pickable { cursor: pointer; }
.die.hm-die.hm-used { filter: brightness(.5) saturate(.6); }
.die.hm-die.picked { opacity: 0; transition: opacity 220ms; }
#hm-dice .bowl-hint { font-size: clamp(12px, 7cqw, 18px); }

/* Mini dice (set aside) */
.hm-mini {
  display: inline-block; position: relative; width: 22px; height: 22px; border-radius: 5px; flex: none;
  background: #fff no-repeat center/100%; box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.12);
  font-style: normal;
}
.hm-mini svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
.hm-mini[data-face="1"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f4fa8'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.hm-mini[data-face="2"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f4fa8'%3E%3Ccircle cx='6.5' cy='6.5' r='2.4'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.4'/%3E%3C/svg%3E"); }
.hm-mini[data-face="3"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f4fa8'%3E%3Ccircle cx='6.5' cy='6.5' r='2.4'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.4'/%3E%3C/svg%3E"); }
.hm-mini[data-face="4"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f4fa8'%3E%3Ccircle cx='6.5' cy='6.5' r='2.4'/%3E%3Ccircle cx='17.5' cy='6.5' r='2.4'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.4'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.4'/%3E%3C/svg%3E"); }
.hm-mini[data-face="5"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f4fa8'%3E%3Ccircle cx='6.5' cy='6.5' r='2.4'/%3E%3Ccircle cx='17.5' cy='6.5' r='2.4'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.4'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.4'/%3E%3C/svg%3E"); }

/* Set-aside row */
.hm-kept {
  grid-area: kept; display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 6px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
}
.hm-kept-empty { color: var(--muted); font-size: 13px; }
.hm-groups { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.hm-group { display: inline-flex; gap: 3px; animation: hm-in 260ms ease-out; }
@keyframes hm-in { from { transform: translateY(-8px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.hm-sum { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-left: 10px; border-left: 1px solid var(--line); }
.hm-sum small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.hm-sum b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--muted); }
.hm-sum.ok b { color: var(--text); }

/* Player chips: top tile + worm count */
.hm-chip-top {
  min-width: 24px; height: 22px; padding: 0 4px; border-radius: 5px; display: grid; place-items: center;
  background: linear-gradient(170deg, #fbf3dc, #e9dab0); color: #1d2c73; font-weight: 900; font-size: 12px;
}
.hm-chip-top.empty { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.hm-chip .pts { display: inline-flex; align-items: center; gap: 1px; }
.hm-chip-worm { display: inline-block; width: 16px; height: 16px; }
.chip.steal { box-shadow: 0 0 0 2px var(--danger); animation: hm-steal 900ms ease-in-out infinite alternate; }
@keyframes hm-steal { to { box-shadow: 0 0 0 2px var(--danger), 0 0 14px rgba(239,68,68,.7); } }
.chip.offline { opacity: .55; }

/* Bust overlay */
.hm-flash-card .hm-bust-word { font-size: clamp(46px, 13vmin, 96px); color: #e5242b; letter-spacing: 0; }
.hm-bust-detail { font-size: 14px; font-weight: 700; color: #6b7385; }
.bad { color: #ff7b7b; }

/* ---------- Menu card & logo ---------- */
.gc-hm { background: linear-gradient(160deg, #2e7d4f, #1d5a37); display: flex; align-items: center; justify-content: center; gap: 4px; position: relative; }
.gc-hm .hm-tile { width: 26px; }
.gc-hm .hm-tile:first-child { transform: rotate(-8deg); }
.gc-hm .hm-tile:nth-child(2) { transform: rotate(6deg) translateY(2px); }
.gc-hm-die { position: absolute; right: 8px; bottom: 6px; transform: rotate(12deg); }
.gc-hm-die .hm-mini { width: 20px; height: 20px; }
.hm-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hm-logo-worm { width: 70px; height: 70px; animation: hm-wiggle 2.4s ease-in-out infinite; }
@keyframes hm-wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
.hm-logo-word {
  font-weight: 900; font-size: 50px; letter-spacing: 1px; color: #ffe14d;
  -webkit-text-stroke: 2px #4a2a00; paint-order: stroke fill; text-shadow: 0 4px 0 #2a1800;
  transform: rotate(-3deg);
}
.hm-logo-sub { margin-top: 6px; padding: 3px 12px; border-radius: 999px; background: #c43a2c; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .5px; transform: rotate(-3deg); }

/* ---------- Game layout ---------- */
#screen-hm-game.active {
  display: grid;
  --hm-bowl: clamp(150px, min(80vw, calc(100dvh - 480px - var(--safe-top) - var(--safe-bottom))), 340px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "top" "grill" "dice" "kept" "status" "act";
  row-gap: 8px;
  padding: var(--safe-top) max(10px, var(--safe-right)) 0 max(10px, var(--safe-left));
}
#screen-hm-game .topbar { grid-area: top; padding: 8px 0 0; }
#hm-dice.dice-tray { grid-area: dice; --bowl-size: var(--hm-bowl); width: var(--hm-bowl); justify-self: center; align-self: center; }
#screen-hm-game .status { grid-area: status; display: block; text-align: left; font-size: 14px; line-height: 1.35; min-height: 2.7em; padding: 0 2px; }
#screen-hm-game .actionbar { grid-area: act; padding-left: 0; padding-right: 0; }
#hm-actions .btn.main { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-hm-game .toasts { top: auto; bottom: calc(var(--safe-bottom) + 84px); flex-direction: column-reverse; }

@media (min-aspect-ratio: 4001/3000) {
  #screen-hm-game.active {
    --hm-bowl: clamp(150px, min(44vw, calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom))), 470px);
    grid-template-columns: var(--hm-bowl) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "dice top" "dice grill" "dice kept" "dice status" "dice act";
    column-gap: 14px; row-gap: 6px;
    padding: max(6px, var(--safe-top)) max(12px, var(--safe-right)) max(8px, var(--safe-bottom)) max(12px, var(--safe-left));
  }
  #screen-hm-game .topbar { padding: 0; }
  #hm-dice.dice-tray { align-self: center; }
  .hm-grill { padding: 6px; gap: 4px; }
  #screen-hm-game .status { font-size: 13px; min-height: 0; align-self: start; }
  #screen-hm-game .actionbar { padding: 0; background: none; gap: 8px; }
  #screen-hm-game .actionbar .main { height: 50px; font-size: 16px; }
  #screen-hm-game .toasts { left: calc(var(--hm-bowl) + 24px); right: 0; top: max(50px, var(--safe-top)); bottom: auto; flex-direction: column; }
}
@media (min-aspect-ratio: 4001/3000) and (max-height: 430px) {
  .hm-grill { max-width: min(100%, calc((100dvh - 230px) * 4.6)); }
  .hm-kept { min-height: 36px; padding: 3px 8px; }
  .hm-mini { width: 18px; height: 18px; }
  .hm-sum b { font-size: 19px; }
}
@media (min-aspect-ratio: 4001/3000) and (min-width: 1000px) and (min-height: 620px) {
  #screen-hm-game.active { --hm-bowl: clamp(300px, min(40vw, calc(100dvh - 60px)), 500px); column-gap: 32px; row-gap: 12px; padding: 22px 32px; }
  #screen-hm-game .status { font-size: 15px; }
  .hm-mini { width: 26px; height: 26px; }
}

/* Worms inside toasts */
.toast .hm-worms { display: inline-flex; width: auto; flex: none; padding: 0; gap: 1px; vertical-align: -4px; }
.toast .hm-worms i { width: 18px; height: 18px; }