/* HEADER */

header {
  background-color: var(--darker);
  display: flex;
  height: var(--header-height);
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

@media (min-width: 614px) {
  header {
    align-items: normal;
    flex-direction: column;
    justify-content: normal;
    height: 100%;
    position: fixed;
    width: var(--header-height);
  }
}

/* HEADER TITLE */

#title {
  align-items: center;
  border-radius: 3px;
  display: flex;
  height: 100%;
  padding: 0 1em;
}

#title:active {
  background-color: var(--light-green);
}

#title h1 {
  color: var(--light-green);
  font-size: 4.2em;
  font-weight: normal;
  /* height: 100%; */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

#title:active h1 {
  color: var(--darker);
}

/* MENU WRAPPER */

#menu-wrapper {
  left: 0;
  position: absolute;
  top: 0;
}

/* MENU BAR TRIGGER */
/* 
  Hamburger button
  When screen >= 614px : hidden
*/

@media (min-width: 614px) {
  #menu-bar-btn-hamburger {
    display: none;
  }
}

/* MENU BAR WRAPPER */
/* 
  When screen >= 614px : thin
*/

#menu-bar-wrapper {
  /* --menu-bar-width: 20rem; */
  background-color: var(--darker);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: var(--menu-bar-width);
}

@media (min-width: 614px) {
  :root {
    --menu-bar-width: var(--header-height);
  }
}

/* closed-for-mobile : state switched by menu-bar-btn-hamburger */

#menu-bar-wrapper.closed-for-mobile {
  display: none;
}

@media (min-width: 614px) {
  #menu-bar-wrapper.closed-for-mobile {
    display: block;
  }
}

/* MENU OVERLAY */

#menu-overlay {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100vh;
  left: var(--menu-bar-width);
  position: fixed;
  top: 0;
  width: 100%;
}

/* MENU PANEL WRAPPER */

.menu-panel-wrapper {
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  height: 5rem;
}

@media (min-width: 614px) {
  .menu-panel-wrapper {
    cursor: unset;
  }
}

.menu-panel-wrapper h1 {
  color: var(--light-green);
  font-size: 2.4em;
  font-weight: normal;
  margin: auto 1rem;
}

/* MENU PANEL WRAPPER - CLOSE */

#menu-panel-wrapper-close {
  width: 5rem;
}

/* MENU PANEL WRAPPER - IRATUS */

#menu-panel-wrapper-iratus:active {
  background-color: var(--light-green);
}

#menu-panel-wrapper-iratus:active .menu-bar-btn {
  background-color: var(--light-green);
  fill: var(--darker);
}

#menu-panel-wrapper-iratus:active h1 {
  color: var(--darker);
}

/* MENU BAR BUTTON */

.menu-bar-btn {
  border-radius: 3px;
  cursor: pointer;
  fill: var(--light-green);
  flex-shrink: 0;
  height: 3.6rem;
  left: 0;
  padding: 0.7rem;
  position: relative;
  width: 3.6rem;
}

.menu-panel-wrapper.selected-panel .menu-bar-btn {
  background-color: var(--light-green);
  fill: var(--darker);
}

@media (min-width: 614px) {
  .menu-panel-wrapper:hover .menu-bar-btn {
    background-color: var(--light-green);
    fill: var(--darker);
  }
}

.menu-bar-btn:focus {
  outline: none;
}

/* MENU PANEL */

.menu-panel {
  --menu-panel-width: min(calc(100vw - 14rem), 30rem);
  background-color: var(--dark);
  box-shadow: 0.6em -0em 1em var(--darker);
  color: var(--light-green);
  display: none;
  font-size: 1.5em;
  bottom: 0;
  left: 5rem;
  overflow-y: scroll;
  padding: 1em;
  position: absolute;
  top: 0;
  width: var(--menu-panel-width);
}

@media (min-width: 614px) {
  .menu-panel {
    /* font-size: 2em; */
  }
}

.menu-panel-wrapper.selected-panel .menu-panel {
  display: block;
}

@media (min-width: 614px) {
  .menu-panel-wrapper:hover .menu-panel {
    display: block;
  }
}

/*






*/

/* NOT SORTED YET */

/* DESKTOP & MOBILE - TODO : SORT */

.menu-delimiter {
  background-color: var(--light-green);
  height: 2px;
  margin: 0.7rem;
  width: 3.6rem;
}

.menu-panel h2 {
  font-size: 2em;
  margin: 0;
  text-align: center;
}

.menu-panel .text {
  font-size: 2.1rem;
}

.menu-panel .menu-delimiter {
  margin: 2em 0 01em 0;
  width: 100%;
}

.menu-panel p {
  /* font-size: 4em; */
  margin: 0;
}

.menu-panel button {
  font-size: 2em;
  margin: 0;
  padding: 0.3em 0.3em;
  width: 100%;
}

/* RULES */

.iratusrules-wrapper {
  /* height: 59px; */
  height: calc(59px + 0.3em + var(--menu-panel-width));
  overflow-y: hidden;
  position: relative;
  transition: height 1s;
}

@media (min-width: 614px) {
  .iratusrules-wrapper:not(:hover) {
    height: 59px;
  }
}

.iratusrules-wrapper .newrules-btn {
  position: relative;
  z-index: 2;
}

.iratusrules-wrapper .rules-sub-grid {
  bottom: 0;
  display: grid;
  gap: 0.3em;
  grid-template-columns: repeat(3, 1fr);
  position: absolute;
  width: 100%;
}

.iratusrules-wrapper .rules-sub-grid button {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0;
  padding-bottom: 100%;
  padding-top: 0;
}

.iratusrules-wrapper .rules-sub-grid button.s {
  background-image: url("../images/bs.png");
}

.iratusrules-wrapper .rules-sub-grid button.s:hover {
  background-image: url("../images/ws.png");
}

.iratusrules-wrapper .rules-sub-grid button.e {
  background-image: url("../images/be.png");
}

.iratusrules-wrapper .rules-sub-grid button.e:hover {
  background-image: url("../images/we.png");
}

.iratusrules-wrapper .rules-sub-grid button.d {
  background-image: url("../images/bd.png");
}

.iratusrules-wrapper .rules-sub-grid button.d:hover {
  background-image: url("../images/wd.png");
}

.iratusrules-wrapper .rules-sub-grid button.c {
  background-image: url("../images/bc.png");
}

.iratusrules-wrapper .rules-sub-grid button.c:hover {
  background-image: url("../images/wc.png");
}

.iratusrules-wrapper .rules-sub-grid button.y {
  background-image: url("../images/by.png");
}

.iratusrules-wrapper .rules-sub-grid button.y:hover {
  background-image: url("../images/wy.png");
}

.iratusrules-wrapper .rules-sub-grid button.f {
  background-image: url("../images/bf.png");
}

.iratusrules-wrapper .rules-sub-grid button.f:hover {
  background-image: url("../images/wf.png");
}

.iratusrules-wrapper .rules-sub-grid button.g {
  background-image: url("../images/bg.png");
}

.iratusrules-wrapper .rules-sub-grid button.g:hover {
  background-image: url("../images/wg.png");
}

.iratusrules-wrapper .rules-sub-grid button.p {
  background-image: url("../images/bp.png");
}

.iratusrules-wrapper .rules-sub-grid button.p:hover {
  background-image: url("../images/wp.png");
}

/* SETTINGS */

.settings h3 {
  margin-top: 0;
}

.settings ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.settings li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.settings label {
  margin: auto 0;
}

.settings select {
  width: 60%;
}

.settings p:not(:last-child) {
  margin-bottom: 1em;
}