/* Responsive layout for the original T4C artwork. Desktop styles remain unchanged. */
@media (max-width:1100px) {
  html { overflow-x:clip; }
  body { min-width:0!important; background-position:center top; background-attachment:scroll; }
  #wrapper { width:100%; min-width:0; }
  #wrapper .container { width:100%!important; max-width:100%; margin:0 auto!important; left:auto!important; box-sizing:border-box; }
  #header { position:relative!important; height:auto!important; min-height:0; background-color:#08070b; border-bottom:1px solid #80633c; }
  #logo { position:relative!important; left:auto!important; top:auto!important; margin:0 auto!important; width:min(340px,94vw); height:min(153px,42vw); background-position:center top; background-size:contain; }
  #account-wrapper { position:relative!important; right:auto; width:auto; height:auto; text-align:center; margin:0 12px 14px; }
  #account-wrapper:empty { display:none; }
  #account-wrapper .avatar { display:none; }
  #account-wrapper .account-info,#account-wrapper .account-credits { margin:5px 0; }
  #account-wrapper .account-info .name a { font-size:16px; }
  #server-status-wrapper { position:relative!important; top:auto!important; right:auto; width:auto; padding:4px 8px 12px; }
  #server-status-wrapper ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; }
  #server-status-wrapper li { float:none; margin:0; display:flex; align-items:center; gap:5px; }
  #server-status-wrapper img.server-icon { position:static; width:23px; height:auto; }
  #server-status-wrapper .server-status { line-height:24px; margin:0; font-size:11px; }
  #navigation { position:relative!important; top:auto!important; right:auto; width:100%!important; padding:8px; box-sizing:border-box; z-index:14; background:#14101c; }
  #navigation > ul { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; }
  #navigation > ul > li { float:none; position:static; flex:0 1 118px; }
  #navigation .navigation-item-container { position:static; width:auto; height:auto; }
  #navigation > ul > li > .navigation-item-container > a { position:relative; width:auto; padding:12px 5px; min-height:20px; background-size:100% 100%; font-size:12px; }
  #navigation ul li a span { font-size:inherit!important; }
  #navigation .navigation-item-container:hover > .drop-down { display:none; }
  #navigation .navigation-item-container.mobile-menu-open > .drop-down { display:block!important; }
  #navigation ul li .drop-down { position:absolute!important; top:100%!important; left:8px!important; right:8px!important; width:auto!important; height:auto!important; max-height:65vh; overflow:auto; background:#171225; border:1px solid #9c7743; padding:10px; box-sizing:border-box; }
  #navigation .drop-down .content-wrap { width:100%; height:auto; padding:0; margin:0; }
  #navigation .first-drop-down { display:none; }
  #navigation .second-drop-down { position:static!important; display:block!important; width:auto!important; height:auto!important; margin:0!important; padding:4px 0!important; border-bottom:1px solid #55415d; }
  #navigation .drop-down ul,#navigation .drop-down li { float:none!important; width:auto!important; height:auto!important; }
  #navigation .drop-down a { position:static!important; width:auto!important; min-height:24px; padding:10px!important; text-align:left; background:none; }
  #ornate-frame,#ornate-frame-left,#ornate-frame-right,#ornate-frame-inner,#ornate-frame-inner-left,#ornate-frame-inner-right,#featured-container { display:none!important; }
  .ornate-frame-links { display:flex; align-items:center; justify-content:space-around; gap:8px; position:relative!important; left:auto!important; top:auto!important; width:auto!important; margin:0 8px!important; padding:16px 8px; background:#171225 url('../images/content-background.jpg'); border-top:1px solid #9c7743; border-bottom:1px solid #9c7743; box-sizing:border-box; }
  .ornate-frame-links a { position:static!important; transform:none!important; flex:1; min-width:0; display:flex!important; align-items:center; justify-content:center; min-height:24px; }
  .ornate-frame-links img { max-width:100%; height:auto; }
  #ornate-frame-pieces { display:flex; justify-content:center; gap:24px; padding:12px; }
  .play-for-free-text,.play-for-free-text-inner,.download-text,.download-text-inner { position:static!important; margin:0!important; }
  #ornate-frame-pieces a { display:block; padding:10px 12px; border:1px solid #80633c; background:#171225; }
  .slider-wrapper { position:relative!important; top:auto!important; left:auto!important; margin:0 8px 12px!important; width:calc(100% - 16px)!important; height:auto!important; }
  #slider { width:100%!important; height:auto!important; min-height:0; aspect-ratio:980 / 310; background-size:100% auto!important; }
  #slider img { max-width:100%; width:100%!important; height:auto!important; }
  .nivo-controlNav { position:relative; bottom:auto; }
  #content,#content.inner,#content.account-page { position:relative!important; top:auto!important; left:auto!important; margin:0 8px!important; width:calc(100% - 16px)!important; min-height:0!important; padding:14px 14px 24px!important; border:1px solid #80633c; box-sizing:border-box; background-position:left top; background-size:auto!important; }
  #content > .left,#content.account-page > .left { width:100%!important; float:none!important; margin:0!important; box-sizing:border-box; }
  #content .left .article { margin:0 0 24px!important; }
  #content .left .article .middle,#content.inner .left .middle,#content .article-no-head .middle { left:0!important; top:0!important; width:100%!important; margin:0!important; padding:0!important; box-sizing:border-box; }
  #content .article .top,#content .article .top-featured,#content .article .bottom,#content .lightning-bolt { display:none!important; }
  #content .article-content-wrapper { margin:0!important; min-width:0; }
  #content .article-information-wrapper { margin:0; }
  #content .article-information-wrapper h4 { margin:12px 0 8px!important; }
  #content .article-information { margin:0; }
  #content .article-comments { float:none; margin:5px 0; display:block; }
  #content .left h4,#content .page-title { overflow-wrap:anywhere; }
  #content .desc,#content .desc2 { max-width:100%; width:auto; box-sizing:border-box; overflow-x:auto; }
  #content img { max-width:100%; height:auto; }
  #content p,#content td { overflow-wrap:break-word; }
  #content iframe { max-width:100%; }
  #sidebar { position:relative!important; top:auto!important; right:auto!important; width:100%!important; min-height:0!important; margin-top:28px; padding-top:22px; border-top:1px solid #80633c; box-sizing:border-box; }
  #sidebar .sidebar-section { max-width:100%; margin-bottom:22px; }
  #sidebar iframe { width:100%; max-width:500px; aspect-ratio:16 / 9; height:auto; }
  #content-footer { display:none!important; }
  #footer { position:relative!important; top:auto!important; bottom:auto!important; height:auto!important; margin-top:14px; padding:16px 12px; box-sizing:border-box; background:none; }
  #footer .credits { position:relative!important; bottom:auto!important; width:100%; height:auto; min-height:90px; background-size:contain; }
  #footer .credit-text { width:auto; max-width:600px; margin:14px auto 0; }
  .dataTables_wrapper { width:100%; overflow-x:auto; }
  .dataTables_wrapper .datatable { min-width:450px; }
  .dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate { float:none; margin:10px 0; }
  #content form table.display { display:flex; flex-direction:column; width:100%; }
  #content form table.display > tbody { display:block; order:0; }
  #content form table.display > tfoot { display:block; order:1; }
  #content form table.display tr,#content form table.display th,#content form table.display td { display:block; width:auto!important; white-space:normal; padding:7px 0; text-align:left; }
  #content form .placeholder,#content form .input-out { max-width:100%; box-sizing:border-box; }
  #content input[type=text],#content input[type=password],#content input[type=email],#content textarea,#content select { max-width:100%; box-sizing:border-box; font-size:16px; }
  #content form table.display input[type=text],#content form table.display input[type=password],#content form table.display input[type=email],#content textarea { width:100%; }
  #content input[name=captcha] { max-width:150px; }
  #content input[type=submit],#content button { min-height:40px; }
  #content .jstyling-select { max-width:100%; box-sizing:border-box; }
  .account-page .account-packages { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-page .account-intro { flex-wrap:wrap; }
  .account-page .account-balance { text-align:left; }
  .account-page .account-jumps { flex-wrap:wrap; }
  .mall-items { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .mall-items > li { float:none!important; width:auto!important; max-width:100%; margin:0!important; box-sizing:border-box; }
  .mall-items .item-preview { max-width:calc(100vw - 48px); }
  .mall-purchase-dialog { max-width:calc(100vw - 24px)!important; }
  #transactionOverview .inner-character { padding:12px!important; }
  #transactionOverview .jstyling-select { width:100%!important; }
  #transactionOverview .checkout-code input { width:calc(100% - 85px)!important; }
  #transactionOverview .checkout-total { max-width:100%; }
}
@media(max-width:480px) {
  #content,#content.inner,#content.account-page { padding:12px 10px 20px!important; }
  .account-page .account-packages { grid-template-columns:1fr; }
  #content .account-section-heading { flex-wrap:wrap; gap:10px; }
  .mall-items { gap:8px; }
  .mall-items .mall-title { font-size:12px; }
  .mall-items .item-preview-desc { overflow-wrap:anywhere; }
}
@media(max-width:1100px) {
  #navigation > ul > li { flex:0 1 calc((100% - 8px) / 3); max-width:140px; min-width:0; }
  #navigation ul li .navigation-item-container { width:100%!important; height:auto!important; }
  #navigation > ul > li > .navigation-item-container > a { min-height:48px; box-sizing:border-box; }
  .custom-directionNav { position:relative!important; display:flex; justify-content:space-between; width:auto!important; height:42px; margin:0 10px 10px; left:auto!important; top:auto!important; }
  .custom-directionNav .custom-prevNav,.custom-directionNav .custom-nextNav { position:relative!important; left:auto!important; right:auto!important; top:auto!important; width:40px; height:40px; background-size:contain; }
}
@media(max-width:1100px) {
  #navigation ul li .navigation-item-container { position:static!important; }
  #navigation .drop-down .content-wrap { position:static!important; left:auto!important; top:auto!important; width:100%!important; height:auto!important; padding:0!important; margin:0!important; }
  #navigation .first-drop-down { display:none!important; }
}
@media(max-width:1100px) {
  .download-text,#sidebar .sidebar-section:has(a[href*="t4c_launcher_setup.exe"]),a[href*="t4c_launcher_setup.exe"] { display:none!important; }
  #content .account-packages { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media(max-width:480px) {
  #content .account-packages { grid-template-columns:1fr!important; }
}