/* トリックハウスバトル — Fixed single-viewport, no scroll (mobile-first) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background: #0e0a14;
  color: #f5f0e8;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic", sans-serif;
  font-size: clamp(13px, 2.8vh, 16px);
}

#app {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: min(100vw, 480px);
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 162, 39, 0.12), transparent 55%),
    linear-gradient(180deg, #1e1628 0%, #120e18 45%, #0c0812 100%);
  display: flex;
  flex-direction: column;
}

.screen {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  padding:
    max(4px, env(safe-area-inset-top, 0px))
    10px
    max(4px, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  overscroll-behavior: none;
}
.screen.active { display: flex; }

/* ---- Title ---- */
#screen-title {
  justify-content: flex-start;
  align-items: center;
  gap: clamp(2px, 0.8vh, 8px);
  text-align: center;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: max(12px, env(safe-area-inset-top, 0px), min(3.5vh, 28px));
  position: relative;
  /* Pack title+buttons as one block; leftover empty space stays below (phone + PC) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
#screen-title .btn-col {
  flex-shrink: 1;
  min-height: 0;
}
#screen-title .btn {
  min-height: clamp(38px, 5.8vh, 48px);
  padding: clamp(6px, 1.2vh, 12px) 14px;
  font-size: clamp(0.85rem, 2.2vh, 1rem);
}
.title-footer-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.title-footer-row .btn-compact {
  flex: 1;
  min-height: clamp(34px, 5vh, 42px);
  font-size: clamp(0.8rem, 2vh, 0.92rem);
  padding: 6px 8px;
}
.title-glow {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 70vw);
  height: min(100px, 14vh);
  background: radial-gradient(ellipse, rgba(255, 200, 80, 0.22), transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}
.title-logo {
  position: relative;
  font-size: clamp(1.25rem, min(5.5vh, 7.6vw), 2.35rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #ffe08a;
  text-shadow:
    0 3px 0 #8b5a1a,
    0 6px 0 rgba(60, 30, 10, 0.35),
    0 0 28px rgba(255, 200, 80, 0.45),
    0 0 60px rgba(255, 160, 40, 0.2);
  flex-shrink: 0;
  line-height: 1.15;
  background: linear-gradient(180deg, #fff6c8 0%, #ffe08a 40%, #e8b84a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* Fallback color when clip unsupported still shows via text-shadow stack */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .title-logo {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.title-sub {
  font-size: clamp(0.75rem, 2.2vh, 0.9rem);
  color: #c4b498;
  margin-bottom: clamp(4px, 1.5vh, 16px);
  line-height: 1.4;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.btn-col {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 10px);
  width: 100%;
  max-width: 300px;
  flex-shrink: 0;
}
.btn {
  appearance: none;
  border: none;
  border-radius: 14px;
  padding: clamp(8px, 1.6vh, 14px) 16px;
  font-size: clamp(0.9rem, 2.4vh, 1.05rem);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  min-height: clamp(40px, 6.5vh, 52px);
  transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.btn:active, .btn.pressed { transform: scale(0.97) translateY(1px); filter: brightness(0.92); }
a.btn.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn-com {
  background: linear-gradient(180deg, #7ee0a4 0%, #5ecf8a 35%, #2e9a58 100%);
  color: #0a1a10;
  box-shadow:
    0 4px 0 #1a6a38,
    0 6px 16px rgba(46, 154, 88, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary {
  background: linear-gradient(180deg, #ffd060 0%, #f0b429 40%, #c9841a 100%);
  color: #1a1008;
  box-shadow:
    0 4px 0 #8a5a10,
    0 6px 16px rgba(201, 132, 26, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-secondary {
  background: linear-gradient(180deg, #6a9ae0 0%, #4a7ec8 40%, #2f5a9a 100%);
  color: #fff;
  box-shadow:
    0 4px 0 #1e3a6a,
    0 6px 16px rgba(47, 90, 154, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-ghost {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  color: #ddd;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-danger {
  background: linear-gradient(180deg, #e05555, #a03030);
  color: #fff;
  box-shadow: 0 3px 0 #6a1818;
}

.title-points {
  position: relative;
  margin: 0 0 clamp(2px, 0.6vh, 6px);
  font-size: clamp(0.85rem, 2.2vh, 1.05rem);
  font-weight: 800;
  color: #ffe08a;
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px rgba(255, 200, 80, 0.35);
}
.title-com-memory,
.setup-com-memory {
  position: relative;
  margin: 0 0 clamp(4px, 0.8vh, 8px);
  font-size: clamp(0.68rem, 1.7vh, 0.8rem);
  font-weight: 700;
  color: #a8c4e8;
  letter-spacing: 0.04em;
  opacity: 0.92;
}
.setup-com-memory {
  margin: 4px 0 0;
  text-align: center;
}
.setup-com-memory.hidden { display: none; }
.result-points {
  margin: 0;
  font-size: clamp(0.95rem, 2.5vh, 1.15rem);
  font-weight: 800;
  color: #ffe08a;
  letter-spacing: 0.04em;
}
.result-points-gain {
  margin: 0;
  font-size: clamp(0.75rem, 2vh, 0.9rem);
  font-weight: 700;
  color: #b8e0a0;
}
.result-points-gain.hidden { display: none; }

.peer-note {
  margin-top: clamp(6px, 1.5vh, 14px);
  font-size: clamp(0.65rem, 1.8vh, 0.75rem);
  color: #887868;
  max-width: 300px;
  line-height: 1.35;
  flex-shrink: 0;
}

/* ---- Lobby ---- */
#screen-lobby {
  justify-content: flex-start;
  align-items: center;
  gap: clamp(8px, 1.5vh, 14px);
  text-align: center;
  padding-top: max(16px, env(safe-area-inset-top, 0px), min(4vh, 32px));
}
.lobby-label { color: #cbb896; font-size: clamp(0.8rem, 2.2vh, 0.95rem); }
.room-code {
  font-size: clamp(1.6rem, 5.5vh, 2.3rem);
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #ffe08a;
  padding: clamp(8px, 1.5vh, 12px) 8px clamp(8px, 1.5vh, 12px) 0.22em;
  background:
    linear-gradient(180deg, rgba(40, 30, 20, 0.7), rgba(0,0,0,0.45));
  border-radius: 14px;
  border: 2px dashed #c9a227;
  box-shadow:
    0 0 24px rgba(201, 162, 39, 0.2),
    inset 0 1px 0 rgba(255, 224, 138, 0.15);
  min-width: min(260px, 86vw);
  font-variant-numeric: tabular-nums;
}
.join-input {
  font-size: clamp(1.3rem, 4.5vh, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: none;
  padding: clamp(10px, 1.8vh, 14px);
  width: 100%;
  max-width: 280px;
  border-radius: 14px;
  border: 3px solid #c9a227;
  background: linear-gradient(180deg, #fffef8, #f5edd8);
  color: #1a1008;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.25),
    inset 0 1px 0 #fff;
}
.hidden { display: none !important; }
.status-msg {
  min-height: 1.2em;
  font-size: clamp(0.75rem, 2vh, 0.88rem);
  color: #b8a890;
  padding: 0 6px;
  flex-shrink: 0;
}
.status-msg.warn { color: #ff8a7a; }
.status-msg.ok { color: #8ddea0; }

/* ---- Setup ---- */
#screen-setup {
  gap: clamp(3px, 0.8vh, 6px);
  padding-top: max(4px, env(safe-area-inset-top, 0px));
}
.setup-header {
  text-align: center;
  flex: 0 0 auto;
}
.setup-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: 0 36px;
}
.setup-header h2 {
  font-size: clamp(0.95rem, 2.6vh, 1.1rem);
  color: #ffe08a;
  margin-bottom: 2px;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.setup-counts {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: clamp(0.75rem, 2vh, 0.88rem);
  color: #ccc;
}
.setup-counts strong { color: #fff; }

.floor-tabs, .tool-row {
  display: flex;
  gap: clamp(4px, 1vw, 8px);
  justify-content: center;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.tool-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  gap: 6px;
}
.floor-tab, .tool-btn {
  appearance: none;
  border: 2px solid rgba(255,255,255,0.2);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  color: #eee;
  border-radius: 10px;
  padding: clamp(6px, 1.2vh, 10px) clamp(6px, 2vw, 12px);
  font-size: clamp(0.72rem, 2vh, 0.9rem);
  font-weight: 700;
  font-family: inherit;
  min-height: clamp(40px, 6vh, 48px);
  min-width: 0;
  flex: 1 1 auto;
  max-width: 110px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.tool-btn {
  max-width: none;
  width: 100%;
}
.floor-tab.active, .tool-btn.active {
  background: linear-gradient(180deg, #e8c547, #c9a227);
  color: #1a1008;
  border-color: #ffe08a;
  box-shadow:
    0 2px 8px rgba(201, 162, 39, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

#setup-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, #1a1424 0%, #0d0a12 100%);
  border: 2px solid rgba(201,162,39,0.4);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.45),
    0 0 16px rgba(201, 162, 39, 0.12);
}
#setup-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.setup-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.setup-actions .btn { flex: 1; min-height: clamp(38px, 6vh, 48px); }

.legend {
  font-size: clamp(0.55rem, 1.5vh, 0.7rem);
  color: #887868;
  text-align: center;
  flex: 0 0 auto;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Match ---- */
#screen-match {
  padding: 0;
  position: relative;
  gap: 0;
}
.match-half {
  flex: 1 1 50%;
  min-height: 0;
  max-height: 50%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.match-half.top {
  border-bottom: 2px solid #c9a227;
  box-shadow: 0 2px 12px rgba(201, 162, 39, 0.15);
}
.match-half.bot { border-bottom: none; }
.match-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
  flex: 0 0 auto;
  z-index: 2;
  height: clamp(22px, 3.5vh, 28px);
}
.match-hud .label { font-size: clamp(0.65rem, 1.8vh, 0.75rem); color: #cbb896; flex: 1 1 auto; }
.hearts {
  letter-spacing: 1px;
  font-size: clamp(0.72rem, 1.9vh, 0.95rem);
  flex-wrap: wrap;
  max-width: 70%;
  justify-content: flex-end;
  display: inline-flex;
}
.heart.full { color: #ff4d6a; text-shadow: 0 0 6px rgba(255, 77, 106, 0.5); }
.heart.empty { color: #554444; }
.heart.half {
  position: relative;
  display: inline-block;
  color: #554444;
  width: 0.95em;
}
.heart.half .heart-half-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #ff4d6a;
  text-shadow: 0 0 6px rgba(255, 77, 106, 0.5);
  pointer-events: none;
}

.match-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.match-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.flash-fx {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  font-size: clamp(1.2rem, 4vh, 1.6rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px #000;
  background: rgba(180, 40, 40, 0.35);
  transition: opacity 0.15s;
  z-index: 5;
}
.flash-fx.show { opacity: 1; }

/* Controls sit BELOW the map — no overlay on the playfield */
.match-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding:
    6px 10px
    max(8px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(18, 14, 24, 0.95), rgba(10, 8, 16, 0.98));
  border-top: 1px solid rgba(201, 162, 39, 0.35);
  z-index: 10;
  min-height: clamp(96px, 16vh, 120px);
}
.match-half.bot .match-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
.dpad {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(112px, 30vw, 18vh);
  height: min(112px, 30vw, 18vh);
  flex: 0 0 auto;
  z-index: 10;
  touch-action: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
  pointer-events: auto;
  margin-left: auto;
}
.dpad-btn {
  position: absolute;
  width: 34%;
  height: 34%;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.4);
  background: linear-gradient(180deg, rgba(50, 65, 95, 0.88), rgba(25, 35, 55, 0.9));
  color: #fff;
  font-size: clamp(0.9rem, 3vh, 1.3rem);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.dpad-btn.pressed {
  background: linear-gradient(180deg, #e8c547, #c9a227);
  color: #1a1008;
  border-color: #ffe08a;
}
.dpad-btn.up { top: 0; left: 50%; transform: translateX(-50%); }
.dpad-btn.down { bottom: 0; left: 50%; transform: translateX(-50%); }
.dpad-btn.left { left: 0; top: 50%; transform: translateY(-50%); }
.dpad-btn.right { right: 0; top: 50%; transform: translateY(-50%); }

.match-hint {
  position: static;
  left: auto;
  bottom: auto;
  font-size: clamp(0.7rem, 2vh, 0.85rem);
  color: rgba(255,255,255,0.55);
  z-index: 1;
  max-width: 55%;
  line-height: 1.35;
  pointer-events: none;
  flex: 1 1 auto;
  text-align: left;
  margin: 0;
}

#result-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(40, 30, 20, 0.5), transparent 60%),
    rgba(10, 8, 16, 0.92);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vh, 12px);
  z-index: 50;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px));
  text-align: center;
  overflow: hidden;
}
#result-overlay.lose {
  justify-content: flex-start;
  padding-top: max(12px, env(safe-area-inset-top, 0px), 4vh);
}
#result-overlay.show { display: flex; }
#result-chest-reveal {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(92vw, 300px);
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: rgba(255, 224, 138, 0.1);
  border: 1px solid rgba(255, 224, 138, 0.35);
  margin-bottom: 4px;
}
#result-overlay.lose #result-chest-reveal.visible {
  display: flex !important;
}
.result-chest-label {
  font-size: clamp(0.75rem, 2vh, 0.9rem);
  font-weight: 800;
  color: #ffe08a;
  letter-spacing: 0.04em;
  margin: 0;
}
.result-chest-loc {
  font-size: clamp(0.85rem, 2.3vh, 1rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
}
#result-chest-canvas {
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 10 / 7;
  border-radius: 10px;
  background: #101820;
  display: block;
}
#result-title {
  font-size: clamp(1.8rem, 7vh, 2.4rem);
  font-weight: 900;
  text-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
#result-title.win {
  color: #ffe08a;
  text-shadow: 0 0 24px rgba(255, 200, 80, 0.5), 0 4px 16px rgba(0,0,0,0.5);
}
#result-title.lose { color: #ff8a7a; }
#result-sub {
  color: #b8a890;
  font-size: clamp(0.8rem, 2.2vh, 0.95rem);
  line-height: 1.45;
  max-width: 280px;
}



/* Wide/tall desktop: keep title packed in the centered phone column */
@media (min-width: 500px) and (min-height: 800px) {
  #screen-title {
    justify-content: flex-start;
    padding-top: 28px;
    gap: 6px;
  }
  .title-logo { font-size: clamp(1.25rem, min(3.2vh, 7.6vw), 2.2rem); }
  .title-sub { margin-bottom: 8px; }
  .title-glow { top: 6%; height: 90px; }
  #screen-lobby {
    justify-content: flex-start;
    padding-top: 36px;
  }
}

@media (min-width: 500px) {
  #app {
    box-shadow:
      0 0 60px rgba(0,0,0,0.7),
      0 0 1px rgba(201, 162, 39, 0.3);
    border-left: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
  }
}

@media (max-height: 560px) {
  .title-sub br { display: none; }
  .peer-note { display: none; }
  .legend { display: none; }
  .match-hint { font-size: 0.65rem; }
  .match-controls { min-height: 84px; padding-top: 4px; padding-bottom: 4px; }
  .dpad {
    width: min(96px, 28vw, 16vh);
    height: min(96px, 28vw, 16vh);
  }
  .tool-btn { font-size: clamp(0.6rem, 1.6vh, 0.75rem); padding-left: 2px; padding-right: 2px; }
}


.floor-tab.floor-1f { border-color: rgba(240,180,41,0.55); }
.floor-tab.floor-2f { border-color: rgba(106,168,232,0.55); }
.floor-tab.floor-3f { border-color: rgba(232,136,160,0.55); }
.floor-tab.floor-1f.active {
  background: linear-gradient(180deg, #f0c860, #d4a020);
  color: #1a1008;
  border-color: #ffe08a;
}
.floor-tab.floor-2f.active {
  background: linear-gradient(180deg, #8ec0f0, #4a88c8);
  color: #0a1520;
  border-color: #b8d8ff;
}
.floor-tab.floor-3f.active {
  background: linear-gradient(180deg, #f0a0b4, #c86880);
  color: #1a0810;
  border-color: #ffc0d0;
}


/* ---- End drama banner (before result) ---- */

#end-banner {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 55;
  padding: 20px 16px;
  text-align: center;
  background:
    radial-gradient(ellipse at center, rgba(40, 28, 12, 0.35), transparent 55%),
    rgba(6, 4, 12, 0.78);
  pointer-events: none;
}
#end-banner.show {
  display: flex;
  animation: endBannerIn 0.28s ease-out;
}
#end-banner.fade-out { animation: endBannerOut 0.35s ease-in forwards; }
#end-banner-chip {
  font-size: clamp(0.75rem, 2.2vh, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #ffe08a;
  border: 1px solid rgba(255,224,138,0.45);
}
#end-banner-icon {
  font-size: clamp(3.2rem, 14vh, 4.8rem);
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.7));
  animation: endIconPulse 0.7s ease-in-out infinite alternate;
}
#end-banner-event {
  font-size: clamp(1.55rem, 6.5vh, 2.2rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0,0,0,0.85);
  letter-spacing: 0.04em;
  line-height: 1.25;
  max-width: 92%;
}
#end-banner-text {
  font-size: clamp(1.15rem, 4.2vh, 1.55rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  border-radius: 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
#end-banner-detail {
  font-size: clamp(0.9rem, 2.6vh, 1.05rem);
  font-weight: 700;
  color: #f5e6c8;
  max-width: 92%;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.45);
  border: 2px solid rgba(255,255,255,0.2);
}
#end-banner.win #end-banner-text {
  color: #1a1008;
  background: linear-gradient(180deg, #ffe08a, #c9a227);
  box-shadow: 0 0 24px rgba(255, 200, 80, 0.45);
}
#end-banner.lose #end-banner-text {
  color: #fff;
  background: linear-gradient(180deg, #e07070, #a03030);
  box-shadow: 0 0 24px rgba(255, 80, 80, 0.4);
}
#end-banner.win #end-banner-chip {
  color: #1a1008;
  background: #ffe08a;
  border-color: #fff;
}
#end-banner.lose #end-banner-chip {
  color: #fff;
  background: #c04040;
  border-color: #ffaaaa;
}
#end-banner.win #end-banner-event { color: #ffe08a; }
#end-banner.lose #end-banner-event { color: #ffb0a0; }
@keyframes endBannerIn {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes endBannerOut {
  to { opacity: 0; transform: scale(1.04); }
}
@keyframes endIconPulse {
  from { transform: scale(1) rotate(-4deg); }
  to { transform: scale(1.12) rotate(4deg); }
}

.flash-fx {
  white-space: pre-line;
  font-size: clamp(1.4rem, 5vh, 2rem) !important;
  padding: 12px;
  background: rgba(0,0,0,0.55) !important;
}
.flash-fx.show {
  opacity: 1;
  animation: flashPop 0.35s ease-out;
}
@keyframes flashPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Slow-mo: subtle, don't cover the big banner text */
#screen-match.slow-mo-bot .match-half.bot .match-canvas-wrap,
#screen-match.slow-mo-top .match-half.top .match-canvas-wrap {
  box-shadow: inset 0 0 0 4px rgba(255, 224, 138, 0.9);
  filter: saturate(1.3) contrast(1.1);
}
#screen-match.slow-mo-bot .match-half.top,
#screen-match.slow-mo-top .match-half.bot {
  filter: grayscale(0.45) brightness(0.55);
}

#result-overlay.show {
  animation: resultIn 0.45s ease-out;
}
@keyframes resultIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#result-reason {
  font-size: clamp(0.95rem, 2.8vh, 1.15rem);
  font-weight: 800;
  color: #fff;
  max-width: 300px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}
