/* World Sweeper — app styles */

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

html, body {
  height: 100%;
  height: 100dvh; /* iOS Safari: dynamic viewport height */
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a2530;
  color: #ECEFF1;
}

/* ---- Layout ---- */

.app-wrapper {
  display: flex;
  flex-direction: column;
  /* AdSense 等による body 直下への要素注入・広告による高さ膨張から
     ゲームレイアウトを守るため、強制的にビューポート全体を占有する */
  position: fixed;
  inset: 0;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  min-height: 100dvh;
}

.ad-banner {
  width: 100%;
  min-height: 50px;
  max-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 8px 0;
}
.ad-banner:empty,
.ad-banner[hidden] {
  display: none;
}

/* 実際に使われている 2 枠は renderHome / boot から必ず showZucksNative に渡され、
   ad-native クラスが付いて min-height 90px（モバイル 114px）になる。ところが
   それまでは :empty で高さ 0 なので、挿入された瞬間に枠のぶんだけ下が押し下がる
   （本番実測: desktop 1505ms に 0 → 90px、mobile 1102ms に 0 → 114px）。
   実広告が入っても min-height の内側に収まり追加のシフトは出ないので、
   最初から同じ高さを予約しておく。 */
#ad-banner-home-top,
#ad-banner {
  min-height: 90px;
}

#ad-banner-home-top:empty,
#ad-banner:empty {
  display: flex;
}

@media (max-width: 767px) {
  #ad-banner-home-top,
  #ad-banner {
    min-height: 114px;
  }
}
.ad-banner.ad-native {
  min-height: 90px;
  max-height: none;
}
.ad-native-preview {
  box-sizing: border-box;
  width: min(728px, 100%);
  min-height: 90px;
  border: 1px dashed rgba(90, 110, 130, 0.55);
  border-radius: 6px;
  color: #617080;
  background: rgba(235, 241, 246, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 12px;
  text-align: center;
}
.ad-interstitial-preview {
  box-sizing: border-box;
  color: #617080;
  background: rgba(235, 241, 246, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 12px;
  text-align: center;
}
.modal.ad-interstitial-modal {
  box-sizing: content-box;
  width: fit-content;
  max-width: none;
  max-height: calc(100dvh - 16px);
  padding: 0;
  overflow: hidden;
}
.ad-interstitial-modal .modal-header {
  margin: 0;
  padding: 1rem;
}
@media (max-width: 767px) {
  .ad-banner.ad-native,
  .ad-native-preview {
    min-height: 114px;
  }
}

.game-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}

#game-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  display: block;
}

/* ---- エリアクリア時のフロート演出（pt + スタミナ） ---- */
.stamina-award-float {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.9);
  animation: stamina-award-rise 1.4s ease-out forwards;
  white-space: nowrap;
}
.stamina-award-float .pts {
  font-size: 1.4rem;
  color: #FFD54F;
}
.stamina-award-float .sp {
  font-size: 1.1rem;
  color: #80DEEA;
}
@keyframes stamina-award-rise {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  15%  { transform: translate(-50%, -60%) scale(1.15); opacity: 1; }
  35%  { transform: translate(-50%, -80%) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -160%) scale(0.95); opacity: 0; }
}

@font-face {
  font-family: "Press Start 2P";
  src: url("/mirror/pathcut20261010/fonts/press-start-2p/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}

/* ---- SameGame ブロック消去時の獲得スコア ---- */
.samegame-score-float {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  color: #fff8c6;
  font-size: clamp(0.9rem, 2vw, 1.25rem);
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9), 0 0 8px #e69f00;
  animation: samegame-score-pop 0.9s ease-out forwards;
}
@keyframes samegame-score-pop {
  0% { transform: translate(-50%, -35%) scale(0.65); opacity: 0; }
  20% { transform: translate(-50%, -60%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(0.95); opacity: 0; }
}

.dig-swings-low {
  color: #ff8a65;
  font-weight: 900;
}
.dig-ore-float {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  color: #fff3c4;
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9), 0 0 6px #b8860b;
  animation: samegame-score-pop 1s ease-out forwards;
}
.dig-ore-float--combo {
  color: #ffe082;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9), 0 0 10px #ff6f00;
}
.dig-ore-float--rock {
  color: #d7ccc8;
  font-size: clamp(0.65rem, 1.4vw, 0.85rem);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ---- Header ---- */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.8rem;
  background: #1C313A;
  border-bottom: 2px solid #37474F;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.title {
  font-size: 1.1rem;
  font-weight: bold;
}

.user-id {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #90A4AE;
  font-family: monospace;
}

.user-id.clickable {
  cursor: pointer;
  border-bottom: 1px dashed #546E7A;
}

.user-id.clickable:hover {
  color: #ECEFF1;
}

.score {
  font-size: 0.85rem;
  color: #FFD54F;
  font-weight: bold;
  white-space: nowrap;
}

.score.stamina {
  color: #80DEEA;
  cursor: help;
}

.score.color-swap,
.score.slitherlink-lines,
.score.pathcut-lines {
  color: #B7E66E;
}

.score.nikaku-info {
  color: #81D4FA;
}

.score.stamina.low {
  color: #FF8A65;
}

/* 特殊付与で通常上限 5 を超えている状態。分母は 5 のままなので「7 / 5」と出る。
   数字の不整合に見えないよう、超過中だけ色を変えて意図的な状態だと分かるようにする。 */
.score.stamina.overflow {
  color: #FFD54F;
}

.stamina-timer {
  margin-left: 0.35rem;
  font-size: 0.72rem;
  color: #90A4AE;
  font-weight: normal;
}

.stamina-debug {
  display: inline-flex;
  gap: 0.2rem;
  margin-left: 0.3rem;
}
.stamina-debug[hidden] { display: none; }
.stamina-debug-btn {
  background: #455A64;
  border: 1px solid #78909C;
  color: #ECEFF1;
  border-radius: 3px;
  padding: 0 0.4rem;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}
.stamina-debug-btn:hover { background: #546E7A; }
.stamina-debug-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.header-btn {
  background: #37474F;
  border: 1px solid #546E7A;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  color: #ECEFF1;
}

.header-btn:hover {
  background: #455A64;
}

.header-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid #546E7A;
  border-radius: 4px;
  background: #263238;
  color: #CFD8DC;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.header-toggle input {
  accent-color: #4FC3F7;
}

/* ---- Toast ---- */

.toast {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  max-width: calc(100% - 2rem);
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  z-index: 90;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.toast-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-success { background: #2E7D32; color: #fff; }
.toast-danger  { background: #C62828; color: #fff; }
.toast-warn    { background: #E65100; color: #fff; }
.toast-info    { background: #1565C0; color: #fff; }

/* ---- Overlay / Modal ---- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.overlay.visible {
  display: flex;
}

#active-overlay {
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
  align-items: flex-start;
  overflow-y: auto;
}

.modal {
  background: var(--site-panel-strong);
  border: 1px solid var(--site-line);
  box-sizing: border-box;
  color: var(--site-ink);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 420px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

#active-overlay .modal {
  margin: auto;
  max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-header h2 {
  font-size: 1.1rem;
}

.overlay-close {
  background: none;
  border: none;
  color: var(--site-muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.overlay-close:hover {
  color: var(--site-ink);
}

/* ---- Leaderboard ---- */

.lb-list {
  list-style: none;
  padding: 0;
}

.lb-list li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid #37474F;
  font-size: 0.85rem;
}

.lb-list li.lb-gap {
  justify-content: center;
  color: #78909C;
  border-bottom: 0;
}

.lb-list li.me {
  color: #FFD54F;
  font-weight: bold;
}

.lb-list .rank {
  min-width: 1.5rem;
  text-align: center;
  color: #78909C;
}

/* 長い表示名で順位・ポイント列が押し出されないよう、名前列だけを縮めて省略する。
   flex-basis を auto にしているのは、縮み量をコンテンツ幅に比例させて
   座標などの短いテキストが先に潰れるのを防ぐため（refs #592） */
.lb-list .uid {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
  font-size: 0.8rem;
  color: #90A4AE;
}

.lb-list .active-badge {
  min-width: 0;
}

.lb-list .pts {
  color: #FFD54F;
  font-weight: bold;
  min-width: 60px;
  flex-shrink: 0;
  text-align: right;
}

.lb-list .areas {
  color: #80DEEA;
  min-width: 50px;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.8rem;
}

.lb-list .lb-jump {
  background: none;
  border: 1px solid #546E7A;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 6px;
  margin-left: 4px;
  flex-shrink: 0;
  color: #ECEFF1;
}
.lb-list .lb-jump:hover {
  background: #37474F;
}

.lb-list .active-ago {
  color: #90A4AE;
  font-size: 0.75rem;
}

/* ---- Help ---- */

.help-content h3 {
  margin: 0.8rem 0 0.4rem;
  font-size: 0.95rem;
  color: var(--site-secondary);
}

.help-content p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--site-muted);
}

.help-content ul {
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--site-muted);
  line-height: 1.6;
}

.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.help-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--site-line);
}

