/* =========================================================
   Global / shared base
   ========================================================= */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial,"Microsoft JhengHei",sans-serif;
  background:#252525;
  color:#f2f2f2;
}

.container{
  max-width:1800px;
  margin:0 auto;
  padding:5px;
}

.hidden{
  display:none;
}

.error{
  color:#ff8b8b;
  font-weight:bold;
}

.status-line{
  color:#bbb;
  font-size:14px;
}

a,
a:visited{
  color:#fff;
}

/* =========================================================
   Shared form / button base
   ========================================================= */
input,
select,
button,
textarea{
  font-size:18px;
  padding:11px 14px;
  margin:6px;
  border-radius:10px;
  border:1px solid #777;
}

input,
select,
textarea{
  background:#202020;
  color:white;
}

textarea{
  width:100%;
  min-height:140px;
  resize:vertical;
}

button{
  background:#eee;
  color:#111;
  border:0;
  cursor:pointer;
  font-weight:bold;
}

button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

button.secondary{
  background:#888;
  color:white;
}

button.win{
  background:#16833a;
  color:white;
}

button.danger{
  background:#c92929;
  color:white;
}

input[type="checkbox"]{
  accent-color:#22c55e;
}

.input-short{
  width:78px;
}

.portal-game-suffix{
  width:220px;
}

/* =========================================================
   Admin layout / cards
   ========================================================= */
.admin-main-layout{
  display:flex;
  gap:30px;
  align-items:flex-start;
}

.admin-left-column{
  width:40%;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.admin-right-column{
  width:60%;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.card{
  background:#343434;
  border:1px solid #444;
  border-radius:14px;
  padding:12px;
  margin:14px 0;
  box-shadow:0 2px 10px #0005;
}

.row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-start;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field label{
  font-size:20px;
  font-weight:bold;
  margin-left:6px;
}

.form-row{
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

.form-row select,
.form-row input,
.form-row button{
  height:48px;
  margin-top:10px;
}

#names{
  margin:0;
}

#addBtn{
  text-align:center;
  margin-top:12px;
  padding:12px 30px;
  margin-left:0;
  font-size: 14px;
}

.mobile-list{
  display:none;
}

.mobile-card{
  background:#2c2c2c;
  border:1px solid #555;
  border-radius:12px;
  margin:12px 0;
  padding:14px;
}

.mobile-card-title{
  font-size:20px;
  font-weight:bold;
  
}



/* =========================================================
   Admin event info / settings
   ========================================================= */
.info-layout{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.info-left{
  flex:1;
}

.info-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

#eventTitle{
  margin-top:0;
}

.qr{
  width:180px;
  height:180px;
  border:1px solid #ddd;
  background:white;
}

/* =========================================================
   Tables / shared list rendering
   ========================================================= */
table{
  width:100%;
  border-collapse:collapse;
  background:#2c2c2c;
}

th{
  border-bottom:1px solid #555;
  padding:10px 14px;
  text-align:left;
}

td{
  border-bottom:1px solid #555;
  padding:14px;
  text-align:left;
}

/* Player List table */
.players-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 8px 16px;
}

.players-header h2{
  margin:0;
}

.generate-image-btn{
  padding:12px 20px;
  border-radius:14px;
  margin-right:0;
}

.confirmed-text{
  color:#22c55e;
  font-weight:bold;
}

.drop-text{
  color:#ff4d4f;
  font-weight:bold;
}

/* Standings table */
.standings-table th{
  text-align:center;
  vertical-align:middle;
  line-height:1.15;
  white-space:normal;
  font-size: 12px;
}

.standings-table td{
  text-align:center;
  vertical-align:middle;
  font-size: 12px;
}

