/**
 * Neskici — mobile chrome override for play pages (/oyna/{slug}.html)
 * Theme: temalar/default4/
 *
 * EmulatorJS-safe: do not restyle #game > * / canvas; keep player shell height.
 * Skip-ad: #reklam > font > a
 * Header: beat theme 960×138 + floats (body-prefixed + !important).
 * CF caches CSS 7d — oyna.tpl must use ?v= cache-bust when this file changes.
 */

@media only screen and (max-width: 768px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .wrapper,
  body .footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /*
   * Theme (style.css):
   *   .headerbg { height:138px; background:url(headerbg.png) repeat-x }
   *   .headerwrapper { width:960px; height:138px }
   *   .topblackwrapper { height:38px }
   *   .header { height:100px }
   *   .login { float:left }  .login a { float:left }
   *   #search { float:right }
   *   .logo { float:left }  a.headeritem { float:right; width:74px }
   * Kill fixed sizes + floats; solid fills (strip ends mid-screen on phones).
   */
  body .headerbg,
  body div.headerbg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-bottom: 1px solid #313131 !important;
    background: #eeeeee !important;
    background-color: #eeeeee !important;
    background-image: none !important;
    background-size: auto !important;
  }

  body .headerwrapper,
  body div.headerwrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body .topblackwrapper,
  body div.topblackwrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 8px 8px 8px !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: center !important;
    background: #444444 !important;
    background-color: #444444 !important;
    background-image: none !important;
  }

  body .login,
  body .topblackwrapper .login {
    float: none !important;
    clear: both !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-box-align: stretch !important;
    -webkit-align-items: stretch !important;
    align-items: stretch !important;
    -webkit-box-pack: start !important;
    -webkit-justify-content: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body .login a,
  body .login a.main,
  body .login a.lgn,
  body .login a.rgst,
  body .login a.lbtn,
  body .login a.exit,
  body .login a.dashboard,
  body .login a.admn,
  body .login a.fcbk {
    float: none !important;
    clear: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
    padding: 10px 12px 10px 30px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  body #search,
  body .topblackwrapper #search {
    float: none !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body #search form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body #search input[type="text"],
  body #search input.query,
  body #search #ara {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  body .header,
  body div.header {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 8px 12px 8px !important;
    position: relative !important;
    text-align: center !important;
    overflow: hidden !important;
    clear: both !important;
    box-sizing: border-box !important;
    background: #eeeeee !important;
    background-color: #eeeeee !important;
    background-image: none !important;
  }

  body .logo,
  body .header .logo {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 8px auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  body .logo img,
  body .header .logo img {
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 auto !important;
  }

  body a.headeritem,
  body .header a.headeritem {
    float: none !important;
    clear: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: 46% !important;
    min-width: 0 !important;
    max-width: 160px !important;
    margin: 4px 1% !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: #414141 !important;
    box-sizing: border-box !important;
  }

  body a.headeritem img,
  body .header a.headeritem img {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
    margin: 0 auto 4px auto !important;
    border: none !important;
  }

  body a.headeritem .clearfix,
  body .header a.headeritem .clearfix {
    display: none !important;
    float: none !important;
    clear: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .headerbg .clearfix,
  body .headerwrapper .clearfix,
  body .header > .clearfix {
    clear: both !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Category → game “gap” is the #reklam preroll ad slot (often plays ads).
   * Do NOT hide/cap/collapse that slot. Only horizontal fit; leave height alone.
   */
  .catarea {
    box-sizing: border-box !important;
  }

  .cats li {
    width: 46% !important;
    margin: 2px 2% 2px 0 !important;
  }

  /* padding only — do not touch theme min-height (ad/layout intent) */
  .container {
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  /* ---- Layout around the player (not the player itself) ---- */

  .gameinfo {
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .gamebackground {
    width: 100% !important;
    max-width: 100% !important;
    /* no overflow:hidden */
  }

  /* Width only — never height/max-height/unfilled hide on #reklam ads */
  #reklam {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #reklam ins.adsbygoogle {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /*
   * "Reklamı Geç" — live: <font size="1" style="color:red…"><a … onclick="goster()">
   * size=1 is tiny on phones; enlarge this control only (not Discord link in #reklam).
   */
  #reklam > font {
    display: inline-block !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 10px 0 !important;
    vertical-align: middle !important;
  }

  #reklam > font > a {
    display: -webkit-inline-box !important;
    display: -webkit-inline-flex !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1.25 !important;
    color: #c00 !important;
    text-decoration: underline !important;
    padding: 14px 20px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: rgba(204, 0, 0, 0.25);
    cursor: pointer !important;
  }

  /*
   * Player shell (parent of #game).
   * Live markup: <div style="width:780px;height:500px;max-width:100%"><div id="game">
   * Keep explicit height (not height:auto). #game fills the shell only —
   * never style #game > * / canvas (that broke EmulatorJS in v1).
   */
  #ikinci > div {
    width: 100% !important;
    max-width: 100% !important;
    /* Keep live's 500px box — do not use height:auto (breaks EJS measure) */
    height: 500px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Fill shell only. Never style #game > * or canvas. */
  #game {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }

  /* Action column — was 144×492 float:right beside player */
  .gamebuttons {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 8px 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -webkit-box-pack: justify !important;
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
  }

  .gamebuttons > div {
    -webkit-box-flex: 1 !important;
    -webkit-flex: 1 1 46% !important;
    flex: 1 1 46% !important;
    margin: 3px 1% !important;
    box-sizing: border-box !important;
  }

  .gamebuttons > div > img,
  .gamebuttons a img {
    max-width: 100% !important;
    height: auto !important;
  }

  .gamebutton {
    text-align: center !important;
    padding-right: 0 !important;
  }

  .gamebutton a,
  .played {
    padding: 12px 6px 12px 28px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .gamedesc {
    box-sizing: border-box !important;
  }

  .gamedesc img,
  .emptykeyarea img,
  .emptykey img {
    max-width: 100% !important;
    height: auto !important;
  }

  .emptykeyarea {
    display: inline-block !important;
    margin: 2px !important;
  }

  .gameinfo_left,
  .gameinfo_right {
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .commentdetail {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .commentdetailright {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
  }

  #addcomment_form input,
  #addcomment_form textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #addcomment_form input[name="name"],
  #addcomment_form input[name="captcha_answer"] {
    float: none !important;
    width: 100% !important;
    margin: 4px 0 !important;
  }

  .gameinfo_right .item {
    margin: 4px !important;
  }

  .adv300x250,
  .gamedesc ins.adsbygoogle {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  .footerblock {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  .speedbar {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* Narrow desktop: fluid chrome + stack comments; leave player shell height alone */
@media screen and (min-width: 769px) and (max-width: 980px) {
  .headerbg,
  .headerwrapper,
  .wrapper,
  .footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .headerbg,
  .headerwrapper {
    height: auto !important;
  }

  .gameinfo {
    width: auto !important;
    max-width: calc(100% - 160px) !important;
  }

  .gamebuttons {
    width: 144px !important;
  }

  .gameinfo_left,
  .gameinfo_right {
    width: 100% !important;
    float: none !important;
  }
}