/* トップ画面以外のスタイル。
   トップ画面は index.html にインラインで持たせ、初回描画を待たせない
   （CLAUDE.md 113-114行目）。色・書体・角丸・動きの定義も
   index.html の :root に集約してある。
   ここでは生の16進数を書かず、必ずトークンを参照する。

   配色は招待状サイト（wedding-invitation）のティファニーブルー×ゴールド。
   書体は Zen Maru Gothic を使う文字だけ切り出して同梱している。 */

/* ---- 参加登録 ---- */

/* #app は overflow:hidden なので、この画面だけは自前でスクロールできるようにする。
   ソフトキーボードが出ると入力欄が見切れ、卓の選択に届かなくなる端末がある。 */
#screenRegister { display:flex; align-items:center; justify-content:center;
                  padding:32px; overflow-y:auto; -webkit-overflow-scrolling:touch;
                  overscroll-behavior:contain; }

.form-wrap { width:100%; max-width:340px; display:flex; flex-direction:column; gap:var(--gap-s); }

.form-title { font-family:var(--maru); font-size:21px; font-weight:500;
              letter-spacing:.16em; text-indent:.16em; text-align:center;
              margin-bottom:var(--gap-s); }

.field { display:flex; flex-direction:column; gap:6px; }
.field-label { font-size:11px; letter-spacing:.18em; color:var(--muted); }

/* 選択肢が無い間は押しても何も起きない。触れないことを見た目でも示す */
.field select:disabled { opacity:.55; }

/* 16px を下回るとiOSが入力時に勝手に拡大する。会場で画面がずれる原因になる */
.field input, .field select {
  font-family:var(--maru); font-size:16px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:13px 12px; width:100%;
  -webkit-user-select:text; user-select:text;
  -webkit-appearance:none; appearance:none;
}
.field select {
  /* 三角の代わり。外部画像を持ち込まないよう、背景のグラデーションで描く */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.field input:focus, .field select:focus { outline:none; border-color:var(--accent); }
.field input::placeholder { color:var(--muted); opacity:.7; }

.field-note { font-size:11px; line-height:1.8; color:var(--muted); letter-spacing:.04em; }
.error { font-size:12px; line-height:1.8; color:var(--alert); letter-spacing:.04em; }

.form-actions { display:flex; flex-direction:column; align-items:center;
                gap:var(--gap-s); margin-top:var(--gap-s); }
#regSubmit { width:100%; padding:16px 0; }

/* ---- ゲーム ---- */

#stage { position:absolute; inset:0; touch-action:none; }
#screenGame canvas { display:block; width:100%; height:100%; }

#hud { position:absolute; top:0; left:0; right:0; padding:14px 18px 0;
       display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }

/* **桁数が変わっても左右に動かさない。**
   #hud は space-between なので、どれか1つが縮むと余白が配り直され、
   残り時間が10秒を切った瞬間に他の数字まで動く。
   tabular-nums は数字1文字の幅を揃えるだけで、桁数の増減には効かない。
   そこで最大の状態（個数2桁・高さ3桁・残り2桁）ぶんの幅を先に確保する。
   桁が伸びうる変更をしたら、ここも広げること */
.stat { text-align:center; }
.stat.n2 { min-width:44px; }    /* 99個 */
.stat.n3 { min-width:62px; }    /* 400cm。settings.score_cap が上限 */
.stat.t  { min-width:46px; }    /* 90秒 */
.stat b { display:block; font-family:var(--maru); font-size:27px; font-weight:500;
          line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* **直下の span だけ。** 子孫セレクタにすると、ライフの中の
   <span class="lost"> にも 10px が当たり、丸が半分の幅になって
   桁揃えが崩れる */
.stat > span { font-size:10px; letter-spacing:.14em; color:var(--muted); }
.stat i { font-family:var(--maru); font-style:normal; font-size:12px;
          color:var(--muted); margin-left:2px; }

/* ライフは減っても3つぶんの場所を空けたまま、失った分を薄くする。
   丸を消すと幅が3分の1まで縮み、HUD全体がずれる。
   いくつ中のいくつ残っているのかも一目で分かるようになる */
#life b { color:var(--life); letter-spacing:.1em; font-size:22px; }
#life .lost { color:var(--life-spent); }

/* トップへ戻る。HUDは pointer-events:none なので、ここだけ受け取れるようにする。
   押すと今回のプレイは記録されないので、main.js 側で確認を挟む。
   誤爆しにくいよう、数字より一段小さく控えめにしてある */
#quitBtn { pointer-events:auto; align-self:center; margin-top:2px;
           font-family:var(--maru); font-size:11px; letter-spacing:.06em;
           color:var(--muted); background:var(--glass);
           border:1px solid var(--line); border-radius:var(--radius-pill);
           padding:6px 12px; cursor:pointer; touch-action:manipulation;
           transition:transform .12s var(--ease); }