#result-overlay.win #result-reason {
  border-color: rgba(255, 200, 80, 0.45);
  color: #ffe8a8;
}
#result-overlay.lose #result-reason {
  border-color: rgba(255, 120, 100, 0.45);
  color: #ffc0b4;
}



.build-stamp {
  font-size: 0.65rem;
  color: #665548;
  margin-top: 2px;
  letter-spacing: 0.04em;
}

/* Setup complete celebration */
#setup-done-banner {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: rgba(8, 6, 12, 0.82);
  text-align: center;
  pointer-events: none;
}
#setup-done-banner.show { display: flex; animation: setupDoneIn 0.35s ease-out; }
#setup-done-banner.fade-out { animation: setupDoneOut 0.3s ease-in forwards; }
.setup-done-chip {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1a1008;
  background: linear-gradient(180deg, #ffe08a, #c9a227);
  padding: 4px 12px;
  border-radius: 999px;
}
.setup-done-icon { font-size: clamp(2.2rem, 8vh, 3rem); line-height: 1; }
.setup-done-title {
  font-size: clamp(1.5rem, 5.5vh, 2rem);
  font-weight: 900;
  color: #ffe08a;
  text-shadow: 0 2px 0 #8b5a1a, 0 0 24px rgba(255, 200, 80, 0.45);
}
.setup-done-detail {
  font-size: clamp(0.85rem, 2.4vh, 1rem);
  color: #e8dcc8;
  white-space: pre-line;
  line-height: 1.45;
  max-width: 280px;
}
@keyframes setupDoneIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes setupDoneOut {
  to { opacity: 0; transform: scale(1.04); }
}
#screen-setup { position: relative; }




/* ---- Tutorial ---- */
#screen-tutorial {
  justify-content: flex-start;
  align-items: center;
  gap: clamp(6px, 1.2vh, 12px);
  text-align: center;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
.tutorial-heading-main {
  font-size: clamp(1.15rem, 3.5vh, 1.45rem);
  font-weight: 900;
  color: #ffe08a;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 #8b5a1a, 0 0 18px rgba(255, 200, 80, 0.35);
  flex-shrink: 0;
  margin-top: 4px;
}
.tutorial-step-ind {
  font-size: clamp(0.75rem, 2vh, 0.88rem);
  font-weight: 800;
  color: #c9a227;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.tutorial-card {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 340px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(40, 30, 20, 0.72), rgba(12, 8, 18, 0.85));
  border: 1.5px solid rgba(201, 162, 39, 0.45);
  border-radius: 14px;
  padding: clamp(12px, 2.2vh, 18px) 14px;
  box-shadow:
    0 0 24px rgba(201, 162, 39, 0.12),
    inset 0 1px 0 rgba(255, 224, 138, 0.1);
}
.tutorial-step-title {
  font-size: clamp(1rem, 2.8vh, 1.15rem);
  font-weight: 800;
  color: #ffe08a;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.tutorial-body {
  font-size: clamp(0.88rem, 2.4vh, 1rem);
  color: #e8dcc8;
  line-height: 1.55;
  white-space: pre-line;
  -webkit-user-select: text;
  user-select: text;
}
.tutorial-tip {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: #ffe08a;
  font-size: clamp(0.8rem, 2.1vh, 0.92rem);
  font-weight: 700;
  line-height: 1.4;
}
.tutorial-tip.hidden,
.tutorial-extra.hidden { display: none !important; }
.tutorial-nav {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 340px;
  flex-shrink: 0;
}
.tutorial-nav .btn {
  flex: 1;
  min-height: clamp(36px, 5.5vh, 46px);
  font-size: clamp(0.8rem, 2vh, 0.95rem);
  padding: 6px 8px;
}
.tutorial-extra {
  width: 100%;
  max-width: 340px;
  flex-shrink: 0;
}
.tutorial-extra .btn {
  width: 100%;
  min-height: clamp(38px, 5.8vh, 48px);
}
.allow-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* ---- Help button (setup / match) ---- */
.btn-help {
  appearance: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 39, 0.7);
  background: linear-gradient(180deg, rgba(232, 197, 71, 0.35), rgba(80, 55, 20, 0.55));
  color: #ffe08a;
  font-size: 0.85rem;
  font-weight: 900;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,224,138,0.25);
  padding: 0;
  z-index: 3;
}
.setup-header-row .btn-help {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}
.btn-help-match {
  width: 22px;
  height: 22px;
  font-size: 0.72rem;
  border-width: 1px;
}
.setup-header-row .btn-help:active {
  transform: translateY(-50%) scale(0.94);
}
.btn-help-match:active {
  transform: scale(0.94);
}

