/* CLI 테마: 화면 전체가 터미널 한 장.
   모든 규칙은 [data-skin="cli"] 아래에만 둔다(다른 테마로 새지 않게). 밝은 배색과 어두운 배색을 둘 다 정한다.
   화면의 모든 글(게임 이름, 규칙, 특수 단어 설명, 순위표 문구 등)은 틀이 용어 키로 꺼내므로 cli.js 의 terms 에서 바꾼다.
   여기서는 글을 숨기거나 content 로 덧씌우지 않고, 나온 글에 모양만 입힌다. 글 앞뒤의 "[ ]" "--" "$ " 같은 기호만 content 로 붙인다. */

/* ---------- 색과 글꼴 ---------- */
[data-skin="cli"]{
  --bg:#f7f7f3; --surface:#f7f7f3; --surface-2:#ecece6; --panel:#e4e4dc;
  --ink:#1c1e21; --muted:#5a5e65; --line:#d3d3ca; --line-strong:#9b9b92;
  --accent:#0e6a2e; --accent-ink:#f7f7f3; --accent-soft:#dcebe0;
  --error:#b3261e; --error-soft:#f5dcd9;
  --c-red:#b3261e; --c-green:#0e6a2e; --c-yellow:#7a5200; --c-blue:#1a56b0; --c-magenta:#8a2fa0; --c-cyan:#0b6a73;
  --gold:#0e6a2e; --gold-soft:#dcebe0; --ice:#0b6a73; --ice-soft:#dcecee; --heal:#7a5200; --heal-soft:#f1e8d2; --clear:#8a2fa0; --clear-soft:#eddff1;
  --scrim:rgba(247,247,243,.985); --focus:#1a56b0;
  --st-bg:#2b7a45; --st-ink:#ffffff;
  --cl-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Apple SD Gothic Neo","Malgun Gothic",monospace;
  --f-body:var(--cl-mono); --f-display:var(--cl-mono); --f-num:var(--cl-mono); --f-word:var(--cl-mono);
  --word:clamp(15px, .5vw + 10px, 18px);
  --radius:0;
}
@media (prefers-color-scheme: dark){
  [data-skin="cli"]{
    --bg:#0c0f12; --surface:#0c0f12; --surface-2:#14181d; --panel:#171b21;
    --ink:#d9dde1; --muted:#8c949d; --line:#242a31; --line-strong:#3f4852;
    --accent:#7bd88f; --accent-ink:#0c0f12; --accent-soft:#16301f;
    --error:#ff7b72; --error-soft:#2d1614;
    --c-red:#ff7b72; --c-green:#7bd88f; --c-yellow:#e6c35c; --c-blue:#6cb0ff; --c-magenta:#d4a3f5; --c-cyan:#5ed3df;
    --gold:#7bd88f; --gold-soft:#16301f; --ice:#5ed3df; --ice-soft:#12292c; --heal:#e6c35c; --heal-soft:#2c2610; --clear:#d4a3f5; --clear-soft:#271d33;
    --scrim:rgba(12,15,18,.985); --focus:#7db7ff;
    --st-bg:#1f5f37; --st-ink:#e2f4e8;
    color-scheme:dark;
  }
}

/* ---------- 틀 ---------- */
[data-skin="cli"] body{font:400 14px/1.5 var(--cl-mono);background:var(--bg);color:var(--ink)}
/* font 줄임 속성이 합자를 되살리므로 !important 로 끈다. 터미널에는 쓴 글자 그대로 보여야 한다 */
[data-skin="cli"] *,[data-skin="cli"] *::before,[data-skin="cli"] *::after{font-variant-ligatures:none!important}
[data-skin="cli"] .app{max-width:none;gap:0;padding:0;grid-template-columns:minmax(0,1fr);background:var(--bg)}
[data-skin="cli"] .top{gap:0}
[data-skin="cli"] .slot-menubar{order:1}
[data-skin="cli"] .slot-toolbar{order:2}
[data-skin="cli"] .top-row{order:3}
[data-skin="cli"] .work{gap:0}
[data-skin="cli"] .frame{min-width:0}
[data-skin="cli"] .brand-h,[data-skin="cli"] .tool-label,[data-skin="cli"] #btnSound,[data-skin="cli"] .launcher-note{display:none}
[data-skin="cli"] kbd{font:500 12px var(--cl-mono);border:0;padding:0;opacity:.8}
[data-skin="cli"] kbd::before{content:"("}
[data-skin="cli"] kbd::after{content:")"}