.button-nopadding-actions{
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.button-nopadding-actions button{
  margin:0;
}

.choice-row,
.choice-top-row{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:14px;
}

.choice-top-row{
  gap:16px;
}

.choice-bottom-row{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.choice-btn{
  width:130px;
  height:76px;
  border-radius:4px;
  border:2px solid #222;
  font-size:30px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.choice-btn.active-win{
  background:#c40000;
  color:white;
}

.choice-btn.active-lose{
  background:#98b4d3;
  color:#777;
}

/* =========================================================
   Ranking / standings view
   ========================================================= */
.ranking-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:16px;
}

.download-standings-btn{
  padding:10px 18px;
}

.rank-hero{
  background:#f0eef7;
  border-radius:12px;
  padding:22px;
  text-align:center;
  margin:18px 0;
}

.rank-hero-label{
  font-size:20px;
  font-weight:700;
}

.rank-big{
  font-size:40px;
  font-weight:900;
}

.rank-hero-score{
  font-size:22px;
  font-weight:700;
}

.rank-list-row{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr .6fr;
  gap:4px;
  padding:10px 6px;
  border-bottom:1px solid #ddd;
  align-items:center;
  font-size:14px;
}

.rank-list-row--header{
  font-weight:bold;
}

.rank-list-row > div{
  text-align:center;
  word-break:break-word;
}

.rank-list-row > div:first-child{
  text-align:left;
}

.rank-list-row.self{
  background:#fff2f5;
  font-weight:bold;
  border-radius:8px;
}

/* =========================================================
   Mobile player page base
   ========================================================= */
.mobile-body{
  background:#f6f6f6;
  color:#111;
}

.mobile{
  max-width:440px;
  min-height:100vh;
  margin:0 auto;
  padding:18px 14px;
  background:white;
  color:#111;
  position:relative;
  display:flex;
  flex-direction:column;
}

.phone-top{
  text-align:center;
  margin-bottom:18px;
}

.player-name{
  font-size:32px;
  font-weight:900;
  text-align:center;
}

.player-token{
  font-size:16px;
  color:#666;
  letter-spacing:2px;
  margin-top:4px;
  text-align:center;
}

.mobile-title{
  text-align:center;
  font-size:24px;
  font-weight:900;
  margin:20px 0;
}

.mobile-player-title{
  text-align:center;
  font-size:24px;
  font-weight:900;
  margin:4px 0;
}

.status-text{
  text-align:center;
  font-weight:700;
  width:100%;
}

.info-card{
  border:1px solid #d4d4d4;
  border-radius:7px;
  padding:16px;
  margin:14px 0;
  text-align:center;
  background:white;
}

.info-label{
  font-size:18px;
  font-weight:800;
}

.info-value{
  font-size:36px;
  font-weight:700;
  margin-top:8px;
}

.info-small{
  font-size:22px;
  color:#444;
  margin-top:8px;
  font-weight:700;
}

.timer{
  text-align:center;
  font-size:36px;
  font-weight:bold;
  margin:12px 0;
}

.bottom-actions{
  background:white;
  padding:12px 0 4px;
  display:flex;
  gap:12px;
}

.bottom-actions button{
  flex:1;
  height:58px;
  border-radius:30px;
  font-size:19px;
}

.drop-actions{
  padding:12px 0 4px;
}

.drop-actions .drop-btn{
  width:calc(100% - 12px);
  height:58px;
  border-radius:30px;
  margin:6px;
  font-size:19px;
}

.confirm-area{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(410px,calc(100% - 28px));
  background:white;
  padding:10px;
}

.confirm-area button{
  width:100%;
  height:58px;
  border-radius:30px;
  font-size:20px;
}

.result-box{
  background:#f0eef7;
  padding:18px;
  border-radius:8px;
  text-align:center;
  margin:28px 0;
}

.result-back-btn{
  margin-top:8px;
}

.pink-btn{
  background:#f94e6a;
  color:white;
}

.light-btn{
  background:#f0eef7;
  color:#111;
}

.player-login-input{
  width:100%;
  margin:10px 0;
  background:white;
  color:#111;
}

.player-login-button{
  width:100%;
  height:54px;
  border-radius:28px;
}

/* =========================================================
   Mobile dashboard / side menu
   ========================================================= */
.dashboard-shell{
  padding:0;
  overflow-x:hidden;
  overflow-y:visible;
  position:relative;
}

.dashboard-page{
  position:relative;
  z-index:2;
  min-height:100vh;
  height:auto;
  padding:18px 14px 120px;
  background:#fff;
  color:#111;
  transition:transform .2s ease;
  touch-action:pan-y;
}

.menu-overlay{
  display:none;
}

.menu-btn{
  position:absolute;
  top:16px;
  left:14px;
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  border:1px solid #ddd;
  border-radius:10px;
  background:white;
  color:#111;
  font-size:24px;
  line-height:1;
}

#dashboardTitle{
  font-size:24px;
  margin:0 0 18px;
  padding-left:58px;
  height:44px;
  display:flex;
  align-items:center;
}

.event-card{
  background:#fff;
  border:1px solid #dcdcdc;
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  transition:.15s;
}

.event-card:hover{
  background:#fafafa;
}

.event-card.disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}

