/* 大会モード。大きさは比率で書く（em / % / flex） */

/* **短いページでも下まで作品の背景にする。** 本文の高さで止まると、下に白い地が出る */
body.tour { min-height: 100dvh; }

body.tour .container { max-width: 36em; box-sizing: border-box; padding: 0.6em 0.8em 1.2em; }

/* 見出し。左上に「もどる」（ミニゲーム一覧の ← と同じ形） */
.tr-head { display: flex; align-items: center; gap: 0.5em; margin: 0.3em 0 0.8em; }
.tr-head h1 { flex: 1; margin: 0; font-size: 1.25em; text-align: center; color: #fff;
  text-shadow: 0 0.1em 0.4em rgba(0, 0, 0, .5); }
.tr-back { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.8em; height: 1.8em; border-radius: 50%; text-decoration: none; font-size: 1.15em;
  font-weight: 900; color: #2b3446; background: rgba(255, 255, 255, .88);
  box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, .18); border: 0; cursor: pointer; }
.tr-spacer { flex: none; width: 1.8em; font-size: 1.15em; }

.tr-panel { background: #fff; color: #2b3446; border-radius: 0.8em; padding: 0.8em 1em;
  margin: 0 0 0.8em; box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, .15); }
.tr-panel h2 { font-size: 1em; margin: 0 0 0.5em; }
.tr-note { font-size: 0.85em; color: #6b7280; margin: 0.4em 0 0; }

/* 開催のボタン（トップ） */
.tr-list { display: flex; flex-direction: column; gap: 0.8em; }
.tr-item { display: block; text-decoration: none; color: #fff; background: #2f8fd6;
  border-radius: 0.8em; padding: 0.9em 1em; text-align: center; font-weight: 800;
  box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, .25); }
