/* Small, isolated repairs around the original table based artwork. */
body {
  margin: 0;
  overflow-x: auto;
}

iframe {
  max-width: 100%;
}

td,
th {
  overflow-wrap: break-word;
}

input,
textarea,
select {
  max-width: 100%;
}

textarea {
  resize: vertical;
}

body>table[width="750"] {
  width: 750px;
  min-width: 750px;
}

td.mobile {
  width: auto;
  min-width: 132px;
}

.site-nav {
  width: max-content;
  min-width: 132px;
  margin: 0 auto;
}

#sidenav {
  width: max-content;
  white-space: nowrap;
  overflow: visible;
  padding: 2px 12px 2px 32px;
}

/* Keep the wheel whole at the left; only the right frame corner moves when
   the menu grows. CSS draws the stretchable center. */
body {
  --site-art-shadow: drop-shadow(2px 3px 3px rgb(0 0 0 / 60%));
  --menu-top-left: url('/images/assets/normal/top-wheel.png');
  --menu-top-right: url('/images/assets/normal/top-corner-right.png');
  --menu-top-edge-right: url('/images/assets/normal/top-edge-right.png');
  --menu-top-left-size: 132px 134px;
  --menu-top-right-size: 23px 19px;
  --menu-header-left: url('/images/assets/normal/header-left.png');
  --menu-header-right: url('/images/assets/normal/header-right.png');
  --menu-footer-left: url('/images/assets/normal/footer-left.png');
  --menu-footer-middle: linear-gradient(to bottom, #393939 0 1px, #c4c4c4 1px 5px, #c3c3c3 5px 7px, #8b8b8b 7px 8px, #797979 8px 9px, #737373 9px 10px, #0e0e0e 10px 11px);
  --menu-footer-middle-position: left 33px top 9px;
  --menu-footer-middle-size: calc(100% - 56px) 11px;
  --menu-footer-right: url('/images/assets/normal/footer-right.png');
  --menu-panel-texture: repeating-linear-gradient(90deg, transparent 0 2px, #ffffff05 2px 3px, transparent 3px 5px);
  --menu-panel-fill: linear-gradient(90deg, #707070 33px, #808080 39px, #6b6b6b calc(100% - 45px), #5e5e5e calc(100% - 23px));
  --menu-snow-bridge: none;
  --menu-upper-pipe: linear-gradient(to bottom, #555554 0%, #f1f1f1 16%, #d6d6d6 38%, #8b8b8b 66%, #1d1910 100%);
  --menu-lower-pipe: linear-gradient(to bottom, #555554 0%, #f1f1f1 20%, #c3c3c3 45%, #848484 72%, #1d1910 100%);
  --menu-upper-position: left 132px top 32px;
  --menu-lower-position: left 132px top 57px;
  --menu-upper-size: calc(100% - 132px) 12px;
  --menu-lower-size: calc(100% - 132px) 13px;
  --menu-rim-position: left 109px top 117px;
  --menu-rim-size: calc(100% - 132px) 17px;
  --menu-rim: linear-gradient(to bottom, #454544 0 1px, #d6d6d6 1px 5px, #c3c3c3 5px 10px, #1d1910 10px 11px, transparent 11px 17px);
}

body[data-season="neige"] {
  --menu-top-left: url('/images/assets/neige/top-left.png');
  --menu-top-right: url('/images/assets/neige/top-right.png');
  --menu-top-edge-right: none;
  --menu-top-left-size: 109px 134px;
  --menu-top-right-size: 23px 134px;
  --menu-header-left: url('/images/assets/neige/header-left.png');
  --menu-header-right: url('/images/assets/neige/header-right.png');
  --menu-footer-left: url('/images/assets/neige/footer-left.png');
  --menu-footer-middle: url('/images/assets/neige/footer-middle.png');
  --menu-footer-middle-position: left 33px top;
  --menu-footer-middle-size: calc(100% - 56px) 29px;
  --menu-footer-right: url('/images/assets/neige/footer-right.png');
  --menu-snow-bridge: linear-gradient(to bottom, #646464 0 1px, #777 1px 2px, #aaa 2px 3px, #e6e6e6 3px 4px, #fff 4px 18px, #fefefe 18px 20px);
  --menu-upper-pipe: linear-gradient(to bottom, #646464 0, #f8f8f8 2px, #fff 4px 10px, #bababa 13px, #4c4c4c 17px, #1a1915 20px, #646464 25px);
  --menu-lower-pipe: linear-gradient(to bottom, #646464 0, #e6e6ea 2px, #fff 4px 11px, #acacac 13px, #464646 17px, #1a1915 20px, #646464 25px);
  --menu-upper-position: left top 24px;
  --menu-lower-position: left top 49px;
  --menu-upper-size: 100% 25px;
  --menu-lower-size: 100% 25px;
  --menu-rim-position: left top 117px;
  --menu-rim-size: calc(100% - 10px) 17px;
  --menu-rim: linear-gradient(to bottom, #fff 0 3px, #f6f6f6 3px 6px, #dedede 9px, #bfbfbf 10px, #303030 10px 11px, #555 11px, #5e5e5e 17px);
}

.menu-column {
  background-color: #646464;
  background-image:
    url('/images/assets/shared/panel-left.png'),
    url('/images/assets/shared/panel-right.png'),
    var(--menu-panel-texture),
    var(--menu-panel-fill);
  background-position: left top, right top, left top, left top;
  background-size: 33px 5px, 23px 5px, calc(100% - 10px) 100%, calc(100% - 10px) 100%;
  background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
}

td[background*="mecanic2_09.gif"],
td[background*="tube-middle.png"] {
  background-image:
    linear-gradient(to bottom, #646464 0 134px, transparent 134px),
    url('/images/assets/shared/tube-middle.png');
  background-position: left top;
  background-size: 100% 100%, 60px 40px;
  background-repeat: no-repeat, repeat-y;
}

.menu-home,
.menu-top,
.menu-header,
.menu-bottom {
  display: block;
  width: 100%;
}

.menu-top {
  height: 134px;
  background-color: #646464;
  background-image: var(--menu-top-left), var(--menu-top-right), var(--menu-top-edge-right), var(--menu-snow-bridge), var(--menu-panel-texture), var(--menu-panel-fill), var(--menu-rim), var(--menu-lower-pipe), var(--menu-upper-pipe);
  background-position: left top, right bottom, right top 80px, left top 98px, left bottom, left bottom, var(--menu-rim-position), var(--menu-lower-position), var(--menu-upper-position);
  background-size: var(--menu-top-left-size), var(--menu-top-right-size), 23px 35px, calc(100% - 10px) 20px, calc(100% - 10px) 6px, calc(100% - 10px) 6px, var(--menu-rim-size), var(--menu-lower-size), var(--menu-upper-size);
  background-repeat: no-repeat;
}

.menu-header {
  box-sizing: border-box;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 23px 0 33px;
  background-image: var(--menu-header-left), var(--menu-header-right);
  background-position: left top, right top;
  background-size: 33px 48px, 23px 48px;
  background-repeat: no-repeat;
}

.menu-logo {
  display: block;
  width: 68px;
  height: auto;
  max-width: none;
}

.menu-bottom {
  height: 29px;
  background-color: #646464;
  background-image: var(--menu-footer-left), var(--menu-footer-right), var(--menu-footer-middle), var(--menu-panel-texture), var(--menu-panel-fill);
  background-position: left top, right top, var(--menu-footer-middle-position), left top, left top;
  background-size: 33px 29px, 23px 29px, var(--menu-footer-middle-size), calc(100% - 10px) 9px, calc(100% - 10px) 9px;
  background-repeat: no-repeat;
}

.site-nav-shell {
  padding: 0;
}

.site-nav-shell>summary {
  display: none;
}

.site-nav-shell[open]>.site-nav {
  animation: none;
}

/* Standalone artwork keeps the same shadow at desktop and mobile widths. */
img[src*="/images/assets/"][src*="/divider-"],
img[src*="/images/assets/shared/ad-"],
img[src$="/images/assets/shared/gris.png"],
img[src$="/images/assets/shared/vert.png"],
.menu-logo {
  filter: var(--site-art-shadow);
}

.site-banner {
  width: min(486px, 100%);
  margin: 12px auto 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-banner-rail {
  display: block;
  width: 100%;
  height: auto;
}

.site-banner-media {
  display: block;
  width: 96.3%;
  aspect-ratio: 468 / 80;
  overflow: hidden;
  background: #111;
}

.site-banner .site-banner-media img,
.site-banner .site-banner-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-banner-html5 {
  position: relative;
}

.site-banner .site-banner-html5 iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  border: 0;
  transform-origin: top left;
}

.site-banner-html5-link {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
}

/* Shadow complete silhouettes and the continuous right edge. Cropped pipe
   ends are joins, so a drop-shadow on those images creates dark seams. */
@media (min-width: 851px) {
  body {
    --menu-art-shadow: drop-shadow(2px 4px 4px rgb(0 0 0 / 72%));
    --menu-outline-shadow: 2px 4px 4px rgb(0 0 0 / 72%);
    --menu-frame-shadow: 0 0 6px 4px rgb(0 0 0 / 40%);
  }

  /* The three header slices meet inside one table. Shadow the assembled
     artwork once so their transparent ends cannot cast visible seams. */
  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table:first-child {
    filter: var(--site-art-shadow);
  }

  /* Keep the long right-hand ornament in one layer, so its repeated tiles
     cast a continuous shadow instead of a shadow around each tile edge. */
  .tubeverti {
    position: relative;
    background: none;
  }

  .tubeverti::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: url('/images/assets/shared/content-edge.png') right top repeat-y;
    filter: var(--site-art-shadow);
    pointer-events: none;
  }

  /* The tube caps connect to the already-shadowed middle. Clip only their
     joining ends, leaving the visible outer contours free to cast a shadow. */
  img[src*="/images/assets/"][src$="/tube-top.png"] {
    filter: var(--menu-art-shadow);
    clip-path: inset(-8px -8px 0 -8px);
  }

  img[src*="/images/assets/"][src$="/tube-bottom.png"] {
    filter: var(--menu-art-shadow);
    clip-path: inset(0 -8px -8px -8px);
  }

  .menu-column {
    position: relative;
    z-index: 1;
    background: none;
  }

  .menu-frame {
    position: relative;
  }

  /* Cover the header center and panel, leaving the header's left notch
     open to the page background, including with browser recoloring. */
  .menu-panel-fill {
    position: absolute;
    top: 134px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image:
      url('/images/assets/shared/panel-left.png'),
      url('/images/assets/shared/panel-right.png'),
      var(--menu-panel-texture),
      var(--menu-panel-fill);
    background-position: left top 1px, right top 1px, left top, left top;
    background-size: 33px 5px, 23px 5px, calc(100% - 10px) 100%, calc(100% - 10px) 100%;
    background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
    clip-path: polygon(33px 0, calc(100% - 10px) 0, calc(100% - 10px) 100%, 0 100%, 0 48px, 33px 48px);
    pointer-events: none;
  }

  /* One outline casts the same shadow around the top, side, and footer. */
  body:not([data-season="neige"]) .menu-frame::before {
    content: "";
    position: absolute;
    top: 117px;
    right: 10px;
    bottom: -20px;
    left: 0;
    z-index: 2;
    border-radius: 12px 3px 3px 12px;
    box-shadow: var(--menu-frame-shadow);
    pointer-events: none;
  }

  .menu-frame::after {
    content: "";
    position: absolute;
    top: 134px;
    right: 0;
    bottom: 0;
    width: 23px;
    background-image: var(--menu-header-right), url('/images/assets/shared/panel-right.png');
    background-position: right top, right top;
    background-size: 23px 48px, 23px 5px;
    background-repeat: no-repeat, repeat-y;
    filter: var(--menu-art-shadow);
    clip-path: inset(0 -5px 0 -5px);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 4px), transparent 100%);
    pointer-events: none;
  }

  body:not([data-season="neige"]) .menu-frame::after {
    filter: none;
    clip-path: inset(0 10px 0 0);
    mask-image: none;
  }

  body[data-season="neige"] .menu-frame::after {
    top: 182px;
    background-image: url('/images/assets/shared/panel-right.png');
    background-size: 23px 5px;
    background-repeat: repeat-y;
  }

  .menu-top {
    position: relative;
    background-image: var(--menu-top-left), var(--menu-top-right), var(--menu-top-edge-right), var(--menu-snow-bridge), var(--menu-panel-texture), var(--menu-panel-fill), var(--menu-rim), var(--menu-lower-pipe), var(--menu-upper-pipe);
    background-position: left top, right bottom, right top 80px, left top 98px, left bottom, left bottom, var(--menu-rim-position), var(--menu-lower-position), var(--menu-upper-position);
    background-size: var(--menu-top-left-size), var(--menu-top-right-size), 23px 35px, calc(100% - 10px) 20px, calc(100% - 10px) 6px, calc(100% - 10px) 6px, var(--menu-rim-size), var(--menu-lower-size), var(--menu-upper-size);
  }

  body:not([data-season="neige"]) .menu-top {
    clip-path: polygon(0 0, 100% 0, 100% 105px, calc(100% - 10px) 105px, calc(100% - 10px) 100%, 0 100%);
  }

  .menu-top::after {
    content: "";
    position: absolute;
    top: 4px;
    left: -3px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    box-shadow: var(--menu-outline-shadow);
    pointer-events: none;
  }

  body:not([data-season="neige"]) .menu-header {
    position: relative;
    background-image: var(--menu-header-left);
    background-position: left top;
    background-size: 33px 48px;
  }

  td[background*="tube-middle.png"] {
    position: relative;
    background-image: linear-gradient(to bottom, #646464 0 134px, transparent 134px);
  }

  td[background*="tube-middle.png"]::before {
    content: "";
    position: absolute;
    top: 134px;
    bottom: 0;
    left: 0;
    width: 60px;
    background: url('/images/assets/shared/tube-middle.png') left top repeat-y;
    filter: var(--menu-art-shadow);
    clip-path: inset(0 -5px 0 -5px);
    pointer-events: none;
  }

  td[background*="tube-middle.png"]>img[src*="tube-middle"] {
    visibility: hidden;
  }

  body:not([data-season="neige"]) .menu-bottom {
    position: relative;
    background-image:
      url('/images/assets/shared/panel-left.png'),
      url('/images/assets/shared/panel-right.png'),
      var(--menu-panel-texture),
      var(--menu-panel-fill);
    background-position: left top, right top, left top, left top;
    background-size: 33px 3px, 23px 3px, calc(100% - 10px) 9px, calc(100% - 10px) 9px;
    background-repeat: no-repeat;
  }

  body:not([data-season="neige"]) .menu-bottom::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--menu-footer-left), var(--menu-footer-right), var(--menu-footer-middle);
    background-position: left top, right top, var(--menu-footer-middle-position);
    background-size: 33px 29px, 23px 29px, var(--menu-footer-middle-size);
    background-repeat: no-repeat;
    mask-image: linear-gradient(to bottom, transparent 0, #000 1px);
    pointer-events: none;
  }
}

@media (max-width: 850px) {
  .menu-panel-fill {
    display: none;
  }

  body {
    overflow-x: hidden;
  }

  body>table[width="750"] {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin: 0 auto !important;
  }

  body>table[width="750"]>tbody,
  body>table[width="750"]>tbody>tr:first-child {
    display: block;
  }

  body>table[width="750"]>tbody>tr:not(:first-child),
  body>table[width="750"]>tbody>tr:first-child>td:first-child {
    display: none;
  }

  body>table[width="750"]>tbody>tr:first-child>td {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
  }

  body>table[width="750"]>tbody>tr:first-child>.menu-column {
    display: block;
    padding: 12px 16px;
    background: #454545;
    border-bottom: 2px solid #aaf104;
  }

  .menu-home,
  .menu-top {
    display: none;
  }

  .menu-header {
    width: 100%;
    max-width: 560px;
    height: auto;
    padding: 0 0 8px;
    margin: 0 auto;
    background: none;
  }

  .menu-logo {
    width: 104px;
  }

  .site-nav-shell {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #454545;
  }

  .site-nav-shell>summary {
    display: block;
    padding: 10px 12px;
    border: 1px solid #aaf104;
    border-radius: 5px;
    color: #aaf104;
    background: #303030;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }

  .site-nav-shell>summary::before {
    content: '\2630\00a0';
  }

  .site-nav {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 8px 0 0;
    background: #454545;
  }

  .site-nav>tbody,
  .site-nav>tbody>tr {
    display: block;
    width: 100%;
  }

  #sidenav {
    display: block;
    box-sizing: border-box;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 8px 12px;
    line-height: 1.8;
    text-align: center;
    background: #454545;
  }

  #sidenav hr {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3) {
    display: block;
    max-width: 560px;
    padding: 0 10px 20px;
    margin: 0 auto;
  }

  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table {
    width: 100% !important;
    table-layout: fixed;
  }

  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table:first-child,
  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table:first-child>tbody,
  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table:first-child>tbody>tr {
    display: block;
  }

  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table:first-child td:first-child,
  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table:first-child td:last-child,
  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table:first-child td[background]>img {
    display: none;
  }

  body>table[width="750"]>tbody>tr:first-child>td:nth-child(3)>table:first-child td[background] {
    display: block;
    width: 100%;
    background: none;
  }

  .incruste {
    position: static;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    gap: 4px;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    margin: 0;
  }

  .incruste>.counter {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }

  .tubeverti {
    width: 100%;
    padding-bottom: 20px;
    background: none;
  }

  .tubeverti>table {
    width: 100% !important;
    table-layout: fixed;
  }

  .tubeverti>table.cel,
  .tubeverti>table.cel>tbody,
  .tubeverti>table.cel>tbody>tr,
  .tubeverti>table.cel>tbody>tr>td {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
  }

  .tubeverti>table.cel>tbody>tr>td {
    min-width: 0;
  }

  .tubeverti img,
  .tubeverti video,
  .tubeverti embed,
  .tubeverti iframe {
    max-width: 100%;
    height: auto;
  }

  .tubeverti video {
    aspect-ratio: 468 / 80;
  }

  #searchid,
  .searchBox,
  .searchBox form,
  .searchBox form table {
    max-width: 100%;
  }

  #query {
    box-sizing: border-box;
    width: min(100%, 220px);
  }

  .game_row,
  .game_row>td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .game_row .game_preview img {
    max-width: 100%;
    height: auto;
  }

  .game_row .game_info {
    padding: 10px;
  }

  .modelViewer {
    max-width: 100%;
  }

  #ajout,
  #ajout>tbody,
  #ajout>tbody>tr,
  #ajout>tbody>tr>td,
  #form1>table,
  #form1>table>tbody,
  #form1>table>tbody>tr,
  #form1>table>tbody>tr>td,
  #form1>table table,
  #form1>table table>tbody,
  #form1>table table>tbody>tr,
  #form1>table table>tbody>tr>td,
  .cheat-list,
  .cheat-list>tbody,
  .cheat-list>tbody>tr,
  .cheat-list>tbody>tr>td {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
  }

  #ajout textarea,
  #form1 textarea,
  #form1 input[type="text"] {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
  }

  #ajout>tbody>tr>td[height],
  #form1>table>tbody>tr>td[height] {
    height: auto !important;
  }

  #ajout>tbody>tr>td,
  #form1>table>tbody>tr>td {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #form1>table table>tbody>tr>td {
    text-align: left;
  }

  .cheat-list>tbody>tr:nth-child(2) {
    display: none;
  }

  .cheat-list>tbody>tr:not(:first-child) {
    margin: 8px 0;
    border: 1px solid #aaa;
  }

  .cheat-list>tbody>tr>td {
    overflow-wrap: anywhere;
  }

}

/* Shared Blade shell. Page content is independent from the decorative frame. */
.site-shell {
  display: grid;
  grid-template-columns: 60px max-content 558px;
  width: max-content;
  min-width: 750px;
  margin: 0 auto;
  align-items: stretch;
}

.site-tube { position: relative; min-width: 0; }
.site-tube::before {
  content: '';
  position: absolute;
  inset: 134px 0 89px;
  background: url('/images/assets/shared/tube-middle.png') left top / 60px 40px repeat-y;
  filter: var(--site-art-shadow);
}
.site-tube img { display: block; position: relative; width: 60px; }
.site-tube img:last-child { position: absolute; bottom: 32px; left: 0; }

.site-shell .menu-column { display: flex; flex-direction: column; min-width: 132px; }
.site-shell .menu-frame { flex: 1 1 auto; min-width: 0; }
.site-shell .menu-bottom { flex: 0 0 29px; }
.site-shell .site-nav-shell { flex: 0 0 auto; }
.site-shell .site-nav {
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 132px;
  box-sizing: border-box;
  padding: 2px 10px 2px 34px;
  margin: 0;
  white-space: nowrap;
}
.site-shell .site-nav a { display: inline-block; align-self: flex-start; }
.site-shell .site-nav hr { width: 65%; margin: 7px 0 7px 6px; border: 0; border-top: 2px solid #aaf104; }
.site-shell .site-nav img { vertical-align: bottom; }

.site-main { min-width: 0; }
.site-header {
  position: relative;
  height: 111px;
  background-image: url('/images/assets/normal/frame-top-left.png'), url('/images/assets/normal/frame-top-right.png');
  background-position: left top, right top;
  background-size: 128px 108px, 119px 108px;
  background-repeat: no-repeat;
  filter: var(--site-art-shadow);
}
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 128px;
  right: 119px;
  background: url('/images/assets/shared/frame-top-middle.png') left top / 5px 108px repeat-x;
}
body[data-season="neige"] .site-header {
  background-image: url('/images/assets/neige/frame-top-left.png'), url('/images/assets/neige/frame-top-right.png');
}
.site-header .incruste { position: absolute; z-index: 1; top: 54px; right: auto; left: 128px; width: 350px; height: 21px; margin: 0; padding: 0; }
.site-header .counter { list-style: none; white-space: nowrap; }
.site-header .counter strong { color: #fc0; font-weight: normal; }
.site-main .tubeverti { min-height: calc(100% - 111px); padding-bottom: 60px; }
.site-toolbar { display: flex; align-items: flex-start; justify-content: space-around; width: 93%; margin: 0; min-height: 37px; }
.site-toolbar a, .site-toolbar button { display: inline-flex; justify-content: center; align-items: center; width: 31%; height: 30px; }
.site-toolbar a:first-child { width: 23%; }
.site-toolbar a:nth-child(n+3), .site-toolbar button { width: 23%; }
.site-toolbar button { padding: 0; border: 0; background: none; cursor: pointer; }
.site-toolbar img { object-fit: contain; }
.site-content { width: 93%; }
.site-content.home-content { position: relative; }
.site-content.home-content::before { content: ''; position: absolute; top: -16px; bottom: 0; left: 0; border-left: 1px dashed #ccc; pointer-events: none; }
.site-page { width: 100%; margin: 0; }
.site-page p { background-color: transparent; }
.site-bottom-art, .section-divider { display: block; max-width: 100%; height: auto; margin: 12px auto; text-align: center; }
.site-bottom-art img { max-width: 100%; height: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-shell #searchid { margin: 0 auto; }
.site-shell #searchid.visible { height: 42px; }
.site-shell .searchBox { display: flex; justify-content: center; gap: 8px; padding: 5px; }
.site-shell .searchBox input { box-sizing: border-box; width: min(280px, 65%); }
.site-shell .searchBox button, .guestbook-form button, .cheat-form button, .found-game-form button { color: #ccc; background: #333; border: 1px solid #aaa; cursor: pointer; }

.page-panel { box-sizing: border-box; width: 100%; padding: 8px 0; }
.page-heading, .home-page > h1 { text-align: center; }
.page-heading img { display: block; max-width: 100%; height: auto; margin: 8px auto; }
.home-page > h1 { font-size: 18px !important; }
.home-page { padding-left: 3px; padding-right: 2px; }
.home-mascot { float: right; max-width: 35%; height: auto; margin-left: 8px; }
.home-intro, .home-game-count { clear: both; text-align: center; color: #fc0; font-weight: bold; }
.home-game-count { font: 14px Verdana, sans-serif; color: #eee; }
.home-game-count strong { padding: 3px; background: #565656; border: 1px solid #505050; border-radius: 3px; }
.home-notes { clear: both; padding-left: 20px; line-height: 1.5; }
.home-notes li { margin: 8px 0; }
.home-note-details { display: block; margin-top: 8px; }
.home-note-details img { float: left; margin-right: 5px; }
.home-help { margin: 15px auto; width: 95%; }
.home-help h2, .adult-page h1, .cheat-directory-heading { padding: 5px; color: #fc0; background: #000; border: 1px solid #ccc; text-align: center; }
.home-help h2 { margin: 0; }
.home-help-body, .adult-message { padding: 10px; background: #555; border: 1px solid #ccc; text-align: center; }
.home-flash, .adult-message img { float: left; margin: 0 8px 8px 0; }
.home-test { position: relative; display: block; margin: 10px auto; }
.home-credit { display: grid; grid-template-columns: 25% 50% 25%; align-items: center; width: 92%; margin: 0 auto; text-align: center; }
.home-credit img { max-width: 100%; height: auto; }
.home-credit img:first-child { justify-self: end; }
.home-credit img:last-child { justify-self: start; }
.home-credit p { color: #66ff07; font: bold 11px Arial, Helvetica, sans-serif; }
.home-credit em { color: #fc0; font-style: italic; }
.list-pagination, .list-pages, .back-to-top { text-align: center; margin: 14px auto; }
.list-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.list-pages a { margin: 0; }
.game-list { padding-bottom: 0; }
.game-list .game-entry:last-child { margin-bottom: 0; }
.game-list .game-entry:last-child .section-divider { margin-bottom: 0; }
.game-list + .list-pagination { margin: 4px auto 0; }
.game-list + .list-pagination + .list-pages { margin: 0 auto; }
.game-entry { margin: 10px 0; }
.game-entry .game_type { text-align: right; }
.game-entry .game_row { display: grid; grid-template-columns: 58% 42%; }
.game-entry .game_preview, .game-entry .game_info { border-left: 1px dashed #ccc; padding: 3px; box-sizing: border-box; }
.game-entry .game_preview img { max-width: 100%; height: auto; }
.game-entry .game_info { text-align: justify; overflow-wrap: anywhere; }
.game-entry .game-play { display: block; width: 96px; height: 45px; margin: 8px auto; background: url('/images/assets/shared/gris.png') center / contain no-repeat; filter: var(--site-art-shadow); }
.game-entry .game-play:hover, .game-entry .game-play:focus-visible { background-image: url('/images/assets/shared/vert.png'); }
.game-entry .playcount_td { margin: 0; padding: 4px; }
.game-entry .playcount_td img { vertical-align: middle; }

.guestbook-page { padding: 1px 0 8px 8px; }
.guestbook-page > p:first-of-type { margin-top: 16px; }
.guestbook-summary { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 26px 0 0; padding: 2px 2px 3px; text-align: center; background: #000; color: #fc0; border: 1px solid #ccc; }
.guestbook-summary .pagination { line-height: 14px; }
.guestbook-summary-art, .guestbook-summary-art img { display: block; width: 43px; height: 118px; }
.guestbook-summary p { margin: 4px 0 0; color: #fc0; background: #000; font-size: 10px; font-weight: bold; line-height: 14px; }
.guestbook-comment { border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
.guestbook-comment header { padding: 7px 20px; background: #333; }
.guestbook-comment p { margin: 0; padding: 5px 25px; background: #eee; color: #000; font: 18px MonoCorsi, 'Brush Script MT', cursive; white-space: pre-wrap; }
.guestbook-form { box-sizing: border-box; width: 80%; margin: 14px auto 0; background: #f6f6f6; color: #000; border: 1px solid #ccc; }
.guestbook-form-heading { padding: 6px 0 4px; background: #000; text-align: center; }
.guestbook-form-heading img { display: block; width: 98px; height: 146px; margin: 0 auto; }
.guestbook-form h2 { margin: 3px 0 0; color: #fc0; font-size: 12px !important; }
.guestbook-form-fields { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 5px; text-align: center; }
.guestbook-name-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.guestbook-name-row label { font-weight: bold; }
.guestbook-form input { box-sizing: border-box; width: 164px; height: 17px; }
.guestbook-form textarea { box-sizing: border-box; width: 256px; max-width: 100%; height: 79px; }
.guestbook-form .g-recaptcha { transform: scale(.85); transform-origin: top center; }
.guestbook-form button { padding: 1px 5px; color: #000; background: #ccc; border: 1px solid #000; font: bold 11px Arial, sans-serif; }

.cheats-page { padding-left: 8px; }
.cheat-form { box-sizing: border-box; width: 82%; margin: 12px auto; background: #eee; color: #000; border: 1px solid #ccc; }
.cheat-form-intro { display: grid; grid-template-columns: 33% 67%; min-height: 111px; align-items: center; background: #000; color: #eee; text-align: center; }
.cheat-form-intro img { display: block; justify-self: center; align-self: end; margin-bottom: 4px; }
.cheat-form-intro h2 { margin: 0; color: #fc0; font-size: 12px !important; line-height: 14px; }
.cheat-form-intro p { margin: 0; background: #000; line-height: 14px; }
.cheat-form-fields { border-top: 1px solid #ccc; }
.cheat-form-row { display: grid; grid-template-columns: 33% 67%; align-items: start; box-sizing: border-box; min-height: 24px; padding: 3px; border-bottom: 1px dashed #666; }
.cheat-form-row label { padding-right: 4px; font-weight: bold; text-align: right; }
.cheat-form input, .cheat-form textarea { box-sizing: border-box; max-width: 100%; margin: 0; }
.cheat-form input { width: 156px; height: 17px; }
.cheat-form textarea { width: 256px; height: 90px; }
.cheat-form-submit { display: grid; justify-items: center; padding: 8px 0 6px; border-bottom: 1px dashed #666; }
.cheat-form-submit .g-recaptcha { transform: scale(.85); transform-origin: top center; }
.cheat-form button { width: 75px; margin-top: 3px; padding: 1px 0; font: bold 12px Arial, sans-serif; }
.form-success { color: #fc0; font-weight: bold; text-align: center; }
.found-game-page { padding-left: 8px; }
.found-game-form { box-sizing: border-box; width: min(100%, 450px); margin: 14px auto; border: 1px solid #ccc; background: #eee; color: #000; }
.found-game-form h2 { margin: 0; padding: 12px 8px; background: #000; color: #fc0; text-align: center; font-size: 13px !important; }
.found-game-fields { display: grid; gap: 6px; padding: 14px; }
.found-game-fields label { font-weight: bold; }
.found-game-fields input { box-sizing: border-box; width: 100%; min-width: 0; padding: 5px; }
.found-game-fields .g-recaptcha { margin: 8px auto 0; max-width: 100%; }
.found-game-fields button { justify-self: center; margin-top: 6px; padding: 5px 10px; }
.form-field-error { margin: 0; color: #a00000; }
.cheat-directory-heading { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 271px; align-items: center; height: 165px; padding: 3px; }
.cheat-directory-heading h2 { margin: 0; font-size: 12px !important; }
.cheat-directory-heading p { margin: 0; background: #000; font-weight: bold; }
.cheat-directory-heading img { display: block; width: 271px; height: 154px; }
.cheat-list { width: calc(100% - 1px); margin-left: 1px; table-layout: fixed; border-collapse: collapse; overflow-wrap: anywhere; }
.cheat-title-column { width: 19.2%; }
.cheat-codes-column { width: 26.1%; }
.cheat-list th { box-sizing: border-box; height: 23px; padding: 2px 3px; color: #fc0; background: #000; border: 1px solid #ccc; text-align: center; font-size: 12px; }
.cheat-list td { padding: 3px; background: #333; border-right: 1px dashed #ccc; border-bottom: 1px solid #ccc; vertical-align: top; font-size: 12px; }
.cheat-list td:first-child { border-left: 1px solid #ccc; vertical-align: middle; }
.cheat-list td:last-child { border-right: 1px solid #ccc; }
.cheat-list tbody tr:nth-child(3n) td { background: #555; }

@media (min-width: 851px) {
  .site-header { filter: var(--site-art-shadow); }
  .site-tube img:first-child, .site-tube img:last-child { filter: var(--menu-art-shadow); }
}

@media (max-width: 850px) {
  .site-shell { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
  .site-tube { display: none; }
  .site-shell .menu-column { box-sizing: border-box; display: block; width: 100%; padding: 12px 16px; background: #454545; border-bottom: 2px solid #aaf104; }
  .site-shell .site-nav-shell { width: 100%; max-width: 560px; margin: 0 auto; }
  .site-shell .site-nav { display: flex; width: 100%; min-width: 0; margin: 8px 0 0; padding: 8px 12px; white-space: normal; text-align: center; line-height: 1.8; background: #454545; }
  .site-shell .site-nav a { align-self: center; }
  .site-shell .site-nav hr { margin: 7px auto; }
  .site-shell .menu-bottom { display: none; }
  .site-main { max-width: 560px; margin: 0 auto; padding: 0 10px 20px; }
  .site-header { height: auto; background: none !important; filter: none; }
  .site-header::before { display: none; }
  .site-header .incruste { position: static; width: 100%; justify-content: center; }
  .site-toolbar { margin: 0 auto; }
  .site-main .tubeverti { min-height: 0; padding-bottom: 20px; }
  .site-content { width: 100%; }
  .site-content.home-content::before { display: none; }
  .site-page { width: 100%; }
  .game-entry .game_row { display: block; }
  .game-entry .game_preview, .game-entry .game_info { width: 100%; }
  .guestbook-page { padding-left: 0; }
  .guestbook-form { width: min(100%, 408px); }
  .cheats-page { padding-left: 0; }
  .found-game-page { padding-left: 0; }
  .cheat-directory-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 45%); height: auto; min-height: 130px; }
  .cheat-directory-heading img { width: 100%; height: auto; }
}
@media (max-width: 600px) {
  .found-game-fields .g-recaptcha { transform: scale(.85); transform-origin: top center; margin-bottom: -12px; }
  .cheat-form { width: 100%; }
  .cheat-directory-heading { grid-template-columns: 1fr; justify-items: center; padding: 8px; }
  .cheat-directory-heading img { width: min(271px, 70%); }
  .cheat-list, .cheat-list tbody, .cheat-list tr, .cheat-list td { display: block; }
  .cheat-list thead { display: none; }
  .cheat-list tr { margin: 8px 0; border: 1px solid #ccc; }
  .cheat-list td { border: 0 !important; vertical-align: top; }
  .cheat-list td:empty { display: none; }
  .cheat-list td:first-child { border-bottom: 1px dashed #ccc !important; }
  .cheat-list td:not(:last-child):not(:first-child) { border-bottom: 1px dashed #ccc !important; }
  .cheat-list td:not(.cheat-title):not(:empty)::before { display: block; color: #fc0; font-weight: bold; }
  .cheat-list .cheat-codes:not(:empty)::before { content: 'CheatCodes'; }
  .cheat-list .cheat-tips:not(:empty)::before { content: 'Astuces à connaitre'; }
}
