:root{
  --owge-player-sidebar-width: 240px;
}

html,
body{
  margin:0;
  padding:0;
}

body.owge-player-shell-mode{
  margin:0 !important;
  min-height:100vh;
  background:
    radial-gradient(circle at top, rgba(28,58,108,.22), transparent 38%),
    linear-gradient(180deg, #07111f 0%, #09172a 100%);
}

body.owge-player-shell-mode > *{
  box-sizing:border-box;
}

body.owge-player-shell-mode #owge-page-content{
  margin:0 !important;
  min-width:0;
  width:100%;
}

body.owge-player-shell-mode #owgePlayerShell{
  display:grid !important;
  grid-template-columns: var(--owge-player-sidebar-width) minmax(0,1fr) !important;
  grid-template-rows: minmax(100vh,auto);
  align-items:stretch;
  min-height:100vh;
  width:100%;
  max-width:none;
}

body.owge-player-shell-mode #owgePlayerShell > .owge-shell__sidebar{
  grid-column:1 !important;
  grid-row:1 !important;
  width:var(--owge-player-sidebar-width) !important;
  min-width:var(--owge-player-sidebar-width) !important;
  max-width:var(--owge-player-sidebar-width) !important;
  height:100%;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  padding:20px 16px 16px;
  box-sizing:border-box;
  border-right:1px solid rgba(120,160,220,.16);
  background:
    linear-gradient(180deg, rgba(5,12,24,.96) 0%, rgba(7,16,31,.98) 100%);
  overflow:hidden;
}

body.owge-player-shell-mode #owgePlayerShell > .owge-shell__main{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;
  display:block !important;
  overflow:hidden;
}

body.owge-player-shell-mode #owgePlayerShell .owge-player-shell__content-wrap{
  min-width:0;
  width:100%;
  max-width:none;
  padding:20px;
  box-sizing:border-box;
}

body.owge-player-shell-mode #owgePlayerShell .owge-shell__page{
  min-width:0;
  width:100%;
  max-width:none;
}

body.owge-player-shell-mode #owgePlayerShell .owge-player-shell__sidebar-top,
body.owge-player-shell-mode #owgePlayerShell .owge-player-shell__sidebar-bottom{
  min-width:0;
}

body.owge-player-shell-mode #owgePlayerShell .owge-player-shell__brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

body.owge-player-shell-mode #owgePlayerShell .owge-logo-card{
  width:56px;
  height:56px;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(120,160,220,.18);
  background:rgba(18,33,58,.72);
  flex:0 0 auto;
}

body.owge-player-shell-mode #owgePlayerShell .owge-logo-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

body.owge-player-shell-mode #owgePlayerShell .owge-player-shell__brand-copy{
  min-width:0;
}

body.owge-player-shell-mode #owgePlayerShell .owge-player-shell__brand-name{
  color:#f3f7ff;
  font-weight:800;
  line-height:1.2;
}

body.owge-player-shell-mode #owgePlayerShell .owge-player-shell__brand-sub{
  color:#97a9c6;
  font-size:13px;
  line-height:1.2;
  margin-top:2px;
}

body.owge-player-shell-mode #owgePlayerShell .owge-side-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

body.owge-player-shell-mode #owgePlayerShell .owge-side-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 12px;
  box-sizing:border-box;
  border-radius:12px;
  color:#d7e7ff;
  text-decoration:none;
  border:1px solid transparent;
  background:transparent;
}

body.owge-player-shell-mode #owgePlayerShell .owge-side-link:hover{
  background:rgba(39,75,130,.18);
  border-color:rgba(91,145,230,.18);
}

body.owge-player-shell-mode #owgePlayerShell .owge-side-link.is-active{
  background:rgba(34,92,185,.20);
  border-color:rgba(91,145,230,.34);
  box-shadow:inset 0 0 0 1px rgba(91,145,230,.12);
}

body.owge-player-shell-mode #owgePlayerShell .owge-side-icon{
  width:16px;
  display:inline-flex;
  justify-content:center;
  flex:0 0 16px;
}

body.owge-player-shell-mode #owgePlayerShell .owge-status-line,
body.owge-player-shell-mode #owgePlayerShell .owge-turn-card{
  width:100%;
  box-sizing:border-box;
}

body.owge-player-shell-mode #owgePlayerShell .owge-status-line{
  margin-top:16px;
  padding:10px 12px;
  border-radius:12px;
  color:#c7d7f2;
  border:1px solid rgba(120,160,220,.16);
  background:rgba(15,29,52,.52);
}

body.owge-player-shell-mode #owgePlayerShell .owge-turn-card{
  margin-top:16px;
  padding:14px 14px 12px;
  border-radius:16px;
  border:1px solid rgba(120,160,220,.16);
  background:rgba(15,29,52,.52);
  color:#eaf2ff;
}

body.owge-player-shell-mode #owgePlayerShell .owge-turn-card__date{
  font-size:12px;
  color:#9db0cf;
}

body.owge-player-shell-mode #owgePlayerShell .owge-turn-card__time{
  font-size:40px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  margin-top:6px;
}

body.owge-player-shell-mode #owgePlayerShell .owge-turn-card__meta{
  font-size:13px;
  color:#9db0cf;
  margin-top:6px;
}

body.owge-player-shell-mode #owgePlayerShell .owge-player-page-header{
  margin-bottom:16px;
}

body.owge-player-shell-mode #owgePlayerShell .owge-page-kicker{
  color:#8fa6c8;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

body.owge-player-shell-mode #owgePlayerShell .owge-page-title{
  margin:6px 0 0;
  color:#f3f7ff;
  font-size:30px;
  line-height:1.1;
}

@media (max-width: 900px){
  body.owge-player-shell-mode #owgePlayerShell{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr;
  }

  body.owge-player-shell-mode #owgePlayerShell > .owge-shell__sidebar{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    border-right:none;
    border-bottom:1px solid rgba(120,160,220,.16);
  }

  body.owge-player-shell-mode #owgePlayerShell > .owge-shell__main{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body.owge-player-shell-mode #owgePlayerShell .owge-player-shell__content-wrap{
    padding:16px;
  }
}