#friend-room{min-height:100svh;padding:110px 24px 80px;display:grid;place-items:center;font-family:'Courier New',monospace;color:#252b24}
#friend-room[hidden],#friend-room [hidden]{display:none}
.friend-machine{width:min(780px,100%);padding:28px;background:linear-gradient(120deg,#9ca496,#bcc0ac 45%,#7b8779);border:2px solid #626d5d;border-radius:8px;box-shadow:inset 0 2px #d3d7c1,inset 0 -6px 8px #444e41,0 12px #20281f;position:relative;transition:opacity .65s}
.friend-machine header{display:block;border-bottom:1px solid #727c6a;padding-bottom:20px;margin-bottom:24px}
.friend-machine header small{font-size:10px;letter-spacing:.13em}.friend-machine h1{font-size:24px;margin:10px 0 0}.friend-machine h2{font-size:11px;letter-spacing:.12em;margin:0 0 14px}
.friend-workspace{display:grid;grid-template-columns:1.2fr 1fr;gap:25px}
.friend-glass{position:relative;display:grid;place-items:center;min-height:340px;border:9px solid #344033;border-radius:14px;background:radial-gradient(ellipse,#142016,#030806 80%);box-shadow:inset 0 0 30px #000,0 1px #e0ddc7;overflow:hidden}
.friend-glass-edge{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#fff1,transparent 35%);box-shadow:inset 0 0 10px #000}
#friend-body,#friend-creature{position:relative;background:#c2c2a7;border:2px solid #919781;box-shadow:inset 0 1px #e0dec3;flex-shrink:0;touch-action:none}
.friend-feature{position:absolute;display:block;background:#303d2e;border:1px solid #172616;cursor:grab;touch-action:none}.friend-feature:active{cursor:grabbing}
.friend-controls section{padding:17px;background:#77836c33;border:1px solid #75826a}.friend-controls section+section{margin-top:16px}
.friend-bodies{display:flex;gap:9px}.friend-machine button{border:1px solid #3d4b34;background:linear-gradient(#68775d,#42513a);color:#e0dfc4;box-shadow:0 3px #303b28,inset 0 1px #aeb79a;font:12px 'Courier New',monospace;min-height:42px;border-radius:3px;cursor:pointer}.friend-machine button:disabled{opacity:.45;cursor:default}.friend-machine button[aria-pressed=true]{background:#34452e;box-shadow:inset 0 2px 5px #172312}
.friend-bodies button{flex:1;display:grid;justify-items:center;align-content:center;gap:10px;min-height:95px;padding:10px}.friend-body-sample{display:block;background:#c2c2a7;border:1px solid #dadebd}.shape-0{width:28px;height:32px}.shape-1{width:39px;height:25px}.shape-2{width:21px;height:39px}.friend-bodies small,.friend-parts small{font-size:9px}
.friend-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.friend-parts button{display:grid;justify-items:center;align-content:center;gap:10px;height:70px;touch-action:none}.friend-parts button>span{display:block;background:#c4c8ac;border:1px solid #d5d9be;pointer-events:none}.friend-handling{font-size:10px;line-height:1.6;margin:15px 0 0;color:#374432}
.friend-machine footer{display:flex;justify-content:space-between;align-items:center;min-height:100px;margin-top:24px;border-top:1px solid #727c6a}.friend-machine footer>span{font-size:10px;letter-spacing:.07em}
#friend-release{position:relative;min-width:125px;height:100px;padding:10px 12px 65px;touch-action:none}.friend-lever{position:absolute;top:40px;left:calc(50% - 5px);width:10px;height:36px;background:linear-gradient(90deg,#687361,#d1d5bf,#687361);border:1px solid #33452e;transform:translateY(var(--pull,0px));transition:transform .08s}.friend-lever:after{content:'';position:absolute;width:40px;height:15px;left:-15px;bottom:-4px;border-radius:3px;background:linear-gradient(#525c49,#1b2618);border:1px solid #131e12}
.friend-releasing .friend-glass{background:#000}.friend-releasing #friend-body{opacity:0;transition:opacity .3s}.friend-released .friend-machine{opacity:.25}.friend-released .friend-machine{pointer-events:none}
#friend-output{position:fixed;z-index:4;transform:translate(-50%,-50%);animation:friend-breathe 3.8s ease-in-out infinite}#friend-creature{display:block;min-height:0;padding:0;border-radius:0;cursor:pointer;color:transparent;box-shadow:none;animation:none}
#friend-output.friend-touched{animation:friend-touch .55s ease-out}
#friend-another{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:5;background:none;border:1px solid #505b44;color:#b4baa2;box-shadow:none;font:11px 'Courier New',monospace;padding:13px 20px}
.friend-thumbnail{height:160px;display:grid;place-items:center;border:1px solid #91866c}.friend-thumbnail span{width:55px;height:70px;border:2px solid #a5ad92;background:#444d3b}
.papers{flex-wrap:wrap;gap:45px}
@keyframes friend-breathe{0%,100%{transform:translate(-50%,-50%) scale(1,1)}50%{transform:translate(-50%,-51%) scale(1.025,.975)}}@keyframes friend-touch{0%,100%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(1.12,.85)}}
@media(max-width:600px){#friend-room{padding:95px 13px 55px}.friend-machine{padding:20px 15px}.friend-workspace{grid-template-columns:1fr;gap:18px}.friend-glass{min-height:280px}.friend-controls{display:grid;grid-template-columns:1fr 1.3fr;gap:12px}.friend-controls section{padding:12px}.friend-controls section+section{margin-top:0}.friend-bodies{gap:4px}.friend-bodies button{padding:7px;min-width:0}.friend-parts{gap:5px}.friend-parts button{height:62px;min-width:0;padding:5px}.friend-handling{font-size:9px}.friend-machine h1{font-size:21px}}
@media(prefers-reduced-motion:reduce){#friend-output,#friend-output.friend-touched{animation:none}.friend-machine{transition:none}}
#friend-room{user-select:none}
.friend-released #friend-body{visibility:hidden}
.friend-parts button>span,.friend-body-sample{max-width:100%}
/* Supplied paper sprites keep their own colours and transparent edges. */
.friend-glass{background:#fff;min-height:370px;box-shadow:inset 0 0 0 1px #d4d6cb,0 1px #e0ddc7}
.friend-glass-edge{background:none;box-shadow:none}
#friend-body{background:transparent;border:0;box-shadow:none}
#friend-creature{background:#fff;border:0;box-shadow:0 0 0 12px #fff}
.friend-sprite{display:block;background-repeat:no-repeat;background-color:transparent!important;border:0!important;image-rendering:auto}
.friend-torso{position:absolute;pointer-events:none}
.friend-feature{background-color:transparent;border:0;box-shadow:none}
.friend-body-sample,.friend-parts button>span{max-width:none}
.friend-bodies{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.friend-bodies button{min-height:83px;padding:8px}
.friend-parts{grid-template-columns:repeat(3,1fr)}
.friend-parts button{height:90px;background:#fff;color:#394530;box-shadow:0 3px #303b28,inset 0 0 0 1px #dce0d1}
.friend-part-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:13px}
.friend-part-tabs button{font-size:10px;padding:7px;min-height:34px}
.friend-parts .friend-sprite{filter:drop-shadow(0 0 1px #7e8679)}
@media(max-width:600px){.friend-controls{grid-template-columns:1fr}.friend-bodies{grid-template-columns:repeat(5,1fr)}.friend-bodies button{padding:4px;min-height:78px}.friend-controls section+section{margin-top:0}.friend-part-tabs{grid-template-columns:repeat(4,1fr)}.friend-parts{grid-template-columns:repeat(5,1fr);gap:5px}.friend-parts button{height:80px;padding:4px}.friend-glass{min-height:370px}}
@media(max-width:600px){.friend-parts .friend-sprite{transform:scale(.8)}}

/* Native-size artwork and explicit assembly layers. */
.friend-controls{min-width:0}.friend-controls section{min-width:0}
.friend-bodies,.friend-parts{display:flex;overflow-x:auto;gap:10px;padding:3px 3px 12px;align-items:center}
.friend-bodies button,.friend-parts button{flex:0 0 auto;width:auto;height:auto;min-height:190px;padding:10px;min-width:70px}
.friend-parts .friend-sprite{transform:none;filter:none}
.friend-category-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.friend-category-heading h2{margin:0}
.friend-category-heading button,.friend-category button[data-clear]{font-size:9px;min-height:26px;padding:5px}
.friend-category{display:grid;gap:5px}.friend-category button{width:100%}
.friend-torso{z-index:1}.friend-feature[data-group=leg]{z-index:0}.friend-feature[data-group=arm]{z-index:2}.friend-feature[data-group=head]{z-index:3}.friend-feature[data-group=face]{z-index:4}
.friend-glass{min-height:400px}.friend-machine footer{gap:12px;flex-wrap:wrap}
.friend-bodies,.friend-parts{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#69755e #333a2f}
.friend-bodies button,.friend-parts button{touch-action:pan-x}
@media(max-width:600px){
  #friend-room:not(.friend-released) .friend-glass{min-height:min(58svh,560px)}
  #friend-room.friend-released{padding:70px 5px 82px}
  #friend-room.friend-released #friend-output{width:100%;max-width:none}
  #friend-room.friend-released #friend-plate{height:min(90svh,820px);min-height:min(74svh,650px);border-width:9px;border-radius:24px}
  #friend-room.friend-released #friend-wall-switch{top:-34px}
  #friend-another{bottom:calc(12px + env(safe-area-inset-bottom))}
}
/* Keep both part pickers visually consistent and easy to swipe on phones. */
.friend-parts button{background:linear-gradient(#68775d,#42513a);color:#e0dfc4;border:1px solid #3d4b34;box-shadow:0 3px #303b28,inset 0 1px #aeb79a}
.friend-parts button:hover{background:linear-gradient(#748369,#4c5b42)}
@media(max-width:600px){
  .friend-parts{gap:8px;scroll-snap-type:x proximity}
  .friend-parts button{width:clamp(112px,38vw,155px);min-width:clamp(112px,38vw,155px);height:190px;scroll-snap-align:start}
  .friend-parts button>.friend-sprite{transform:scale(.68);transform-origin:center}
}
@keyframes friend-breathe{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-51%)}}
@keyframes friend-touch{0%,100%{transform:translate(-50%,-50%)}35%{transform:translate(-50%,-53%)}}

/* The clear action is inset in the category control, with its own accessible target. */
.friend-category{position:relative;display:block}
.friend-category [data-group]{padding-right:32px;min-height:38px}
.friend-category button[data-clear]{position:absolute;right:3px;top:3px;width:28px;min-height:30px;height:30px;padding:0;border:0;background:none;box-shadow:none;font-size:20px;color:#c6ccb8;border-radius:2px}
.friend-category button[data-clear]:hover{background:#17231266;color:#fff}
.friend-category-heading{position:relative;min-height:38px;border:1px solid #3d4b34;background:linear-gradient(#68775d,#42513a);color:#e0dfc4;box-shadow:0 3px #303b28,inset 0 1px #aeb79a;border-radius:3px;padding:0 36px 0 12px}
.friend-category-heading button{position:absolute;right:3px;top:3px;width:28px;min-height:30px;padding:0;background:none;border:0;box-shadow:none;font-size:20px}
.friend-category-heading button:hover{background:#17231266;color:#fff}
.friend-parts small{white-space:nowrap}

/* Released pieces move on an isolated white plate. */
.friend-released .friend-machine{display:none}
#friend-output{position:relative;inset:auto!important;transform:none!important;animation:none!important;width:min(900px,100%);z-index:4}
#friend-plate{position:relative;width:100%;height:clamp(380px,70svh,650px);background:#fafaf5;border:14px solid #a6aea2;border-radius:38px;box-shadow:inset 0 0 0 4px #d8ddd3,inset 0 0 24px #74816d55,0 12px #30372c;overflow:hidden;touch-action:none}
#friend-creature{position:absolute;inset:0;width:100%!important;height:100%!important;background:none;box-shadow:none;pointer-events:none}
.friend-ragdoll-piece{pointer-events:auto;cursor:grab;transform-origin:center;filter:drop-shadow(1px 3px 1px #0002)}
.friend-ragdoll-piece[data-group=body]{z-index:1}
.friend-released{align-content:center}

#friend-wall-switch{position:absolute;right:5px;top:-40px;width:26px;height:29px;min-height:0;padding:0;border:1px solid #59604f;background:#242a20;box-shadow:0 2px #111;border-radius:2px;z-index:8}
#friend-wall-switch i{display:block;width:8px;height:15px;background:linear-gradient(90deg,#737b66,#c2c7b4,#646c5a);margin:auto;transform:rotate(-18deg);transform-origin:50% 80%;transition:transform .15s}
#friend-wall-switch[aria-pressed=true] i{transform:rotate(18deg)}
#friend-blood{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#friend-creature{z-index:2}
#friend-props{position:absolute;inset:0;z-index:3;pointer-events:none}
#friend-props.friend-props-fading{opacity:0;transition:opacity 2s}
#friend-props.friend-props-fading .friend-loose-prop{pointer-events:none}
.friend-loose-prop{position:absolute;display:block;object-fit:contain;pointer-events:auto;touch-action:none;user-select:none;cursor:grab;filter:drop-shadow(1px 3px 2px #0005)}
.friend-loose-prop:active{cursor:grabbing}
.friend-wall{position:absolute;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,#7b8374 0 2px,#858c7c 2px 5px);border:2px solid #434c3d;box-shadow:0 0 10px #0006}
.wall-left{left:0;top:0;bottom:0;width:var(--wall-inset,0px);border-width:0 3px 0 0}
.wall-right{right:0;top:0;bottom:0;width:var(--wall-inset,0px);border-width:0 0 0 3px}
.wall-top{top:0;left:0;right:0;height:var(--wall-inset,0px);border-width:0 0 3px}
.wall-bottom{bottom:0;left:0;right:0;height:var(--wall-inset,0px);border-width:3px 0 0}

#friend-blood{z-index:6}
/* A recessed keyhole beside the maker's title. */
.friend-machine header{position:relative;padding-right:62px}
#friend-keyhole{position:absolute;right:0;top:2px;width:43px;height:43px;min-height:43px;background:radial-gradient(circle,#929d89,#56624d);border:2px solid #3d4837;border-radius:50%;box-shadow:inset 0 2px 4px #0005,0 1px #d1d5bf}
#friend-keyhole i{position:absolute;left:16px;top:10px;width:8px;height:8px;background:#172014;border-radius:50%}
#friend-keyhole i:after{content:'';position:absolute;left:2px;top:6px;width:4px;height:11px;background:#172014}
#friend-keyhole[aria-pressed=true] i{background:#c9ad69;box-shadow:0 0 0 2px #756039}
#friend-keyhole[aria-pressed=true] i:after{background:#c9ad69;width:16px;height:4px;left:5px;top:2px;box-shadow:8px 3px 0 -1px #c9ad69}
@media(max-width:600px){
 #friend-room.friend-released{display:flex;flex-direction:column;justify-content:center;padding:80px 8px 85px;min-height:100svh}
 #friend-room.friend-released #friend-output{width:100%;height:calc(100svh - 170px)}
 #friend-room.friend-released #friend-plate{width:calc(100% / .6);height:calc((100svh - 170px) / .6);min-height:0;max-height:none;border-width:14px;transform:scale(.6);transform-origin:top left;border-radius:32px}
 #friend-room.friend-released #friend-wall-switch{top:-35px;right:6px}
}