/**
 * Full-screen app shell — edge-bleed on phones, capped panel on tablet/desktop.
 */

:root {
  --shell-max-w: 480px;
  --shell-max-h: 800px;
  /* Sprites are 75×75 — chip width scales; icon size comes from sprites/*.css */
  --shell-move-chip: clamp(96px, 28vw, 118px);
  --shell-type-xs: clamp(0.52rem, 2.6vw, 0.58rem);
  --shell-type-sm: clamp(0.62rem, 3.1vw, 0.72rem);
  --shell-type-md: clamp(0.72rem, 3.6vw, 0.82rem);
  --shell-type-rank: clamp(0.65rem, 3.2vw, 0.75rem);
  --shell-type-title: clamp(0.68rem, 3.4vw, 0.78rem);
  --shell-avatar-md: clamp(80px, 24vw, 96px);
  --anim-window: clamp(160px, 50vw, 208px);
}

@media (min-height: 740px) {
  :root {
    --shell-move-chip: clamp(102px, 29vw, 122px);
  }
}

html.shell-proto-root,
html.shell-proto-root body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body.shell-proto {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(212, 160, 23, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 160, 23, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Drop outer vignette/scanlines — they read as a stage around a floating box */
body.shell-proto::before,
body.shell-proto::after {
  display: none;
}

.shell-proto__viewport {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

.shell-proto__viewport > .px-frame-outer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
  filter: none;
  flex-shrink: 0;
}

/* Tablet / desktop — cap size, keep phone-like panel centered */
@media (min-width: 520px) {
  .shell-proto__viewport > .px-frame-outer {
    width: min(100%, var(--shell-max-w));
  }
}

@media (min-width: 520px) and (min-height: 860px) {
  .shell-proto__viewport > .px-frame-outer {
    height: min(100%, var(--shell-max-h));
  }
}

.shell-proto__viewport .px-frame-inner {
  height: 100%;
  box-sizing: border-box;
  padding: clamp(0.65rem, 2.5vw, 1rem);
  background-image:
    linear-gradient(rgba(212, 160, 23, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 160, 23, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, #181818 0%, var(--c-dark) 20%);
  background-size: 32px 32px, 32px 32px, auto;
}

.shell-proto__layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: clamp(0.85rem, 3.2vw, 1.35rem);
}

.shell-proto__header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 1.4vw, 0.5rem);
  width: 100%;
  padding-bottom: clamp(0.15rem, 1vw, 0.35rem);
}

.shell-proto__header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 0.75rem);
  min-height: clamp(2rem, 8vw, 2.75rem);
  width: 100%;
}

.shell-proto__logo {
  font-family: var(--font-pixel);
  font-size: clamp(1.25rem, 5.5vw, 1.6rem);
  letter-spacing: 0.14em;
  line-height: 1;
  color: #fff;
  animation: logoGlow 3s ease-in-out infinite alternate;
}

.shell-proto__gear {
  font-size: clamp(0.85rem, 4vw, 1.1rem);
  color: var(--c-brass);
}

.shell-proto__header-bar,
.shell-proto__header-rule {
  width: 100%;
}

.shell-proto__screen-title {
  font-family: var(--font-pixel);
  font-size: var(--shell-type-title);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brass);
  text-align: center;
  margin: clamp(0.15rem, 1vw, 0.35rem) 0 0;
}

.shell-proto__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1rem);
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.shell-proto__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 2vw, 0.75rem);
  width: 100%;
  padding-top: clamp(0.5rem, 2vw, 0.75rem);
}

.shell-proto__viewport .shell-proto__avatar {
  width: clamp(120px, 38vw, 164px);
  height: clamp(120px, 38vw, 164px);
}

.shell-proto__viewport .shell-proto__avatar > .px-frame-inner-sm {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.shell-proto__body--no-scroll {
  overflow: hidden;
}

.shell-proto__body--stretch {
  align-items: stretch;
}

.shell-proto__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1rem);
  flex: 1;
  min-height: 0;
  width: 100%;
}

.shell-proto__fill {
  flex: 1;
  min-height: 0;
}

@media (min-height: 740px) {
  .shell-proto__viewport .shell-proto__fill {
    max-height: min(26vh, 200px);
  }
}

.shell-proto__viewport .shell-proto__avatar-md {
  width: var(--shell-avatar-md);
  height: var(--shell-avatar-md);
  flex-shrink: 0;
}

.shell-proto__viewport .shell-proto__avatar-md > .px-frame-inner-sm {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.shell-proto__viewport .move-chip {
  width: var(--shell-move-chip);
  font-size: var(--shell-type-sm);
  padding: clamp(10px, 2.5vw, 12px) 4px clamp(8px, 2vw, 10px);
  gap: clamp(6px, 1.8vw, 8px);
}

.shell-proto__viewport .moves-grid-top,
.shell-proto__viewport .moves-grid-bottom {
  gap: clamp(0.5rem, 2.2vw, 0.85rem);
}

.shell-proto__viewport .anim-frame {
  filter: none;
}

.shell-proto__viewport .anim-frame-inner {
  width: var(--anim-window);
  height: var(--anim-window);
}

.shell-proto__viewport .anim-window {
  width: calc(var(--anim-window) - 8px);
  height: calc(var(--anim-window) - 8px);
}

.shell-proto__viewport .anim-window.anim-hunt,
.shell-proto__viewport .anim-window.anim-found {
  overflow: visible;
}

.shell-proto__body .lb-list {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.shell-proto__body .saved-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* ── Shell typography — uses tokens; pages should prefer these vars in local CSS ── */
.shell-proto__viewport .opponent-label,
.shell-proto__viewport .countdown-label,
.shell-proto__viewport .search-countdown-label,
.shell-proto__viewport .search-attempt {
  font-size: var(--shell-type-xs);
}

.shell-proto__viewport .lock-msg,
.shell-proto__viewport .stat-row-label,
.shell-proto__viewport .row-name,
.shell-proto__viewport .row-move-label,
.shell-proto__viewport .result-rule,
.shell-proto__viewport .section-head,
.shell-proto__viewport .section-label,
.shell-proto__viewport .px-label,
.shell-proto__viewport .help-text,
.shell-proto__viewport .error-msg,
.shell-proto__viewport .stat-win,
.shell-proto__viewport .stat-loss,
.shell-proto__viewport .stat-sep {
  font-size: var(--shell-type-sm);
}

.shell-proto__viewport .opponent-name,
.shell-proto__viewport .countdown-number,
.shell-proto__viewport .search-countdown-number,
.shell-proto__viewport .stat-row-value,
.shell-proto__viewport .username-display {
  font-size: var(--shell-type-md);
}

.shell-proto__viewport .row-avatar {
  width: var(--shell-avatar-md);
  height: var(--shell-avatar-md);
}

.shell-proto__viewport .rank-chip,
.shell-proto__viewport .rank-badge,
.shell-proto__viewport .lb-rank {
  font-size: var(--shell-type-rank);
}

.shell-proto__viewport .rank-hash,
.shell-proto__viewport .rank-badge .rank-hash,
.shell-proto__viewport .lb-rank .rank-hash {
  font-size: var(--shell-type-sm);
}

.shell-proto__viewport .rank-tie,
.shell-proto__viewport .lb-rank .rank-tie {
  font-size: var(--shell-type-sm);
}