@media (max-width: 640px) {
      .hud {
        top: max(8px, env(safe-area-inset-top));
        width: calc(100% - 16px);
        gap: 6px;
      }
      .hud-card {
        padding: 9px 8px;
        border-radius: 13px;
      }
      .hud-label { font-size: 8px; letter-spacing: .1em; }
      .hud-value { font-size: 15px; }
      .combo-chip { top: max(74px, calc(env(safe-area-inset-top) + 64px)); font-size: 10px; padding: 7px 12px; }
      .panel { border-radius: 24px; padding: 26px 22px; }
      .subtitle { font-size: 14px; }
    }

@media (max-width:640px) {
      .hud { grid-template-columns:repeat(3,minmax(0,1fr)); width:calc(100% - 14px); }
      .hud-card:nth-child(4), .hud-card:nth-child(5) { display:none; }
      .race-meta { top:max(69px,calc(env(safe-area-inset-top) + 61px)); width:calc(100% - 28px); }
      .combo-chip { top:max(98px,calc(env(safe-area-inset-top) + 90px)); }
      .track-name { font-size:9px; }
      .surface-badge { font-size:8px; }
      .brand-crest { width:52px;height:52px;border-radius:17px;margin-bottom:12px; }
      .brand-crest svg { width:31px;height:31px; }
      .audio-toggle { bottom:max(102px,calc(env(safe-area-inset-bottom) + 90px)); min-width:70px; height:34px; font-size:9px; }
      .pause-toggle { bottom:max(102px,calc(env(safe-area-inset-bottom) + 90px)); width:38px; height:34px; }
      .track-grid { grid-template-columns:repeat(4,1fr); gap:4px; margin:13px 0; }
      .track-select { padding:7px 2px; font-size:8px; }
    }

@media (orientation:landscape) and (max-height:520px) {
      .overlay { padding:4px max(7px,env(safe-area-inset-left)); align-items:center; }
      .panel {
        width:min(calc(100% - 14px),850px);
        max-height:calc(100% - 8px);
        padding:7px 14px 8px;
        border-radius:14px;
        overflow-y:auto;
      }
      .brand-crest { display:none; }
      .eyebrow { margin:0 0 2px;font-size:6px;line-height:1.1;letter-spacing:.11em; }
      .panel h2 { display:flex;justify-content:center;gap:7px;font-size:clamp(24px,8vh,31px);line-height:.86;letter-spacing:-.04em; }
      .panel h2 .title-line { display:inline; }
      .panel h2 br { display:none; }
      .subtitle { display:none; }
      .track-grid { grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:4px 0; }
      .track-select { padding:3px 2px;border-radius:8px;font-size:7px; }
      .track-select span { margin-top:1px;font-size:6px; }
      .record { margin-bottom:4px;font-size:9px;line-height:1.1; }
      .button { min-height:34px;border-radius:10px;font-size:9px; }
      .secondary-button { min-height:29px;margin-top:3px;border-radius:9px;font-size:8px; }
      .result-overlay .panel { overflow:hidden;padding:5px 14px 6px; }
      .result-overlay .eyebrow { margin-bottom:1px; }
      .result-overlay .panel h2 { font-size:clamp(22px,7.2vh,29px); }
      .result-overlay .panel h2 .track-result-name { margin-top:.06em;font-size:.5em;column-gap:.25em; }
      .result-overlay .subtitle { display:block;margin-top:3px;font-size:7px;line-height:1.25; }
      .result-overlay .track-grid { margin:3px 0; }
      .result-overlay .record { margin-bottom:3px;font-size:8px; }
      .result-overlay .button { min-height:30px; }
      .result-overlay .secondary-button { min-height:26px;margin-top:2px; }
      body.mobile-game-expanded .pause-overlay { padding:5px; }
      body.mobile-game-expanded .pause-card { width:min(92vw,390px);padding:10px 14px;border-radius:14px; }
      body.mobile-game-expanded .pause-card h2 { margin-bottom:3px;font-size:22px; }
      body.mobile-game-expanded .pause-card p { margin-bottom:7px;font-size:9px; }
      body.mobile-game-expanded .pause-card .button { min-height:31px; }
      body.mobile-game-expanded .pause-card .secondary-button { min-height:27px;margin-top:3px; }
    }