/* ---- In-game tip overlay ---- */
.ingame-tip {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(8, 6, 12, 0.45);
  pointer-events: auto;
}
.ingame-tip.hidden { display: none !important; }
.ingame-tip-card {
  width: 100%;
  max-width: 340px;
  background:
    linear-gradient(180deg, rgba(48, 36, 22, 0.96), rgba(18, 12, 22, 0.98));
  border: 1.5px solid rgba(201, 162, 39, 0.55);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(201, 162, 39, 0.15),
    inset 0 1px 0 rgba(255, 224, 138, 0.12);
  animation: ingame-tip-in 0.22s ease-out;
}
@keyframes ingame-tip-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.ingame-tip-text {
  color: #f5ead4;
  font-size: clamp(0.88rem, 2.4vh, 1rem);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 12px;
  text-align: left;
}
.ingame-tip-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.ingame-tip-actions .btn {
  min-height: 40px;
  flex: 1 1 auto;
  max-width: 140px;
}
.ingame-tip-actions .btn-ghost {
  max-width: 100px;
  flex: 0 1 auto;
}

/* Persistent version + visit count — outside #app */
#game-meta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100vw, 480px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f0e6d4;
  background: rgba(0, 0, 0, 0.88);
  border-top: 1px solid rgba(255, 200, 80, 0.35);
  pointer-events: none;
  text-align: center;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45);
}
#game-meta .meta-sep { opacity: 0.55; color: #c9a227; }
#meta-version { color: #ffe08a; }
#app-version { display: none; } /* duplicate of meta-version */
#meta-visits { color: #fff; font-variant-numeric: tabular-nums; }
#meta-battles { color: #ffd68a; font-variant-numeric: tabular-nums; white-space: nowrap; }
#game-meta [hidden] { display: none !important; }
#app { padding-bottom: 34px; }
.build-stamp { display: none; }