.event-name{
  font-size:20px;
  font-weight:600;
}

.event-enter-text{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:24px;
  font-weight:700;
  color:#4f51cf;
}


.empty-state{
  min-height:calc(100vh - 180px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:800;
  color:#c7c7c7;
  letter-spacing:1px;
}

.user-menu{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding:24px 16px 24px;
  background:#ffffff;
  color:#111111;
  box-shadow:none;
  z-index:1;
  display:flex;
  flex-direction:column;
}

.user-menu-title{
  font-size:32px;
  font-weight:900;
  margin-bottom:24px;
}

.user-menu-section-title{
  margin:0 0 10px;
  font-size:14px;
  font-weight:800;
  color:#999;
}

.user-profile{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
}

.user-picture{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

.user-name{
  font-size:20px;
  font-weight:800;
  color:#111;
}

.user-email{
  margin-top:2px;
  font-size:20px;
  color:#aaa;
}

.user-menu-item{
  width:100%;
  height:52px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:12px;
  background:transparent;
  color:#111;
  border:none;
  border-radius:12px;
  font-size:20px;
  font-weight:700;
  text-align:left;
}

.user-menu-item:hover{
  background:#f3f3f3;
}

.user-menu-icon{
  width:24px;
  text-align:center;
}

.logout-btn{
  margin-top:auto;
  color:#cc4b43;
}

.all-table-btn{
  margin-top:20px;
  color:#2f2f2f;
}

.drop-menu-btn{
  color:#d35454;
}

.drop-menu-btn:hover{
  background:#fff3f3;
}

.player-return-btn{
  margin-top:auto;
  color:#2f2f2f;
}

.all-tables-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:25px;
}

.all-table-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
}

.all-table-row.reported {
  opacity: 0.45;
}

.table-no{
  width:80px;
  flex-shrink:0;
  text-align:left;
  font-weight:900;
}

.table-pair{
  line-height:1;
  font-weight:700;
}

/* =========================================================
   Login page
   ========================================================= */
.google-login-card{
  margin-top:24px;
  text-align:center;
}

.google-login-logo{
  margin-bottom:20px;
}

.google-login-logo img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto;
  border:4px solid white;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}

.google-login-title{
  font-size:32px;
  font-weight:900;
  margin:0 0 12px;
}

.google-login-desc{
  font-size:16px;
  color:#666;
  line-height:1.5;
  margin:0 0 28px;
}

.google-login-btn{
  width:100%;
  height:58px;
  margin:0;
  padding:0;
  border-radius:30px;
  background:#fff;
  color:#111;
  border:1px solid #ddd;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:18px;
  font-weight:800;
}

.google-login-btn img{
  width:22px;
  height:22px;
  flex:0 0 auto;
}

/* =========================================================
   Game IDs page
   ========================================================= */
.gameids-page{
  height:100vh;
  display:flex;
  flex-direction:column;
}

.gameids-spacer{
  flex:1;
}

.secondary-btn{
  margin-top:auto;
  background:#e5e5e5;
  color:#222;
}

.primary-btn{
  margin-top:auto;
  background:#cc4b43;
  color:white;
}

.gameids-select,
.gameids-input{
  width:100%;
  height:56px;
  margin:0;
  background:#fff;
  color:#111;
  border:1px solid #ddd;
  border-radius:12px;
  font-size:18px;
  font-weight:700;
}

.gameids-add-row{
  display:grid;
  grid-template-columns:1fr 120px;
  column-gap:12px;
  margin-top:20px;
  align-items:stretch;
}

.gameids-add-row .gameids-input,
.gameids-add-row .gameids-add-btn{
  width:100%;
  height:56px;
  margin:0;
  padding:0 14px;
  box-sizing:border-box;
}

.gameids-add-row .gameids-input{
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  color:#111;
}

.gameids-add-row .gameids-add-btn{
  border:0;
  border-radius:28px;
  background:#cc4b43;
  color:white;
  font-size:20px;
  font-weight:800;
}