/* ANSI 색 이름. 출력 블록의 조각이 쓴다 */
[data-skin="cli"] .t-u{color:var(--c-green);font-weight:700}
[data-skin="cli"] .t-d{color:var(--c-blue);font-weight:700}
[data-skin="cli"] .t-cmd{color:var(--ink);font-weight:700}
[data-skin="cli"] .t-ok{color:var(--c-green)}
[data-skin="cli"] .t-err{color:var(--c-red)}
[data-skin="cli"] .t-warn{color:var(--c-yellow)}
[data-skin="cli"] .t-hash{color:var(--c-yellow)}
[data-skin="cli"] .t-dim{color:var(--muted)}

/* 위 탭 줄 */
[data-skin="cli"] .cl-tabs{display:flex;align-items:stretch;height:30px;background:var(--panel);border-bottom:1px solid var(--line);font:500 12px var(--cl-mono);color:var(--muted);overflow:hidden;white-space:nowrap}
[data-skin="cli"] .cl-tab{display:flex;align-items:center;padding:0 16px;color:var(--muted);border-right:1px solid var(--line)}
[data-skin="cli"] .cl-tab.is-on{background:var(--bg);color:var(--ink);box-shadow:inset 0 2px 0 var(--c-green)}
[data-skin="cli"] .cl-new{display:flex;align-items:center;padding:0 12px}
[data-skin="cli"] .cl-title{margin-left:auto;display:flex;align-items:center;padding:0 14px}

/* 돌아가기: 다른 명령 줄과 같은 프롬프트 모양의 "cd .." 한 줄. 점수줄과 붙어 보이지 않게 한 줄을 따로 쓴다 */
[data-skin="cli"] .back{display:flex;flex:0 0 100%;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:700 13px var(--cl-mono);text-decoration:none}
/* 프롬프트는 다른 줄(.t-u 초록, .t-d 파랑)처럼 두 색으로 칠한다. 링크 글은 틀이 용어로 덮어써 안에 칸을 넣을 수 없어,
   앞(::before)과 뒤(::after) 장식을 order 로 둘 다 "cd .." 앞에 세운다. 대체 글("" 빈 값)로 읽기 프로그램에는 "cd .." 만 읽힌다 */
