:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#493c2e;background:#eee5d6;font-synthesis:none;--red:#b95140;--blue:#3d8193;--yellow:#bb8b29;--green:#4c8568;--purple:#85628e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#fffaf0,transparent 65%),#eee5d6}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #267781;outline-offset:4px}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button{border:1px solid #c7b79f;background:#fbf5e9;border-radius:8px;min-height:44px;padding:9px 16px}button:hover:not(:disabled){background:#fffaf0}.workshop{max-width:1120px;margin:auto;padding:0 34px 14px;min-height:100svh;display:flex;flex-direction:column}nav{display:flex;align-items:center;justify-content:space-between;height:64px;border-bottom:1px solid #cebea688;flex-shrink:0;font-size:12px}nav a{min-height:44px;display:flex;align-items:center;font-weight:600}nav>span{letter-spacing:3px;color:#877963}nav button{font-size:12px;border:0;background:transparent;padding-right:0}header{display:flex;align-items:center;justify-content:space-between;padding:25px 0 20px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:#92816a;margin:0 0 9px}h1{font-family:"Noto Serif SC",serif;font-size:32px;font-weight:600;letter-spacing:4px;margin:0}h1 span{font-family:system-ui,sans-serif;font-size:11px;font-weight:400;letter-spacing:2px;color:#8a7c68;display:inline-block;margin-left:24px}.brand{font:18px/1.2 serif;color:#a56f4e;border:1px solid #ab795b;outline:1px solid #ab795b;outline-offset:3px;padding:5px 6px;transform:rotate(5deg);margin-right:4px}.game-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,1fr);gap:48px;align-items:center;flex:1;min-height:0}.play-area{min-width:0}.board-meta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;margin-bottom:10px;color:#83705a}.board-meta b{color:#5c4730;font-weight:600}.workbench{height:min(49svh,418px);min-height:285px;border:10px solid #b78e5d;border-radius:17px;background:linear-gradient(100deg,#efd9b3,#e8cca0 45%,#e7c69a);box-shadow:0 3px 0 #936c42,0 10px 24px #5c442a21,inset 0 0 22px #8e653f38;position:relative;overflow:hidden}.pegboard{position:absolute;inset:0;background-image:radial-gradient(#a17b4a40 1.4px,transparent 1.9px);background-size:22px 22px}.bench-stamp{position:absolute;bottom:9px;right:13px;font-size:8px;line-height:1.6;letter-spacing:2px;color:#88603a60;text-align:center;transform:rotate(-5deg)}#plates{position:absolute;inset:0 8%}.lane{position:absolute;width:100%;height:27%;left:0}.lane-0{top:6%}.lane-1{top:36%}.lane-2{top:66%}.plate{position:absolute;left:0;top:0;width:100%;height:64%;border-radius:12px;background:repeating-linear-gradient(2deg,transparent 0 9px,#5f321711 10px 11px,transparent 12px 25px),linear-gradient(105deg,#d19d60,#e1b47a 40%,#c89454);border:1px solid #a26e35;box-shadow:0 4px 0 #8e6036,0 7px 9px #65432144,inset 0 2px 0 #ffdfaa;display:flex;align-items:center;justify-content:space-around;transform:rotate(var(--tilt));z-index:5}.plate.metal{background:repeating-linear-gradient(0deg,transparent 0 2px,#32494408 3px 4px),linear-gradient(115deg,#98ada5,#c9d3bf 45%,#8b9e94);border-color:#71837b;box-shadow:0 4px 0 #687b70,0 7px 9px #31453444,inset 0 2px 0 #e3e8d4}.plate.lower{pointer-events:none;filter:brightness(.8);height:64%;transform:translate(calc(var(--depth) * 5px),calc(var(--depth) * 8px)) rotate(var(--tilt));z-index:1}.plate.lower .ghost-head{width:17px;height:17px;border-radius:50%;background:#42392344;box-shadow:inset 0 2px 3px #0003}.plate::before,.plate::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#74563744;top:calc(50% - 3px)}.plate::before{left:9px}.plate::after{right:9px}.screw,.hole{position:relative;width:48px;height:48px;flex:0 0 48px;border-radius:50%;padding:0;min-height:48px}.screw{background:transparent;border:0;display:grid;place-items:center;z-index:2}.head{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;color:#fff8e4;background:radial-gradient(circle at 35% 25%,#ffffff55,transparent 55%),var(--color);border:3px solid #ffffff4d;box-shadow:0 3px 0 color-mix(in srgb,var(--color),#241a16 35%),0 5px 4px #30211450,inset 0 0 0 1px #0002;font-size:18px;font-weight:700;text-shadow:0 1px 1px #0005;transition:transform .15s}.screw:hover:not(:disabled){background:transparent}.screw:hover:not(:disabled) .head{transform:translateY(-3px) rotate(18deg)}.screw:active .head{transform:translateY(1px)}.hole{display:grid;place-items:center}.hole::before{content:'';width:15px;height:15px;border-radius:50%;background:#5a3b22;box-shadow:inset 0 3px 4px #20160f,0 1px 0 #f8ce90}.preview{position:absolute;top:calc(64% + 18px);left:5px;right:0;display:flex;gap:5px;align-items:center;font-size:8px;letter-spacing:1px;color:#735331}.preview-group{display:flex;gap:3px;margin-right:5px}.preview-dot{width:12px;height:12px;background:var(--color);color:#fff9ea;font-size:9px;line-height:12px;text-align:center;border-radius:3px}.empty-lane{height:64%;display:grid;place-items:center;border:1px dashed #b18b5b70;border-radius:12px;color:#97724677;font-size:11px;letter-spacing:4px}.tray-wrap{margin-top:20px}.tray-label{display:flex;align-items:center;gap:12px;font-size:10px;color:#97846d;margin-bottom:9px}.tray-label strong{font-size:12px;color:#68513b;letter-spacing:2px}.tray-label b{margin-left:auto;font-size:11px;font-weight:500}.tray{display:flex;justify-content:space-around;padding:9px 12px;border:1px solid #c6b79e;border-radius:12px;background:#d9cbb5;box-shadow:inset 0 2px 5px #6b574329,0 2px 0 #fff8ed}.slot{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#baab9290;box-shadow:inset 0 2px 4px #66523a33,0 1px 0 #fff9}.slot .head{width:32px;height:32px;font-size:15px}.tray.danger{border-color:#b95140;background:#e2c3aa}.tray.match{animation:matched .4s ease}#status{font-size:11px;color:#8a7358;min-height:18px;margin:10px 0 0;text-align:center}aside{padding:12px 0 0}.aside-mark{font-size:36px;color:#9a7951;margin-bottom:18px}aside h2{font:600 23px "Noto Serif SC",serif;letter-spacing:2px;margin:12px 0 18px}.intro{font-size:12px;line-height:2;color:#897862}ol{padding:0;list-style:none;margin:25px 0}li{display:flex;gap:13px;font-size:12px;margin:18px 0;align-items:start}li>span{color:#b09a7a;font:italic 15px Georgia,serif}li strong{font-size:10px;line-height:1.8;color:#92816a;display:block;font-weight:400;margin-top:4px}.settings{border-top:1px solid #ccbda5;padding-top:18px}label{font-size:11px;display:flex;justify-content:space-between;margin-bottom:10px}label span{color:#9b866c;font-size:10px}select{width:100%;height:44px;border:1px solid #cbbba4;border-radius:7px;background:#faf4e8;padding:0 10px;font-size:12px}.settings button{margin-top:10px;width:100%;font-size:12px;background:transparent}.quiet-note{font-size:9px;line-height:2;color:#a49178;margin-top:17px}.result{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#e7d4b8bc;backdrop-filter:blur(5px)}[hidden]{display:none!important}.result-card{text-align:center;padding:25px 15px}.result-card>span{font-size:40px;color:#9b7448}.result-card h2{font:600 26px "Noto Serif SC",serif;letter-spacing:3px;margin:10px 0}.result-card p{font-size:12px;line-height:1.8}.result-card button{background:#597f6b;color:#fff8e9;border:0;margin-top:8px;min-width:170px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.unscrewing .head{animation:unscrew .23s ease-in forwards}.plate.falling{animation:fall .48s ease-in forwards;pointer-events:none;z-index:20}.is-expanded{position:fixed;inset:0;z-index:1000;background:#eee5d6;max-width:none;height:100dvh;overflow:auto;padding-inline:max(24px,calc((100vw - 1050px)/2))}.game-view-open{overflow:hidden}button:disabled{opacity:.95}@keyframes unscrew{to{transform:translateY(-24px) rotate(270deg) scale(.5);opacity:0}}@keyframes fall{to{transform:translateY(170px) rotate(27deg);opacity:0}}@keyframes matched{50%{background:#a5bba0;box-shadow:0 0 15px #b7d2a9}}
@media(min-height:850px) and (min-width:761px){.workshop{justify-content:center}.game-layout{flex:0}header{padding-top:34px;padding-bottom:30px}.workbench{height:420px}.workshop{padding-bottom:40px}}
@media(max-width:760px){.workshop{padding:0 18px 10px}nav{height:48px}nav>span{display:none}header{padding:15px 0 12px}h1{font-size:25px;letter-spacing:3px}h1 span{font-size:9px;margin:7px 0 0;display:block}.eyebrow{font-size:8px}.brand{font-size:13px}.game-layout{display:flex;flex-direction:column;gap:12px;align-items:stretch;justify-content:flex-start}.workbench{height:clamp(270px,43svh,390px);min-height:270px;border-width:8px}aside{padding:0;display:flex;flex-direction:column}.aside-mark,aside>.eyebrow,aside>h2,.intro,ol,.quiet-note{display:none}.settings{padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 10px}.settings label{grid-column:1/-1;margin:0}.settings button{margin:0;padding:5px;font-size:11px}.tray-wrap{margin-top:17px}.tray-label{font-size:9px}.tray{padding:6px 8px}#status{font-size:10px;margin-top:8px}.board-meta{font-size:10px}.preview{top:calc(64% + 18px);font-size:7px;gap:3px}.preview-dot{width:11px;height:11px;font-size:8px;line-height:11px}.is-expanded{padding-inline:18px}}
@media(max-height:700px) and (max-width:760px) and (orientation:portrait){header{padding:9px 0}h1 span,.eyebrow{display:none}.workbench{height:280px;min-height:260px}.tray-wrap{margin-top:12px}.game-layout{gap:8px}.tray-label{margin-bottom:6px}}
@media(max-height:520px) and (orientation:landscape){.workshop{padding:0 20px 6px}nav{height:44px}header{padding:5px 0 8px}h1{font-size:21px}.brand,header .eyebrow,h1 span{display:none}.game-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(190px,1fr);gap:24px;align-items:center}.play-area{position:relative;display:grid;grid-template-columns:1fr 62px;gap:0 14px}.board-meta{grid-column:1/-1;margin-bottom:6px}.workbench{height:calc(100svh - 132px);min-height:220px;border-width:7px}#plates{inset:0 6%}.tray-wrap{margin:0;align-self:center}.tray-label{display:none}.tray{flex-direction:column;align-items:center;gap:4px;padding:5px}.slot{width:36px;height:36px}.slot .head{width:28px;height:28px;font-size:13px}#status{grid-column:1/-1;font-size:9px;margin:6px 0 0}.preview{top:calc(64% + 13px)}.screw,.hole{width:44px;height:44px;min-height:44px;flex-basis:44px}.head{width:32px;height:32px;font-size:16px}.settings{display:block}.settings label{margin-bottom:8px}.settings button{margin-top:8px}.aside-mark,aside>.eyebrow,aside>h2,.intro,.quiet-note{display:none}ol{display:block;margin:0 0 12px}li{font-size:10px;margin:9px 0;gap:8px}li strong{font-size:9px;margin-top:1px}li>span{font-size:12px}.settings select,.settings button{font-size:11px}aside{padding:0}.bench-stamp{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.compact-rules{display:none}@media(max-width:760px) and (orientation:portrait){.compact-rules{display:block;font-size:9px;line-height:1.7;text-align:center;color:#968168;margin:7px 0 0}}

@media(max-height:600px) and (max-width:760px) and (orientation:portrait){nav{height:44px}header{padding:6px 0}h1{font-size:23px}.workbench{height:calc(100svh - 350px);min-height:210px}.tray-wrap{margin-top:10px}.compact-rules{font-size:8px;line-height:1.5}.preview{top:calc(64% + 15px)}}
@media(max-height:520px) and (orientation:landscape){.workbench{height:calc(100svh - 146px);min-height:200px}}

/* Readable ink: all informative text has >=4.5:1 against its surface. */
nav>span,.eyebrow,h1 span,.board-meta,.tray-label,#status,.intro,li>span,li strong,label span,.quiet-note,.compact-rules{color:#6d5c48}
.preview,.empty-lane{color:#634d34}
.screw-symbol{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#493c2e;color:#fff8e4;font-size:16px;line-height:1;text-shadow:none}
.slot .screw-symbol{width:20px;height:20px;font-size:14px}
.preview-dot{background:#493c2e;color:#fff8e4;box-shadow:0 0 0 2px var(--color);margin-inline:2px}
.result-card button{background:#466a57;color:#fff8e9}
/* Keep narrow phones on one screen without shrinking any interaction targets. */
@media(max-width:360px) and (orientation:portrait){
 header{padding:6px 0}
 .game-layout{gap:6px}
 .tray-wrap{margin-top:8px}
 .compact-rules{margin-top:4px}
}
@media(max-width:360px) and (orientation:portrait){.workshop{padding-bottom:2px}}

/* Optional quiet feedback and reversible, interruption-safe play. */
.workshop-actions{display:flex;gap:8px;margin-top:8px;grid-column:1/-1}.workshop-actions button{flex:1;min-height:44px;font-size:11px;padding:6px 8px}.workshop-actions button:disabled{opacity:.5}.workshop-actions button[aria-pressed="true"]{background:#466a57;color:#fff8e9}.tray.matched{animation:basket-match .48s ease-out}@keyframes basket-match{50%{transform:scale(1.025);filter:brightness(1.12)}}
@media(max-height:650px) and (max-width:760px) and (orientation:portrait){.workshop{height:auto;min-height:100svh}.workshop-actions{margin-top:6px}.workshop-actions button{min-height:44px}.rules{padding-top:3px}}
@media(prefers-reduced-motion:reduce){.tray.matched{animation:none}}

/* A plate subtly tips toward a removed end before its final release. */
.plate:not(.lower):not(.falling){transform:rotate(calc(var(--tilt) + var(--support-lean,0deg)));transition:transform .22s ease-out;transform-origin:center center}