.tr-item small { display: block; font-weight: 600; font-size: 0.85em; margin-top: 0.2em; opacity: .9; }
.tr-item.is-test { background: #6b7fa8; }
.tr-empty { color: #cfe0ff; text-align: center; }

/* 大会のイメージ画像 */
.tr-hero { width: 100%; height: auto; border-radius: 0.8em; display: block; margin: 0 0 0.8em; }

/* レギュレーション */
.tr-rule h3 { font-size: 0.9em; margin: 0.8em 0 0.2em; color: #2f6fb6; }
.tr-rule h3:first-child { margin-top: 0; }
.tr-rule ul { margin: 0; padding-left: 1.2em; font-size: 0.88em; line-height: 1.7; }

/* 参加するボタンと通知のアイコン。**同じ行に置く** */
.tr-join-row { display: flex; align-items: center; gap: 0.6em; }
.tr-join { flex: 1; display: block; text-align: center; text-decoration: none; font-weight: 900;
  font-size: 1.15em; padding: 0.7em; border-radius: 0.8em; color: #fff; background: #ff4fa3;
  box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, .25); border: 0; }
.tr-join.is-off { background: #9aa1ab; box-shadow: none; pointer-events: none; }
.tr-bell { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 1.3em; background: rgba(255, 255, 255, .9); box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, .18); }
.tr-bell.on { background: #ffe58a; }
.tr-bell-msg { font-size: 0.82em; color: #cfe0ff; margin: 0.4em 0 0; min-height: 1em; }

/* 順位 */
.tr-rank { list-style: none; margin: 0; padding: 0; }
.tr-rank li { display: flex; align-items: baseline; gap: 0.6em; padding: 0.35em 0;
  border-top: 1px dashed rgba(0, 0, 0, .12); }
.tr-rank li:first-child { border-top: 0; }
.tr-rank .no { flex: none; width: 2em; text-align: center; font-weight: 800; }
.tr-rank .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-rank .w { font-weight: 800; }
.tr-rank .g { font-size: 0.8em; color: #8a93a6; }
.tr-rank li.you { background: #fff6c2; }

/* ===== 待合室 ===== */
.tr-clock { text-align: center; font-weight: 800; font-size: 1.05em; margin: 0 0 0.2em; }
.tr-clock b { font-size: 1.4em; color: #ff4fa3; }

.tr-me { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.tr-score { font-weight: 800; }
.tr-score b { font-size: 1.6em; color: #2f6fb6; }

/* コイン。**左から少しずつ重ねる。** 持っていないぶんは出さない（薄く残すと重なりの上下が分かりにくい） */
.tr-coins { display: flex; align-items: center; justify-content: flex-end; min-height: 3.4em; }
.tr-coins img { width: 3.4em; height: 3.4em; display: block; }
.tr-coins img + img { margin-left: -1.5em; }
.tr-coin-next { font-size: 0.78em; color: #6b7280; text-align: right; margin: 0.2em 0 0; min-height: 1em; }

.tr-show { display: block; width: 100%; font-weight: 900; font-size: 1.2em; padding: 0.8em;
  border-radius: 0.8em; border: 0; color: #fff; background: #ff4fa3; cursor: pointer;
  box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, .25); }
.tr-show.is-hide { background: #6b7fa8; }
.tr-show:disabled { background: #9aa1ab; box-shadow: none; cursor: default; }
.tr-status { text-align: center; font-size: 0.9em; margin: 0.5em 0 0; min-height: 1.2em; color: #2b3446; }

/* 待合室の面。**対人戦の待合室と同じく、人ごとの区画の中をゆっくり漂う**（room.js）。
   高さは決めておく。中のアバターは位置を % で持つので、面に高さが無いと動けない */
.tr-floor { position: relative; height: 15em; margin: 0 1.6em; overflow: visible; }
.tr-room { overflow: hidden; }
.tr-av { position: absolute; display: flex; flex-direction: column; align-items: center;
  /* **ゆっくり動かす。** 速いと目が疲れて、名前が読めない（対人戦と同じ） */
  transition: left 2.4s ease-in-out, top 2.4s ease-in-out, opacity .3s;
  transform: translate(-50%, -50%); font-size: 1em; }
.tr-av img { width: 2.6em; height: 2.6em; border-radius: 50%; display: block; }
.tr-av .nm { font-size: 0.7em; white-space: nowrap; color: #6b7280; max-width: var(--nmw, 7em);
  overflow: hidden; text-overflow: ellipsis; text-align: center; }
.tr-av .st { font-size: 0.62em; color: #ff4fa3; font-weight: 800; white-space: nowrap; }
.tr-av.is-you img { box-shadow: 0 0 0 0.12em #4a90d9; }
.tr-av.is-you .nm { font-weight: 800; }
/* 消えている人は薄く。**自分も薄くする**（いまどちらなのかが分かるように。対人戦と同じ） */
.tr-av.is-hidden { opacity: .35; }

/* ===== 表彰（発表のあと、その大会のページだけ） ===== */
.tr-award-panel { position: relative; overflow: hidden;
  background: linear-gradient(160deg, #fffdf2 0%, #fff 45%, #fff6fb 100%);
  box-shadow: 0 0 0 0.15em #f5c84c, 0 0.3em 1.2em rgba(245, 200, 76, .45); }
/* 見出しは金色が流れる。押すともう一度花火が上がる */
.tr-award-title { text-align: center; font-size: 1.3em; margin: 0.1em 0 0.6em; cursor: pointer;
  background: linear-gradient(90deg, #9a6b00, #d9a400, #ffe27a, #d9a400, #9a6b00);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tr-shine 2.4s linear infinite; }
@keyframes tr-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }

.tr-award .tr-rank li { position: relative; border-radius: 0.6em; padding: 0.4em 0.5em; }
.tr-award .tr-rank li.top { border-top: 0; margin: 0 0 0.4em; font-size: 1.12em; overflow: hidden;
  animation: tr-pop .6s ease-out both; }
.tr-award .tr-rank li.top1 { font-size: 1.3em; background: linear-gradient(100deg, #fff1a8, #ffd84d 50%, #fff1a8);
  box-shadow: 0 0.15em 0.6em rgba(230, 170, 0, .45); animation-delay: .9s; }
.tr-award .tr-rank li.top2 { background: linear-gradient(100deg, #f4f6f9, #d5dbe2 50%, #f4f6f9); animation-delay: .6s; }
.tr-award .tr-rank li.top3 { background: linear-gradient(100deg, #fbe3cf, #e8b48a 50%, #fbe3cf); animation-delay: .3s; }
.tr-award .tr-rank li.top .no { font-size: 1.4em; }
.tr-award .tr-rank li.top .w { font-size: 1.15em; }
/* 光が横切る */
.tr-award .tr-rank li.top::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: tr-sweep 3s ease-in-out infinite; pointer-events: none; }
.tr-award .tr-rank li.top2::after { animation-delay: .5s; }
.tr-award .tr-rank li.top3::after { animation-delay: 1s; }
@keyframes tr-sweep { 0%, 60% { left: -40%; } 100% { left: 120%; } }
/* **透明から出さない。** 動きが止まる環境（裏のタブなど）だと、上位3人が見えないまま残る */
@keyframes tr-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* 光の粒 */
.tr-award .tw { position: absolute; color: #fff; font-size: 0.8em; pointer-events: none;
  text-shadow: 0 0 0.4em #ffd84d; animation: tr-twinkle 1.8s ease-in-out infinite; opacity: 0; }
@keyframes tr-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

/* ===== 花火と紙吹雪 =====
   **アイプリのノリノリ！ライブの結果画面と同じ作り**（rhythm/static/style.css の .gm-fw / .gm-conf）。
   1つの点にたくさんの影を付けて、丸ごと拡大して散らす。4つが 4.4〜6.0 秒おきにゆっくり開く。
   画面全体にかぶせる。**押す操作は下へ通す** */
.tr-fw-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden;
  transition: opacity 1.2s; }
.tr-fw-layer.off { opacity: 0; }
.tr-fw-layer.off .tr-fw, .tr-fw-layer.off .tr-conf span { animation-play-state: paused; }
.tr-fw {
  position: absolute; width: .6vh; height: .6vh; border-radius: 50%;
  background: transparent;
  box-shadow: 7.00vh 0.00vh 0 0 var(--fw), 6.06vh 3.50vh 0 0 var(--fw), 3.50vh 6.06vh 0 0 var(--fw), 0.00vh 7.00vh 0 0 var(--fw), -3.50vh 6.06vh 0 0 var(--fw), -6.06vh 3.50vh 0 0 var(--fw), -7.00vh 0.00vh 0 0 var(--fw), -6.06vh -3.50vh 0 0 var(--fw), -3.50vh -6.06vh 0 0 var(--fw), -0.00vh -7.00vh 0 0 var(--fw), 3.50vh -6.06vh 0 0 var(--fw), 6.06vh -3.50vh 0 0 var(--fw), 3.51vh 1.45vh 0 -.1vh var(--fw), 1.45vh 3.51vh 0 -.1vh var(--fw), -1.45vh 3.51vh 0 -.1vh var(--fw), -3.51vh 1.45vh 0 -.1vh var(--fw), -3.51vh -1.45vh 0 -.1vh var(--fw), -1.45vh -3.51vh 0 -.1vh var(--fw), 1.45vh -3.51vh 0 -.1vh var(--fw), 3.51vh -1.45vh 0 -.1vh var(--fw);
  opacity: 0; transform: scale(.15);
  animation: tr-fw 4.4s ease-out infinite;
  filter: drop-shadow(0 0 .6vh rgba(255, 255, 255, .55));
}
@keyframes tr-fw {
  0%   { opacity: 0;   transform: scale(.15); }
  6%   { opacity: 1;   transform: scale(.45); }
  40%  { opacity: .95; transform: scale(1.15); }
  66%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}
.tr-fw.f1 { --fw: #ff6fae; left: 18%; top: 14%; animation-duration: 4.4s; animation-delay: 0s; }
.tr-fw.f2 { --fw: #ffd166; left: 44%; top: 8%;  animation-duration: 5.2s; animation-delay: -1.6s; }
.tr-fw.f3 { --fw: #7fe3ff; left: 70%; top: 20%; animation-duration: 4.8s; animation-delay: -3.1s; }
.tr-fw.f4 { --fw: #b9a2ff; left: 86%; top: 10%; animation-duration: 6.0s; animation-delay: -2.3s; }
/* 紙吹雪。**降りながら回る** */
.tr-conf span { position: absolute; top: -6vh; width: 1.1vh; height: 1.7vh; border-radius: .2vh;
  animation: tr-conf linear infinite; }
.tr-conf span:nth-child(1) { left:  6%; background: #ff8fbf; animation-duration: 6.5s; animation-delay: 0s; }
.tr-conf span:nth-child(2) { left: 16%; background: #ffd166; animation-duration: 8.0s; animation-delay: -2s; }
.tr-conf span:nth-child(3) { left: 26%; background: #7fe3ff; animation-duration: 7.0s; animation-delay: -4s; }
.tr-conf span:nth-child(4) { left: 36%; background: #b9a2ff; animation-duration: 9.0s; animation-delay: -1s; }
.tr-conf span:nth-child(5) { left: 47%; background: #9ff0c0; animation-duration: 6.8s; animation-delay: -3s; }
.tr-conf span:nth-child(6) { left: 57%; background: #ff8fbf; animation-duration: 8.6s; animation-delay: -5s; }
.tr-conf span:nth-child(7) { left: 67%; background: #ffd166; animation-duration: 7.4s; animation-delay: -0.5s; }
.tr-conf span:nth-child(8) { left: 78%; background: #7fe3ff; animation-duration: 9.4s; animation-delay: -2.5s; }
.tr-conf span:nth-child(9) { left: 87%; background: #b9a2ff; animation-duration: 6.2s; animation-delay: -4.5s; }
.tr-conf span:nth-child(10){ left: 95%; background: #9ff0c0; animation-duration: 8.2s; animation-delay: -1.5s; }
@keyframes tr-conf {
  0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(112vh) rotate(900deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-award-title, .tr-award .tr-rank li.top, .tr-award .tr-rank li.top::after, .tr-award .tw { animation: none; }
  .tr-award .tw, .tr-fw-layer { display: none; }
}