/* 카메라 점수판(/tt/play/cam). 색·글꼴·간격은 사이트 토큰과 kit.css 의 탁구 소품 색을 그대로 쓴다.
 *
 * 화면이 둘로 갈린다.
 * - 준비 화면(무대 .tpStage 안) — 다른 놀이터 도구와 같은 판·버튼·말풍선.
 * - 카메라 화면(.camLayer, body 바로 아래 고정) — 영상 위라 테마와 상관없이 늘 어두운 바탕이다. 그래서 그 위의 글자·판은
 *   밝은 글자 + 반투명 검은 판으로 고정하고(어느 테마에서도 대비 AA), 바깥에서 여는 창(조정·설정 시트)만 테마를 따른다.
 * 쌓는 순서: 앱 탭바(65)·설치 칩(68) 위, 「새 버전」 띠(70)·설치 안내(80) 아래(pwa.js).
 */

/* ── 준비 화면 ── */
.camSetup{display:grid;gap:var(--sp-4)}
.camField{display:grid;gap:6px}
.camLabel{font-weight:800;font-size:var(--fs-sm);color:var(--dim)}
.camHint{font-size:var(--fs-sm);color:var(--dim);margin:0}
.camSeg{display:flex;flex-wrap:wrap;gap:6px}
.camSeg button{appearance:none;font:inherit;font-weight:700;cursor:pointer;border:2px solid var(--border-2);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 16px;min-height:44px;transition:transform .2s var(--tp-spring)}
.camSeg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.camSeg button:active{transform:scale(.95)}
.camSeg button:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.camNames{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.camName{display:flex;align-items:center;gap:8px;border:2px solid var(--border-2);border-radius:14px;padding:4px 12px;background:var(--surface);min-height:48px}
.camName span{font-weight:800;color:var(--accent-text);font-size:var(--fs-sm)}
.camName input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--fs-base);padding:8px 0}
.camName input:focus{outline:none}.camName:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.camTips{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));list-style:none;margin:0;padding:0}
.camTips li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.5;background:var(--surface-2);border-radius:14px;padding:10px 12px}
.camTips li::before{content:"";flex:none;width:12px;height:12px;margin-top:4px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink)}
.camResume{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);justify-content:space-between;border:2px solid var(--accent);background:var(--accent-bg);border-radius:18px;padding:var(--sp-3) var(--sp-4)}
.camResume b{font-size:var(--fs-lg)}
.camResume .tpMeta{margin:2px 0 0}
.camOpen{display:grid;gap:var(--sp-3);justify-items:center;text-align:center;padding:var(--sp-4) 0}

/* ── 카메라 화면 ── */
html.camOpenDoc,html.camOpenDoc body{overflow:hidden}
.camLayer{position:fixed;inset:0;z-index:69;background:#120f10;color:#fffaf2;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;
  --cb-scale:1;--cb-alpha:.9;--cam-top:max(10px,env(safe-area-inset-top,0px));--cam-side:max(10px,env(safe-area-inset-left,0px));--cam-side-r:max(10px,env(safe-area-inset-right,0px))}
.camVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#120f10}
.camLayer[data-mirror="1"] .camVideo{transform:scaleX(-1)}
.camLayer[data-cam="off"] .camVideo{display:none}
/* 카메라가 없을 때의 바탕 — 위에서 본 탁구대 */
.camBack{position:absolute;inset:0;display:none;background:radial-gradient(circle at 14px 14px,rgba(255,250,242,.05) 3px,transparent 3.5px) 0 0/30px 30px,linear-gradient(180deg,#332b2c,#1d1819)}
.camBack::before{content:"";position:absolute;left:12%;right:12%;top:30%;bottom:30%;border:3px solid rgba(255,250,242,.35);border-radius:12px;background:rgba(38,32,31,.6)}
.camBack::after{content:"";position:absolute;left:50%;top:26%;bottom:26%;width:3px;margin-left:-1px;background:rgba(255,250,242,.4)}
.camLayer[data-cam="off"] .camBack,.camLayer[data-cam="wait"] .camBack{display:block}

/* 득점 칸 — 화면 왼쪽·오른쪽 반쪽 전체 */
.camZones{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;z-index:1}
.camZone{appearance:none;border:0;margin:0;padding:0 0 calc(18px + env(safe-area-inset-bottom,0px));background:transparent;color:inherit;font:inherit;cursor:pointer;position:relative;display:flex;align-items:flex-end;justify-content:center;
  -webkit-tap-highlight-color:transparent;outline:none}
.camZone::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 70%,rgba(255,250,242,.28),transparent 60%);opacity:0;transition:opacity .35s}
.camZone.hit::after{opacity:1;transition:none}
.camZone:focus-visible{box-shadow:inset 0 0 0 4px #ffc83d}
.camZone + .camZone{border-left:2px dashed rgba(255,250,242,.16)}
/* 안내는 가운데 선 쪽으로 붙인다 — 바깥 아래 귀퉁이는 점수판 자리다 */
.camZone.left{justify-content:flex-end;padding-right:14px}.camZone.right{justify-content:flex-start;padding-left:14px}
.camZoneTag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);border-radius:999px;padding:8px 14px;background:rgba(18,15,16,.55);
  color:#fffaf2;font-weight:800;font-size:var(--fs-md);border:2px solid rgba(255,250,242,.28);opacity:.8;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camZoneTag b{color:#ffc83d}
