/* =========================================================
   ブラインドタイマー  スタイル
   テーマ：深いフェルトグリーン × 真鍮ゴールド × アイボリー
   ========================================================= */

/* 同梱フォント（オフラインでも同じ見た目に。ネット読み込み不要） */
@font-face{ font-family:'Rajdhani'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/rajdhani-400.woff2') format('woff2'); }
@font-face{ font-family:'Rajdhani'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/rajdhani-500.woff2') format('woff2'); }
@font-face{ font-family:'Rajdhani'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/rajdhani-600.woff2') format('woff2'); }
@font-face{ font-family:'Rajdhani'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/rajdhani-700.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/barlow-400.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/barlow-500.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/barlow-600.woff2') format('woff2'); }

:root{
  --felt-0:#0b1310;      /* 最暗部（背景の芯） */
  --felt-1:#0e1a14;      /* 背景 */
  --felt-2:#132420;      /* パネル */
  --felt-3:#1b332b;      /* 枠・区切り */
  --ivory:#f4ede0;       /* 主要な数字 */
  --ivory-dim:#cdc7b8;
  --sage:#7f9488;        /* 補助テキスト */
  --sage-dim:#546258;
  --gold:#d8b25c;        /* アクセント（真鍮ゴールド） */
  --gold-soft:#a98a3f;
  --amber:#e59a45;       /* 休憩 */
  --brick:#c8503f;       /* 締切・警告 */
  --green-live:#5fbf7e;  /* 稼働中 */

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r-lg:22px; --r-md:14px; --r-sm:9px;

  --font-num:"Rajdhani","Barlow Semi Condensed",system-ui,sans-serif;
  --font-ui:"Barlow Semi Condensed",system-ui,-apple-system,sans-serif;

  --pad: clamp(14px, 2.4vw, 34px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }
body{
  font-family:var(--font-ui);
  color:var(--ivory);
  background:
    radial-gradient(120% 90% at 50% 6%, #14261f 0%, var(--felt-1) 46%, var(--felt-0) 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;
}

button{ font-family:inherit; cursor:pointer; color:inherit; border:none; background:none; }

.app{
  height:100vh; height:100dvh;
  max-height:100vh; max-height:100dvh;
  display:flex; flex-direction:column;
  padding:
    max(var(--pad), env(safe-area-inset-top))
    max(var(--pad), env(safe-area-inset-right))
    max(var(--pad), env(safe-area-inset-bottom))
    max(var(--pad), env(safe-area-inset-left));
  gap:clamp(10px,1.4vh,20px);
}

/* ---------- ヘッダー ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  flex:0 0 auto;
}
.topbar__left{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand{
  font-family:var(--font-num);
  font-weight:600;
  font-size:clamp(18px,2.4vw,30px);
  letter-spacing:.04em;
  color:var(--ivory);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand::before{
  content:"♠"; color:var(--gold); margin-right:.5ch; font-size:.85em;
}
.regbadge{
  font-family:var(--font-num); font-weight:600;
  font-size:clamp(11px,1.1vw,14px); letter-spacing:.08em;
  padding:.28em .8em; border-radius:100px;
  background:rgba(95,191,126,.14); color:var(--green-live);
  border:1px solid rgba(95,191,126,.4);
  white-space:nowrap;
}
.regbadge.is-closed{
  background:rgba(200,80,63,.14); color:var(--brick);
  border-color:rgba(200,80,63,.42);
}
.topbar__right{ display:flex; align-items:center; gap:clamp(10px,1.4vw,20px); }
.wallclock{
  font-family:var(--font-num); font-weight:500;
  font-size:clamp(18px,2.2vw,28px); letter-spacing:.06em;
  color:var(--sage);
}
.iconbtns{ display:flex; gap:8px; }
.iconbtn{
  width:clamp(38px,3.4vw,48px); height:clamp(38px,3.4vw,48px);
  border-radius:var(--r-sm);
  background:var(--felt-2); border:1px solid var(--felt-3);
  display:grid; place-items:center; transition:.18s;
}
.iconbtn:hover{ border-color:var(--gold-soft); background:var(--felt-3); }
.iconbtn svg{ width:52%; height:52%; stroke:var(--ivory-dim); fill:none; }
.iconbtn.is-off svg{ stroke:var(--sage-dim); }

/* ---------- ステージ ---------- */
.stage{
  flex:1 1 auto; min-height:0;
  background:
    linear-gradient(180deg, var(--felt-2), var(--felt-1));
  border:1px solid var(--felt-3);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.stage::after{ /* felt texture vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 70% at 50% 42%, transparent 55%, rgba(0,0,0,.34) 100%);
}

/* ---------- レベル表示 ---------- */
.level-view{
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:clamp(10px,2vw,36px) clamp(14px,3vw,52px);
  gap:clamp(4px,0.9vh,14px);
  position:relative; z-index:1;
}
.level-head{ flex:0 0 auto; }
.nextinfo{ flex:0 0 auto; }
.level-mid{
  flex:1 1 auto; min-height:0; width:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(6px,1.2vh,18px);
}
.level-note{ flex:0 0 auto; }
.level-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.level-tag{ display:flex; align-items:baseline; gap:.5ch; }
.level-tag__label{
  font-family:var(--font-num); font-weight:600;
  letter-spacing:.22em; color:var(--sage);
  font-size:clamp(13px,1.5vw,20px);
}
.level-tag__num{
  font-family:var(--font-num); font-weight:700;
  color:var(--gold);
  font-size:clamp(30px,4.6vw,64px); line-height:.9;
}

.next-card{
  text-align:right;
  border:1px solid var(--felt-3);
  border-radius:var(--r-md);
  padding:clamp(8px,1vw,14px) clamp(12px,1.4vw,20px);
  background:rgba(0,0,0,.18);
  display:grid; gap:2px;
}
.next-card__label{ font-size:clamp(10px,1vw,13px); letter-spacing:.14em; color:var(--sage); }
.next-card__blinds{ font-family:var(--font-num); font-weight:600; font-size:clamp(18px,2.2vw,30px); color:var(--ivory-dim); }
.next-card__ante{ font-size:clamp(11px,1.1vw,15px); color:var(--sage); letter-spacing:.04em; }
.next-card.is-break{ border-color:rgba(229,154,69,.4); }
.next-card.is-break .next-card__blinds{ color:var(--amber); }

/* 巨大クロック */
.clock{
  align-self:center; justify-self:center;
  font-family:var(--font-num); font-weight:600;
  font-variant-numeric:tabular-nums;
  font-size:clamp(56px, min(22vw, 30vh), 360px);
  line-height:.82;
  letter-spacing:.01em;
  color:var(--ivory);
  text-shadow:0 6px 40px rgba(0,0,0,.5);
  transition:color .3s;
  white-space:nowrap;
}
.clock.is-warning{ color:var(--amber); }
.clock.is-final{ color:var(--brick); }
.clock.is-paused{ animation:blink 1.1s steps(2,jump-none) infinite; }
@keyframes blink{ 50%{ opacity:.34; } }

/* 進捗バー */
.progress{
  align-self:center; position:relative;
  width:min(100%, 1100px);
  height:clamp(12px,1.4vh,20px);
  background:rgba(0,0,0,.38);
  border-radius:100px;
  border:1px solid var(--felt-3);
  cursor:pointer;
  touch-action:none;           /* ドラッグ操作を有効化 */
}
.progress:hover, .progress:focus-visible{ border-color:var(--gold-soft); outline:none; }
.progress__bar{
  height:100%; width:100%;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
  border-radius:100px;
  transform-origin:left center;
  transition:transform .3s linear;
  pointer-events:none;
}
.progress--break .progress__bar{ background:linear-gradient(90deg,#b0702c,var(--amber)); }
/* ドラッグ用ハンドル（つまみ） */
.progress__handle{
  position:absolute; top:50%; left:100%;
  width:clamp(20px,1.8vw,28px); height:clamp(20px,1.8vw,28px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--ivory); border:3px solid var(--gold);
  box-shadow:0 2px 10px rgba(0,0,0,.55);
  pointer-events:none;
  transition:left .3s linear;
}
.progress--break .progress__handle{ border-color:var(--amber); }
.progress:hover .progress__handle{ transform:translate(-50%,-50%) scale(1.12); }
.progress.is-scrub .progress__bar{ transition:none; }
.progress.is-scrub .progress__handle{ transition:none; transform:translate(-50%,-50%) scale(1.22); }

/* 時間調整ボタン */
.timeadj{
  align-self:center;
  display:flex; gap:clamp(6px,.8vw,12px);
  margin-top:2px;
}
.adjbtn{
  font-family:var(--font-num); font-weight:600; letter-spacing:.02em;
  font-size:clamp(12px,1.2vw,16px);
  padding:.34em 1em; border-radius:100px;
  background:var(--felt-2); border:1px solid var(--felt-3);
  color:var(--ivory-dim); transition:.15s; white-space:nowrap;
}
.adjbtn:hover{ border-color:var(--gold); color:var(--ivory); background:var(--felt-3); }
.adjbtn:active{ transform:translateY(1px); }
.adjbtn--fwd:hover{ border-color:var(--amber); }

/* ブラインド */
.blinds{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1.4vw,28px);
  flex:0 0 auto; align-self:stretch;
}
.blind{
  text-align:center;
  padding:clamp(8px,1.1vh,18px) 10px;
  border-radius:var(--r-md);
  background:rgba(0,0,0,.16);
  border:1px solid var(--felt-3);
  display:grid; gap:4px;
}
.blind--big{
  background:rgba(216,178,92,.08);
  border-color:rgba(216,178,92,.32);
}
.blind__label{
  font-family:var(--font-num); font-weight:600;
  letter-spacing:.16em; color:var(--sage);
  font-size:clamp(11px,1.2vw,17px);
}
.blind--big .blind__label{ color:var(--gold); }
.blind__val{
  font-family:var(--font-num); font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:clamp(24px, min(4.6vw, 7.5vh), 74px); line-height:.9;
  color:var(--ivory);
}
.blind--big .blind__val{ color:var(--gold); }

.level-note{
  grid-column:1/-1; text-align:center;
  color:var(--brick); font-weight:600;
  font-size:clamp(12px,1.3vw,18px); letter-spacing:.04em;
  margin-top:2px;
}

/* ---------- 休憩表示 ---------- */
.break-view{
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(10px,2vh,28px);
  position:relative; z-index:1;
  padding:clamp(20px,3vw,50px);
}
.break-view__label{
  font-family:var(--font-num); font-weight:700;
  letter-spacing:.3em; color:var(--amber);
  font-size:clamp(28px,5vw,72px);
}
.clock--break{ color:var(--amber); font-size:clamp(56px, min(16vw, 28vh), 300px); }
.break-view__note{
  text-align:center; max-width:24ch;
  color:var(--ivory-dim); font-weight:500;
  font-size:clamp(15px,1.9vw,30px); line-height:1.4;
}
.break-view__next{
  color:var(--sage); font-family:var(--font-num);
  font-size:clamp(15px,1.7vw,26px); letter-spacing:.04em;
}
.break-view__next b{ color:var(--ivory-dim); font-weight:600; }

/* ---------- ステータスバー ---------- */
.statusbar{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(12px,2vw,32px);
}

/* チップ */
.chips{ display:flex; align-items:center; gap:10px; min-width:0; }
.chips__label{
  font-family:var(--font-num); font-weight:600; letter-spacing:.1em;
  color:var(--sage); font-size:clamp(10px,1vw,13px);
  white-space:nowrap;
}
.chips__row{ display:flex; gap:clamp(5px,.7vw,9px); }
.chip{
  --c:#888;
  width:clamp(26px,2.4vw,38px); height:clamp(26px,2.4vw,38px);
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-num); font-weight:700;
  font-size:clamp(9px,.85vw,12px);
  color:#0c0c0c;
  background:
    repeating-conic-gradient(#ffffff 0deg 18deg, var(--c) 18deg 36deg);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.4);
  position:relative;
  transition:.3s;
}
.chip span{
  background:var(--c); color:#0d0d0d;
  border-radius:50%; width:66%; height:66%;
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.chip.is-out{ opacity:.16; filter:grayscale(.7); }
.chip.is-out::after{
  content:""; position:absolute; inset:44% 8% auto; height:2px;
  background:var(--brick); transform:rotate(-18deg);
}

/* 統計 */
.stats{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:clamp(10px,1.6vw,26px);
}
.stat{ display:grid; gap:3px; text-align:center; }
.stat__label{
  font-family:var(--font-num); font-weight:600; letter-spacing:.1em;
  color:var(--sage); font-size:clamp(9px,.9vw,12px);
}
.stat__val{
  font-family:var(--font-num); font-weight:600;
  font-variant-numeric:tabular-nums;
  font-size:clamp(16px,1.7vw,24px); color:var(--ivory);
}
.stat--calc .stat__val{ color:var(--gold); }
.stat__ctrl{ display:flex; align-items:center; gap:6px; }
.stepbtn{
  width:clamp(20px,1.8vw,26px); height:clamp(20px,1.8vw,26px);
  border-radius:6px; background:var(--felt-3); color:var(--ivory-dim);
  font-size:14px; line-height:1; display:grid; place-items:center;
  transition:.15s;
}
.stepbtn:hover{ background:var(--gold-soft); color:#0c0c0c; }

/* トランスポート */
.transport{ display:flex; align-items:center; gap:clamp(10px,1.4vw,20px); justify-self:end; }
.elapsed{
  font-family:var(--font-num); font-weight:500; letter-spacing:.04em;
  color:var(--sage); font-size:clamp(12px,1.2vw,17px); white-space:nowrap;
}
.transport__btns{ display:flex; align-items:center; gap:clamp(7px,.9vw,12px); }
.tbtn{
  width:clamp(42px,3.6vw,54px); height:clamp(42px,3.6vw,54px);
  border-radius:50%;
  background:var(--felt-2); border:1px solid var(--felt-3);
  display:grid; place-items:center; transition:.16s;
}
.tbtn:hover{ border-color:var(--gold-soft); background:var(--felt-3); }
.tbtn svg{ width:44%; height:44%; fill:var(--ivory-dim); stroke:none; }
.tbtn--play{
  width:clamp(56px,4.8vw,74px); height:clamp(56px,4.8vw,74px);
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  border-color:transparent;
}
.tbtn--play svg{ fill:#0c130f; width:42%; height:42%; }
.tbtn--play:hover{ filter:brightness(1.08); }

/* ---------- 開始オーバーレイ ---------- */
.startgate{
  position:fixed; inset:0; z-index:60;
  background:radial-gradient(80% 70% at 50% 40%, #14261f, var(--felt-0));
  display:grid; place-items:center;
  transition:opacity .4s;
}
.startgate.is-hidden{ opacity:0; pointer-events:none; }
.startgate__inner{ text-align:center; display:grid; gap:14px; padding:24px; }
.startgate__title{ font-family:var(--font-num); font-weight:700; font-size:clamp(28px,5vw,60px); color:var(--ivory); }
.startgate__title::before{ content:"♠ "; color:var(--gold); }
.startgate__sub{ color:var(--sage); letter-spacing:.28em; font-family:var(--font-num); font-size:clamp(13px,1.6vw,20px); }
.startgate__btn{
  margin-top:14px; justify-self:center;
  padding:.7em 2.2em; border-radius:100px;
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  color:#0c130f; font-family:var(--font-num); font-weight:700;
  font-size:clamp(18px,2.4vw,28px); letter-spacing:.06em;
  box-shadow:0 10px 30px rgba(216,178,92,.28);
  transition:.16s;
}
.startgate__btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.startgate__hint{ color:var(--sage-dim); font-size:clamp(11px,1.2vw,15px); }

/* ---------- 設定ドロワー ---------- */
.drawer{ position:fixed; inset:0; z-index:80; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:1; }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(560px,94vw);
  z-index:2;                     /* 暗幕より前面に（クリックを受け取れるように） */
  background:var(--felt-1); border-left:1px solid var(--felt-3);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
  animation:slideIn .25s ease;
}
@keyframes slideIn{ from{ transform:translateX(20px); opacity:.6; } }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--felt-3);
}
.drawer__title{ font-family:var(--font-num); font-weight:600; font-size:20px; color:var(--ivory); }
.drawer__close{ font-size:26px; color:var(--sage); width:36px; height:36px; border-radius:8px; }
.drawer__close:hover{ background:var(--felt-3); color:var(--ivory); }
.drawer__body{ flex:1 1 auto; overflow:auto; padding:22px; }
.drawer__subtitle{ font-family:var(--font-num); font-weight:600; font-size:16px; color:var(--gold); margin:18px 0 4px; }
.drawer__hint{ color:var(--sage); font-size:13px; line-height:1.5; margin-bottom:12px; }
.drawer__actions{ display:flex; gap:10px; margin-top:12px; }
.drawer__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:16px 22px; border-top:1px solid var(--felt-3);
}
.drawer__foot-right{ display:flex; gap:10px; }

.field{ margin-bottom:14px; }
.field__label{ display:block; font-size:13px; color:var(--sage); margin-bottom:5px; letter-spacing:.04em; }
.field__input{
  width:100%; padding:10px 12px;
  background:var(--felt-2); border:1px solid var(--felt-3); border-radius:var(--r-sm);
  color:var(--ivory); font-size:15px; font-family:var(--font-ui);
}
.field__input:focus{ outline:2px solid var(--gold-soft); outline-offset:1px; }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; }
.field__check{ display:flex; align-items:center; gap:8px; color:var(--ivory-dim); font-size:14px; padding:6px 0; }
.field__check input{ width:18px; height:18px; accent-color:var(--gold); }

.table-wrap{ overflow:auto; border:1px solid var(--felt-3); border-radius:var(--r-sm); }
.struct-table{ width:100%; border-collapse:collapse; font-size:13px; }
.struct-table th{
  background:var(--felt-2); color:var(--sage); font-weight:600;
  padding:8px 6px; text-align:left; position:sticky; top:0;
  font-family:var(--font-num); letter-spacing:.06em;
}
.struct-table td{ padding:4px 6px; border-top:1px solid var(--felt-3); }
.struct-table input{
  width:100%; min-width:44px; background:var(--felt-2);
  border:1px solid var(--felt-3); border-radius:6px;
  color:var(--ivory); padding:6px 6px; font-size:13px; font-family:var(--font-num);
}
.struct-table input.txt{ min-width:90px; font-family:var(--font-ui); }
.struct-table tr.is-break td{ background:rgba(229,154,69,.06); }
.struct-table tr.is-break input:disabled{ opacity:.3; }
.rowbtns{ display:flex; gap:3px; }
.rowbtn{
  width:24px; height:24px; border-radius:5px; background:var(--felt-3);
  color:var(--sage); font-size:13px; line-height:1; display:grid; place-items:center;
}
.rowbtn:hover{ background:var(--gold-soft); color:#0c0c0c; }
.rowbtn--del:hover{ background:var(--brick); color:#fff; }

.btn{
  padding:10px 18px; border-radius:var(--r-sm);
  font-family:var(--font-num); font-weight:600; font-size:15px; letter-spacing:.03em;
  transition:.16s;
}
.btn--primary{ background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#0c130f; }
.btn--primary:hover{ filter:brightness(1.08); }
.btn--ghost{ background:var(--felt-2); border:1px solid var(--felt-3); color:var(--ivory-dim); }
.btn--ghost:hover{ border-color:var(--gold-soft); }
.btn--danger{ background:transparent; border:1px solid rgba(200,80,63,.5); color:var(--brick); }
.btn--danger:hover{ background:rgba(200,80,63,.14); }

[hidden]{ display:none !important; }

.drawer__share{ margin-top:16px; }.drawer__share .btn{ width:100%; }
.drawer__share .drawer__hint{ margin-top:6px; margin-bottom:0; }

/* 使用チップ編集 */
.chip-edit{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.chip-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 6px 5px 10px; border-radius:100px;
  background:var(--felt-2); border:1px solid var(--felt-3);
  font-family:var(--font-num); font-weight:600; font-size:14px; color:var(--ivory);
}
.chip-pill__dot{
  width:14px; height:14px; border-radius:50%;
  background:var(--c); box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
.chip-pill__x{
  width:20px; height:20px; border-radius:50%;
  background:var(--felt-3); color:var(--sage);
  font-size:13px; line-height:1; display:grid; place-items:center;
}
.chip-pill__x:hover{ background:var(--brick); color:#fff; }
.chip-add{ display:flex; gap:8px; align-items:center; }
.chip-add .field__input{ flex:1; }

/* ヘッダーのロゴ・賞金ボタン */
.brand-logo{ height:clamp(26px,3vw,40px); width:auto; max-width:22vw; object-fit:contain; border-radius:6px; }
.iconbtn#btnPrize{ font-family:var(--font-num); font-weight:700; font-size:clamp(18px,1.8vw,24px); color:var(--gold); }

/* プリセット */
.preset-save{ display:flex; gap:8px; margin-bottom:10px; }
.preset-save .field__input{ flex:1; }
.preset-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.preset-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--felt-3); border-radius:var(--r-sm);
  background:var(--felt-2);
}
.preset-item__name{ flex:1; font-weight:600; color:var(--ivory); font-size:14px; }
.preset-item .rowbtn{ width:auto; padding:0 10px; height:28px; font-family:var(--font-ui); font-size:12px; }

/* 賞金配分エディタ */
.payout-editor{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.payout-row{ display:flex; align-items:center; gap:4px; }
.payout-row .rank{ font-family:var(--font-num); font-weight:600; color:var(--gold); font-size:13px; min-width:34px; }
.payout-row input{ width:64px; background:var(--felt-2); border:1px solid var(--felt-3); border-radius:6px; color:var(--ivory); padding:6px; font-family:var(--font-num); }
.payout-row .rowbtn{ width:24px; height:24px; }

/* テーマ */
.theme-presets{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px; }
.theme-swatch{
  width:40px; height:40px; border-radius:10px; cursor:pointer;
  border:2px solid transparent; position:relative;
}
.theme-swatch.is-active{ border-color:var(--ivory); }
.theme-swatch::after{
  content:""; position:absolute; right:4px; bottom:4px;
  width:10px; height:10px; border-radius:50%; background:var(--sw-accent);
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.field__input.color{ height:44px; padding:4px; cursor:pointer; }
.upload-row{ display:flex; gap:8px; }
.upload-btn{ cursor:pointer; text-align:center; }

/* 賞金オーバーレイ */
.prize{ position:fixed; inset:0; z-index:82; display:grid; place-items:center; }
.prize__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:1; }
.prize__panel{
  position:relative; z-index:2;
  width:min(460px,92vw); max-height:86vh; overflow:auto;
  background:var(--felt-1); border:1px solid var(--felt-3); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:26px 26px 20px; text-align:center;
}
.prize__close{ position:absolute; top:12px; right:14px; font-size:24px; color:var(--sage); width:34px; height:34px; border-radius:8px; }
.prize__close:hover{ background:var(--felt-3); color:var(--ivory); }
.prize__title{ font-family:var(--font-num); font-weight:700; letter-spacing:.1em; color:var(--gold); font-size:22px; }
.prize__pool{ font-family:var(--font-num); font-size:20px; color:var(--ivory-dim); margin:10px 0 4px; }
.prize__pool b{ color:var(--ivory); font-size:30px; }
.prize__meta{ color:var(--sage); font-size:13px; margin-bottom:16px; }
.prize__list{ display:flex; flex-direction:column; gap:8px; }
.prize__place{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:var(--r-md);
  background:var(--felt-2); border:1px solid var(--felt-3);
}
.prize__place .rk{ font-family:var(--font-num); font-weight:700; color:var(--gold); font-size:18px; }
.prize__place .amt{ font-family:var(--font-num); font-weight:700; color:var(--ivory); font-size:22px; }
.prize__place.is-top{ background:rgba(216,178,92,.1); border-color:rgba(216,178,92,.4); }
.prize__hint{ color:var(--sage); font-size:12px; margin-top:14px; }

/* 追加機能のUI */
.iconbtn#btnHands{ font-family:var(--font-num); font-weight:700; font-size:clamp(15px,1.5vw,20px); color:var(--ivory-dim); }
.iconbtns{ flex-wrap:wrap; justify-content:flex-end; }
.nextinfo{ text-align:center; color:var(--sage); font-family:var(--font-num); font-weight:500; letter-spacing:.04em; font-size:clamp(12px,1.3vw,18px); }
.voice-cfg{ margin-top:6px; padding:12px; border:1px solid var(--felt-3); border-radius:var(--r-sm); background:rgba(0,0,0,.12); }
.voice-cfg .btn{ width:100%; }
.voice-cfg input[type=range]{ width:100%; accent-color:var(--gold); }
.tpl-row{ display:flex; gap:8px; margin-bottom:10px; }
.tpl-row .field__input{ flex:1; }
.hands-list{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.hand-row{ display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm); background:var(--felt-2); border:1px solid var(--felt-3); }
.hand-rk{ font-family:var(--font-num); font-weight:700; color:var(--gold); text-align:center; }
.hand-name{ font-weight:600; color:var(--ivory); font-size:15px; }
.hand-desc{ color:var(--sage); font-size:12px; text-align:right; }

/* 縦画面の回転ヒント */
.rotatehint{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:55; max-width:92vw; text-align:center;
  background:rgba(216,178,92,.96); color:#0c130f;
  font-family:var(--font-ui); font-weight:600; font-size:13px; line-height:1.3;
  padding:9px 16px; border-radius:100px; box-shadow:0 8px 24px rgba(0,0,0,.45);
  cursor:pointer;
}

/* スマホなど狭い画面の詰め */
@media (max-width:620px){
  .stats{ gap:6px 12px; }
  .stat__val{ font-size:15px; }
  .stat__label{ font-size:9px; }
  .adjbtn{ font-size:11px; padding:.3em .7em; }
  .blind__label{ font-size:10px; }
  .chip{ width:24px; height:24px; }
  .brand{ font-size:16px; }
  .wallclock{ display:none; }
}
/* 背の低い画面（横向きスマホ等）で調整ボタン・ブラインドを詰める */
@media (max-height:520px){
  .adjbtn{ padding:.24em .6em; font-size:11px; }
  .blind{ padding:5px 8px; }
  .timeadj{ gap:6px; }
}

/* 横向き・背の低い画面（スマホ横など）：はみ出さないよう縮小、必要ならスクロール */
@media (max-height:560px){
  .app{ height:auto; min-height:100dvh; }
  body{ overflow-y:auto; }
  .stage{ min-height:56vh; }
  .clock{ font-size:clamp(64px,17vw,220px); }
  .level-view{ padding:12px 18px; }
}

/* ---------- 縦向き / 狭い画面 ---------- */
@media (max-aspect-ratio:1/1), (max-width:760px){
  .statusbar{ grid-template-columns:1fr; gap:10px; }
  .chips{ justify-content:center; }
  .transport{ justify-self:center; }
  .next-card{ padding:6px 10px; }
  .stats{ gap:12px 18px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}