/*
  GO Board index responsiveness
  Bu dosya sadece index.html icin ekran kirilimlarini toplar.
  Mevcut inline CSS'ten sonra yuklenir; bu yuzden burada yazilanlar
  index sayfasinin responsive davranisini kontrollu sekilde ezer.
*/

:root{
  --index-safe-top: env(safe-area-inset-top, 0px);
  --index-safe-right: env(safe-area-inset-right, 0px);
  --index-safe-bottom: env(safe-area-inset-bottom, 0px);
  --index-safe-left: env(safe-area-inset-left, 0px);
}

body{
  overflow-x:hidden;
}

body.index-home .player-home-btn,
body.index-home .topbar-exit-btn{
  display:none !important;
}

body:not(.index-home) .topbar-exit-btn{
  display:inline-flex !important;
}

.home-wrap,
.home-grid,
.tournament-join-list,
.tournament-join-panel,
.clock-install-panel,
.casual-card{
  min-width:0;
}

.tournament-join-panel,
.clock-install-panel,
.casual-card{
  overflow:hidden;
}

.tournament-join-list{
  gap:18px;
}

.tournament-join-panel{
  position:relative;
  gap:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,.86);
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 62%, rgba(255,246,232,.96) 100%);
  box-shadow:
    inset 4px 0 0 rgba(245,158,11,.95),
    0 18px 34px rgba(2,20,31,.22),
    0 1px 0 rgba(255,255,255,.7);
}

.tournament-join-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.08);
}

.tournament-join-panel .login-title{
  position:relative;
  z-index:1;
  display:block;
  min-height:38px;
  color:#062d40;
  font-size:16px;
  font-weight:900;
  line-height:1.18;
  letter-spacing:0;
  text-transform:uppercase;
}