[data-skin="cli"] .back::before{content:"user@devbox";content:"user@devbox" / "";order:-2;color:var(--c-green)}
[data-skin="cli"] .back::after{content:":~/project$ ";content:":~/project$ " / "";order:-1;color:var(--c-blue);white-space:pre}
[data-skin="cli"] .back:hover{color:var(--c-green);text-decoration:underline;text-underline-offset:3px}
[data-skin="cli"] .back:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* 명령 줄과 점수줄 */
[data-skin="cli"] .cl-cmd{padding:10px 14px 2px;font:500 14px/1.5 var(--cl-mono);white-space:pre-wrap;overflow-wrap:anywhere}
[data-skin="cli"] .cl-ps{white-space:nowrap}
[data-skin="cli"] .top-row{gap:4px 20px;padding:2px 14px 10px;align-items:center}
[data-skin="cli"] .stats{flex:1 1 auto;justify-content:flex-start;gap:0 0}
[data-skin="cli"] .stat{display:flex;align-items:baseline;gap:0 1ch;min-width:0}
[data-skin="cli"] .stat + .stat::before{content:"|";color:var(--line-strong);margin:0 0 0 1.5ch}
[data-skin="cli"] .stat dt{font:500 13px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .stat dt::after{content:":"}
[data-skin="cli"] .stat dd{font:700 14px var(--cl-mono);color:var(--ink)}
[data-skin="cli"] .lv{display:none}
[data-skin="cli"] .tools{margin-left:auto;gap:8px}
/* 높이를 못 박는다: 고르기 칸의 높이가 글꼴 계량(line-height:normal)에 따라 20px 에서 22px 로 바뀌어, 숨김 화면을 띄우면 위 띠가 2px 들썩였다(2026-11-09 390x844 실측, 번들 글꼴 도입 뒤) */
[data-skin="cli"] .skin-select{height:20px;padding:2px 22px 2px 6px;border:1px solid var(--line-strong);border-radius:0;background-color:var(--bg);color:var(--ink);font:500 12px var(--cl-mono)}
[data-skin="cli"] .btn{padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:500 13px var(--cl-mono);gap:0}
[data-skin="cli"] .btn::before{content:"[ "}
[data-skin="cli"] .btn::after{content:" ]"}
[data-skin="cli"] .btn:hover:not(:disabled){color:var(--c-green)}
[data-skin="cli"] .btn:active:not(:disabled){transform:none}
[data-skin="cli"] .btn.primary{padding:0;font-size:14px;background:var(--ink);color:var(--bg)}
[data-skin="cli"] .btn.primary:hover:not(:disabled){color:var(--bg);background:var(--c-green)}
[data-skin="cli"] .btn.primary kbd{opacity:.85}
[data-skin="cli"] .btn.quiet{color:var(--muted)}
[data-skin="cli"] .btn:disabled{opacity:.5}

/* 터미널 화면 */
[data-skin="cli"] .canvas{border:0;border-radius:0;background:var(--bg)}
[data-skin="cli"] .skin-deco{z-index:-1}
[data-skin="cli"] .cl-scroll{inset:0;overflow:hidden;padding:6px 14px;font:500 13px/20px var(--cl-mono);color:var(--muted);opacity:.5;white-space:pre}
[data-skin="cli"] .cl-ln{min-height:20px}
[data-skin="cli"] .stage{cursor:text}
[data-skin="cli"] .stage.frozen{background:color-mix(in srgb,var(--c-cyan) 7%,transparent)}

/* 입력줄은 프롬프트 */
[data-skin="cli"] .dock{gap:0;grid-template-columns:minmax(0,1fr) auto;padding:0}
[data-skin="cli"] .entry{border:0;border-radius:0;background:none;padding:6px 14px 4px;gap:1ch}
[data-skin="cli"] .entry:focus-within{border:0}
[data-skin="cli"] .entry:has(#typing.nomatch){border:0}
[data-skin="cli"] .entry:has(#typing.nomatch) #typing{color:var(--c-red)}
[data-skin="cli"] .slot-prompt{display:flex;align-items:center}
[data-skin="cli"] #typing{font:500 15px/1.5 var(--cl-mono);padding:0;color:var(--ink);caret-color:var(--c-green);caret-shape:block}
[data-skin="cli"] #typing::placeholder{color:transparent}
[data-skin="cli"] input,[data-skin="cli"] textarea{caret-color:var(--c-green)}
[data-skin="cli"] .entry-key{display:none}
[data-skin="cli"] .meter{gap:1ch;padding:0 14px;align-self:center;font:500 13px var(--cl-mono)}
[data-skin="cli"] .meter-label{font:500 13px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .meter-label::after{content:":"}
[data-skin="cli"] .meter-cells{gap:0}
[data-skin="cli"] .meter-cells::before{content:"[";color:var(--muted)}
[data-skin="cli"] .meter-cells::after{content:"]";color:var(--muted)}
[data-skin="cli"] .meter-cells i{width:auto;height:auto;border:0;border-radius:0;background:none;font-style:normal;font:500 13px/1.5 var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .meter-cells i::before{content:"-"}
[data-skin="cli"] .meter-cells i.on{background:none}
[data-skin="cli"] .meter-cells i.on::before{content:"#";color:var(--c-green)}
[data-skin="cli"] .meter.alarm .meter-cells i.on::before{color:var(--c-red)}
[data-skin="cli"] .meter-value{font:700 13px var(--cl-mono);min-width:0}
[data-skin="cli"] .hint{padding:0 14px 6px;min-height:1.5em;font:500 13px/1.5 var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .hint:not(:empty)::before{content:"# "}
[data-skin="cli"] .hint.warn{color:var(--c-red)}
[data-skin="cli"] .shake{animation-name:shake}
[data-skin="cli"] .slot-status{grid-column:1 / -1}
[data-skin="cli"] .cl-status{display:flex;align-items:center;gap:1.5ch;height:24px;padding:0 14px;background:var(--st-bg);color:var(--st-ink);font:500 12px var(--cl-mono);white-space:nowrap;overflow:hidden}
[data-skin="cli"] .cl-status .sess{font-weight:700}
[data-skin="cli"] .cl-status .win.on{background:var(--st-ink);color:var(--st-bg);padding:0 1ch;font-weight:700}
[data-skin="cli"] .cl-status .end{margin-left:auto}

/* 알림은 반전된 한 줄 */
[data-skin="cli"] .toast{left:auto;right:14px;top:10px;transform:none;padding:1px 10px;background:var(--ink);color:var(--bg);font:700 13px/1.5 var(--cl-mono);z-index:12}
[data-skin="cli"] .toast.show{animation:cl-toast 1.6s ease forwards}
@keyframes cl-toast{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes cl-out{to{opacity:0}}

/* ---------- 시작, 결과 화면: 도움말과 작업 요약 출력 ---------- */
[data-skin="cli"] .layer{background:var(--scrim);grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:14px 40px;padding:14px;align-content:start}
[data-skin="cli"] .layer-main{gap:12px}
[data-skin="cli"] .layer-title{margin:0;font:700 15px/1.5 var(--cl-mono);letter-spacing:0;color:var(--ink);text-wrap:wrap}
[data-skin="cli"] #resultTitle::before{content:"$ "}
/* 시작 화면 제목은 명령 이름을 "Usage: <이름> [옵션]" 모양으로 감싼다. 이름 자리는 용어(name.<game>)가 채운다 */
[data-skin="cli"] #startTitle::before{content:"Usage: "}
[data-skin="cli"] #startTitle::after{content:" [옵션]";content:" [옵션]" / ""}
[data-skin="cli"] .layer-start .layer-rule{max-width:70ch;font:500 13px/1.6 var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .layer-rule{margin:0;max-width:none}
[data-skin="cli"] .legend{gap:4px 24px;font:500 13px var(--cl-mono)}
[data-skin="cli"] .legend li{gap:1ch}
[data-skin="cli"] .legend li > span{font:500 13px/1.5 var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .start-form{gap:12px}
[data-skin="cli"] .row{gap:10px 32px;align-items:flex-start}
[data-skin="cli"] .seg legend{padding:0;margin-bottom:4px;font:700 13px var(--cl-mono);color:var(--c-blue)}
[data-skin="cli"] .seg legend::before{content:"--"}
[data-skin="cli"] .opts{gap:0 1ch}
[data-skin="cli"] .opts label{min-width:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink);font:500 14px var(--cl-mono)}
[data-skin="cli"] .opts label::before{content:"[ "}
[data-skin="cli"] .opts label::after{content:" ]"}
[data-skin="cli"] .opts label:hover{color:var(--c-green)}
[data-skin="cli"] .opts input:checked + label{background:var(--ink);color:var(--bg);border:0}
[data-skin="cli"] .custom textarea,[data-skin="cli"] .name input{border:0;border-bottom:1px dashed var(--line-strong);border-radius:0;background:none;color:var(--ink);font:500 14px var(--cl-mono);padding:2px 0}
[data-skin="cli"] .name input{width:170px}
[data-skin="cli"] .name input::placeholder{color:transparent}
[data-skin="cli"] .name > span,[data-skin="cli"] .check b{font:700 13px var(--cl-mono);color:var(--c-blue)}
[data-skin="cli"] .check small{font:500 13px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .check input{appearance:none;width:auto;height:auto;margin:0;font:700 14px var(--cl-mono);color:var(--ink)}
[data-skin="cli"] .check input::before{content:"[ ]"}
[data-skin="cli"] .check input:checked::before{content:"[x]"}
[data-skin="cli"] .start-form .link{display:none}
[data-skin="cli"] .actions{gap:8px 20px}
[data-skin="cli"] .small{font:500 13px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .online-note{display:none}

[data-skin="cli"] .final{gap:0 1ch;align-items:baseline}
[data-skin="cli"] .final-score{font:700 34px/1.2 var(--cl-mono);letter-spacing:0}
[data-skin="cli"] .final-unit{font:500 14px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .badge{background:none;font:700 13px var(--cl-mono);color:var(--c-yellow)}
[data-skin="cli"] .results{display:grid;grid-template-columns:repeat(auto-fill,minmax(22ch,1fr));gap:0 28px;max-width:none}
[data-skin="cli"] .results > div{display:flex;gap:1ch;padding:1px 0}
[data-skin="cli"] .results dt{font:500 13px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .results dt::after{content:":"}
[data-skin="cli"] .results dd{font:700 14px var(--cl-mono)}

/* 순위표는 이전 실행 기록 출력 */
[data-skin="cli"] .board{align-self:start;gap:2px;padding:0 0 0 0;border-left:0;min-width:0}
[data-skin="cli"] .board-title{margin:0;font:700 14px/1.5 var(--cl-mono);color:var(--ink)}
/* 목록이 비었을 때만 안내 한 줄(board-note, "(empty)")을 보이고, 기록이 있으면 안내는 감춘다 */
[data-skin="cli"] .board-note{display:block;font:500 13px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .board-list:not(:empty) + .board-note{display:none}
[data-skin="cli"] .board-list li{grid-template-columns:2.4ch minmax(0,1fr) auto;padding:0;border:0;font:500 13px var(--cl-mono)}
[data-skin="cli"] .board-list li.is-mine{margin:0;padding:0;border-radius:0;background:var(--ink);color:var(--bg)}
[data-skin="cli"] .board-list li.is-mine .b-rank,[data-skin="cli"] .board-list li.is-mine .b-meta{color:var(--bg)}
[data-skin="cli"] .b-rank{font:500 13px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .board-list li:nth-child(-n+3) .b-rank{color:var(--c-yellow)}
[data-skin="cli"] .b-name{font-weight:700}
[data-skin="cli"] .b-score{font:700 13px var(--cl-mono)}
[data-skin="cli"] .b-meta{font:500 12px var(--cl-mono);color:var(--muted)}

/* ---------- 무대: 단어는 그냥 글자 ---------- */
[data-skin="cli"] .w{padding:0 1ch;background:var(--bg);border:0;border-radius:0;font:500 var(--word)/1.45 var(--cl-mono);color:var(--ink)}
[data-skin="cli"] .w-hit{color:var(--c-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:700}
[data-skin="cli"] .w.is-match{background:var(--bg);border:0}
[data-skin="cli"] .w.is-target{box-shadow:none}
[data-skin="cli"] .w.is-target .w-rest::first-letter{background:var(--ink);color:var(--bg)}
[data-skin="cli"] .w.is-locked{opacity:.5}
[data-skin="cli"] .w[data-kind="bomb"]{color:var(--c-red)}
[data-skin="cli"] .w[data-kind="boss"]{border:0;font-size:var(--word);font-weight:700;color:var(--c-red)}
[data-skin="cli"] .ent.walker .w{border:0}
[data-skin="cli"] .w-tag{padding:0;border-radius:0;background:none;font:700 var(--word)/1 var(--cl-mono);letter-spacing:0;margin-right:1ch}
[data-skin="cli"] .w-tag::before{content:"["}
[data-skin="cli"] .w-tag::after{content:"]"}
[data-skin="cli"] .w-tag[data-kind="gold"]{background:none;color:var(--c-green)}
[data-skin="cli"] .w-tag[data-kind="ice"]{background:none;color:var(--c-cyan)}
[data-skin="cli"] .w-tag[data-kind="heal"]{background:none;color:var(--c-yellow)}
[data-skin="cli"] .w-tag[data-kind="clear"]{background:none;color:var(--c-magenta)}
[data-skin="cli"] .w-tag[data-kind="bomb"]{background:none;color:var(--c-red)}
[data-skin="cli"] .w-tag[data-kind="boss"]{background:var(--c-red);color:var(--bg)}
[data-skin="cli"] .legend .w-tag{font-size:13px}
[data-skin="cli"] .w.is-pop{animation:cl-out .16s ease-out forwards}
[data-skin="cli"] .w.is-sink{animation:cl-out .4s ease-in forwards}
[data-skin="cli"] .fx-dot,[data-skin="cli"] .fx-ring,[data-skin="cli"] .blast{display:none}
[data-skin="cli"] .fx-float{font:700 13px var(--cl-mono);color:var(--c-green)}
[data-skin="cli"] .fx-float.big{color:var(--c-yellow);font-size:14px}
[data-skin="cli"] .fx-float.bad{color:var(--c-red)}

/* 소나기: 아래에 쌓이는 오류 출력 줄 */
[data-skin="cli"] .pond{display:flex;align-items:flex-end;overflow:hidden;background:var(--bg);border-top:1px dashed var(--c-red)}
[data-skin="cli"] .pond::after{display:none}
[data-skin="cli"] .pond::before{flex:none;padding-left:14px;white-space:pre;font:500 13px/20px var(--cl-mono);color:var(--c-red);
  content:"error: connect ECONNREFUSED 10.0.0.12:5432\A error: ETIMEDOUT waiting for lock job:invoice (3000ms)\A error: Unhandled promise rejection in worker w-03\A error: connect ECONNREFUSED 10.0.0.12:5432\A error: queue overflow depth=10240 limit=10000\A error: ETIMEDOUT waiting for lock job:invoice (3000ms)\A error: EMFILE too many open files, open 'logs/app.log'\A error: connect ECONNREFUSED 10.0.0.12:5432\A error: Unhandled promise rejection in worker w-01\A error: ETIMEDOUT waiting for lock job:export (3000ms)\A error: queue overflow depth=10311 limit=10000\A error: connect ECONNREFUSED 10.0.0.12:5432"}
[data-skin="cli"] .brim{border-top:1px dashed var(--line-strong)}
[data-skin="cli"] .brim-label{right:14px;bottom:2px;padding:0 1ch;background:var(--bg);font:500 12px var(--cl-mono);color:var(--muted)}

/* 레이싱: [#####-----] 45% 진행 막대 */
[data-skin="cli"] .track{padding:6px 0 0}
[data-skin="cli"] .lane{grid-template-columns:24ch minmax(0,1fr) 6ch;gap:0 2ch;height:30px;padding:0 14px;border:0;background:var(--bg)}
[data-skin="cli"] .lane:first-child{border:0}
[data-skin="cli"] .lane-road,[data-skin="cli"] .lane-name small,[data-skin="cli"] .car{display:none}
[data-skin="cli"] .lane-name > span{font:500 14px/1.5 var(--cl-mono);color:var(--ink)}
[data-skin="cli"] .lane-bar{display:block;position:relative;height:1.5em;margin:0 1ch;border-radius:0;background:none;overflow:visible;font:500 14px/1.5 var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .lane-bar::before{content:"------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";display:block;overflow:hidden;white-space:nowrap}
[data-skin="cli"] .lane-bar::after{content:"]";position:absolute;right:-1ch;top:0}
[data-skin="cli"] .lane-bar-fill{position:absolute;left:0;top:0;height:100%;background:none;overflow:visible}
[data-skin="cli"] .lane-bar-fill::before{content:"################################################################################################################################################################################################";display:block;width:100%;overflow:hidden;white-space:nowrap;color:var(--c-blue)}
[data-skin="cli"] .lane-bar-fill::after{content:"[";position:absolute;left:-1ch;top:0;color:var(--muted)}
[data-skin="cli"] .lane[data-me] .lane-bar-fill::before,[data-skin="cli"] .lane.is-done .lane-bar-fill::before{color:var(--c-green)}
[data-skin="cli"] .lane[data-me] .lane-name > span::before{font-weight:700}
[data-skin="cli"] .lane-pct{font:700 14px var(--cl-mono);color:var(--ink)}
[data-skin="cli"] .lane.is-done .lane-pct{color:var(--c-green)}
[data-skin="cli"] .passage{padding:12px 14px 14px;border-top:1px dashed var(--line-strong);background:var(--bg);font:500 clamp(16px, 1vw + 10px, 20px)/1.75 var(--cl-mono);gap:0 1ch}
[data-skin="cli"] .pw{color:var(--muted)}
[data-skin="cli"] .pw.is-done{color:var(--ink);opacity:1}
[data-skin="cli"] .pw.is-current{color:var(--ink);background:none;padding:0;margin:0;border-radius:0}
[data-skin="cli"] .pw.is-error{background:var(--c-red);color:var(--bg)}
[data-skin="cli"] .pw-hit{color:var(--c-green);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
[data-skin="cli"] .pw-rest{display:inline-block}
[data-skin="cli"] .pw.is-current .pw-rest::first-letter{background:var(--ink);color:var(--bg)}
[data-skin="cli"] .countdown{font:700 80px/1 var(--cl-mono);color:var(--ink)}

/* 대포: > 프롬프트와 * 포탄 */
[data-skin="cli"] .ground{background:var(--bg);border-top:1px dashed var(--line-strong)}
[data-skin="cli"] .fort{background:var(--bg);border:0;border-right:1px dashed var(--line-strong)}
[data-skin="cli"] .fort::before{content:"$ ./gate";position:absolute;left:8px;right:auto;top:8px;height:auto;background:none;font:500 12px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .fort[data-low="true"]{background:var(--bg);border-color:var(--c-red)}
[data-skin="cli"] .fort[data-low="true"]::before{color:var(--c-red)}
[data-skin="cli"] .cannon{width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:0;background:none;display:grid;place-items:center;font:700 22px/1 var(--cl-mono);color:var(--c-green)}
[data-skin="cli"] .cannon::before{content:">"}
[data-skin="cli"] .barrel{display:none}
[data-skin="cli"] .shell{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:0;background:none;display:grid;place-items:center;font:700 18px/1 var(--cl-mono);color:var(--c-yellow)}
[data-skin="cli"] .shell::before{content:"*"}

/* 총알 피하기: @ 와 * */
[data-skin="cli"] .arena{background:none}
[data-skin="cli"] .player{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:0;background:none;box-shadow:none;display:grid;place-items:center;font:700 20px/1 var(--cl-mono);color:var(--c-green)}
[data-skin="cli"] .player::before{content:"@"}
[data-skin="cli"] .player.is-hurt{color:var(--c-red)}
[data-skin="cli"] .bullet{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:0;background:none;display:grid;place-items:center;font:700 16px/1 var(--cl-mono)}
[data-skin="cli"] .bullet::before{content:"*";color:var(--c-red)}
[data-skin="cli"] .bullet[data-kind="ring"]::before{content:"o";color:var(--c-yellow)}
[data-skin="cli"] .bullet[data-kind="rain"]::before{content:"|";color:var(--c-magenta)}
[data-skin="cli"] .trail{border-top:1px dotted var(--c-green)}
[data-skin="cli"] .ent.anchor .w{font-size:var(--word)}

/* ---------- 숨김 화면 ---------- */
/* 숨김 화면에서는 점수줄과 눈금, 안내 줄도 감춘다(자리는 그대로 두어 화면이 들썩이지 않게 visibility 로 감춘다) */
[data-skin="cli"] .app.is-hiding :is(.stats,.meter,.hint){visibility:hidden}
/* 틀린 글자를 빨갛게 칠하는 규칙(.entry:has(#typing.nomatch) #typing)이 더 특이해서, 같은 모양으로 맞서야 숨김 중에도 투명이 이긴다(2026-11-09 cannon 실측) */
[data-skin="cli"] .app.is-hiding #typing,
[data-skin="cli"] .app.is-hiding .entry:has(#typing.nomatch) #typing{color:transparent}
/* 터미널처럼 가장 새 출력이 아래에 붙고, 넘치는 윗줄은 잘린다 */
[data-skin="cli"] .boss{display:flex;flex-direction:column;justify-content:flex-end;background:var(--bg);color:var(--ink)}
/* 잘린 윗줄은 배경색으로 서서히 지워 반쪽 글자가 보이지 않게 한다. 배경 자체에 마스크를 주면 뒤의 이전 출력 줄이 비쳐 보여서 덮개로 만든다 */
[data-skin="cli"] .boss::before{content:"";flex:none;position:sticky;top:0;z-index:2;height:36px;margin-bottom:-36px;background:linear-gradient(to bottom,var(--bg) 20%,transparent);pointer-events:none}
[data-skin="cli"] .cl-bossview{padding:8px 14px 14px;font:500 14px/1.5 var(--cl-mono);white-space:pre;color:var(--ink)}
[data-skin="cli"] .cl-bossview .cl-ln{min-height:1.5em}

/* ---------- 게임 고르기 화면: bin 목록 ---------- */
[data-skin="cli"] .menu{padding:0 14px;grid-template-rows:none;grid-auto-rows:minmax(104px, auto)}
[data-skin="cli"] .game-row{padding:12px 0;gap:12px 24px;border-radius:0;border-bottom:1px dashed var(--line-strong);grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) 12ch}
[data-skin="cli"] .game-row:hover,[data-skin="cli"] .game-row:focus-visible{background:var(--surface-2)}
[data-skin="cli"] .gr-key{display:flex;align-items:center;width:auto;height:auto;border:0;border-radius:0;font:700 16px var(--cl-mono);color:var(--c-yellow)}
[data-skin="cli"] .gr-key::before{content:"[";opacity:1}
[data-skin="cli"] .gr-key::after{content:"]";opacity:1}
[data-skin="cli"] .gr-name{font:700 17px/1.4 var(--cl-mono);color:var(--c-green)}
[data-skin="cli"] .gr-rule{max-width:none;font:500 13px/1.5 var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .gr-rule::before{content:"# "}
[data-skin="cli"] .gr-best small{font:500 12px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .gr-best b{font:700 18px var(--cl-mono);color:var(--ink)}
[data-skin="cli"] .gr-top{display:none}
[data-skin="cli"] .gr-preview{border:1px dashed var(--line-strong);border-radius:0;background:var(--bg)}
[data-skin="cli"] .gr-preview .w{font-size:14px}
[data-skin="cli"] .pv-lane{height:16px;margin-top:8px;border:0;background:none;overflow:hidden;font:500 14px/16px var(--cl-mono);color:var(--muted)}
[data-skin="cli"] .pv-lane::before{content:"[------------------------------------------------]";position:absolute;left:0;top:0;white-space:nowrap}
[data-skin="cli"] .pv-lane .car{display:block;left:0;top:0;width:0;height:100%;margin:0;border-radius:0;background:none;overflow:hidden;white-space:nowrap;color:var(--c-green);animation:cl-fill var(--d, 5s) linear infinite}
[data-skin="cli"] .pv-lane .car::before{content:"[################################################";position:static;display:block;width:auto;height:auto;border:0;background:none;color:inherit;border-radius:0;right:auto}
[data-skin="cli"] .pv-lane .car::after{display:none}
@keyframes cl-fill{from{width:6%}to{width:100%}}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1020px){
  [data-skin="cli"] .layer{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  [data-skin="cli"] .game-row{grid-template-columns:auto minmax(0,1fr)}
}
@media (max-width: 640px){
  [data-skin="cli"] .cl-tab:nth-child(3),[data-skin="cli"] .cl-new,[data-skin="cli"] .cl-title{display:none}
  [data-skin="cli"] .cl-cmd{padding:8px 10px 2px;font-size:12.5px}
  [data-skin="cli"] .top-row{padding:2px 10px 8px;gap:4px 12px}
  [data-skin="cli"] .stats{order:3;width:100%;justify-content:flex-start;flex-wrap:wrap}
  [data-skin="cli"] .stat dt{font-size:12px}
  [data-skin="cli"] .stat dd{font-size:13px}
  [data-skin="cli"] .dock{grid-template-columns:minmax(0,1fr)}
  [data-skin="cli"] .entry{padding:6px 10px 2px}
  [data-skin="cli"] .meter{padding:0 10px 2px}
  [data-skin="cli"] .hint{padding:0 10px 4px}
  [data-skin="cli"] .cl-status{padding:0 10px}
  [data-skin="cli"] .cl-status .win:nth-child(4){display:none}
  [data-skin="cli"] .lane{grid-template-columns:13ch minmax(0,1fr) 5ch;gap:0 1ch;padding:0 8px}
  [data-skin="cli"] .lane-name > span::before{font-size:12px}
  [data-skin="cli"] .layer{padding:10px}
  [data-skin="cli"] .menu{padding:0 10px}
  [data-skin="cli"] .cl-scroll,[data-skin="cli"] .cl-bossview{padding-left:10px;padding-right:10px}
}
@media (prefers-reduced-motion: reduce){
  [data-skin="cli"] .pv-lane .car{animation:none}
  [data-skin="cli"] .toast.show{animation:cl-out 1.4s forwards}
}