.meta-visits { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.meta-visits-label { color: #fff; }
#meta-visits-badge {
  height: 18px;
  width: auto;
  vertical-align: middle;
  border-radius: 3px;
}


/* ---- House shop ---- */
#screen-shop {
  justify-content: flex-start;
  align-items: center;
  gap: clamp(6px, 1.2vh, 12px);
  text-align: center;
  padding: 12px 14px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.shop-heading {
  margin: 4px 0 0;
  font-size: clamp(1.2rem, 3.5vh, 1.6rem);
  color: #ffe08a;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.shop-lead {
  margin: 0;
  font-size: clamp(0.7rem, 1.9vh, 0.82rem);
  color: #a89880;
  max-width: 320px;
  line-height: 1.4;
  flex-shrink: 0;
}
.shop-points {
  margin: 2px 0 4px !important;
  flex-shrink: 0;
}
.shop-list {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  touch-action: pan-y;
}
.shop-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 10px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(40, 32, 48, 0.85), rgba(20, 16, 28, 0.9));
  border: 1px solid rgba(201, 162, 39, 0.28);
  box-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
.shop-item.equipped {
  border-color: rgba(255, 208, 80, 0.75);
  box-shadow:
    0 0 0 1px rgba(255, 200, 80, 0.25),
    0 2px 0 rgba(0,0,0,0.35),
    0 0 16px rgba(255, 180, 40, 0.18);
}
.shop-swatch {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 2px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.shop-swatch-chip {
  display: block;
  width: 100%;
  height: 100%;
}
.shop-swatch-chip:nth-child(3) {
  grid-column: 1 / -1;
}
.shop-item-info {
  min-width: 0;
}
.shop-item-name {
  font-weight: 800;
  font-size: clamp(0.88rem, 2.2vh, 1rem);
  color: #f5ecd8;
  letter-spacing: 0.02em;
}
.shop-item-desc {
  font-size: clamp(0.65rem, 1.7vh, 0.75rem);
  color: #9a8a78;
  margin-top: 2px;
  line-height: 1.3;
}
.shop-item-price {
  margin-top: 4px;
  font-size: clamp(0.72rem, 1.9vh, 0.85rem);
  font-weight: 700;
  color: #ffe08a;
}
.shop-item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-item-actions .btn {
  min-width: 72px;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 0.82rem;
}
#shop-status {
  min-height: 1.2em;
  flex-shrink: 0;
  max-width: 320px;
}


/* =========================================================
   Title screen — cinematic look (scene / logo / buttons)
   ========================================================= */
#screen-title {
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 45% at 50% 18%, rgba(255, 170, 60, 0.16), transparent 65%),
    linear-gradient(180deg, #1b1030 0%, #140c22 40%, #0b0712 100%);
}
#screen-title > *:not(.title-scene):not(.title-glow) { position: relative; z-index: 2; }

.title-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.title-moon {
  position: absolute;
  top: 1.5%;
  right: -14px;
  width: clamp(40px, 8vh, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe6 0%, #f7e4a8 45%, #d9b766 100%);
  box-shadow: 0 0 24px 6px rgba(255, 228, 150, 0.28), 0 0 80px 20px rgba(255, 210, 120, 0.12);
  opacity: 0.8;
}
.title-moon::after { /* crescent bite */
  content: "";
  position: absolute;
  inset: -6% -6% 6% 22%;
  border-radius: 50%;
  background: #1a1030;
  opacity: 0.85;
  filter: blur(1px);
}
.title-mansion {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 118%;
  max-width: 560px;
  height: auto;
  max-height: 30%;
  opacity: 0.8;
  filter: drop-shadow(0 -6px 24px rgba(120, 60, 200, 0.25));
}
.tm-win rect { fill: #ffc85a; opacity: 0.32; }
.tm-win rect.door { fill: #ff9a3c; opacity: 0.28; }
.tm-win .flk { animation: tmFlicker 5.5s infinite steps(1); }
.tm-win .flk2 { animation: tmFlicker 7.3s 1.7s infinite steps(1); }
@keyframes tmFlicker {
  0%, 100% { opacity: 0.32; }
  46% { opacity: 0.06; } 48% { opacity: 0.32; } 50% { opacity: 0.08; } 53% { opacity: 0.32; }
}
.title-sparks i {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffd36a;
  box-shadow: 0 0 6px 2px rgba(255, 180, 60, 0.7);
  opacity: 0;
  animation: sparkRise var(--t) var(--d) infinite linear;
}
@keyframes sparkRise {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(14px, -45vh); }
  85%  { opacity: 0.5; }
  100% { transform: translate(-10px, -92vh); opacity: 0; }
}
.title-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.65) 100%);
}

/* Rotating light rays behind the logo */
#screen-title .title-glow {
  top: calc(max(12px, env(safe-area-inset-top, 0px), min(3.5vh, 28px)) - 70px);
  width: 380px;
  height: 260px;
  z-index: 1;
  filter: none;
  background: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 15%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 15%, transparent 70%);
  overflow: hidden;
}
#screen-title .title-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  background:
    radial-gradient(circle, rgba(255, 210, 110, 0.35) 0%, transparent 38%),
    repeating-conic-gradient(from 0deg, rgba(255, 200, 90, 0.2) 0deg 7deg, transparent 7deg 20deg);
  animation: raysSpin 40s linear infinite;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* ---- Logo ---- */
