/* ============================================================
   茨城県体操協会 競技カードシステム
   デザイン：案2「スコアボード」
   体育館の掲示板・競技中継のグラフィックスをイメージした暗い画面。
   数字（出番順・難度点）を主役にする。
   ============================================================ */
:root{
  color-scheme: dark;                 /* プルダウンなど標準部品も暗くする */
  --bg:#12161c;                       /* ページ背景 */
  --panel:#1b212a;                    /* パネル */
  --panel-2:#222b36;                  /* 一段明るいパネル */
  --edge:#2b3441;                     /* 境界線 */
  --edge-2:#3b4756;                   /* 濃いめの境界線 */
  --text:#eef2f7;
  --dim:#8a95a5;                      /* 補助文字 */
  --dim-2:#5d6878;                    /* さらに弱い文字 */
  --lime:#c8f542;                     /* 主アクセント：行動・完了 */
  --lime-dim:rgba(200,245,66,.14);
  --cyan:#3ad6e8;                     /* 副アクセント：番号・情報 */
  --cyan-dim:rgba(58,214,232,.14);
  --amber:#ffb547;                    /* 注意 */
  --amber-dim:rgba(255,181,71,.14);
  --red:#ff6b6b;                      /* エラー */
  --red-dim:rgba(255,107,107,.14);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; padding:0 0 96px; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  line-height:1.65; -webkit-text-size-adjust:100%;
  font-feature-settings:"palt";
}
a{color:var(--cyan)}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}

/* ── ヘッダー ───────────────────────────── */
.site-header{background:var(--panel); border-bottom:2px solid var(--lime); padding:16px 20px 18px}
.site-header .inner{max-width:1080px; margin:auto}
.site-header .org{display:inline-block; background:var(--lime); color:#12161c; margin:0 0 10px;
  font-size:.9rem; font-weight:900; letter-spacing:.16em; padding:5px 14px; border-radius:4px}
.site-header h1{font-size:1.1rem; font-weight:900; margin:0 0 8px; line-height:1.45; letter-spacing:.01em}
.site-header .meta{font-size:.74rem; color:var(--dim); margin:0; display:flex; flex-wrap:wrap; gap:3px 20px;
  font-weight:600; letter-spacing:.04em}
.demo-flag{display:inline-block; background:var(--amber); color:#12161c; font-size:.6rem; font-weight:900;
  padding:2px 9px; border-radius:3px; margin-left:9px; vertical-align:2px; letter-spacing:.1em}

/* ── パネル ─────────────────────────────── */
.card{background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius);
  padding:20px; margin-top:16px}

/* ── 締切カウントダウン ───────────────────── */
.deadline{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--edge); border-left:4px solid var(--cyan);
  border-radius:var(--radius); padding:13px 18px; margin-top:16px}
.deadline .dl-label{font-size:.6rem; font-weight:900; color:var(--dim-2); letter-spacing:.18em}
.deadline .dl-date{font-size:.9rem; font-weight:800; font-family:var(--mono)}
.deadline .dl-clock{font-family:var(--mono); font-size:1.2rem; font-weight:900; color:var(--cyan);
  margin-left:auto; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.deadline.expired{border-left-color:var(--red)}
.deadline.expired .dl-clock{color:var(--red)}

/* ── お知らせ ───────────────────────────── */
.notice{background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--radius);
  padding:12px 16px; font-size:.78rem; color:var(--dim); margin-top:14px; line-height:1.8}
.notice strong{color:var(--lime); font-weight:900; letter-spacing:.06em; margin-right:6px}
.notice b{color:var(--text)}
.notice ul{margin:6px 0 0; padding-left:1.3em}

/* ── 合言葉のバー ───────────────────────── */
.guest-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--edge); border-left:4px solid var(--lime);
  border-radius:var(--radius); padding:14px 18px; margin-top:16px}
.guest-bar .msg{font-size:.8rem; color:var(--dim)}
.guest-bar .msg b{display:block; font-size:.85rem; color:var(--text); margin-bottom:2px; letter-spacing:.04em}
.guest-bar .spacer,.team-bar .spacer{margin-left:auto}

.team-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--lime-dim); border:1px solid rgba(200,245,66,.35);
  border-radius:var(--radius); padding:13px 18px; margin-top:16px}
.team-bar .who{font-size:.9rem; font-weight:900; color:var(--lime); letter-spacing:.02em}
.team-bar .who small{display:block; font-size:.64rem; font-weight:700; color:var(--dim); letter-spacing:.06em}
.team-bar button{padding:7px 14px; font-size:.72rem; border-radius:6px; letter-spacing:.06em;
  border:1px solid var(--edge-2); background:transparent; color:var(--dim); font-weight:800; cursor:pointer}