.camLayer[data-hints="off"] .camZoneTag{display:none}
.camZone.armed .camZoneTag{opacity:1;border-color:#ffc83d;background:rgba(179,18,63,.85);animation:camArm .7s var(--tp-spring) infinite alternate}
.camZone .camHold{position:absolute;left:0;right:0;bottom:0;height:6px;background:#ffc83d;transform-origin:left;transform:scaleX(0);z-index:1}
.camZone.holding .camHold{transform:scaleX(1);transition:transform .5s linear}
@keyframes camArm{to{transform:scale(1.08)}}

/* 위 도구줄 — 영상 위에서도 보이게 둥근 검은 단추 */
.camTop{position:absolute;z-index:4;top:var(--cam-top);left:var(--cam-side);right:var(--cam-side-r);display:flex;gap:8px;align-items:center;pointer-events:none}
.camTop > *{pointer-events:auto}
.camTop .sp{flex:1;pointer-events:none}
.camIco{appearance:none;font:inherit;cursor:pointer;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,250,242,.3);background:rgba(18,15,16,.62);color:#fffaf2;padding:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .2s var(--tp-spring)}
.camIco svg{width:22px;height:22px}
.camIco:active{transform:scale(.92)}
.camIco:focus-visible{outline:3px solid #ffc83d;outline-offset:2px}
.camIco[aria-pressed="true"]{background:#fffaf2;color:#b3123f;border-color:#fffaf2}
.camIco[disabled]{opacity:.45;cursor:default}
.camIco.rec[aria-pressed="true"]{background:#e0103c;color:#fff;border-color:#fff}
/* 녹화 시간·LIVE — 도구줄 아래 가운데(도구줄이 375px 에 꽉 차서) */
.camPills{position:absolute;z-index:4;top:calc(var(--cam-top) + 54px);left:50%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
.camPill{display:inline-flex;align-items:center;gap:6px;min-height:32px;border-radius:999px;padding:4px 12px;background:rgba(18,15,16,.62);border:2px solid rgba(255,250,242,.3);font-weight:800;font-size:var(--fs-sm);white-space:nowrap}
.camPill.rec{border-color:#ff5a7a}
.camPill.rec::before{content:"";width:10px;height:10px;border-radius:50%;background:#ff5a7a;animation:camBlink 1.2s steps(2,start) infinite}
.camPill.live{background:#b3123f;border-color:#fff}
@keyframes camBlink{to{visibility:hidden}}
@media (max-width:420px){.camTop{gap:6px}.camTop .opt{display:none}}

/* ── 방송식 점수판 ── 영상 위에 늘 떠 있다. 눌림은 아래 득점 칸이 받는다 */
.camBoard{position:absolute;z-index:3;pointer-events:none;transform-origin:left bottom;transform:scale(calc(var(--cb-scale) * var(--cb-base,1)));
  left:max(16px,env(safe-area-inset-left,0px));bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 70px));font-variant-numeric:tabular-nums;width:max-content;max-width:min(92vw,520px)}
.camLayer[data-pos="br"] .camBoard{left:auto;right:max(16px,env(safe-area-inset-right,0px));transform-origin:right bottom}
.camLayer[data-pos="tl"] .camBoard{bottom:auto;top:calc(var(--cam-top) + 56px);transform-origin:left top}
.camLayer[data-pos="tr"] .camBoard{bottom:auto;left:auto;top:calc(var(--cam-top) + 56px);right:max(16px,env(safe-area-inset-right,0px));transform-origin:right top}
.cbBox{border-radius:14px;overflow:hidden;background:rgba(16,12,13,var(--cb-alpha));box-shadow:0 10px 26px -10px rgba(0,0,0,.6);border:1px solid rgba(255,250,242,.14)}
.cbHead{display:flex;align-items:center;gap:6px;padding:5px 10px 4px;font-size:12px;font-weight:800;letter-spacing:.02em;color:#ffd7df;background:rgba(179,18,63,var(--cb-alpha))}
.cbHead i{flex:none;width:9px;height:9px;border-radius:50%;background:#fffaf2;border:2px solid #2a2326}
.cbHead .gm{margin-left:auto;color:#fffaf2;opacity:.92}
.cbRow{display:grid;grid-template-columns:22px minmax(64px,1fr) 34px 52px;align-items:stretch;min-height:44px;position:relative}
.cbRow + .cbRow{border-top:1px solid rgba(255,250,242,.12)}
.cbSrv{display:grid;place-items:center}
.cbSrv i{width:13px;height:13px;border-radius:50%;background:#fffaf2;border:2px solid #2a2326;box-shadow:0 0 0 2px #ffc83d;transform:scale(0);transition:transform .35s var(--tp-spring)}
.cbRow.serving .cbSrv i{transform:scale(1)}
.cbName{align-self:center;padding:0 10px 0 2px;font-weight:800;font-size:19px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:13em;color:#fffaf2}
.cbGames{display:grid;place-items:center;font-weight:900;font-size:19px;color:#fffaf2;background:rgba(255,250,242,.1)}
.cbPts{display:grid;place-items:center;font-weight:900;font-size:26px;color:#fff;background:#b3123f;min-width:52px}
.cbRow.lead .cbPts{background:#d11a4d}
.cbRow.flash::after{content:"";position:absolute;inset:0;background:rgba(255,200,61,.45);animation:cbFlash .7s ease-out forwards;pointer-events:none}
@keyframes cbFlash{from{opacity:1}to{opacity:0}}
.cbPts span{display:inline-block}
.cbFlag{display:none;margin:6px 0 0;width:max-content;max-width:100%;border-radius:999px;padding:4px 12px;font-weight:900;font-size:14px;letter-spacing:.02em;color:#2a2326;background:#ffc83d;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.cbFlag.on{display:block;animation:cbIn .45s var(--tp-spring)}
.cbFlag.match{background:#fffaf2;color:#b3123f}
.cbFlag.end{background:#b3123f;color:#fff}
@keyframes cbIn{from{transform:translateY(8px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.cbGamesLine{margin:6px 0 0;display:flex;gap:4px;flex-wrap:wrap}
.cbGamesLine span{border-radius:8px;padding:2px 7px;font-size:12px;font-weight:800;background:rgba(16,12,13,var(--cb-alpha));color:#fffaf2;border:1px solid rgba(255,250,242,.14)}


/* 득점 공 — 누른 칸에서 점수판으로 날아간다 */
.camBall{position:fixed;z-index:5;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fffaf2;border:3px solid #2a2326;pointer-events:none;
  animation:camFly .55s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes camFly{0%{transform:translate(var(--x0),var(--y0)) scale(1.2)}55%{transform:translate(calc((var(--x0) + var(--x1)) / 2),calc(min(var(--y0),var(--y1)) - 80px)) scale(1)}
  100%{transform:translate(var(--x1),var(--y1)) scale(.5);opacity:.2}}

/* 알림(게임 끝·엔드 교대) */
.camToast{position:absolute;z-index:6;left:50%;top:38%;display:flex;align-items:center;gap:10px;max-width:min(90%,460px);transform:translate(-50%,-50%);
  background:var(--surface);color:var(--text);border:3px solid var(--accent);border-radius:20px;padding:12px 18px;box-shadow:var(--shadow-lg);font-size:var(--fs-lg);font-weight:800;
  animation:camToast 2.6s var(--tp-spring) both;pointer-events:none}
.camToast .tpPongi{width:48px}
@keyframes camToast{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0}}

/* 카메라 없음·불러오는 중 안내 */
.camNote{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-62%);width:min(88vw,420px);display:grid;gap:10px;justify-items:center;text-align:center;
  background:rgba(18,15,16,.94);border:2px solid rgba(255,250,242,.2);border-radius:22px;padding:18px;color:#fffaf2;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.camNote[hidden]{display:none}
.camNote p{margin:0;line-height:1.55}
.camNote .tpPongi{width:76px}
.camNote .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.camNote .sk{width:70%;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,250,242,.12),rgba(255,250,242,.28),rgba(255,250,242,.12)) 0 0/200% 100%;animation:camSk 1.2s linear infinite}
.camNote .sk.s{width:45%}
@keyframes camSk{to{background-position:-200% 0}}
.camLayer .tpBtn.ghost{background:rgba(255,250,242,.94);color:#2a2326;border-color:#fffaf2;box-shadow:0 3px 0 rgba(0,0,0,.35)}

/* 자동 점수 제안 칩(자리만 — 실시간 자동 점수가 들어오면 쓴다) */
.camChip{position:absolute;z-index:5;left:50%;top:calc(var(--cam-top) + 54px);transform:translateX(-50%);display:grid;gap:8px;width:min(92vw,440px);
  background:var(--surface);color:var(--text);border:3px solid var(--border-2);border-radius:20px;padding:12px 14px;box-shadow:var(--shadow-lg);animation:cbIn .4s var(--tp-spring)}
.camChip[hidden]{display:none}
.camChip.review{border-color:#ffc83d;box-shadow:0 0 0 4px rgba(255,200,61,.45),var(--shadow-lg)}
.camChip p{margin:0;font-weight:800}
.camChip .tpMeta{font-weight:600}
.camChip .row{display:flex;gap:8px;flex-wrap:wrap}
.camChip .row .tpBtn{flex:1}
.camConf{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.camConf i{display:block;height:100%;background:var(--accent)}

/* ── 시트(조정·설정·끝·녹화) — <dialog>. 테마를 따른다 ── */
.camSheet{border:0;padding:0;margin:auto auto 0;width:min(560px,100%);max-height:88dvh;max-height:88vh;border-radius:26px 26px 0 0;background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);overflow:hidden}
.camSheet::backdrop{background:rgba(20,14,16,.55)}
.camSheet[open]{display:flex;flex-direction:column;animation:camUp .35s var(--tp-spring)}
@keyframes camUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){.camSheet{margin:auto;border-radius:26px}}
.camSheetHead{display:flex;align-items:center;gap:10px;padding:14px 14px 10px 18px;border-bottom:2px solid var(--border)}
.camSheetHead h2{margin:0;font-size:var(--fs-xl);flex:1}
.camSheetHead .tpPongi{width:40px}
.camX{appearance:none;border:2px solid var(--border-2);background:var(--surface);color:var(--text);border-radius:50%;width:44px;height:44px;font-size:20px;line-height:1;cursor:pointer;flex:none}
.camX:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.camSheetBody{overflow:auto;padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:16px;overscroll-behavior:contain}
.camSheetBody h3{margin:0;font-size:var(--fs-md);color:var(--dim);font-weight:800}
.camSec{display:grid;gap:10px}
.camAdj{display:grid;gap:10px}
.camAdjRow{display:grid;grid-template-columns:repeat(2,minmax(0,auto));justify-content:space-around;gap:6px 10px;align-items:center;border:2px solid var(--border-2);border-radius:18px;padding:10px 12px}
.camAdjRow b{grid-column:1/-1;font-size:var(--fs-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camAdjRow .srv{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink);margin-left:6px;vertical-align:1px}
.camStep{display:grid;grid-template-columns:44px 44px 44px;align-items:center;justify-items:center;gap:2px;text-align:center}
.camStep small{grid-column:1/-1;font-size:var(--fs-xs);color:var(--dim);font-weight:700}
.camStep output{font-weight:900;font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
.camStep button{appearance:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--border-2);background:var(--surface-2);color:var(--text);font:inherit;font-size:22px;font-weight:900;cursor:pointer;line-height:1}
.camStep button:active{transform:scale(.92)}
.camStep button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.camStep button[disabled]{opacity:.4;cursor:default}
.camHist{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:260px;overflow:auto}
.camHist li{display:flex;align-items:center;gap:10px;border-radius:12px;background:var(--surface-2);padding:6px 6px 6px 12px;font-size:var(--fs-md)}
.camHist li span{flex:1;min-width:0}
.camHist li.adj{border-left:4px solid var(--accent)}
.camHist li.dead span{color:var(--dim);text-decoration:line-through}
.camHist .n{flex:none;color:var(--dim);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;width:2.6em}
.camEmpty{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:var(--fs-md)}
.camEmpty .tpPongi{width:44px}
.camRange{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-weight:700;font-size:var(--fs-md)}
.camRange input{width:100%;min-height:44px;accent-color:var(--accent)}
.camRange output{font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right;color:var(--dim)}
.camSwitch{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:800;cursor:pointer}
.camSwitch input{appearance:none;flex:none;width:52px;height:30px;border-radius:999px;background:var(--surface-3);border:2px solid var(--border-2);position:relative;cursor:pointer;margin:0;transition:background .2s}
.camSwitch input::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fffaf2;border:2px solid #2a2326;transition:transform .25s var(--tp-spring)}
.camSwitch input:checked{background:var(--accent);border-color:var(--accent)}
.camSwitch input:checked::after{transform:translateX(22px)}
.camSwitch input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.camSwitch span small{display:block;font-weight:600;color:var(--dim);font-size:var(--fs-sm)}
.camKeys{display:grid;gap:8px}
.camKey{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.camKey code{font-size:var(--fs-xs);color:var(--dim);overflow-wrap:anywhere}
.camKey .tpBtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.camNoteBox{border-radius:14px;background:var(--surface-2);padding:10px 12px;font-size:var(--fs-sm);line-height:1.55;margin:0}
.camNoteBox.warn{background:var(--warn-bg);border-left:4px solid var(--warn-fill)}
.camSkel{height:44px;border-radius:14px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)) 0 0/200% 100%;animation:camSk 1.2s linear infinite}
.camLiveRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.camLiveRow input[type=text]{flex:1;min-width:10em;min-height:44px;border:2px solid var(--border-2);border-radius:12px;padding:8px 12px;font:inherit;background:var(--surface);color:var(--text)}
.camLiveRow input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.camLiveBadge{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:var(--fs-sm);color:#fff;background:var(--accent);border-radius:999px;padding:4px 12px 4px 10px}
.camLiveBadge::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;animation:camBlink 1.4s steps(2,start) infinite}

/* 경기 끝 */
.camEnd{display:grid;gap:12px;justify-items:center;text-align:center}
.camEnd h3{margin:0;font-size:var(--fs-2xl);color:var(--text);display:flex;align-items:center;gap:6px}
.camEnd h3 .tpPongi{width:48px}
.camEnd .scores{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.camEnd .scores span{border-radius:10px;padding:4px 10px;background:var(--surface-2);font-weight:800;font-variant-numeric:tabular-nums}
.camEnd .tpBtns{width:100%}
.camEnd .tpShare{width:100%}
.camRecPrev{width:100%;max-height:40vh;border-radius:16px;background:#120f10}

@media (prefers-reduced-motion:reduce){
  .camBall,.camZone.armed .camZoneTag,.cbFlag.on,.camChip,.camSheet[open],.camPill.rec::before,.camLiveBadge::before,.camNote .sk,.camSkel{animation:none}
  .camToast{animation:tpFade .2s both}
  .cbRow.flash::after{animation:none;opacity:0}
  .cbSrv i,.camIco,.camSeg button,.camSwitch input::after,.camZone::after{transition:none}
  .camZone.holding .camHold{transition:none}
}
.camSheet p{margin:0}
/* 녹화 단추는 멈춰 있을 때 빨간 점 — 어느 카메라 앱에서나 보는 모양 */
.camIco.rec[aria-pressed="false"] svg path{fill:#ff5a7a;stroke:#ff5a7a}
/* 색종이(kit.confetti, z 60)가 카메라 화면 뒤에 숨지 않게 */
html.camOpenDoc .tpConfetti{z-index:71}

/* ── 가로(기본·1순위) ── 점수판은 왼쪽 아래 귀퉁이, 득점 칸 안내는 도구줄 아래(점수판과 겹치지 않게),
   녹화 시간·LIVE 는 도구줄 줄에. 조정·설정은 아래에서 올라오는 시트 대신 오른쪽 옆 패널 — 영상 가운데(탁구대)를 덜 가린다. */
.camLayer[data-orient="landscape"] .camBoard{bottom:max(14px,env(safe-area-inset-bottom,0px))}
.camLayer[data-orient="landscape"] .camZone{align-items:flex-start;padding-top:calc(var(--cam-top) + 58px);padding-bottom:0}
.camLayer[data-orient="landscape"] .camPills{top:calc(var(--cam-top) + 6px);left:calc(var(--cam-side) + 54px);transform:none}
.camLayer[data-orient="landscape"] .camChip{top:auto;bottom:max(14px,env(safe-area-inset-bottom,0px));left:auto;right:var(--cam-side-r);transform:none;width:min(46vw,400px)}
@media (orientation:landscape){
  .camSheet{margin:0 0 0 auto;width:min(440px,62vw);height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:26px 0 0 26px}
  .camSheet[open]{animation:camSide .3s var(--tp-spring)}
  .camSheetBody{padding-right:max(18px,env(safe-area-inset-right,0px));padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
  .camSheetHead{padding-right:max(14px,env(safe-area-inset-right,0px))}
}
@keyframes camSide{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}

/* 세로로 들었을 때 — 「옆으로 눕혀 주세요」. 닫으면 세로로도 계속 쓴다 */
.camRotate{position:absolute;inset:0;z-index:7;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:24px;background:rgba(18,15,16,.82);color:#fffaf2}
.camRotate p{margin:0;max-width:22em;line-height:1.55}
.camRotate b{font-size:var(--fs-xl)}
.camRotate .sub{color:#e9dfe1;font-size:var(--fs-md)}
.camRotate .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.camRotateArt{width:120px;height:120px;display:grid;place-items:center}
.camRotateArt .phone{width:46px;height:84px;border:4px solid #fffaf2;border-radius:12px;display:grid;place-items:center;animation:camTurn 2.4s var(--tp-spring) infinite}
.camRotateArt .phone i{width:14px;height:14px;border-radius:50%;background:#fffaf2;border:3px solid #b3123f}
@keyframes camTurn{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.camRotateArt .phone{animation:none;transform:rotate(-90deg)}.camSheet[open]{animation:none}}
/* 큰 화면(태블릿·노트북)에서는 점수판도 같이 키운다 — 폰 기준 크기면 영상 위에서 너무 작다 */
@media (min-width:1000px) and (min-height:600px){.camLayer{--cb-base:1.35}}

/* 「경기 시작」 — 몸풀기 동안만. 멀리서도 보이게 크게, 득점 칸 위에 */
.camStart{position:absolute;z-index:4;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 12px));transform:translateX(-50%);display:grid;justify-items:center;gap:8px;pointer-events:none}
.camStart[hidden]{display:none}
.camStart > *{pointer-events:auto}
.camStartHint{margin:0;border-radius:999px;padding:5px 14px;background:rgba(18,15,16,.72);color:#fffaf2;font-weight:800;font-size:var(--fs-sm);border:2px solid rgba(255,250,242,.25);white-space:nowrap}
.camStartBtn{appearance:none;border:3px solid #fffaf2;cursor:pointer;font:inherit;font-weight:900;font-size:clamp(22px,4.4vmin,30px);color:#fff;background:var(--accent,#b3123f);border-radius:999px;
  padding:14px 34px;min-height:64px;display:inline-flex;align-items:center;gap:12px;box-shadow:0 6px 0 #6e0b27,0 14px 30px -10px rgba(0,0,0,.7);animation:camGlow 1.8s ease-in-out infinite;transition:transform .2s var(--tp-spring)}
.camStartBtn .ball{width:22px;height:22px;border-radius:50%;background:#fffaf2;border:3px solid #2a2326}
.camStartBtn:active{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 #6e0b27}
.camStartBtn:focus-visible{outline:4px solid #ffc83d;outline-offset:4px}
.camStart.nudge .camStartBtn{animation:camNudge .5s var(--tp-spring)}
@keyframes camGlow{0%,100%{box-shadow:0 6px 0 #6e0b27,0 0 0 0 rgba(255,200,61,.55)}50%{box-shadow:0 6px 0 #6e0b27,0 0 0 12px rgba(255,200,61,0)}}
@keyframes camNudge{25%{transform:translateX(-8px) rotate(-3deg)}75%{transform:translateX(8px) rotate(3deg)}}
.camLayer[data-phase="warmup"] .camZoneTag{display:none}
.camLayer[data-phase="warmup"] .cbPts{background:#4a3a3e}
@media (prefers-reduced-motion:reduce){.camStartBtn,.camStart.nudge .camStartBtn{animation:none}}