.help-table td:first-child {
  white-space: nowrap;
  color: var(--site-accent-deep);
}

/* ---- Jump button ---- */

.jump-btn {
  background: #1B5E20 !important;
  border-color: #4CAF50 !important;
  font-size: 0.8rem;
}

.jump-btn:hover {
  background: #2E7D32 !important;
}

/* ---- Area switch dialog ---- */

.modal-small {
  max-width: 340px;
}

.modal-body-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--site-muted);
  margin-bottom: 1rem;
}

/* 購入確認の本文は、辞書の改行をそのまま見せる。 */
#stamina-spend-body {
  white-space: pre-line;
}

.modal-stamina-info {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  background: var(--site-panel-strong);
  border: 1px solid var(--site-line);
  color: var(--site-muted);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  white-space: nowrap;
}
.modal-stamina-info.insufficient {
  border-color: #E65100;
  color: #FF8A65;
}
.modal-stamina-info .ms-cost { color: var(--site-secondary); font-weight: bold; }
.modal-stamina-info .ms-cost.premium { color: #FFD54F; }
.modal-stamina-info .ms-current { color: var(--site-ink); font-weight: bold; }
.modal-stamina-info .ms-current.low { color: #FF8A65; }
.modal-stamina-info[hidden] { display: none; }

.modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* リザルトオーバーレイはcanvas上のズーム操作を通過させる。
   #game-stage（position: relative）配下に配置し、ビューポート全体ではなく
   ゲームキャンバスの下部にモーダルを表示する（Toast と同じ基準）。 */
#result-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  align-items: flex-end;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  z-index: 1000;
}

#result-overlay .modal {
  pointer-events: auto;
  background: rgba(18, 28, 36, 0.92);
}

/* Demo replay controls */
.demo-replay {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.demo-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.demo-speed-btns {
  display: flex;
  gap: 0.25rem;
}

.demo-speed-btns .demo-speed {
  background: #263238;
}

.demo-speed-btns .demo-speed.active {
  background: #1565C0;
  border-color: #1976D2;
  color: #fff;
}

.demo-seek {
  width: 100%;
  accent-color: #1976D2;
  cursor: pointer;
}

.demo-camera-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #B0BEC5;
  cursor: pointer;
  user-select: none;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid #546E7A;
  font-size: 0.85rem;
  cursor: pointer;
  color: #ECEFF1;
}

.btn-primary {
  background: #1565C0;
  border-color: #1976D2;
}

.btn-primary:hover {
  background: #1976D2;
}

.btn-secondary {
  background: #37474F;
}

.btn-secondary:hover {
  background: #455A64;
}

.btn-accent {
  background: #E65100;
  border-color: #F57C00;
  width: 100%;
}
.btn-accent:hover {
  background: #F57C00;
}
.btn-accent:disabled {
  background: #546E7A;
  border-color: #607D8B;
  cursor: default;
}

.modal-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.modal-checkbox-row[hidden] { display: none; }
.modal-checkbox-row input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--site-secondary);
}

.modal-share-row {
  margin-bottom: 0.8rem;
}
.modal-share-row[hidden] { display: none; }

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* ---- Profile modal ---- */

.profile-section {
  margin-bottom: 1.2rem;
}

.profile-label {
  display: block;
  font-size: 0.75rem;
  color: var(--site-muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-hint {
  font-size: 0.75rem;
  color: var(--site-muted);
  margin: 0 0 0.6rem;
}

.profile-name-row {
  display: flex;
  gap: 0.5rem;
}

.profile-custom-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.profile-input {
  flex: 1;
  padding: 0.4rem 0.6rem;
  background: var(--site-panel);
  border: 1px solid var(--site-line);
  border-radius: 4px;
  color: var(--site-ink);
  font-size: 0.85rem;
}

.profile-input:focus {
  outline: none;
  border-color: var(--site-secondary, #0f596c);
}

.profile-icon-input {
  flex: 0 0 4.2rem;
  text-align: center;
  font-size: 1.1rem;
}

.profile-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.25rem;
  max-height: 10rem;
  overflow-y: auto;
  padding: 0.4rem;
  background: var(--site-bg);
  border: 1px solid var(--site-line);
  border-radius: 6px;
}

.profile-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.profile-icon-btn:hover {
  background: rgba(255,255,255,0.1);
}

.profile-icon-btn.selected {
  border-color: #42A5F5;
  background: rgba(66,165,245,0.2);
}

.profile-color-input {
  flex: 0 0 3.4rem;
  height: 2.2rem;
  padding: 0.2rem;
  background: #263238;
  border: 1px solid #546E7A;
  border-radius: 4px;
  cursor: pointer;
}

.profile-color-preview {
  height: 2.4rem;
  border-radius: 6px;
  border: 2px solid #546E7A;
  margin-bottom: 0.6rem;
}

.profile-hsv-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.profile-slider-label {
  font-size: 0.7rem;
  color: #78909C;
}

.profile-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.4rem;
  border-radius: 4px;
  outline: none;
  margin-bottom: 0.3rem;
}

.profile-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #263238;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.profile-slider-hue {
  background: linear-gradient(to right,
    hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),
    hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));
}