.team-bar button:hover{color:var(--text); border-color:var(--dim)}

/* ── 絞り込み ───────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius);
  padding:13px 16px; margin-top:16px}
.filters label{display:flex; flex-direction:column; gap:4px;
  font-size:.6rem; font-weight:900; color:var(--dim-2); letter-spacing:.14em}
.filters select{padding:8px 10px; font-size:.86rem; border:1px solid var(--edge-2);
  border-radius:6px; background:var(--panel-2); color:var(--text); min-width:150px; font-weight:600}
.filters select:focus{outline:2px solid var(--cyan); outline-offset:-1px}
.filters .clear{padding:9px 14px; font-size:.74rem; letter-spacing:.06em; border:1px solid var(--edge-2);
  border-radius:6px; background:transparent; color:var(--dim); cursor:pointer; font-weight:800}
.filters .count{margin-left:auto; font-size:.72rem; color:var(--dim-2); font-weight:800;
  font-family:var(--mono); letter-spacing:.04em}

/* ── クラス見出し ───────────────────────── */
.class-block{margin-top:26px}
.class-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--lime); color:#12161c; border-radius:6px 6px 0 0;
  padding:9px 16px; font-weight:900; font-size:1rem; letter-spacing:.02em}
.class-title .cap{background:rgba(18,22,28,.14); font-size:.62rem; font-weight:900;
  padding:3px 9px; border-radius:3px; letter-spacing:.08em}
.class-memo{font-size:.72rem; color:var(--dim-2); padding:8px 16px 0; letter-spacing:.02em}
.gender-title{font-size:.68rem; font-weight:900; color:var(--cyan); margin:18px 0 6px;
  letter-spacing:.2em; display:flex; align-items:center; gap:10px}
.gender-title::after{content:""; flex:1; height:1px; background:var(--edge)}

/* ── 表 ─────────────────────────────────── */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse}
th,td{padding:10px 8px; border-bottom:1px solid var(--edge); text-align:center; font-size:.86rem}
th{color:var(--dim-2); font-size:.58rem; font-weight:900; white-space:nowrap; letter-spacing:.16em;
  border-bottom:1px solid var(--edge-2)}