#quitBtn:active { transform:scale(.94); color:var(--ink); }

#hint { position:absolute; bottom:20px; left:0; right:0; text-align:center;
        font-size:11px; letter-spacing:.1em; color:var(--muted); pointer-events:none; }

/* 落とすを中央に置き、その左右で回す。
   利き手を問わず親指が届くよう、3つを画面中央にまとめる */
#controls { position:absolute; bottom:46px; left:0; right:0; display:flex;
            justify-content:center; align-items:center; gap:12px; }
#controls #rotLeft, #controls #rotRight {
  width:56px; height:56px; padding:0; display:grid; place-items:center;
  border-radius:50%; color:var(--accent); background:var(--glass);
  border:1px solid var(--accent); }
#controls #rotLeft svg, #controls #rotRight svg {
  width:20px; height:20px; fill:currentColor; }
#controls #rotLeft:active, #controls #rotRight:active {
  background:var(--accent); color:var(--card); transform:scale(.94); }
#controls button { font-family:var(--maru); font-weight:500; font-size:15px;
           letter-spacing:.12em; text-indent:.12em; color:var(--accent);
           background:var(--glass); border:1px solid var(--line-accent);
           border-radius:var(--radius-pill); padding:13px 0; width:120px;
           touch-action:manipulation; box-shadow:0 2px 10px rgba(44,44,44,.06);
           transition:transform .12s var(--ease), background .2s var(--ease); }
#controls button:active { background:var(--accent); color:var(--card);
                          border-color:var(--accent); transform:scale(.94); }
/* 盤面が一色なので、ボタンは自力で見えるようにする。
   「落とす」が主役なのでベタ塗り、回転は白地に縁取りで一段落とす。
   **#controls button より詳細度を上げること。** id だけだと上の指定に負ける */
#controls #dropBtn { color:var(--card); background:var(--accent);
                     border-color:var(--accent); width:132px;
                     box-shadow:0 4px 16px rgba(92,191,184,.34); }
#controls #dropBtn:active { background:var(--celebrate);
                            border-color:var(--celebrate); }

/* ---- リザルト ---- */

.veil { position:absolute; inset:0; background:var(--veil); display:flex;
        flex-direction:column; align-items:center; justify-content:center;
        gap:var(--gap-s); padding:32px; overflow-y:auto; }
/* 上から順に現れる。祝いの主役はスコアなので、そこで一拍置く */
.veil:not(.hide) > * { animation:rise .42s var(--ease) both; }
.veil:not(.hide) > *:nth-child(1) { animation-delay:.02s; }
.veil:not(.hide) > *:nth-child(2) { animation-delay:.10s; }
.veil:not(.hide) > *:nth-child(3) { animation-delay:.30s; }
.veil:not(.hide) > *:nth-child(4) { animation-delay:.40s; }
.veil:not(.hide) > *:nth-child(n+5) { animation-delay:.50s; }
@keyframes rise {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}
#overTitle { font-size:15px; letter-spacing:.24em;
             text-indent:.24em; color:var(--muted); }

/* 祝いの主役はスコア。いちばん大きく出す（CLAUDE.md 352行目） */
#finalScore { font-family:var(--maru); font-size:68px; font-weight:500; line-height:1;
             font-variant-numeric:tabular-nums; }
#finalScore i { font-family:var(--maru); font-style:normal; font-size:20px;
               color:var(--muted); margin-left:2px; }

.best-line { font-size:13px; letter-spacing:.08em; color:var(--muted); text-align:center; }
.best-line.updated { color:var(--celebrate); font-size:15px;
                     letter-spacing:.14em; text-indent:.14em;
                     animation:pop .5s var(--ease) both; }
@keyframes pop {
  0%   { opacity:0; transform:scale(.86); }
  60%  { opacity:1; transform:scale(1.06); }
  100% { opacity:1; transform:none; }
}

/* 高さを身近なものに置き換えて伝える一言（js/comments.js）。
   折り返しても中央揃えのまま崩れないよう、幅だけ抑えて高さは成り行きにする */
.result-comment { font-size:15px; line-height:1.8;
                  letter-spacing:.05em; color:var(--ink); text-align:center;
                  max-width:17em; text-wrap:balance; }

/* 同点判定に使われる値なので見せる（CLAUDE.md 354行目） */
.result-meta { font-size:12px; line-height:1.9; color:var(--muted);
               letter-spacing:.06em; text-align:center; }