.tournament-join-panel .login-title::before{
  content:"";
  float:left;
  width:36px;
  height:36px;
  margin:0 10px 5px 0;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.34);
  background:
    url("/images/trophy.png") center / 24px 24px no-repeat,
    linear-gradient(180deg, #fffaf0 0%, #ffe8b8 100%);
  background-blend-mode:normal;
  box-shadow:
    0 10px 18px rgba(245,158,11,.22),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.tournament-join-panel .login-title::after{
  content:"";
  display:block;
  clear:both;
}

.tournament-join-panel .login-form{
  position:relative;
  z-index:1;
  gap:8px;
}

.tournament-join-panel .code-input{
  width:100%;
  min-height:52px;
  justify-self:stretch;
  border-radius:15px;
  border:2px solid #dfe9f3;
  background:rgba(255,255,255,.9);
  color:#0b3041;
  font-size:23px;
  letter-spacing:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.tournament-join-panel .code-input::placeholder{
  color:#6f7780;
  opacity:1;
}

.tournament-join-panel .code-input:focus{
  border-color:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.16);
  outline:none;
}

.tournament-join-panel .btn.primary{
  width:100%;
  min-height:50px;
  justify-self:stretch;
  border-radius:15px;
  font-size:17px;
  box-shadow:0 12px 22px rgba(245,158,11,.22);
}

.tournament-join-panel .tournament-join-state,
.tournament-join-panel .muted{
  position:relative;
  z-index:1;
}

/* Phone shared: 0 - 699px */
@media (max-width:699px){
  :root{
    --wrap-pad:10px;
    --r:16px;
  }

  body{
    font-size:14px;
  }

  .topbar{
    min-height:44px;
    padding:calc(2px + var(--index-safe-top)) max(8px, var(--index-safe-right)) 2px max(8px, var(--index-safe-left));
    gap:6px;
  }

  .brand{
    gap:6px;
    min-width:0;
  }

  .brand .logo{
    height:30px;
    flex:0 0 auto;
  }

  .brand .title{
    min-width:0;
    max-width:calc(100vw - 138px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
    line-height:1.1;
  }

  .topbar-actions{
    gap:6px;
    flex:0 0 auto;
  }

  .topbar-exit-btn{
    display:inline-flex;
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    max-height:36px;
    flex:0 0 36px;
    aspect-ratio:1 / 1;
    align-self:center;
    box-sizing:border-box;
    padding:0;
    border-radius:12px;
    color:#ffb12f;
    background:rgba(255,153,0,.12);
    border-color:rgba(255,177,47,.55);
  }

  .wrap{
    width:100%;
    padding:10px max(10px, var(--index-safe-right)) calc(14px + var(--index-safe-bottom)) max(10px, var(--index-safe-left));
  }

  .home-grid{
    gap:12px;
  }

  .tournament-join-list{
    gap:12px;
  }

  .tournament-join-panel,
  .clock-install-panel,
  .casual-card{
    border-radius:16px;
    padding:14px;
  }

  .home-grid .casual-card{
    width:calc(100vw - 4px) !important;
    max-width:calc(100vw - 4px) !important;
    justify-self:center;
    margin-inline:calc(50% - 50vw + 2px) !important;
    box-sizing:border-box;
    padding-inline:10px;
  }

  @supports (width:100dvw){
    .home-grid .casual-card{
      width:calc(100dvw - 4px) !important;
      max-width:calc(100dvw - 4px) !important;
      margin-inline:calc(50% - 50dvw + 2px) !important;
    }
  }

  .home-grid > #vPlayer{
    width:calc(100vw - 4px) !important;
    max-width:calc(100vw - 4px) !important;
    justify-self:center;
    margin-inline:calc(50% - 50vw + 2px) !important;
    box-sizing:border-box;
    padding-inline:14px;
    overflow:hidden;
  }

  @supports (width:100dvw){
    .home-grid > #vPlayer{
      width:calc(100dvw - 4px) !important;
      max-width:calc(100dvw - 4px) !important;
      margin-inline:calc(50% - 50dvw + 2px) !important;
    }
  }

  #vPlayer #tabs{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:3px;
    width:calc(100% + 20px);
    max-width:none;
    margin:8px -10px 12px;
    overflow:visible;
  }

  #vPlayer #tabs .btn{
    min-width:0;
    width:100%;
    min-height:48px;
    padding:0 4px;
    border-radius:11px;
    font-size:12px;
    line-height:1.05;
    white-space:normal;
    text-align:center;
  }

  #vPlayer #tabs .btn b{
    display:block;
    font-size:12px;
    line-height:1.05;
  }

  #pv-standings .standings-wrap{
    width:calc(100% + 20px);
    max-width:none;
    margin-inline:-10px;
    box-sizing:border-box;
    border-width:3px;
    padding:2px;
  }

  #pv-standings .standings-head,
  #pv-standings .list .item{
    padding-left:2px !important;
    padding-right:4px !important;
    column-gap:3px !important;
    gap:3px !important;
    grid-template-columns:14px minmax(0,1fr) 24px 24px 24px 24px !important;
  }

  #pv-standings .standings-head.is-league,
  #pv-standings .list .item.is-league{
    grid-template-columns:14px minmax(0,1fr) 23px 23px 23px 34px 36px 31px !important;
  }

  #pv-standings .standings-head.is-open-league,
  #pv-standings .list .item.is-open-league{
    grid-template-columns:14px minmax(0,1fr) 23px 23px 23px 34px 36px 31px !important;
  }

  #pv-standings.is-league-standings .standings-head > div:nth-child(8){
    font-size:0 !important;
  }

  #pv-standings.is-league-standings .standings-head > div:nth-child(8)::after{
    content:"P";
    font-size:12px;
    font-weight:900;
    line-height:1;
  }

  #pv-standings .rank-cell{
    min-width:14px;
    transform:translateX(-1px);
  }

  #pv-standings .list .item > div:nth-child(2){
    transform:translateX(-2px);
  }

  .casual-create-panel,
  .open-tables-panel{
    width:100%;
    padding-inline:12px;
  }

  .casual-create-panel{
    padding-top:2px;
  }

  .casual-score-field,
  .casual-time-row{
    width:100%;
  }

  .casual-time-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    justify-content:center;
    justify-items:center;
    align-items:center;
    gap:8px;
    margin-top:-6px;
    padding:10px 8px;
  }

  .casual-time-row .casual-field{
    width:100%;
    justify-items:center;
  }

  .casual-time-row .casual-field label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    line-height:1;
    padding-block:0;
  }

  .casual-time-row .stepper{
    width:100%;
    grid-template-columns:30px minmax(44px,1fr) 30px;
    min-height:44px;
  }

  .casual-time-row .stepper-btn{
    font-size:26px;
    line-height:1;
  }

  .casual-time-row .stepper-value{
    font-size:22px;
    font-weight:900;
  }

  .casual-score-field label{
    font-size:15px;
  }

  .score-options{
    justify-content:center;
    gap:3px;
    width:100%;
    transform:translateX(-8px);
  }

  .score-option{
    width:clamp(42px, 12.2vw, 46px) !important;
    height:clamp(42px, 12.2vw, 46px) !important;
    min-height:clamp(42px, 12.2vw, 46px) !important;
    flex:0 0 clamp(42px, 12.2vw, 46px) !important;
    font-size:18px !important;
  }

  .tournament-join-panel{
    gap:10px;
    border-radius:20px;
    box-shadow:
      inset 4px 0 0 rgba(245,158,11,.95),
      0 14px 26px rgba(2,20,31,.2),
      0 1px 0 rgba(255,255,255,.7);
  }

  .tournament-join-panel .login-title{
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    align-items:center;
    column-gap:10px;
    min-height:38px;
    font-size:18px;
    line-height:1.18;
  }

  .tournament-join-panel .login-title::before{
    float:none;
    width:36px;
    height:36px;
    margin:0;
    border-radius:13px;
    background-size:24px 24px;
  }

  .tournament-join-panel .login-title::after{
    display:none;
  }

  .code-input,
  .casual-input,
  .casual-select{
    min-height:52px;
    font-size:16px;
  }

  .casual-name-row{
    padding:8px 10px 10px;
  }

  .casual-name-row .casual-input{
    min-height:44px;
    padding:7px 10px;
    border-radius:11px;
  }

  .tournament-join-panel .code-input{
    width:100%;
    min-height:50px;
    justify-self:stretch;
    border-radius:14px;
    font-size:22px;
  }

  .tournament-join-panel .btn.primary{
    width:100%;
    min-height:48px;
    justify-self:stretch;
    border-radius:14px;
    font-size:16px;
  }

  .btn{
    min-height:48px;
    border-radius:12px;
  }

  .clock-install-panel{
    gap:14px;
  }

  .clock-install-title{
    font-size:18px;
  }

  .clock-install-text{
    font-size:14px;
  }

  .clock-install-actions{
    grid-template-columns:minmax(0, 1fr) minmax(62px, 76px);
    gap:10px;
  }

  .clock-install-actions .btn{
    min-width:0;
    padding-inline:10px;
  }
}