.player-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  /* 親（flex アイテム / グリッドセル）の幅を超えないようにして .player-name の
     ellipsis を確実に発動させる。これがないと長い表示名が横に伸び続ける（refs #592） */
  max-width: 100%;
}

.player-profile-link {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.player-profile-link:hover {
  text-decoration: underline;
}

.player-profile-link:focus-visible {
  border-radius: 3px;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.player-icon {
  font-size: 1rem;
  line-height: 1;
}

.player-icon-img {
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Provider buttons */

.provider-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #546E7A;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #ECEFF1;
  transition: background 0.15s;
}

.provider-btn:hover {
  filter: brightness(1.15);
}

.provider-btn.google {
  background: #4285F4;
  border-color: #4285F4;
}

.provider-btn .provider-icon {
  font-size: 1.1rem;
  width: 1.4rem;
  text-align: center;
}

/* Linked provider display */

.btn-danger {
  background: #B71C1C;
  border-color: #C62828;
}

.btn-danger:hover {
  background: #C62828;
}

.profile-logout-section {
  border-top: 1px solid #37474F;
  padding-top: 1rem;
  margin-top: 0.5rem;
}

.provider-linked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.5rem;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 6px;
  font-size: 0.8rem;
  color: #A5D6A7;
}

/* ---- Active grid badges ---- */

.active-badge {
  /* バッジ内に .player-chip を抱えるため flex コンテナにして min-width: 0 を通し、
     長い表示名がバッジごと横に膨らむのを防ぐ（refs #592） */
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.active-badge.cleared {
  background: color-mix(in srgb, var(--badge-color, #66BB6A) 20%, transparent);
  color: var(--badge-color, #81C784);
}

.active-badge.working {
  background: color-mix(in srgb, var(--badge-color, #42A5F5) 20%, transparent);
  color: var(--badge-color, #90CAF9);
}

.active-badge.mistake {
  background: color-mix(in srgb, var(--badge-color, #EF5350) 20%, transparent);
  color: var(--badge-color, #FFCDD2);
}

.active-penalty {
  font-size: 0.7rem;
  color: #EF9A9A;
  white-space: nowrap;
}

/* ---- Version update banner ---- */

.version-update-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100% - 2rem);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: #1565C0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 3000;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: auto;
}

.version-update-banner--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.version-update-banner__msg {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.version-update-banner__reload {
  flex: 0 0 auto;
  background: #fff;
  color: #1565C0;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  font-weight: bold;
  cursor: pointer;
}

.version-update-banner__reload:hover {
  filter: brightness(0.95);
}

.version-update-banner__close {
  flex: 0 0 auto;
  background: transparent;
  color: #fff;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: 1;
}

/* ---- News toast (clickable) ---- */

.toast-news {
  pointer-events: auto;
  cursor: pointer;
}

.toast-news:hover {
  filter: brightness(1.1);
}

/* ---- History tab ---- */

.tab-bar {
  display: flex;
  border-bottom: 2px solid #37474F;
  margin-bottom: 0.8rem;
}

.tab-bar button {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #78909C;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: -2px;
}

.tab-bar button.active {
  color: #ECEFF1;
  border-bottom-color: #1976D2;
}

.tab-content {
  display: none;
}

.tab-content.visible {
  display: block;
}

/* ---- Tutorial ---- */

:root {
  --tutorial-cell-bg: #E5EDF1;
  --tutorial-cell-border: #91A3AF;
  --tutorial-cell-ink: #102432;
  --tutorial-wall-bg: #C7D1D7;
  --tutorial-wall-border: #91A3AF;
  --tutorial-hint: #8D3E14;
  --tutorial-highlight: rgba(200, 99, 42, 0.55);
  --tutorial-secondary-bg: #E5EDF1;
  --tutorial-secondary-hover: #D6E2E9;
  --tutorial-secondary-border: #A8BAC5;
  --tutorial-panel-bg: #F1EADF;
  --tutorial-panel-border: #0F596C;
  --tutorial-grid-border: #5642A8;
  --tutorial-cell-edge: rgba(255, 255, 255, 0.68);
  --tutorial-status-accent: #8D3E14;
  --tutorial-score-accent: #0F596C;
  --tutorial-success-ink: #075A3D;
  --tutorial-success-bg: rgba(29, 153, 103, 0.17);
  --tutorial-failed-ink: #A52323;
  --tutorial-failed-bg: rgba(198, 40, 40, 0.14);
}

[data-theme="dark"],
[data-theme="system"] {
  --tutorial-cell-bg: #37474F;
  --tutorial-cell-border: #546E7A;
  --tutorial-cell-ink: #ECEFF1;
  --tutorial-wall-bg: #1A2327;
  --tutorial-wall-border: #263238;
  --tutorial-hint: #FFD54F;
  --tutorial-highlight: rgba(255, 213, 79, 0.55);
  --tutorial-secondary-bg: #37474F;
  --tutorial-secondary-hover: #455A64;
  --tutorial-secondary-border: #546E7A;
  --tutorial-panel-bg: #252A30;
  --tutorial-panel-border: #4FC3F7;
  --tutorial-grid-border: #37239D;
  --tutorial-cell-edge: rgba(255, 255, 255, 0.48);
  --tutorial-status-accent: #FFF176;
  --tutorial-score-accent: #80DEEA;
  --tutorial-success-ink: #69F0AE;
  --tutorial-success-bg: rgba(0, 77, 64, 0.65);
  --tutorial-failed-ink: #FF8A80;
  --tutorial-failed-bg: rgba(183, 28, 28, 0.42);
}

@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --tutorial-cell-bg: #E5EDF1;
    --tutorial-cell-border: #91A3AF;
    --tutorial-cell-ink: #102432;
    --tutorial-wall-bg: #C7D1D7;
    --tutorial-wall-border: #91A3AF;
    --tutorial-hint: #8D3E14;
    --tutorial-highlight: rgba(200, 99, 42, 0.55);
    --tutorial-secondary-bg: #E5EDF1;
    --tutorial-secondary-hover: #D6E2E9;
    --tutorial-secondary-border: #A8BAC5;
    --tutorial-panel-bg: #F1EADF;
    --tutorial-panel-border: #0F596C;
    --tutorial-grid-border: #5642A8;
    --tutorial-cell-edge: rgba(255, 255, 255, 0.68);
    --tutorial-status-accent: #8D3E14;
    --tutorial-score-accent: #0F596C;
    --tutorial-success-ink: #075A3D;
    --tutorial-success-bg: rgba(29, 153, 103, 0.17);
    --tutorial-failed-ink: #A52323;
    --tutorial-failed-bg: rgba(198, 40, 40, 0.14);
  }
}

.tutorial-modal {
  max-width: 520px;
}

.tutorial-modal .btn-secondary {
  color: var(--tutorial-cell-ink);
  background: var(--tutorial-secondary-bg);
  border-color: var(--tutorial-secondary-border);
}

.tutorial-modal .btn-secondary:hover {
  background: var(--tutorial-secondary-hover);
}

.tutorial-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.tutorial-title {
  font-size: 1rem;
  color: var(--site-ink);
  margin-bottom: 0.5rem;
}

.tutorial-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--site-muted);
  margin-bottom: 0.9rem;
}

.tutorial-board {
  display: grid;
  gap: 0.5rem;
  width: fit-content;
  margin: 0 auto 0.8rem;
  position: relative;
}

.tutorial-cell {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--tutorial-cell-border);
  background: var(--tutorial-cell-bg);
  color: var(--tutorial-cell-ink);
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.tutorial-cell.revealed {
  background: #ECEFF1;
  color: #263238;
}

.tutorial-cell.flagged {
  background: #FFF3E0;
  color: #EF6C00;
}

.tutorial-cell.exploded {
  background: #B71C1C;
  color: #fff;
}

.tutorial-cell.highlight {
  box-shadow: 0 0 0 3px var(--tutorial-highlight);
}

.tutorial-cell.nikaku-selected {
  box-shadow: 0 0 0 3px #4FC3F7;
  background: #263238;
}

.tutorial-cell.nikaku-matched {
  background: transparent;
  border: 2px dashed #546E7A;
  opacity: 0.5;
}

.tutorial-cell.tutorial-wall {
  background: var(--tutorial-wall-bg);
  border-color: var(--tutorial-wall-border);
  cursor: default;
}

.tutorial-board.mosaic-tutorial-board {
  gap: 0.4rem;
  max-width: 100%;
}

.mosaic-tutorial-cell {
  position: relative;
  width: clamp(38px, 10vw, 56px);
  height: clamp(38px, 10vw, 56px);
  border-radius: 6px;
}

.mosaic-tutorial-cell.mosaic-white {
  background: #F5F5F5;
  color: #263238;
}

.mosaic-tutorial-cell.mosaic-black {
  background: #263238;
  color: #ECEFF1;
}

.mosaic-tutorial-cell.mosaic-unused {
  background: #B0BEC5;
  color: rgba(38, 50, 56, 0.55);
}

.mosaic-tutorial-cell.mosaic-selected {
  box-shadow: 0 0 0 3px #FFD54F;
}

.mosaic-tutorial-cell.mosaic-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(244, 67, 54, 0.20);
  border: 2px solid rgba(198, 40, 40, 0.72);
  pointer-events: none;
}

.mosaic-hint-number {
  position: relative;
  z-index: 1;
  font-size: 1.35rem;
  line-height: 1;
}

.mosaic-hint-number[data-decoration="underline"]::after,
.mosaic-hint-number[data-decoration="overline"]::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.62em;
  height: max(1px, 0.065em);
  background: currentColor;
  transform: translateX(-50%);
}

.mosaic-hint-number[data-decoration="underline"]::after {
  bottom: -0.1em;
}

.mosaic-hint-number[data-decoration="overline"]::after {
  top: -0.1em;
}

.mosaic-lock-symbol {
  position: absolute;
  z-index: 2;
  right: 3px;
  top: 2px;
  font-size: 0.62rem;
  line-height: 1;
}

.tutorial-board.sudoku-swap-tutorial-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 100%;
  padding: 0.3rem;
  background: #455A64;
  border-radius: 10px;
}

.sudoku-swap-tutorial-cell {
  position: relative;
  width: clamp(42px, 11vw, 56px);
  height: clamp(42px, 11vw, 56px);
  border-radius: 0;
  box-sizing: border-box;
  border: 0;
  background: #FFFDF7;
  color: #1565C0;
  box-shadow: inset 0 0 0 1px #CFD8DC;
}

.sudoku-swap-tutorial-cell.cage-edge-top { border-top: 3px dashed #263238; }
.sudoku-swap-tutorial-cell.cage-edge-right { border-right: 3px dashed #263238; }
.sudoku-swap-tutorial-cell.cage-edge-bottom { border-bottom: 3px dashed #263238; }
.sudoku-swap-tutorial-cell.cage-edge-left { border-left: 3px dashed #263238; }

.sudoku-swap-tutorial-cell.cage-edge-top.cage-edge-left { border-top-left-radius: 7px; }
.sudoku-swap-tutorial-cell.cage-edge-top.cage-edge-right { border-top-right-radius: 7px; }
.sudoku-swap-tutorial-cell.cage-edge-bottom.cage-edge-left { border-bottom-left-radius: 7px; }
.sudoku-swap-tutorial-cell.cage-edge-bottom.cage-edge-right { border-bottom-right-radius: 7px; }

.sudoku-swap-tutorial-cell.sudoku-swap-fixed {
  background: #E8EAF0;
  color: #263238;
}

.sudoku-swap-tutorial-cell.sudoku-swap-unused {
  background: #90A4AE;
  color: rgba(38, 50, 56, 0.55);
  cursor: default;
}

.sudoku-swap-tutorial-cell.sudoku-swap-selected {
  box-shadow: 0 0 0 3px #4FC3F7;
}

.sudoku-swap-tutorial-cell.highlight {
  box-shadow: inset 0 0 0 3px #FFD54F;
}

.sudoku-swap-tutorial-cell.sudoku-swap-locked {
  background: #C8E6C9;
  color: #2E7D32;
}

.sudoku-swap-lock-symbol {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.62rem;
  line-height: 1;
}

.tutorial-board.samegame-tutorial-board {
  display: block;
  width: min(100%, 360px);
}

.samegame-tutorial-panel {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--tutorial-panel-border);
  border-radius: 10px;
  background: var(--tutorial-panel-bg);
  box-sizing: border-box;
}

.samegame-tutorial-grid {
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--tutorial-grid-border);
  border-radius: 7px;
  background: #AEB4BA;
}

.samegame-tutorial-cell {
  position: relative;
  width: clamp(44px, 13vw, 56px);
  height: clamp(44px, 13vw, 56px);
  border: 2px solid var(--tutorial-cell-edge);
  border-radius: 4px;
  background-image: url('/mirror/pathcut20261010/skins/samegame/blocks.webp');
  background-repeat: no-repeat;
  background-size: 300% 200%;
  box-sizing: border-box;
}

.samegame-tutorial-cell.highlight {
  z-index: 10;
  border-color: #FFEB3B;
  animation: samegame-tutorial-highlight-pulse 0.72s ease-in-out infinite alternate;
}

@keyframes samegame-tutorial-highlight-pulse {
  from {
    box-shadow: 0 0 0 3px #FFEB3B, 0 0 8px 4px rgba(255, 235, 59, 0.7);
    filter: brightness(1.05);
  }
  to {
    box-shadow: 0 0 0 6px #FFF176, 0 0 18px 9px rgba(255, 235, 59, 0.95);
    filter: brightness(1.35);
  }
}

.samegame-tutorial-cell.samegame-empty {
  border-color: transparent;
  background: #AEB4BA;
  cursor: default;
}

.samegame-tutorial-cell.samegame-color-0 { background-color: #D55E00; background-position: 0 0; }
.samegame-tutorial-cell.samegame-color-1 { background-color: #0072B2; background-position: 50% 0; }
.samegame-tutorial-cell.samegame-color-2 { background-color: #009E73; background-position: 100% 0; }
.samegame-tutorial-cell.samegame-color-3 { background-color: #F0E442; background-position: 0 100%; }
.samegame-tutorial-cell.samegame-color-4 { background-color: #CC79A7; background-position: 50% 100%; }
.samegame-tutorial-cell.samegame-color-5 { background-color: #E69F00; background-position: 100% 100%; }

.samegame-tutorial-cell.samegame-star {
  display: grid;
  place-items: center;
  border-color: transparent;
  background: #AEB4BA;
  cursor: default;
}

.samegame-tutorial-cell.samegame-star img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
}

.samegame-tutorial-stars,
.samegame-tutorial-score,
.samegame-tutorial-stamina,
.samegame-tutorial-result {
  font-family: "Press Start 2P", monospace;
}

.samegame-tutorial-stars,
.samegame-tutorial-stamina {
  color: var(--tutorial-status-accent);
  font-size: 0.78rem;
}

.samegame-tutorial-score {
  color: var(--tutorial-score-accent);
  font-size: clamp(0.58rem, 2.6vw, 0.72rem);
  line-height: 1.6;
  text-align: center;
}

.samegame-tutorial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.samegame-tutorial-add-row {
  min-width: 76px;
  font-weight: 800;
}

.samegame-tutorial-result {
  width: 100%;
  padding: 0.65rem 0.45rem;
  box-sizing: border-box;
  font-size: clamp(0.68rem, 3vw, 0.9rem);
  line-height: 1.5;
  text-align: center;
}

.samegame-tutorial-result--success {
  color: var(--tutorial-success-ink);
  background: var(--tutorial-success-bg);
}

.samegame-tutorial-result--failed {
  color: var(--tutorial-failed-ink);
  background: var(--tutorial-failed-bg);
}

.sudoku-swap-cage-sum {
  position: absolute;
  top: 2px;
  left: 3px;
  padding: 1px 2px;
  border-radius: 2px;
  background: rgba(255, 253, 247, 0.9);
  color: #6D4C41;
  font-size: 0.58rem;
  line-height: 1;
}

.sudoku-swap-cage-sum.sudoku-swap-cage-mismatch {
  color: #C62828;
}

.tutorial-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.tutorial-hint {
  font-size: 0.85rem;
  color: var(--tutorial-hint);
  margin-bottom: 0.8rem;
  min-height: 1.4em;
}

/* 吹き出し形式のヒント（スリザーリンク）。高さは JS が最長ぶんを確保する。
   尻尾は上の盤面を指す。 */
.tutorial-hint.tutorial-bubble {
  position: relative;
  box-sizing: border-box;
  margin-top: 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--tutorial-secondary-border);
  border-radius: 12px;
  background: var(--tutorial-secondary-bg);
  color: var(--tutorial-cell-ink);
  line-height: 1.55;
}

.tutorial-hint.tutorial-bubble::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--tutorial-secondary-bg);
  border-top: 1px solid var(--tutorial-secondary-border);
  border-left: 1px solid var(--tutorial-secondary-border);
}

/* スリザーリンクのチュートリアルは盤面・説明・吹き出し・ボタンが縦に並ぶので、
   スマホでは余白を詰め、操作ボタンを下端に固定する（マスの縮小は JS が画面高から決める）。 */
@media (max-width: 520px), (max-height: 760px) {
  .tutorial-modal.slitherlink-tutorial {
    padding: 0.9rem 1rem 0;
    max-height: calc(100dvh - 1rem);
  }

  .slitherlink-tutorial .modal-header { margin-bottom: 0.4rem; }
  .slitherlink-tutorial .tutorial-status { margin-bottom: 0.4rem; }
  .slitherlink-tutorial .tutorial-title { margin-bottom: 0.25rem; }
  .slitherlink-tutorial .tutorial-text { font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.4rem; }
  .slitherlink-tutorial .tutorial-board { margin-bottom: 0.2rem; }
  .slitherlink-tutorial .tutorial-hint.tutorial-bubble {
    position: sticky;
    bottom: var(--tutorial-actions-h, 3.6rem);
    z-index: 1;
    margin-top: 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
  }

  .slitherlink-tutorial .modal-actions {
    position: sticky;
    bottom: 0;
    padding: 0.5rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--site-panel-strong);
  }

  .slitherlink-tutorial .modal-actions .btn { flex: 1 1 0; min-width: 0; padding: 0.5rem 0.4rem; font-size: 0.8rem; line-height: 1.3; }
}

/* パスカットのチュートリアルは盤面・説明・吹き出し・ボタンが縦に並ぶので、
   スマホでは余白を詰め、操作ボタンを下端に固定する（マスの縮小は JS が画面高から決める）。 */
@media (max-width: 520px), (max-height: 760px) {
  .tutorial-modal.pathcut-tutorial {
    padding: 0.9rem 1rem 0;
    max-height: calc(100dvh - 1rem);
  }

  .pathcut-tutorial .modal-header { margin-bottom: 0.4rem; }
  .pathcut-tutorial .tutorial-status { margin-bottom: 0.4rem; }
  .pathcut-tutorial .tutorial-title { margin-bottom: 0.25rem; }
  .pathcut-tutorial .tutorial-text { font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.4rem; }
  .pathcut-tutorial .tutorial-board { margin-bottom: 0.2rem; }
  .pathcut-tutorial .tutorial-hint.tutorial-bubble {
    position: sticky;
    bottom: var(--tutorial-actions-h, 3.6rem);
    z-index: 1;
    margin-top: 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
  }

  .pathcut-tutorial .modal-actions {
    position: sticky;
    bottom: 0;
    padding: 0.5rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--site-panel-strong);
  }

  .pathcut-tutorial .modal-actions .btn { flex: 1 1 0; min-width: 0; padding: 0.5rem 0.4rem; font-size: 0.8rem; line-height: 1.3; }
}

/* ---- Admin ---- */

.admin-page {
  min-height: 100dvh;
  overflow: auto;
}

.admin-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.admin-panel {
  background: var(--site-panel-strong, #fffaf0);
  border: 1px solid var(--site-line, rgba(16, 36, 50, 0.12));
  border-radius: 10px;
  padding: 1.25rem;
  color: var(--site-ink, #102432);
}

.admin-panel h1,
.admin-panel h2 {
  color: var(--site-ink, #102432);
}

.login-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.login-benefits li {
  font-size: 0.9rem;
  color: var(--site-muted, #536271);
  padding: 0.45rem 0.75rem;
  background: var(--site-line, rgba(16,36,50,0.07));
  border-radius: 8px;
}

.admin-subtitle,
.admin-user,
.admin-message {
  color: var(--site-muted, #536271);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.admin-message[data-type="error"] {
  color: #b94040;
}

.admin-message[data-type="success"] {
  color: #2d7a3a;
}

.admin-form {
  display: grid;
  gap: 0.9rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.flag-settings-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.flag-preview {
  width: 72px;
  height: 72px;
  border: 1px solid var(--site-line, rgba(16, 36, 50, 0.12));
  border-radius: 10px;
  background: rgba(16, 36, 50, 0.08);
  display: grid;
  place-items: center;
  font-size: 2rem;
  overflow: hidden;
}

.flag-preview img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}

.flag-settings-controls {
  display: grid;
  gap: 0.5rem;
}

.drop-zone {
  min-height: 140px;
  border: 2px dashed var(--site-line, rgba(16, 36, 50, 0.25));
  border-radius: 10px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  background: rgba(16, 36, 50, 0.04);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.drop-zone.drag-over {
  border-color: var(--site-secondary, #0f596c);
  background: rgba(15, 89, 108, 0.08);
}

.drop-zone strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--site-ink, #102432);
}

.drop-zone span {
  color: var(--site-muted, #536271);
  font-size: 0.85rem;
}

.image-preview {
  margin-top: 0.75rem;
  min-height: 140px;
  border: 1px solid var(--site-line, rgba(16, 36, 50, 0.12));
  border-radius: 10px;
  padding: 0.75rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  background: rgba(16, 36, 50, 0.04);
}

.image-preview.empty {
  place-items: center;
  color: var(--site-muted, #536271);
}

.image-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
  background: #111;
}

.upload-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.upload-progress-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: #263238;
  overflow: hidden;
}

#upload-progress-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #26A69A, #42A5F5);
}

.admin-map-list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.admin-map-list li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--site-line, rgba(16, 36, 50, 0.12));
}

.admin-map-list a {
  color: var(--site-secondary, #0f596c);
}

#user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--site-muted, #536271);
  font-size: 0.9rem;
}

/* admin-page でのみ profile-* をライトテーマに上書き */
.admin-page .profile-label {
  color: var(--site-muted, #536271);
}

.admin-page .profile-input {
  background: #fff;
  border-color: rgba(16, 36, 50, 0.2);
  color: var(--site-ink, #102432);
}

.admin-page .profile-input:focus {
  border-color: var(--site-secondary, #0f596c);
  outline: none;
}

.admin-page .profile-input::placeholder {
  color: rgba(16, 36, 50, 0.35);
}

.admin-page select.profile-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23536271'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  appearance: none;
  padding-right: 1.8rem;
}

.admin-page .btn-secondary {
  background: #eef8fb;
  border-color: rgba(15, 89, 108, 0.28);
  color: var(--site-secondary, #0f596c);
}

.admin-page .btn-secondary:hover {
  background: #dff2f7;
}

.admin-page .btn-primary {
  background: #d86f2e;
  border-color: #c8632a;
  color: #fffaf0;
}

.admin-page .btn-primary:hover {
  background: #c8632a;
}

.admin-page .btn:disabled,
.admin-page .btn[disabled] {
  background: #dce3e6;
  border-color: rgba(83, 98, 113, 0.20);
  color: #7b8a96;
}

/* ---- Loading overlay ---- */

.loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* ロード中に元画像や盤面を透かさない。初回描画から完全に遮蔽する。 */
  background: #1a2530;
  transition: opacity 0.4s ease;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #37474F;
  border-top-color: #42A5F5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 1rem;
  font-size: 1rem;
  color: #90A4AE;
}

/* ---- エリア確保処理中オーバーレイ ---- */

#area-claim-overlay {
  flex-direction: column;
  /* 詳細盤面の取得中に、保護対象のベース画像を一切透かさない。 */
  background: #1a2530;
}

/* ---- My Map Item (Issue #120) ---- */

.admin-map-list li.my-map-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.my-map-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.my-map-edit-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}

.my-map-action-row {
  display: flex;
  gap: 0.5rem;
}

.my-map-url-row {
  align-items: center;
}

.my-map-url-prefix {
  color: var(--site-muted, #536271);
  font-size: 0.86rem;
  font-weight: 700;
}

.my-map-url-input {
  min-width: 12rem;
}

.profile-input-sm {
  flex: none;
  width: auto;
}

.admin-page .map-badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
}

.admin-page .badge-public {
  background: #e7f8f0;
  color: #0f6b49;
  border: 1px solid rgba(15, 107, 73, 0.32);
}

.admin-page .badge-private {
  background: #fff0e8;
  color: #b94712;
  border: 1px solid rgba(185, 71, 18, 0.34);
}

.admin-page .badge-mode {
  border: 1px solid transparent;
}

.admin-page .badge-mode-mine {
  background: #fff3cf;
  color: #8c4b00;
  border-color: rgba(140, 75, 0, 0.28);
}

.admin-page .badge-mode-color {
  background: #e4f7ff;
  color: #006c9c;
  border-color: rgba(0, 108, 156, 0.30);
}

.admin-page .badge-mode-mosaic {
  background: #eef2f5;
  color: #394957;
  border-color: rgba(57, 73, 87, 0.30);
}

.admin-page .badge-mode-nikaku {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: rgba(46, 125, 50, 0.28);
}

.admin-page .badge-mode-chat {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: rgba(107, 33, 168, 0.28);
}

.admin-page .badge-mode-board {
  background: #ffe8e8;
  color: #a83232;
  border-color: rgba(168, 50, 50, 0.28);
}

.admin-page .badge-mode-loop {
  background: #e0f2f1;
  color: #00695c;
  border-color: rgba(0, 105, 92, 0.28);
}

.admin-page .badge-mode-packing {
  background: #fff3e0;
  color: #a15c07;
  border-color: rgba(161, 92, 7, 0.28);
}

.admin-page .badge-mode-dig {
  background: #efebe9;
  color: #5d4037;
  border-color: rgba(93, 64, 55, 0.28);
}

.admin-page .badge-mode-planaria {
  background: #e8f5e9;
  color: #1b5e20;
  border-color: #81c784;
}

.admin-page .badge-mode-samegame {
  background: #ede7f6;
  color: #512da8;
  border-color: rgba(81, 45, 168, 0.28);
}

.admin-page .badge-unknown {
  background: #eef2f5;
  color: #536271;
  border: 1px solid rgba(83, 98, 113, 0.28);
}

.radio-group {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--site-muted, #536271);
  cursor: pointer;
}

.map-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--site-line, rgba(16, 36, 50, 0.12));
  margin-bottom: 0.5rem;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--site-muted, #536271);
  min-width: 3.5rem;
}

.filter-cb {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--site-ink, #102432);
  cursor: pointer;
}

.filter-bulk {
  margin-left: 0.25rem;
}

.map-thumb-sm {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--site-line, rgba(16, 36, 50, 0.12));
  flex-shrink: 0;
  background: #eef2f5;
  image-rendering: pixelated;
}

.alias-add-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.alias-add-row .profile-input-sm {
  flex: 1;
  min-width: 8rem;
}

.alias-arrow {
  color: var(--site-muted, #536271);
  font-size: 1.1rem;
  font-weight: 700;
}

.alias-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alias-item-id {
  font-weight: 700;
  color: var(--site-secondary, #0f596c);
}

.alias-item-target {
  color: var(--site-secondary, #0f596c);
}

.alias-item-target-input {
  flex: 1;
  min-width: 8rem;
  max-width: 12rem;
}

.map-list-count {
  font-size: 0.82rem;
  color: var(--site-muted, #536271);
  padding: 0.25rem 0;
}

/* コレクション帳（ISSUE #605 Phase 1） */
.collection-summary {
  display: flex;
  gap: 1.5rem;
  margin: 0.75rem 0 1rem;
  flex-wrap: wrap;
}

.collection-stat {
  display: flex;
  flex-direction: column;
}

.collection-stat strong {
  font-size: 1.4rem;
  line-height: 1.2;
}

.collection-stat span {
  font-size: 0.75rem;
  opacity: 0.7;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.collection-card {
  border: 1px solid var(--site-line, rgba(16, 36, 50, 0.12));
  border-radius: 8px;
  overflow: hidden;
  background: var(--site-panel, rgba(255, 255, 255, 0.6));
}

.collection-card-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.collection-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.collection-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
}

.collection-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.collection-card-detail {
  font-size: 0.72rem;
  opacity: 0.75;
}

/* 未取得はシルエット。「空いている枠」が見えることがコレクションの駆動力なので、
   隠さずに、しかし明確に未取得と分かる見せ方にする。 */
.collection-medal-none .collection-thumb {
  filter: grayscale(1) brightness(0.35) contrast(0.8);
}

.collection-medal-none .collection-card-title {
  opacity: 0.55;
}

.collection-medal-bronze {
  border-color: #c87f4a;
  box-shadow: inset 0 0 0 1px rgba(200, 127, 74, 0.35);
}

.collection-medal-silver {
  border-color: #9aa7b1;
  box-shadow: inset 0 0 0 1px rgba(154, 167, 177, 0.4);
}

.collection-medal-gold {
  border-color: #d4af37;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.45);
}

/* メダルバッジ（ISSUE #605 Phase 2） */
.collection-medal-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  line-height: 1.4;
}

.collection-medal-badge-gold {
  background: rgba(212, 175, 55, 0.18);
  color: #8a6d1a;
  border: 1px solid rgba(212, 175, 55, 0.55);
}

.collection-medal-badge-silver {
  background: rgba(154, 167, 177, 0.18);
  color: #5c6870;
  border: 1px solid rgba(154, 167, 177, 0.55);
}

/* ダークテーマでは文字色が沈むので明るい側に振る。 */
[data-theme="dark"] .collection-medal-badge-gold { color: #e8c968; }
[data-theme="dark"] .collection-medal-badge-silver { color: #c3ced6; }

/* 実績解除の演出（ISSUE #605 Phase 3b）
   既存の .toast とは別レイヤー。上部中央からスライドで降りてくる。 */
.achievement-layer {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  pointer-events: none;
}

.achievement-card {
  /* レイヤーは pointer-events: none。カードだけ受け取る（周囲でゲーム操作を塞がない）。 */
  pointer-events: auto;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 260px;
  max-width: min(92vw, 420px);
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #1c2430 0%, #2b3648 60%, #1c2430 100%);
  border: 1px solid rgba(212, 175, 55, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: #f4f7fa;
  opacity: 0;
  transform: translateY(-24px) scale(0.96);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
  position: relative;
  overflow: hidden;
}

.achievement-card-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.achievement-card-out {
  /* 消えかけを踏んで意図せず遷移するのを防ぐ。 */
  pointer-events: none;
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  transition: opacity 380ms ease, transform 380ms ease;
}

/* 表面を一度だけ走る光。ここが「特別感」の肝なので控えめに1回だけ。 */
.achievement-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, transparent 62%);
  transform: translateX(-120%);
}

.achievement-card-in::after {
  animation: achievement-sweep 1100ms ease-out 260ms 1;
}

@keyframes achievement-sweep {
  to { transform: translateX(120%); }
}

.achievement-badge {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: radial-gradient(circle at 35% 30%, #f6df9a 0%, #d4af37 55%, #9a7b1f 100%);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.achievement-body {
  min-width: 0;
}

.achievement-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e2c86a;
  font-weight: 700;
}

.achievement-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.achievement-desc {
  font-size: 0.72rem;
  opacity: 0.75;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* 動きを抑える設定では、光の走査とスライドを止めて素直に出す。 */
@media (prefers-reduced-motion: reduce) {
  .achievement-card {
    transition: opacity 200ms ease;
    transform: none;
  }
  .achievement-card-in { transform: none; }
  .achievement-card-out { transform: none; }
  .achievement-card-in::after { animation: none; }
}

@media (max-width: 480px) {
  .achievement-card {
    min-width: 0;
    width: calc(100vw - 1.5rem);
    padding: 0.5rem 0.9rem 0.5rem 0.5rem;
  }
  .achievement-badge { width: 38px; height: 38px; font-size: 1.2rem; }
  .achievement-name { font-size: 0.88rem; }
}

/* 実績一覧（ISSUE #605 Phase 3c）
   未取得もシルエットで並べる。空いている枠が見えることが収集の動機になる。 */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.achievement-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.65rem 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--site-line, rgba(16, 36, 50, 0.12));
  background: var(--site-panel, rgba(255, 255, 255, 0.6));
  text-align: center;
  /* 名前の行数・モード表示・獲得率の有無で 101〜149px とばらついていた。
     collection-skeleton.js が敷くスケルトンと高さが一致しないと予約の意味が無いので、
     実測の最大値に揃えて固定する。 */
  min-height: 150px;
}

/* 狭い画面は 2 列で並ぶぶん名前が折り返しやすく、実測の最大は 134px だった。
   デスクトップと同じ 150px にすると縦に間延びするので、こちらは 140px に留める。 */
@media (max-width: 760px) {
  .achievement-tile {
    min-height: 140px;
  }
}

/* --- 読み込み中の高さ予約（collection-skeleton.js が敷く） --- */

.achievement-tile-skeleton,
.collection-card-skeleton {
  position: relative;
  overflow: hidden;
}

.collection-card-skeleton {
  /* 実カードはサムネ（正方形）＋タイトル 1〜2 行。厳密な一致は列幅次第だが、
     このグリッドの下にはフッターしか無いので近似で足りる。 */
  aspect-ratio: 1 / 1.2;
}

.achievement-tile-skeleton::after,
.collection-card-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%);
  transform: translateX(-100%);
  /* キーフレームは site.css（ホームのスケルトンと共用）。 */
  animation: skeleton-sheen 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .achievement-tile-skeleton::after,
  .collection-card-skeleton::after {
    animation: none;
  }
}

.achievement-tile-icon {
  font-size: 1.6rem;
  line-height: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.achievement-tile-name {
  font-size: 0.7rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.achievement-tile-earned {
  border-color: rgba(212, 175, 55, 0.6);
}

.achievement-tile-earned .achievement-tile-icon {
  background: radial-gradient(circle at 35% 30%, #f6df9a 0%, #d4af37 55%, #9a7b1f 100%);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
}

/* 未取得はアイコンを潰して伏せる。名前は見せる（何を目指せばよいか伝えるため）。 */
.achievement-tile-locked .achievement-tile-icon {
  filter: grayscale(1) brightness(0.45) contrast(0.7);
  opacity: 0.55;
}

.achievement-tile-locked .achievement-tile-name {
  opacity: 0.5;
}

.achievement-tile-count {
  position: absolute;
  top: 0.3rem;
  right: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.2);
  color: #8a6d1a;
  border: 1px solid rgba(212, 175, 55, 0.5);
}

[data-theme="dark"] .achievement-tile-count { color: #e8c968; }

/* 秘密の実績と画像アイコン（ISSUE #605） */
.achievement-tile-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.achievement-tile-mode {
  font-size: 0.62rem;
  opacity: 0.6;
  line-height: 1.2;
}

/* 秘密の実績は未取得のあいだ、アイコンも名前も伏せる。
   ただしモード名は残す（当てもなく探すことにならないように）。 */
.achievement-tile-secret .achievement-tile-icon {
  filter: none;
  opacity: 0.75;
  background: repeating-linear-gradient(
    45deg,
    rgba(120, 130, 140, 0.18) 0 6px,
    rgba(120, 130, 140, 0.08) 6px 12px
  );
}

.achievement-tile-secret .achievement-tile-name {
  font-style: italic;
  opacity: 0.6;
}

.achievement-tile-secret .achievement-tile-mode {
  opacity: 0.8;
}

/* 実績の獲得率（ISSUE #605） */
.achievement-tile-rate {
  font-size: 0.6rem;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

/* 実績のメンテナンス（管理画面・ISSUE #605） */
.achievement-admin-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.achievement-admin-icon {
  font-size: 1.3rem;
  width: 32px;
  text-align: center;
  flex: 0 0 auto;
}

.achievement-admin-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.achievement-admin-meta {
  font-size: 0.68rem;
  opacity: 0.6;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* 非表示にしたものは一覧でも沈める。運用中に見分けが付かないと事故る。 */
.achievement-admin-item-hidden .achievement-admin-icon,
.achievement-admin-item-hidden .achievement-admin-body {
  opacity: 0.5;
}

.achievement-admin-filter {
  margin: 0.5rem 0;
}

/* コレクション画面の注記（ISSUE #605）
   仕様が固まるまでの断り書き。警告色は使わず、読み飛ばせる程度の主張に留める。 */
.collection-notice {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  border: 1px dashed var(--site-line, rgba(16, 36, 50, 0.2));
  background: var(--site-panel, rgba(255, 255, 255, 0.4));
  font-size: 0.76rem;
  line-height: 1.5;
  opacity: 0.85;
}

/* ---- 行追加ヒントの吹き出し（ChainSweeper） ----
   ChainSweeper は詰んだ瞬間にエリアを剥奪してペナルティを課すので、「詰んでから
   救済を案内する」導線が作れない。そのため詰む前に先読みで出す。トーストと違い
   押すべきボタン（btn-samegame-add-row）を矢印で指せるのがこの形にした理由。 */
.hint-balloon {
  position: fixed;
  z-index: 500;
  max-width: min(19rem, calc(100vw - 1rem));
  padding: 0.6rem 2rem 0.6rem 0.85rem;
  border-radius: 10px;
  background: #4527A0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.hint-balloon.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 行追加ボタンを指す三角。--hint-arrow-x は JS がボタン中央に合わせて更新するので、
   画面端で吹き出し本体が寄せられても矢印だけはボタンを指し続ける。 */
.hint-balloon::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--hint-arrow-x, 50%);
  width: 0;
  height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #4527A0;
}

.hint-balloon__close {
  position: absolute;
  top: 0.15rem;
  right: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.hint-balloon__close:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .hint-balloon { transition: none; }
}