@container game (max-width:460px) {
  .tutorial-overlay { padding:8px; }
  .tutorial-card { width:100%;padding:17px;border-radius:18px; }
  .tutorial-heading img { width:38px;height:38px; }
  .tutorial-heading h2 { font-size:21px; }
  .tutorial-demo { height:145px;margin:13px 0 11px; }
  .tutorial-card h3 { font-size:19px; }
  .tutorial-step-text { min-height:37px;font-size:11px; }
  .tutorial-dots { margin:12px 0; }
  .tutorial-actions button { min-height:43px; }
  .overlay { padding:10px; }
  .panel {
    width:calc(100% - 8px);
    max-height:calc(100% - 8px);
    padding:16px 15px;
    border-radius:18px;
  }
  .brand-crest { width:44px;height:44px;border-radius:14px;margin-bottom:8px; }
  .brand-crest svg { width:27px;height:27px; }
  .eyebrow { margin-bottom:5px;font-size:8px;line-height:1.25;letter-spacing:.13em; }
  .panel h2 { font-size:clamp(34px,12cqw,48px);line-height:.86;letter-spacing:-.055em; }
  .subtitle { margin-top:10px;font-size:12px;line-height:1.4; }
  .track-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:10px 0; }
  .track-select { padding:6px 2px;border-radius:10px;font-size:8px; }
  .track-select span { margin-top:2px;font-size:7px; }
  .record { margin-bottom:10px;font-size:12px; }
  .button { min-height:46px;border-radius:14px;font-size:12px; }
  .secondary-button { min-height:38px;margin-top:5px;border-radius:11px;font-size:9px; }
  .result-overlay .panel { padding:12px 13px; }
  .result-overlay .brand-crest { width:38px;height:38px;margin-bottom:5px;border-radius:12px; }
  .result-overlay .eyebrow { margin-bottom:3px;font-size:7px; }
  .result-overlay .panel h2 { font-size:clamp(31px,10cqw,42px); }
  .result-overlay .panel h2 .track-result-name { font-size:.46em;column-gap:.25em; }
  .result-overlay .subtitle { margin-top:7px;font-size:10px;line-height:1.35; }
  .result-overlay .track-grid { margin:7px 0; }
  .result-overlay .record { margin-bottom:7px;font-size:10px; }
  .result-overlay .button { min-height:40px;font-size:10px; }
  .result-overlay .secondary-button { min-height:32px;margin-top:4px;font-size:8px; }
}

