*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  position: fixed;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: #000;
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

body{
  display:flex;
  justify-content:center;
  align-items:center;
}

#app{
  width:1920px;
  height:1200px;
  display:flex;
  background:radial-gradient(circle at center,#022d19 0%,#00150d 60%,#000 100%);
  color:white;
  transform-origin:top left;
  position:absolute;
  top:0;
  left:0;
}

/* SIDEBAR */
#sidebar{
  width:360px;
  height:100%;
  border:3px solid #d4a619;
  border-radius:0 30px 30px 0;
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:25px;
  background:rgba(0,0,0,0.25);
}

#sidebar h1{
  color:#d4a619;
  font-size:58px;
  line-height:1.1;
  font-weight:bold;
}

#playerInput{
  height:75px;
  border:none;
  border-radius:18px;
  padding:20px;
  font-size:32px;
}

#addPlayer,#journalBtn{
  height:60px;
  border:none;
  border-radius:18px;
  font-size:30px;
  font-weight:bold;
  cursor:pointer;
  background:linear-gradient(180deg,#e5bd31,#b8860b);
  color:black;
}

#waitingList{
  flex:1;
  border-radius:18px;
  padding:15px;
  overflow-y:auto;
  font-size:28px;
}

.waiting-player{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
}

#clubLogo{
  text-align:center;
  color:#d4a619;
  font-size:42px;
}

#clubLogo span{
  display:block;
  font-size:30px;
}

.cross{
  font-size:90px;
}

/* MAIN */
#mainBoard{
  flex:1;
  padding:25px;
  display:flex;
  flex-direction:column;
}

#topSection{
  display:flex;
  justify-content:space-between;
  gap:25px;
}

/* PLAYER CARD */
.player-card{
  width:560px;
  height:820px;
  border-radius:35px;
  border:3px solid #d4a619;
  background:rgba(0,0,0,0.35);
  padding:28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
}

.player-card h2{
  font-size:68px;
  margin-bottom:15px;
  line-height:1;
}

.score{
  font-size:300px;
  font-weight:bold;
  line-height:1;
  margin-bottom:10px;
}

.stat-block{
  width:100%;
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.15);
}

.stat-block span{
  display:block;
  color:#d4a619;
  font-size:28px;
}

.stat-block strong{
  font-size:58px;
}

/* HISTORY */
.history-title{
  margin-top:18px;
  width:100%;
  text-align:left;
  font-size:28px;
  color:#d4a619;
  font-weight:bold;
}

.history-bar{
  margin-top:8px;
  width:100%;
  min-height:85px;
  max-height:85px;
  border:2px solid rgba(212,166,25,0.35);
  border-radius:14px;
  padding:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-content:flex-start;
  overflow:hidden;
  background:rgba(0,0,0,0.2);
}

/* CENTER */
#centerStats{
  width:360px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

#logoArea{
  text-align:center;
  color:#d4a619;
  font-size:72px;
  height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.center-box{
  flex:1;
  border:3px solid #d4a619;
  border-radius:25px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.center-box span{
  color:#d4a619;
  font-size:38px;
}

.center-box strong{
  font-size:88px;
}

/* BALLS */
#ballsSection{
  position:absolute;
  bottom:200px;
  left:360px;
  width:1560px;
  height:100px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:45px;

  border:none;
  border-radius:25px;

  background:transparent;
}

/* REALISTIC FIXED BALLS */
.ball{
  flex:0 0 130px;
  width:130px;
  height:130px;
  min-width:130px;
  min-height:130px;
  max-width:130px;
  max-height:130px;

  border:none;
  border-radius:50%;
  cursor:pointer;
  position:relative;
  display:block;

  box-shadow:
    inset -20px -20px 28px rgba(0,0,0,0.45),
    inset 14px 14px 18px rgba(255,255,255,0.22),
    0 12px 24px rgba(0,0,0,0.4);

  transition:transform 0.15s ease;
}

.ball:hover{
  transform:scale(1.08);
}

/* Shine */
.ball::before{
  content:"";
  position:absolute;
  top:20px;
  left:28px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.8);
  filter:blur(1px);
}

