/* ============================================
   ほいくえん ゲームパック 共通スタイル
   ============================================ */
@font-face {
  font-family: "Hoiku Rounded";
  src: url("../assets/fonts/RoundedMplus1c-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Hoiku Rounded";
  src: url("../assets/fonts/RoundedMplus1c-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Hoiku Rounded";
  src: url("../assets/fonts/RoundedMplus1c-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Hoiku Pop";
  src: url("../assets/fonts/MochiyPopOne-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --pink:   #ff6b9d;
  --blue:   #4dabf7;
  --green:  #51cf66;
  --yellow: #ffd43b;
  --purple: #9775fa;
  --orange: #ff922b;
  --ink:    #4a3f35;
  --paper:  #fffdf5;
  --bar-h:  64px;
  /* 立体ボタン用の濃い色(影・境界線) */
  --pink-d:   #d6336c;
  --blue-d:   #1c7ed6;
  --green-d:  #2f9e44;
  --yellow-d: #e8a805;
  --purple-d: #7048e8;
  --orange-d: #e8590c;
  --red:      #fa5252;
  --red-d:    #c92a2a;
  --gray-d:   #948b7d;
  --cream-d:  #e8cbae;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Hoiku Rounded", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "M PLUS Rounded 1c",
               "Yu Gothic", "Meiryo", system-ui, sans-serif;
  font-weight: 500;
  background: linear-gradient(160deg, #fff6e5 0%, #ffe9f3 50%, #e5f4ff 100%);
  color: var(--ink);
  min-height: 100vh;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---------- ヘッダーバー ---------- */
.bar {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(120,80,40,.12);
  position: sticky;
  top: 0;
  z-index: 20;
}
.bar h1 {
  font-size: 22px;
  margin: 0;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.bar .back {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 54px;
  padding: 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: bold;
  font-size: 17px;
  background: #fff;
  border: 3px solid var(--cream-d);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--cream-d);
  transition: transform .08s, box-shadow .08s;
}
.bar .back:active { transform: translateY(5px); box-shadow: none; }
.bar .back svg { width: 26px; height: 26px; display: block; }
.bar .spacer { display: none; }

.hub-back {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 54px;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  border: 3px solid var(--cream-d);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--cream-d);
  transition: transform .08s, box-shadow .08s;
}
.hub-back svg { width: 26px; height: 26px; display: block; }
.hub-back:active { transform: translateY(5px); box-shadow: none; }

main { padding: 14px; }
/* 左下の固定「もどる」が、長い一覧の最後のカードを覆わないための共通余白。
   全画面ゲーム中は後段の body.fitstage main { padding:0 } を優先する。 */
body:has(.hub-back) > main,
body:has(header.bar .back) > main,
body[data-back-href] > main {
  padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
}

/* ---------- ボタン(立体ボタン:同系色の濃い影+太めの縁取り) ---------- */
.btn {
  --shade: var(--blue-d);
  font-family: inherit;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: var(--blue);
  border: 3px solid var(--shade);
  border-radius: 18px;
  padding: 14px 26px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--shade);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(6px); box-shadow: none; }
.btn.big  { font-size: 28px; padding: 20px 40px; border-radius: 24px; border-width: 4px; box-shadow: 0 8px 0 var(--shade); }
.btn.big:active { transform: translateY(8px); box-shadow: none; }
.btn.pink   { background: var(--pink);   --shade: var(--pink-d); }
.btn.green  { background: var(--green);  --shade: var(--green-d); }
.btn.yellow { background: var(--yellow); --shade: var(--yellow-d); color: #7a5b00; }
.btn.purple { background: var(--purple); --shade: var(--purple-d); }
.btn.orange { background: var(--orange); --shade: var(--orange-d); }
.btn.red    { background: var(--red);    --shade: var(--red-d); }
.btn.gray   { background: #b9b2a8;       --shade: var(--gray-d); }
.btn:disabled { opacity: .45; cursor: default; }
@media (hover: hover) {
  .btn:hover:not(:disabled):not(:active) { transform: translateY(2px); box-shadow: 0 4px 0 var(--shade); }
  .btn.big:hover:not(:disabled):not(:active) { box-shadow: 0 6px 0 var(--shade); }
}

/* ---------- メニュータイル ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: #fff;
  border-radius: 26px;
  padding: 22px 10px 18px;
  text-decoration: none;
  color: var(--ink);
  font-weight: bold;
  font-size: 20px;
  box-shadow: 0 7px 0 var(--cream-d);
  border: 4px solid var(--cream-d);
  transition: transform .08s, box-shadow .08s;
}
.tile:active { transform: translateY(7px); box-shadow: none; }
@media (hover: hover) {
  .tile:hover:not(:active) { transform: translateY(2px); box-shadow: 0 5px 0 var(--cream-d); }
}
.tile .icon { font-size: 56px; line-height: 1; }
.tile img.icon { width: 92px; height: 92px; object-fit: contain; }
.tile.admin { background: #f2ede4; font-size: 16px; }
.tile .badges { font-size: 17px; letter-spacing: 3px; margin-top: 2px; line-height: 1; }
/* タイルの したに そえる 小さい せつめい */
.tile .sub {
  font-size: 14px;
  font-weight: normal;
  color: #8a7a68;
  line-height: 1.4;
  text-align: center;
}
/* 「つくる」の 4つ・「おえかき」の えらび … 1行に よっつ、せまければ ふたつ */
/* トップの ゲーム一覧と 同じ はば(980px)。
   右上の せっていボタンの 右はしと、いちばん右の タイルの 右はしが そろう */
.tiles.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 980px;
}
@media (max-width: 760px) {
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* あたり(なにを かくか)の みほん。
   かみの ひりつは えの なかで あらわすので、はこの 大きさは そろえる */
.tile canvas.guide-thumb { width: 132px; height: 150px; max-width: 100%; }

/* ---------- 4択などの選択ボタン ---------- */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 860px;
  margin: 16px auto;
}
.choice {
  --shade: var(--blue-d);
  font-family: inherit;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  border: 4px solid var(--shade);
  border-radius: 22px;
  padding: 26px 12px;
  cursor: pointer;
  box-shadow: 0 7px 0 var(--shade);
  transition: transform .08s, box-shadow .08s;
}
.choice:active { transform: translateY(7px); box-shadow: none; }
.choice.c0 { background: var(--pink);   --shade: var(--pink-d); }
.choice.c1 { background: var(--blue);   --shade: var(--blue-d); }
.choice.c2 { background: var(--green);  --shade: var(--green-d); }
.choice.c3 { background: var(--orange); --shade: var(--orange-d); }
@media (hover: hover) {
  .choice:hover:not(:active) { transform: translateY(2px); box-shadow: 0 5px 0 var(--shade); }
}
.choice.correct { outline: 6px solid #ffd43b; animation: pulse .5s 2; }
.choice.dim { opacity: .35; }
@keyframes pulse { 50% { transform: scale(1.06); } }

/* ---------- みるモード:えらべない「ただのフレーム」＋ こたえ ---------- */
/* ボタンではないので 白ぬきの ふちどりだけにして、おせそうに 見えないようにする */
.choice.frame {
  background: #fff;
  color: #5b4a36;
  text-align: center;
  border: 5px solid var(--shade);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.choice.frame:active { transform: none; box-shadow: none; }
@media (hover: hover) {
  .choice.frame:hover:not(:active) { transform: none; box-shadow: none; }
}
.choice.frame.correct {
  background: var(--yellow);
  color: #7a5b00;
  border-color: var(--yellow-d);
}

/* おおきく出す こたえ */
.answer-big {
  max-width: 860px;
  margin: 16px auto;
  padding: 18px 24px;
  text-align: center;
  font-size: clamp(34px, 8vw, 68px);
  font-weight: bold;
  line-height: 1.25;
  color: var(--pink);
  background: #fff;
  border: 6px solid var(--yellow);
  border-radius: 28px;
  box-shadow: 0 8px 0 rgba(150,110,70,.18);
  animation: answerPop .45s cubic-bezier(.2,1.4,.5,1);
}
.answer-big .answer-label {
  display: block;
  font-size: 20px;
  color: #8a7a68;
  margin-bottom: 6px;
}
@keyframes answerPop {
  0%   { transform: scale(.5); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- えらんだ 人数(キャラの うえに おおきく) ---------- */
.sel-count {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.1;
  color: var(--green-d);
  margin: 6px 0 12px;
}
.sel-count.few { color: var(--pink-d); }
.sel-count .n {
  font-size: 58px;
  vertical-align: -6px;
  margin-right: 2px;
}
.sel-count .sub {
  display: block;
  font-size: 15px;
  color: #8a7a68;
  margin-top: 2px;
}

/* ---------- ギャラリー(画像えらび) ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-width: 1000px;
  margin: 10px auto;
}
.thumb {
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  border: 4px solid #eee2d0;
  box-shadow: 0 5px 0 var(--cream-d);
  transition: transform .08s, box-shadow .08s;
}
.thumb:active { transform: translateY(5px); box-shadow: none; }
.thumb img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  pointer-events: none;
}
.thumb .name {
  font-weight: bold;
  font-size: 15px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thumb.selected { border-color: var(--pink); background: #fff0f6; }

/* ---------- ステージ(ゲームキャンバス) ---------- */
.stage-wrap {
  display: flex;
  justify-content: center;
  padding: 4px;
}
canvas.stage {
  /* よこ・たてを どちらも auto に して、ひりつは ブラウザに まもらせる。
     width:100% + max-height だと、たてだけ ちぢんで 絵が つぶれる */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--bar-h) - 24px);
  max-height: calc(100dvh - var(--bar-h) - 24px);   /* iPad の ツールバーぶんを のぞく */
  object-fit: contain;                              /* まんいち はこが ずれても つぶさない */
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(120,80,40,.2);
  background: #fff;
  touch-action: none;
  display: block;
}

/* ---------- センターパネル(スタート画面など) ---------- */
.panel {
  background: rgba(255,255,255,.92);
  border-radius: 26px;
  box-shadow: 0 8px 24px rgba(120,80,40,.18);
  max-width: 1040px;
  margin: 20px auto;
  padding: 26px;
  text-align: center;
}
.panel h2 { margin-top: 0; font-size: 26px; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }

/* ---------- 表紙・カテゴリページのロゴと入口 ---------- */
.logo {
  display: block;
  margin: 10px auto 0;
  width: min(500px, 82vw);
  height: auto;
  mix-blend-mode: multiply;   /* 白地をパステル背景になじませる */
}
.logo-home { display: block; width: fit-content; margin: 0 auto; border-radius: 18px; }
.logo-home:focus-visible { outline: 5px solid var(--blue-d); outline-offset: 4px; }
.cover-page main { min-height: 100vh; display: flex; flex-direction: column; }
.cover-page .logo { width: min(560px, 88vw); margin-top: clamp(4px, 2vh, 20px); }
.home-gates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(980px, 100%);
  margin: clamp(10px, 2vh, 24px) auto 24px;
}
.home-gate, .play-gate {
  --gate: #fff;
  --gate-d: var(--cream-d);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  border: 4px solid var(--gate-d);
  border-radius: 28px;
  background: var(--gate);
  color: var(--ink);
  box-shadow: 0 8px 0 var(--gate-d);
  font-size: clamp(27px, 4vw, 38px);
  font-weight: 900;
  text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.home-gate:active, .play-gate:active { transform: translateY(8px); box-shadow: none; }
.gate-icon { width: 52px; height: 52px; flex: none; object-fit: contain; }

.hub-page { max-width: 1100px; margin: 0 auto; }
.hub-page .settings-bar { max-width: 980px; }
.hub-logo { width: min(300px, 58vw); margin: -24px auto 12px; }
.hub-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(760px, 100%);
  margin: 0 auto 24px;
}
.hub-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 18px;
  border: 3px solid var(--cream-d);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--cream-d);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.hub-nav-link::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 1px;
  transform: rotate(-45deg);
  flex: none;
}
.hub-nav-icon { width: 30px; height: 30px; flex: none; object-fit: contain; }
.hub-nav-link:active { transform: translateY(4px); box-shadow: none; }
.hub-nav-link.current { cursor: default; color: #fff; box-shadow: none; transform: none; pointer-events: none; }
.hub-nav-link.create.current { background: var(--pink); border-color: var(--pink-d); }
.hub-nav-link.see.current { background: var(--blue); border-color: var(--blue-d); }
.hub-nav-link.play.current { background: var(--green); border-color: var(--green-d); }
.hub-tiles { align-items: stretch; }
.hub-tiles .tile { min-height: 174px; justify-content: center; }
.section-links {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  width: min(980px, 100%);
  margin: 28px auto 10px;
}
.section-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  padding: 12px 18px;
  border: 3px solid var(--cream-d);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--cream-d);
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}
.section-link svg { width: 22px; height: 22px; flex: none; }
.section-link:active { transform: translateY(4px); box-shadow: none; }
.section-link.next { margin-left: auto; }

.view-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 980px; }
.view-tiles .tile { min-height: 174px; justify-content: center; }
.view-tiles .meet-tile {
  background: var(--yellow);
  border-color: var(--yellow-d);
  box-shadow: 0 7px 0 var(--yellow-d);
  color: #6b5100;
}

.play-gates { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(760px, 100%); margin: 0 auto; }
.play-gate { position: relative; min-height: 132px; padding-inline: 54px; font-size: clamp(24px, 4vw, 34px); }
.play-gate::after {
  content: "";
  position: absolute;
  right: 28px;
  width: 15px;
  height: 15px;
  border-right: 5px solid currentColor;
  border-bottom: 5px solid currentColor;
  transform: rotate(-45deg);
  border-radius: 2px;
}
.play-list-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(980px, 100%);
  margin: 0 auto 16px;
}
.play-list-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 4vw, 34px);
}
.play-list-title img { width: 44px; height: 44px; object-fit: contain; }
.play-list-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 980px; }
.play-list-tiles .tile { min-height: 170px; justify-content: center; }