@container game (max-height:430px) {
  .tutorial-overlay { padding:5px; }
  .tutorial-card {
    width:min(calc(100% - 10px),760px);max-height:calc(100% - 4px);padding:9px 12px;
    display:grid;grid-template-columns:minmax(190px,.82fr) minmax(250px,1.18fr);
    grid-template-rows:auto auto auto 1fr auto;column-gap:14px;border-radius:14px;
  }
  .tutorial-heading { grid-column:2; }
  .tutorial-heading img { width:30px;height:30px;border-radius:9px; }
  .tutorial-heading p { font-size:6px; }
  .tutorial-heading h2 { font-size:17px; }
  .tutorial-demo { grid-column:1;grid-row:1 / 6;height:auto;min-height:190px;margin:0;border-radius:11px; }
  .tutorial-step-label { grid-column:2;margin:7px 0 2px;font-size:6px; }
  .tutorial-card h3 { grid-column:2;margin-bottom:4px;font-size:16px; }
  .tutorial-step-text { grid-column:2;min-height:0;font-size:9px;line-height:1.35; }
  .tutorial-dots { grid-column:2;margin:7px 0; }
  .tutorial-actions { grid-column:2; }
  .tutorial-actions button { min-height:32px;border-radius:9px;font-size:8px; }
  .overlay { padding:7px; }
  .panel {
    width:min(calc(100% - 14px),850px);
    max-height:calc(100% - 10px);
    padding:9px 16px 10px;
    border-radius:15px;
    overflow-y:auto;
  }
  .brand-crest { width:31px;height:31px;border-radius:10px;margin-bottom:3px; }
  .brand-crest svg { width:20px;height:20px; }
  .eyebrow { margin-bottom:2px;font-size:7px;line-height:1.15;letter-spacing:.12em; }
  .panel h2 { display:flex;justify-content:center;gap:8px;font-size:clamp(25px,8cqh,34px);line-height:.88;letter-spacing:-.045em; }
  .panel h2 .title-line { display:inline; }
  .panel h2 br { display:none; }
  .subtitle { max-width:700px;margin-top:5px;font-size:9px;line-height:1.2; }
  .track-grid { grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:6px 0; }
  .track-select { padding:4px 2px;border-radius:8px;font-size:7px; }
  .track-select span { margin-top:1px;font-size:6px; }
  .record { margin-bottom:5px;font-size:9px; }
  .button { min-height:33px;border-radius:10px;font-size:9px; }
  .secondary-button { min-height:30px;margin-top:4px;border-radius:9px;font-size:8px; }
  .result-overlay .panel { overflow:hidden;padding:5px 13px 6px; }
  .result-overlay .panel h2 { font-size:clamp(22px,7.2cqh,29px); }
  .result-overlay .panel h2 .track-result-name { margin-top:.06em;font-size:.5em;column-gap:.25em; }
  .result-overlay .subtitle { display:block;margin-top:3px;font-size:7px;line-height:1.25; }
  .result-overlay .track-grid { margin:3px 0; }
  .result-overlay .record { margin-bottom:3px;font-size:8px; }
  .result-overlay .button { min-height:30px; }
  .result-overlay .secondary-button { min-height:26px;margin-top:2px; }
  body.mobile-game-expanded .pause-overlay { padding:5px; }
  body.mobile-game-expanded .pause-card { width:min(92%,390px);padding:10px 14px;border-radius:14px; }
  body.mobile-game-expanded .pause-card h2 { margin-bottom:3px;font-size:22px; }
  body.mobile-game-expanded .pause-card p { margin-bottom:7px;font-size:9px; }
  body.mobile-game-expanded .pause-card .button { min-height:31px; }
  body.mobile-game-expanded .pause-card .secondary-button { min-height:27px;margin-top:3px; }
}

@container game (max-height:330px) {
  .brand-crest { display:none; }
  .eyebrow { margin-top:0; }
  .subtitle { display:none; }
  .track-grid { margin:5px 0; }
  .record { margin-bottom:4px; }
}

@media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    }


@media (orientation:portrait) and (pointer:coarse) {
  .loading-card::after {
    content:'Para uma experiência mais ampla, você também pode girar o celular.';
    display:block; margin-top:14px; color:rgba(220,240,245,.72);
    font:600 9px/1.4 Inter,sans-serif;
  }
}
@media (orientation:landscape) and (max-height:420px) {
  .loading-logo { width:44px; height:44px; margin-bottom:7px; }
  .loading-title { font-size:28px; }
  .loading-card p { margin:7px 0; }
}

/* Cabeçalho desktop no mesmo formato do OctaBreak Pool. */
@media (min-width:761px) {
  .site-nav .desktop-hidden-nav { display:none; }
  .site-nav .desktop-nav-label { display:inline; }
  .site-nav .mobile-nav-label { display:none; }
  .site-footer .desktop-footer-hidden { display:none; }
  .site-header {
    position:relative;
    inset:auto;
    top:auto;
    width:min(1180px,calc(100% - 32px));
    height:68px;
    min-height:68px;
    margin:8px auto 0;
    padding:8px 16px;
    gap:24px;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(7,21,34,.14);
  }
  .site-brand { gap:10px; font-size:16px; }
  .site-brand img {
    width:38px;
    height:38px;
    border-radius:11px;
    box-shadow:0 8px 20px rgba(7,21,34,.14);
  }
  .site-nav { align-items:center; gap:24px; }
  .site-nav a {
    position:relative;
    padding:0;
    border-radius:0;
    background:transparent;
    font-size:12px;
    font-weight:700;
    line-height:15px;
    transition:color .18s ease,transform .18s ease,text-shadow .18s ease;
  }
  .site-nav a::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-7px;
    height:2px;
    border-radius:999px;
    background:#67edff;
    box-shadow:0 0 8px rgba(103,237,255,.5);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .18s ease;
  }
  .site-nav a:hover,.site-nav a:focus-visible {
    color:#fff;
    text-shadow:0 0 12px rgba(103,237,255,.28);
    transform:translateY(-1px);
  }
  .site-nav a:hover::after,.site-nav a:focus-visible::after { transform:scaleX(1); }
  .site-footer {
    width:min(1120px,calc(100% - 32px));
    margin:20px auto 0;
    padding:30px 24px;
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:20px;
    border-radius:26px 26px 0 0;
  }
  .site-footer > div {
    align-items:center;
    justify-content:start;
    gap:5px;
    text-align:center;
  }
  .site-footer strong { font-size:12px; line-height:1.35; }
  .site-footer span { color:#d5e8ef; font-size:12px; line-height:1.5; }
  .site-footer nav {
    margin:0;
    align-content:start;
    align-items:center;
    justify-content:center;
    gap:8px 18px;
  }
  .site-footer > p {
    grid-column:1 / -1;
    justify-self:center;
    margin:0;
    color:#d5e8ef;
    font-size:11px;
    font-weight:500;
    line-height:1.4;
    text-align:center;
  }
}

