.screws-game{max-width:800px!important;margin:auto;color:#263e38;padding:16px 20px 20px!important}
.screw-heading{display:flex;gap:16px;justify-content:space-between;align-items:center}
.screw-heading>div{min-width:0}.screw-heading .eyebrow{font-size:10px;letter-spacing:1.6px}
.screws-game .screw-heading h2{font:600 clamp(22px,3vw,28px)/1.15 Georgia,serif;margin:5px 0}
.screw-heading label{width:220px;max-width:40%;flex:none;font-size:12px;color:#5d7167}
.screw-heading select{display:block;min-height:44px;max-width:100%;width:100%;border:1px solid #b4c9bb;border-radius:10px;background:#fffaf1;padding:7px;font:inherit;font-size:14px;color:#263e38}
.screws-game .screw-goal{font-size:15px;line-height:1.45;margin:10px 0 12px;color:#405c50}
.screw-goal b{font-weight:600}.screw-board{background:#e9eee4;border:1px solid #c5d5c7;border-radius:20px;overflow:hidden}
[data-screw-hud]{padding:10px 12px 0}
.screw-trays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.screw-tray{border:2px solid var(--tray-color,#769c85);border-radius:12px;padding:6px 10px;min-width:0;background:#fffffb}
.screw-tray>b{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:13px;font-weight:600;margin-bottom:4px;text-transform:capitalize}
.screw-tray>b>span{font-size:12px;font-variant-numeric:tabular-nums}.screw-tray>div{display:flex;gap:7px;justify-content:center}
.screw-tray i,.screw-buffer i{width:26px;height:26px;background:#d9e3dc;box-shadow:inset 1px 2px 4px #49675f30;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;flex:none}
.screw-chip{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;background:var(--screw-color);border-radius:50%;color:#fff;font:600 13px Arial,sans-serif;box-shadow:inset 1px 2px 1px #ffffff70,inset -1px -2px 1px #24483c38,0 2px 3px #23403425}
.screw-storage-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.screw-buffer{display:flex;align-items:center;gap:9px;min-width:0}.screw-buffer>b{font-size:12px;font-weight:600;white-space:nowrap}.screw-buffer>b>span{font-weight:400;margin-left:3px}
.screw-buffer>div{display:flex;gap:5px}.screw-buffer-warning{color:#915135}.screw-buffer-warning i:empty{outline:1px solid #c6825d;outline-offset:-1px;background:#f3e4ce}
.screw-next-boxes{display:flex;align-items:center;gap:8px;font-size:11px;color:#5c7067}.screw-next-boxes>div{display:flex;gap:5px}.screw-next-boxes .screw-chip{width:18px;height:18px;font-size:10px}
.screw-progress{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:7px 0;color:#526c60;min-height:19px;font-variant-numeric:tabular-nums}.screw-progress>b{font-weight:600}
.screw-transfer{display:flex;gap:4px;align-items:center;font-size:11px;animation:screw-transfer-in .35s ease-out}.screw-transfer .screw-chip{width:16px;height:16px;font-size:9px}
.screw-viewport{position:relative;width:100%;height:clamp(300px,49vh,480px);min-height:300px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#fbf2de,#d6e9e2 65%,#bed3d4);touch-action:none;isolation:isolate}
.screw-viewport canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-4px}.screw-viewport canvas:active{cursor:grabbing}
.screws-game .screw-drag-note{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:13px;line-height:1.4;pointer-events:none;color:#345c50;background:#fff9e9d9;padding:6px 8px;margin:0}
.screw-camera{display:flex;justify-content:center;gap:7px;margin:8px 0}.screw-camera button{width:45px;min-width:44px;min-height:44px;border-radius:12px;background:#e8ece1;border:1px solid #b8cabb;font-size:23px;color:#335e50}.screw-camera button:hover{background:#d4e4d7}
.screws-game .screw-feedback{font-size:14px;line-height:1.5;min-height:21px;color:#426555;margin:5px 0 10px}
.screw-payoff{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 12px}.screw-reward{font-size:14px;line-height:1.5;color:#795a32}.screw-payoff>span{font-size:12px;line-height:1.5;color:#5d7167;max-width:320px}
.screw-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.screw-tools .btn{font-size:13px;min-height:48px;padding:8px;flex-direction:column;gap:3px}.screw-tools small{font-size:11px;color:#5f7569}
.screw-outcome{position:absolute;z-index:3;inset:20px 15px auto;background:#fff9eefa;box-shadow:0 8px 32px #244b3f26;border:1px solid #c6dbc4;border-radius:18px;padding:18px;text-align:center;animation:screw-result-in .3s ease-out}
.screw-outcome>span{font:600 11px Arial;letter-spacing:2px;color:#4e866b}.screws-game .screw-outcome h3{font-size:25px;margin:7px 0}.screws-game .screw-outcome p{font-size:14px;line-height:1.5;margin-bottom:12px}.screw-outcome .btn{font-size:14px;min-height:44px;margin:3px}.screw-warning{border-color:#dfa395;background:#fff0e9f7}
.screw-rules,.screw-accessibility{font-size:14px;line-height:1.6;border-top:1px solid #d8dfcf;margin-top:12px;padding-top:7px}.screw-rules summary,.screw-accessibility summary{cursor:pointer;min-height:44px;font-weight:600;padding:9px 0}
.screws-game .screw-rules p,.screws-game .screw-visible-list p{font-size:14px;line-height:1.6;margin:7px 0}
.screw-visible-list{display:flex;flex-wrap:wrap;gap:7px}.screw-visible-list .btn{min-height:44px;font-size:13px;flex:1 1 140px;padding:8px}.screw-visible-list .screw-chip{flex:none}
.screw-viewport[data-renderer=fallback]:after{content:'3D недоступно на устройстве. Поворачивай стороны кнопками и выбирай винтики в списке ниже.';position:absolute;inset:30px 20px auto;text-align:center;font-size:16px;line-height:1.6;color:#34594d}.screw-viewport[data-renderer=fallback] canvas{visibility:hidden}
.screw-hint-ring{position:absolute;width:44px;height:44px;border:3px solid #fff1a8;border-radius:50%;box-shadow:0 0 0 3px #b8892d88,0 0 18px #fffacb;transform:translate(-50%,-50%);pointer-events:none;z-index:2}.screw-hint-ring[hidden]{display:none}.screw-visible-list .screw-hinted{outline:3px solid #c59437;outline-offset:1px}
@keyframes screw-result-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes screw-transfer-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(max-width:600px){
 .screws-game{padding:12px!important}.screw-heading{display:block}.screw-heading .eyebrow{font-size:10px}.screws-game .screw-heading h2{font-size:23px;margin:5px 0 8px}
 .screw-heading label{display:flex;align-items:center;gap:8px;width:auto;max-width:none}.screw-heading select{width:auto;min-width:0;flex:1}
 .screws-game .screw-goal{font-size:14px;line-height:1.45;margin:8px 0 10px}.screw-board{border-radius:16px}[data-screw-hud]{padding:8px 8px 0}
 .screw-tray{padding:5px 7px}.screw-tray>b{font-size:12px}.screw-tray i,.screw-buffer i{width:24px;height:24px}.screw-chip{width:22px;height:22px}
 .screw-storage-row{gap:8px;align-items:center}.screw-buffer{gap:5px}.screw-buffer>b{font-size:11px}.screw-buffer>b>span{display:none}.screw-buffer>div{gap:3px}
 .screw-next-boxes{display:block;font-size:10px}.screw-next-boxes>span{display:block;margin-bottom:3px}.screw-next-boxes>div{gap:4px}.screw-next-boxes .screw-chip{width:17px;height:17px;font-size:9px}
 .screw-progress{font-size:11px;margin:6px 0}.screw-transfer{font-size:10px;gap:2px}.screw-transfer .screw-chip{width:13px;height:13px;font-size:8px}
 .screw-viewport{height:300px;min-height:300px}.screws-game .screw-drag-note{font-size:12px;padding:5px 7px}.screw-payoff{display:block}.screw-payoff>span{display:block;margin-top:3px;max-width:none}
 .screw-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.screw-outcome{inset:16px 10px auto;padding:13px}.screws-game .screw-outcome h3{font-size:23px}
}
@media(max-width:350px){.screw-buffer{display:block}.screw-buffer>b{display:block;margin-bottom:3px}.screw-buffer>b>span{display:inline}.screw-tray i{width:23px;height:23px}.screw-storage-row{align-items:flex-end}.screw-progress{flex-wrap:wrap}.screw-transfer{order:3;width:100%;justify-content:center}.screw-next-boxes>span{max-width:80px;line-height:1.2}}
@media(prefers-reduced-motion:reduce){.screw-outcome,.screw-transfer{animation:none}}

.screw-legacy-note{display:flex;align-items:center;gap:10px;padding:10px;margin:8px 0;background:#f4e6ca;border-radius:12px;font-size:13px;line-height:1.5}.screw-legacy-note .btn{font-size:13px;min-height:44px;flex:none}

.screws-game .screw-purpose{font-size:12px;line-height:1.4;color:#5a715a;margin:5px 0}
@media(max-width:480px){.screw-heading{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:8px}.screws-game .screw-heading h2{font-size:19px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.screw-heading label{display:block;width:108px;max-width:108px}.screw-heading select{width:108px;font-size:13px}.screw-heading .eyebrow{font-size:9px;letter-spacing:.5px}.screw-camera{margin:4px 0 6px}.screw-viewport{height:260px;min-height:260px}.screw-buffer{display:flex}.screw-buffer>b{margin:0}.screw-buffer>b>span{display:none}.screws-game .screw-goal{font-size:13px;line-height:1.4;margin:7px 0}.screw-board>[data-screw-hud]{padding-top:6px}}