/* where: HEIST / what: heist-legacy.css / why: ページ固有処理を責務ごとに分割 */
/* ── ページ背景 (2026-07-19 Rii2指示) ─────────────────────────────
     assets/storyboard/ca-02 を敷き、上に30%の黒を重ねて暗くする。
     原本は 3840x2160 / 6.5MB あるので 1920幅 JPEG(225KB)へ変換したものを使う。
     背景は body ではなく固定レイヤに置く — bodyに background-attachment:fixed を
     付けるとiOSでスクロール中にガタつくため。黒幕は同じレイヤ内の重ねで持つ。 */
  body{position:relative;}
  /* 2026-07-19 Rii2指示(9): cover(高さ基準で左右が切れる)をやめ、*横幅合わせ* の
     レスポンシブに。100% auto + 上寄せで、画面が縦長でも絵の左右が欠けない。
     画像が画面高に届かない分は下の地色が出るので、暗い地を敷いておく。 */
  body::before{content:'';position:fixed;inset:0;z-index:-2;background-color:#05060c;
    background-image:url('../assets/storyboard/ca-02-1920.jpg');
    background-size:100% auto;background-position:center top;background-repeat:no-repeat;}
  /* 2026-07-19 Rii2指示(6)(8): 背景をさらに暗く(30% → 55% → 72%)。
     カード側が半透明なので、ここを上げるとカード内の文字のコントラストも上がる。 */
  body::after{content:'';position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.72);pointer-events:none;}

  /* 2026-07-19 Rii2指示(9): シノギ/手配度/出撃クルーは3枚→1枚のカードへ統合。
     カード内を3カラムに割り、スマホでは シノギを全幅・残り2つを横並びにする
     (3段積みにするとカードだけで画面の1/3を食うため)。 */
  .heist-top{margin-bottom:20px;}
  .stat-card{border:1px solid var(--border);border-radius:var(--radius,8px);padding:12px 14px;background:var(--surface2,#15151f);}
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .stat-col{min-width:0;}
  .stat-links{display:flex;flex-direction:column;gap:2px;margin-top:2px;}
  @media(max-width:680px){
    .stat-row{grid-template-columns:1fr 1fr;gap:12px 14px;}
    .stat-col:first-child{grid-column:1 / -1;}
    .stat-links{flex-direction:row;gap:12px;flex-wrap:wrap;}
  }
  .stat-card__v{font-family:'Molot','Cinzel',serif;font-weight:400;font-size:1.6rem;color:var(--gold);letter-spacing:.04em;}
  .tgt__name{font-family:'Molot','Noto Sans JP',sans-serif;font-weight:400;font-size:1.02rem;letter-spacing:.05em;}
  .heat-track{height:10px;border-radius:6px;background:var(--bg3,#0c0c12);overflow:hidden;margin-top:6px;}
  .heat-fill{height:100%;border-radius:6px;transition:width .3s;}
  .pick{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;}
  .pick__u{flex:0 0 auto;width:78px;cursor:pointer;border:2px solid var(--border);border-radius:10px;overflow:hidden;
    background:var(--bg2);transition:border-color .12s,transform .12s;}
  .pick__u.sel{border-color:var(--gold);transform:translateY(-2px);}
  .pick__u img{width:100%;height:64px;object-fit:cover;display:block;}
  .pick__u .m{padding:3px 4px;font-size:0.56rem;text-align:center;}
  .tgt{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius,8px);
    padding:12px 14px;background:var(--surface2,#15151f);margin-bottom:10px;}
  /* 2026-09-08 Rii2発注(WP-E 噂→ヤマ): 噂カードは金の左ボーダーで通常のヤマと区別する。 */
  .tgt--rumor{border-left:3px solid var(--gold);}
  /* ── 山ごとの立ち絵 (2026-07-19 Rii2指示) ──────────────────────────
     カード右側に薄く敷く。画像は renderTargets() が --tgt-char に流し込む。
     ⚠ ::after は使えない — 700px以下のレイアウトが .tgt::after を
       clearfix(content:'';display:block;clear:both)に使っており衝突する。
     左へ向かってフェードさせ、切り抜きの縁が立たないようにする。 */
  /* 2026-07-19 Rii2指示(3): 依頼人が「いい感じに映る」ようカードを組み直す。
     5倍(640%)で中央に置いた版は、カード高95pxに対して画像が608pxになり
     全体の15%(胴の帯)しか映らずキャラとして読めなかった — 拡大ではなく
     *カードを縦に伸ばして全身が入る* 方向へ変更。
       ・カードに min-height を与え、立ち絵は頭から入るよう上寄せ
       ・透明度80% + brightness で暗く沈ませる(Rii2指示)
       ・左へフェードさせ、本文の可読性は保つ */
  /* 2026-07-19 Rii2指示(5): PCは3倍(112%→336%)、暗転(brightness)は無し。
     3倍だと画像は約457px高になりカード(136px)には収まらないので、上端合わせで
     *顔から胸* を大きく見せる切り出しにする(中央合わせにすると胴の帯しか
     映らない — 5倍版で実証済み)。横も広く取らないと顔が枠外へ出る。 */
  .tgt{min-height:136px;}
  .tgt::before{content:'';position:absolute;right:0;top:0;bottom:0;width:300px;z-index:0;pointer-events:none;
    background-image:var(--tgt-char,none);background-repeat:no-repeat;
    /* 縦位置は当て推量ではなく実測で決めた: 8体のアルファを測ると頭の中心は
       画像高の約21%(範囲15-26%)。336%だと画像は約457px高なので頭は y≈96px、
       これをカード(136px)の上寄り y≈50 に置くため -45px 送る。
       横は元画像がほぼ中央に立っているので、右+78pxで窓の中心と一致する。 */
    background-position:right -78px top -45px;background-size:auto 336%;
    opacity:.8;}
  /* 2026-07-19 Rii2指示(6): ATTACKボタンの横幅を10px狭める。
     PCは内容幅なので左右パディングを5pxずつ削る(.btn--sm の 6px 14px 由来)。
     スマホ側(width:100%)は下の @media で calc(100% - 10px) にする。
     ⚠ .btn--sm 自体は触らないこと — サイト全体の小ボタンが痩せる。 */
  .tgt > div:last-child .btn--sm{padding-left:9px;padding-right:9px;}
  /* PCは従来のATTACK表記を維持し、スマホだけ下のmedia queryでSWIPE表記へ切り替える。 */
  .tgt__attack-label--mobile{display:none;}

  /* ── ATTACKボタン: リキッドグラス (2026-07-19 Rii2指示(7)) ──────────
     金の面ベタから、金を透かしたガラスへ。白の極薄グラデ地 / blur+saturate /
     上辺のinsetハイライト / 落ち影の4点セット。
     backdrop-filter非対応環境は@supportsで不透明側に落とす(既存方針と同じ)。 */
  .tgt__act .btn--gold{
    background:rgba(201,168,76,.30);border:1px solid rgba(201,168,76,.55);color:#F5ECD8;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px rgba(0,0,0,.5);
    text-shadow:0 1px 3px rgba(0,0,0,.55);transition:all .18s;}
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .tgt__act .btn--gold{
      background:linear-gradient(160deg,rgba(201,168,76,.36) 0%,rgba(201,168,76,.16) 46%,rgba(255,255,255,.05) 100%);
      backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);}
  }
  .tgt__act .btn--gold:hover:not(:disabled){
    border-color:rgba(201,168,76,.85);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 32px rgba(0,0,0,.55),0 0 26px rgba(201,168,76,.34);}

  /* ── PCのみ: ATTACKをカードの水平中央へ (2026-07-19 Rii2指示(7)) ──────
     成功率はその左に添え、立ち絵は右のまま。中央合わせを座標で確定させるため
     ボタン幅を200px固定にしている — コストの桁数(50〜2000)で幅が動くと
     成功率との間隔がカードごとにバラつくため。
     ⚠ 700px以下は既存の縦積みレイアウトのまま(下の@mediaが上書きする)ので、
       ここは min-width:701px で囲って干渉させない。 */
  @media(min-width:701px){
    /* 2026-07-19 Rii2指示(8): ボタンを20px削り(200→180)、空いた分を成功率へ回して
       ％を大きくする。中央合わせは指示(7)のまま維持したいので左右均等に詰めた。
       右アンカーの 106px = ボタン半分(90) + 間隔(16)。ここはボタン幅と連動する。 */
    .tgt__act{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;}
    .tgt__act .btn--sm{width:180px;padding:15px 0;font-size:.86rem;letter-spacing:.06em;}
    /* ⚠ 幅はここで指定しても効かない — 要素側に style="...width:108px" が
       インラインで乗っており(700px以下の属性セレクタ用に残す必要がある)、
       インラインの方が強い。108pxのままで 2rem の「95%」は余裕で収まる。 */
    .tgt__odds{position:absolute;top:50%;right:calc(50% + 106px);transform:translateY(-50%);z-index:2;}
    .tgt__odds .odds{font-size:2rem;line-height:1.05;}
    .tgt__odds .mini{font-size:.68rem;}
    /* 本文は中央のCTAに潜り込まないところで止める
       (106px=ボタン半分+間隔、108px=成功率の実幅、12px=余白) */
    .tgt > div:first-child{max-width:calc(50% - 226px);}
  }
  /* 依頼人チップ + 口上 */
  .tgt__client{font-family:'JetBrains Mono','Share Tech Mono',monospace;font-size:.52rem;
    letter-spacing:.16em;color:var(--gold);opacity:.8;margin:2px 0 1px;}
  .tgt__client b{margin-left:5px;font-size:.66rem;letter-spacing:.05em;color:#fff;}
  .tgt__quote{color:var(--text-muted);font-style:italic;}
  /* 中身は立ち絵の上に乗せる(z-index指定が無いと背面に潜る) */
  /* ⚠ :not(.tgt__act):not(.tgt__odds) を外さないこと。この指定は
     `.tgt__act{position:absolute}`(上の min-width:701px ブロック)と
     詳細度が同じ(0,1,0)で、こちらが後ろにあるため *後勝ちで潰す*。
     実際にPCの中央寄せが効かず、position が relative のままになった。 */
  /* ⚠ .tgt__capo(金庫カードの幹部立ち絵)も除外する。この規則は詳細度が高く、
     除外し忘れると立ち絵が position:relative へ引き戻されて背景に敷けない。 */
  .tgt > *:not(.tgt__act):not(.tgt__odds):not(.tgt__reward-pop):not(.tgt__capo){position:relative;z-index:1;}
  /* ⚠⚠ 結果の *見た目*(青/赤)と *演出*(アニメ)は分けること。2026-08-29 Rii2報告の実バグ:
     成功表示は12秒(RESULT_FLASH_MS)残るので、その間に別のヤマを攻撃すると
     renderTargets() が全カードを作り直し、**まだ結果表示中の他のカードでも
     アニメが再生し直されていた**(攻撃していないカードが一緒に光る/揺れる)。
     アニメは .tgt--flash-* にだけ持たせ、claimResultFlash() が
     「その結果につき一度だけ」付ける。 */
  .tgt--success{border-color:rgba(58,134,255,.88);box-shadow:0 0 0 1px rgba(58,134,255,.18),0 0 24px rgba(58,134,255,.30);
    background:linear-gradient(180deg,rgba(58,134,255,.14),rgba(21,21,31,.96));}
  .tgt--fail{border-color:rgba(230,57,70,.9);box-shadow:0 0 0 1px rgba(230,57,70,.18),0 0 22px rgba(230,57,70,.26);
    background:linear-gradient(180deg,rgba(230,57,70,.12),rgba(21,21,31,.96));}
  .tgt--flash-win{animation:heistCardWin 1.2s ease;}
  .tgt--flash-fail{animation:heistCardFail .8s ease;}
  /* 金庫カード(2026-08-29 Rii2発注): 後ろにその家の幹部立ち絵を薄く敷く。
     ⚠ カードは position:relative を持っている(.tgt__reward-pop の基準)。
       立ち絵は右端に寄せ、左へ向かってフェードさせて文字に被らせない。 */
  .tgt--vault{overflow:hidden;}
  /* ⚠ 左へのグラデーション(mask)は掛けない —— ヤマの立ち絵(.tgt::before)で
     2026-07-19 Rii2指示(4)により撤去された意匠で、tests/validate_heist_clients.py が
     戻っていないかを見張っている。薄さは **不透明度だけ** で出す。
     ⚠⚠ 切り出しはヤマの立ち絵と同じ実測値(336% / right -78px / top -45px)を使う。
       等倍で下寄せにすると **胴の帯しか映らず、薄めた時点で何も見えない**
       (2026-07-19に5倍中央版で踏んだのと同じ失敗を、実測で再現して確認)。
       不透明度はヤマ(.8)より落として .35 —— 「薄く」だが、誰の顔かは分かる。 */
  .tgt__capo{position:absolute;right:-78px;top:-45px;height:336%;width:auto;z-index:0;
    opacity:.35;pointer-events:none;user-select:none;}
  /* 家紋(絵文字から差し替え)。.tgt__ic の枠(42px)の中で中央に置く。 */
  .tgt--vault .tgt__ic{display:flex;align-items:center;justify-content:center;}
  .tgt--vault .tgt__ic .fam-crest{width:30px;height:30px;}
  /* スマホはヤマの立ち絵と同じ扱い(等倍・右-8px)。カードが低くなるので拡大しない。 */
  @media(max-width:700px){
    .tgt__capo{height:100%;top:0;right:-8px;opacity:.3;}
    .tgt--vault .tgt__ic .fam-crest{width:26px;height:26px;}
  }
  /* ⚠ .tgt__ic は消さないこと — 下段のPvP「◯◯の金庫」カードが同じ .tgt を
     使い回しており、今もファミリー絵文字をこの枠で出している。 */
  .tgt__ic{font-size:1.8rem;width:42px;text-align:center;flex-shrink:0;}
  /* 2026-07-19 Rii2指示(4): ヤマのカードだけ、左の大きな独立アイコンをやめて
     絵文字をヤマ名の頭に小さく添える。 */
  .tgt__emoji{font-size:.86rem;margin-right:6px;vertical-align:.05em;}
  .odds{font-family:'Cinzel',serif;font-weight:900;font-size:1.3rem;}
  .odds--success{color:var(--tundra,#3a86ff);text-shadow:0 0 18px rgba(58,134,255,.45);}
  .odds--fail{color:var(--red,#e63946);text-shadow:0 0 16px rgba(230,57,70,.38);}
  .mini{font-size:0.64rem;color:var(--text-muted);}
  .chip{display:inline-flex;align-items:center;gap:4px;font-size:0.6rem;padding:2px 7px;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);}
  @keyframes heistCardWin{
    0%{box-shadow:0 0 0 rgba(58,134,255,0);transform:scale(.985);}
    45%{box-shadow:0 0 36px rgba(58,134,255,.48);transform:scale(1.01);}
    100%{box-shadow:0 0 0 rgba(58,134,255,0);transform:scale(1);}
  }
  /* 成功時だけカード中央から報酬を浮かせる。結果行の「成功！」とは役割を分け、
     獲得した実数を一目で読めるようにする。pointer-events:noneで次の操作を妨げない。 */
  .tgt__reward-pop{position:absolute;top:50%;left:50%;z-index:5;pointer-events:none;white-space:nowrap;
    font-family:'Molot','Cinzel',serif;font-size:clamp(1.35rem,4vw,2.2rem);font-weight:400;letter-spacing:.06em;
    color:#d9f4ff;text-shadow:0 0 5px #3a86ff,0 0 18px rgba(58,134,255,.9),0 2px 5px rgba(0,0,0,.9);
    animation:heistRewardPop 1.55s cubic-bezier(.16,.8,.25,1) both;}
  .tgt__reward-pop--jackpot{color:#ffe39a;text-shadow:0 0 6px #c9a84c,0 0 22px rgba(201,168,76,.95),0 2px 5px rgba(0,0,0,.9);}
  @keyframes heistRewardPop{
    0%{opacity:0;transform:translate(-50%,-8%) scale(.65);}
    18%{opacity:1;transform:translate(-50%,-34%) scale(1.12);}
    58%{opacity:1;transform:translate(-50%,-76%) scale(1);}
    100%{opacity:0;transform:translate(-50%,-130%) scale(.94);}
  }
  @media(prefers-reduced-motion:reduce){.tgt__reward-pop{animation:none;opacity:1;transform:translate(-50%,-50%);}}
  @keyframes heistCardFail{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-7px);}
    40%{transform:translateX(7px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(4px);}
  }
  .feed-strip{display:flex;gap:8px;overflow-x:auto;padding:6px 0;margin-bottom:14px;}
  .feed-item{flex:0 0 auto;font-size:0.68rem;padding:5px 10px;border:1px solid var(--border);border-radius:999px;color:var(--text-dim);white-space:nowrap;}
  .fatigue-badge{display:inline-block;font-size:0.58rem;padding:1px 7px;border-radius:999px;border:1px solid rgba(230,57,70,.4);color:var(--red,#e63946);background:rgba(230,57,70,.08);margin-top:3px;}
  .recon-row{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:0.68rem;color:var(--text-dim);}
  .recon-row input{margin-top:2px;flex-shrink:0;}
  /* C3: Moonlit Convoy event target */
  .tgt--event-live{border-color:rgba(201,168,76,.9);box-shadow:0 0 0 1px rgba(201,168,76,.25),0 0 22px rgba(201,168,76,.35);
    background:linear-gradient(180deg,rgba(201,168,76,.12),rgba(21,21,31,.96));}
  .tgt--event-off{opacity:.55;filter:grayscale(.5);}
  .event-badge{display:inline-flex;align-items:center;gap:3px;font-size:0.6rem;padding:2px 8px;border-radius:999px;
    border:1px solid var(--gold-dim,#5a4d28);color:var(--gold);background:rgba(201,168,76,.12);font-weight:700;}
  .event-badge--live{background:rgba(201,168,76,.28);}
  .event-note{font-size:0.66rem;color:var(--gold-dim,#8a7a45);margin-top:4px;}

  /* ── Mobile card layout — task 2. At <=700px the horizontal
     icon|text|odds|button row squeezes the lore/meta column to ~1 char
     wide. Restructure .tgt (and the PvP vault cards, which share the same
     markup shape) vertically: icon floats next to the name/badge line,
     lore/meta/fatigue/recon/event-note each take the full row below, and
     the last row pairs the odds readout with the action button. Scoped to
     .tgt so nothing on desktop (>700px) changes. ── */
  @media(max-width:700px){
    /* ヤマは4枚ぶんまでを表示領域に収め、5枚目以降だけを領域内で縦に送る。
       touch-action:pan-y により、カードの横スワイプATTACK判定を残しつつ、
       通常の指上下操作は確実に一覧スクロールへ渡す。 */
    #target-list{--heist-target-card-height:146px;max-height:min(calc(4 * var(--heist-target-card-height)),calc(100dvh - 112px));
      overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:y proximity;touch-action:pan-y;padding-right:4px;}
    #target-list .tgt{scroll-snap-align:start;}
    /* スマホは1カードが縦に伸びるので min-height を戻し、立ち絵も細く抑える
       (PCの300px幅/336%のままだと本文に完全に被る)。3倍化はPC限定(Rii2指示)。 */
    .tgt{flex-wrap:wrap;align-items:flex-start;gap:0;padding:12px;min-height:0;}
    .tgt::before{width:132px;background-size:auto 100%;background-position:right -8px top;}
    /* 2026-07-19 Rii2指示(5): スマホでは依頼人の口上を出さない(名前だけ残す)。
       縦に長くなりすぎて1カードが画面の1/4を占めるため。 */
    .tgt__quote{display:none;}
    /* タップ可能なCTA自体をスワイプ案内にする。旧疑似要素ヒントと違い、
       VoiceOver等でも操作目的とコストをそのまま読める。 */
    .tgt__attack-label--mobile{display:inline;}
    .tgt__attack-label--desktop{display:none;}
    .tgt--swiped{animation:tgtSwipeFire .26s ease;}
    @keyframes tgtSwipeFire{
      0%{transform:translateX(0);}45%{transform:translateX(-14px);}100%{transform:translateX(0);}
    }
    .tgt__ic{float:left;margin:0 10px 4px 0;font-size:1.6rem;width:34px;}
    /* the un-classed content <div style="flex:1;min-width:0;"> becomes a
       full-width block so lore/meta text wraps normally instead of being
       squeezed into a sliver next to the odds/button columns. */
    .tgt > div[style*="flex:1"]{flex:1 1 100% !important;width:100%;min-width:100% !important;}
    .tgt .mini{clear:none;}
    /* odds + action button share the final row: odds on the left (inline,
       auto width instead of the desktop 108px column), button fills the rest
       with a comfortable tap target. */
    .tgt > div[style*="width:108px"]{width:auto !important;flex:0 0 auto;text-align:left !important;margin-top:8px;}
    /* button wrapper: target-list cards mark it style="flex-shrink:0;",
       PvP vault cards leave it as a plain <div> — match both via :last-child. */
    .tgt > div:last-child{flex:1;margin-top:8px;display:flex;}
    /* 2026-07-19 Rii2指示(6): 横幅を10px狭める。右に隙間ができ、
       立ち絵がボタンに隠れる量も少し減る。 */
    .tgt > div:last-child .btn{width:calc(100% - 10px);min-height:44px;}
    .tgt{display:flex;}
    .tgt::after{content:'';display:block;clear:both;}
  }

  /* ══ HEIST 操作チュートリアル (2026-08-29 Rii2発注) ═══════════════════════
     ARENAの結果画面「ヤマを踏む」から来た人に、稼ぎ方と危険の測り方を教える。
     作りは city/crew/arena の同名モジュールと同型(4枚の板・次へ/スキップ/ESC)。
     ⚠⚠ 穴あきは box-shadow の巨大spreadで作らないこと(穴の中のボタンが押せない)。 */
  .heist-tutorial[hidden]{display:none;}
  .ct-dim{position:fixed;z-index:1000;background:rgba(4,5,14,.72);}
  .ct-ring{position:fixed;z-index:1001;border:2px solid var(--gold,#C9A84C);border-radius:10px;
    box-shadow:0 0 0 2px rgba(4,5,14,.55),0 0 22px rgba(201,168,76,.45);pointer-events:none;
    animation:ctRing 1.5s ease-in-out infinite;}
  .ct-ring[hidden]{display:none;}
  @keyframes ctRing{0%,100%{opacity:.5;}50%{opacity:1;}}
  .ct-board{position:fixed;z-index:1002;pointer-events:auto;width:min(360px,92vw);
    padding:12px 16px 13px;border-radius:10px;background:rgba(8,9,17,.94);
    border:1px solid var(--gold,#C9A84C);box-shadow:0 8px 40px rgba(0,0,0,.65);}
  .ct-board__t{font-family:'Cinzel',serif;font-size:15px;font-weight:800;letter-spacing:.12em;
    color:var(--gold,#C9A84C);text-align:center;}
  .ct-board__c{margin-top:6px;font-size:11.5px;line-height:1.75;color:rgba(255,255,255,.78);}
  .ct-board__c b,.ct-board__c strong{color:var(--gold,#C9A84C);}
  .ct-board__c .ct-warn{color:#e8574c;}
  .ct-actions{display:flex;align-items:center;gap:10px;margin-top:11px;}
  .ct-step{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.4);margin-left:auto;}
  .ct-next{padding:7px 15px;border-radius:6px;border:1px solid var(--gold,#C9A84C);background:rgba(201,168,76,.14);
    color:var(--gold,#C9A84C);font-family:'Cinzel',serif;font-size:11px;letter-spacing:.1em;cursor:pointer;}
  .ct-next:hover{background:var(--gold,#C9A84C);color:#101015;}
  .ct-skip{padding:7px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:transparent;
    color:rgba(255,255,255,.5);font-size:10px;line-height:1.2;cursor:pointer;}
  .ct-skip:hover{color:#fff;border-color:rgba(255,255,255,.4);}