/* C113: a blue photo workbench. The game rules remain in index.html. */
body{background:radial-gradient(ellipse at 20% 0,#fffdf7 0,transparent 55%),linear-gradient(145deg,#e7f1f8,#cbdce9);font-size:17px}
.wrap{max-width:1440px;padding:18px 24px 32px}
.bar{margin-bottom:16px}.brand{letter-spacing:.015em}
.title{max-width:960px;padding-top:14px}.title h1{color:#183e61;font-size:clamp(2.7rem,6vw,4.5rem)}
.props{height:260px;max-width:760px;margin:0 auto 12px}
.clay-prop{display:block;background-image:url('/play/before-you-post/assets/clay-props.webp');background-size:300% 100%;background-repeat:no-repeat;aspect-ratio:1}
.clay-prop.frame{background-position:0 0}.clay-prop.crop{background-position:50% 0}.clay-prop.pin{background-position:100% 0}
.props .prop{filter:drop-shadow(0 12px 12px #17365321)}
.prop.p1{width:260px;left:0;top:4px}.prop.p2{width:230px;left:35%;top:0}.prop.p3{width:220px;right:0;top:16px}
.title .hook{font-size:1.3rem;font-weight:750;color:#295680;margin-bottom:10px}.title .goal{max-width:660px}
.title .btn.big{min-width:190px;border-radius:999px}
.panel{border:1px solid #fff;background:#fffefa;box-shadow:0 7px 0 #8aa8bf30,0 18px 45px #24446012}
.connect{grid-template-columns:minmax(320px,1.05fr) minmax(0,1fr);gap:30px}
.connect img{box-shadow:0 4px 12px #193c5c22;border:5px solid #fff;transform:rotate(-1deg)}
.connect h2{font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.18}.connect p:last-child{margin-bottom:0}
.rules{border-top:1px solid #d9e4ed;padding-top:20px;margin-top:26px}
.steps{gap:16px}.step{background:#edf4f9;border:1px solid #d9e5ef;padding:10px 16px 18px}
.rule-art{height:118px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.rule-art .clay-prop{height:118px;width:118px;flex:none}
.rule-art .rule-paper{background:#fff;border-radius:8px;padding:8px 12px;box-shadow:0 4px 0 #c4d6e4;border:1px solid #d9e4ed;font-size:13px;font-weight:800;line-height:1.5;transform:rotate(3deg);margin-left:-26px;z-index:1}
.rule-paper span{display:block}.rule-paper .keep{color:#14522f}
.rule-crop{width:96px;height:72px;position:relative;margin-left:-24px;overflow:hidden;border:4px solid white;border-radius:7px;background:#a6c9df;box-shadow:0 4px 0 #b8cfdf}
.rule-crop:before{content:'';position:absolute;inset:0 0 0 65%;background:#25445ac9;border-left:4px solid #fff}
.rule-crop:after{content:'Blur';position:absolute;background:#e7edf3;color:#233d54;border-radius:8px;padding:3px 8px;font-size:12px;font-weight:800;left:5px;top:10px;box-shadow:0 0 7px 5px #eff5f88c}
.head{gap:12px;margin-bottom:12px}.head h2{font-size:1.55rem}.draft-thumb{height:56px;width:80px;object-fit:cover;border:4px solid #fff;box-shadow:0 3px 0 #91acc344;border-radius:10px;transform:rotate(-3deg)}
.head .tag0{background:#295680;font-size:.8rem}
.goalcard{padding:12px 18px;border-width:1px;border-color:#abc6da;border-left:6px solid #4682b4;box-shadow:0 5px 0 #52728a12;gap:8px 20px}
.gstat{font-size:.88rem;padding:5px 10px}.gc{font-size:.92rem}.gl{font-size:.7rem}
.table{grid-template-columns:172px minmax(0,1fr) 304px;gap:18px}
.lt{padding:12px;border-radius:24px;background:linear-gradient(145deg,#567993,#36566e);box-shadow:inset 0 1px 0 #ffffff5e,0 6px 0 #18374e40,0 15px 35px #27475e15}
.photo{border-radius:14px;background:#d9e5ed;box-shadow:0 3px 12px #102b4233}
.phint{color:#fff;font-size:.86rem;margin:10px 2px 12px}
.postui{box-shadow:none;border:1px solid #fff;padding:13px;border-radius:14px;gap:12px}
.film{background:#d6e3ec;border:1px solid #bfd0dd;box-shadow:inset 0 0 0 5px #e7f0f6;padding:14px 10px}
.film h3{color:#234863}.epost{background:#fffefa;padding:8px;border-radius:8px;box-shadow:0 3px 0 #92a9ba33}
.thumb .clay-thumb{width:min(100%,98px);height:auto;aspect-ratio:1;margin:auto}
.clay-thumb{display:block;width:64px;height:64px;background-image:url('/play/before-you-post/assets/clay-thumbs.webp');background-size:400% 200%;background-repeat:no-repeat;border-radius:7px}
.thumb img,.tthumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:7px}
.pmeta{font-size:.72rem}.epost p{font-size:.86rem;font-weight:700}
.stranger{background:#fffefa;border-color:#b9cedf;box-shadow:0 5px 0 #56799320;padding:13px;position:sticky;top:12px}
.stranger h3{font-size:1rem}.guess{font-size:.94rem}.status{font-size:.87rem;line-height:1.45}
.srow{padding:9px 4px}.ev{font-size:.76rem;min-height:34px;padding:3px 9px}
.acts{margin-top:20px}.cb{min-height:44px}.switch{min-height:40px}.switch .knob{top:7px}
.clay-result-art{width:110px;aspect-ratio:1;position:relative}.clay-result-art .clay-prop{width:100%;height:100%}
.clay-result-art .result-mark{position:absolute;right:0;bottom:4px;width:36px;height:36px;border-radius:50%;background:#177a4d;color:white;display:grid;place-items:center;font-weight:900;border:3px solid #fff;font-size:23px}
.out:not(.ok) .result-mark{background:#8a4b00}
.result-hero{display:flex;justify-content:center;align-items:center;height:156px}.result-hero .clay-prop{width:150px;height:150px;transform:rotate(-8deg)}.result-hero .clay-prop+span{margin-left:-12px;transform:rotate(9deg)}
.tcard{grid-template-columns:90px 1fr}.tcard .tthumb{width:90px;height:64px;transform:rotate(-2deg);border:4px solid #fff;border-radius:9px;box-shadow:0 3px 0 #adc3d44a}
.rg .ring{stroke-width:3}.rg:focus-visible .ring{stroke:#a95600;stroke-width:5}
@media(min-width:1450px){.table{grid-template-columns:190px minmax(0,1fr) 330px}.stranger{padding:16px}}
@media(max-width:1120px) and (min-width:961px){.wrap{padding:14px 16px 28px}.table{grid-template-columns:146px minmax(0,1fr) 270px;gap:12px}.lt{padding:9px}.gc{font-size:.86rem}}
@media(max-width:960px){.wrap{padding:12px 16px 28px}.table{grid-template-columns:1fr;gap:14px}.stranger{position:static}.film{padding:12px}.epost{grid-template-columns:64px 1fr}.thumb .clay-thumb{width:60px;height:60px}.connect{grid-template-columns:1fr}.connect img{max-width:600px}.rule-art{grid-row:1/3;height:95px;margin:0}.rule-art .clay-prop{height:90px;width:90px}.rule-art .rule-paper{font-size:10px;padding:5px;margin-left:-50px}.rule-crop{width:58px;height:55px;margin-left:-48px}.step{grid-template-columns:120px 1fr}.goalcard{grid-template-columns:1fr}.props{height:220px}.prop.p1{width:215px}.prop.p2{width:190px}.prop.p3{width:180px}}
@media(max-width:620px){.out{grid-template-columns:1fr}.clay-result-art{width:80px}.tcard{grid-template-columns:72px 1fr}.tcard .tthumb{width:72px;height:54px}.head h2{font-size:1.3rem}.draft-thumb{width:64px;height:45px}.head{gap:8px}.head .tag0{font-size:.75rem}.posts{flex-direction:column}.epost{grid-template-columns:60px 1fr}.lt{padding:8px}.phint{font-size:.82rem}.postui{padding:10px}.gc svg{width:28px;height:28px}.gc{font-size:.9rem}.goalcard{padding:10px 12px}}
@media(max-width:520px){.wrap{padding:10px 10px 24px}.props{height:160px}.prop.p1{width:150px;left:-5%;top:5px}.prop.p2{width:126px;left:32%;top:0}.prop.p3{width:125px;right:-4%;top:12px}.title{padding:4px 0 12px}.title h1{font-size:2.8rem}.title .hook{font-size:1.1rem}.title .goal{font-size:1rem}.step{padding:10px;grid-template-columns:98px 1fr;gap:8px}.rule-art{width:98px}.rule-art .clay-prop{width:80px;height:80px}.head .draft-thumb{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Claude, after G07: the photo runs edge to edge on phones, so the clue labels draw about 20 percent larger,
   and the floating props can no longer push the page sideways (measured 1 to 5 px of sideways scroll). */
.props,.result-hero{overflow-x:clip}
/* Chrome ignores touch-action on SVG shapes, so a finger drag on a crop handle turned into a page scroll
   (pointercancel after about 18 px). One finger now drags the handles, and two fingers can still zoom. */
#photo{touch-action:pinch-zoom}
@media(max-width:620px){.lt{margin-left:-16px;margin-right:-16px;border-radius:0}.lt .photo{margin-left:-8px;margin-right:-8px;border-radius:0}}
@media(max-width:520px){.lt{margin-left:-10px;margin-right:-10px}.result-hero .clay-prop{width:120px;height:120px}}