/* v2-start-e.css — Create start screen, option E (Oct 2026): wall of real Otto shots behind two glass cards with mini diagrams.
   Design source: "Create Start - options.html" option E. Markup/handlers stay in #scrStart (#chNew/#chSet); v2-start-e.js adds the art. */
#scrStart.stE{position:relative;overflow:hidden auto}
#scrStart.stE .stMos{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;padding:6px;z-index:0;pointer-events:none}
#scrStart.stE .stMos img{width:100%;height:100%;object-fit:cover;border-radius:8px;filter:brightness(.55)}
#scrStart.stE .stMos img:nth-child(1),#scrStart.stE .stMos img:nth-child(5){grid-row:span 2}
#scrStart.stE .stVeil{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(14,13,11,.88) 32%,rgba(14,13,11,.4) 78%)}
#scrStart.stE .startCol{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:safe center;text-align:center;min-height:100%;padding:16px 0}
#scrStart.stE .hgroup .sub{max-width:520px}
#scrStart.stE .choice{display:flex!important;flex-direction:row;justify-content:center;gap:14px;margin-top:22px;grid-template-columns:none!important;width:100%;max-width:860px}
#scrStart.stE .chc{position:relative;flex:1 1 0;width:auto;max-width:420px;min-width:0;border-radius:8px!important;padding:24px!important;text-align:left;background:rgba(20,19,16,.82)!important;border:1px solid rgba(245,244,240,.1)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex!important;flex-direction:column;gap:8px;min-height:0!important;outline:0!important;box-shadow:none}
#scrStart.stE .chc.pri{border-color:var(--gold,#E5A82E)!important;box-shadow:0 0 0 1px var(--gold,#E5A82E)!important}
#scrStart.stE .chc::before,#scrStart.stE .chc::after{display:none!important}
#scrStart.stE .chc>.art{display:none!important}
#scrStart.stE .chTx{padding:0!important;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;position:static!important;background:none!important}
#scrStart.stE .chTx .t{font:700 21px/1.2 Inter,sans-serif!important;margin:0!important}
#scrStart.stE .chTx .d{font-size:14.5px!important;line-height:1.45;color:var(--ts,#B8B2A7)!important;margin:0!important}
#scrStart.stE .chTx .d2{display:none!important}
#scrStart.stE .chRow{margin-top:auto!important;padding-top:6px}#scrStart.stE .choice{align-items:stretch}#scrStart.stE .chRow .cta{width:100%}
#scrStart.stE .fkProg{margin:0!important}
/* mini diagrams */
.stIll{height:120px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.stIll img{width:100%;height:100%;object-fit:cover;display:block}
.stIll .p1{width:84px;height:108px;border-radius:8px;overflow:hidden;border:1px solid rgba(245,244,240,.25);flex:none;background:#fff}
.stIll .p1 img{object-fit:contain}
.stIll .ar{color:var(--gold,#E5A82E);font-size:16px;flex:none}
.stIll .row{flex:1;min-width:0;height:108px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.stIll .row span,.stIll .one{border-radius:8px;overflow:hidden;border:1px solid rgba(245,244,240,.25)}
.stIll .stack{display:grid;grid-template-columns:repeat(2,40px);gap:5px;flex:none}
.stIll .stack span{width:40px;height:40px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid rgba(245,244,240,.25)}
.stIll .stack span:nth-child(3){grid-column:1/-1;justify-self:center}.stIll .stack img{object-fit:contain}
.stIll .one{position:relative;flex:1;min-width:0;height:108px}
.stIll .one em{position:absolute;left:8px;bottom:8px;font:600 9px Inter,sans-serif;font-style:normal;letter-spacing:.12em;color:#242424;background:var(--gold,#E5A82E);border-radius:8px;padding:3px 7px}
#chSet.stLocked .stIll{opacity:.6}
.stLk{position:absolute;bottom:22px;right:22px;width:32px;height:32px;border-radius:8px;display:none;align-items:center;justify-content:center;background:rgba(14,13,11,.8);border:1px solid rgba(245,244,240,.1);color:var(--ts,#B8B2A7)}
.stLk,#chSet.stLocked .stLk{display:none!important}
@media (max-width:760px){
#scrStart.stE .stMos{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
#scrStart.stE .stMos img:nth-child(n+11){display:none}
#scrStart.stE .choice{flex-direction:column;align-items:stretch;width:100%}
#scrStart.stE .chc{width:100%;padding:18px!important}
.stIll{height:96px}.stIll .p1{width:66px;height:86px}.stIll .row,.stIll .one{height:86px}
}

@media (max-height:700px) and (min-width:761px){#scrStart.stE .choice{margin-top:14px}#scrStart.stE .chc{padding:18px!important}.stIll{height:88px}.stIll .p1{height:80px;width:62px}.stIll .row,.stIll .one{height:80px}}

/* progress v2: tiles + one line instead of bar + two lines */
#scrStart.stE #chSetProg{display:none!important}
.stPr{display:flex;align-items:center;gap:10px;margin-top:2px}.stPr[hidden]{display:none}
.stTi{display:flex;gap:4px}.stTi i{width:22px;height:22px;border-radius:8px;border:1px dashed rgba(245,244,240,.3);display:flex;align-items:center;justify-content:center;font:700 11px Inter,sans-serif;font-style:normal;color:#242424}
.stTi i.on{border:0;background:var(--gold,#E5A82E)}
.stTx{font-size:13.5px;color:var(--ts,#B8B2A7)}

/* mosaic v2: edge-to-edge, no gaps, exactly fills its 6×2 grid (2 tall + 8 single = 12 cells) so the studio photo never shows through */
#scrStart.stE{min-height:100%}
#scrStart.stE .stMos{gap:0;padding:0;grid-auto-flow:dense;grid-auto-rows:0;overflow:hidden;background:#0e0d0b}
#scrStart.stE .stMos img{border-radius:0}
#scrStart.stE .stMos img:nth-child(n+11){display:none}
@media (max-width:760px){#scrStart.stE .stMos{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}#scrStart.stE .stMos img:nth-child(1),#scrStart.stE .stMos img:nth-child(5){grid-row:span 2}}
#scrStart.stE{background:#0e0d0b;scrollbar-width:none}#scrStart.stE::-webkit-scrollbar{display:none}#scrStart.stE .startCol{padding-top:0!important}
/* progress v3: segmented meter + count */
.stPr{gap:12px}.stTi{gap:3px}.stTi i{width:28px;height:4px;border:0;border-radius:8px;background:rgba(245,244,240,.16)}.stTi i.on{background:var(--gold,#E5A82E)}
.stTx b{color:var(--tp,#F5F4F0);font-weight:700;font-variant-numeric:tabular-nums;margin-right:2px}
/* wider cards (Oct 2026): result thumbs read as photos, not slivers */
#scrStart.stE .choice{max-width:1100px}#scrStart.stE .chc{max-width:540px}
@media (max-width:760px){#scrStart.stE .chc{flex:none!important;max-width:none}#scrStart.stE .startCol{justify-content:flex-start!important;padding:76px 0 calc(var(--dock-h,64px) + 40px)!important;min-height:0}#scrStart.stE .choice{max-width:none}#scrStart.stE .hgroup h1{font-size:34px}}