.gameids-table{
  width:100%;
  margin-top:20px;
  border-collapse:collapse;
  background:#fff;
  color:#111;
  font-size:18px;
  font-weight:700;
}

.gameids-table th,
.gameids-table td{
  padding:12px 8px;
  border-bottom:1px solid #ddd;
  text-align:left;
  vertical-align:middle;
  background:#fff;
  color:#111;
}

.gameids-table th{
  font-size:17px;
  font-weight:900;
}

.gameids-table th:nth-child(3),
.gameids-table td:nth-child(3){
  width:76px;
  text-align:right;
}

.gameids-delete-btn{
  width:64px;
  height:36px;
  margin:0;
  padding:0;
  border:none;
  border-radius:999px;
  background:#e5e5e5;
  color:#222;
  font-size:14px;
  font-weight:800;
}

/* =========================================================
   Portal layout / sidebar
   ========================================================= */
.portal-layout{
  min-height:100vh;
  display:flex;
}

.portal-sidebar{
  width:260px;
  min-height:100vh;
  flex:0 0 260px;
  background:#111;
  border-right:1px solid #333;
  display:flex;
  flex-direction:column;
  transition:width .2s, flex-basis .2s;
}

.portal-sidebar.collapsed{
  width:64px;
  flex-basis:64px;
}

.portal-sidebar-header{
  height:52px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.portal-sidebar-title{
  font-size:24px;
  font-weight:800;
  color:#fff;
}

.portal-sidebar.collapsed .portal-sidebar-title{
  display:none;
}

.portal-sidebar.collapsed .portal-sidebar-header{
  justify-content:center;
  padding:0;
}

.sidebar-toggle{
  width:28px;
  height:28px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:#ddd;
  border:0;
  font-size:18px;
}

.portal-main{
  flex:1;
  min-width:0;
  padding:20px;
}

.portal-main .container{
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
}

.sidebar-menu{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
}

.sidebar-footer{
  margin-top:auto;
  padding:8px;
}

.sidebar-menu-item{
  width:100%;
  height:42px;
  margin:0;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:12px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:#f2f2f2;
  text-align:left;
  font-size:15px;
  font-weight:700;
}

.sidebar-menu-item:hover{
  background:#2f2f2f;
}

.sidebar-icon{
  width:20px;
  text-align:center;
  flex-shrink:0;
}

.sidebar-text{
  white-space:nowrap;
}

.sidebar-logout-btn{
  color:#ffb4b4;
}

.portal-sidebar.collapsed .sidebar-text{
  display:none;
}

.portal-sidebar.collapsed .sidebar-menu-item{
  justify-content:center;
  padding:0;
}

/* =========================================================
   Responsive / print
   ========================================================= */
@media (max-width:768px){
  .admin-main-layout{
    flex-direction:column;
  }

  .admin-left-column,
  .admin-right-column{
    width:100%;
  }

  .container{
    padding:12px;
  }

  .desktop-table{
    display:none;
  }

  .mobile-list{
    display:block;
  }

  .pairing-header{
    align-items:flex-start;
  }

  .pairing-spacer{
    display:none;
  }

  button{
    font-size:16px;
  }

  .portal-layout{
    display:block;
  }

  .portal-sidebar{
    display:none !important;
  }

  .portal-main{
    padding:16px;
  }

  .portal-main .container{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
  }

  .lottery-card{
    display:none;
  }
}

@media print{
  .no-print{
    display:none;
  }

  body{
    background:white;
    color:black;
  }

  .card{
    box-shadow:none;
    border:1px solid #ddd;
    background:white;
    color:black;
  }

  .copy{
    color:black;
  }
}

.registration-form-link {
  display: block;
  padding: 12px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #111;
  font-size: 18px;
  font-weight: 600;
  text-decoration: underline;
}
.registration-form-link,
.registration-form-link:link,
.registration-form-link:visited,
.registration-form-link:hover,
.registration-form-link:active {
  display: block;
  padding: 16px 18px;
  margin-bottom: 12px;

  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  box-shadow: none;

  color: #2563eb;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}
.registration-page.dashboard-page {
  height: 100svh;
  min-height: 100svh;
  padding: 18px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.registration-page .bottom-actions {
  margin-top: auto;
  width: 100%;
  padding: 0;
  flex-shrink: 0;
}