/* crew vs crew screens (shared by prototype + mockups) */
.cvc .rulesline{margin-top:auto;text-align:center;font:700 12px Inter;color:var(--muted);border-top:1px solid var(--line);background:rgba(255,255,255,.6);min-height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cvc .rulesline.dark{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.12);color:#CFC6F5}
.cvc .steps{display:flex;gap:6px;flex-wrap:wrap}
.cvc .steps span{font:700 11.5px Inter;border:1.5px solid #CFCAE0;border-radius:10px;padding:3px 8px;color:var(--muted);background:#fff}
.cvc .steps .ok{color:var(--green-d);border-color:var(--green-d);background:#E3F9EE}
.cvc .steps .on{color:#fff;background:var(--ink);border-color:var(--ink)}
.opt-tag{font:700 10.5px Inter;letter-spacing:0;text-transform:none;background:#EDEAF6;color:var(--muted);border-radius:6px;padding:1px 6px;margin-left:4px}
.types{display:flex;flex-wrap:wrap;gap:6px}
.tchip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:22px;background:#fff;font:700 13.5px Inter}
.tchip .e{font-size:16px}
.tchip small{position:absolute;top:-9px;right:6px;background:var(--yellow);border:1.5px solid var(--ink);border-radius:6px;font:800 9.5px Inter;padding:0 4px;letter-spacing:.03em}
.tchip.sugg-on{border-style:dashed;background:#FFF8DB;box-shadow:0 0 0 3px rgba(255,210,63,.55)}
.tchip.sel{background:var(--ink);color:#fff}
.tchip.skip{border-style:dashed;color:var(--muted);border-color:#A7A2B8}
.hintline{font:600 12.5px Inter;color:#6b5a1d;background:#FFF1C9;border-radius:10px;padding:6px 9px;line-height:1.4}
.notice{font:600 12.5px Inter;line-height:1.45;color:var(--ink);border:1.5px solid #CFCAE0;border-radius:12px;padding:8px 10px;background:#fff}
.notice a{color:var(--night2);text-decoration:underline;white-space:nowrap;margin-left:2px}
.seg{display:flex;margin:2px 14px 8px;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff}
.seg span{flex:1;text-align:center;font:800 13px Inter;padding:9px 4px;color:var(--muted)}
.seg span.on{background:var(--ink);color:#fff}
.seg span.lock{color:#A7A2B8}
/* canvas-drawn card, shown as an image */
.rimg{margin:0 14px;border-radius:16px;border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:radial-gradient(130% 90% at 85% -10%,#5B3FD6 0,#2B1A6B 55%,#1E1250 100%);color:#fff;padding:16px 16px 12px;position:relative;overflow:hidden}
.rimg .eb{font:800 11.5px Inter;letter-spacing:.06em;color:#D9D0FF}
.rimg .crownrow{display:flex;align-items:flex-end;gap:8px;margin-top:6px}
.rimg .cr{font-size:40px;line-height:1}
.rimg .win{font:800 54px 'Baloo 2';line-height:.9;color:var(--yellow);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);padding-top:6px}
.rimg .sc{font:800 32px 'Baloo 2';line-height:1;margin-left:auto}
.rimg .sc small,.rimg .bigsc small{font-size:15px;color:#D9D0FF;margin-left:2px}
.rimg .gap{font:800 22px 'Baloo 2';margin-top:8px;line-height:1.1}
.rimg .count{display:inline-block;margin-top:10px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:4px 10px;font:700 14px Inter}
.rimg .ft{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:14px;padding-top:10px;border-top:2px dashed rgba(255,255,255,.3);font:600 11.5px Inter;color:#E4DEFF}
.rimg .crewnm{font:800 40px 'Baloo 2';line-height:1;margin-top:6px;padding-top:4px}
.rimg .bigsc{font:800 72px 'Baloo 2';line-height:.9;color:var(--yellow);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);margin-top:4px;padding-top:6px}
.rimg .lbl2{font:700 12px Inter;color:#D9D0FF;margin-top:4px}
.rimg .line{font:800 25px 'Baloo 2';line-height:1.1;margin-top:8px;padding-top:2px}
.rimg .line b{color:#fff}
.rimg .forfeit{margin-top:10px;background:#FF8FB6;color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:7px 10px;font:700 13px Inter;line-height:1.35}
.rimg .crown7{margin-top:8px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:7px 10px;font:700 13px Inter}
.rimg .chk{margin-top:12px;background:#FFF1C9;color:#5b4300;border:2px solid var(--ink);border-radius:12px;padding:9px 10px;font:800 14px Inter}
.rimg.pending{background:radial-gradient(130% 90% at 85% -10%,#4b4570 0,#2d2950 60%,#1f1c3a 100%)}
.caption{margin:10px 14px 0;background:#fff;border:1.5px solid #DAD8E3;border-radius:12px;padding:7px 10px;font:600 13.5px Inter;line-height:1.4}
.caption u{color:var(--night2)}
.lockline{margin:10px 14px 0;border:1.5px dashed #A7A2B8;border-radius:12px;padding:8px 10px;font:600 12.5px Inter;color:var(--muted);line-height:1.4}
.tgl{margin:0 14px 10px;display:flex;align-items:center;gap:10px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:8px 12px;box-shadow:0 3px 0 var(--ink)}
.tgl b{display:block;font:800 16px 'Baloo 2';line-height:1.05;padding-top:2px}
.tgl span{font:600 11.5px Inter;color:var(--muted)}
.sw{flex:none;width:52px;height:30px;border-radius:15px;background:#D9D5E3;border:2px solid var(--ink);position:relative}
.sw i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.sw.on{background:var(--green)}.sw.on i{left:24px}
.ocard{margin:12px 16px 0;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:2.5px solid var(--ink);border-radius:16px;padding:9px 12px;box-shadow:0 4px 0 #0b0820}
.ocard>div:first-child{flex:1}.ocard b{display:block;font:800 21px 'Baloo 2';line-height:1;padding-top:2px}.ocard span{font:600 11.5px Inter;color:var(--muted)}
.ocard .v{font:800 34px 'Baloo 2';color:var(--night2);line-height:1;padding-top:4px}
.ocard .c{font:800 12px Inter;text-align:center;background:#FFF1C9;border:2px solid var(--ink);border-radius:10px;padding:3px 6px;line-height:1.2}
.land .dk{text-align:center;font:700 13px Inter;color:#FFD23F;margin:10px 18px 8px;line-height:1.4}
.pnote{margin:8px 14px 0;border:1.5px dashed var(--pink-d);color:var(--pink-d);border-radius:12px;padding:6px 9px;font:700 11.5px Inter;line-height:1.4;text-align:center}
.pnote code{font:700 11px ui-monospace,monospace}
.pnote a{text-decoration:underline}
.reccode{margin:8px 0 4px;text-align:center;font:800 40px 'Baloo 2';letter-spacing:.06em;padding:14px 8px 8px;border:2.5px dashed var(--ink);border-radius:18px;background:#FFF8E6}
.capav{position:relative;overflow:visible}.capav .cr{position:absolute;top:-14px;right:-8px;font-size:20px;transform:rotate(18deg)}
.capbadge{display:inline-block;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);border-radius:8px;padding:0 5px;font:800 10.5px Inter;letter-spacing:.04em}
.pend{margin:6px 14px 0;display:flex;gap:10px;align-items:center;background:#EDEAF6;border:2px solid var(--ink);border-radius:14px;padding:8px 11px}
.pend .e{font-size:22px}.pend b{display:block;font:800 16px 'Baloo 2';line-height:1.05;padding-top:2px}.pend span{font:600 12px Inter;color:var(--muted)}
.form3{margin:10px 14px 0;padding:12px}
.form3 .h{display:flex;justify-content:space-between;align-items:center;font:800 19px 'Baloo 2';padding-top:2px}
.form3 .ct{font:800 13px Inter;background:var(--ink);color:#fff;border-radius:9px;padding:3px 8px}
.meter{height:14px;border-radius:7px;background:#ECEAF1;border:2px solid var(--ink);overflow:hidden;margin:8px 0 10px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#7EE6AE)}
.slots{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.slot{display:flex;align-items:center;gap:9px;min-height:42px;border:2px dashed #A7A2B8;border-radius:12px;padding:0 10px}
.slot.done{border:2px solid var(--ink);background:#fff}
.slot .n{flex:1;font:700 14.5px Inter;display:flex;gap:6px;align-items:center}.slot .s{font:800 20px 'Baloo 2';padding-top:3px}.slot .ok{color:var(--green-d);font:800 16px Inter}
.av.q{background:#fff;border-style:dashed;color:var(--muted)}
.warnbox{margin:10px 14px 0;background:#FFE9D6;border:2px solid #C25A00;border-radius:12px;padding:8px 10px;font:700 12.5px Inter;color:#6a3100;line-height:1.4}
.vs{margin:4px 14px 0;display:flex;align-items:center;padding:12px 8px}
.vs .side{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.vs .side b{font:800 18px 'Baloo 2';line-height:1;padding-top:2px}.vs .side span:last-child{font:600 11.5px Inter;color:var(--muted)}
.vs .mid{font:800 26px 'Baloo 2';color:var(--pink-d);padding:0 4px}
.terms{margin:10px 14px 0;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:6px 10px}
.terms .tr{display:flex;gap:8px;align-items:flex-start;font:600 13px Inter;line-height:1.38;padding:4px 0;border-bottom:1px solid var(--line)}.terms .tr:last-child{border-bottom:0}
.terms .tr .e{font-size:15px;width:20px;flex:none;text-align:center}
.ff{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.fopt{display:flex;align-items:center;gap:9px;min-height:48px;border:2px solid var(--ink);border-radius:12px;background:#fff;padding:6px 10px;text-align:left;font:700 13px Inter;line-height:1.3}
.fopt i{flex:none;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ink);background:#fff}
.fopt.sel{background:#FFF1C9}.fopt.sel i{background:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.fopt .e{font-size:17px}
.consentrow{margin:10px 14px 0;display:flex;gap:6px;flex-wrap:wrap}
.consentrow span{font:700 12px Inter;border-radius:10px;padding:4px 8px;border:1.5px solid}
.okc{color:var(--green-d);background:#E3F9EE;border-color:var(--green-d)}.wt{color:#7A5300;background:#FFF1C9;border-color:#E9B949}
.capdec{margin:14px 14px 0;text-align:center;background:var(--ink);color:#fff;border-radius:14px;padding:13px;font:800 21px 'Baloo 2';padding-top:15px}
.cstrip b{font-size:15px}.cstrip.warn{background:linear-gradient(90deg,#FFB27A,#FF8A4C)}
.crews{display:flex;gap:8px;margin:10px 14px 0}
.crew{flex:1;border:2.5px solid var(--ink);border-radius:16px;padding:9px 10px;box-shadow:0 3px 0 var(--ink);background:#fff;text-align:center}
.crew.us{background:#FFF1C9}
.crew .cn{font:800 15px 'Baloo 2';line-height:1.05;padding-top:2px;min-height:32px;display:flex;align-items:center;justify-content:center}
.crew .cs{font:800 38px 'Baloo 2';line-height:1;padding-top:4px}
.crew .cm{font:700 11px Inter;color:var(--muted)}.crew .cz{font:700 11.5px Inter;margin-top:5px;border-top:1.5px dashed #CFCAE0;padding-top:5px}
.crew.short{background:#FFE9D6}.crew.short .cs{font-size:30px;color:#C25A00}
.row.top3{background:#FFF8DB}
.cnt{font:800 10.5px Inter;color:var(--green-d);background:#E3F9EE;border:1.5px solid var(--green-d);border-radius:7px;padding:1px 5px}
.void{margin:6px 14px 0;padding:16px 14px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.vrows{width:100%;display:flex;flex-direction:column;gap:6px;margin:6px 0}
.vrows>div{display:flex;align-items:center;gap:9px;border:2px solid var(--ink);border-radius:12px;padding:6px 9px;background:#fff}
.vrows .gav{width:34px;height:34px;font-size:14px;border-radius:11px}
.vrows .n{flex:1;text-align:left;font:700 14px Inter}
.vrows .ok{font:800 12px Inter;color:var(--green-d)}.vrows .no{font:800 12px Inter;color:#C25A00}
.seg span.locked{color:#A7A2B8}
.cstrip .left{display:block;font:800 12px Inter;margin-top:1px}
.btn.two-l .sm{margin:0}
.terms .tr{padding:3px 0}
button.pnote{display:block;width:calc(100% - 28px);background:#fff;min-height:40px}
body.mock .proto-only{display:none!important}
.newtag{font:800 10px Inter;background:var(--yellow);border:1.5px solid var(--ink);border-radius:6px;padding:1px 5px;vertical-align:4px;margin-left:4px}
/* screen critique pass (11 Oct): contrast, 48dp targets, >=12px meaning-bearing text */
.cvc{--green-d:#0B6E3F}
.cvc .topbar .back{width:48px;height:48px;flex:none}
.cvc .opt-tag,.cvc .steps span,.cvc .ocard span,.cvc .vs .side span:last-child,.cvc .crew .cm,.cvc .crew .cz,.cvc .rimg .ft,.cvc .pnote{font-size:12px}
.cvc .capbadge{font-size:12px;padding:1px 6px;white-space:nowrap}
.cvc .tchip{min-height:48px}
.cvc .tchip small{font-size:11.5px;top:-10px}
.cvc .seg span{min-height:48px;display:flex;align-items:center;justify-content:center;padding:4px}
.cvc .seg span.locked,.cvc .seg span.lock{color:#5B5675}
.cvc .lockline{color:#5B5675;border-color:#5B5675}
.cvc .tgl{width:calc(100% - 28px);min-height:64px;text-align:left;cursor:pointer}
.cvc .tgl .tx{flex:1;min-width:0}
.cvc .tgl .tsub{display:block;font:600 12px Inter;color:#5B5675;line-height:1.35;margin-top:2px}
.cvc .sw{width:56px;height:32px;border-radius:16px}.cvc .sw i{width:24px;height:24px}.cvc .sw.on i{left:26px}
.cvc .tgl.dis{background:#EDEAF6;box-shadow:none;border-color:#8F8AA3;cursor:not-allowed}.cvc .tgl.dis b{color:#5B5675}.cvc .tgl.dis .sw{background:#C9C5D6;border-color:#8F8AA3}.cvc .tgl.dis .sw i{border-color:#8F8AA3}
.cvc .rimg.off{background:radial-gradient(130% 90% at 85% -10%,#4b4570 0,#2d2950 60%,#1f1c3a 100%)}
.cvc .cnt{font-size:12px;color:#0B6E3F;border-color:#0B6E3F}
.cvc .vrows .ok,.cvc .okc{color:#0B6E3F;border-color:#0B6E3F}
.cvc .vrows .no,.cvc .crew.short .cs{color:#A34B00}
.cvc .warnbox,.cvc .famblk{border-color:#A34B00}
.cvc .famblk{margin-top:8px;background:#FFE9D6;border:2px solid #A34B00;border-radius:12px;padding:8px 10px;font:700 13px Inter;color:#6a3100;line-height:1.4}
.cvc .btn.ghost{background:transparent;box-shadow:none;border-style:solid}
.cvc .tlink{display:inline-flex;align-items:center;min-height:48px;background:none;border:0;padding:0 4px;font:800 13.5px Inter;color:var(--night2);text-decoration:underline;text-underline-offset:3px}
.cvc .frf{margin-top:8px}
.cvc .frf-edit{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);margin-top:2px}
.cvc .frf-edit span{font:600 12px Inter;color:#5B5675;line-height:1.3}
.cvc .codeinp{text-align:center;font:800 30px 'Baloo 2';letter-spacing:.08em;min-height:64px}
.cvc .vs .side span:last-child{color:#5B5675}
.cvc .tlink{white-space:nowrap}
.cvc .frf-edit{border-top:0}
.cvc .frf .tr{border-bottom:1px solid var(--line)}
.cvc .codeinp::placeholder{font:600 18px Inter;letter-spacing:0;color:#8F8AA3}
.cvc .legal + .rulesline{margin-top:0}
.cvc .frf .tr:last-child{border-bottom:0}