/* REAL COLORS */
.red{
  background:radial-gradient(circle at 30% 30%, #ff7b7b 0%, #ff0000 35%, #a50000 72%, #4d0000 100%);
}

.yellow{
  background:radial-gradient(circle at 30% 30%, #fff7ad 0%, #ffd900 35%, #c79a00 72%, #5f4800 100%);
}

.green{
  background:radial-gradient(circle at 30% 30%, #8fff98 0%, #00a800 35%, #006800 72%, #002f00 100%);
}

.brown{
  background:radial-gradient(circle at 30% 30%, #d9a374 0%, #8b4513 35%, #5a2c0a 72%, #2a1204 100%);
}

.blue{
  background:radial-gradient(circle at 30% 30%, #9fd3ff 0%, #005eff 35%, #003ba8 72%, #00194f 100%);
}

.pink{
  background:radial-gradient(circle at 30% 30%, #ffd8ea 0%, #ff4fa3 35%, #c21870 72%, #68003a 100%);
}

.black{
  background:radial-gradient(circle at 30% 30%, #8c8c8c 0%, #2b2b2b 30%, #000 75%, #000 100%);
  border:2px solid rgba(255,255,255,0.75);
}

/* HIDE OLD NUMBERS */
#ballNumbers{
  display:none;
}

/* CONTROLS */
#controls{
  position:absolute;
  bottom:35px;
  left:360px; /* sidebar width */
  width:1560px; /* 1920 - 360 */
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  padding:20px 0;
  border:none;
  background:transparent;
}

#undoBtn,#resetBtn{
  width:400px;
  height:100px;
  border:none;
  border-radius:20px;
  font-size:30px;
  font-weight:bold;
  cursor:pointer;
}

#undoBtn{
  background:linear-gradient(180deg,#111,#000);
  color:white;
}

#resetBtn{
  background:linear-gradient(180deg,#ff2a2a,#b30000);
  color:white;
}
/* CENTER LOGO AREA */
#logoArea{
  height:150px;
  display:flex;
  justify-content:center;
  align-items:center;
  border:0px solid #d4a619;
  border-radius:0px;
  background:rgba(0,0,0,0.0);
  padding:0px;
}

#mainLogo{
  max-width:85%;
  max-height:85%;
  object-fit:contain;
}

/* SIDEBAR BACKGROUND LOGO */
#clubLogo{
  flex:1;
  width:100%;
  border-radius:25px;
  background:url("logo.png") center center / 80% no-repeat;
  opacity:50;
  margin-top:20px;
  margin-bottom:20px;
}

/* Khbi image li dakhel div ila mazal kayna */
#sideLogo{
  display:none;
}
/* HISTORY TITLE */
.history-title{
  margin-top:25px;
  font-size:0px;
  color:#d4a619;
  font-weight:bold;
  text-align:left;
}

/* HISTORY BAR */
.history-bar{
  margin-top:12px;
  width:100%;
  min-height:80px;
  border:0px solid rgba(212,166,25,0.35);
  border-radius:18px;
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
  justify-content:flex-start;
  background:rgba(0,0,0,0.2);
}

/* EACH BALL HISTORY ITEM */
.history-ball{
  width:32px;
  height:32px;
  border-radius:50%;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.25);
}

.history-ball.red{background:red;}
.history-ball.yellow{background:gold;}
.history-ball.green{background:green;}
.history-ball.brown{background:brown;}
.history-ball.blue{background:blue;}
.history-ball.pink{background:deeppink;}
.history-ball.black{background:black; border:1px solid white;}
.player-card{
  cursor:pointer;
  transition:all 0.2s ease;
}

.player-card:hover{
  transform:scale(1.01);
}
/* CONTROL BUTTON ICONS */
.control-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  margin-right:12px;
  vertical-align:middle;
}

#undoBtn,
#resetBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

/* WHITE FOUL BALL */
.white{
  background:radial-gradient(circle at 30% 30%, #ffffff 0%, #f2f2f2 40%, #d9d9d9 72%, #8a8a8a 100%);
  border:3px solid #ff2a2a;
  color:#ff2a2a;
  font-size:52px;
  font-weight:bold;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* HIDE BALLS IN FOUL MODE */
.hidden-ball{
  opacity:0 !important;
  pointer-events:none !important;
  transform:scale(0.3);
}

/* ACTIVE FOUL MODE */
.foul-active{
  box-shadow:
    0 0 25px rgba(255,0,0,0.95),
    inset -20px -20px 28px rgba(0,0,0,0.25),
    inset 14px 14px 18px rgba(255,255,255,0.35);
}

/* ACTIVE PLAYER NEON GOLD */
.player-card.active{
  border:4px solid #ffd700 !important;

  box-shadow:
    0 0 12px rgba(255,215,0,0.75),
    0 0 28px rgba(255,215,0,0.65),
    0 0 55px rgba(255,215,0,0.45),
    inset 0 0 18px rgba(255,215,0,0.18);

  transform:scale(1.02);

  background:
    linear-gradient(
      180deg,
      rgba(255,215,0,0.08) 0%,
      rgba(0,0,0,0.35) 100%
    );
}

/* SCORE GLOW */
.player-card.active .score{
  text-shadow:
    0 0 10px rgba(255,215,0,0.85),
    0 0 22px rgba(255,215,0,0.65),
    0 0 40px rgba(255,215,0,0.45);
}

/* BREAK + FRAMES */
.player-card.active .stat-block strong{
  color:#fff3b0;

  text-shadow:
    0 0 8px rgba(255,215,0,0.7);
}

/* NO TEXT SELECTION / NO HIGHLIGHT */
*{
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  user-select:none !important;

  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* INPUT ONLY */
input, textarea{
  -webkit-user-select:text !important;
  -moz-user-select:text !important;
  -ms-user-select:text !important;
  user-select:text !important;
}

/* BUTTONS / CARDS */
button,
.player-card,
.ball{
  outline:none;
}

button:focus,
button:active,
.player-card:focus,
.ball:focus{
  outline:none !important;
}
/* =========================
   HISTORY SCROLLABLE
========================= */

.history-bar{
  margin-top:12px;
  width:100%;
  min-height:85px;
  max-height:160px; /* y9der ykber */

  border:0px solid rgba(212,166,25,0.35);
  border-radius:18px;

  padding:10px;

  display:flex;
  flex-wrap:wrap;
  gap:8px;

  align-content:flex-start;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  background:rgba(0,0,0,0.2);

  scroll-behavior:smooth;
}

/* GOLD SCROLLBAR */
.history-bar::-webkit-scrollbar{
  width:10px;
}

.history-bar::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.08);
  border-radius:10px;
}

.history-bar::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ffd700,#b8860b);
  border-radius:10px;
}

