/* C155 C2: clay replay room. All reading remains on screen. */
.wrap{max-width:1380px}.props img{object-fit:contain;aspect-ratio:1}.props{height:270px;max-width:660px}.prop.p1{width:190px}.prop.p2{width:195px}.prop.p3{width:200px}
.room{border:7px solid #514961;background:#262230;box-shadow:0 8px 0 #17131e,0 18px 35px #38244d22}
.room-head h2{font-size:1.5rem}.room-head .who{font-size:1rem;max-width:900px;color:#eee7fa}.room-head .file{background:#ffcc58;color:#382913}
.record-label{font-size:.9rem;margin:10px 0 2px;color:#ddd3ec}.record-label strong{color:#ffdc80}
.strip{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr) 58px minmax(0,1fr) 58px minmax(0,1fr) 58px minmax(0,1fr);padding-top:25px}
.scene{padding:12px;min-width:0;min-height:240px;background:#fffaf0}.scene p{font-size:1rem;line-height:1.45}.scene .n{font-size:.85rem;top:-12px}.scene-art{width:100%;height:94px;object-fit:contain;margin:0 0 10px}.end-art{display:flex;height:94px;align-items:center;justify-content:center}.end-art img{width:54%;height:90px;object-fit:contain}.end-art img+img{width:38%;margin-left:-16px}
.gate .slot{width:48px;background:#ffffff09}.gap-number{color:#e6dcf1;font-size:.8rem;font-weight:800}.gate .slot:has(.chk){background:#ffcc5830;border-style:solid;border-color:#d7ae54}.gate .chk{width:44px;height:48px;background:transparent;box-shadow:none}.gate .chk img{width:48px;height:48px;object-fit:contain}.gate .res{font-size:.8rem;bottom:-12px;padding:2px 5px;z-index:4}
.controls{align-items:stretch;gap:18px;padding-top:20px;margin-top:18px}.tokens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;min-width:0}.token{min-height:104px;display:flex;flex-direction:column;gap:4px;text-align:center;line-height:1.25;font-size:.96rem;background:#423950;border:1px solid #746281;touch-action:pan-y;padding:8px}.token .ic{height:55px;width:66px;background:transparent}.token .ic img{width:66px;height:55px;object-fit:contain}.token.sel{background:#665126}.token:disabled{opacity:.58}.play-ctl{align-items:center}.btn.rew{max-width:180px;white-space:normal}.btn.rew img{width:42px;height:42px;object-fit:contain}
.status{background:#16131d;padding:12px;border-radius:10px;line-height:1.5}.outcome h3{font-size:1.3rem}.outcome li{margin-bottom:9px}.outcome .checked{color:#116440;font-weight:700}.rule-art{width:100%;height:105px;object-fit:contain;display:block;margin-bottom:8px}.result-art{width:180px;height:160px;object-fit:contain}.mobile-gaps{display:none}.ghost img{width:60px;height:60px;object-fit:contain}.ghost{width:64px;height:64px}
@media(max-width:1050px){.strip{grid-template-columns:1fr;padding-top:18px}.strip:before{display:none}.scene{min-height:110px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center}.scene-art,.end-art{height:80px;margin:0}.end-art img{height:70px}.scene p{font-size:1rem}.gate{min-height:0;height:56px}.gate .slot{width:100%;min-height:0;height:40px;display:flex;justify-content:center;gap:12px}.gate .res{bottom:auto;top:50%;left:auto;right:8px;transform:translateY(-50%)}.gate .chk,.gate .chk img{height:36px;width:42px}.playhead{width:auto;height:4px;left:0!important;right:0;bottom:auto}.playhead:before{display:none}.play-ctl{width:100%;margin:0}.btn.rew{max-width:none;width:100%;justify-content:center}.connect{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px 12px}.rule-art{grid-row:1/3;height:85px}.mobile-gaps{position:fixed;bottom:10px;left:10px;right:10px;z-index:20;background:#fffaf0;color:#221f35;border:3px solid #7c42ad;border-radius:18px;padding:10px;box-shadow:0 8px 30px #0006;display:grid;gap:8px}.mobile-gaps p{margin:0;font-size:.94rem;font-weight:750;line-height:1.3}.mobile-gap-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mobile-gaps button{min-height:46px;border:1px solid #8151ab;border-radius:9px;background:#f1e5fc;font-weight:750}.mobile-gaps .cancel{justify-self:end;min-height:34px;padding:3px 12px;background:white}.room:has(.mobile-gaps){padding-bottom:200px}.mobile-gaps~*{scroll-margin-bottom:200px}}
@media(max-width:600px){.props{height:185px}.prop.p1,.prop.p2,.prop.p3{width:31%}.prop.p1{left:0;top:35px}.prop.p2{left:35%;top:0}.prop.p3{right:0;top:40px}.tokens{grid-template-columns:repeat(2,minmax(0,1fr))}.room{padding:16px 10px;border-width:5px}.room-head h2{font-size:1.3rem}.step{grid-template-columns:78px minmax(0,1fr)}.scene{grid-template-columns:64px minmax(0,1fr)}.scene-art{height:68px}.scene .n{left:4px}.outcome{padding:14px 12px}.outcome .row .btn{width:100%}.brand{max-width:135px}.mini{padding:7px 9px}}
.mobile-gaps{bottom:max(10px,env(safe-area-inset-bottom));max-height:45dvh;overflow-y:auto}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}