:root{
  --bg:#0b0f14;
  --panel:#121924;
  --text:#eaf2ff;
  --muted:#8ea2bb;
  --line:rgba(255,255,255,0.12);
  --btn:rgba(255,255,255,0.10);
  --btnHover:rgba(255,255,255,0.16);
  --maxCanvas: 820px;

  --topH:56px;
  --bottomH:112px;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-tap-highlight-color: transparent;
}

/* =========================
   PCレイアウト（基本）
========================= */
body{
  padding-top: var(--topH);
  padding-bottom: calc(var(--bottomH) + env(safe-area-inset-bottom));
}

/* =========================
   TOP BAR（PC）
========================= */
#topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  background: rgba(10,14,20,0.86);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
  z-index:10;
}

#topbar .left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

#stageOnly{
  font-weight:900;
  white-space:nowrap;
}

#topbar .right{
  display:flex;
  gap:8px;
}

.mini{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btn);
  color:var(--text);
  font-weight:800;
}

/* =========================
   CANVAS（PC）
========================= */
#canvasWrap{
  width:100vw;
  height: calc(100vh - var(--topH) - var(--bottomH));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px;
}

#c{
  display:block;
  width: min(var(--maxCanvas), 96vw);
  height:auto;
  border-radius:14px;
  border:1px solid var(--line);
  background:#0b0f14;
  image-rendering: pixelated;
  touch-action:none;
}

/* =========================
   ★ コメント（canvas直下・共通）
========================= */
#toast{
  margin-top:10px;
  padding:10px 16px;
  background:rgba(0,0,0,0.55);
  border:1px solid var(--line);
  border-radius:14px;
  font-size:16px;           /* ← 大きく */
  font-weight:800;
  color:#ffffff;
  text-align:center;
  max-width:min(92vw, 680px);
  opacity:0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}

#toast.show{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   BOTTOM UI（PC）
========================= */
#bottomUI{
  position:fixed;
  left:0; right:0;
  bottom:0;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  z-index:10;
}

.uiPanel{
  max-width:720px;
  margin:0 auto;
  background: rgba(18,25,36,0.94);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

/* =========================
   ERA BUTTONS
========================= */
.eraBtn{
  flex:1;
  padding:12px 14px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,0.12);
  background:var(--btn);
  color:var(--text);
  font-weight:900;
}

#eraPast{ background:#cfeecf; color:#000; }
#eraNow{ background:#d6f0ff; color:#000; }
#eraFuture{ background:#444; }

.eraBtn.on{
  border:4px solid #ff2b2b;
}

/* =========================
   USE BUTTON
========================= */
#useBtn{
  min-width:96px;
  height:56px;
  background:#fff;
  color:#000;
  font-weight:900;
  border-radius:14px;
}

#useBtn img{
  width:24px;
  height:24px;
  object-fit:contain;
  pointer-events:none;
}

/* =====================================================
   スマホレイアウト
===================================================== */
@media (max-width: 768px){

  :root{
    --topH:0px;
    --bottomH:0px;
  }

  body{
    padding:0;
    display:flex;
    flex-direction:column;
  }

  /* ===== TOP ===== */
  #topbar{
    position:static;
    order:0;
    padding:10px 8px 6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:none;
    border:none;
  }

  #stageOnly{
    font-size:20px;
    font-weight:900;
  }

  /* ===== CANVAS ===== */
  #canvasWrap{
    order:1;
    width:100vw;
    padding:0;
  }

  #c{
    width:100vw !important;
    max-width:100vw !important;
    border-radius:0;
    border:none;
  }

  /* ===== コメント（スマホ） ===== */
  #toast{
    font-size:18px;          /* ← スマホはさらに大きく */
    margin:12px auto 0;
  }

  /* ===== UI ===== */
  #bottomUI{
    position:static;
    order:2;
    padding:8px 10px;
    margin-top:6px;
  }
}

/* =========================================
   コメントを canvas 下・時代ボタンの上へ
========================================= */

/* デフォルトでは topbar 内にいるので無効化 */
#topbar #toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  bottom: calc(var(--bottomH) + 72px); /* 時代ボタンの上 */
  z-index: 9;

  margin: 0;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 900;
  text-align: center;

  background: rgba(0,0,0,0.7);
  border: 2px solid var(--line);
  border-radius: 16px;

  max-width: min(92vw, 720px);
  white-space: normal;
}

/* 表示アニメはそのまま */
#toast{
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease;
}

#toast.show{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================
   スマホ時は canvas 直下に
========================= */
@media (max-width: 768px){

  #topbar #toast{
    position: static;
    transform: none;
    order: 2;

    margin: 10px auto 6px;
    font-size: 18px;
    max-width: 94vw;
  }

  /* canvasWrap の直下に来るように */
  #canvasWrap{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #canvasWrap #toast{
    order: 1;
  }
}

/* =========================
   コメント（canvas直下）
========================= */
#toast{
  margin: 8px auto 12px;
  padding: 12px 18px;
  font-size: 18px;
  font-weight: 900;
  text-align: center;

  max-width: min(92vw, 720px);
  color: var(--text);
  background: rgba(0,0,0,0.7);
  border: 2px solid var(--line);
  border-radius: 16px;

  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}

#toast.show{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   スマホ：STAGE中央揃え
========================= */
@media (max-width: 768px){

  #topbar{
    justify-content: center;
  }

  #topbar .left{
    justify-content: center;
    width: 100%;
  }

  #stageOnly{
    text-align: center;
    font-size: 18px;
  }

}