.game-controls{grid-template-columns:62px 1fr 54px 54px minmax(180px,26vw) 90px}
.utility{height:48px;border:1px solid #ffffff14;border-radius:8px;background:#ffffff08;color:var(--gold);font-size:18px}
.utility small{display:block;font-size:6px;letter-spacing:.1em;color:#839088}
.utility:disabled{opacity:.25}
.utility.active{border-color:var(--gold);background:#d6b36b24;box-shadow:0 0 0 2px #d6b36b18;color:#ffe4a3}
.shoot.busy{filter:saturate(.55);opacity:.72}
@media(max-width:760px){.game-controls{grid-template-columns:54px 1fr 46px 46px 80px}.shoot{grid-column:5}}
.high-contrast{--gold:#ffe17d;--ink:#fff}.high-contrast #table-wrap{filter:contrast(1.18) saturate(1.12)}
.large-ui .hud{height:88px}.large-ui .game-controls{height:92px}.large-ui button{font-size:110%}
.left-handed .game-controls{direction:rtl}.left-handed .game-controls>*{direction:ltr}
.choice-row{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 22px}.choice{flex:1;min-width:42px;border:1px solid #ffffff18;background:#ffffff08;color:#aab5af;border-radius:7px;padding:9px 5px;font-size:9px}.choice.selected{border-color:var(--gold);background:#d6b36b20;color:var(--gold)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
#debugPanel{position:absolute;left:12px;top:82px;z-index:8;margin:0;padding:10px;background:#020806df;border:1px solid #65ffab55;color:#8dffb7;font:9px/1.45 monospace;pointer-events:none;max-width:280px;border-radius:7px}
#coachHint{position:absolute;left:38px;top:30px;z-index:4;border:1px solid #d6b36b66;border-radius:8px;background:#07100cdd;color:#e5c981;padding:10px 13px;font-size:7px;font-weight:800;letter-spacing:.12em}
#coachHint:hover{background:#d6b36b22}
.profile{border:0;background:none;color:inherit;text-align:left}.profile:hover{filter:brightness(1.25)}
.text-input{width:100%;height:46px;border:1px solid #ffffff18;border-radius:8px;background:#06100d;color:white;padding:0 14px;margin:10px 0;outline:none}.text-input:focus{border-color:var(--gold)}
.history-wrap{max-height:180px;overflow:auto;margin:12px 0}.history-wrap table{width:100%;border-collapse:collapse;font-size:9px}.history-wrap th,.history-wrap td{text-align:left;padding:7px;border-bottom:1px solid #ffffff0e}.history-wrap th{color:var(--gold)}
#home{background:linear-gradient(90deg,rgba(4,13,10,.98) 0%,rgba(4,13,10,.9) 30%,rgba(4,13,10,.38) 64%,rgba(4,13,10,.12) 100%),url('design-assets/bilhar-home-background.webp') center/cover no-repeat}
#home:after,.hero-table{display:none}
.hero-table{position:absolute;z-index:0;right:4vw;top:18%;width:min(54vw,760px);aspect-ratio:2/1;padding:28px;border-radius:28px;background:linear-gradient(145deg,#7c492d,#2c160e 45%,#6b3d25);box-shadow:inset 0 0 0 5px #24110a,inset 0 0 0 10px #d0ad67,0 55px 90px #000b;transform:perspective(1100px) rotateX(56deg) rotateZ(-10deg)}
.hero-cloth{width:100%;height:100%;position:relative;border:18px solid #17382c;border-radius:13px;background:radial-gradient(circle at 42% 36%,#11805a,#07573e 58%,#043927);box-shadow:inset 0 0 45px #001c12,0 0 0 3px #071b14;overflow:hidden}
.hero-ball{position:absolute;width:11%;aspect-ratio:1;border-radius:50%;box-shadow:inset -12px -15px 22px #0008,inset 8px 8px 12px #fff9,4px 12px 18px #001b1399;z-index:2}.hero-ball:after{content:"";position:absolute;left:22%;top:15%;width:23%;height:14%;border-radius:50%;background:#fff8;filter:blur(2px)}
.hero-white{background:#efe6cc;left:22%;top:58%}.hero-yellow{background:#e5b52c;left:55%;top:27%}.hero-red{background:#cf3c31;left:74%;top:58%}
.hero-cue{position:absolute;z-index:1;width:66%;height:3.5%;left:-7%;top:76%;border-radius:999px;background:linear-gradient(#f3dfae,#b97a3f 44%,#6e3e22 60%,#e0bd77);transform:rotate(-7deg);transform-origin:right center;box-shadow:0 7px 9px #00150e88}.hero-cue:after{content:"";position:absolute;right:-1%;top:-12%;width:7%;height:124%;border-radius:999px;background:#e9e5d9}
.hero-diamond{position:absolute;top:-13px;width:8px;height:8px;background:#d8be82;transform:rotate(45deg);box-shadow:0 0 6px #fff6}.hero-diamond.d1{left:16%}.hero-diamond.d2{left:33%}.hero-diamond.d3{left:50%}.hero-diamond.d4{left:67%}.hero-diamond.d5{left:84%}
@media(max-width:900px){.hero-table{right:-18vw;top:19%;width:78vw;opacity:.38}.hero-ball{width:13%}}
@media(max-width:600px){#home{background:linear-gradient(180deg,rgba(4,13,10,.9),rgba(4,13,10,.96)),url('design-assets/bilhar-home-background.webp') 67% center/cover no-repeat}}
.rotate-actions{display:flex;gap:8px;margin-top:14px}.rotate-actions button{border:1px solid #ffffff22;background:#ffffff0b;color:#e8e3d7;border-radius:8px;padding:11px 14px;font-size:9px;letter-spacing:.08em}.rotate-actions button:first-child{background:var(--gold);color:#142019;border:0;font-weight:800}.force-portrait #rotate{display:none!important}
.force-portrait #game{min-height:100dvh}.force-portrait #table-wrap{padding:8px}.force-portrait .hud{height:68px}.force-portrait .game-controls{height:80px}
.modal-card{max-height:min(90dvh,760px);overflow-y:auto;overscroll-behavior:contain}
@media(orientation:portrait) and (max-width:700px){
  .force-portrait .game-controls{height:138px;display:grid;grid-template-columns:58px 1fr 1fr 92px;grid-template-rows:48px 62px;gap:8px;padding:8px 10px}
  .force-portrait .power-control{position:static;transform:none;width:100%;grid-column:1/-1;grid-row:1;display:grid}
  .force-portrait .spin-control{grid-column:1;grid-row:2;align-self:center}
  .force-portrait #precision{grid-column:2;grid-row:2;width:100%}
  .force-portrait #replay{grid-column:3;grid-row:2;width:100%}
  .force-portrait .shoot{grid-column:4;grid-row:2;width:100%}
  .force-portrait .hint{display:none}
}
button:focus-visible,input:focus-visible{outline:3px solid #ffe18a;outline-offset:3px}

/* Native mobile layout: portrait and landscape, including Android safe areas. */
html,body,#app{height:100dvh}
#home{overflow-y:auto;padding-top:max(clamp(20px,5vw,70px),env(safe-area-inset-top));padding-right:max(clamp(20px,5vw,70px),env(safe-area-inset-right));padding-bottom:max(clamp(20px,5vw,70px),env(safe-area-inset-bottom));padding-left:max(clamp(20px,5vw,70px),env(safe-area-inset-left))}
.hud{height:calc(74px + env(safe-area-inset-top));padding-top:calc(8px + env(safe-area-inset-top));padding-right:max(20px,env(safe-area-inset-right));padding-left:max(20px,env(safe-area-inset-left))}
.game-controls{height:calc(76px + env(safe-area-inset-bottom));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:calc(9px + env(safe-area-inset-bottom));padding-left:max(20px,env(safe-area-inset-left))}
.modal{padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
.modal-card{max-height:100%;width:min(410px,100%)}
#rotate{display:none!important}
@media(max-width:760px){
  .hud{height:calc(66px + env(safe-area-inset-top));padding-top:calc(7px + env(safe-area-inset-top));padding-right:max(8px,env(safe-area-inset-right));padding-left:max(8px,env(safe-area-inset-left))}
  .game-controls{height:calc(72px + env(safe-area-inset-bottom));grid-template-columns:54px 44px 44px minmax(130px,1fr) 78px;gap:6px;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .spin-control{grid-column:1}.game-controls #precision{grid-column:2}.game-controls #replay{grid-column:3}
  .power-control{position:static;transform:none;width:100%;grid-column:4}.shoot{grid-column:5}
}
@media(orientation:portrait) and (max-width:700px){
  .game-controls,.force-portrait .game-controls{height:calc(138px + env(safe-area-inset-bottom));display:grid;grid-template-columns:58px 1fr 1fr 92px;grid-template-rows:48px 62px;gap:8px;padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .game-controls .power-control,.force-portrait .power-control{position:static;transform:none;width:100%;grid-column:1/-1;grid-row:1}
  .game-controls .spin-control,.force-portrait .spin-control{grid-column:1;grid-row:2;align-self:center}
  .game-controls #precision,.force-portrait #precision{grid-column:2;grid-row:2;width:100%}
  .game-controls #replay,.force-portrait #replay{grid-column:3;grid-row:2;width:100%}
  .game-controls .shoot,.force-portrait .shoot{grid-column:4;grid-row:2;width:100%}
  #table-wrap{padding:8px}
}
.home-variants{position:relative;z-index:2;width:min(440px,90vw);display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-16px 0 14px}.home-variants button{height:36px;border:1px solid #ffffff18;border-radius:8px;background:#0d211a;color:#82928a;font-size:8px;font-weight:800;letter-spacing:.06em;cursor:pointer}.home-variants button.selected,.home-variants button[aria-pressed="true"]{border-color:#d6b36b;background:#d6b36b;color:#142019;box-shadow:0 5px 18px #0005}@media(max-height:700px){#home{justify-content:flex-start}.brand img{width:56px;height:56px}.brand h1{font-size:38px}.tagline{margin:12px 0 16px}.home-variants{margin:-10px 0 10px}.home-variants button{height:31px}.main-actions button{height:55px}.main-actions button.primary{height:64px}.secondary-actions{margin-top:13px}.profile{margin-top:14px}}
@media(max-height:800px){.spin-control small{display:none}}
.lesson-steps{display:grid;gap:7px;margin:12px 0 18px}.lesson-steps p{margin:0;padding:11px 13px;border-radius:8px;background:#ffffff07;color:#aab7b0;font-size:11px;line-height:1.45}.lesson-steps b{color:var(--gold);font-size:9px;letter-spacing:.1em}

/* Keep the cushion counter in the dark margin above the table, never over the cloth. */
#cushion-count{top:2px;right:max(24px,env(safe-area-inset-right));display:flex;align-items:baseline;gap:5px;padding:2px 8px;min-height:18px;border-radius:7px;z-index:2;pointer-events:none}
#cushion-count b{font-size:12px}#cushion-count small{font-size:6px}
@media(orientation:portrait) and (max-width:700px){#cushion-count{right:max(10px,env(safe-area-inset-right));top:1px}}