@media (min-width:1100px) and (hover:hover) {
  .desktop-ad {
    display:grid; place-items:center; position:relative; overflow:hidden;
    border:1px dashed #bfd0d5; border-radius:16px; color:#78909a;
    background:linear-gradient(135deg,#f7fafb,#edf3f4);
  }
  .desktop-ad > span,.sidebar-ad-card .ad-label {
    position:absolute; top:8px; left:10px; color:#91a4ab;
    font-size:8px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  }
  .ad-slot { width:100%; height:100%; }
  .desktop-play-layout {
    width:min(1440px,calc(100% - 40px)); margin:18px auto 86px;
    display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:start; gap:24px;
  }
  .desktop-play-layout .game-section { width:100%; margin:0; }
  .desktop-primary-column {
    display:flex;
    flex-direction:column;
    gap:18px;
    position:sticky;
    top:18px;
    align-self:start;
  }
  .desktop-ad-below-game { width:min(970px,100%); height:90px; margin:0 auto; }
  .desktop-sidebar { display:flex; flex-direction:column; gap:16px; }
  .content-section { display:none; }
  .sidebar-card {
    padding:20px; border:1px solid #d9e4e7; border-radius:18px;
    color:#546d77; background:#fff; box-shadow:0 12px 30px rgba(21,52,64,.07);
  }
  .sidebar-card h2 { margin:0 0 10px; color:#102d3a; font-size:19px; letter-spacing:-.025em; }
  .sidebar-card p { margin:0; font-size:12px; line-height:1.58; }
  .sidebar-kicker {
    margin-bottom:8px!important; color:#0b8da4!important;
    font-size:9px!important; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  }
  .sidebar-ad-card {
    display:grid; place-items:center; position:relative; height:250px; padding:0;
    overflow:hidden; border-style:dashed; background:linear-gradient(135deg,#f7fafb,#edf3f4);
  }
  .sidebar-details { padding:0; overflow:hidden; }
  .sidebar-details summary {
    position:relative; padding:18px 46px 18px 20px; color:#102d3a;
    font-size:14px; font-weight:800; cursor:pointer; list-style:none;
  }
  .sidebar-details summary::-webkit-details-marker { display:none; }
  .sidebar-details summary::after {
    content:'⌄'; position:absolute; top:50%; right:20px; transform:translateY(-55%);
    color:#0b8da4; font-size:20px; transition:transform .18s ease;
  }
  .sidebar-details[open] summary::after { transform:translateY(-45%) rotate(180deg); }
  .sidebar-details > div { padding:0 20px 18px; }
  .sidebar-details > div p + p { margin-top:7px; }
  .sidebar-title-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:13px; }
  .sidebar-title-row h2 { margin:0; }
  .sidebar-title-row > a { color:#087d94; font-size:9px; font-weight:800; text-decoration:none; }
  .related-games-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .related-game-card {
    min-width:0; overflow:hidden; border:1px solid #d8e6e9; border-radius:12px;
    color:#173744; background:#f7fafb; text-decoration:none;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  }
  .related-game-card:hover,.related-game-card:focus-visible {
    transform:translateY(-2px); border-color:#65cad9; box-shadow:0 9px 20px rgba(18,74,91,.12);
  }
  .related-game-card img { display:block; width:100%; height:68px; object-fit:cover; }
  .related-game-card-wide { grid-column:1 / -1; }
  .related-game-card span {
    display:block; padding:8px 7px 9px; overflow:hidden; color:#173744;
    font-size:9px; font-weight:800; line-height:1.25; text-overflow:ellipsis; white-space:nowrap;
  }
}

@media (max-width:760px) {
  .site-header {
    position:relative; z-index:250; width:calc(100% - 16px); min-height:64px;
    margin:7px auto 0; padding:7px 10px; flex-wrap:nowrap; overflow:visible;
    border-radius:8px 8px 0 0; background:#08243a;
  }
  .site-brand { flex:1 1 auto; min-width:0; gap:10px; font-size:15px; }
  .site-brand img { width:42px; height:42px; flex:0 0 auto; }
  .mobile-nav-toggle {
    display:grid; place-items:center; flex:0 0 auto; width:46px; height:46px;
    padding:0; border:1px solid rgba(255,255,255,.32); border-radius:13px;
    color:#fff; background:rgba(255,255,255,.08); box-shadow:none;
    font:800 22px/1 Inter,sans-serif; cursor:pointer;
  }
  .mobile-nav-toggle:focus-visible { outline:3px solid rgba(0,190,215,.34); outline-offset:2px; }
  .site-nav {
    position:absolute; top:calc(100% + 1px); left:0; right:0; z-index:200;
    width:auto; display:none; grid-template-columns:1fr; align-items:stretch; gap:3px;
    max-height:calc(100dvh - 74px); overflow-y:auto; padding:10px;
    border:1px solid rgba(132,223,240,.22); border-radius:0 0 13px 13px;
    background:linear-gradient(180deg,#0b2b41,#071c30);
    box-shadow:0 15px 28px rgba(4,20,32,.32);
  }
  .site-nav.is-open { display:grid; }
  .site-nav a {
    display:grid; place-items:center; min-height:44px; padding:9px 13px;
    border:2px solid #31596d; border-radius:10px; color:#eafcff;
    background:linear-gradient(180deg,#163e53,#102f43);
    box-shadow:0 3px 0 #061927,inset 0 1px rgba(255,255,255,.06);
    font-size:13px; line-height:1.2; text-align:center;
  }
  .site-nav a:hover,.site-nav a:focus-visible {
    color:#fff; border-color:#66ddeb;
    background:linear-gradient(180deg,#1b4e65,#12394f); transform:translateY(-1px);
  }
  .site-nav .nav-play {
    color:#061b29; border-color:#79effb;
    background:linear-gradient(135deg,#00d8ef,#8ff1fb);
    box-shadow:0 3px 0 #087f96,inset 0 1px rgba(255,255,255,.55);
  }
  .site-nav .instagram-nav {
    display:grid; margin-top:4px; color:#eaffff; border-color:#2acadd; text-align:center;
    background:linear-gradient(135deg,#0d4158,#14718a);
    box-shadow:0 3px 0 #052231,inset 0 1px rgba(255,255,255,.08);
  }
  .site-nav .instagram-nav:hover,.site-nav .instagram-nav:focus-visible {
    color:#fff; border-color:#78effb; background:linear-gradient(135deg,#12516b,#168ba3);
  }
  .game-section { width:calc(100% - 16px); margin:10px auto 64px; }
  .game-toolbar { min-height:48px; padding:0 10px; border-radius:15px 15px 0 0; }
  .game-frame { height:min(72dvh,620px); min-height:460px; border-radius:0 0 17px 17px; }
  .content-section { width:calc(100% - 28px); margin-bottom:70px; }
  .feature-grid,.control-grid { grid-template-columns:1fr; gap:12px; margin-top:25px; }
  .feature-grid article,.control-grid article { padding:21px; }
}

@media (max-width:760px) and (orientation:landscape) {
  .content-section,.site-footer { display:none; }
  .site-header { width:calc(100% - 12px); min-height:54px; margin-top:5px; padding:4px 8px; }
  .site-brand img { width:40px; height:40px; }
  .mobile-nav-toggle { width:42px; height:42px; border-radius:12px; }
  .game-section { width:calc(100% - 12px); margin:4px auto; }
  .game-toolbar { min-height:38px; }
  .mobile-game-note { display:none; }
  .game-frame { height:calc(100dvh - 104px); min-height:260px; }
}