/* Small phones: 0 - 359px */
@media (max-width:359px){
  .brand .title{
    font-size:14px;
    max-width:calc(100vw - 128px);
  }

  .brand .logo{
    height:28px;
  }

  .topbar{
    min-height:42px;
  }

  .topbar-exit-btn{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
    max-height:34px;
    flex-basis:34px;
  }

  .tournament-join-panel,
  .clock-install-panel,
  .casual-card{
    padding:12px;
  }

  .tournament-join-panel .login-title{
    grid-template-columns:32px minmax(0,1fr);
    column-gap:9px;
    min-height:36px;
    font-size:16px;
  }

  .tournament-join-panel .login-title::before{
    width:32px;
    height:32px;
    margin:0;
    border-radius:12px;
    background-size:21px 21px;
  }

  .tournament-join-panel .code-input{
    width:100%;
    min-height:48px;
    justify-self:stretch;
    font-size:20px;
  }

  .home-grid .casual-card{
    width:calc(100vw - 4px) !important;
    max-width:calc(100vw - 4px) !important;
    justify-self:center;
    margin-inline:calc(50% - 50vw + 2px) !important;
    box-sizing:border-box;
    padding-inline:9px;
  }

  @supports (width:100dvw){
    .home-grid .casual-card{
      width:calc(100dvw - 4px) !important;
      max-width:calc(100dvw - 4px) !important;
      margin-inline:calc(50% - 50dvw + 2px) !important;
    }
  }

  .home-grid > #vPlayer{
    width:calc(100vw - 4px) !important;
    max-width:calc(100vw - 4px) !important;
    justify-self:center;
    margin-inline:calc(50% - 50vw + 2px) !important;
    box-sizing:border-box;
    padding-inline:12px;
    overflow:hidden;
  }

  @supports (width:100dvw){
    .home-grid > #vPlayer{
      width:calc(100dvw - 4px) !important;
      max-width:calc(100dvw - 4px) !important;
      margin-inline:calc(50% - 50dvw + 2px) !important;
    }
  }

  #vPlayer #tabs{
    gap:3px;
    width:calc(100% + 18px);
    margin-inline:-9px;
  }

  #vPlayer #tabs .btn{
    min-height:44px;
    padding:0 3px;
    border-radius:10px;
    font-size:11px;
  }

  #vPlayer #tabs .btn b{
    font-size:11px;
  }

  #pv-standings .standings-wrap{
    width:calc(100% + 18px);
    margin-inline:-9px;
    border-width:3px;
  }

  #pv-standings .standings-head,
  #pv-standings .list .item{
    padding-left:1px !important;
    padding-right:3px !important;
    column-gap:2px !important;
    gap:2px !important;
    grid-template-columns:13px minmax(0,1fr) 23px 23px 23px 23px !important;
  }

  #pv-standings .standings-head.is-league,
  #pv-standings .list .item.is-league{
    grid-template-columns:13px minmax(0,1fr) 22px 22px 22px 34px 35px 30px !important;
  }

  #pv-standings .standings-head.is-open-league,
  #pv-standings .list .item.is-open-league{
    grid-template-columns:13px minmax(0,1fr) 22px 22px 22px 34px 35px 30px !important;
  }

  #pv-standings .rank-cell{
    min-width:13px;
    transform:translateX(-1px);
  }

  #pv-standings .list .item > div:nth-child(2){
    transform:translateX(-2px);
  }

  .casual-create-panel,
  .open-tables-panel{
    padding-inline:10px;
  }

  .casual-create-panel{
    padding-top:2px;
  }

  .casual-time-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    justify-content:center;
    justify-items:center;
    align-items:center;
    gap:6px;
    margin-top:-6px;
    padding:9px 7px;
  }

  .casual-time-row .stepper{
    grid-template-columns:28px minmax(38px,1fr) 28px;
    min-height:42px;
  }

  .casual-time-row .stepper-btn{
    font-size:24px;
  }

  .casual-time-row .stepper-value{
    font-size:20px;
    font-weight:900;
  }

  .casual-time-row .casual-field label{
    min-height:24px;
  }

  .score-options{
    gap:3px;
    transform:translateX(-6px);
  }

  .score-option{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    flex-basis:38px !important;
    font-size:17px !important;
  }

  .casual-name-row{
    padding:7px 9px 9px;
  }

  .casual-name-row .casual-input{
    min-height:42px;
    padding:6px 9px;
  }

  .clock-install-actions{
    grid-template-columns:1fr;
  }
}