#screen-title .title-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  background: none;
  text-shadow: none;
  margin-bottom: clamp(2px, 0.8vh, 8px);
  animation: logoIn 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes logoIn {
  from { transform: scale(0.6) translateY(-10px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.logo-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5vw, 10px);
  margin-bottom: -0.05em;
}
.logo-icon {
  width: clamp(24px, min(5vh, 8vw), 38px);
  height: auto;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6));
  flex-shrink: 0;
}
.logo-bomb { transform: rotate(-12deg); animation: bombWobble 2.4s ease-in-out infinite; }
.logo-chest { transform: rotate(10deg); animation: chestBob 3s ease-in-out infinite; }
.logo-bomb .fuse { animation: fuseFlash 0.35s steps(2) infinite; transform-origin: 36px 5px; }
@keyframes bombWobble { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(-4deg) translateY(-2px); } }
@keyframes chestBob { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
@keyframes fuseFlash { 0% { fill: #fff3a0; transform: scale(1.2); } 100% { fill: #ff6a1a; transform: scale(0.8); } }

.logo-top, .logo-main {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-weight: 900;
  line-height: 1.1;
  -webkit-text-stroke: 0.16em #2a0c05;
  color: #2a0c05;
  -webkit-text-fill-color: #2a0c05;
  paint-order: stroke fill;
}
.logo-top {
  font-size: clamp(22px, min(4.6vh, 8.6vw), 38px);
  letter-spacing: 0.12em;
  padding-left: 0.12em;
  font-style: italic;
  transform: skewX(-8deg);
  text-shadow: 0 0.12em 0 #000, 0 0.2em 0.3em rgba(0, 0, 0, 0.6);
}
.logo-main {
  font-size: clamp(36px, min(7.4vh, 13vw), 62px);
  letter-spacing: 0.02em;
  text-shadow:
    0 0.06em 0 #5a2a08,
    0 0.12em 0 #3a1804,
    0 0.16em 0.25em rgba(0, 0, 0, 0.7),
    0 0 0.6em rgba(255, 170, 40, 0.45);
}
/* Gradient face layer (sits on top of the stroked/shadowed base text) */
.logo-top::after, .logo-main::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  padding: inherit;
  -webkit-text-stroke: 0;
  text-shadow: none;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
}
.logo-top::after {
  background-image: linear-gradient(180deg, #fff1f0 0%, #ff9a8a 30%, #e8322a 58%, #9a0e12 100%);
}
.logo-main::after {
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.95) 48%, transparent 58%),
    linear-gradient(180deg, #fffbe0 0%, #ffe68a 28%, #f5b830 50%, #c77a12 51%, #ffd35a 78%, #fff2b0 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  animation: logoShine 4.5s 1s ease-in-out infinite;
}
@keyframes logoShine {
  0%   { background-position: 180% 0, 0 0; }
  35%, 100% { background-position: -80% 0, 0 0; }
}

/* ---- Subtitle / stats ---- */
#screen-title .title-sub {
  padding: 5px 14px;
  border-radius: 10px;
  color: #eadcc0;
  background: linear-gradient(90deg, transparent, rgba(10, 5, 20, 0.6) 15%, rgba(10, 5, 20, 0.6) 85%, transparent);
  border-top: 1px solid rgba(255, 200, 90, 0.25);
  border-bottom: 1px solid rgba(255, 200, 90, 0.25);
  text-shadow: 0 1px 2px #000;
  margin-bottom: clamp(2px, 1vh, 10px);
}
#screen-title .title-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 14px 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(60, 40, 10, 0.85), rgba(25, 15, 5, 0.85));
  border: 1px solid rgba(255, 200, 80, 0.55);
  box-shadow: 0 0 14px rgba(255, 180, 60, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#screen-title .title-points::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f0b429 55%, #a56a0e);
  box-shadow: 0 0 0 1.5px #6a4108 inset;
}
#screen-title .title-com-memory { margin-bottom: clamp(2px, 0.8vh, 8px); text-shadow: 0 1px 2px #000; }
#screen-title .peer-note { color: #9a8a78; text-shadow: 0 1px 2px #000; }

/* ---- Buttons (title only) ---- */
#screen-title .btn { border-radius: 12px; letter-spacing: 0.06em; overflow: hidden; }
#screen-title .btn-com {
  color: #2a1504;
  font-size: clamp(0.95rem, 2.5vh, 1.12rem);
  font-weight: 900;
  background: linear-gradient(180deg, #fff3b8 0%, #ffd54f 30%, #f0a01e 70%, #c86e0c 100%);
  border: 2px solid #fff0b0;
  box-shadow:
    0 4px 0 #7a3e06,
    0 0 0 2px #3a1a02,
    0 0 22px rgba(255, 180, 50, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
  animation: comPulse 2.2s ease-in-out infinite;
}
#screen-title .btn-com::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  animation: btnSweep 3.2s 0.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes comPulse {
  0%, 100% { box-shadow: 0 4px 0 #7a3e06, 0 0 0 2px #3a1a02, 0 0 16px rgba(255, 180, 50, 0.4), inset 0 2px 0 rgba(255,255,255,0.6); }
  50%      { box-shadow: 0 4px 0 #7a3e06, 0 0 0 2px #3a1a02, 0 0 30px rgba(255, 190, 60, 0.75), inset 0 2px 0 rgba(255,255,255,0.6); }
}
@keyframes btnSweep { 0% { left: -60%; } 45%, 100% { left: 130%; } }
#screen-title .btn-secondary {
  color: #fff4dc;
  background: linear-gradient(180deg, #4a3470 0%, #2e1f4c 55%, #1e1436 100%);
  border: 1.5px solid rgba(255, 205, 110, 0.55);
  box-shadow:
    0 3px 0 #120a22,
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
#screen-title .btn-ghost {
  color: #e8dcc8;
  background: linear-gradient(180deg, rgba(30, 20, 45, 0.82), rgba(15, 10, 25, 0.82));
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 500px) and (min-height: 800px) {
  #screen-title .title-logo { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-title *, #screen-title *::before, #screen-title *::after {
    animation: none !important;
    transition: none !important;
  }
  .title-sparks { display: none; }
}


/* Data-loss notice on title (opens 引き継ぎ panel) */
.save-notice {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: -2px auto 0;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 138, 0, 0.75);
  background: rgba(40, 18, 4, 0.72);
  color: #ffe6c0;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: manipulation;
}
.title-footer-row .btn-compact {
  min-width: 0;
  white-space: nowrap;
  padding: 6px 4px;
  font-size: clamp(0.72rem, 1.8vh, 0.88rem);
  letter-spacing: 0;
}

/* Conspicuous 引き継ぎ button (title) */
#screen-title .btn-transfer,
.btn-transfer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 4px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ff7ab8 0%, #ff4f7a 45%, #e0351f 100%);
  border: 2px solid #ffe07a;
  box-shadow:
    0 4px 0 #8a1830,
    0 0 18px rgba(255, 90, 120, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  animation: btn-transfer-glow 2.4s ease-in-out infinite;
}
.btn-transfer small { font-size: 0.78em; font-weight: 800; }
@keyframes btn-transfer-glow {
  0%, 100% { box-shadow: 0 4px 0 #8a1830, 0 0 12px rgba(255, 90, 120, 0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
  50% { box-shadow: 0 4px 0 #8a1830, 0 0 24px rgba(255, 120, 150, 0.85), inset 0 1px 0 rgba(255,255,255,0.4); }
}
@media (prefers-reduced-motion: reduce) { .btn-transfer { animation: none; } }
@media (max-height: 660px) {
  #screen-title .btn { min-height: 36px; }
  #screen-title .save-notice { line-height: 1.3; }
}

/* 引き継ぎ notice link */
#screen-title .easy-link { color: #ffe07a; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; font-weight: 900; }

/* ---------- Online group on title: 対戦相手を探す (primary) + 部屋を作る/入る ---------- */
.online-group { display: flex; flex-direction: column; gap: clamp(4px, 0.8vh, 6px); width: 100%; }
.online-sub { display: flex; gap: 8px; width: 100%; }
#screen-title .online-sub .btn-compact {
  flex: 1;
  min-width: 0;
  min-height: clamp(32px, 4.6vh, 40px);
  padding: 4px 6px;
  font-size: clamp(0.78rem, 1.9vh, 0.9rem);
  white-space: nowrap;
}
#screen-title .btn-find { font-weight: 900; letter-spacing: 0.04em; }

/* Room code actions */
.code-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.code-actions .btn-compact { min-width: 96px; min-height: 38px; padding: 6px 14px; font-size: 0.9rem; }

/* 対戦相手を探す — searching screen */
#lobby-search-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
#lobby-search-wrap.hidden { display: none; }
.search-radar { position: relative; width: 132px; height: 132px; margin: 6px auto 4px; }
.search-radar span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(94, 207, 138, 0.8);
  opacity: 0; transform: scale(0.3);
}
.searching .search-radar span { animation: search-ping 2.1s ease-out infinite; }
.searching .search-radar span:nth-child(2) { animation-delay: 0.7s; }
.searching .search-radar span:nth-child(3) { animation-delay: 1.4s; }
.search-radar b {
  position: absolute; inset: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 2.2rem;
  background: radial-gradient(circle, rgba(94, 207, 138, 0.35), rgba(20, 40, 30, 0.8));
  box-shadow: 0 0 22px rgba(94, 207, 138, 0.45);
}
.searching .search-radar b { animation: search-bob 1.4s ease-in-out infinite; }
.no-match .search-radar b { filter: grayscale(0.8); opacity: 0.6; }
@keyframes search-ping { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes search-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.search-msg { margin: 0; font-size: clamp(1.05rem, 3vh, 1.25rem); font-weight: 900; color: #ffe08a; text-align: center; }
.search-left { margin: 0; font-size: 0.85rem; color: #cbb896; text-align: center; min-height: 1.2em; }
.search-btns { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .searching .search-radar span, .searching .search-radar b { animation: none; opacity: 0.6; transform: none; } }

/* PvP: no points notice (lobby) */
.pvp-note { margin: -4px 0 8px; font-size: 0.78rem; color: #ffcf7a; opacity: 0.9; text-align: center; }

/* Short screens: loss result (chest map + PvP/points line) must keep every button visible */
#result-overlay { overflow-y: auto; }
@media (max-height: 720px) {
  #result-chest-canvas { max-width: min(260px, calc(20vh * 10 / 7)); margin: 0 auto; }
  #result-overlay.lose { padding-top: max(8px, env(safe-area-inset-top, 0px), 1.5vh); gap: 5px; }
  #result-overlay.lose #result-chest-reveal { padding: 6px 10px 8px; gap: 4px; }
}

/* Data-loss notice (title): heading + 3 short bullets + 2 sentences */
.dl-note .dl-h, .dl-note .dl-li, .dl-note .dl-p { display: block; }
.dl-note .dl-h { font-weight: 900; }
.dl-note .dl-li { text-align: left; padding-left: 1em; text-indent: -1em; }
.dl-note .dl-p { margin-top: 1px; }
.dl-note .dl-lis { display: inline-block; text-align: left; }
/* Title fit: bullets flow inline (2 lines instead of 3); status line hidden on shorter screens */
#screen-title .dl-note .dl-li { display: inline; padding: 0; text-indent: 0; margin-right: 0.5em; }
#screen-title .dl-note .dl-li:nth-of-type(3) { margin-right: 0; }
#screen-title .dl-note .dl-p { display: block; }
@media (max-height: 760px) { #screen-title .peer-note { display: none; } }
#screen-title .dl-note .dl-h { display: inline; margin-right: 0.3em; }
@media (max-height: 860px) { #screen-title .peer-note { display: none; } }
@media (max-height: 720px) {
  #screen-title .btn { min-height: 34px; }
  #screen-title .btn-col { gap: 6px; }
  #screen-title .online-group { gap: 4px; }
}
/* bullets wrap as whole items (never split mid-phrase) */
#screen-title .dl-note .dl-h { display: block; margin: 0; }
#screen-title .dl-note .dl-li { display: inline-block; white-space: nowrap; margin: 0 0.35em; }
@media (max-height: 700px) { #screen-title .title-com-memory { display: none; } }

.dl-note .dl-home { display: block; font-size: 0.92em; color: #bfe6ff; font-weight: 800; letter-spacing: 0; white-space: nowrap; }
/* ホーム画面に追加 line: always one line inside the notice (shrinks with notice width) */
.dl-note { container-type: inline-size; }
.dl-note .dl-home { font-size: 0.8em; }
@supports (width: 1cqi) { .dl-note .dl-home { font-size: min(0.92em, 3.25cqi); } }
@media (min-height: 721px) and (max-height: 820px) { #screen-title .btn-col { gap: 6px; } }

/* ---- 勝率 / 敵Lv panel (title top) ---- */
#screen-title .title-lv {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto clamp(3px, 0.8vh, 8px);
  padding: 4px 10px 4px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.88), rgba(10, 12, 30, 0.88));
  border: 1px solid rgba(140, 190, 255, 0.6);
  box-shadow: 0 0 12px rgba(100, 160, 255, 0.22);
  box-sizing: border-box;
  text-align: center;
  line-height: 1.3;
}
#screen-title .title-lv p { margin: 0; }
#screen-title .tl-row { display: flex; align-items: baseline; justify-content: center; gap: 0.6em; flex-wrap: nowrap; white-space: nowrap; font-size: 0.92rem; font-weight: 800; color: #eaf3ff; }
#screen-title .tl-tier { font-weight: 900; color: #9fd0ff; }
#screen-title .tl-rate small { font-size: 0.82em; font-weight: 700; color: #c8d8f0; }
#screen-title .tl-lv { padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, #ff7a4a, #c8321e); color: #fff; font-weight: 900; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
#screen-title .tl-note { font-size: 0.66rem; font-weight: 700; color: #ffd98a; white-space: nowrap; }
.btn-com-lv { display: inline-block; margin-left: 0.4em; padding: 0 0.55em; border-radius: 999px; background: rgba(120, 30, 0, 0.35); font-size: 0.78em; font-weight: 900; vertical-align: 0.08em; }
.result-enemy-lv { margin: 2px 0 8px; font-size: 0.95rem; font-weight: 800; color: #cfe6ff; text-align: center; line-height: 1.35; }
.result-enemy-lv b { color: #ff9a6a; font-size: 1.15em; }
.result-enemy-lv small { font-size: 0.82em; color: #b8c8e0; font-weight: 700; }
.result-enemy-lv.hidden { display: none; }
/* Keep the title fitting: the subtitle gives way to the 勝率/敵Lv panel on shorter screens */
@media (max-height: 820px) { #screen-title .title-sub { display: none; } }
@media (min-height: 760px) and (min-width: 400px) {
  #screen-title .tl-row { font-size: 1rem; }
  #screen-title .tl-note { font-size: 0.72rem; }
}
/* Short screens: 敵Lv result on one line so every result button stays visible */
@media (max-height: 720px) {
  .result-enemy-lv { margin: 0 0 4px; font-size: 0.82rem; line-height: 1.25; white-space: nowrap; }
  .result-enemy-lv .rl-br { display: none; }
  .result-enemy-lv small { margin-left: 0.5em; }
  #result-overlay.lose #result-chest-canvas { max-width: min(240px, calc(17vh * 10 / 7)); }
  #result-overlay.lose { gap: 4px; }
  #result-overlay.lose .rl-c { display: none; }
  #result-overlay.win .result-enemy-lv { white-space: normal; }
  #result-overlay.win .result-enemy-lv .rl-br { display: inline; }
}

/* ===== Short phone viewports (Safari/Chrome with toolbars, ~550–700px): fit the whole title ===== */
@media (max-height: 700px) {
  /* チュートリアル + 家ショップ share one row */
  #screen-title .btn-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 6px; }
  #screen-title .btn-col > * { grid-column: 1 / -1; }
  #screen-title .btn-col > #btn-tutorial { grid-column: 1; }
  #screen-title .btn-col > #btn-shop { grid-column: 2; }
  #screen-title .btn-col > #btn-tutorial,
  #screen-title .btn-col > #btn-shop { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
}
@media (max-height: 620px) {
  #screen-title { gap: 3px; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
  #screen-title .title-logo { margin-bottom: 0; }
  #screen-title .logo-top { font-size: clamp(18px, min(4vh, 7.4vw), 30px); }
  #screen-title .logo-main { font-size: clamp(30px, min(6.4vh, 11.5vw), 48px); }
  #screen-title .logo-icon { width: clamp(20px, min(4.2vh, 7vw), 30px); }
  #screen-title .title-lv { padding: 2px 8px 3px; margin-bottom: 1px; }
  #screen-title .tl-row { font-size: 0.86rem; }
  #screen-title .tl-note { font-size: 0.62rem; }
  #screen-title .title-points { padding-top: 1px; padding-bottom: 1px; font-size: 0.85rem; }
  #screen-title .btn { min-height: 37px; padding-top: 4px; padding-bottom: 4px; }
  #screen-title .btn-col { row-gap: 5px; }
  #screen-title .online-group { gap: 4px; }
  #screen-title .save-notice { padding: 3px 6px; line-height: 1.25; font-size: 0.64rem; }
  #screen-title .title-footer-row .btn-compact { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
}
@media (max-height: 560px) {
  #screen-title .logo-main { font-size: clamp(28px, min(6vh, 11vw), 40px); }
  #screen-title .btn { min-height: 35px; }
}
/* Very short phones: loss result (chest map + 敵Lv) keeps all 3 buttons on screen */
@media (max-height: 600px) {
  #result-overlay.lose { padding-top: max(6px, env(safe-area-inset-top, 0px)); gap: 3px; }
  #result-overlay.lose #result-chest-reveal { padding: 4px 10px 6px; gap: 2px; margin-bottom: 0; }
  #result-overlay.lose #result-chest-canvas { max-width: min(200px, calc(15vh * 10 / 7)); }
  #result-overlay.lose #result-title { font-size: 1.6rem; }
  #result-overlay .btn-col { gap: 6px; }
  #result-overlay .btn { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
}

/* ===== Pitfall fall FX ===== */
.match-canvas-wrap.fall-shake canvas { animation: fallShake 0.9s ease-in forwards; }
.match-canvas-wrap.fall-land canvas { animation: fallLand 0.45s cubic-bezier(.2,1.4,.4,1); }
@keyframes fallShake {
  0%{transform:translate(0,0)} 10%{transform:translate(-5px,2px)} 20%{transform:translate(5px,-2px)}
  30%{transform:translate(-4px,3px)} 45%{transform:translate(3px,0)}
  100%{transform:translate(0,14%);filter:brightness(.35)}
}
@keyframes fallLand { 0%{transform:translateY(-22%);filter:brightness(.5)} 70%{transform:translateY(2%)} 100%{transform:none} }
.fall-fx { position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.fall-hole { position:relative; width:min(34%,140px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,#000 35%,#2a0a44 65%,rgba(60,20,90,0) 72%);
  animation:holeOpen .9s ease-out forwards; }
.fall-swirl { position:absolute; inset:8%; border-radius:50%;
  background:conic-gradient(from 0deg,rgba(170,102,255,.9),transparent 30%,rgba(170,102,255,.7) 50%,transparent 80%);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 32%); mask:radial-gradient(circle,transparent 30%,#000 32%);
  animation:swirl .5s linear infinite; }
.fall-char { position:absolute; left:50%; top:50%; font-size:min(14vw,3rem); line-height:1;
  animation:charSink .85s ease-in forwards; }
.fall-fx.small .fall-char { font-size:min(9vw,2rem); }
.fall-banner { margin-top:6px; padding:4px 14px; border-radius:999px; background:rgba(40,10,70,.92);
  border:2px solid #aa66ff; color:#fff; font-weight:900; white-space:nowrap; max-width:94%;
  font-size:clamp(1.05rem,4.5vh,1.7rem); text-shadow:0 2px 6px #000; animation:bannerPop .3s cubic-bezier(.2,1.6,.4,1); }
.fall-fx.small .fall-banner { font-size:clamp(.9rem,3.2vh,1.3rem); }
.fall-fx.landed .fall-hole { animation:holeClose .25s forwards; }
.fall-dust { position:absolute; left:50%; top:50%; width:0; height:0; }
.fall-dust i { position:absolute; width:22px; height:22px; margin:-11px; border-radius:50%;
  background:rgba(230,215,190,.85); animation:dust .6s ease-out forwards; }
.fall-dust i:nth-child(1){--dx:-48px} .fall-dust i:nth-child(2){--dx:48px}
.fall-dust i:nth-child(3){--dx:-24px;animation-delay:.05s} .fall-dust i:nth-child(4){--dx:24px;animation-delay:.05s}
.fall-dust::before { content:''; position:absolute; width:64px; height:64px; margin:-32px; border-radius:10px;
  border:4px solid #ffe14d; box-shadow:0 0 16px #ffe14d; animation:tileHi .7s ease-out forwards; }
.fall-floor { position:absolute; top:6px; right:8px; padding:2px 12px; border-radius:8px; background:#ffe14d;
  color:#222; font-weight:900; font-size:clamp(1rem,4vh,1.5rem); animation:floorFlash .7s ease-out; }
@keyframes holeOpen { from{transform:scale(.1)} to{transform:scale(1)} }
@keyframes holeClose { to{transform:scale(0);opacity:0} }
@keyframes swirl { to{transform:rotate(360deg)} }
@keyframes charSink { 0%{transform:translate(-50%,-80%) scale(1)} 30%{transform:translate(-50%,-60%) scale(1) rotate(-15deg)}
  100%{transform:translate(-50%,-50%) scale(.1) rotate(540deg);opacity:0} }
@keyframes bannerPop { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes dust { from{transform:translate(0,0) scale(.4);opacity:1} to{transform:translate(var(--dx),-14px) scale(1.6);opacity:0} }
@keyframes tileHi { 0%{transform:scale(1.4);opacity:0} 25%{opacity:1;transform:scale(1)} 100%{opacity:0} }
@keyframes floorFlash { 0%,40%{transform:scale(1.5);box-shadow:0 0 18px #ffe14d} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) {
  .match-canvas-wrap.fall-shake canvas, .match-canvas-wrap.fall-land canvas { animation:fadeDim .4s; }
  .fall-fx *, .fall-fx *::before { animation-name:fadeIn !important; animation-duration:.25s !important; animation-iteration-count:1 !important; }
  .fall-char { transform:translate(-50%,-50%); }
  .fall-dust i { display:none; }
}
@keyframes fadeDim { 50%{filter:brightness(.5)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
/* ===== Floor badge ===== */
.floor-badge { position:absolute; left:4px; top:4px; z-index:4; pointer-events:none; display:flex; align-items:center; gap:3px;
  padding:2px 5px; border-radius:8px; background:rgba(0,0,0,.72); border:2px solid #ffe14d; }
.floor-badge[hidden] { display:none; }
.floor-badge b { color:#ffe14d; font-weight:900; font-size:clamp(1rem,3.6vh,1.5rem); line-height:1; text-shadow:0 1px 3px #000; }
.floor-badge .fg { display:flex; flex-direction:column; gap:1px; }
.floor-badge .fg i { font-style:normal; font-size:8px; line-height:9px; padding:0 3px; border-radius:3px; color:#888; background:#333; font-weight:700; }
.floor-badge .fg i.on { color:#222; background:#ffe14d; }
.floor-badge.small b { font-size:clamp(.85rem,2.8vh,1.2rem); }
.floor-badge.bump { animation:floorFlash .6s ease-out; }
@media (prefers-reduced-motion: reduce) { .floor-badge.bump { animation:fadeIn .25s; } }
.fall-banner { white-space:normal; text-align:center; font-size:clamp(.95rem,5vw,1.6rem); }
.fall-fx.small .fall-banner { font-size:clamp(.85rem,4.2vw,1.25rem); }
.floor-badge b { font-size:clamp(.95rem,5vw,1.4rem); }
.floor-badge.small b { font-size:clamp(.85rem,4vw,1.15rem); }
/* v2: straight-down drop, no rotation */
.fall-hole { overflow:hidden; background:radial-gradient(ellipse at 50% 40%,#000 55%,#1a0a2a 70%,rgba(30,10,50,0) 74%); }
.fall-swirl { display:none; }
.fall-char { animation:charDrop .85s cubic-bezier(.55,0,1,.45) forwards; }
@keyframes charDrop { 0%{transform:translate(-50%,-95%)} 20%{transform:translate(-50%,-85%)} 100%{transform:translate(-50%,160%)} }
.fall-lines { position:absolute; inset:0; }
.fall-lines i { position:absolute; top:0; width:3px; height:45%; border-radius:2px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.85)); animation:streak .3s linear infinite; }
.fall-lines i:nth-child(1){left:28%} .fall-lines i:nth-child(2){left:50%;animation-delay:.1s} .fall-lines i:nth-child(3){left:72%;animation-delay:.2s}
@keyframes streak { from{transform:translateY(120%);opacity:0} 30%{opacity:1} to{transform:translateY(-120%);opacity:0} }
@keyframes fallShake {
  0%{transform:translate(0,0)} 10%{transform:translate(-4px,0)} 20%{transform:translate(4px,0)} 30%{transform:translate(0,0)}
  100%{transform:translate(0,14%);filter:brightness(.35)}
}
@media (prefers-reduced-motion: reduce) { .fall-lines { display:none; } .fall-char { transform:translate(-50%,-50%); } }
/* v3: simple straight drop only */
.fall-fx .fall-lines, .fall-fx .fall-dust, .fall-fx .fall-floor, .fall-fx .fall-swirl { display:none; }
.match-canvas-wrap.fall-shake canvas, .match-canvas-wrap.fall-land canvas { animation:none; }
.fall-hole { width:min(26%,110px); aspect-ratio:1; overflow:hidden; border-radius:50%;
  background:radial-gradient(circle,#000 60%,rgba(0,0,0,.6) 68%,rgba(0,0,0,0) 72%); animation:holeOpen .2s ease-out; }
.fall-char { width:44%; height:44%; border-radius:50%; border:3px solid #fff; box-sizing:border-box; font-size:0;
  animation:charDrop .7s cubic-bezier(.55,0,1,.45) .15s both; }
@keyframes charDrop { 0%{transform:translate(-50%,-50%)} 100%{transform:translate(-50%,180%)} }
.fall-fx.nodrop .fall-char { animation:none; transform:translate(-50%,-50%); }
.fall-banner { background:rgba(0,0,0,.8); border:none; border-radius:8px; padding:3px 12px; animation:none; font-size:clamp(.95rem,4.6vw,1.4rem); }
.fall-fx.small .fall-banner { font-size:clamp(.8rem,3.8vw,1.1rem); }
@media (prefers-reduced-motion: reduce) {
  .fall-char { animation:fadeOut .3s .5s both !important; transform:translate(-50%,-50%); }
}
@keyframes fadeOut { to{opacity:0} }
.floor-badge { top:auto; bottom:4px; }
/* v4: surprised face */
.fall-hole { width:min(30%,124px); }
.fall-char { width:62%; height:62%; border-width:2px; }
.fall-char svg { display:block; width:100%; height:100%; }
.fall-bang { color:#ffe14d; font-weight:900; font-size:clamp(1.3rem,6vw,2rem); line-height:1; margin-bottom:-4px;
  text-shadow:0 0 3px #000,0 2px 4px #000; animation:bangPop .5s ease-out both; }
.fall-fx.small .fall-bang { font-size:clamp(1rem,4.6vw,1.5rem); }
@keyframes bangPop { 0%{transform:scale(.2);opacity:0} 30%{transform:scale(1.3);opacity:1} 60%{transform:scale(1)} 100%{opacity:0} }
@keyframes charDrop { 0%,18%{transform:translate(-50%,-50%)} 100%{transform:translate(-50%,180%)} }
.fall-char { animation-delay:0s; animation-duration:.85s; }
@media (prefers-reduced-motion: reduce) {
  .fall-char { animation:fadeOut .3s .55s both !important; transform:translate(-50%,-50%); }
  .fall-bang { animation:fadeOut .3s .55s both !important; }
}
/* v5: emphasized floors */
.fall-banner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px 8px; max-width:96%; }
.fb-title { font-size:.8em; }
.fb-floors { display:inline-flex; align-items:center; gap:2px; }
.fb-floors span { font-family:inherit; font-weight:900; line-height:1; }
.fb-from { color:#ffe9a0; font-size:1.15em; -webkit-text-stroke:1px #000; }
.fb-arr { color:#ffe14d; font-size:1.1em; }
.fb-to { color:#ffe14d; font-size:1.75em; -webkit-text-stroke:1.5px #000; paint-order:stroke fill;
  text-shadow:0 0 6px rgba(255,225,77,.7),0 2px 0 #000; }
.fb-new { display:inline-block; animation:fbPop .35s cubic-bezier(.2,1.7,.4,1) both; }
.fall-banner { animation:bannerPop .3s cubic-bezier(.2,1.6,.4,1) both; }
.fall-fx.chained .fall-banner { animation:none; }
.fall-fx.landed .fb-to { animation:fbPop .3s cubic-bezier(.2,1.7,.4,1); }
.fall-fx.small .fall-banner { font-size:clamp(.8rem,3.8vw,1.05rem); }
@keyframes fbPop { 0%{transform:scale(.3);opacity:0} 100%{transform:scale(1);opacity:1} }
.floor-badge { transform-origin:left bottom; }
.floor-badge.fallpulse { animation:badgePulse .7s ease-out; }
@keyframes badgePulse { 0%{transform:scale(1)} 25%{transform:scale(1.5);box-shadow:0 0 22px #ffe14d} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) {
  .fb-new, .fall-banner, .fall-fx.landed .fb-to, .floor-badge.fallpulse { animation:none !important; }
}

/* ===== Footer always one line; app reserves its real height (incl. safe area) ===== */
:root { --meta-h: calc(30px + env(safe-area-inset-bottom, 0px)); }
#game-meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; height: var(--meta-h); box-sizing: border-box;
  padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); gap: 6px; font-size: clamp(0.62rem, 3.1vw, 0.78rem); }
#game-meta img { height: 16px; width: auto; }
#app { padding-bottom: var(--meta-h); }
/* Result: content shrinks (chest map first), buttons stay fully visible above the footer */
#result-overlay { justify-content: center; padding-bottom: max(10px, 1.5dvh); overscroll-behavior: contain; }
#result-overlay.lose { justify-content: flex-start; }
#result-overlay > * { flex-shrink: 0; }
#result-overlay #result-chest-reveal { flex-shrink: 1; min-height: 0; }
#result-chest-canvas { max-height: max(70px, 22dvh); width: auto !important; max-width: 100%; object-fit: contain; min-height: 0; }
#result-overlay .btn-col { margin-top: auto; padding-top: 4px; }
#result-overlay:not(.lose) .btn-col { margin-top: 6px; }
@media (max-height: 600px) { #result-chest-canvas { max-height: max(60px, 17dvh); } #result-reason { padding: 6px 10px; } }
/* v6: full body falls feet-first into the hole (clipped at the hole's rim) */
.fall-hole { overflow: visible; position: relative; width: min(30%, 124px); aspect-ratio: 1.6; border-radius: 50%; margin-top: min(18%, 70px); }
.fall-fx.small .fall-hole { margin-top: min(14%, 46px); }
.fall-clip { position: absolute; left: 6%; right: 6%; bottom: 45%; height: 320%; overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 12% 12%; pointer-events: none; }
.fall-body { position: absolute; left: 50%; bottom: -6%; width: 62%; transform: translateX(-50%);
  animation: bodyDrop .85s cubic-bezier(.55,0,1,.45) both; }
.fall-body svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes bodyDrop { 0%,18% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, 115%); } }
.fall-fx.nodrop .fall-body { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .fall-body { animation: fadeOut .3s .55s both !important; transform: translateX(-50%); }
}
/* v7: drop-in landing from the top of the board */
.fall-land { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fall-land-body { position: absolute; left: 50%; bottom: 50%; width: min(17%, 70px); margin-left: calc(min(17%, 70px) / -2);
  transform-origin: 50% 100%; animation: landIn .45s cubic-bezier(.5,0,1,.6) both; }
.fall-fx.small .fall-land-body { width: min(15%, 56px); margin-left: calc(min(15%, 56px) / -2); }
.fall-land-body svg { display: block; width: 100%; height: auto; }
@keyframes landIn {
  0% { transform: translateY(-260%); }
  62% { transform: translateY(0) scale(1, 1); }
  74% { transform: translateY(0) scale(1.18, .78); }
  88% { transform: translateY(-8%) scale(.96, 1.05); }
  100% { transform: translateY(0) scale(1, 1); }
}
.fall-fx.landed .fall-hole, .fall-fx.landed .fall-bang { opacity: 0; transition: opacity .12s; }
@media (prefers-reduced-motion: reduce) {
  .fall-land-body { animation: fadeIn .25s both !important; }
}
/* フリーゲーム夢現 link in the title footer row */
.title-footer-row .btn-compact { flex: 1 1 0; }
.title-footer-row .mugen-btn { flex: 1.9 1 0; letter-spacing: 0; font-size: clamp(0.68rem, 1.75vh, 0.86rem); }
.title-points-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.title-points-row .title-points { margin: 0; }
.title-points-row .share-btn { flex: 0 0 auto; min-height: 30px; padding: 3px 12px; font-size: 0.8rem; white-space: nowrap; }
#screen-title .title-points-row { margin: 0 0 clamp(2px, 0.6vh, 6px); }
#screen-title .title-points-row .share-btn { min-height: 0; height: auto; padding: 2px 12px; line-height: 1.4; font-size: 0.78rem; border-radius: 999px; }
/* tall phones: keep the whole title screen above the version footer */
@media (min-height: 780px) and (max-width: 520px) {
  #screen-title .btn-col { gap: 8px; }
  #screen-title .title-sub { margin-top: 2px; margin-bottom: 4px; }
}