/* KRAKENOVA – modern version: title, menus, panels and HUD */
.mt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: max(16px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.mt .art {
  position: absolute;
  inset: -3%;
  background-size: cover;
  background-position: center 40%;
  animation: drift 50s ease-in-out infinite alternate;
  transition: opacity 1.4s;
}
.mt.demo .art { opacity: 0; }
.mt .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 4, 9, 0.35) 0%, rgba(1, 4, 9, 0) 30%, rgba(1, 4, 9, 0.35) 55%, rgba(1, 4, 9, 0.92) 100%);
  transition: opacity 1.4s;
}
.mt.demo .shade { opacity: 0.5; }
.mt .logo {
  position: absolute;
  left: 50%;
  top: max(3vh, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(820px, 92vw);
  transition: opacity 0.8s;
}
.mt .logo .logoimg { display: block; width: 100%; filter: drop-shadow(0 0 30px rgba(46, 232, 216, 0.35)); animation: logoIn 1.6s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes logoIn { from { opacity: 0; transform: translateY(-20px) scale(0.92); filter: blur(10px); } to { opacity: 1; transform: none; } }
.mt .logo .wordmark { display: block; text-align: center; font: 800 clamp(48px, 11vw, 120px)/1 var(--ui-font); letter-spacing: 0.06em; color: #ffcf8a; text-shadow: 0 0 30px rgba(46, 232, 216, 0.6); }

.menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: min(380px, 88vw);
  margin-bottom: 4px;
  transition: opacity 0.8s;
}
.menu button {
  position: relative;
  padding: 11px 26px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(230, 246, 255, 0.72);
  font: 700 clamp(15px, 2vw, 19px) var(--ui-font);
  letter-spacing: 0.26em;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s, background 0.2s, letter-spacing 0.2s;
}
.menu button.sel {
  color: #fff;
  letter-spacing: 0.32em;
  background: linear-gradient(90deg, rgba(46, 232, 216, 0) 0%, rgba(46, 232, 216, 0.22) 50%, rgba(46, 232, 216, 0) 100%);
  text-shadow: 0 0 18px rgba(46, 232, 216, 0.9);
}
.menu button.sel::before, .menu button.sel::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  background: var(--teal);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--teal);
}
.menu button.sel::before { left: 6px; }
.menu button.sel::after { right: 6px; }
.menu button .val { color: var(--amber); margin-left: 10px; letter-spacing: 0.12em; }
.mt .foot { position: relative; margin-top: 12px; color: rgba(143, 179, 201, 0.7); font: 500 11px/1.5 var(--ui-font); letter-spacing: 0.12em; text-align: center; transition: opacity 0.8s; }
.mt .demo-tag { position: absolute; top: 46%; left: 50%; transform: translateX(-50%); font: 800 14px var(--ui-font); letter-spacing: 0.6em; color: rgba(255, 255, 255, 0.75); display: none; text-shadow: 0 0 12px var(--teal); }
.mt.demo .demo-tag { display: block; animation: pulse 1.6s infinite; }
.mt.demo .menu, .mt.demo .logo, .mt.demo .foot { opacity: 0.18; }

.panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(1, 5, 12, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 25;
}
.panel .box {
  width: min(560px, 100%);
  max-height: 94%;
  overflow: auto;
  padding: 24px 24px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(10, 30, 46, 0.92), rgba(3, 10, 20, 0.95));
  border: 1px solid rgba(46, 232, 216, 0.28);
  box-shadow: 0 0 60px rgba(46, 232, 216, 0.12), 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: boxIn 0.35s cubic-bezier(.2, .9, .2, 1.1) both;
}
@keyframes boxIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.panel h2 { margin: 0 0 16px; text-align: center; font: 800 22px var(--ui-font); letter-spacing: 0.34em; color: var(--teal); text-shadow: 0 0 16px rgba(46, 232, 216, 0.6); }
.panel p { color: #b9d2e2; font: 500 15px/1.55 var(--ui-font); margin: 0 0 10px; }
.panel p.small { font-size: 12px; color: var(--dim); }
.panel .menu { min-width: 0; margin-top: 8px; }
.scores { width: 100%; border-collapse: collapse; font: 700 16px var(--ui-font); letter-spacing: 0.12em; }
.scores td { padding: 6px 8px; border-bottom: 1px solid rgba(143, 179, 201, 0.1); }
.scores td:first-child { color: var(--dim); width: 3em; }
.scores td.s { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.scores td.n { color: var(--amber); width: 4em; text-align: right; }
.scores td.d { color: rgba(143, 179, 201, 0.7); width: 4.5em; text-align: right; font-size: 13px; }
.scores tr.new td { color: #fff; text-shadow: 0 0 12px var(--teal); animation: pulse 0.9s infinite; }
.results { display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; font: 700 17px var(--ui-font); letter-spacing: 0.14em; }
.results .v { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.results .acc { color: var(--amber); }
.results .big { grid-column: span 2; text-align: center; font-size: 36px; color: #fff; text-shadow: 0 0 20px rgba(46, 232, 216, 0.6); margin: 4px 0 6px; }
.initials { display: flex; justify-content: center; gap: 14px; margin: 18px 0 8px; }
.initials .slot { width: 64px; height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; border-radius: 14px; background: rgba(2, 10, 20, 0.7); border: 2px solid rgba(143, 179, 201, 0.25); font: 800 42px/1 var(--ui-font); color: #fff; cursor: pointer; }
.initials .slot.on { border-color: var(--teal); box-shadow: 0 0 22px rgba(46, 232, 216, 0.5); }
.initials .slot small { font-size: 13px; color: var(--dim); line-height: 1; }
.entry-hint { text-align: center; color: var(--dim); font: 600 12px var(--ui-font); letter-spacing: 0.18em; }
.row-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.row-btns button { padding: 10px 18px; border-radius: 10px; border: 1px solid rgba(46, 232, 216, 0.4); background: rgba(46, 232, 216, 0.08); color: #fff; font: 700 14px var(--ui-font); letter-spacing: 0.2em; cursor: pointer; }

/* HUD over the playfield (position set from the renderer through CSS variables) */
#hud { pointer-events: none; z-index: 10; font-family: var(--ui-font); }
.mh { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); }
.mh-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: max(8px, env(safe-area-inset-top)) 12px 0; }
.mh-top > div { display: flex; flex-direction: column; gap: 1px; min-width: 30%; }
.mh-top label { font: 700 10px var(--ui-font); letter-spacing: 0.3em; color: #ff5a4a; text-shadow: 0 0 8px rgba(255, 90, 74, 0.6); }
.mh-top b { font: 800 clamp(15px, 2.4vh, 24px) var(--ui-font); color: #fff; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(46, 232, 216, 0.45); }
.mh-top .hi { align-items: center; }
.mh-top .hi label { color: var(--amber); text-shadow: 0 0 8px rgba(255, 178, 46, 0.6); }
.mh-top .dp { align-items: flex-end; }
.mh-top .dp label { color: var(--teal); text-shadow: 0 0 8px rgba(46, 232, 216, 0.6); }
.mh-top .dp span { font: 600 9px var(--ui-font); letter-spacing: 0.2em; color: var(--dim); }
.mh-chain { position: absolute; left: 12px; top: calc(max(8px, env(safe-area-inset-top)) + 44px); font: 800 13px var(--ui-font); letter-spacing: 0.16em; color: var(--amber); text-shadow: 0 0 12px rgba(255, 178, 46, 0.8); opacity: 0; transition: opacity 0.2s; }
.mh-chain.on { opacity: 1; }
.mh-chain i { font-style: normal; font-size: 24px; color: #fff; margin-right: 6px; }
.mh-chain .bar { display: block; height: 3px; margin-top: 3px; width: 88px; background: rgba(255, 178, 46, 0.25); border-radius: 2px; overflow: hidden; }
.mh-chain .bar span { display: block; height: 100%; background: var(--amber); width: 100%; }
.mh-bot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px max(6px, env(safe-area-inset-bottom)); }
.mh-lives { display: flex; gap: 3px; min-width: 30%; }
.mh-lives img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(46, 232, 216, 0.6)); }
.mh-wpn { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 700 9px var(--ui-font); letter-spacing: 0.22em; color: var(--dim); }
.mh-wpn .pips { display: flex; gap: 3px; }
.mh-wpn .pips i { width: 14px; height: 5px; border-radius: 3px; background: rgba(143, 179, 201, 0.25); }
.mh-wpn .pips i.on { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.mh-wpn .sh { color: #6fd8ff; text-shadow: 0 0 8px #6fd8ff; visibility: hidden; }
.mh-wpn .sh.on { visibility: visible; }
.mh-badges { display: flex; gap: 2px; align-items: flex-end; min-width: 30%; justify-content: flex-end; }
.mh-badges svg { width: 14px; height: 20px; filter: drop-shadow(0 0 4px rgba(255, 210, 120, 0.7)); }
.mh-banner { position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%); text-align: center; }
.mh-banner div { font: 800 clamp(18px, 3.6vh, 34px)/1.3 var(--ui-font); letter-spacing: 0.28em; color: #fff; text-shadow: 0 0 22px rgba(46, 232, 216, 0.9), 0 0 4px rgba(46, 232, 216, 0.9); animation: bannerIn 0.6s cubic-bezier(.2, .9, .2, 1.2) both; }
.mh-banner div.sub { font-size: clamp(11px, 1.8vh, 16px); letter-spacing: 0.4em; color: var(--dim); text-shadow: none; animation-delay: 0.15s; }
.mh-banner.alert div { color: #ffd6d6; text-shadow: 0 0 24px rgba(255, 60, 80, 0.95), 0 0 4px #ff3048; animation: bannerIn 0.5s both, glitch 0.18s steps(2) 6; }
.mh-banner.good div { text-shadow: 0 0 24px rgba(80, 255, 160, 0.9); }
.mh-banner.result div { text-shadow: 0 0 22px rgba(255, 178, 46, 0.9); }
.mh-banner .gold { color: #ffe08a; }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.35); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes glitch { 0% { transform: translateX(-3px); } 100% { transform: translateX(3px); } }
.mh-pops { position: absolute; inset: 0; overflow: hidden; }
.mh-pops span { position: absolute; transform: translate(-50%, -50%); font: 800 13px var(--ui-font); color: #fff; letter-spacing: 0.06em; text-shadow: 0 0 10px rgba(46, 232, 216, 0.9); animation: popUp 1.2s ease-out forwards; white-space: nowrap; }
.mh-pops span.big { font-size: 20px; color: #ffe08a; text-shadow: 0 0 14px rgba(255, 178, 46, 1); }
.mh-pops span.mult { font-size: 16px; color: var(--amber); }
@keyframes popUp { from { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.mh-boss { position: absolute; left: 14%; right: 14%; top: calc(max(8px, env(safe-area-inset-top)) + 48px); display: none; }
.mh-boss.on { display: block; }
.mh-boss .bn { text-align: center; font: 800 10px var(--ui-font); letter-spacing: 0.4em; color: #ff8a9a; margin-bottom: 4px; text-shadow: 0 0 8px rgba(255, 60, 80, 0.8); }
.mh-boss .bb { height: 6px; border-radius: 4px; background: rgba(255, 60, 80, 0.18); overflow: hidden; border: 1px solid rgba(255, 90, 110, 0.4); }
.mh-boss .bb span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff3048, #ffb22e); box-shadow: 0 0 12px #ff3048; transition: width 0.15s; }
.mh-pause { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font: 800 26px var(--ui-font); letter-spacing: 0.5em; color: #fff; text-shadow: 0 0 20px var(--teal); }
.mh-pause.on { display: flex; }
.nogl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font: 600 16px/1.6 var(--ui-font); color: var(--dim); }

/* wide screens: the HUD moves into the free space beside the playfield */
.mh.wide .mh-top > div { position: absolute; top: 34px; min-width: 0; }
.mh.wide .mh-top .sc { right: calc(100% + 40px); align-items: flex-end; }
.mh.wide .mh-top .hi { right: calc(100% + 40px); top: 112px; align-items: flex-end; }
.mh.wide .mh-top .dp { left: calc(100% + 40px); align-items: flex-start; }
.mh.wide .mh-top label { font-size: 12px; }
.mh.wide .mh-top b { font-size: 38px; }
.mh.wide .mh-top .hi b { font-size: 24px; }
.mh.wide .mh-top .dp span { font-size: 12px; margin-top: 4px; }
.mh.wide .mh-chain { left: auto; right: calc(100% + 40px); top: 186px; text-align: right; font-size: 15px; }
.mh.wide .mh-chain i { font-size: 34px; }
.mh.wide .mh-chain .bar { width: 140px; margin-left: auto; }
.mh.wide .mh-bot > div { position: absolute; bottom: 36px; min-width: 0; }
.mh.wide .mh-lives { right: calc(100% + 40px); justify-content: flex-end; }
.mh.wide .mh-lives img { width: 32px; height: 32px; }
.mh.wide .mh-bot > .mh-wpn { left: calc(100% + 40px); bottom: 84px; align-items: flex-start; font-size: 12px; }
.mh.wide .mh-wpn .pips i { width: 26px; height: 7px; }
.mh.wide .mh-badges { left: calc(100% + 40px); justify-content: flex-start; }
.mh.wide .mh-badges svg { width: 20px; height: 28px; }
.mh-top label, .mh-top b, .mh-top span, .mh-chain, .mh-wpn { white-space: nowrap; }
/* sonar beside the playfield (wide screens only) */
.mh-sonar { position: absolute; display: none; left: calc(100% + 40px); top: 168px; filter: drop-shadow(0 0 14px rgba(46, 232, 216, 0.25)); }
.mh.wide .mh-sonar { display: block; }
/* labels under the falling pearls */
.mh-tags { position: absolute; inset: 0; overflow: hidden; }
.mh-tags span { position: absolute; transform: translate(-50%, 0); font: 800 9px var(--ui-font); letter-spacing: 0.18em; white-space: nowrap; padding: 1px 5px; border-radius: 6px; background: rgba(2, 10, 20, 0.55); }
.mh-tags span.pw { color: #ffd77a; text-shadow: 0 0 8px rgba(255, 190, 80, 0.9); }
.mh-tags span.sh { color: #8fe0ff; text-shadow: 0 0 8px rgba(80, 200, 255, 0.9); }
.mh.wide .mh-tags span { font-size: 10px; }