/* Normal phones: 360px - 699px */
@media (min-width:360px) and (max-width:699px){
  :root{
    --wrap-pad:12px;
  }

  .wrap{
    width:100%;
    padding:12px max(12px, var(--index-safe-right)) calc(16px + var(--index-safe-bottom)) max(12px, var(--index-safe-left));
  }

  .home-grid{
    gap:14px;
  }

  .tournament-join-panel,
  .clock-install-panel,
  .casual-card{
    border-radius:18px;
    padding:16px;
  }

  .tournament-join-panel{
    border-radius:22px;
  }

  .tournament-join-panel .login-title{
    font-size:21px;
  }
}

/* Single-column home order: tournaments, game panel, clock panel */
@media (max-width:999px){
  .home-grid .tournament-join-list{
    grid-column:1;
    grid-row:1;
  }

  .home-grid .casual-card{
    grid-column:1;
    grid-row:2;
  }

  .home-grid .clock-install-panel{
    grid-column:1;
    grid-row:3;
  }
}

/* Tablet: 700px - 999px */
@media (min-width:700px) and (max-width:999px){
  .home-wrap{
    max-width:760px;
  }

  .home-grid{
    gap:16px;
  }

  .home-grid .tournament-join-list{
    grid-column:1;
    grid-row:1;
  }

  .home-grid .casual-card{
    grid-column:1;
    grid-row:2;
  }

  .home-grid .clock-install-panel{
    grid-column:1;
    grid-row:3;
  }

  .tournament-join-panel .login-title{
    font-size:22px;
  }
}

