/* The lane is the main interface. One quiet dock; technique is opened deliberately. */
#app{touch-action:manipulation;--hud-edge:max(12px,var(--safe-left),var(--safe-right),env(safe-area-inset-left),env(safe-area-inset-right));--hud-bottom:max(10px,var(--safe-bottom),env(safe-area-inset-bottom))}
#throwHud{width:min(520px,calc(100% - 2 * var(--hud-edge)));max-width:none;display:block;padding:9px 11px 8px;bottom:var(--hud-bottom);border-radius:16px;background:linear-gradient(120deg,#102722f5,#0a1816f5);border:1px solid #c6b17c42;box-shadow:inset 0 1px #fff1,0 8px 26px #0005;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;touch-action:manipulation}
.shot-caption{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;margin:0 0 3px;height:17px;pointer-events:none}
.shot-caption strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d1d6c9;font-weight:500;font-size:11px;line-height:17px;letter-spacing:.01em}
.ready-dot{width:4px;height:4px;border-radius:50%;background:#a3c5a5;flex:none}
.shot-console{display:grid;grid-template-columns:56px minmax(0,1fr) 58px 94px;gap:12px;align-items:center}
.shot-pad{position:relative;min-width:44px;height:58px;padding:4px 2px 0;border:0;border-radius:11px;background:transparent;color:#d7c392;touch-action:none;cursor:grab;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px}
.shot-pad:active{cursor:grabbing}.shot-pad b{font-size:10px;font-weight:500;line-height:12px;font-variant-numeric:tabular-nums}
.gesture-arrow{position:absolute;top:2px;right:4px;font-size:14px;color:#e2cf9e;pointer-events:none}
.gesture-ball{position:relative;display:block;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 31% 22%,#d3cda9 0%,#618776 13%,#254c3d 34%,#b5a980 36%,#274835 41%,#092018 75%);box-shadow:inset -3px -5px 7px #0008,0 3px 6px #0008;pointer-events:none}
.gesture-ball i{position:absolute;width:4px;height:5px;background:#061510;border:1px solid #365346;border-radius:50%;top:10px;left:14px}.gesture-ball i:nth-child(2){left:20px;top:12px}.gesture-ball i:nth-child(3){left:16px;top:18px;width:5px;height:6px}
.shot-sliders{min-width:0;border-left:1px solid #ffffff10;padding-left:10px}
#throwHud label,.technique-panel label{display:grid;grid-template-columns:1fr auto;align-items:center;min-width:0;font-size:11px;line-height:14px;color:#bcc9bf;gap:0 8px}
#throwHud output,.technique-panel output{color:#e3ce9a;font-variant-numeric:tabular-nums;font-size:12px}
#throwHud input[type=range],.technique-panel input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:44px;min-width:44px;margin:0;grid-column:1/-1;cursor:ew-resize;touch-action:pan-y;background:transparent}
#throwHud input::-webkit-slider-runnable-track,.technique-panel input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,#d8c18b var(--fill,50%),#697e7266 var(--fill,50%))}
#throwHud input::-webkit-slider-thumb,.technique-panel input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;border:1px solid #eddfbb;background:#d8c18b;box-shadow:0 0 0 4px #d8c18b0d}
#throwHud input::-moz-range-track,.technique-panel input::-moz-range-track{height:2px;background:#697e7266}
#throwHud input::-moz-range-progress,.technique-panel input::-moz-range-progress{height:2px;background:#d8c18b}
#throwHud input::-moz-range-thumb,.technique-panel input::-moz-range-thumb{width:13px;height:13px;border:1px solid #eddfbb;background:#d8c18b;border-radius:50%}
#throwHud .throw-btn{height:54px;min-width:44px;padding:0 12px;border-radius:11px;font-size:12px;letter-spacing:.05em;background:linear-gradient(135deg,#e5d2a4,#c3a773);box-shadow:inset 0 1px #fff4,0 3px 9px #0003}
#throwHud .throw-btn span{margin-left:5px}
.technique-toggle{height:54px;min-width:44px;border:1px solid #c0c9b61f;background:#ffffff04;border-radius:10px;color:#d4d5c3;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.technique-toggle svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.35;fill:none}.technique-toggle circle{fill:#142721}.technique-toggle span{font-size:10px;line-height:12px}.technique-toggle[aria-expanded=true]{border-color:#d3bd815e;color:#edd7a2;background:#d5bd7b10}
#throwHud.is-busy .shot-console{display:none}#throwHud.is-busy{width:max-content;max-width:calc(100% - 2 * var(--hud-edge));padding:9px 15px;border-color:#b1bba627;border-radius:30px;background:#0a1816d9;box-shadow:none}
#throwHud.is-busy .shot-caption{display:flex;margin:0}#throwHud.is-busy .ready-dot{background:#d3bd81}
.is-dragging .gesture-ball{transform:translateY(-4px)}.is-dragging .shot-pad{background:#d5bd7b0b}
#throwHud button:disabled,.technique-panel button:disabled{opacity:.5;cursor:default}
/* A modeless, bounded sheet: no backdrop over the lane, its own scrolling area. */
.technique-panel{position:absolute;z-index:12;right:var(--hud-edge);bottom:calc(var(--hud-bottom) + 104px);width:min(400px,calc(100% - 2 * var(--hud-edge)));max-height:min(470px,calc(100dvh - 200px));display:flex;flex-direction:column;overflow:hidden;border:1px solid #c6b17c42;border-radius:18px;background:linear-gradient(135deg,#122b24,#0b1d19);box-shadow:0 12px 40px #0006,inset 0 1px #ffffff0d;touch-action:pan-y}
.technique-panel[hidden]{display:none}.technique-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #ffffff0c;flex:none}
.technique-heading h2{font:400 22px Georgia,serif;letter-spacing:-.02em;margin:0;color:#f0e2c2}.technique-heading h2:focus{outline:none}.technique-heading>div{display:flex;gap:5px}.technique-heading .icon-btn{background:transparent;border-color:#c5ceb21a}.technique-heading #techniqueClose{font-size:25px;font-weight:300}
.technique-body{padding:12px 15px 14px;overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:#8f9b7f55 transparent;touch-action:pan-y}
#shotHint{font-size:11px;color:#b8c7ba;line-height:1.5;margin:12px 0}
.shot-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:14px}
.shot-tools button,.ball-choice button,.delivery-choice button,.oil-choice button{min-height:44px;min-width:44px;padding:7px;border:1px solid #aebd9a29;border-radius:9px;background:#ffffff04;color:#e1ddc7;font-size:11px;cursor:pointer}
.shot-tools button:hover,.ball-choice button:hover,.delivery-choice button:hover,.oil-choice button:hover{background:#ccd4ad0b}
.technique-sliders{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding-bottom:4px}
.delivery-choice{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px 0;border-top:1px solid #ffffff0c}
.delivery-choice small{grid-column:1/-1;font-size:10px;color:#a9bbad;line-height:1.5}
.ball-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0 12px}
.ball-choice button{line-height:1.4;min-height:50px}.ball-choice [aria-pressed=true],.delivery-choice [aria-pressed=true]{border-color:#cdb67d88;background:#cdb67d12;color:#f5dfab}
.oil-choice{display:flex;align-items:center;gap:10px}.oil-choice button{flex:0 0 auto;color:#e5d0a0}.oil-choice span{font-size:10px;color:#adbfaf;line-height:1.4}
.shot-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#a8bcad;font-size:9px;padding-top:13px;margin-top:12px;border-top:1px solid #ffffff0c}#shotTarget{color:#e5cf9c}#previousLabel{color:#a8d8c8}#previousLabel::before{content:'┄ ';color:#83baa9}
.shot-feedback{position:absolute;left:16px;top:99px;z-index:8;display:flex;align-items:center;gap:10px;max-width:285px;padding:9px 12px;border:1px solid #b1bba624;border-radius:12px;background:#0b211bd9;pointer-events:none}
.shot-feedback p{font-size:11px;line-height:1.5;color:#d4dbc8;margin:0;max-width:190px}#pinMap{flex:0 0 58px;display:grid;grid-template-columns:repeat(7,7px);grid-template-rows:repeat(4,12px);gap:1px;transform:scaleY(-1)}#pinMap span{width:10px;height:10px;line-height:10px;border-radius:50%;background:#ecdfbf;color:#29382c;font-size:7px;text-align:center;transform:scaleY(-1)}#pinMap span.down{opacity:.15}#pinMap span:nth-child(1){grid-column:4}#pinMap span:nth-child(2){grid-column:3;grid-row:2}#pinMap span:nth-child(3){grid-column:5;grid-row:2}#pinMap span:nth-child(4){grid-column:2;grid-row:3}#pinMap span:nth-child(5){grid-column:4;grid-row:3}#pinMap span:nth-child(6){grid-column:6;grid-row:3}#pinMap span:nth-child(7){grid-column:1;grid-row:4}#pinMap span:nth-child(8){grid-column:3;grid-row:4}#pinMap span:nth-child(9){grid-column:5;grid-row:4}#pinMap span:nth-child(10){grid-column:7;grid-row:4}
/* Gesture predictions are visual only and never enter the physical shot. */
#gestureTrail{position:fixed;inset:0;width:100%;height:100%;z-index:15;pointer-events:none;overflow:visible}#gestureTrail path{fill:none;stroke:#f3d28c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#gestureTrail .gesture-prediction{stroke-dasharray:3 6;opacity:.45}#gestureTrail circle{fill:#f3d28c22;stroke:#f3d28c;stroke-width:2}
#gamepadHint{position:absolute;right:16px;top:95px;z-index:8;max-width:260px;padding:9px 12px;background:#0b221dee;border:1px solid #a48e5d44;border-radius:12px;font-size:11px;color:#d4dbc8;line-height:1.5;pointer-events:none}
@media(max-width:600px){
 #throwHud{padding:8px 8px 7px}.shot-console{grid-template-columns:48px minmax(0,1fr) 46px 70px;gap:7px}.shot-sliders{padding-left:7px}.shot-caption strong{font-size:11px}
 #throwHud .throw-btn{font-size:12px;padding:0 7px}#throwHud .throw-btn span{margin-left:3px}
 .technique-panel{max-height:min(440px,52dvh)}.technique-heading{padding:8px 10px}.technique-heading h2{font-size:21px}.technique-body{padding:12px}
 .shot-feedback{left:8px;top:83px;padding:8px 10px;max-width:260px}.shot-feedback p{font-size:10px;max-width:164px}
 #gamepadHint{left:8px;right:auto;top:157px;max-width:245px}
}
@media(max-height:540px){
 #throwHud{padding-top:7px;padding-bottom:7px}.shot-caption{display:none}
 .technique-panel{bottom:calc(var(--hud-bottom) + 84px);max-height:calc(100dvh - var(--hud-bottom) - 100px);width:min(340px,calc(100% - 2 * var(--hud-edge)));border-radius:14px}
 .technique-heading{padding:5px 10px}.technique-heading h2{font-size:20px}
 .shot-feedback{top:85px;max-width:210px}.shot-feedback p{font-size:10px}
}
@media(prefers-reduced-motion:no-preference){
 .gesture-ball{transition:transform .16s}.technique-panel:not([hidden]){animation:technique-enter .18s ease-out}
 @keyframes technique-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}