/* 成功は控えめに、失敗は明示する（CLAUDE.md 376-379行目） */
.send-status { font-size:12px; line-height:1.8; letter-spacing:.04em;
               text-align:center; color:var(--muted); min-height:1.8em; }
.send-status.failed { color:var(--alert); }
/* 本人が操作しないと直らない失敗のときだけ出す誘導。
   「もう一度」より目立たせないよう、文字だけのボタンにする */
.send-status .send-action { font:inherit; color:var(--accent); background:none;
                            border:none; text-decoration:underline;
                            text-underline-offset:3px; padding:6px 4px;
                            margin-top:2px; cursor:pointer; }

.result-actions { display:flex; flex-direction:column; align-items:center;
                  gap:var(--gap-s); width:100%; max-width:300px; margin-top:6px; }
/* 「もう一度」を最優先に。大きく押しやすく（CLAUDE.md 368行目） */
#retryBtn { width:100%; padding:16px 0; }

/* ---- ランキング ---- */

#screenRanking { display:flex; align-items:flex-start; justify-content:center;
                 padding:32px 20px; overflow-y:auto; overscroll-behavior:contain; }
.rank-wrap { width:100%; max-width:420px; display:flex; flex-direction:column;
             align-items:center; gap:var(--gap-s); }
.rank-announcement { font-size:13px; line-height:1.9; color:var(--accent);
                     text-align:center; letter-spacing:.06em; }
.rank-message { font-size:12px; line-height:1.9; color:var(--muted); text-align:center; }
.rank-list { list-style:none; width:100%; display:flex; flex-direction:column; gap:6px; }
.rank-row { display:flex; align-items:baseline; gap:10px;
            padding:12px 14px; background:var(--card);
            border:1px solid var(--line); border-radius:var(--radius); }
.rank-row.me { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.rank-place { font-size:14px; color:var(--celebrate);
              white-space:nowrap; min-width:4.5em; }
.rank-place.tied { font-size:12px; }
.rank-name { flex:1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-table { font-size:11px; color:var(--muted); }
.rank-score { font-family:var(--maru); font-weight:500; font-size:19px;
             white-space:nowrap; font-variant-numeric:tabular-nums; }
.rank-score i { font-family:var(--maru); font-style:normal; font-size:11px;
               color:var(--muted); margin-left:2px; }
.rank-detail { width:100%; font-size:10px; color:var(--muted); letter-spacing:.04em;
               padding:0 12px; }

/* ---- くわしいルール ---- */

.modal { position:absolute; inset:0; background:var(--scrim);
         display:flex; align-items:center; justify-content:center; padding:32px; z-index:10; }
.modal-box { width:100%; max-width:320px; background:var(--card);
             border:1px solid var(--line); border-radius:var(--radius);
             padding:26px 22px; display:flex; flex-direction:column;
             align-items:center; gap:var(--gap-s);
             box-shadow:0 18px 50px rgba(44,44,44,.18);
             animation:pop-in var(--dur) var(--ease) both; }
@keyframes pop-in {
  from { opacity:0; transform:translateY(12px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.modal-title { font-size:16px; letter-spacing:.16em;
               text-indent:.16em; color:var(--celebrate); }
.modal-list { list-style:none; display:flex; flex-direction:column; gap:8px;
              font-size:12px; line-height:1.8; color:var(--ink); letter-spacing:.04em; }
.modal-list li { position:relative; padding-left:13px; }
/* 遊び方そのものではない添え書き。一段落として置く */
.modal-note { font-size:11px; line-height:1.8; color:var(--muted);
              text-align:center; letter-spacing:.02em; }

.modal-list li::before { content:"●"; position:absolute; left:0; top:.15em;
                        font-size:7px; color:var(--accent); }


/* ---- じぶんの記録 ---- */

/* **自分の成績だけを出す。** 順位・他の参加者・参加人数は載せない
   （CLAUDE.md 「参加者から見える範囲」）。 */
.record { display:flex; flex-direction:column; align-items:center; gap:2px; }
.record-main { font-family:var(--maru); font-size:56px; line-height:1;
               font-variant-numeric:tabular-nums; }
.record-main i { font-style:normal; font-size:17px; color:var(--muted); margin-left:2px; }
.record-sub { font-size:12px; line-height:1.9; color:var(--muted);
              letter-spacing:.04em; text-align:center; }
.record-empty { font-size:13px; line-height:1.9; color:var(--muted); text-align:center; }
.record-note { font-size:11px; line-height:1.8; color:var(--muted);
               text-align:center; min-height:1.8em; }
.record-note.failed { color:var(--alert); }