/* Desktop: 1000px+ */
@media (min-width:1000px){
  .home-wrap{
    max-width:1240px;
  }

  .home-grid{
    grid-template-columns:minmax(230px,270px) minmax(0,1fr) minmax(190px,230px);
    gap:18px;
  }

  .home-grid .tournament-join-list{
    grid-column:1;
    grid-row:1;
  }

  .home-grid .casual-card{
    grid-column:2;
    grid-row:1;
  }

  .home-grid .clock-install-panel{
    grid-column:3;
    grid-row:1;
    min-height:252px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:space-between;
    align-items:center;
    gap:16px;
    padding:16px 18px;
    border-radius:22px;
  }

  .clock-install-actions{
    min-width:0;
    grid-template-columns:minmax(0,1fr) 54px;
  }

  .tournament-join-panel{
    padding:16px 16px 10px;
  }

  .tournament-join-panel .login-title{
    min-height:36px;
    font-size:18px;
    line-height:1.2;
  }

  .tournament-join-panel .login-title::before{
    width:34px;
    height:34px;
    margin:0 10px 4px 0;
    border-radius:11px;
    background-size:22px 22px;
  }

  .tournament-join-panel .login-form{
    margin-top:12px;
  }

  .tournament-join-panel .code-input{
    width:min(100%, 220px) !important;
    min-height:34px !important;
    justify-self:center !important;
    border-radius:11px;
    font-size:16px !important;
  }

  .tournament-join-panel .btn.primary{
    width:min(100%, 220px) !important;
    min-height:38px !important;
    justify-self:center !important;
    border-radius:11px;
    font-size:14px !important;
    box-shadow:0 8px 16px rgba(245,158,11,.18);
  }
}

/* Desktop device: narrow browser windows should still use compact desktop controls */
@media (hover:hover) and (pointer:fine) and (min-width:360px){
  .tournament-join-panel{
    padding-bottom:10px;
  }

  .tournament-join-panel .login-form{
    margin-top:12px;
  }

  .tournament-join-panel .code-input{
    width:min(100%, 220px) !important;
    min-height:34px !important;
    justify-self:center !important;
    border-radius:11px;
    font-size:16px !important;
  }

  .tournament-join-panel .btn.primary{
    width:min(100%, 220px) !important;
    min-height:38px !important;
    justify-self:center !important;
    border-radius:11px;
    font-size:14px !important;
    box-shadow:0 8px 16px rgba(245,158,11,.18);
  }
}