.ss-art,#second-shift { --ss-dark:light-dark(#35414c,#11181d); }
#second-shift { height:var(--visible-height,100dvh); width:100%; max-width:520px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 10px) max(12px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 10px) max(12px,env(safe-area-inset-left)); display:flex; flex-direction:column; }
#second-shift .header { padding:0; min-height:48px; }
#second-shift h1 { font-size:21px; }
#second-shift .eyebrow { display:block; font-size:10px; margin-top:4px; }
#second-shift .tools { gap:0; }
.ss-job-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; border-bottom:1px solid var(--line); }
.ss-job-row select { flex:1; min-width:0; border:0; background:transparent; font-size:14px; padding-left:4px; }
.ss-job-row>span { font-size:11px; color:var(--muted); flex:none; }
.ss-daily .pack-picker { margin:6px 0 0; }
.ss-daily .ss-job-row { min-height:32px; }
.ss-daily .ss-take { min-height:38px; }
#shift-daily .game-art .ss-art { width:100%; height:100%; }
.ss-take { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:4px 2px; flex:none; }
.ss-phase { font-size:11px; font-weight:600; line-height:15px; }
.ss-phase small { display:block; color:var(--muted); font-size:10px; font-weight:400; }
.ss-steps { display:flex; align-items:center; gap:4px; }
.ss-beat { width:29px; height:29px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--line); border-radius:4px; color:var(--muted); font-size:10px; position:relative; }
.ss-beat.filled { border-style:solid; color:var(--ink); background:var(--surface); }
.ss-beat.spent { opacity:.35; }
.ss-beat.next { border:2px solid #609ed3; background:light-dark(#e3f0fd,#284155); }
.ss-beat svg { width:16px; height:16px; }
.ss-stage { flex:1; min-height:0; display:flex; justify-content:center; align-items:center; position:relative; }
.ss-board { display:block; flex:none; touch-action:none; user-select:none; -webkit-user-select:none; overflow:visible; }
.ss-floor { fill:light-dark(#edf0f2,#2b3037); stroke:var(--line); stroke-width:1; }
.ss-floor-depth { fill:light-dark(#d8dfe4,#141b21); }
.ss-floor-hit { fill:transparent; }
.ss-floor-hit.near { fill:light-dark(#ffffff44,#ffffff02); cursor:pointer; }
.ss-step-dot { fill:var(--muted); opacity:.35; pointer-events:none; }
.ss-counter-side { fill:light-dark(#aebbc4,#596b7a); stroke:light-dark(#8c9ba8,#8a9ba8); stroke-width:1.5; }
.ss-counter-top { fill:light-dark(#dee6ec,#9bafc0); stroke:light-dark(#95a7b6,#536d83); stroke-width:1.5; }
.ss-target-outline { fill:transparent; stroke:transparent; stroke-width:2; }
.ss-station { cursor:pointer; }
.ss-station.in-reach .ss-target-outline { stroke:var(--action); stroke-dasharray:3 4; }
.ss-station:focus-visible .ss-target-outline { stroke:var(--ink); stroke-dasharray:none; stroke-width:3; }
.ss-actor-label { font-size:8px; font-weight:700; fill:var(--muted); letter-spacing:0; }
.ss-echo-outline { stroke:#548fc5; fill:none; stroke-width:1.5; stroke-dasharray:3 3; }
.ss-wire { stroke:light-dark(#abc4d4,#55758d); stroke-width:2; fill:none; stroke-dasharray:3 5; }
.ss-wire[data-ss-key="B"] { stroke:light-dark(#c9a66a,#bb985f); }
.ss-wire.on { stroke:#54a88b; stroke-dasharray:none; }
.ss-wire-label { fill:var(--muted); font-size:9px; font-weight:600; }
.ss-next-mark { fill:none; stroke:#609ed3; stroke-dasharray:5 5; stroke-width:2; opacity:.7; }
.ss-console { flex:none; padding-top:4px; }
.ss-log { display:flex; gap:8px; min-height:36px; margin-bottom:4px; align-items:center; }
.ss-log>span { display:block; flex:1; min-width:0; font-size:11px; line-height:15px; padding-left:8px; border-left:3px solid #78b7eb; }
.ss-log>span.you { border-color:#ec927a; }
.ss-log b { display:block; font-size:9px; color:var(--muted); font-weight:500; }
.ss-pad { display:flex; justify-content:center; gap:8px; margin-bottom:8px; }
.ss-pad .icon-button { width:48px; height:46px; background:var(--surface); border:1px solid var(--line); }
.ss-pad .ss-wait { margin-left:10px; }
.ss-command { display:flex; gap:8px; min-height:48px; }
.ss-command .primary-button { min-height:46px; flex:1; width:auto; padding:10px; font-size:14px; }
.ss-command>.icon-button { width:46px; height:46px; border:1px solid var(--line); }
.ss-finish { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; min-height:102px; }
.ss-finish .primary-button { grid-column:1/-1; min-height:46px; font-size:14px; }
.ss-finish strong { display:block; font-size:18px; }
.ss-finish small { color:var(--muted); font-size:11px; }
.ss-rating { display:flex; gap:2px; }
.ss-hint { width:calc(100% - 12px); position:absolute; bottom:8px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:10px 8px 10px 14px; box-shadow:0 3px 12px #0002; display:flex; align-items:center; gap:8px; font-size:13px; line-height:19px; z-index:3; }
.ss-hint>span { flex:1; }
.ss-storage { font-size:10px; color:var(--muted); text-align:center; margin:3px 0 0; }
.ss-replaying .ss-event { animation:none; }
@keyframes ss-pulse { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
.ss-event { animation:ss-pulse .22s ease-out; }
@media(max-height:650px) { #second-shift { padding-top:calc(env(safe-area-inset-top) + 4px); padding-bottom:calc(env(safe-area-inset-bottom) + 6px); } #second-shift .header { min-height:44px; } .ss-log { min-height:32px; } .ss-pad { margin-bottom:6px; } }
@media(prefers-reduced-motion:reduce) { .ss-event { animation:none; } }