/* ==========================================================================
   play.css — game-screen specific layout (table, scoreboard, controls,
   modals, menu). Loaded only on play-pool.html.
   ========================================================================== */
body.play{background:radial-gradient(1200px 500px at 50% -8%, rgba(232,201,138,.07), transparent 60%), #0E1F19}
.game-shell{display:flex; flex-direction:column; min-height:100vh}

/* top bar */
.topbar{display:flex; align-items:center; gap:12px; padding:10px 18px; background:linear-gradient(180deg,#3B2718,#2C1D11); border-bottom:2px solid rgba(232,201,138,.4); flex-wrap:wrap}
.topbar .icon-btn{width:38px; height:38px; background:rgba(0,0,0,.3); border:1px solid rgba(232,201,138,.35); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--brass-light)}
.topbar .icon-btn:hover{background:rgba(0,0,0,.5)}
.topbar .tb-title{font-size:12.5px; color:rgba(239,231,211,.65)}
.topbar .sep{width:1px; height:22px; background:rgba(232,201,138,.3)}

/* scoreboard */
.scoreboard{background:linear-gradient(180deg,#191410,#14100C); border-bottom:1px solid rgba(232,201,138,.2); padding:12px 18px}
.score-inner{max-width:1500px; margin:0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pcard{flex:none; display:flex; align-items:center; gap:12px; padding:9px 14px; border:1px solid rgba(232,201,138,.15); min-width:220px}
.pcard.active{border-color:rgba(232,201,138,.6); background:rgba(232,201,138,.07)}
.pcard.p2{justify-content:flex-end}
.pcard.p2.active{border-color:rgba(127,166,198,.6); background:rgba(127,166,198,.07)}
.pavatar{flex:none; width:42px; height:42px; border-radius:50%; box-shadow:0 4px 8px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800}
.turn-tag{font-size:10px; font-weight:700; color:#0E1F19; padding:2px 8px}
.score-mid{flex:1; min-width:150px; display:flex; flex-direction:column; align-items:center; gap:4px}
.score-box{font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; color:#F6F0E0; background:rgba(0,0,0,.4); border:1px solid rgba(232,201,138,.35); padding:1px 18px}
.timer-line{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--chalk-blue)}
@media (max-width:720px){ .pcard{min-width:0; flex:1} .score-mid{order:-1; width:100%; flex-basis:100%} }

/* main grid */
.main-grid{flex:1; max-width:1500px; width:100%; margin:0 auto; padding:22px; display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:26px; align-items:start; box-sizing:border-box}
@media (max-width:980px){ .main-grid{grid-template-columns:1fr; padding:16px 14px 30px; gap:18px} }
.table-wrap{position:relative; min-width:0}
#pool-canvas{width:100%; height:auto; display:block; touch-action:none; cursor:crosshair; filter:drop-shadow(0 24px 34px rgba(0,0,0,.5))}
.table-hint{margin:10px 0 0; font-size:12px; color:rgba(239,231,211,.5); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.mini-btn{width:34px; height:34px; background:rgba(0,0,0,.3); border:1px solid rgba(232,201,138,.35); color:var(--brass-light); font-size:15px; cursor:pointer; font-family:inherit}
.mini-btn:hover{background:rgba(0,0,0,.5)}

.controls{display:flex; flex-direction:column; gap:16px; min-width:0}
.ctl{background:linear-gradient(180deg,#191410,#14100C); border:1px solid rgba(232,201,138,.25); padding:16px; clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
.ctl-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.ctl-head .t{font-size:12.5px; font-weight:700; color:var(--brass)}
.ctl-head .v{font-size:12px; font-variant-numeric:tabular-nums; color:rgba(239,231,211,.65)}

/* power slider */
.power-slider{position:relative; height:34px; cursor:pointer; touch-action:none; background:linear-gradient(90deg,#4E3420,#D9B98A); clip-path:polygon(0 38%,100% 26%,100% 74%,0 62%)}
.power-slider:focus-visible{outline:2px solid var(--chalk-blue); outline-offset:3px}
.power-fill{position:absolute; top:11px; bottom:11px; left:0; width:55%; background:linear-gradient(90deg,#337E53,#DCA92F 70%,#C13F2E); opacity:.9; pointer-events:none}
.power-thumb{position:absolute; top:2px; bottom:2px; left:calc(55% - 7px); width:14px; background:linear-gradient(180deg,#E8C98A,#A67F42); border:1px solid #241708; box-shadow:0 3px 6px rgba(0,0,0,.5); pointer-events:none}
.power-scale{display:flex; justify-content:space-between; font-size:10.5px; color:rgba(239,231,211,.45); margin-top:6px}

/* spin pad */
.spin-row{display:flex; gap:16px; align-items:center}
.spin-pad{flex:none; width:96px; height:96px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFFDF4,#C9BFA8); position:relative; box-shadow:inset 0 -6px 12px rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.4); cursor:pointer; touch-action:none}
.spin-pad .cross-v{position:absolute; left:50%; top:6%; bottom:6%; width:1px; transform:translateX(-50%); background:rgba(0,0,0,.14)}
.spin-pad .cross-h{position:absolute; top:50%; left:6%; right:6%; height:1px; transform:translateY(-50%); background:rgba(0,0,0,.14)}
.spin-pad .ring{position:absolute; inset:24%; border-radius:50%; border:1px dashed rgba(0,0,0,.16)}
.spin-dot{position:absolute; width:13px; height:13px; border-radius:50%; background:#C13F2E; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.4); left:calc(50% - 8.5px); top:calc(50% - 8.5px); pointer-events:none}

/* shoot button (uses .btn-shot from styles.css) */
#shoot-btn{width:100%; padding:18px; font-size:19px}

/* shot log / dashboard */
.log{max-height:180px; overflow:auto}
.shot-row{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid rgba(232,201,138,.1); font-size:12px; color:rgba(239,231,211,.7)}

/* ball in hand + resume bars */
.action-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 18px; background:rgba(127,166,198,.08); border-bottom:1px solid rgba(127,166,198,.3); font-size:13px; color:var(--text)}

/* modal + menu overlay */
.overlay{position:fixed; inset:0; background:rgba(10,8,6,.78); z-index:200; display:none; align-items:center; justify-content:center; padding:20px}
.overlay.open{display:flex}
.dialog{width:min(520px,100%); background:linear-gradient(180deg,#231C13,#171310); border:1px solid rgba(232,201,138,.5); border-top:4px solid var(--brass); box-shadow:0 40px 90px rgba(0,0,0,.7); clip-path:polygon(20px 0,100% 0,100% 100%,0 100%,0 20px); max-height:92vh; overflow:auto}
.dialog-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(232,201,138,.25)}
.dialog-head .t{font-size:13px; font-weight:700; color:var(--brass); display:flex; align-items:center; gap:8px}
.dialog-body{padding:20px}
.close-x{width:32px; height:32px; background:transparent; border:1px solid rgba(232,201,138,.35); color:var(--brass-light); font-size:15px; cursor:pointer; font-family:inherit}

/* result stats grid */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(232,201,138,.2); border-block:1px solid rgba(232,201,138,.2)}
.stat-grid .cell{background:#191410; padding:13px 6px; text-align:center}
.stat-grid .cell .n{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums}
.stat-grid .cell .l{font-size:10.5px; color:rgba(239,231,211,.5); margin-top:3px}
@media (max-width:520px){ .stat-grid{grid-template-columns:repeat(2,1fr)} }

/* option buttons (mode/entry/diff) */
.opt-row{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px}
.opt{padding:10px 14px; background:rgba(0,0,0,.28); border:1px solid rgba(232,201,138,.3); color:var(--text); font-size:13px; font-family:inherit; cursor:pointer}
.opt:hover{border-color:rgba(232,201,138,.55)}
.opt.sel{background:linear-gradient(180deg,#1C6049,#0E4434); border-color:rgba(232,201,138,.6); color:#FFF6E8; font-weight:700}
.opt-label{font-size:12.5px; font-weight:700; color:var(--brass); display:block; margin-top:8px}

/* settings rows */
.set-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid rgba(232,201,138,.12)}
.set-row label{font-size:13.5px; color:var(--text-hi)}
.set-row .select, .set-row input[type=range]{width:150px}

.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0}
#game-error{padding:16px; margin:16px; border:1px solid var(--err); color:var(--err); background:rgba(222,107,87,.08)}