/* ── Desktop Layout ────────────────────────────────────────────
   Ativo SOMENTE em telas >= 900px. Mobile não é afetado por nada aqui.
   ────────────────────────────────────────────────────────────── */

#dt-sidebar,
#dt-right { display: none; }

@media (min-width: 900px) {

  /* ── Afasta o conteúdo central das barras laterais ── */
  body {
    padding-top: 1.5rem;
    padding-left: 220px;
    padding-right: 270px;
  }

  /* ── Esconde o header mobile (logo + ranking + configurações ficam na sidebar) ── */
  .header { display: none !important; }

  /* ── Remove o banner "Aprenda violão" do centro (está no painel direito) ── */
  .dt-hide-on-desktop { display: none !important; }

  /* ── Sidebar esquerda ── */
  #dt-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 220px;
    height: 100vh;
    background: #161616;
    border-right: 2px solid #252525;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
  }

  /* ── Painel direito ── */
  #dt-right {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    width: 270px;
    height: 100vh;
    background: #161616;
    border-left: 2px solid #252525;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    padding: 1.5rem 1.25rem;
  }

  /* ── Logo no topo da sidebar ── */
  .dt-logo {
    padding: 1.1rem 1rem;
    border-bottom: 2px solid #222;
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
    cursor: pointer;
  }
  .dt-logo img {
    height: 36px;
    width: 36px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .dt-logo-text {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
  }
  .dt-logo-text .kaiser { color: #888; }
  .dt-logo-text .play   { color: #F5A623; }

  /* ── Mini-card do usuário ── */
  .dt-user-mini {
    padding: .8rem 1rem .7rem;
    border-bottom: 2px solid #222;
    flex-shrink: 0;
  }
  .dt-user-name {
    font-size: .85rem;
    font-weight: 800;
    color: #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dt-user-lvl {
    font-size: .68rem;
    color: #F5A623;
    font-weight: 700;
    margin-top: .15rem;
  }

  /* ── Nav da sidebar ── */
  .dt-nav {
    flex: 1;
    padding: .4rem 0;
    display: flex;
    flex-direction: column;
  }
  .dt-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .72rem 1rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: #aaa;
    font-family: var(--font-body);
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
  }
  .dt-nav-item:hover {
    background: #1e1e1e;
    color: #f0f0f0;
  }
  .dt-nav-item.dt-nav-active {
    background: #1f1800;
    color: #F5A623;
    border-left-color: #F5A623;
  }
  .dt-nav-item.dt-nav-active-cyan {
    background: #001a22;
    color: #60dcff;
    border-left-color: #60dcff;
  }
  .dt-nav-item.dt-nav-active-green {
    background: #001a00;
    color: #7cdd7c;
    border-left-color: #7cdd7c;
  }
  .dt-nav-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: .75;
  }
  .dt-nav-item.dt-nav-active .dt-nav-icon,
  .dt-nav-item.dt-nav-active-cyan .dt-nav-icon,
  .dt-nav-item.dt-nav-active-green .dt-nav-icon { opacity: 1; }
  .dt-nav-icon-em {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
  }
  .dt-nav-divider {
    height: 1px;
    background: #222;
    margin: .35rem 0;
    flex-shrink: 0;
  }

  /* ── Painel direito: título de seção ── */
  .dt-right-title {
    font-family: var(--font-title);
    font-size: .78rem;
    font-weight: 700;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 1rem;
  }

  /* ── Painel direito: linhas de estatística ── */
  .dt-stats-list {
    display: flex;
    flex-direction: column;
  }
  .dt-stat-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .72rem 0;
    border-bottom: 1px solid #1e1e1e;
  }
  .dt-stat-icon {
    font-size: .95rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
  }
  .dt-stat-lbl {
    flex: 1;
    font-size: .76rem;
    color: #777;
    font-weight: 600;
  }
  .dt-stat-val {
    font-size: .95rem;
    font-weight: 900;
    color: #F5A623;
  }

  /* ── Mini-ranking no painel direito ── */
  .dt-mini-rank {
    display: flex;
    flex-direction: column;
  }
  .dt-mini-rank-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem 0;
    border-bottom: 1px solid #1a1a1a;
  }
  .dt-mini-rank-me {
    background: #1e1a0e;
    border-radius: 6px;
    padding: .42rem .4rem;
    margin: 0 -.4rem;
    border-bottom-color: transparent;
  }
  .dt-mini-rank-pos {
    font-family: var(--font-title);
    font-size: .72rem;
    font-weight: 900;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
  }
  .dt-mini-rank-name {
    flex: 1;
    font-size: .72rem;
    font-weight: 600;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dt-mini-rank-xp {
    font-size: .68rem;
    font-weight: 900;
    color: #F5A623;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Rodapé do painel direito (banner KaiserPlay) ── */
  .dt-right-footer {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 2px solid #222;
  }
  .dt-right-footer a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    text-align: center;
    transition: opacity .12s;
  }
  .dt-right-footer a:hover { opacity: .8; }
  .dt-lf-label {
    font-size: .82rem;
    font-weight: 700;
    color: #e0e0e0;
  }
  .dt-right-footer img {
    width: 82%;
    object-fit: contain;
  }
  .dt-lf-sub {
    font-size: .68rem;
    font-weight: 600;
    color: #555;
  }

  /* ── Content full-width + App padding ── */
  #content {
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .app {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* ── Start Screen Desktop ── */
  .dt-start-wrap { width: 100%; padding-bottom: 2rem; }

  .dt-start-wrap .section-title { max-width: none; }

  /* Profile strip */
  .dt-start-profile {
    width: 100%;
    background: #1a1a1a;
    border: 2px solid #252525;
    border-radius: 18px;
    box-shadow: 4px 4px 0 #111;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    cursor: pointer;
    margin-bottom: 2rem;
    transition: border-color .15s;
    font-family: var(--font-body);
  }
  .dt-start-prof-img {
    width: 46px;
    flex-shrink: 0;
    aspect-ratio: 2/3;
    display: flex;
    align-items: center;
  }
  .dt-start-prof-img img { width: 100%; height: 100%; object-fit: contain; }
  .dt-start-prof-info { flex: 1; min-width: 0; text-align: left; }
  .dt-start-prof-name {
    font-size: 1rem;
    font-weight: 800;
    color: #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .1rem;
  }
  .dt-start-prof-title { font-size: .76rem; color: #F5A623; font-weight: 700; margin-bottom: .35rem; }
  .dt-start-prof-bar { height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
  .dt-start-prof-fill {
    height: 100%;
    background: linear-gradient(90deg,#F5A623,#ffcc44);
    border-radius: 3px;
    transition: width .4s;
  }
  .dt-start-prof-xp { font-size: .65rem; color: #555; font-weight: 600; margin-top: .2rem; }
  .dt-start-prof-lvl { text-align: center; flex-shrink: 0; }
  .dt-start-prof-lvlnum {
    font-size: 1.9rem;
    font-weight: 900;
    color: #F5A623;
    font-family: var(--font-title);
    line-height: 1;
  }
  .dt-start-prof-lvllbl {
    font-size: .58rem;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
  .dt-start-prof-arrow { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; opacity: .45; }

  /* Hero */
  .dt-start-hero { text-align: center; padding: .6rem 0 .7rem; }
  .dt-start-hero-title {
    font-size: 2.4rem;
    font-weight: 900;
    font-family: var(--font-title);
    line-height: 1.15;
    color: #f0f0f0;
    margin-bottom: .5rem;
  }
  .dt-start-hero-title span { color: #F5A623; }
  .dt-start-hero-sub {
    font-size: .9rem;
    color: #888;
    font-weight: 500;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.55;
  }

  /* Modes grid — 3 cards */
  .dt-start-modes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
  }
  .dt-start-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.25rem 1.75rem;
    border-radius: 20px;
    cursor: pointer;
    border: 3px solid;
    box-shadow: 5px 5px 0 #111;
    font-family: var(--font-body);
    transition: filter .15s, transform .12s;
    min-height: 155px;
  }
  .dt-start-mode-card:hover { filter: brightness(1.1); transform: translateY(-2px); }
  .dt-start-mode-card img { width: 54px; height: 54px; object-fit: contain; }
  .dt-start-mode-name { font-size: 1.12rem; font-weight: 900; text-align: center; line-height: 1.25; }
  .dt-mode-orange { background: linear-gradient(180deg,#f5aa2a 0%,#d4720a 100%); border-color: #1a1a1a; box-shadow: 5px 5px 0 #1a1a1a; color: #fff; }
  .dt-mode-cyan   { background: linear-gradient(180deg,#1a2a3a 0%,#0e1a2a 100%); border-color: #2a4a6a; box-shadow: 5px 5px 0 #0a1520; }
  .dt-mode-green  { background: linear-gradient(180deg,#1a2a1a 0%,#0e1a0e 100%); border-color: #2a5a2a; box-shadow: 5px 5px 0 #051005; }

  /* Tools grid — 4 cards */
  .dt-start-tools {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .dt-start-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    padding: 1.25rem .75rem;
    border-radius: 16px;
    cursor: pointer;
    border: 2px solid;
    box-shadow: 3px 3px 0 #111;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 800;
    transition: filter .15s;
  }
  .dt-start-tool-card:hover { filter: brightness(1.1); }
  .dt-start-tool-card img { width: 32px; height: 32px; object-fit: contain; }
  .dt-tool-orange { background: linear-gradient(180deg,#1a1100,#0e0900); border-color: #F5A62344; box-shadow: 3px 3px 0 #0a0700; color: #F5A623; }
  .dt-tool-cyan   { background: linear-gradient(180deg,#001618,#000d10); border-color: #60dcff44; box-shadow: 3px 3px 0 #000a0d; color: #60dcff; }
  .dt-tool-gold   { background: linear-gradient(180deg,#2e2e2e,#1e1e1e); border-color: transparent; box-shadow: 3px 3px 0 #111; color: #e8e8e8; }
  .dt-tool-muted  { background: linear-gradient(180deg,#2e2e2e,#1e1e1e); border-color: transparent; box-shadow: 3px 3px 0 #111; color: #e8e8e8; }

  /* Mode card description */
  .dt-start-mode-desc {
    font-size: .84rem;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    text-align: center;
    line-height: 1.45;
    padding: 0 .25rem;
  }
  .dt-mode-orange .dt-start-mode-desc { color: rgba(255,255,255,.7); }
  .dt-mode-cyan   .dt-start-mode-desc { color: rgba(96,220,255,.6); }
  .dt-mode-green  .dt-start-mode-desc { color: rgba(124,221,124,.6); }

  /* ── Afinador: ruler ocupa a largura total no desktop ── */
  .tn-ruler-wrap { width: 100%; max-width: none; }

  /* ── Outras telas de jogo (level-up, perf) ── */
  .perf-card,
  .lvlup-wrap { max-width: 680px !important; }

  /* ── Jornada Harmônica desktop: header ── */
  .dt-game-hdr {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
  }

  /* ── Jornada Harmônica desktop: dois painéis ── */
  .dt-game-body {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: .75rem;
  }

  /* Painel esquerdo: stage (ouvir + stats) */
  .dt-game-stage {
    background: #1e1e1e;
    border: 3px solid #2a2a2a;
    border-radius: 22px;
    padding: 1rem 1.5rem 1.25rem;
    box-shadow: 5px 5px 0 #151515;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
  }

  /* Stats integrados no stage */
  .dt-gis {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: .6rem;
    border-bottom: 1px solid #2a2a2a;
  }
  .dt-gis-item { text-align: center; }
  .dt-gis-val {
    font-size: 1.35rem;
    font-weight: 900;
    color: #f0f0f0;
    line-height: 1.1;
  }
  .dt-gis-lbl {
    font-size: .65rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .15rem;
  }
  .dt-gis-sep {
    width: 1px;
    height: 28px;
    background: #2a2a2a;
    flex-shrink: 0;
  }

  /* Botão Ouvir Acorde */
  .dt-play-btn {
    width: 100%;
    min-height: 62px !important;
    font-size: 1.05rem !important;
    height: auto !important;
  }

  /* Painel direito: choices */
  .dt-game-choices-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .dt-choices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: .55rem;
    flex: 1;
  }
  .dt-choices-quality {
    grid-template-columns: 1fr;
  }
  .dt-choice-btn {
    height: 100% !important;
    min-height: 5rem;
  }

  /* ── Botão de dica: alinhado à esquerda, sem margem extra ── */
  .dt-hint-wrap > div {
    max-width: none !important;
    margin-top: .5rem !important;
  }
  .dt-hint-wrap #quality-hint-panel {
    max-width: 520px;
  }

  /* ── Painel de descrição abaixo do jogo ── */
  .dt-game-info-panel {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    width: 100%;
    background: #161616;
    border: 2px solid #252525;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    margin-top: .25rem;
    margin-bottom: 1rem;
  }

  /* ── Treino Focado Menu: layout dois colunas ── */
  .dt-menu-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.1rem;
    margin-bottom: .85rem;
    align-items: start;
  }
  .dt-menu-col {
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }
  .dt-menu-card {
    background: #1a1a1a;
    border: 2px solid #2a2a2a;
    border-radius: 20px;
    padding: 1.1rem 1.25rem;
    box-shadow: 4px 4px 0 #111;
  }
  .dt-menu-card-highlight {
    background: #111e28;
    border: 2px solid #60dcff44;
    box-shadow: 4px 4px 0 #0a1520, 0 0 22px #60dcff0a;
  }
  .dt-menu-card-title {
    font-size: .95rem;
    font-weight: 900;
    color: #60dcff;
    margin-bottom: .75rem;
    letter-spacing: .01em;
    line-height: 1.3;
  }
  .dt-menu-sec-label {
    font-size: .68rem;
    font-weight: 900;
    color: #60dcff88;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .35rem;
    margin-top: .1rem;
  }

  /* ── Intro banner (Treino Focado) ── */
  .dt-menu-intro {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #161e24;
    border: 1.5px solid #60dcff22;
    border-radius: 16px;
    padding: .95rem 1.35rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #8ab4cc;
    font-weight: 500;
    line-height: 1.6;
  }

  /* ── Switches: mais espaço no desktop ── */
  .dt-menu-card .tf-switch-row {
    padding: .85rem 1.1rem;
    margin-bottom: .5rem;
  }
  .dt-menu-card .tf-switch-label {
    font-size: .93rem;
  }

  /* ── Paywall horizontal (Treino Focado) ── */
  .dt-paywall-bar {
    width: 100%;
    background: #0a1a0a;
    border: 2.5px solid #22c55e66;
    border-radius: 20px;
    padding: 1.25rem 1.75rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
    box-shadow: 5px 5px 0 #040d04;
    display: grid;
    grid-template-columns: 2fr 2fr 1.3fr;
    gap: 1.75rem;
    align-items: center;
  }
  .dt-paywall-left {}
  .dt-paywall-features {
    border-left: 1.5px solid #22c55e22;
    padding-left: 1.5rem;
  }
  .dt-paywall-cta {
    border-left: 1.5px solid #22c55e22;
    padding-left: 1.5rem;
    text-align: center;
  }

  /* ── Shop Desktop ── */
  .dt-shop-hdr {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.5rem;
  }
  .dt-shop-hdr-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #F5A623;
    font-family: var(--font-title);
    letter-spacing: .02em;
    flex: 1;
    min-width: 0;
  }
  .dt-shop-currencies {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-shrink: 0;
  }
  .dt-shop-curr-pill {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #1a1a1a;
    border: 1.5px solid #2a2a2a;
    border-radius: 10px;
    padding: .38rem .65rem;
  }
  .dt-shop-curr-lbl {
    font-size: .55rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    line-height: 1;
  }
  .dt-shop-curr-val {
    font-size: .88rem;
    font-weight: 900;
    line-height: 1.2;
  }
  .dt-shop-body {
    width: 100%;
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 2rem;
  }
  .dt-shop-catalog { display: flex; flex-direction: column; }
  .dt-shop-sidebar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: sticky;
    top: 1.5rem;
  }
  .dt-shop-sec-label {
    font-family: var(--font-title);
    font-size: .76rem;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .35rem;
  }
  .dt-shop-divider { height: 1px; background: #222; margin: 1.25rem 0; }
  /* Guitar grid: 3 cols, full width */
  .dt-shop-guitars-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: none !important;
  }
  /* Educational items: horizontal flex row */
  .dt-shop-edu-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
  }
  .dt-shop-edu-card {
    flex: 1;
    min-width: 148px;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    background: #141414;
    border: 1.5px solid #2a2a2a;
    border-radius: 14px;
    padding: 1rem .85rem;
    box-shadow: 3px 3px 0 #0d0d0d;
  }
  .dt-shop-edu-card--cupom {
    background: linear-gradient(160deg, #1a1400, #1a1000);
    border-color: #F5A62344;
    box-shadow: 3px 3px 0 #0a0700, 0 0 14px #F5A62310;
  }
  /* Equipped guitar showcase */
  .dt-shop-equipped-card {
    background: #1a1a1a;
    border: 2px solid #2a2a2a;
    border-radius: 18px;
    padding: 1.1rem 1rem 1rem;
    box-shadow: 4px 4px 0 #111;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
  }
  .dt-shop-equipped-lbl {
    font-size: .6rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
  }
  .dt-shop-equipped-img {
    height: 88px;
    object-fit: contain;
  }
  .dt-shop-equipped-name {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
  }
  .dt-shop-equipped-bonus {
    font-size: .74rem;
    color: #777;
    font-weight: 600;
  }
  .dt-shop-inv-btn {
    width: 100%;
    margin-top: .3rem;
    padding: .5rem 0;
    background: #252525;
    border: 1.5px solid #3a3a3a;
    border-radius: 10px;
    color: #aaa;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-body);
  }
  .dt-shop-inv-btn:hover { background: #2e2e2e; color: #ccc; }

  /* ── Sidebar & right panel: larger typography ── */
  .dt-nav-item { font-size: .92rem; padding: .8rem 1rem; }
  .dt-user-name { font-size: .92rem; }
  .dt-user-lvl  { font-size: .76rem; }
  .dt-right-title { font-size: .82rem; margin-bottom: 1.25rem; }
  .dt-stat-row  { padding: .82rem 0; }
  .dt-stat-icon { font-size: 1.05rem; width: 22px; }
  .dt-stat-lbl  { font-size: .86rem; }
  .dt-stat-val  { font-size: 1.08rem; }
  .dt-nav-icon  { width: 22px; height: 22px; }
}