@media (hover: hover) {
  .home-gate:hover:not(:active), .play-gate:hover:not(:active) { transform: translateY(2px); box-shadow: 0 6px 0 var(--gate-d); }
  .hub-nav-link:not(.current):hover:not(:active) { transform: translateY(2px); box-shadow: 0 2px 0 var(--cream-d); }
  .section-link:hover:not(:active) { transform: translateY(2px); box-shadow: 0 2px 0 var(--cream-d); }
}
@media (max-width: 860px) {
  .view-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .play-list-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-gates { grid-template-columns: 1fr; gap: 13px; }
  .home-gate { min-height: 78px; }
  .gate-icon { width: 44px; height: 44px; }
  .hub-logo { margin-top: -20px; }
  .hub-nav { gap: 8px; margin-bottom: 18px; }
  .hub-nav-link { min-height: 50px; padding: 8px; gap: 7px; font-size: 16px; border-radius: 15px; }
  .hub-nav-icon { width: 25px; height: 25px; }
  .hub-nav-link::after { width: 8px; height: 8px; border-width: 0 3px 3px 0; }
  .view-tiles, .play-list-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-tiles .tile { font-size: 17px; }
  .play-gates { gap: 13px; }
  .play-gate { min-height: 104px; padding: 12px 42px 12px 16px; }
  .play-gate::after { right: 20px; width: 13px; height: 13px; border-width: 0 4px 4px 0; }
  .section-link { min-width: 0; flex: 1 1 0; padding-inline: 12px; font-size: 16px; }
  .play-list-title { font-size: 22px; }
  .play-list-title img { width: 38px; height: 38px; }
}
@media (max-width: 520px) {
  .play-gates { grid-template-columns: 1fr; gap: 12px; width: 100%; }
  .play-gate {
    width: 100%;
    min-height: 82px;
    padding: 12px 54px 12px 24px;
    font-size: clamp(24px, 7vw, 30px);
    white-space: nowrap;
  }
}
.subtitle { text-align: center; margin: 0 0 20px; color: #8a7a68; font-weight: bold; }

/* 設定ボタン(おとなのひと用)。
   フローティングにせず、ゲーム一覧と同じ幅(980px・中央寄せ)のバーの中で右端に置き、
   1行目の右端のタイルと 右はしを そろえる。 */
.settings-bar {
  width: min(980px, 100%);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
.settings-fab {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: #fff;
  border: 3px solid var(--cream-d);
  border-radius: 50%;
  overflow: hidden;                /* 白背景のはみ出しを防ぐ */
  box-shadow: 0 4px 0 var(--cream-d);
  transition: transform .08s, box-shadow .08s;
}
.settings-fab img { width: 82%; height: 82%; object-fit: contain; }
.settings-fab:active { transform: translateY(4px); box-shadow: none; }
@media (hover: hover) {
  .settings-fab:hover:not(:active) { transform: translateY(2px); box-shadow: 0 2px 0 var(--cream-d); }
}

/* ---------- トップの タブ(つくる → みる → あそぶ / ゲーム別) ---------- */
.tabbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 980px;
  margin: 4px auto 10px;
}
/* つくる › [みる][ひとりで][ふたりで][みんなで]。ちいさい がめんでは おりかえす */
.tabflow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.tab {
  font-family: inherit;
  font-size: 19px;
  font-weight: bold;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--cream-d);
  border-radius: 999px;
  padding: 10px 22px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--cream-d);
  transition: transform .08s, box-shadow .08s, background .12s, color .12s;
}
.tab:active { transform: translateY(4px); box-shadow: none; }
@media (hover: hover) {
  .tab:hover:not(:active) { transform: translateY(2px); box-shadow: 0 2px 0 var(--cream-d); }
}
.tab.on {
  background: var(--pink);
  border-color: var(--pink-d);
  color: #fff;
  box-shadow: 0 4px 0 var(--pink-d);
}
/* つくる と そのさきを つなぐ やじるし */
.tab-arrow { display: flex; align-items: center; color: #d3b189; }
.tab-arrow svg { width: 15px; height: 15px; display: block; }
/* ながれ と「ゲーム別」の くぎり */
.tab-div { width: 3px; height: 28px; border-radius: 2px; background: var(--cream-d); margin: 0 4px; }
/* うんどうかい タブ(ゲーム別の ひだり・すこし めだつ色) */
.tab.tab-undoukai {
  background: var(--yellow);
  border-color: var(--yellow-d);
  color: #7a5b00;
  box-shadow: 0 4px 0 var(--yellow-d);
}

.collection-page { background: #f5f0e8; }
.collection-main { max-width: 1180px; margin: 0 auto; }
.collection-lead { margin: 8px 0 20px; text-align: center; color: #746653; font-size: 20px; font-weight: bold; }
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px;
  align-items: stretch;
}
.collection-card {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.collection-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  padding: 15px;
  background: #fff;
  border: 9px solid #e2b14d;
  box-shadow: 0 8px 0 #ba8330, 0 14px 24px rgba(87,59,27,.16);
  transition: transform .12s, box-shadow .12s;
}
.collection-card.char:nth-child(3n+2) .collection-frame { border-color: #e988a9; box-shadow: 0 8px 0 #c2597d, 0 14px 24px rgba(87,59,27,.16); }
.collection-card.char:nth-child(3n) .collection-frame { border-color: #68b9df; box-shadow: 0 8px 0 #3485ad, 0 14px 24px rgba(87,59,27,.16); }
.collection-card.bg .collection-frame { border-color: #ae7a42; box-shadow: 0 8px 0 #79502a, 0 14px 24px rgba(87,59,27,.18); }
.collection-frame img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.collection-card.bg .collection-frame img { object-fit: cover; }
.collection-caption { display: block; min-width: 0; padding: 14px 4px 0; text-align: center; }
.collection-caption strong { display: block; font-size: 19px; }
.marquee-viewport {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-text { display: inline-block; min-width: max-content; }
.marquee-viewport:not(.is-overflowing) .marquee-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.collection-caption small { display: block; margin-top: 5px; color: #786b5a; font-size: 14px; }
.collection-card:active .collection-frame { transform: translateY(8px); box-shadow: 0 0 0 transparent; }
.collection-card:focus-visible, .character-stage:focus-visible, .exhibit button:focus-visible { outline: 5px solid #1864ab; outline-offset: 4px; }
@media (hover:hover) {
  .collection-card:hover .collection-frame { transform: translateY(-4px) rotate(-.6deg); }
}
.collection-empty {
  max-width: 650px;
  margin: 60px auto;
  padding: 38px;
  border: 4px dashed #cbbba7;
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  text-align: center;
  font-size: 20px;
  line-height: 1.8;
}

.exhibit { max-width: 1040px; margin: 0 auto; }
.exhibit-heading {
  display: grid;
  grid-template-columns: 150px 1fr 90px;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  text-align: center;
}
.exhibit-heading h2 { margin: 0; font-size: clamp(26px, 5vw, 42px); }
.exhibit-heading p { min-height: 22px; margin: 3px 0 0; color: #756958; font-weight: bold; }
.exhibit-back, .work-pager button, .motion-btn, .voice-btn {
  font: inherit;
  font-weight: bold;
  color: var(--ink);
  background: #fff;
  border: 3px solid #ccbca6;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 4px 0 #ccbca6;
  cursor: pointer;
}
.exhibit-back:active, .work-pager button:active, .motion-btn:active, .voice-btn:active { transform: translateY(4px); box-shadow: none; }
.exhibit-count { justify-self: end; padding: 7px 12px; border-radius: 999px; background: #e7dfd2; font-weight: bold; }
.character-exhibit { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; }
.character-stage {
  position: relative;
  grid-row: span 4;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 8px solid #f0c960;
  border-radius: 36px 36px 16px 16px;
  background: radial-gradient(circle at 50% 62%, #fff 0 18%, #fff8d7 50%, #dff2ff 100%);
  box-shadow: 0 9px 0 #c7942e, 0 18px 30px rgba(92,64,28,.18);
  cursor: pointer;
}
.character-stage canvas { display: block; width: 100%; height: auto; }
.tap-invite {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  font-weight: bold;
  white-space: nowrap;
}
.reaction-label { align-self: end; padding: 13px; border-radius: 18px; background: #fff; text-align: center; font-size: 21px; font-weight: bold; }
.control-group { padding: 15px; border-radius: 22px; background: rgba(255,255,255,.82); }
.control-group h3 { margin: 0 0 11px; font-size: 18px; }
.exhibit-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.motion-btn, .voice-btn { padding: 11px 8px; border-color: #9ed0ea; box-shadow: 0 4px 0 #6baaca; font-size: 16px; }
.voice-btn { border-color: #e6a4bd; box-shadow: 0 4px 0 #c86d90; }
.control-note { margin: 4px 0 0; color: #7b6e5d; text-align: center; font-size: 14px; }
.museum-wall {
  min-height: 570px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent 49.8%, rgba(120,90,60,.06) 50%, transparent 50.2%), #eee7da;
  box-shadow: inset 0 14px 30px rgba(91,68,40,.08);
}
.museum-wall img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border: 14px solid #9b693b;
  outline: 6px solid #d1a86a;
  box-shadow: 0 16px 28px rgba(55,37,20,.27);
  background: #fff;
}
.work-pager { display: flex; justify-content: space-between; gap: 14px; margin: 22px 0 6px; }

.import-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  max-width: 720px;
  margin: 14px 0;
  padding: 15px;
  border-radius: 18px;
  background: #fff8dc;
  border: 2px solid #edd593;
}
.import-meta label { display: grid; gap: 5px; font-weight: bold; }
.import-meta small { font-weight: normal; }
.import-meta .note { grid-column: 1 / -1; margin: 0; }

@media (max-width: 760px) {
  .collection-page .bar h1 { font-size: 18px; }
  .collection-page .bar .spacer { width: 42px; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .collection-frame { height: 165px; border-width: 7px; }
  .exhibit-heading { grid-template-columns: auto 1fr; }
  .exhibit-heading .exhibit-count { grid-column: 2; grid-row: 2; justify-self: center; }
  .character-exhibit { grid-template-columns: 1fr; }
  .character-stage { grid-row: auto; }
  .reaction-label { order: 2; }
  .control-group { order: 3; }
  .museum-wall { min-height: 360px; padding: 28px 20px; }
  .museum-wall img { max-height: 330px; border-width: 9px; }
  .import-meta { grid-template-columns: 1fr; }
  .import-meta .note { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-frame, .collection-card, .character-stage, .exhibit button { transition: none !important; }
}
@media (hover: hover) {
  .tab.tab-undoukai:hover:not(:active) { box-shadow: 0 2px 0 var(--yellow-d); }
}
@media (max-width: 620px) {
  .tab { font-size: 17px; padding: 9px 15px; }
  .tabflow { gap: 4px; }
  .tab-div { display: none; }
}

/* ---------- ぜんがめん ボタン(みぎうえに ちいさく) ---------- */
.fs-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  border: 3px solid var(--cream-d);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--cream-d);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.fs-btn svg { width: 22px; height: 22px; display: block; }
.fs-btn:active { transform: translateY(4px); box-shadow: none; }
@media (hover: hover) {
  .fs-btn:hover:not(:active) { transform: translateY(2px); box-shadow: 0 2px 0 var(--cream-d); }
}
/* フローティング版(ゲームのページ):もどるボタンの はんたいがわ */
.fs-btn.float {
  position: fixed;
  top: 8px;
  right: calc(-14px + env(safe-area-inset-right, 0px));
  z-index: 95;              /* キャラえらび がめんの うえにも のこす */
  width: 58px;
  padding-right: 14px;
  border-radius: 999px;
  transition: transform .12s, box-shadow .08s, background .12s;
}
@media (hover: hover) {
  .fs-btn.float:hover:not(:active) { transform: translateX(-10px); background: #fff; box-shadow: 0 2px 0 var(--cream-d); }
}
/* メニューでは せっていボタンと よこに ならべる */
.settings-bar { gap: 10px; align-items: center; }

/* ---------- キャラえらび せんよう がめん(あそびかたを えらんだ あとに でる) ---------- */
.picker {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;   /* 古いブラウザ用に inset を展開して書く */
  inset: 0;
  z-index: 80;
  overflow: auto;
  padding: 10px;
  background: linear-gradient(160deg, #fff6e5 0%, #ffe9f3 50%, #e5f4ff 100%);
  animation: pickerIn .16s ease-out;
}
.picker .panel { max-width: 1040px; margin: 12px auto; }
.picker-back {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 54px;
  padding: 0;
  color: var(--ink);
  background: rgba(255,255,255,.94);
  border: 3px solid var(--cream-d);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--cream-d);
  cursor: pointer;
}
.picker-back svg { width: 26px; height: 26px; display: block; }
.picker-back:active { transform: translateY(5px); box-shadow: none; }
.thumb { position: relative; }
.pick-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  min-width: 42px;
  padding: 4px 8px 5px;
  color: #fff;
  background: var(--pink-d);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(74,63,53,.2);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.pick-badge.p2 { background: var(--blue-d); }
@keyframes pickerIn { from { opacity: 0; transform: translateY(16px); } }

/* ---------- モードのカテゴリ(🌈ゆるふわ/🔥ガチンコ) ---------- */
.mode-sec { margin: 16px 0 4px; font-size: 19px; font-weight: bold; }
.mode-sec .tag { font-size: 13px; color: #8a7a68; font-weight: normal; margin-left: 8px; }
.btn.sel { outline: 4px solid #fff; box-shadow: 0 0 0 4px var(--pink), 0 6px 0 var(--shade); }
.rank { font-size: 15px; color: #6a5c4c; margin: 10px 0 0; line-height: 1.5; }

/* ---------- ランキング(大きな表彰台 + 難易度スワイプ) ---------- */
.rank-open { margin-top: 16px; background: #fff; color: #765400; --shade: var(--yellow-d); border-color: var(--yellow-d); }
.rank-dialog {
  width: min(960px, 96vw);
  min-height: min(650px, 88vh);
  padding: 18px 22px 22px;
  overflow: hidden !important;
  background: linear-gradient(180deg, #fffdf5 0%, #fff6cf 100%);
  border: 6px solid var(--yellow);
}
.rank-head { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; gap: 10px; }
.rank-head h2 { grid-column: 2; margin: 0; font-size: clamp(30px, 5vw, 48px); color: #765400; }
.rank-close {
  grid-column: 3; width: 52px; height: 52px; padding: 0; border: 3px solid var(--cream-d);
  border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--cream-d);
  font-family: inherit; font-size: 30px; font-weight: 900; line-height: 1; cursor: pointer;
}
.rank-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px auto 8px; max-width: 760px; }
.rank-tab {
  min-width: 0; padding: 12px 8px; border: 4px solid var(--shade); border-radius: 18px;
  background: #fff; color: var(--ink); box-shadow: 0 5px 0 var(--shade);
  font-family: inherit; font-size: 20px; font-weight: 900; line-height: 1.1; cursor: pointer;
}
.rank-tab:nth-child(1) { --shade: var(--green-d); }
.rank-tab:nth-child(2) { --shade: var(--orange-d); }
.rank-tab:nth-child(3) { --shade: var(--purple-d); }
.rank-tab.active { color: #fff; transform: translateY(5px); box-shadow: none; }
.rank-tab:nth-child(1).active { background: var(--green); }
.rank-tab:nth-child(2).active { background: var(--orange); }
.rank-tab:nth-child(3).active { background: var(--purple); }
.rank-body { min-height: 430px; padding: 8px 8px 0; touch-action: pan-y; }
.rank-podium {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end;
  gap: clamp(8px, 2vw, 20px); max-width: 720px; height: 320px; margin: 0 auto;
}
.rank-place { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.rank-player {
  position: relative; min-height: 156px; display: grid; place-items: center; align-content: end; gap: 3px;
  width: 100%; padding: 4px; border: 0; background: transparent; color: var(--ink); font-family: inherit; cursor: pointer;
}
.rank-avatar { width: min(100%, 132px); height: 116px; object-fit: contain; filter: drop-shadow(0 5px 3px rgba(80,50,10,.18)); }
.rank-place.p1 .rank-avatar { width: min(100%, 148px); height: 130px; }
.rank-avatar-fallback { display: grid; place-content: center; font-size: clamp(48px, 8vw, 76px); filter: none; }
.rank-name {
  position: absolute; z-index: 2; top: 0; left: 50%; max-width: calc(100% - 4px); padding: 6px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 3px solid #ead9b1; border-radius: 999px;
  background: #fffdf6; box-shadow: 0 4px 0 rgba(128,90,25,.2); font-size: clamp(16px, 2.4vw, 23px);
  opacity: 0; transform: translate(-50%, -5px) scale(.9); transition: opacity .16s, transform .16s; pointer-events: none;
}
.rank-player.show-name .rank-name { opacity: 1; transform: translate(-50%, 0) scale(1); }
.rank-player.react img.rank-avatar,
.rank-player.react .rank-avatar-fallback { animation: rank-avatar-pop .72s cubic-bezier(.2,1.25,.4,1); }
@keyframes rank-avatar-pop {
  0%, 100% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(-18px) rotate(-5deg); }
  68% { transform: translateY(-5px) rotate(5deg); }
}
.rank-player:focus-visible { outline: 4px solid var(--orange); outline-offset: 2px; border-radius: 18px; }
.rank-score { font-size: clamp(17px, 2.5vw, 24px); font-weight: 900; color: #7b5b17; }
.rank-step {
  display: grid; place-content: center; min-height: var(--height); border: 5px solid var(--edge);
  border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--metal);
  box-shadow: inset 0 7px 0 rgba(255,255,255,.42); font-size: clamp(54px, 9vw, 86px); font-weight: 1000; color: #fff;
  text-shadow: 0 5px 0 rgba(80,50,10,.22);
}
.rank-place.p1 { --height: 150px; --metal: #ffd43b; --edge: #d69e00; grid-column: 2; grid-row: 1; }
.rank-place.p2 { --height: 110px; --metal: #bfc8d2; --edge: #8994a0; grid-column: 1; grid-row: 1; }
.rank-place.p3 { --height: 84px; --metal: #d7955d; --edge: #a86132; grid-column: 3; grid-row: 1; }
.rank-place.empty .rank-player { opacity: .35; }
.rank-place.empty .rank-step { filter: saturate(.35); }
.rank-rest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 720px; margin: 12px auto 0; }
.rank-rest-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; background: #fff; border: 3px solid #ead9b1; font-size: 19px; font-weight: 900; }
.rank-rest-row .num { font-size: 26px; color: #9a7040; }
.rank-swipe-dots { display: flex; justify-content: center; gap: 9px; margin-top: 12px; }
.rank-swipe-dots i { width: 11px; height: 11px; border-radius: 50%; background: #d8c8aa; }
.rank-swipe-dots i.active { width: 28px; border-radius: 999px; background: var(--orange); }

@media (orientation: landscape) and (min-width: 720px) {
  #gachiRow { flex-wrap: nowrap; }
  #gachiRow .btn.big { flex: 1 1 0; min-width: 0; padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 600px) {
  .rank-dialog { min-height: min(670px, 94vh); padding: 13px 10px 16px; }
  .rank-head { grid-template-columns: 48px 1fr 48px; }
  .rank-close { width: 44px; height: 44px; font-size: 25px; }
  .rank-tab { font-size: 16px; padding: 10px 3px; }
  .rank-body { min-height: 410px; padding-left: 0; padding-right: 0; }
  .rank-podium { height: 300px; gap: 5px; }
  .rank-player { min-height: 142px; padding: 2px; }
  .rank-avatar { height: 98px; }
  .rank-place.p1 .rank-avatar { height: 110px; }
  .rank-name { padding: 5px 8px; border-width: 2px; font-size: 15px; }
  .rank-score { font-size: 15px; }
  .rank-place.p1 { --height: 138px; }
  .rank-place.p2 { --height: 102px; }
  .rank-place.p3 { --height: 78px; }
  .rank-step { border-width: 4px; font-size: 52px; }
  .rank-rest { grid-template-columns: 1fr; gap: 6px; }
  .rank-rest-row { padding: 8px 12px; font-size: 16px; }
}

/* ---------- モーダル ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(60,40,20,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 12px;
}
.modal .panel { margin: 0; max-height: 92vh; overflow: auto; overscroll-behavior: contain; }
.has-modal-x { position: relative; }
.modal-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid var(--cream-d);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--cream-d);
  font: 900 28px/1 "Hoiku Rounded", sans-serif;
  cursor: pointer;
}
.modal-x:active { transform: translateY(4px); box-shadow: none; }
.has-modal-x > h2:first-of-type { padding-inline: 46px; }

/* ---------- おおきなメッセージ ---------- */
.bigmsg {
  position: fixed;
  left: 50%;
  top: 45%;
  width: max-content;
  max-width: min(90vw, 760px);
  transform: translate(-50%, -50%) scale(.88);
  opacity: 0;
  font-family: "Hoiku Pop", "Hoiku Rounded", sans-serif;
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  color: var(--pink);
  -webkit-text-stroke: 1px rgba(255,253,245,.95);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(74,63,53,.18);
  z-index: 90;
  pointer-events: none;
  animation: bigpop .22s ease-out forwards;
  white-space: normal;
}
.bigmsg.impact { font-size: clamp(60px, 12vw, 96px); }
@keyframes bigpop { to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
/* おおきい メッセージの 2行目(クリアタイムなどを さりげなく) */
.bigmsg-sub {
  font-family: "Hoiku Rounded", sans-serif;
  font-size: .38em;
  font-weight: 700;
  color: #8a7a68;
  -webkit-text-stroke: 0;
  text-shadow: none;
  margin-top: .12em;
}
.bigmsg.out { animation: bigout .22s ease-in forwards; }
@keyframes bigout { to { opacity: 0; transform: translate(-50%,-53%) scale(1.05); } }

/* 消える演出とは分けて、結果の数値をボタンのそばへ残す。 */
.game-result {
  flex: 1 0 100%;
  width: min(560px, 100%);
  margin: 4px auto 10px;
  padding: 13px 20px 15px;
  color: var(--ink);
  background: rgba(255,253,245,.94);
  border: 3px solid var(--cream-d);
  border-radius: 20px;
  text-align: center;
  line-height: 1.35;
}
.game-result .result-title { font-size: clamp(23px, 4vw, 32px); font-weight: 800; }
.game-result .result-metric { margin-top: 3px; font-size: clamp(27px, 5vw, 40px); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .bigmsg, .bigmsg.out { animation-duration: .01ms; }
}

/* ---------- タッチ操作ボタン(よこスクロール用) ---------- */
.touchpad {
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
  z-index: 30;
  pointer-events: none;
}
.touchpad .grp { display: flex; gap: 14px; pointer-events: auto; }
.tbtn {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid var(--cream-d);
  font-size: 38px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 5px 0 var(--cream-d);
  cursor: pointer;
  touch-action: none;
}
.tbtn:active { background: var(--yellow); border-color: var(--yellow-d); transform: translateY(5px); box-shadow: none; }

/* ---------- スコアなどの表示 ---------- */
.hud {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0;
}
.hud span { background: #fff; border-radius: 999px; padding: 6px 20px; box-shadow: 0 3px 0 rgba(150,110,70,.15); }

.hidden { display: none !important; }

.note { color: #8a7a68; font-size: 14px; }

/* ---------- カードあわせ ---------- */
.cardgrid {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin: 10px auto;
  perspective: 900px;
}
.card {
  position: relative;
  aspect-ratio: 3/4;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .35s;
}
.card.flipped { transform: rotateY(180deg); }
.card .face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 rgba(150,110,70,.2);
}
.card .front {
  background: repeating-linear-gradient(45deg, var(--blue), var(--blue) 14px, #74c0fc 14px, #74c0fc 28px);
  font-size: 40px;
  color: #fff;
}
.card .backface {
  background: #fff;
  transform: rotateY(180deg);
  padding: 6px;
}
.card .backface img { max-width: 100%; max-height: 100%; object-fit: contain; }
.card.matched { animation: matched .5s; }
.card.matched .backface { outline: 5px solid var(--yellow); }
@keyframes matched { 50% { transform: rotateY(180deg) scale(1.12); } }

/* ---------- つくる画面 ---------- */
.make-sec {
  max-width: 1000px;
  margin: 0 auto 26px;
  background: rgba(255,255,255,.92);
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(120,80,40,.14);
  padding: 16px 18px 20px;
}
.make-sec h2 { font-size: 24px; margin: 4px 0 10px; }
.make-sec h3 {
  font-size: 18px;
  margin: 16px 0 6px;
  border-bottom: 3px dashed var(--cream-d);
  padding-bottom: 5px;
}
.make-tag { font-size: 13px; color: #8a7a68; font-weight: normal; margin-left: 10px; }
/* リストの さいごの ＋ボタン */
.add-row {
  font-family: inherit;
  font-size: 17px;
  font-weight: bold;
  color: #7a6a58;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffdf5;
  border: 3px dashed var(--cream-d);
  border-radius: 14px;
  padding: 14px 12px;
  margin: 8px 0;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.add-row .add-mark {
  font-size: 24px;
  line-height: 1;
  color: var(--pink);
}
.add-row:active { background: #fff0f6; border-color: var(--pink); }
@media (hover: hover) {
  .add-row:hover { background: #fff0f6; border-color: var(--pink); }
}

/* ---------- 説明の iボタン と 箇条書き ---------- */
.info-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  background: var(--blue);
  border: 2px solid var(--blue-d);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 3px 0 var(--blue-d);
}
.info-btn:active { transform: translateY(3px); box-shadow: none; }
.info-list { margin: 4px 0 14px; padding-left: 22px; line-height: 1.7; font-size: 15px; }
.info-list li { margin-bottom: 4px; }
.modal .panel h3 { font-size: 17px; margin: 12px 0 2px; border-bottom: 2px dashed var(--cream-d); padding-bottom: 4px; }

/* ---------- エディタ(うごき・スポット・ふくわらい・きりだし) ---------- */
.edit-canvas {
  border-radius: 12px;
  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 24px 24px;
  touch-action: none;
  max-width: 100%;
}
.rig-flex { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: nowrap; min-height: 0; flex: 1; }
.rig-types { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 12px; }
.rig-types .btn { opacity: .55; }
.rig-types .btn.active { opacity: 1; outline: 3px solid #212529; transform: translateY(1px); }

body:has(.modal:not(.hidden)) { overflow: hidden; }
.editor-modal { padding: 12px; }
.editor-panel { width: min(1180px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px) !important; margin: 0 !important; padding: 18px; }
.editor-panel > h2 { margin-bottom: 6px; font-size: 22px; }
.editor-panel > .note { margin: 4px auto 8px; font-size: 14px; line-height: 1.45; }
.editor-panel > .row { margin: 8px 0; }
.editor-panel > .row .btn { padding: 10px 16px; font-size: 16px; }
.spot-panel canvas { max-height: calc(100dvh - 300px); }
.fuku-panel, .crop-panel { width: min(920px, calc(100vw - 24px)); }
.fuku-panel canvas, .crop-panel canvas { max-height: calc(100dvh - 250px); width: auto; }
.crop-photo-tools { margin-bottom: 5px !important; }
.crop-photo-tools .btn.active { outline: 3px solid #8bc9f0; outline-offset: 2px; }
.crop-adjust {
  width: min(720px, 100%);
  margin: 4px auto 10px;
  padding: 10px 14px 13px;
  border: 3px solid #8bc9f0;
  border-radius: 18px;
  background: #eff9ff;
}
.crop-adjust-actions { margin: 0 0 9px !important; }
.crop-adjust-actions .btn { padding: 8px 13px !important; font-size: 14px !important; }
.crop-adjust-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; text-align: left; }
.crop-adjust-sliders label {
  display: grid;
  grid-template-columns: 8em minmax(100px, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: bold;
}
.crop-adjust-sliders input[type="range"] { width: 100%; accent-color: var(--blue-d); }
.crop-save-tools { margin-top: 5px !important; }
.voice-panel { width: min(820px, calc(100vw - 24px)); }
.rig-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: min(1180px, calc(100vw - 24px)); height: min(780px, calc(100dvh - 24px)); max-width: none; overflow: hidden !important; padding: 16px; }
.rig-workspace { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(300px, 1fr) minmax(330px, .9fr); gap: 16px; min-height: 0; }
.rig-visual { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 4px; }
.rig-visual .rig-types { flex: none; margin: 0 0 10px; }
.rig-visual .rig-types .btn { padding: 9px 12px; font-size: 14px; border-width: 2px; box-shadow: 0 3px 0 var(--shade); }
.rig-visual .edit-canvas { max-height: 100%; }
.rig-preview-wrap { display: grid; grid-template-rows: auto minmax(0, 1fr); place-items: center; align-content: center; gap: 6px; min-width: 0; min-height: 0; padding: 4px; }
.rig-preview-wrap p { margin: 0; }
.rig-preview-wrap canvas { max-width: 100%; max-height: 100%; background: #e7f5ff; border-radius: 12px; }
.rig-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.rig-side .advanced-settings { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; }
.rig-side .advanced-settings:not(.open) { flex: 0 0 auto; }
/* ひらいている あいだは、のこりの たかさを ぜんぶ つかって そのなかで スクロールする */
.rig-advanced-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.rig-actions { flex: none; justify-content: center; margin: 0; padding-top: 10px; }
.rig-actions .btn { padding: 11px 18px; font-size: 17px; }
.trim-block { display: flex; align-items: center; gap: 10px; padding-block: 10px; }
.trim-block .btn { flex: none; padding: 9px 13px; font-size: 15px; border-width: 2px; box-shadow: 0 3px 0 var(--shade); }
.trim-block .note { margin: 0; }

/* 動き設定の高度な調整。閉じている間は従来と同じ簡単な画面だけを見せる。 */
.advanced-settings {
  max-width: 720px;
  margin: 18px auto 4px;
  border: 3px solid #e3b341;
  border-radius: 18px;
  background: #fffaf0;
  overflow: hidden;
  text-align: left;
}
.advanced-title {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  flex: none;
  font-family: inherit;
  text-align: left;
  border: 0;
  cursor: pointer;
  padding: 15px 18px;
  font-size: 19px;
  font-weight: bold;
  color: #725000;
  background: #fff1bd;
}
.advanced-title::before { content: "▶"; font-size: 13px; transition: transform .15s; }
.advanced-settings.open > .advanced-title { border-bottom: 3px solid #e3b341; }
.advanced-settings.open > .advanced-title::before { transform: rotate(90deg); }
.rig-flip-row { margin: 0 0 12px; }
.rig-flip-row .btn { padding: 9px 14px; font-size: 15px; border-width: 2px; box-shadow: 0 3px 0 var(--shade); }
.advanced-block { padding: 14px 18px 18px; }
.advanced-block + .advanced-block { border-top: 3px dashed #e5d2aa; }
.advanced-block h3 { margin-top: 0 !important; }
.cutout-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.cutout-mode .radio-row { align-items: flex-start; font-size: 16px; }
.cutout-mode .radio-row span { display: grid; gap: 3px; }
.cutout-mode .radio-row small { color: #7f705e; font-weight: normal; line-height: 1.35; }
.advanced-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.advanced-sliders label, .cutout-tools label { display: grid; gap: 5px; font-size: 15px; font-weight: bold; }
.advanced-sliders output { color: var(--orange-d); }
.advanced-settings input[type="range"] { width: 100%; accent-color: var(--orange); }
.cutout-canvas { display: block; margin: 8px auto 12px; border: 3px solid #cbbda8; }
.cutout-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.cutout-tools .btn { padding: 9px 13px; font-size: 14px; border-width: 2px; box-shadow: 0 3px 0 var(--shade); }
.cutout-tools .btn.active { outline: 4px solid #212529; outline-offset: 2px; }
.cutout-tools label { min-width: 150px; }
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 3px solid #d8c7aa;
  border-radius: 14px;
  background: #fff;
  font-weight: bold;
  cursor: pointer;
}
.toggle-row input { width: 24px; height: 24px; accent-color: var(--purple); }
@media (max-width: 620px) {
  .cutout-mode, .advanced-sliders { grid-template-columns: 1fr; }
  .advanced-block { padding: 12px; }
}
@media (max-width: 900px), (orientation: portrait) {
  .rig-panel { height: calc(100dvh - 20px); overflow: auto !important; padding: 12px; }
  .rig-workspace { grid-template-columns: minmax(150px, .65fr) minmax(260px, 1fr); height: auto; }
  .rig-side { grid-column: 1 / -1; }
  .rig-visual { min-height: min(520px, 47dvh); }
  .rig-side .advanced-settings { max-height: 48dvh; }
  .rig-flex { align-items: center; }
  .rig-actions { position: sticky; bottom: 0; z-index: 2; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.96); }
}
@media (max-width: 620px) {
  .editor-modal { padding: 6px; }
  .editor-panel { width: calc(100vw - 12px); max-height: calc(100dvh - 12px) !important; padding: 12px; border-radius: 18px; }
  .rig-panel { display: block; height: calc(100dvh - 12px); }
  .rig-workspace { grid-template-columns: minmax(105px, .45fr) minmax(190px, 1fr); }
  .rig-visual .rig-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rig-visual .rig-types .btn { padding: 7px 5px; font-size: 12px; }
  .rig-flex { gap: 8px; }
  .rig-preview-wrap { max-width: none; }
  .crop-panel canvas { max-height: calc(100dvh - 310px); }
  .crop-adjust { padding: 9px 10px 11px; }
  .crop-adjust-sliders { grid-template-columns: 1fr; gap: 7px; }
  .crop-adjust-sliders label { grid-template-columns: 7.5em minmax(90px, 1fr); font-size: 14px; }
}
/* よこ画面で たかさが たりない ときは、3れつを たてに つみ、
   パネルぜんたいを 1つの スクロールに する(高度な設定の 下が 切れないように) */
@media (orientation: landscape) and (max-height: 560px) {
  .rig-panel { display: block; height: calc(100dvh - 20px); overflow: auto !important; }
  .rig-workspace { height: auto; }
  .rig-visual { min-height: 230px; }
  .rig-side .advanced-settings { max-height: none; }
}

/* ---------- ダイアログの ラジオ・メニュー ---------- */
.radio-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: bold;
  background: #fff;
  border: 3px solid var(--cream-d);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
}
.radio-row input { width: 22px; height: 22px; accent-color: var(--pink); }
.radio-row:has(input:checked) { border-color: var(--pink); background: #fff0f6; }
.menu-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.menu-list .btn { font-size: 22px; padding: 16px 20px; }

/* ---------- 管理画面 ---------- */
.admin-list { max-width: 1000px; margin: 0 auto; }
.import-actions { margin: 0 0 14px; padding: 18px; }
.import-actions .row { margin: 0; align-items: center; }
.create-import-view .import-actions {
  padding: 4px 0 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.create-import-view .import-actions .row { flex-wrap: wrap; }
.create-import-view .import-actions .btn { flex: 1 1 180px; font-size: 20px; }
.import-category-help {
  margin: 2px auto 12px;
  color: #6f604f;
  font-size: clamp(17px, 2.7vw, 20px);
  font-weight: 800;
  text-align: center;
}
.import-actions .info-btn { flex: none; width: 34px; height: 34px; margin: 0 0 0 2px; font-size: 18px; }
.admin-cat-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 10px;
}
.admin-cat-tabs button {
  --cat-edge: var(--cream-d);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 8px;
  border: 4px solid var(--cat-edge);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 0 var(--cat-edge);
  font-family: inherit;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
}
.admin-cat-tabs button .tab-copy { display: grid; gap: 2px; min-width: 0; text-align: left; }
.admin-cat-tabs button .tab-copy b { font-size: 17px; line-height: 1.1; }
.admin-cat-tabs button .tab-copy small { max-width: 210px; font-size: 11px; font-weight: 700; line-height: 1.25; opacity: .72; }
.admin-cat-tabs button[data-cat="src"] { --cat-edge: #8a7a68; }
.admin-cat-tabs button[data-cat="char"] { --cat-edge: var(--green-d); }
.admin-cat-tabs button[data-cat="fuku"] { --cat-edge: var(--pink-d); }
.admin-cat-tabs button[data-cat="bg"] { --cat-edge: var(--blue-d); }
.admin-cat-tabs button[data-cat="pic"] { --cat-edge: var(--purple-d); }
.admin-cat-tabs button.active { color: #fff; transform: translateY(5px); box-shadow: none; }
.admin-cat-tabs button[data-cat="src"].active { background: #a99177; }
.admin-cat-tabs button[data-cat="char"].active { background: var(--green); }
.admin-cat-tabs button[data-cat="fuku"].active { background: var(--pink); }
.admin-cat-tabs button[data-cat="bg"].active { background: var(--blue); }
.admin-cat-tabs button[data-cat="pic"].active { background: var(--purple); }
.admin-cat-swipe {
  min-height: 180px;
  padding: 4px 2px 18px;
  touch-action: pan-y;
}
.admin-cat-panel { animation: pickerIn .16s ease-out; }
.admin-sec { margin: 8px 0; }
.admin-sec > summary { cursor: pointer; font-size: 20px; font-weight: bold; border-bottom: 3px dashed #e8cbae; padding: 9px 6px; list-style-position: inside; }
.admin-sec[open] > summary { margin-bottom: 6px; }
.admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 8px 12px;
  margin: 8px 0;
  box-shadow: 0 3px 0 rgba(150,110,70,.12);
  flex-wrap: nowrap;
}
.admin-thumb-btn {
  flex: none;
  width: 80px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #faf6ee;
  cursor: zoom-in;
  overflow: hidden;
}
.admin-thumb-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.admin-row > img { width: 80px; height: 60px; object-fit: contain; background: #faf6ee; border-radius: 8px; }
.admin-thumb-btn:focus-visible { outline: 4px solid var(--blue-d); outline-offset: 3px; }
.admin-row .nm { font-weight: bold; flex: 1; min-width: 110px; overflow-wrap: anywhere; }
.admin-row .btn { font-size: 14px; padding: 8px 14px; border-width: 2px; box-shadow: 0 3px 0 var(--shade); }
.admin-row .btn:active { transform: translateY(3px); box-shadow: none; }
.admin-row .icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 38px;
  padding: 7px;
  border-radius: 12px;
}
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.admin-row.is-game-hidden { background: rgba(255,255,255,.65); }
.admin-row.is-game-hidden .admin-thumb-btn,
.admin-row.is-game-hidden .nm { opacity: .48; }
.game-visibility {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 5px;
  border: 0;
  border-radius: 999px;
  background: #e7f5ff;
  cursor: pointer;
}
.game-visibility input { position: absolute; opacity: 0; pointer-events: none; }
.game-visibility-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #adb5bd;
  transition: background .15s;
}
.game-visibility-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.24);
  transition: transform .15s;
}
.game-visibility input:checked + .game-visibility-track { background: var(--blue-d); }
.game-visibility input:checked + .game-visibility-track::after { transform: translateX(18px); }
.game-visibility:has(input:focus-visible) { outline: 4px solid var(--blue-d); outline-offset: 2px; }
.select-field { display: grid; grid-template-columns: auto minmax(220px, 1fr); align-items: center; gap: 12px; margin: 8px 0 12px; font-weight: bold; }
.select-field select { width: 100%; }
.work-info-panel { width: min(560px, calc(100vw - 24px)); text-align: left !important; }
.work-info-panel h2 { text-align: center; margin-bottom: 18px; }
.work-info-field { display: grid; gap: 6px; margin: 13px 0; font-size: 17px; font-weight: bold; }
.work-info-field input, .work-info-field select { width: 100%; }
.work-info-actions { justify-content: center; margin-top: 18px; }
.crop-destination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 7px auto 10px;
  padding: 9px 15px;
  border: 3px solid var(--blue-d);
  border-radius: 999px;
  background: #e7f5ff;
  font-size: 16px;
}
.crop-destination span { color: #6b6258; font-size: 14px; font-weight: bold; }
.crop-destination strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-preview-panel { width: min(900px, 96vw); text-align: center !important; }
.image-preview-panel h2 { margin: 0 0 10px; }
.image-preview-panel img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto 14px;
  object-fit: contain;
  border-radius: 12px;
  background: #faf6ee;
}
input[type="text"], select {
  font-family: inherit;
  font-size: 17px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 3px solid #e8cbae;
  background: #fff;
  color: var(--ink);
}
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 4px solid #1864ab;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .game-visibility-track, .game-visibility-track::after, .admin-cat-panel { transition: none !important; animation: none !important; }
}
@media (max-width: 620px) {
  .collection-tile { font-size: 18px; }
  .import-actions { padding: 14px 8px; }
  .import-actions .row { flex-wrap: nowrap; gap: 7px; }
  .import-actions .btn { flex: 1 1 0; min-width: 0; padding: 12px 6px; font-size: 15px; white-space: nowrap; }
  .import-actions .info-btn { margin-left: 0; }
  .admin-cat-tabs { gap: 6px; }
  .admin-cat-tabs button { flex-direction: column; gap: 2px; padding: 8px 3px; font-size: 23px; border-width: 3px; }
  .admin-cat-tabs button span { font-size: 13px; }
  .admin-cat-tabs button .tab-copy { text-align: center; }
  .admin-cat-tabs button .tab-copy b { font-size: 13px; }
  .admin-cat-tabs button .tab-copy small { font-size: 9px; line-height: 1.2; }
}
label.radio { font-size: 17px; font-weight: bold; margin: 0 8px; }

/* ---------- ゲーム中のヘッダー(帯を消してフローティングもどるだけに) ---------- */
.bar h1 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bar h1 img.bar-icon { width: 46px; height: 46px; object-fit: contain; }
body.ingame header.bar { display: none; }
/* ゲーム中のもどるボタンも、ほかのページと同じ左下に置く。 */
.back-float {
  display: none;
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 54px;
  padding: 0;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255,255,255,.82);
  border: 3px solid var(--cream-d);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--cream-d), 0 6px 14px rgba(120,80,40,.16);
  transition: transform .12s, box-shadow .08s, background .12s;
}
.back-float svg { width: 26px; height: 26px; display: block; }
/* 見た目は そのままで、さわれる はんいだけ ひろげる(iPad で おしやすく) */
.back-float::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -10px;
  right: -8px;
  bottom: -10px;
}
.back-float:active { transform: translateY(4px); box-shadow: none; background: #fff; }
@media (hover: hover) {
  .back-float:hover { transform: translateY(-2px); background: #fff; }
}
body.ingame .back-float,
body[data-back-href] .back-float { display: flex; }

.quiz-defaults { margin-top: 22px; }
.quiz-defaults summary {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 4px;
}
.quiz-transfer { justify-content: flex-start; margin-top: 22px; }
.admin-row.off .nm { opacity: .45; }

/* ============================================================
   うんどうかい・たまいれ 共通(js/meet.js が つかう ぶひん)
   ============================================================ */

/* ---------- チームの HUD(のこり人数・とくてん) ---------- */
.mt-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: bold;
  font-size: clamp(17px, 3.4vw, 26px);
  margin: 6px 0 8px;
  flex-wrap: wrap;
}
.mt-hud span {
  background: #fff;
  border-radius: 999px;
  padding: 4px 18px;
  box-shadow: 0 3px 0 rgba(150,110,70,.16);
  white-space: nowrap;
}
.mt-hud .mt-red  { color: var(--pink-d); }
.mt-hud .mt-blue { color: var(--blue-d); }
.mt-hud .mt-mid  { background: none; box-shadow: none; color: #8a7a68; padding: 0 2px; }
.mt-hud span:empty { display: none; }

/* ---------- ステージ(canvas + うえに かさねる もの) ---------- */
.mt-stage { position: relative; max-width: 1000px; margin: 0 auto; }
.uk-timer {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  min-width: 104px;
  padding: 9px 18px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #6b5d4d;
  box-shadow: 0 3px 0 rgba(107,93,77,.18);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

/* ---------- じっきょうテロップ(下から でる ふきだし) ----------
   まえは 黒い おびが 画面の下に 出っぱなしだった。おびは はばいっぱいで
   おもく、じめんや キャラの足もとを ずっと かくしてしまう。
   まるい ふきだしに して、出来事が あった ときだけ 出す(js/meet.js が
   2.4びょうで 消す)。 */
.mt-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.5%;
  width: fit-content;
  margin: 0 auto;
  max-width: 86%;
  z-index: 40;
  text-align: center;
  font-weight: 500;
  font-size: clamp(15px, 2.4vw, 27px);
  line-height: 1.25;
  color: var(--ink);
  background: rgba(255,253,245,.94);
  padding: 7px 26px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(100,70,40,.18);
  pointer-events: none;
  animation: mt-banner-in .22s cubic-bezier(.2,1.3,.5,1) both;
}
.mt-banner.red,
.mt-banner.blue { box-shadow: 0 4px 12px rgba(100,70,40,.18); }
.mt-banner.out  { animation: mt-banner-out .2s ease-in both; }
.mt-banner .mt-nm { font-weight: 800; }
.mt-banner .mt-nm.red  { color: var(--pink-d); }
.mt-banner .mt-nm.blue { color: var(--blue-d); }
@keyframes mt-banner-in  { from { transform: translateY(130%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes mt-banner-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(130%); opacity: 0; } }

/* ---------- canvas に かさねる カード(きょうぎ名・けっか) ---------- */
.mt-over {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
  background: rgba(40,25,10,.35);
  animation: mt-over-in .25s ease-out both;
}
@keyframes mt-over-in { from { opacity: 0; } }
/* うしろの おいわいアニメを 見せたい ときは くらくしない(カードは 上、ボタンは 下) */
.mt-over.clear { background: none; justify-content: space-between; }
/* きょうぎの しょうかい・けっかは 上1/3に よせる。
   まんなかに 出すと かごと キャラの あたまに ちょうど かぶるため。 */
.mt-over.top { justify-content: flex-start; padding-top: 4%; background: rgba(40,25,10,.18); }
.mt-over.result-reveal {
  background: linear-gradient(to bottom, rgba(255,253,245,.58), rgba(255,253,245,0) 43%);
  pointer-events: none;
}
.mt-card {
  background: rgba(255,255,255,.95);
  border-radius: 26px;
  border: 5px solid var(--cream-d);
  box-shadow: 0 8px 0 rgba(150,110,70,.22);
  padding: 18px 30px 22px;
  max-width: 92%;
}
.mt-card.red  { border-color: var(--pink); box-shadow: 0 8px 0 var(--pink-d); }
.mt-card.blue { border-color: var(--blue); box-shadow: 0 8px 0 var(--blue-d); }
.mt-card .no { font-size: clamp(15px, 3vw, 21px); color: #8a7a68; font-weight: bold; }
.mt-card .ttl { font-size: clamp(26px, 6.5vw, 52px); font-weight: bold; margin: 2px 0; }
.mt-card .ttl.red  { color: var(--pink-d); }
.mt-card .ttl.blue { color: var(--blue-d); }
.mt-card .sub { font-size: clamp(15px, 3.2vw, 22px); color: #6a5c4c; font-weight: bold; }
.mt-card img.ico { width: clamp(70px, 16vw, 116px); height: auto; display: block; margin: 0 auto; }
.mt-card.result-reveal {
  width: min(96%, 980px);
  max-width: 96%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.mt-card.result-reveal .no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 rgba(138,122,104,.16);
  font-size: clamp(20px, 3.5vw, 31px);
}
.mt-card.result-reveal .ttl {
  margin-top: 7px;
  font-family: "Hoiku Pop", "Hoiku Rounded", sans-serif;
  text-shadow: 0 3px 0 #fff, 0 0 12px rgba(255,255,255,.95);
}
.mt-card.result-reveal .sub { text-shadow: 0 2px 0 #fff, 0 0 9px #fff; }
.mt-card.result-reveal .uk-total { margin: 9px 0 5px; }
.mt-card.result-reveal .uk-total .side,
.mt-card.result-reveal .uk-total .mid { text-shadow: 0 3px 0 #fff, 0 0 12px #fff; }
.mt-card.result-reveal .uk-prog {
  width: max-content;
  max-width: 92vw;
  margin: 9px auto 0;
  padding: 7px 14px 0;
}

/* ---------- チーム発表・チームわけ ---------- */
.mt-teams {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  max-width: 980px;
  margin: 10px auto;
  flex-wrap: nowrap;
}
.mt-teamcol {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border-radius: 22px;
  border: 5px solid var(--cream-d);
  box-shadow: 0 6px 0 var(--cream-d);
  padding: 10px 8px 14px;
}
.mt-teamcol.red  { border-color: var(--pink); box-shadow: 0 6px 0 var(--pink-d); background: #fff0f6; }
.mt-teamcol.blue { border-color: var(--blue); box-shadow: 0 6px 0 var(--blue-d); background: #e7f5ff; }
.mt-teamcol h3 { margin: 4px 0 8px; font-size: clamp(20px, 4.5vw, 30px); }
.team-reveal-title {
  margin: 10px 0 4px;
  text-align: center;
  font: 400 clamp(28px, 5.5vw, 40px)/1.25 "Hoiku Pop", "Hoiku Rounded", sans-serif;
}
.team-reveal-card .ttl {
  font-size: clamp(28px, 5.5vw, 40px);
  font-weight: 400;
}

/* うんどうかいの最終決定は、スクロール中だけ画面下へ固定する。
   最下部では通常の配置へ戻り、ほかの内容を覆わない。 */
.uk-go-slot { min-height: 82px; }
.uk-go-sentinel { height: 1px; }
.uk-go-actions {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: min(520px, calc(100vw - 24px));
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,253,245,.94);
  box-shadow: 0 5px 16px rgba(90,60,30,.18);
}
.uk-go-actions.docked {
  position: static;
  width: auto;
  transform: none;
  margin: 10px 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.mt-teamcol.red  h3 { color: var(--pink-d); }
.mt-teamcol.blue h3 { color: var(--blue-d); }
.mt-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
  min-height: 90px;
  align-content: start;
}
.mt-mem { text-align: center; animation: mt-pop .4s cubic-bezier(.2,1.6,.4,1) both; }
.mt-mem img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  border: 3px solid #eee2d0;
}
.mt-mem .nm { font-size: 13px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-vs { align-self: center; font-size: clamp(24px, 6vw, 46px); font-weight: bold; color: #a99; flex: 0 0 auto; }
@keyframes mt-pop { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }

/* チーム名の にゅうりょく(じゆうに かえられる) */
.mt-teamname {
  font-family: inherit;
  font-size: clamp(18px, 4vw, 26px);
  font-weight: bold;
  text-align: center;
  width: 100%;
  border: 3px dashed var(--cream-d);
  border-radius: 14px;
  background: #fff;
  padding: 6px 8px;
  margin: 2px 0 8px;
  color: var(--ink);
}
.mt-teamcol.red  .mt-teamname { color: var(--pink-d); border-color: #ffc2d8; }
.mt-teamcol.blue .mt-teamname { color: var(--blue-d); border-color: #b8dcff; }
.mt-teamname:focus { outline: 3px solid var(--yellow); border-style: solid; }
.uk-team-choice {
  display: grid;
  grid-template-columns: auto 68px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px auto 10px;
  font-size: clamp(17px, 3vw, 21px);
  font-weight: 800;
}
.select-all-btn { font-size: clamp(15px, 2.5vw, 18px); padding: 8px 18px 10px; }
.select-all-actions { gap: 8px; }
.uk-team-reveal { margin-top: 12px; }
.uk-team-reveal .mt-teamcol { padding-top: 8px; }
.uk-team-text { font-weight: 800; }
.uk-team-text.red { color: var(--pink-d); }
.uk-team-text.blue { color: var(--blue-d); }
.uk-versus-line {
  margin: 8px 0 2px;
  font-size: clamp(19px, 4vw, 30px);
  font-weight: 800;
}
.uk-insert-actions {
  position: relative;
  z-index: 60;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
}
.uk-action-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.uk-result-heading,
.uk-next-event {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
  text-shadow: 0 2px 0 #fff, 0 0 9px #fff;
}
.uk-result-heading {
  width: max-content;
  max-width: 92vw;
  margin: 0 auto;
  padding: 6px 18px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 rgba(138,122,104,.16);
  font-size: clamp(20px, 3.5vw, 31px);
}
.uk-result-heading img { width: clamp(32px, 5vw, 46px); height: clamp(32px, 5vw, 46px); object-fit: contain; }
.uk-next-event {
  width: max-content;
  max-width: 92vw;
  margin: 0 auto 6px;
  padding: 5px 16px 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 rgba(138,122,104,.16);
  font-size: clamp(16px, 2.5vw, 22px);
}
.uk-next-event img { width: 30px; height: 30px; object-fit: contain; }
.uk-next-event span { color: #7c6c5b; font-size: .82em; }
.uk-detail-modal { z-index: 150; }
.uk-detail-modal .panel { width: min(680px, 96vw); text-align: center; }
.uk-detail-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px auto 4px; }
.uk-detail-team {
  min-width: 0;
  padding: 12px 10px 14px;
  border: 4px solid;
  border-radius: 20px;
  background: #fff;
  font-weight: 800;
}
.uk-detail-team.red { color: var(--pink-d); border-color: var(--pink); background: #fff0f6; }
.uk-detail-team.blue { color: var(--blue-d); border-color: var(--blue); background: #e7f5ff; }
.uk-detail-team .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(15px, 2.5vw, 20px); }
.uk-detail-team .metric { margin: 3px 0; font-size: clamp(34px, 7vw, 58px); line-height: 1.05; }
.uk-detail-team .point {
  display: inline-block;
  padding: 3px 12px 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(17px, 3vw, 23px);
}
.uk-detail-list { max-height: min(52vh, 440px); overflow-y: auto; }
.info-button {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: inline-grid; place-items: center;
  margin-left: 4px; padding: 0;
  border: 3px solid #fff; border-radius: 999px;
  background: var(--blue); color: #fff;
  box-shadow: 0 3px 0 var(--blue-d);
  font: 800 22px/1 Georgia, serif;
  pointer-events: auto;
}
.info-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blue-d); }
.uk-total { position: relative; }
.uk-total > .info-button { align-self: center; margin-left: 2px; }
.uk-final-detail-list { max-height: min(62vh, 520px); overflow-y: auto; display: grid; gap: 12px; }
.uk-final-detail-event { padding: 10px; border-radius: 20px; background: #fffaf0; }
.uk-final-detail-event .head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; font-size: clamp(18px, 3vw, 23px); }
.uk-final-detail-event .head img { width: 38px; height: 38px; object-fit: contain; }
.uk-final-detail-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.uk-final-detail-teams .team { min-width: 0; padding: 8px 8px 10px; border-radius: 16px; border: 3px solid; font-weight: 800; }
.uk-final-detail-teams .team.red { color: var(--pink-d); border-color: var(--pink); background: #fff0f6; }
.uk-final-detail-teams .team.blue { color: var(--blue-d); border-color: var(--blue); background: #e7f5ff; }
.uk-final-detail-teams .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.uk-final-detail-teams strong { display: block; font-size: clamp(28px, 5vw, 42px); line-height: 1.05; }
.uk-final-detail-teams strong small { font-size: .48em; }
.uk-final-detail-teams .point { display: inline-block; margin-top: 4px; padding: 2px 11px 4px; border-radius: 999px; background: #fff; color: var(--ink); font-size: clamp(16px, 2.6vw, 21px); }

/* ---------- オン・オフの トグル(きょうぎえらび) ---------- */
.mt-rows { max-width: 620px; margin: 10px auto; display: flex; flex-direction: column; gap: 10px; }
.mt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 3px solid #eee2d0;
  border-radius: 16px;
  padding: 8px 14px;
  text-align: left;
}
.mt-row img.ico { width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; }
.mt-row .txt { flex: 1; min-width: 0; }
.mt-row .txt b { display: block; font-size: 19px; color: var(--ink); }
.mt-row .txt span { display: block; font-size: 12.5px; color: #8a7a68; }
.mt-toggle {
  flex: 0 0 auto;
  width: 68px; height: 38px;
  border-radius: 999px;
  border: none;
  background: #d9cfc0;
  position: relative;
  cursor: pointer;
  transition: background .15s;
  padding: 0;
}
.mt-toggle .knob {
  position: absolute; top: 4px; left: 4px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: left .15s;
}
.mt-toggle.on { background: var(--green); }
.mt-toggle.on .knob { left: 34px; }
.mt-row.off { opacity: .5; }

/* ---------- とくてんばん ---------- */
.mt-score {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  max-width: 720px;
  margin: 8px auto;
  font-weight: bold;
}
.mt-score .side {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border-radius: 18px;
  border: 4px solid var(--cream-d);
  box-shadow: 0 5px 0 var(--cream-d);
  padding: 6px 10px 8px;
}
.mt-score .side.red  { border-color: var(--pink); box-shadow: 0 5px 0 var(--pink-d); color: var(--pink-d); }
.mt-score .side.blue { border-color: var(--blue); box-shadow: 0 5px 0 var(--blue-d); color: var(--blue-d); }
.mt-score .side .nm { font-size: clamp(14px, 3vw, 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-score .side .pt { font-size: clamp(24px, 6vw, 40px); line-height: 1.1; }
.mt-score .side .pt small { font-size: .45em; }
.mt-score .mid { align-self: center; color: #a99; font-size: clamp(16px, 4vw, 26px); }

/* ---------- きょうぎの けっか一覧(さいごの はっぴょう) ---------- */
.mt-list { max-width: 620px; margin: 8px auto; font-size: 16px; }
.mt-list .li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 6px 14px;
  margin: 6px 0;
}
.mt-list .li .ev { flex: 0 0 auto; font-weight: bold; }
.mt-list .li .sc { flex: 1; color: #8a7a68; font-size: 14px; }
.mt-list .li .wn { font-weight: bold; }
.mt-list .li .wn.red  { color: var(--pink-d); }
.mt-list .li .wn.blue { color: var(--blue-d); }

@media (max-width: 560px) {
  /* スマホ縦:ゲーム中は ヘッダーが「← もどる」フローティングになるので
     HUDが かぶらないよう 上に すきまを あける */
  .mt-hud { margin-top: 50px; }
  .mt-teams { gap: 6px; }
  .mt-teamcol { padding: 8px 6px 10px; }
  .uk-team-choice { grid-template-columns: auto 68px; gap: 8px; }
}

/* ============================================================
   あそび中は がめん いっぱい(js/core.js の Stage が つける)
   ・body.fitstage … ステージ(canvas.stage)の ある がめんで あそんでいる
   ・.fit-fill    … ステージまでの みちすじ。まんなかに よせる はこ
   ・.fit-box     … canvas の おや。ステージの ひりつどおりの おおきさ(px は JS が きめる)
   ・.fit-top / .fit-bottom … ステージの うえに かさねる UI(うえ・した)
   ふだん(ぜんがめんで ないとき)は display:contents なので、
   ならびかたは いままでと まったく おなじ。
   ============================================================ */
.fit-top, .fit-bottom { display: contents; }

html.fitstage { height: 100%; }
body.fitstage {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;   /* iPad の びよんと する スクロールを とめる */
  min-height: 0;
}
body.fitstage main {
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.fitstage .fit-fill {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.fitstage .fit-box {
  flex: 0 0 auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
}
body.fitstage .fit-box canvas.stage {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}

/* ステージに かさねる UI。あきスペースは タッチを とおして、
   ボタンなど おせる ものだけ タッチを うけとる */
body.fitstage .fit-top,
body.fitstage .fit-bottom {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
}
body.fitstage .fit-top { top: 0; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
body.fitstage .fit-bottom { bottom: 0; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
body.fitstage .fit-top,
body.fitstage .fit-bottom,
body.fitstage .fit-top > *,
body.fitstage .fit-bottom > * { pointer-events: none; }
body.fitstage .fit-top button,
body.fitstage .fit-top a,
body.fitstage .fit-top input,
body.fitstage .fit-top select,
body.fitstage .fit-top label,
body.fitstage .fit-bottom button,
body.fitstage .fit-bottom a,
body.fitstage .fit-bottom input,
body.fitstage .fit-bottom select,
body.fitstage .fit-bottom label { pointer-events: auto; }
body.fitstage .fit-top > *,
body.fitstage .fit-bottom > * { margin: 0; max-width: 100%; }
/* すの文字(ヒントなど)は ステージの うえでも よめるように 白い おびを しく */
body.fitstage .fit-top > p,
body.fitstage .fit-bottom > p,
body.fitstage .fit-top > .note,
body.fitstage .fit-bottom > .note,
body.fitstage .fit-top > .streak,
body.fitstage .fit-bottom > .streak {
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 5px 18px;
}
body.fitstage .fit-bottom .note { color: #5b4a36; }
/* ゲーム中は ヘッダーの おびを かならず 消す(あそび中は もどるボタンだけ) */
body.fitstage header.bar { display: none; }

/* よこむきに してほしい ときの おしらせ。
   ぜんがめんを ふさぐ まくに すると、そのあいだ 左うえの もどるボタンが
   おせなく なるので、うえに ちいさく うかべる おびに する。
   z-index も もどる(60)・ぜんがめん(95)より 下に して、かさなっても
   ボタンが おせるように する。 */
.rotate-hint {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 58;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(94vw, 580px);
  padding: 9px 14px 11px 18px;
  border: 4px solid var(--yellow);
  border-radius: 999px;
  background: rgba(255,253,245,.97);
  box-shadow: 0 6px 0 var(--yellow-d), 0 8px 20px rgba(120,80,40,.18);
  color: var(--ink);
  font-size: clamp(14px, 2.2vw, 19px);
  font-weight: bold;
  cursor: pointer;
  animation: rotate-in .24s cubic-bezier(.2,1.3,.5,1) both;
}
@keyframes rotate-in { from { transform: translate(-50%, -130%); opacity: 0; } }
.rotate-hint .mark {
  font-size: 1.5em;
  line-height: 1;
  animation: rotate-tilt 1.8s ease-in-out infinite;
}
.rotate-hint .txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rotate-hint .x {
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  color: #8a7a68;
  background: #fff;
  border: 2px solid var(--cream-d);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
}
@keyframes rotate-tilt {
  0%, 60%, 100% { transform: rotate(0deg); }
  30%           { transform: rotate(90deg); }
}

/* ============================================================
   ドロワー(どうぐ箱を よこから 出し入れする)
   ・.drawer            … 本体(みぎから スライド)
   ・.drawer.open       … ひらいている
   ・.drawer-handle     … ひらく ための とって(みぎはしに 見きれさせる)
   ・.drawer-scrim      … ひらいている あいだの うしろの まく
   ============================================================ */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  width: min(340px, 86vw);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  box-shadow: -8px 0 24px rgba(120,80,40,.22);
  border-left: 4px solid var(--cream-d);
  padding: 14px 14px 26px;
  transform: translateX(102%);
  transition: transform .22s ease-out;
}
.drawer.open { transform: translateX(0); }
.drawer .panel { margin: 0; padding: 0; background: none; box-shadow: none; text-align: left; }
.drawer-close {
  font-family: inherit;
  font-size: 17px;
  font-weight: bold;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--cream-d);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 4px 0 var(--cream-d);
  cursor: pointer;
  margin-bottom: 10px;
}
.drawer-close:active { transform: translateY(4px); box-shadow: none; }
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(60,40,20,.28);
}
.drawer-scrim.hidden { display: none !important; }
.drawer-handle {
  position: fixed;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 17px;
  font-weight: bold;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  border: 3px solid var(--cream-d);
  border-radius: 999px 0 0 999px;
  padding: 14px 20px 14px 16px;
  box-shadow: 0 4px 0 var(--cream-d), 0 6px 14px rgba(120,80,40,.16);
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.drawer-handle:active { background: #fff; }
@media (hover: hover) {
  .drawer-handle:hover { transform: translateY(-50%) translateX(-8px); background: #fff; }
}

/* ステージの したに うかべる ミニどうぐバー(よく つかう ものだけ) */
.minibar {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.92);
  border: 3px solid var(--cream-d);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: 0 5px 0 var(--cream-d), 0 8px 18px rgba(120,80,40,.16);
  /* 中身が 1れつに おさまる ときは 1れつの まま。
     はばが たりない ときだけ おりかえす */
  width: max-content;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
  justify-content: center;
}
.minibar .btn { font-size: 17px; padding: 10px 18px; box-shadow: 0 4px 0 var(--shade); }
.minibar .btn:active { transform: translateY(4px); box-shadow: none; }
.minibar .now {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--cream-d);
  cursor: pointer;
  padding: 0;
}

/* ============================================================
   うんどうかい:きょうぎと きょうぎの あいだの インサート(カードの中)
   ・あそんでいる あいだ、ステージの 上には なにも 置かない
   ・てんすう(チップ)と すすみぐあい(きょうぎアイコン)は、
     けっか/しょうかいの カードの 中でだけ 見せる
   ============================================================ */
.uk-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 2px;
}
.uk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: bold;
  border: 4px solid;
  border-radius: 20px;
  padding: 3px 16px 5px;
  white-space: nowrap;
  max-width: 100%;
}
.uk-chip.red  { background: var(--pink); border-color: var(--pink-d); box-shadow: 0 5px 0 var(--pink-d); }
.uk-chip.blue { background: var(--blue); border-color: var(--blue-d); box-shadow: 0 5px 0 var(--blue-d); }
.uk-chip .n { font-size: clamp(26px, 5vw, 42px); line-height: 1; }
.uk-chip .u { font-size: clamp(11px, 1.5vw, 15px); align-self: flex-end; padding-bottom: 4px; opacity: .92; }
.uk-chip .lbl {
  font-size: clamp(12px, 1.6vw, 16px);
  opacity: .92;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------- きょうぎアイコンの ならび(すすみぐあい) ---------- */
.uk-prog {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 3px dashed var(--cream-d);
}
.uk-prog .ev { position: relative; flex: 0 0 auto; line-height: 0; }
.uk-prog .ev img { width: 30px; height: 30px; object-fit: contain; display: block; }
.uk-prog .ev.next img { opacity: .38; }
.uk-prog .ev .done { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; }
/* いまの きょうぎだけ 台に のせて 大きく */
.uk-prog .ev.now {
  display: flex;
  align-items: center;
  background: #fff;
  border: 4px solid var(--yellow);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--yellow-d);
  padding: 4px 10px 6px;
}
.uk-prog .ev.now img { width: 38px; height: 38px; }
.uk-prog .arrow { flex: 0 0 auto; opacity: .45; }

/* ---------- 「けっかへ」ボタン ----------
   まんなかの 下に 出すと じっきょうテロップに かぶるので、
   右下に ちいさく おく(おとな用の ボタン)。 */
.uk-skip {
  position: fixed;
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  z-index: 46;
  margin: 0;
  text-align: right;
}
.uk-skip button {
  font-size: 14px;
  padding: 7px 14px;
  border-width: 2px;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--gray-d);
  opacity: .8;
}
.uk-skip button:active { transform: translateY(4px); box-shadow: none; opacity: 1; }
@media (hover: hover) {
  .uk-skip button:hover { opacity: 1; }
}

   カード・きょうぎの けっか一覧・ボタンが かさならないように ちぢめる */
@media (max-width: 760px) {
  .mt-banner { max-width: 92%; padding: 6px 18px 8px; }
  .mt-card { padding: 10px 16px 13px; border-radius: 20px; border-width: 4px; }
  .mt-card .ttl { font-size: clamp(21px, 5.8vw, 34px); }
  .mt-card .no  { font-size: 14px; }
  .mt-card .sub { font-size: 14px; }
  .uk-total .pt { font-size: clamp(32px, 11vw, 52px); }
  .uk-total .nm { font-size: 13px; }
  body.fitstage .fit-bottom { gap: 4px; }
  body.fitstage .fit-bottom .btn.big {
    font-size: 18px;
    padding: 11px 18px;
    border-radius: 16px;
    border-width: 3px;
    box-shadow: 0 5px 0 var(--shade);
  }
  body.fitstage .fit-bottom .btn.big:active { transform: translateY(5px); box-shadow: none; }
  body.fitstage .fit-bottom .btn { font-size: 16px; padding: 9px 14px; }
  body.fitstage .fit-bottom .row { gap: 6px; }
  body.fitstage .fit-bottom .mt-list { font-size: 12px; margin: 2px auto; }
  body.fitstage .fit-bottom .mt-list .li { padding: 3px 10px; margin: 3px 0; gap: 7px; border-radius: 10px; }
  body.fitstage .fit-bottom .mt-list .li .sc { font-size: 11px; }
}

/* さいごの そうごうけっかで 1回だけ 出す てんすう(カードの中) */
.uk-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  margin: 6px 0 2px;
  font-weight: bold;
}
.uk-total .side { display: flex; align-items: baseline; gap: 8px; }
.uk-total .nm { font-size: clamp(14px, 2.4vw, 22px); max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-total .pt { font-size: clamp(38px, 8vw, 74px); line-height: 1; }
.uk-total .side.red  { color: var(--pink-d); }
.uk-total .side.blue { color: var(--blue-d); }
.uk-total .mid { font-size: clamp(20px, 4vw, 36px); color: #b9ada0; }

/* ---------- 高さが 足りない がめん(スマホの よこ画面) ----------
   けっか一覧と ボタンで 画面の はんぶんを つかってしまい、カードに
   かさなる。一覧は 2れつに して、ボタンも カードも ちいさくする。 */
@media (max-height: 520px) {
  body.fitstage .fit-bottom .mt-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
    max-width: 94vw;
    font-size: 11.5px;
  }
  body.fitstage .fit-bottom .mt-list .li { padding: 2px 9px; margin: 2px 0; gap: 6px; }
  body.fitstage .fit-bottom .mt-list .li .sc { font-size: 10.5px; }
  body.fitstage .fit-bottom .btn.big {
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 14px;
    border-width: 3px;
    box-shadow: 0 4px 0 var(--shade);
  }
  body.fitstage .fit-bottom .btn.big:active { transform: translateY(4px); box-shadow: none; }
  body.fitstage .fit-bottom .btn { font-size: 14px; padding: 7px 12px; }
  .mt-card { padding: 8px 16px 11px; border-radius: 18px; }
  .mt-card .ttl { font-size: clamp(18px, 4.4vw, 30px); }
  .mt-card .no { font-size: 12px; }
  .mt-card .sub { font-size: 12.5px; }
  .mt-card img.ico { width: clamp(44px, 9vw, 72px); }
  .uk-total .pt { font-size: clamp(26px, 7vw, 44px); }
  .uk-total .nm { font-size: 12px; }
}

/* インサート(カードの中)の チップと きょうぎアイコン:せまい がめん用 */
@media (max-width: 760px) {
  .uk-chips { gap: 8px; margin: 6px 0 2px; }
  .uk-chip { padding: 3px 12px 5px; gap: 6px; border-width: 3px; box-shadow: 0 4px 0 currentColor; }
  .uk-chip.red  { box-shadow: 0 4px 0 var(--pink-d); }
  .uk-chip.blue { box-shadow: 0 4px 0 var(--blue-d); }
  .uk-chip .n { font-size: clamp(22px, 6.5vw, 34px); }
  .uk-prog { margin-top: 7px; padding-top: 6px; gap: 5px; }
  .uk-prog .ev img { width: 24px; height: 24px; }
  .uk-prog .ev .done { width: 14px; height: 14px; right: -3px; bottom: -3px; }
  .uk-prog .ev.now { padding: 3px 8px 5px; border-width: 3px; }
  .uk-prog .ev.now img { width: 30px; height: 30px; }
}
@media (max-height: 520px) {
  .uk-chips { margin: 5px 0 1px; }
  .uk-chip .n { font-size: clamp(20px, 5vw, 30px); }
  .uk-prog { margin-top: 6px; padding-top: 5px; gap: 4px; }
  .uk-prog .ev img { width: 22px; height: 22px; }
  .uk-prog .ev.now { padding: 2px 7px 4px; }
  .uk-prog .ev.now img { width: 27px; height: 27px; }
  .uk-skip button { font-size: 12.5px; padding: 5px 11px; }
}

/* たて画面の インサート:カードは がめんの 上に そのまま おく。
   ステージ(よこ16:9)は まんなかの ほそい おびで、カードは そこに
   おさまらない。ステージの 中で うごかすと 画面の外に 出てしまうので、
   がめんの 上に はりつけて かならず ぜんぶ 見えるようにする。 */
@media (max-width: 760px) and (orientation: portrait) {
  body.fitstage .mt-over {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    justify-content: flex-start;
    align-items: center;
    padding: 62px 8px 0;      /* 左右うえの もどる/ぜんがめんボタンを よける */
    background: none;
  }
  body.fitstage .mt-over .mt-card { transform: none; max-width: 96%; }
}

/* おせない ボタンは 立体の へこみも やめる(おした ように 見えないように) */
.btn:disabled { box-shadow: 0 4px 0 var(--shade); }
.btn:disabled:active { transform: none; box-shadow: 0 4px 0 var(--shade); }

/* ---------- PWA更新。遊びを止めず、大人が区切りのよい時に切り替える ---------- */
.pwa-update-bar {
  position: fixed;
  z-index: 10050;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(760px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border: 4px solid #9c6b00;
  border-radius: 18px;
  background: #fff1bd;
  color: #503700;
  box-shadow: 0 8px 0 rgba(80, 55, 0, .22), 0 12px 30px rgba(54, 37, 0, .22);
}
@media (max-width: 760px) {
  .admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .admin-thumb-btn { width: 72px; height: 58px; }
  .admin-row .nm { flex: 1 1 calc(100% - 80px); min-width: 0; }
  .admin-row .btn:not(.icon-btn) { padding: 7px 10px; }
  .admin-row .btn, .admin-row .game-visibility { flex: none; }
  .select-field { grid-template-columns: 1fr; gap: 5px; }
}
@media (max-width: 430px) {
  main { padding: 9px; }
  .bar { gap: 6px; padding-inline: 8px; }
  .bar h1 { font-size: 18px; gap: 5px; }
  .bar h1 img.bar-icon { width: 36px; height: 36px; }
  .bar .back { font-size: 14px; }
  .bar .spacer { display: none; }
  .panel { padding: 18px; }
  .panel h2 { font-size: 22px; }
  .admin-row { padding: 7px; }
  .admin-thumb-btn { width: 64px; height: 54px; }
}
.pwa-update-bar > div { display: grid; gap: 2px; flex: 1; }
.pwa-update-bar b { font-size: 17px; }
.pwa-update-bar span { font-size: 13px; }
.pwa-update-bar .btn { flex: none; padding: 9px 13px; font-size: 14px; }
.pwa-admin-panel { border-color: #b197fc; background: #f7f3ff; }
.pwa-status { margin: 8px 0; font-weight: bold; color: #5f3dc4; }
.pwa-status[data-tone="ready"] { color: #2b8a3e; }
.pwa-status[data-tone="update"] { color: #9c6b00; }
.pwa-status[data-tone="error"] { color: #c92a2a; }
.pwa-status[data-tone="offline"] { color: #495057; }
@media (max-width: 620px) {
  .pwa-update-bar { flex-wrap: wrap; justify-content: flex-end; }
  .pwa-update-bar > div { flex-basis: 100%; }
}