/* オンライン おとどけレース（js/online.js）の画面と、レース中の名札。本編の .card / .btn の見た目に合わせる */
.onl[hidden], .onl [hidden], .onl-wait[hidden], .onl-wait [hidden] { display: none !important; }
.onl { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(44, 58, 85, .45); }
.onl.onl-top { z-index: 55; }
.onl:not([hidden]) .onl-card { animation: cardIn .28s cubic-bezier(.2, .85, .3, 1.15); }
.onl-card { max-height: calc(100dvh - 32px); text-align: center; }
.onl-card h3 { color: var(--orange-deep); }
.onl-card section { display: block; }
.onl-text { font-size: 13px; font-weight: 500; line-height: 1.75; text-align: left; margin: 0 0 .7em; }
.onl-text b { color: var(--orange-deep); }
.onl-field { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; text-align: left; }
.onl-field span { flex: none; font-size: 13px; font-weight: 800; }
.onl-card input:not([type=checkbox]) { flex: 1; min-width: 0; width: 100%; padding: 10px 14px; border: 3px solid var(--navy); border-radius: 999px;
  background: #fff; color: var(--navy); font: 700 16px 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
  -webkit-user-select: text; user-select: text; }
.onl-card input:focus { outline: none; border-color: var(--orange); }
#onlCode { letter-spacing: .25em; text-transform: uppercase; text-align: center; font-family: 'Fredoka', 'M PLUS Rounded 1c', sans-serif; }
.onl-wide { display: block; width: 100%; margin-top: 12px; }
.onl-card .btn:disabled { opacity: .4; cursor: default; transform: none; }
.onl-or { margin: 16px 0 6px; font-size: 12px; font-weight: 800; opacity: .7; }
.onl-join { display: flex; gap: 8px; }
.onl-join .btn { flex: none; }
.onl-link { margin: 12px 0 0; padding: 4px; background: none; color: #1f7fb8; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.onl-code { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 8px; }
.onl-code span { font-size: 11.5px; font-weight: 800; opacity: .7; }
.onl-code b { font: 600 34px/1.1 'Fredoka', 'M PLUS Rounded 1c', sans-serif; letter-spacing: .14em; padding-left: .14em; color: var(--orange);
  -webkit-text-stroke: 4px var(--navy); paint-order: stroke fill; -webkit-user-select: all; user-select: all; }
.onl-share { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.onl-seats, .onl-result, .onl-wait-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.onl-seat, .onl-result li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; padding: 7px 12px; margin: 0 0 6px;
  border: 2.5px solid var(--navy); border-radius: 14px; background: #fff; }
.onl-seat.me, .onl-result li.me { box-shadow: 0 0 0 3px rgba(255, 155, 61, .55); }
.onl-seat.empty { opacity: .45; border-style: dashed; }
.onl-seat i, .onl-result i, .onl-wait-list i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--navy); }
.onl-seat b, .onl-result b { font-size: 14px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onl-seat b small { display: block; font-size: 10.5px; font-weight: 700; opacity: .6; }
.onl-seat em { font-style: normal; font-size: 12px; font-weight: 800; opacity: .65; white-space: nowrap; }
.onl-seat em.ok { color: #2e9a48; opacity: 1; } .onl-seat em.away { color: #e07a12; opacity: 1; }
.onl-row { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.onl-row .btn:not(.small) { flex: 1; padding-left: 16px; padding-right: 16px; }
#onlReady.on { background: #fff; color: var(--orange-deep); text-shadow: none; }
.onl-ghost { margin-top: 12px; }
.onl-check { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.onl-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--orange); }
.onl-status { min-height: 1.4em; margin: 12px 0 0; font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--orange-deep); white-space: pre-line; }
.onl-status:empty { margin: 0; min-height: 0; }
.onl-status.wait::after { content: "…"; display: inline-block; animation: onlDots 1.2s steps(4) infinite; width: 1.2em; overflow: hidden; vertical-align: bottom; text-align: left; }
@keyframes onlDots { 0% { width: 0; } 100% { width: 1.2em; } }
.onl-note { margin: 12px 0 0; font-size: 11.5px; font-weight: 500; line-height: 1.6; opacity: .65; }
.onl-result-head { margin: 0 0 10px; font: 600 24px/1.2 'Fredoka', 'M PLUS Rounded 1c', sans-serif; color: var(--orange-deep); }
.onl-result li { grid-template-columns: 34px 14px 1fr auto; row-gap: 0; }
.onl-result .rk { font: 600 16px 'Fredoka', 'M PLUS Rounded 1c', sans-serif; }
.onl-result .sc { font: 600 17px 'Fredoka', 'M PLUS Rounded 1c', sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.onl-result small { grid-column: 3 / 5; font-size: 11px; font-weight: 700; opacity: .6; }
.onl-result small:empty { display: none; }
/* ゴールしたあとの待ち表示（飛びながら見られるよう、画面上の小さな札。左上のチップの下から） */
.onl-wait { position: fixed; top: calc(100px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 24;
  width: min(calc(100% - 32px), 330px); padding: 10px 14px 8px; text-align: center;
  background: rgba(255, 249, 236, .94); border: 3px solid var(--navy); border-radius: 18px; box-shadow: var(--shadow); }
.onl-wait-head { font-size: 14px; font-weight: 800; color: var(--orange-deep); }
.onl-wait-mine { margin: 2px 0 6px; font-size: 11.5px; font-weight: 700; opacity: .75; }
.onl-wait-list li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 7px; padding: 2px 2px; font-size: 13px; }
.onl-wait-list li.me b { color: var(--orange-deep); }
.onl-wait-list i { width: 12px; height: 12px; }
.onl-wait-list b { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onl-wait-list em { font-style: normal; font-weight: 700; font-size: 12px; opacity: .75; white-space: nowrap; font-variant-numeric: tabular-nums; }
.onl-wait .onl-link { margin-top: 4px; }
.onl-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 8px); max-width: calc(100% - 32px);
  padding: 8px 18px; background: rgba(255, 255, 255, .96); border: 2px solid var(--navy); border-radius: 999px; font-size: 13.5px; font-weight: 800;
  box-shadow: 0 3px 0 rgba(44, 58, 85, .15); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onl-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* タイトルのボタン（ほかのモードより低い1行。低い画面でも縮まない） */
.btn.mode.race { flex-direction: row; justify-content: center; gap: 8px; padding: 9px 18px; background: #e9f7ff; flex-shrink: 0; }
.btn.mode.race b { font-size: 16px; }
.btn.mode.race em { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--navy); color: #fff; }
#modeRow { flex-shrink: 0; }
/* レース中の名札。画面の外にいるときは端に寄せて、向きを矢印で指す */
#raceTags { position: fixed; inset: 0; z-index: 19; pointer-events: none; overflow: hidden; }
.race-tag { position: absolute; left: 0; top: 0; will-change: transform; }
.race-tag.hidden { display: none; }
.race-tag b { position: absolute; left: 0; bottom: 4px; transform: translateX(-50%); white-space: nowrap; padding: 2px 10px; border-radius: 999px;
  background: var(--c); color: #fff; border: 2px solid var(--navy); font-size: 12px; font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  box-shadow: 0 2px 0 rgba(44, 58, 85, .2); }
.race-tag i { display: none; }
.race-tag.edge b { bottom: auto; top: 0; transform: translate(calc(-50% + var(--ox, 0px)), calc(-50% + var(--oy, 0px))); opacity: .92; }
.race-tag.edge i { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.race-tag.edge i::after { content: ""; position: absolute; left: -6px; top: -9px; border-left: 14px solid var(--c); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  filter: drop-shadow(0 0 1.5px var(--navy)) drop-shadow(0 0 .5px var(--navy)); }
@media (prefers-reduced-motion: reduce) { .onl-status.wait::after { animation: none; width: 1.2em; } }
/* レースのボタンを足したぶん、やや低い画面（701〜820px）で鳩の絵が縮まないよう、下の余白（クレジットの逃げ）と並びの間隔を少し詰める */
@media (min-height: 701px) and (max-height: 820px) {
  #title { padding-bottom: calc(60px + env(safe-area-inset-bottom)); gap: 10px; }
  #modeRow { gap: 8px; }
}