*{box-sizing:border-box}
:root{color-scheme:dark;--gold:#efd891;--pad:clamp(4px,0.7vmin,10px)}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(ellipse at 50% 10%,#31454b,#132227 48%,#05090c);color:#f7f3e9;font-family:Segoe UI,Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.shell{
  width:100%;height:100vh;height:100dvh;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px;
  padding:max(var(--pad),env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) max(var(--pad),env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));
}
.topbar{display:grid;grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(44px,1fr);align-items:center;gap:6px;min-height:44px;min-width:0}
.home-link{grid-column:1;grid-row:1;justify-self:start;display:grid;place-items:center;width:44px;height:44px;color:var(--gold);font-size:26px;text-decoration:none;border-radius:6px}
.home-link:hover{background:#18343d}
.home-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.panel{grid-column:2;min-width:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,28px);padding:7px 14px;border:1px solid #36545b;border-radius:9px;background:#071115d8;box-shadow:inset 0 1px 0 #ffffff14}
.panel div{text-align:center}
.panel span{display:block;color:#97aeb3;font-size:9px;font-weight:800;letter-spacing:1px}
.panel strong{display:block;margin-top:3px;font-size:24px;line-height:1}
.panel i{max-width:120px;color:var(--gold);font-style:normal;font-size:11px;font-weight:900;text-align:center}
button{min-height:44px;padding:8px 14px;border:1px solid #607b80;border-radius:9px;background:#10232a;color:#edf6f3;font:800 11px Segoe UI,Arial,sans-serif;cursor:pointer;touch-action:manipulation}
button:hover{background:#18343d}
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.stage{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
.play-area{display:grid;grid-template-columns:clamp(64px,8vw,86px) minmax(0,1fr) clamp(64px,8vw,86px);gap:clamp(6px,1vw,14px);min-width:0;min-height:0}
.side-controls{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;min-height:0;padding:10px 8px 8px;overflow:hidden;border:1px solid #af7928;border-radius:17px;background:radial-gradient(ellipse at 50% 35%,#1c1b16 0,#0b0c0b 57%,#020303 100%);box-shadow:inset 0 0 0 2px #402a12,inset 0 0 18px #000,0 5px 12px #0009;color:#f4db9e}
.side-controls::before{content:'';position:absolute;inset:3px;border:1px solid #f0c76a55;border-radius:13px;pointer-events:none}
.control-label,.control-hint{position:relative;z-index:1;font-size:clamp(8px,1vw,13px);font-weight:900;letter-spacing:.55px;text-align:center;white-space:nowrap}
.control-label{margin:0 0 9px;color:#f5d47b;text-shadow:0 1px 1px #000,0 0 8px #b5741d88}
.control-hint,#shot-power{display:none}
.gold-rail{position:relative;z-index:1;width:100%;min-height:70px;max-height:none;flex:1;border:4px solid #dba447;border-radius:16px;background:linear-gradient(90deg,#8f581d 0,#fbe59a 11%,#c77b24 23%,#7f4518 50%,#c88028 76%,#ffe8a0 89%,#8e561d 100%);box-shadow:inset 0 0 0 1px #fff2b1,inset 0 0 0 4px #5e3514,0 2px 7px #000c;touch-action:none;cursor:ns-resize;outline-offset:4px}
.gold-rail::before,.gold-rail::after{display:none}
.rail-bed{position:absolute;inset:5px;border:1px solid #c9943e;border-radius:10px;overflow:hidden;container-type:size;box-shadow:inset 0 0 10px #000b}
.power-side .rail-bed{background:radial-gradient(ellipse at 40% 20%,#0c7956 0,#07593e 34%,#053e2c 72%,#022a20 100%)}
.aim-side .rail-bed{background:radial-gradient(ellipse at 48% 30%,#111 0,#030303 62%,#000 100%)}
.power-cue{position:absolute;z-index:2;left:50%;top:calc(61% + var(--charge,0)*20%);width:clamp(150px,92cqh,560px);height:auto;max-width:none;transform:translate(-50%,-50%) rotate(90deg);filter:drop-shadow(1px 2px 2px #000c);pointer-events:none}
.power-fill{position:absolute;inset:auto 0 0;height:calc(var(--charge,0)*100%);background:linear-gradient(0deg,#d6942ab8,#edcf6c55 70%,transparent);box-shadow:0 -2px 12px #f3c85c99;transition:height 30ms linear}
.aim-side .aim-wheel{width:clamp(30px,68%,58px);min-height:clamp(80px,20vh,150px);max-height:72%;flex:1;border-width:3px;border-radius:11px}
.aim-side .aim-wheel .rail-bed{inset:4px;border-radius:7px}
.ruler{background:radial-gradient(ellipse at 48% 30%,#111 0,#030303 62%,#000 100%)}
.aim-needle{position:absolute;top:50%;left:3px;right:3px;height:1px;background:linear-gradient(90deg,transparent,#f3d47e 18%,#fff1b3 50%,#f3d47e 82%,transparent);box-shadow:0 0 4px #e9b84d;transform:none;pointer-events:none}
.aim-side .spin-ball{order:2;width:36px;height:36px;min-height:36px;margin-top:8px;border-width:2px}
.gold-rail[aria-disabled=true]{opacity:.4;cursor:default}
.gold-rail:focus-visible,.spin-picker:focus-visible{outline:2px solid #ffdb80}
.spin-ball{position:relative;width:54px;height:54px;min-height:54px;flex-shrink:0;padding:0;border:3px solid #d9ac76;border-radius:50%;background:radial-gradient(circle at 35% 28%,white 0,#fbf4e0 25%,#d6c8a7 63%,#7a6b58 90%);box-shadow:inset 0 0 0 3px #554435,0 3px 5px #0006}
.spin-ball:hover{background:radial-gradient(circle at 35% 28%,white,#eee0bd 60%,#88745d)}
.spin-dot,.spin-target{position:absolute;left:var(--spin-x,50%);top:var(--spin-y,50%);transform:translate(-50%,-50%);width:8px;height:8px;background:#dc493a;border:1px solid white;border-radius:50%;box-shadow:0 0 0 2px #9e2e2466;pointer-events:none}
#spin-dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 16px);width:450px;padding:18px;border:1px solid #ad844d;border-radius:18px;background:radial-gradient(ellipse at top,#253d3f,#0a171b);color:#f6eddb;box-shadow:0 20px 80px #000c;overflow:auto}
#spin-dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}
.spin-editor{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0}
.spin-editor header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}
.spin-editor h2{font-size:17px;margin:0}.spin-editor header button{font-size:24px;padding:0;width:44px}
.spin-editor p{margin:0;color:#b8c7c4;font-size:12px;text-align:center}
.spin-picker-wrap{position:relative;padding:22px 48px}
.spin-picker{position:relative;width:min(250px,54vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 33% 24%,#fff 0,#fff9e8 22%,#e4d8bb 58%,#b4a284 78%,#675546 100%);box-shadow:inset -8px -12px 20px #715e4255,0 15px 25px #0008;touch-action:none;cursor:crosshair;overflow:hidden}
.spin-cross{position:absolute;inset:10%;border:1px dashed #9c806b77;border-radius:50%;pointer-events:none}
.spin-target{width:18px;height:18px;border:2px dashed #df6652;background:#d6493533;z-index:2}
.spin-tip{position:absolute;left:var(--spin-x,50%);top:var(--spin-y,50%);width:18px;height:110%;border-top:8px solid #368ec0;border-radius:7px 7px 0 0;background:linear-gradient(90deg,#9d5b25,#f3cd82 40%,#d7a057 65%,#7f431e);transform:translateX(-50%);pointer-events:none;opacity:.8}
.spin-top-label,.spin-bottom-label,.spin-left-label,.spin-right-label{position:absolute;font-size:8px;font-weight:800;color:#d8c8a0;letter-spacing:.6px}
.spin-top-label{top:2px;left:50%;transform:translateX(-50%)}.spin-bottom-label{bottom:2px;left:50%;transform:translateX(-50%)}
.spin-left-label{left:0;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}.spin-right-label{right:0;top:50%;writing-mode:vertical-rl;transform:translateY(-50%)}
#spin-description{font-size:12px;min-height:18px;color:var(--gold)}
.spin-actions{display:flex;gap:12px}.spin-actions button:last-child{background:#b4853d;color:#101819;border-color:#efcc87}
@media(max-height:500px){.side-controls{padding:6px 5px;border-radius:12px}.gold-rail{width:100%;border-radius:12px}.aim-side .aim-wheel{min-height:58px;max-height:66%;border-width:2px}.control-label{margin-bottom:5px;font-size:8px;letter-spacing:.3px}.spin-ball{width:38px;height:38px;min-height:38px}#spin-dialog{padding:10px}.spin-editor{gap:5px}.spin-editor p{display:none}.spin-picker{width:min(170px,38vh)}.spin-picker-wrap{padding:17px 32px}.spin-editor h2{font-size:14px}}
#game{display:block;width:100%;height:auto;max-width:100%;max-height:100%;touch-action:none;cursor:crosshair;filter:drop-shadow(0 8px 14px #0008)}
#fullscreen{grid-column:3;justify-self:end;display:flex;align-items:center;justify-content:center;gap:0;width:44px;min-height:44px;padding:0;border:1px solid transparent;background:transparent}
#fullscreen:hover{border-color:transparent;background:transparent}
#fullscreen>span:first-child{font-size:25px;line-height:1}
.rotate-hint[hidden]{display:none}
.rotate-hint{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:radial-gradient(ellipse at top,#24414b,#071216 75%);overflow:auto}
.rotate-card{width:min(100%,320px);text-align:center}
.phone-icon{width:100px;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rotate-card h1{font-size:26px;margin:18px 0 10px}
.rotate-card p{color:#a7bbc0;font-size:15px;line-height:1.6;margin:0 0 24px}
.rotate-card button{padding:12px 22px}


@media (max-height:600px) and (orientation:landscape){
  .panel{padding:4px 12px;gap:20px}
  .panel div{display:flex;align-items:center;gap:6px}
  .panel span{font-size:8px;letter-spacing:.3px}
  .panel strong{margin:0;font-size:21px}
  .panel i{font-size:10px}
}
@media (max-width:700px){
  .play-area{grid-template-columns:clamp(56px,16vw,76px) minmax(0,1fr) clamp(56px,16vw,76px);gap:4px}
  .side-controls{padding:7px 5px;border-radius:13px}
  .aim-side .aim-wheel{width:66%;max-height:70%}
  .panel{padding:4px 6px;gap:8px}
  .panel span{font-size:8px;letter-spacing:0}
  .panel strong{font-size:20px}
  .panel i{font-size:9px}
  #fullscreen{width:44px;padding:0}
}

/* Artwork supplied for the two side controls. Interactive areas remain above it. */
.side-controls{padding:0;border:0;border-radius:15px;background-position:center;background-repeat:no-repeat;background-size:100% 100%;box-shadow:none}
.side-controls::before{display:none}
.power-side{background-image:url('../images/power-panel.png')}
.aim-side{background-image:url('../images/aim-panel.png')}
.control-label,.control-hint,#shot-power{display:none}
.side-controls .gold-rail{position:absolute;z-index:1;width:auto;min-height:0;max-height:none;margin:0;border:0;border-radius:12px;background:transparent;box-shadow:none;outline:0}
.power-side .gold-rail{inset:11% 17% 5.2%}
.aim-side{overflow:visible}
.aim-side .aim-wheel{inset:6% 17% 5.5%;width:auto;min-height:0;max-height:none;border:0;border-radius:12px}
.side-controls .rail-bed{inset:0;border:0;border-radius:10px;background:transparent;box-shadow:none}
.power-side .power-fill{display:none}
.power-side .power-cue{display:block;z-index:2;top:calc(60% + var(--charge,0)*19%);width:96cqh;min-width:0;max-width:none}
.aim-side .ruler{background:repeating-linear-gradient(180deg,transparent 0 10px,#f5d37a66 10px 11px,transparent 11px 21px),linear-gradient(90deg,#050505,#14110c 50%,#050505);background-position:0 var(--ruler-offset,0px),0 0}
.aim-side .aim-needle{left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,#d99f31 18%,#fff0a5 50%,#d99f31 82%,transparent);box-shadow:0 0 4px #e8b74b}
.aim-side .spin-ball{position:absolute;z-index:2;top:calc(100% + 10px);bottom:auto;left:50%;width:38px;height:38px;min-height:38px;margin:0;padding:0;transform:translateX(-50%);opacity:1;border:1px solid #8f7b5c;border-radius:50%;background:radial-gradient(circle at 33% 26%,#fff 0,#fbf7e9 32%,#ded4bd 68%,#8b806e 100%);box-shadow:inset -3px -4px 6px #584d3c55,0 2px 5px #000b}
.aim-side .spin-ball:hover{background:radial-gradient(circle at 33% 26%,#fff 0,#fffdf3 32%,#e8ddc4 68%,#9c907c 100%)}
.aim-side .spin-dot{display:block;width:5px;height:5px;border:1px solid #fff;background:#c74637;box-shadow:0 0 0 1px #8d2f27aa}
@media(max-height:500px){.side-controls{padding:0}.power-side .gold-rail{inset:11% 17% 5.2%}.aim-side .aim-wheel{inset:6% 17% 5.5%}.aim-side .spin-ball{top:calc(100% + 8px);width:34px;height:34px;min-height:34px}}

/* Keep the artwork at a fixed size beside the table instead of sizing the table grid around it. */
.play-area{position:relative;display:block}
.stage{width:100%;height:100%}
.side-controls{position:absolute;z-index:4;top:50%;width:48px;height:260px;min-height:0;transform:translateY(-50%);transition:transform 360ms cubic-bezier(.22,.8,.25,1),opacity 220ms ease}
.power-side{left:16px}
.aim-side{right:16px}
.play-area.shot-active .power-side{opacity:0;pointer-events:none;transform:translate(-150%,-50%) scale(.82)}
.play-area.shot-active .aim-side{opacity:0;pointer-events:none;transform:translate(150%,-50%) scale(.82)}
@media(max-width:700px),(max-height:500px){
  .side-controls{width:clamp(38px,7vw,48px);height:clamp(180px,54vh,260px)}
  .power-side{left:clamp(7px,1.7vw,16px)}
  .aim-side{right:clamp(7px,1.7vw,16px);top:calc(50% - 10px)}
}
@media(max-height:500px){
  .power-side .gold-rail{inset:2% 15% 7%}
}
@media(max-height:500px){
  .aim-side .aim-wheel{inset:6% 17% 5.5%}
}
@media(prefers-reduced-motion:reduce){.side-controls{transition:none}}

/* Mirror only the artwork so the opponent's name and score stay readable. */
.topbar{grid-template-columns:44px minmax(0,1fr) 44px}
.panel{width:min(100%,660px);justify-self:center;display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);gap:8px;padding:0 0 8px;border:0;border-radius:0;background:none;box-shadow:none}
.panel .player-panel{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:center;gap:2px 8px;min-width:0;min-height:52px;aspect-ratio:4.2;padding:0 10% 0 28%}
.player-panel::before{content:'';position:absolute;inset:0;z-index:-1;background:url('../images/player-panel.png') center / 106% 143% no-repeat;pointer-events:none}
.panel .player-machine{padding:0 28% 0 10%;grid-template-columns:auto minmax(0,1fr)}
.player-human>span{text-align:left}
.player-machine>span{grid-column:2;grid-row:1;text-align:right}
.panel .player-panel{grid-template-rows:20px auto}
.player-panel>span{transform:translateY(-3px)}
.panel .ball-slots{position:absolute;left:26%;bottom:-5px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;min-width:0;width:72%;transform:none}
.panel .player-machine .ball-slots{left:2%}
.ball-slots img{display:block;width:100%;min-width:0;aspect-ratio:1;object-fit:contain}
.panel .ball-slot{position:relative;display:block;min-width:0;aspect-ratio:1}
/* Each circular window shows a 270px crop of the original 1524 x 979 sheet. */
.panel .ball-art{position:absolute;inset:7%;display:block;max-width:none;border-radius:50%;overflow:hidden;background-image:url('../images/balls-sheet.png');background-repeat:no-repeat;background-size:564.444444% 362.592593%;pointer-events:none}
.panel .ball-art[hidden]{display:none}
.panel .ball-art.is-potted{filter:grayscale(1) brightness(.65);opacity:.7}
.ball-art[data-ball="2"]{background-position:26.15630% 5.92384%}
.ball-art[data-ball="3"]{background-position:50.23923% 5.92384%}
.ball-art[data-ball="4"]{background-position:74.24242% 5.92384%}
.ball-art[data-ball="5"]{background-position:98.08612% 5.92384%}
.ball-art[data-ball="6"]{background-position:2.23285% 49.92948%}
.ball-art[data-ball="7"]{background-position:26.15630% 49.92948%}
.ball-art[data-ball="8"]{background-position:50.23923% 49.92948%}
.ball-art[data-ball="9"]{background-position:74.24242% 49.92948%}
.ball-art[data-ball="10"]{background-position:98.08612% 49.92948%}
.ball-art[data-ball="11"]{background-position:2.23285% 92.38364%}
.ball-art[data-ball="12"]{background-position:26.15630% 92.38364%}
.ball-art[data-ball="13"]{background-position:50.23923% 92.38364%}
.ball-art[data-ball="14"]{background-position:74.24242% 92.38364%}
.ball-art[data-ball="15"]{background-position:98.08612% 92.38364%}
.player-machine::before{transform:scaleX(-1)}
.panel .player-panel span{font-size:12px;font-weight:800;letter-spacing:0;color:#fff;text-shadow:0 1px 1px #000;white-space:nowrap}
.panel .player-panel strong{margin:0;font-size:20px;line-height:1;color:#ffe6a3;text-shadow:0 2px 3px #000}
.panel .versus{grid-column:2;grid-row:1;display:block;width:100%;height:auto;align-self:center;object-fit:contain}
.panel #turn.sr-only{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){
  .panel{max-width:500px;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:4px;padding-bottom:8px}
  .panel .player-human{grid-column:1;grid-row:1}
  .panel .player-machine{grid-column:3;grid-row:1}
  .panel .player-panel{gap:2px 4px}
  .panel .player-panel span{font-size:11px}
  .panel .player-panel strong{font-size:18px}
}
@media(max-width:380px){
  .topbar{grid-template-columns:32px minmax(0,1fr) 32px;gap:2px}
  .home-link,#fullscreen{width:32px}
  .panel{column-gap:4px}
  .panel .player-panel span{font-size:10px}
  .panel .player-panel strong{font-size:15px}
}
@media(max-height:500px) and (min-width:701px){
  .panel{max-width:600px;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr)}
  .panel .player-panel strong{font-size:18px}
  .panel .player-panel span{font-size:12px}
}
.spin-picker.spin-floating{position:fixed;z-index:20;width:min(210px,60vw,64dvh);height:auto;aspect-ratio:1;margin:0;padding:0;border:0;outline:none;background:radial-gradient(circle at 32% 25%,#fff 0,#fafafa 30%,#e0e0e0 65%,#939393 100%);box-shadow:inset -8px -10px 18px #0002,0 8px 16px #0005;transform-origin:bottom right;animation:spin-rise 180ms ease-out}
body:has(#spin-picker:not([hidden]))::after{content:'';position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.4)}
.spin-picker.spin-floating[hidden]{display:none}
.spin-floating .spin-target{width:12px;height:12px;border:0;background:#d83a30;box-shadow:0 1px 3px #0005}
@keyframes spin-rise{from{opacity:0;transform:translateY(32px) scale(.65)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.spin-picker.spin-floating{animation:none}}
@media(max-width:480px){
  .panel .player-panel{height:68px;aspect-ratio:auto;align-content:start;padding-top:14px}
  .player-panel::before{bottom:24px}
  .player-panel>span{transform:none}
  .panel .player-panel .ball-slots{left:4%;bottom:0;width:92%}
  .panel{row-gap:4px}
}