/* =========================
   MOBILE OVERRIDES (GLOBAL)
========================= */
@media (max-width: 768px) {

  /* =========================
     BASE
  ========================= */
  html {
  font-size: clamp(14px, 3.5vw, 16px);
  }

  body {
  line-height: 1.5;
  }

  main {
    padding: 10px;
  }

  /* =========================
     HEADER / NAV
  ========================= */
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #111;
  }

  .custom-wrapper {
    flex-direction: column;
    width: 100%;
  }

  .home-menu {
    width: 100%;
    text-align: center;
  }

  .pure-menu-horizontal {
    display: block !important;
  }

  .pure-menu-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .pure-menu-item {
    width: 100%;
  }

  .pure-menu-link {
    padding: 12px 16px;
    font-size: 16px;
  }

  #language-select {
    width: 100%;
    margin: 10px 0;
    font-size: 16px;
  }

  .custom-toggle {
    display: block;
    position: absolute;
    right: 12px;
    top: 12px;
  }

  /* =========================
     GLOBAL CONTENT
  ========================= */
  .pure-g > [class*="pure-u"] {
    width: 100% !important;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
  }

  th, td {
    padding: 6px 8px;
  }

  /* =========================
     FOOTER
  ========================= */
  footer {
    padding: 15px;
    font-size: 13px;
    text-align: center;
  }

  #communityFooter {
    line-height: 1.6;
    word-break: break-word;
  }

  #communityFooter a {
    display: inline-block;
    margin: 4px;
  }

  /* =========================
     KEYS PAGE
  ========================= */
  .roundedWrapper {
    margin: 10px 0;
    padding: 12px;
  }

  h4 {
    font-size: 16px;
    line-height: 1.3;
  }

  .keyStarOptions {
    float: none !important;
    font-size: 1.2em;
    margin-bottom: 5px;
  }

  .roundedWrapper input[type="text"],
  .roundedWrapper input[type="file"],
  .roundedWrapper select {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 14px;
  }

  .roundedWrapper button {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    font-size: 15px;
  }

  .roundedWrapper table,
  .roundedWrapper tbody,
  .roundedWrapper tr,
  .roundedWrapper td {
    display: block;
    width: 100%;
  }

  .roundedWrapper table tr {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
  }

  .roundedWrapper table td {
    padding: 5px 0;
  }

  .warning {
    margin-top: 6px;
    font-size: 13px;
  }

  #importInstructions ol {
    padding-left: 18px;
  }

  #importInstructions li {
    margin-bottom: 6px;
  }

  #printFrame {
    display: none !important;
  }

  /* =========================
     ADMIN PAGE
  ========================= */
  #adminCenter {
    flex-direction: column !important;
  }

  #leftMenu {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 10px;
  }

  #editForm {
    width: 100%;
  }

  #leftMenu .pure-menu-heading {
    text-align: center;
    font-size: 16px;
  }

  #leftMenu ul li a {
    padding: 12px;
    font-size: 15px;
  }

  #passwordForm input,
  #passwordForm button {
    width: 100%;
    font-size: 15px;
  }

  #passwordForm fieldset {
    padding: 10px;
  }

  /* =========================
     API PAGE
  ========================= */
  #topPool {
    padding: 10px;
  }

  .poolWrapper {
    padding: 10px;
    margin-bottom: 12px;
  }

  .poolLabel {
    font-size: 1em;
    line-height: 1.4;
    padding: 6px;
    text-align: center;
  }

  .poolApi {
    font-size: 0.95em;
    padding: 8px;
    word-break: break-word;
  }

  .poolApi div {
    margin-bottom: 6px;
  }

  .poolApi a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #topPool svg {
    max-width: 100%;
    height: auto;
  }

  /* =========================
     GETTING STARTED PAGE
  ========================= */

  #holder {
    flex-direction: column !important;
  }

  #menu {
    min-width: 100% !important;
    width: 100%;
  }

  #menu .menuHeader {
    text-align: center;
    font-size: 1.1em;
  }

  .menuList > a {
    padding: 12px 16px;
    font-size: 15px;
  }

  #main {
    margin: 10px 0;
  }

  .miningOption {
    flex-direction: column;
    min-height: auto;
    padding: 20px 10px;
    text-align: center;
  }

  .miningOptionNum {
    font-size: 3em;
    padding: 0;
    width: auto;
    margin-bottom: 10px;
  }

  .miningOptionInstructions > div:first-child {
    font-size: 1.6em;
  }

  .miningOptionInstructions > div:last-child {
    font-size: 1.1em;
    margin-top: 10px;
  }

  #orHolder {
    margin: 10px 0;
  }

    /* =========================
     COIN INFO MODAL (mobile)
  ========================= */

  #coinInfoBackground {
    position: fixed;
    opacity: 0.8 !important;
  }

  #coinInfo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    min-height: 100%;
    margin-left: 0 !important;
    padding: 20px;
    overflow-y: auto;
  }

  #coinInfo > div:first-of-type {
    margin-top: 60px;
    margin-bottom: 30px;
    font-size: 1.5em;
  }

  #coinInfoRows {
    flex-direction: column;
    align-items: flex-start;
  }

  #coinInfoRowKeys,
  #coinInfoRowValues {
    padding: 0;
  }

  #coinInfoRowKeys {
    margin-bottom: 15px;
  }

  #coinInfoClose {
    position: fixed;
    top: 10px;
    right: 15px;
    font-size: 2.5em;
  }

  /* =========================
     HOME PAGE
  ========================= */

  #boxWelcome {
  margin: 14px;
  padding: 18px 12px;
  }

  #boxWelcome.pure-g {
    flex-direction: column;
  }

  #boxWelcome > .pure-u-1-3,
  #boxWelcome > .pure-u-2-3 {
    width: 100% !important;
    text-align: center;
  }

  #logoImg {
    width: 60%;
    margin: 20px auto 10px auto;
    display: block;
  }

  #welcomeText {
    font-size: 1.8em;
    margin: 15px 10px;
  }

  #welcomeItems {
    font-size: 1.1em;
    margin: 0 !important;
    padding: 0;
  }

  #welcomeItems > li {
    margin: 12px 0 !important;
  }

  #boxesLower {
    margin: 0;
  }

  #boxesLower > .pure-u-1-2 {
    width: 100% !important;
  }

  #boxesLower > .pure-u-1-2 > div {
    margin: 10px 0;
  }

  .boxStatsList {
    flex-direction: column;
    align-items: center;
  }

  .boxStatsList > div {
    width: 100%;
    max-width: none;
    padding: 12px;
    text-align: left;
  }

    .boxLowerHeader {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 10px;
  }

  /* =========================
     MINER STATS PAGE
  ========================= */

  #topCharts {
    padding: 10px;
  }

  .chartWrapper {
    padding: 10px;
  }

  .chartLabel {
    font-size: 1em;
    line-height: 1.4;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .chartLabel > div {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #topCharts svg {
    max-width: 100%;
    height: auto !important;
  }

  #boxesWorkers {
    margin: 0;
  }

  #boxesWorkers > div {
    flex-direction: column;
  }

  #boxesWorkers > div > div {
    margin: 10px 0;
  }

  .boxStatsList {
    flex-direction: column;
    align-items: center;
  }

  .boxStatsList > div {
    width: 100%;
    max-width: none;
    padding: 12px;
  }

  /* =========================
     MINING KEY PAGE
  ========================= */

  #miningKeyPage {
    margin: 10px;
  }

  #keyFrame {
    height: 90vh;
    border: 1px solid #ccc;
  }

  /* =========================
     PAYMENTS PAGE
  ========================= */

  .poolWrapper {
    padding: 10px;
  }

  .poolLabel {
    font-size: 1em;
    line-height: 1.4;
    text-align: center;
  }

  .poolMinerTable {
    overflow-x: auto;
  }

  .poolMinerTable table {
    min-width: 700px;
  }

  .block-cell {
    max-width: none;
    word-break: break-all;
  }

  table th,
  table td {
    padding: 6px 8px;
    font-size: 13px;
  }

  /* =========================
     STATS PAGE
  ========================= */

  #topCharts {
    padding: 10px;
  }

  #topCharts > .chartWrapper {
    margin-bottom: 12px;
  }

  /* Charts responsive */
  #topCharts svg,
  #bottomCharts svg {
    max-width: 100%;
    height: auto !important;
  }

  /* Stack stat boxes */
  #boxesLower {
    margin: 0;
  }

  #boxesLower > div {
    flex-direction: column;
  }

  #boxesLower > div > div {
    width: 100% !important;
    margin: 10px 0;
  }

  /* Block lists (min-width:600px fix) */
  .boxStatsList > div {
    min-width: auto !important;
    width: 100%;
  }

    /* =========================
     TBS PAGE
  ========================= */

  .poolMinerTable {
    overflow-x: auto;
  }

  .poolMinerTable table {
    min-width: 900px;
  }

  .poolLabel {
    font-size: 1em;
  }

    /* =========================
     WORKERS PAGE
  ========================= */

  /* Lookup bar stack */
  .poolLabel > span {
    float: none !important;
    display: block;
    margin-bottom: 10px;
    text-align: center;
  }

  .poolLabel input,
  .poolLabel button {
    width: 100%;
    margin-top: 6px;
    font-size: 14px;
  }

  /* Workers table scroll */
  .poolMinerTable {
    overflow-x: auto;
  }

  .poolMinerTable table {
    min-width: 700px;
  }

  /* =========================
   VERY SMALL PHONES (iPhone)
  ========================= */
  @media (max-width: 430px) {

  main {
    padding: 10px;
  }

  #logoImg {
    width: 75%;
  }

  #welcomeText {
    font-size: 1.6em;
  }

  .pure-menu-link {
    padding: 12px;
  }

  .boxStats {
    margin: 14px 0;
  }
}


}