/* Firefox */
.history-bar{
  scrollbar-color:#d4a619 rgba(255,255,255,0.08);
  scrollbar-width:thin;
}

/* =========================
   WAITING LIST UPGRADE
========================= */
.waiting-player{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  margin-bottom:10px;
  background:rgba(255,255,255,0.08);
  border:2px solid rgba(212,166,25,0.35);
  border-radius:14px;
  font-size:26px;
  font-weight:700;
  color:#fff;
}

.waiting-name{
  flex:1;
  text-align:left;
  padding-right:10px;
  word-break:break-word;
}

.delete-waiting{
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:linear-gradient(180deg,#ff2a2a,#8b0000);
  color:white;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 0 12px rgba(255,0,0,0.35);
}

.delete-waiting:active{
  transform:scale(0.95);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
  touch-action: manipulation;
}

body {
  position: fixed;
  inset: 0;
}

#app {
  position: absolute;
  top: 0;
  left: 0;
}

/* =========================
   ANDROID FULLSCREEN LOCK
========================= */

html,
body {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #000 !important;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
}

body {
  position: fixed !important;
  inset: 0 !important;
}

#app {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Hide selection / long press */
* {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Remove blue tap highlight */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* PWA fullscreen support */
@media all and (display-mode: fullscreen) {
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }
}
/* =========================
   PASSWORD POPUP FIX
   Sghir + top center + keyboard safe
========================= */
#passwordOverlay{
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:4vh !important;
}

#passwordOverlay > div{
  width:min(420px,88vw) !important;
  max-width:88vw !important;
  padding:18px !important;
  border-radius:16px !important;
}

#passwordOverlay h2{
  font-size:22px !important;
  margin-bottom:14px !important;
}

#passwordInput{
  padding:12px !important;
  font-size:24px !important;
  margin-bottom:16px !important;
}

#cancelPass,
#okPass{
  padding:10px 22px !important;
  font-size:18px !important;
  border-radius:10px !important;
}

/* =========================
   JOURNAL POPUP FIX
   Normal scale + buttons visible
========================= */
#journalOverlay{
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:2vh !important;
}

#journalOverlay > div{
  width:min(1400px,94vw) !important;
  height:min(900px,92vh) !important;

  padding:18px !important;
  border-radius:18px !important;

  transform:none !important;
  zoom:1 !important;
}

/* Main title */
#journalOverlay h1{
  font-size:28px !important;
  margin-bottom:14px !important;
}

/* Day / Night titles */
#journalOverlay h2{
  font-size:18px !important;
  margin-bottom:10px !important;
}

/* Match rows */
#journalOverlay [style*="font-size:24px"]{
  font-size:14px !important;
  padding:8px !important;
}

/* Date rows */
#journalOverlay [style*="font-size:16px"],
#journalOverlay [style*="font-size:clamp"]{
  font-size:11px !important;
}

/* Totals */
#journalOverlay [style*="TOTAL DAY"],
#journalOverlay [style*="TOTAL NIGHT"],
#journalOverlay [style*="GRAND TOTAL"]{
  font-size:18px !important;
}

/* Bottom buttons area */
#journalOverlay button{
  padding:10px 20px !important;
  font-size:16px !important;
  border-radius:10px !important;
}

/* Scroll areas */
#journalOverlay div[style*="overflow-y:auto"]{
  overflow-y:auto !important;
  max-height:100% !important;
}

/* ANDROID INPUT FIX */
input,
textarea,
select{
  font-size:16px !important;
}
/* =========================
   FINAL ANDROID KIOSK FIX
========================= */

/* Prevent pull-to-refresh + swipe nav */
html, body {
  overscroll-behavior-y: none !important;
  overscroll-behavior-x: none !important;
}

/* Prevent image drag */
img {
  pointer-events: none;
  user-drag: none;
  -webkit-user-drag: none;
}

/* Sidebar + main fixed */
#sidebar,
#mainBoard,
#topSection,
#ballsSection,
#controls {
  touch-action: manipulation !important;
}

/* Remove accidental zoom on inputs */
input, textarea {
  touch-action: manipulation !important;
}

/* Force hardware acceleration */
#app {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
}

/* Smooth Android rendering */
* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}