tbody tr:hover{background:rgba(255,255,255,.02)}
td.num{width:62px; font-family:var(--mono); font-size:1.15rem; font-weight:900; color:var(--dim-2);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
td.name{text-align:left; min-width:140px}
td.name .n{font-weight:800; font-size:.94rem}
td.name .c{display:block; font-size:.7rem; color:var(--dim-2); font-weight:600}
.btn-cell{width:106px}

.status{display:block; width:94px; white-space:nowrap; margin:0 auto; padding:8px 0; border-radius:99px;
  font-size:.66rem; font-weight:900; letter-spacing:.12em; text-decoration:none;
  border:1px solid transparent; transition:.15s}
.status.none{background:var(--lime); color:#12161c}
.status.none:hover{background:#d8ff5c}
.status.done{background:var(--lime-dim); color:var(--lime)}
.status.done:hover{background:rgba(200,245,66,.22)}
.status.locked{background:rgba(138,149,165,.1); color:var(--dim-2); cursor:default}

.mine-row{background:rgba(200,245,66,.045)}
.mine-mark{display:inline-block; background:var(--cyan); color:#12161c; font-size:.55rem;
  font-weight:900; padding:2px 7px; border-radius:3px; margin-left:7px; vertical-align:1px; letter-spacing:.1em}

/* ── ボタン ─────────────────────────────── */
.btn{display:inline-block; padding:12px 26px; border-radius:99px; border:none; cursor:pointer;
  font-size:.86rem; font-weight:900; text-decoration:none; text-align:center;
  letter-spacing:.1em; transition:.15s; white-space:nowrap}
.btn-primary{background:var(--lime); color:#12161c}
.btn-primary:hover{background:#d8ff5c}
.btn-primary:disabled{background:var(--edge-2); color:var(--dim-2); cursor:not-allowed}
.btn-warn{background:var(--amber); color:#12161c}
.btn-ghost{background:transparent; color:var(--dim); border:1px solid var(--edge-2)}
.btn-ghost:hover{color:var(--text); border-color:var(--dim)}
.btn-group{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:22px}

.back-link{display:inline-block; margin-top:16px; font-size:.7rem; color:var(--dim); text-decoration:none;
  border:1px solid var(--edge); background:var(--panel); padding:8px 16px; border-radius:99px;
  font-weight:800; letter-spacing:.08em}
.back-link:hover{color:var(--text); border-color:var(--edge-2)}

/* ── 入力画面：選手情報 ──────────────────── */
.ath-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--edge-2); padding-bottom:14px}
.ath-head .ath-name{font-size:1.6rem; font-weight:900; margin:0; letter-spacing:.01em}
.ath-head .badge{font-size:.62rem; font-weight:900; padding:4px 11px; border-radius:3px;
  background:var(--panel-2); color:var(--dim); letter-spacing:.12em; border:1px solid var(--edge)}
.ath-head .badge.round{background:var(--cyan); color:#12161c; border-color:var(--cyan)}
.ath-info{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin-top:14px;
  font-size:.84rem; align-items:center}
.ath-info dt{color:var(--dim-2); font-size:.6rem; font-weight:900; white-space:nowrap; letter-spacing:.14em}
.ath-info dd{margin:0; font-weight:700}

/* ── 入力画面：技の表 ────────────────────── */
#skill-table td{padding:8px 6px; border-bottom:1px solid var(--edge)}
#skill-table select{width:100%; padding:10px 9px; font-size:.86rem; border:1px solid var(--edge-2);
  border-radius:6px; background:var(--panel-2); color:var(--text); font-weight:600}
#skill-table select:focus{outline:2px solid var(--cyan); outline-offset:-1px}
#skill-table td.num{font-size:1.05rem; color:var(--dim-2)}
#skill-table td.dd-cell{width:82px; font-family:var(--mono); font-weight:900; font-size:1.15rem;
  color:var(--lime); font-variant-numeric:tabular-nums}
#skill-table tr.dup{background:var(--amber-dim)}
#skill-table tr.over{background:var(--red-dim)}
.dd-cell.zero{color:var(--dim-2)}
.flag{display:block; font-size:.55rem; font-weight:900; letter-spacing:.06em; font-family:inherit}
.flag.dup{color:var(--amber)}
.flag.over{color:var(--red)}

/* ── 入力画面：Dスコアの帯（画面下に固定）── */
.total-box{position:sticky; bottom:0; z-index:20; margin-top:20px;
  background:var(--lime); color:#12161c; border-radius:var(--radius);
  padding:14px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(18,22,28,.6)}
/* 帯にはボタンがないので、クリックは下に隠れた技の欄へ通す（帯の下の欄も選べるように） */
.total-box{pointer-events:none}
.total-box .breakdown{font-size:.68rem; font-weight:800; line-height:1.75; letter-spacing:.04em}
.total-box .breakdown b{font-family:var(--mono); font-size:.86rem; font-weight:900}
.total-box .total{margin-left:auto; text-align:right; display:flex; align-items:baseline; gap:10px}
.total-box .total .lbl{font-size:.58rem; font-weight:900; letter-spacing:.24em}
.total-box .total .val{font-family:var(--mono); font-size:2.6rem; font-weight:900; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* ── 知らせの箱 ─────────────────────────── */
.alert{margin-top:12px; border-radius:var(--radius); padding:11px 15px;
  font-size:.8rem; font-weight:700; border:1px solid}
.alert.warn{background:var(--amber-dim); color:var(--amber); border-color:rgba(255,181,71,.35)}
.alert.ok  {background:var(--lime-dim);  color:var(--lime);  border-color:rgba(200,245,66,.35)}
.alert.err {background:var(--red-dim);   color:var(--red);   border-color:rgba(255,107,107,.35)}
.alert b{color:inherit}
.alert ul{margin:6px 0 0; padding-left:1.3em; font-weight:600}

.compulsory{margin-top:16px; font-size:.76rem; color:var(--dim-2)}
.compulsory strong{color:var(--dim); letter-spacing:.08em}
.compulsory ol{margin:6px 0 0; padding-left:1.4em; columns:2; column-gap:24px}

/* ── 合言葉の入力ダイアログ ──────────────── */
.modal-back{position:fixed; inset:0; background:rgba(6,9,13,.8); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:60}
.modal{background:var(--panel); border:1px solid var(--edge-2); border-top:3px solid var(--lime);
  border-radius:var(--radius); padding:26px; max-width:420px; width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal h3{margin:0 0 10px; font-size:1.05rem; font-weight:900; letter-spacing:.04em}
.modal p{margin:0 0 14px; font-size:.8rem; color:var(--dim); line-height:1.8}
.modal p b{color:var(--lime)}
.tk-input{width:100%; padding:14px; font-size:1.4rem; letter-spacing:.2em; font-weight:900;
  font-family:var(--mono); text-align:center; color:var(--cyan);
  background:var(--bg); border:1px solid var(--edge-2); border-radius:6px}
.tk-input:focus{outline:none; border-color:var(--cyan)}
.tk-error{color:var(--red); font-size:.74rem; font-weight:800; min-height:1.2em; margin-top:8px}
.modal-btns{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
.modal-btns .btn{padding:10px 20px; font-size:.78rem}
.tk-note{margin:16px 0 0 !important; font-size:.68rem !important; color:var(--dim-2) !important}

/* ── 取り込み画面 ───────────────────────── */
.step{font-size:.58rem; font-weight:900; letter-spacing:.22em; color:var(--lime); margin-bottom:6px}
.drop{border:2px dashed var(--edge-2); border-radius:var(--radius); padding:26px; text-align:center;
  background:var(--panel-2); margin-top:14px; font-size:.84rem; color:var(--dim)}
.drop.on{border-color:var(--lime); background:var(--lime-dim); color:var(--lime)}
.drop input[type=file]{margin-top:10px; color:var(--dim); font-size:.8rem}
textarea{width:100%; min-height:150px; font-family:var(--mono); font-size:.76rem;
  border:1px solid var(--edge-2); border-radius:6px; padding:10px; resize:vertical;
  background:var(--bg); color:var(--text)}
details summary{color:var(--dim); font-size:.78rem}
.summary{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.stat{flex:1; min-width:118px; background:var(--panel-2); border:1px solid var(--edge);
  border-radius:8px; padding:12px; text-align:center}
.stat .v{font-size:1.7rem; font-weight:900; font-family:var(--mono); line-height:1.2;
  font-variant-numeric:tabular-nums}
.stat .l{font-size:.58rem; font-weight:900; color:var(--dim-2); letter-spacing:.1em}
.stat.new .v{color:var(--cyan)} .stat.keep .v{color:var(--lime)} .stat.gone .v{color:var(--red)}
.preview td,.preview th{font-size:.76rem; padding:7px 6px}
.preview td.l{text-align:left}
.badge-new{background:var(--cyan-dim); color:var(--cyan); font-size:.56rem; font-weight:900;
  padding:3px 8px; border-radius:3px; letter-spacing:.1em}
.badge-keep{background:var(--lime-dim); color:var(--lime); font-size:.56rem; font-weight:900;
  padding:3px 8px; border-radius:3px; letter-spacing:.1em}

/* ── 合言葉の配布リスト ─────────────────── */
.keylist td.key{font-family:var(--mono); font-size:1.15rem; font-weight:900;
  letter-spacing:.18em; color:var(--cyan)}
pre{background:var(--bg) !important; border:1px solid var(--edge) !important; color:var(--dim)}

/* ── 印刷（合言葉リストなど）───────────────
   暗い画面のままでは印刷に向かないので、白地に反転させる。 */
@media print{
  :root{color-scheme:light}
  body{background:#fff; color:#111; padding:0}
  .site-header,.back-link,.btn,.notice,.filters,.guest-bar,.team-bar,.deadline{display:none !important}
  .card{background:#fff; border:none; padding:0; margin:0}
  table th{color:#555; border-bottom:1px solid #333}
  table td{border-bottom:1px solid #ccc; color:#111}
  .keylist td.key{color:#000}
  td.name .c{color:#555}
}

@media (max-width:640px){
  .site-header h1{font-size:.96rem}
  .card{padding:15px}
  .ath-head .ath-name{font-size:1.3rem}
  .total-box{padding:12px 15px}
  .total-box .total .val{font-size:2.1rem}
  .compulsory ol{columns:1}
  th,td{font-size:.8rem}
  td.num{width:50px; font-size:1rem}
  .btn-cell{width:92px}
  .status{width:84px; font-size:.6rem}
}

/* 組（A1・B1）のタグ */
td.num .grp{display:block; background:var(--cyan); color:#12161c; font-family:inherit;
  font-size:.55rem; font-weight:900; letter-spacing:.1em; padding:2px 0; border-radius:3px;
  margin:0 auto 3px; width:34px}

/* ── 入力画面：上部のナビゲーション ────────── */
.page-nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px}
.page-nav .btn{padding:9px 18px; font-size:.76rem}
.page-nav .btn-back{letter-spacing:.06em}
.page-nav #btn-edit-top{margin-left:auto}

/* ── 入力画面：前の演技から写す ─────────────── */
.copy-prev{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;
  background:var(--cyan-dim); border:1px solid rgba(58,214,232,.3);
  border-radius:var(--radius); padding:12px 16px}
.copy-prev-label{font-size:.6rem; font-weight:900; letter-spacing:.16em; color:var(--cyan)}
.copy-prev-btns{display:flex; gap:10px; flex-wrap:wrap}
.copy-prev-btns .btn{padding:9px 18px; font-size:.76rem; border-color:rgba(58,214,232,.45); color:var(--cyan)}
.copy-prev-btns .btn:hover:not(:disabled){background:rgba(58,214,232,.12); color:var(--cyan)}
.copy-prev-btns .btn small{display:block; font-size:.6rem; font-weight:800; opacity:.7;
  letter-spacing:.04em; margin-top:1px; font-family:var(--mono)}
.copy-prev-btns .btn:disabled{opacity:.4; cursor:not-allowed}
.copy-prev.locked{opacity:.5}

/* ── 大会本部としてログイン中の帯 ───────────── */
.admin-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--cyan); color:#12161c; padding:7px 18px}
.admin-bar .who{font-size:.7rem; font-weight:900; letter-spacing:.08em}
.admin-bar .who small{font-weight:700; opacity:.72; margin-left:8px; letter-spacing:0}
.admin-bar button{margin-left:auto; background:rgba(18,22,28,.12); border:none; color:#12161c;
  font-size:.66rem; font-weight:900; letter-spacing:.08em; padding:6px 14px;
  border-radius:99px; cursor:pointer}
.admin-bar button:hover{background:rgba(18,22,28,.22)}

/* ── 入力画面：同じチームの選手から写す ───────── */
.copy-team{display:flex; gap:10px; flex-wrap:wrap; align-items:center; flex-basis:100%}
.copy-team select{flex:1; min-width:220px; padding:9px 10px; font-size:.82rem; font-weight:600;
  border:1px solid rgba(58,214,232,.45); border-radius:6px; background:var(--panel-2); color:var(--text)}
.copy-team .btn{padding:9px 22px; font-size:.76rem; border-color:rgba(58,214,232,.45); color:var(--cyan)}
.copy-team .btn:disabled{opacity:.4; cursor:not-allowed}

/* ── 入力画面：画面の高さが低いとき（Windowsのノートパソコンなど）──
   Dスコアの帯を1段にして薄くし、技の表に重なる面積を減らす */
@media (max-height:820px){
  .total-box{padding:8px 16px; gap:4px 16px}
  .total-box .breakdown{line-height:1.4}
  .total-box .breakdown br{display:none}
  .total-box .breakdown b{margin-right:12px}
  .total-box .total .val{font-size:1.9rem}
}

/* ── 入力画面：スマホ縦向き ───────────────────
   表のままだと技名の欄が細くなって読めないので、
   1種目を2段にする（上段：系統・開始姿勢・難度／下段：技名を横いっぱいに） */
@media (max-width:640px){
  #skill-table thead{display:none}
  #skill-table, #skill-table tbody{display:block}
  #skill-table tr{display:grid; grid-template-columns:30px 1fr 1fr 60px;
    grid-template-areas:"num g s dd" "num k k dd"; gap:6px; align-items:center;
    padding:8px 0; border-bottom:1px solid var(--edge)}
  #skill-table td{border:none; padding:0}
  #skill-table td:nth-child(1){grid-area:num; width:auto; font-size:.95rem}
  #skill-table td:nth-child(2){grid-area:g}
  #skill-table td:nth-child(3){grid-area:s}
  #skill-table td:nth-child(4){grid-area:k}
  #skill-table td:nth-child(5){grid-area:dd; width:auto; font-size:1.05rem}
  #skill-table select{padding:9px 4px; font-size:16px}  /* 16px未満だとiPhoneが勝手に画面を拡大する */
  .total-box .breakdown br{display:none}
  .total-box .breakdown b{margin-right:10px}
}

/* ── 入力画面：リストにない技の案内 ─────────── */
.missing-skill{margin:16px 0 0; font-size:.76rem; color:var(--dim); line-height:1.7}
.missing-skill a{color:var(--cyan); font-weight:700}

/* 同じ技の回数制限（園児）に達した行：赤で強く示す */
#skill-table tr.stop{background:var(--red-dim); box-shadow:inset 3px 0 0 var(--red)}

/* 姿勢がつながらない行（警告。提出はできる） */
#skill-table tr.nolink{background:var(--red-dim)}
#skill-table tr.nolink td:nth-child(3) select{border-color:var(--red)}
.flag .link-msg{display:block; color:var(--red)}