@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

    :root {
      --ice: #EBF4F6;
      --red: #FF3366;
      --cyan: #00E5FF;
      --ink: #071522;
      --glass: rgba(8, 22, 36, .56);
      --line: rgba(255,255,255,.18);
    }

    * { box-sizing: border-box; }
    html, body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      background: #f1f6f7;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #071522;
      -webkit-tap-highlight-color: transparent;
      scroll-behavior: smooth;
    }

    #app {
      position: relative;
      container: game / size;
      width: 100%;
      height: 100%;
      min-height: 460px;
      overflow: hidden;
      touch-action: none;
      color: white;
      background:
        radial-gradient(circle at 50% 15%, rgba(109,214,255,.22), transparent 38%),
        linear-gradient(180deg, #071522, #0d2639 52%, #dcecef 100%);
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .hud {
      position: absolute;
      z-index: 4;
      top: max(14px, env(safe-area-inset-top));
      left: 50%;
      transform: translateX(-50%);
      width: min(94vw, 920px);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      pointer-events: none;
    }

    body.intermission-active .hud,
    body.intermission-active .race-meta,
    body.intermission-active .combo-chip,
    body.intermission-active .audio-toggle,
    body.intermission-active .pause-toggle,
    body.intermission-active .toast-layer {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .hud-card {
      min-width: 0;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
      box-shadow: 0 14px 40px rgba(3, 12, 22, .22);
      backdrop-filter: blur(16px) saturate(130%);
      -webkit-backdrop-filter: blur(16px) saturate(130%);
    }

    .hud-label {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.65);
      white-space: nowrap;
    }

    .hud-value {
      display: block;
      margin-top: 3px;
      font-size: clamp(16px, 2.2vw, 24px);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -.04em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hud-card.time.danger {
      border-color: rgba(255,51,102,.58);
      box-shadow: 0 0 0 1px rgba(255,51,102,.18), 0 0 36px rgba(255,51,102,.18);
      animation: pulseDanger .72s infinite alternate ease-in-out;
    }

    @keyframes pulseDanger {
      to { transform: translateY(-2px); }
    }

    .overlay {
      position: absolute;
      z-index: 10;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      background: radial-gradient(circle at 50% 35%, rgba(19, 57, 82, .18), rgba(1, 7, 13, .58));
      transition: opacity .28s ease, visibility .28s ease;
    }

    .overlay.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .panel {
      width: min(calc(100% - 32px), 560px);
      max-height: calc(100% - 24px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      padding: clamp(24px, 5vw, 42px);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.055)),
        rgba(5, 19, 32, .52);
      box-shadow:
        0 24px 80px rgba(0,0,0,.34),
        inset 0 1px rgba(255,255,255,.08);
      backdrop-filter: blur(24px) saturate(135%);
      -webkit-backdrop-filter: blur(24px) saturate(135%);
      text-align: center;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--cyan);
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .22em;
    }

    .panel h2 {
      margin: 0;
      font-size: clamp(44px, 10vw, 76px);
      line-height: .9;
      letter-spacing: -.07em;
      text-transform: uppercase;
    }
    .panel h2 .title-line { display:block; }
    .panel h2 .track-result-name {
      display:inline-flex;
      max-width:100%;
      flex-wrap:wrap;
      justify-content:center;
      column-gap:.24em;
      row-gap:.04em;
      margin-top:.22em;
      font-size:.45em;
      line-height:1.05;
      letter-spacing:-.025em;
    }
    .track-result-name > span { display:inline-block; white-space:nowrap; }

    .subtitle {
      max-width: 440px;
      margin: 18px auto 0;
      color: rgba(255,255,255,.73);
      font-size: 15px;
      line-height: 1.65;
    }

    .record {
      margin: 0 0 20px;
      font-weight: 700;
      color: rgba(255,255,255,.72);
    }

    .record b { color: white; }

    .button {
      position: relative;
      width: 100%;
      min-height: 58px;
      border: 0;
      border-radius: 18px;
      color: #06131e;
      background: linear-gradient(135deg, var(--cyan), #9cf4ff);
      font: inherit;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .02em;
      cursor: pointer;
      box-shadow:
        0 14px 34px rgba(0,229,255,.24),
        inset 0 1px rgba(255,255,255,.66);
      transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
      overflow: hidden;
    }

    .button::after {
      content: "";
      position: absolute;
      inset: -2px;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7), transparent 70%);
      transform: translateX(-110%);
      transition: transform .55s ease;
    }

    .button:hover {
      transform: translateY(-3px) scale(1.01);
      filter: brightness(1.04);
      box-shadow: 0 20px 46px rgba(0,229,255,.31);
    }

    .button:hover::after { transform: translateX(110%); }
    .button:active { transform: translateY(0) scale(.99); }

    .toast-layer {
      position: absolute;
      z-index: 8;
      inset: 0;
      pointer-events: none;
      display: grid;
      place-items: center;
    }

    .toast {
      padding: 12px 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .04em;
      color: white;
      background: rgba(5,20,32,.72);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 36px rgba(0,0,0,.25);
      backdrop-filter: blur(16px);
      transform: translateY(18px) scale(.92);
      opacity: 0;
    }

    .toast.show {
      animation: toastIn 1.1s ease both;
    }

    .combo-chip {
      position: absolute;
      z-index: 5;
      top: max(92px, calc(env(safe-area-inset-top) + 78px));
      left: 50%;
      transform: translateX(-50%) scale(.9);
      padding: 8px 15px;
      border: 1px solid rgba(0,229,255,.36);
      border-radius: 999px;
      background: rgba(5,20,32,.48);
      color: white;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      opacity: .55;
      pointer-events: none;
      backdrop-filter: blur(12px);
      transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
    }
    .combo-chip.hot { transform: translateX(-50%) scale(1.08); opacity: 1; border-color: rgba(0,229,255,.8); }

    @keyframes toastIn {
      0% { opacity: 0; transform: translateY(20px) scale(.9); }
      18%, 72% { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-18px) scale(.96); }
    }

    

    /* Direção de arte Alpine Pro */
    .hud { width: min(96vw, 980px); gap: 8px; }
    .hud-card {
      position: relative;
      overflow: hidden;
      padding: 11px 14px 12px;
      border-color: rgba(201,243,255,.19);
      background: linear-gradient(145deg, rgba(5,25,41,.82), rgba(12,50,68,.58));
      box-shadow: 0 12px 34px rgba(0,12,24,.24), inset 0 1px rgba(255,255,255,.13);
    }
    .hud-card::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, rgba(0,229,255,.8), transparent); opacity:.7; }
    .hud-label { color: rgba(207,240,248,.62); }
    .hud-value { color:#f6fdff; text-shadow:0 2px 10px rgba(0,0,0,.24); }

    .race-meta {
      position: absolute; z-index: 5; left: 50%; top: max(88px, calc(env(safe-area-inset-top) + 76px));
      transform: translateX(-50%); width: min(88vw, 620px); pointer-events: none;
    }
    .race-meta-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; color:white; text-shadow:0 2px 8px rgba(0,0,0,.35); }
    .track-name { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    .surface-badge { padding:5px 9px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(5,25,40,.48); font-size:9px; font-weight:800; letter-spacing:.12em; backdrop-filter:blur(10px); }
    .progress-shell { height:5px; border-radius:99px; overflow:hidden; background:rgba(3,21,33,.42); box-shadow:inset 0 1px 3px rgba(0,0,0,.35); }
    .progress-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#00e5ff,#a7f6ff); box-shadow:0 0 14px rgba(0,229,255,.72); transition:width .18s linear; }

    .brand-crest { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 16px; border-radius:20px; color:#061722; background:linear-gradient(145deg,#d9fbff,#00d9f4); box-shadow:0 16px 38px rgba(0,229,255,.25), inset 0 1px white; transform:rotate(-4deg); }
    .brand-crest svg { width:38px; height:38px; }
    .panel { background:linear-gradient(155deg,rgba(11,40,59,.91),rgba(4,18,31,.84)); border-color:rgba(190,239,250,.24); box-shadow:0 28px 90px rgba(0,7,15,.48),inset 0 1px rgba(255,255,255,.12); }
    .panel h2 { background:linear-gradient(180deg,#fff 18%,#b9edf5 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 12px 38px rgba(0,0,0,.22); }
    .eyebrow { color:#75efff; }
    .button { text-transform:uppercase; letter-spacing:.09em; }

    .countdown { position:absolute; z-index:6; inset:0; display:grid; place-items:center; pointer-events:none; font-size:clamp(74px,18vw,154px); font-weight:800; font-style:italic; letter-spacing:-.09em; color:white; text-shadow:0 8px 0 rgba(4,35,51,.32),0 0 48px rgba(0,229,255,.58); opacity:0; transform:scale(.72); }
    .countdown.show { animation:countPop .72s ease both; }
    @keyframes countPop { 0%{opacity:0;transform:scale(.62)} 22%{opacity:1;transform:scale(1.08)} 78%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.25)} }

    .audio-toggle { position:absolute; z-index:9; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); min-width:82px; height:38px; padding:0 13px; border:1px solid rgba(200,244,255,.24); border-radius:999px; color:white; background:rgba(5,24,39,.65); box-shadow:0 10px 28px rgba(0,8,18,.28),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(12px); font:800 10px/1 Inter,sans-serif; letter-spacing:.1em; cursor:pointer; }
    .audio-toggle.off { opacity:.58; }
    .pause-toggle { position:absolute; z-index:9; left:max(12px,env(safe-area-inset-left)); bottom:max(12px,env(safe-area-inset-bottom)); width:42px; height:38px; border:1px solid rgba(200,244,255,.24); border-radius:14px; color:white; background:rgba(5,24,39,.65); backdrop-filter:blur(12px); font:800 14px/1 Inter; cursor:pointer; }
    .track-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; margin:18px 0; }
    .track-select { min-width:0; padding:9px 5px; border:1px solid rgba(190,239,250,.16); border-radius:13px; color:white; background:rgba(181,235,246,.055); font:700 10px/1.15 Inter; cursor:pointer; }
    .track-select span { display:block; margin-top:5px; color:#76efff; font-size:9px; }
    .track-select.selected { border-color:rgba(0,229,255,.8); background:rgba(0,160,190,.2); box-shadow:0 0 18px rgba(0,229,255,.12); }
    .track-select:disabled { opacity:.32; cursor:not-allowed; }
    .secondary-button { width:100%; min-height:44px; margin-top:9px; border:1px solid rgba(200,244,255,.2); border-radius:14px; color:white; background:rgba(255,255,255,.065); font:800 11px/1 Inter; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
    .mobile-exit-button { display:none; }
    body.mobile-game-expanded .mobile-exit-button {
      display:block;
      color:#ffe8ee;
      border-color:rgba(255,105,137,.36);
      background:rgba(255,51,102,.1);
    }
    body.mobile-game-expanded .pause-card { max-height:calc(100% - 12px);overflow:hidden; }
    .result-overlay .panel {
      max-height:calc(100% - 20px);
      overflow:hidden;
      padding:20px clamp(24px,4vw,34px);
    }
    .result-overlay .brand-crest { width:52px;height:52px;margin-bottom:9px;border-radius:16px; }
    .result-overlay .brand-crest svg { width:32px;height:32px; }
    .result-overlay .eyebrow { margin-bottom:7px;font-size:9px; }
    .result-overlay .panel h2 { font-size:clamp(42px,8vw,64px);line-height:.88; }
    .result-overlay .subtitle { margin-top:12px;font-size:13px;line-height:1.45; }
    .result-overlay .track-grid { margin:12px 0; }
    .result-overlay .record { margin-bottom:12px; }
    .result-overlay .button { min-height:50px;border-radius:15px;font-size:13px; }
    .result-overlay .secondary-button { min-height:38px;margin-top:7px;border-radius:12px;font-size:9px; }
    .pause-overlay { position:absolute; z-index:12; inset:0; display:grid; place-items:center; padding:24px; background:rgba(2,12,21,.66); backdrop-filter:blur(12px); transition:.2s ease; }
    .pause-overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
    .pause-card { width:min(90vw,360px); padding:30px; border:1px solid rgba(200,244,255,.2); border-radius:24px; background:linear-gradient(145deg,rgba(12,45,63,.94),rgba(3,17,29,.94)); text-align:center; box-shadow:0 28px 80px rgba(0,0,0,.4); }
    .pause-card h2 { margin:0 0 8px; font-size:34px; text-transform:uppercase; }
    .pause-card p { margin:0 0 20px; color:rgba(255,255,255,.62); font-size:13px; }
    .tutorial-overlay {
      position:absolute;z-index:14;inset:0;display:grid;place-items:center;
      padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
      color:#fff;background:rgba(2,12,21,.76);backdrop-filter:blur(14px);
      transition:opacity .2s ease,visibility .2s ease;
    }
    .tutorial-overlay.hidden { opacity:0;visibility:hidden;pointer-events:none; }
    .tutorial-card {
      width:min(92%,490px);max-height:calc(100% - 8px);overflow-y:auto;padding:24px;
      border:1px solid rgba(142,232,245,.28);border-radius:24px;
      background:linear-gradient(155deg,rgba(14,52,72,.98),rgba(4,20,34,.98));
      box-shadow:0 28px 80px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.1);
    }
    .tutorial-heading { display:flex;align-items:center;gap:12px;text-align:left; }
    .tutorial-heading img { width:44px;height:44px;border-radius:13px; }
    .tutorial-heading p { margin:0 0 3px;color:#72efff;font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; }
    .tutorial-heading h2 { margin:0;font-size:24px;line-height:1;letter-spacing:-.04em; }
    .tutorial-demo {
      position:relative;height:160px;margin:18px 0 14px;overflow:hidden;
      border:1px solid rgba(168,235,245,.2);border-radius:18px;
      background:linear-gradient(180deg,#174960 0,#ccecf1 53%,#f4fbfc 100%);
    }
    .tutorial-slope { position:absolute;inset:0;overflow:hidden; }
    .tutorial-slope::before,.tutorial-slope::after { content:'';position:absolute;top:48%;bottom:-12%;width:2px;background:rgba(255,255,255,.84); }
    .tutorial-slope::before { left:28%;transform:rotate(15deg); }
    .tutorial-slope::after { right:28%;transform:rotate(-15deg); }
    .tutorial-mini-skier {
      position:absolute;z-index:2;left:50%;bottom:18px;font-size:42px;
      filter:drop-shadow(0 7px 4px rgba(5,37,49,.24));transform:translateX(-50%);
    }
    .tutorial-gesture {
      position:absolute;z-index:3;left:50%;bottom:12px;width:34px;height:34px;
      border:3px solid #fff;border-radius:50%;background:rgba(0,229,255,.24);
      box-shadow:0 0 0 7px rgba(0,229,255,.12);transform:translateX(-50%);
    }
    .tutorial-gesture::after {
      content:'';position:absolute;left:50%;bottom:100%;width:3px;height:38px;
      border-radius:999px;background:linear-gradient(transparent,#fff);transform:translateX(-50%);
    }
    .tutorial-keyboard { position:absolute;inset:0;display:none;place-items:center; }
    .tutorial-keyset { display:flex;align-items:center;justify-content:center;gap:9px; }
    .tutorial-key {
      min-width:52px;min-height:52px;display:grid;place-items:center;padding:6px;
      border:1px solid rgba(182,240,249,.38);border-bottom-width:5px;border-radius:12px;
      color:#effdff;background:#0b2c41;font-size:19px;font-weight:800;
    }
    .tutorial-key.wide { min-width:150px;font-size:11px;text-transform:uppercase;letter-spacing:.08em; }
    .tutorial-demo.desktop .tutorial-slope { display:none; }
    .tutorial-demo.desktop .tutorial-keyboard { display:grid; }
    .tutorial-demo[data-action="steer"] .tutorial-mini-skier { animation:tutorialSteer 1.8s ease-in-out infinite; }
    .tutorial-demo[data-action="steer"] .tutorial-gesture { animation:tutorialSwipeSide 1.8s ease-in-out infinite; }
    .tutorial-demo[data-action="jump"] .tutorial-mini-skier { animation:tutorialJump 1.45s ease-in-out infinite; }
    .tutorial-demo[data-action="jump"] .tutorial-gesture { animation:tutorialSwipeUp 1.45s ease-in-out infinite; }
    .tutorial-demo[data-action="brake"] .tutorial-mini-skier { animation:tutorialBrake 1.55s ease-in-out infinite; }
    .tutorial-demo[data-action="brake"] .tutorial-gesture { animation:tutorialSwipeDown 1.55s ease-in-out infinite; }
    .tutorial-demo.desktop .tutorial-key.active { color:#061b29;border-color:#8bf3ff;background:#74eafa;animation:tutorialKey 1.2s ease-in-out infinite; }
    .tutorial-step-label { margin:0 0 5px;color:#69e9f8;font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; }
    .tutorial-card h3 { margin:0 0 7px;font-size:21px;letter-spacing:-.025em; }
    .tutorial-step-text { min-height:40px;margin:0;color:#c3dce3;font-size:12px;line-height:1.55; }
    .tutorial-dots { display:flex;justify-content:center;gap:7px;margin:16px 0; }
    .tutorial-dots span { width:7px;height:7px;border-radius:50%;background:rgba(194,237,245,.24); }
    .tutorial-dots span.active { width:22px;border-radius:999px;background:#52e4f5; }
    .tutorial-actions { display:grid;grid-template-columns:1fr 2fr;gap:9px; }
    .tutorial-actions button { min-height:44px;border-radius:13px;font:800 10px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer; }
    .tutorial-skip { border:1px solid rgba(190,239,248,.22);color:#d2e8ed;background:rgba(255,255,255,.055); }
    .tutorial-next { border:0;color:#061722;background:linear-gradient(135deg,#00dff6,#91f2fb);box-shadow:0 9px 24px rgba(0,229,255,.2); }
    @keyframes tutorialSteer { 0%,100%{transform:translateX(-85%)}50%{transform:translateX(-15%)} }
    @keyframes tutorialSwipeSide { 0%,100%{transform:translateX(-105%)}50%{transform:translateX(5%)} }
    @keyframes tutorialJump { 0%,100%{transform:translate(-50%,0) rotate(0)}50%{transform:translate(-50%,-52px) rotate(12deg)} }
    @keyframes tutorialSwipeUp { 0%,100%{transform:translate(-50%,0);opacity:.3}55%{transform:translate(-50%,-70px);opacity:1} }
    @keyframes tutorialBrake { 0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.82)} }
    @keyframes tutorialSwipeDown { 0%,100%{transform:translate(-50%,-65px);opacity:.35}55%{transform:translate(-50%,0);opacity:1} }
    @keyframes tutorialKey { 50%{transform:translateY(4px);border-bottom-width:1px;filter:brightness(1.15)} }

    

    

    
  
  .loading-screen {
    position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
    padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    background:linear-gradient(155deg,#06131f 0%,#0d3448 62%,#dceff3 160%);
    color:#fff; transition:opacity .25s ease,visibility .25s ease;
  }
  .loading-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }
  .loading-card { width:min(88vw,420px); text-align:center; }
  .loading-logo { width:72px; height:72px; margin:0 auto 16px; }
  .loading-title { margin:0; font:900 clamp(30px,8vw,48px)/.92 Inter,sans-serif; letter-spacing:-.055em; }
  .loading-card p { margin:12px 0; color:#bad7e0; font:700 12px/1.5 Inter,sans-serif; }
  .loading-track { height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.14); }
  .loading-progress { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#00e5ff,#ff3366); transition:width .18s ease; }
  .loading-detail { min-height:18px; color:#ffb8c8!important; font-size:9px!important; overflow-wrap:anywhere; }
  .loading-actions { display:flex; gap:8px; margin-top:12px; }
  .loading-actions button { flex:1; min-height:42px; border:0; border-radius:12px; font:800 10px Inter,sans-serif; cursor:pointer; }
  .loading-actions button:first-child { color:#06131f; background:#00e5ff; }
  .loading-actions button:last-child { color:#fff; background:rgba(255,255,255,.12); }
  .noscript-message {
    position:fixed; inset:auto 12px 12px; z-index:1100; margin:0; padding:12px;
    border-radius:12px; color:#fff; background:#9d2448; text-align:center;
    font:700 12px/1.4 system-ui,sans-serif;
  }

  .site-header {
    width:min(1180px,calc(100% - 40px)); min-height:68px; margin:8px auto 0; padding:8px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    border:1px solid rgba(255,255,255,.1); border-radius:18px;
    color:#fff; background:linear-gradient(135deg,#071c30,#0d2f49);
    box-shadow:0 12px 30px rgba(7,21,34,.14);
  }
  .site-brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:16px; }
  .site-brand img { width:38px; height:38px; border-radius:11px; box-shadow:0 8px 20px rgba(7,21,34,.14); }
  .site-brand b { font-weight:800; }
  .mobile-nav-toggle { display:none; }
  .site-nav { display:flex; align-items:center; gap:24px; }
  .site-nav a { color:#d5e8ef; text-decoration:none; font-size:12px; font-weight:700; }
  .site-nav a:hover,.site-nav a:focus-visible { color:#67edff; }
  .site-nav .instagram-nav { display:none; }
  .desktop-nav-label { display:none; }
  .mobile-nav-label { display:inline; }
  main { display:block; }
  .section-kicker { margin:0 0 12px; color:#0b8da4; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
  .game-section { width:min(1180px,calc(100% - 32px)); margin:18px auto 86px; scroll-margin-top:16px; }
  .game-toolbar {
    min-height:54px; padding:0 16px; display:flex; align-items:center; justify-content:space-between;
    border:1px solid #d7e4e7; border-bottom:0; border-radius:20px 20px 0 0; background:#fff;
  }
  .game-toolbar > div { display:flex; align-items:center; gap:8px; color:#68808a; font-size:10px; }
  .game-toolbar strong { color:#102d3a; font-size:12px; }
  .game-status-dot { width:8px; height:8px; border-radius:50%; background:#27c79a; box-shadow:0 0 0 4px rgba(39,199,154,.12); }
  .fullscreen-button {
    min-height:34px; padding:0 13px; border:1px solid #d7e4e7; border-radius:10px;
    color:#163846; background:#f4f8f9; font:800 9px/1 Inter,sans-serif;
    letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  }
  .fullscreen-button:hover,.fullscreen-button:focus-visible { border-color:#7acbd8; color:#087d94; background:#edfafd; }
  .game-frame {
    height:clamp(520px,70vh,720px); overflow:hidden; border:1px solid #d7e4e7;
    border-radius:0 0 24px 24px; background:#071522; box-shadow:0 28px 70px rgba(21,52,64,.16);
  }
  .mobile-game-note { margin:12px 8px 0; color:#70858e; font-size:10px; text-align:center; }
  .desktop-ad,.desktop-sidebar { display:none; }
  .desktop-play-layout,.desktop-primary-column { min-width:0; }
  body.mobile-game-expanded { overflow:hidden; overscroll-behavior:none; }
  body.mobile-game-expanded .game-frame {
    position:fixed; z-index:900; inset:0; width:100vw; height:100dvh;
    min-height:0; border:0; border-radius:0;
  }
  body.mobile-game-expanded #app { min-height:0; height:100%; border-radius:0; }
  .content-section { width:min(1080px,calc(100% - 40px)); margin:0 auto 96px; }
  .content-section > h2 { max-width:720px; margin:0; color:#102d3a; font-size:clamp(32px,5vw,56px); line-height:1.02; letter-spacing:-.045em; }
  .feature-grid,.control-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px; }
  .feature-grid article,.control-grid article { min-width:0; padding:26px; border:1px solid #d8e6e9; border-radius:20px; background:#fff; box-shadow:0 14px 36px rgba(27,61,72,.06); }
  .feature-grid span { color:#ff3366; font-size:10px; font-weight:800; letter-spacing:.12em; }
  .feature-grid h3 { margin:14px 0 10px; color:#173744; font-size:17px; }
  .feature-grid p,.control-grid p { margin:0; color:#617984; font-size:13px; line-height:1.65; }
  .control-grid b { display:block; margin-bottom:10px; color:#0b8da4; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
  .site-footer {
    padding:42px max(20px,calc((100% - 1080px)/2));
    color:#b5cbd2;
    background:linear-gradient(135deg,#071c30,#0d2f49);
  }
  .site-footer > div { display:flex; flex-direction:column; gap:7px; }
  .site-footer strong { color:#fff; font-size:20px; }
  .site-footer span { font-size:12px; }
  .site-footer nav { display:flex; flex-wrap:wrap; gap:18px; margin:28px 0; }
  .site-footer a { color:#c9e2e8; text-decoration:none; font-size:11px; font-weight:700; }
  .site-footer a:hover,.site-footer a:focus-visible { color:#00e5ff; }
  .site-footer > p { margin:0; color:#78949f; font-size:10px; }
  #app:fullscreen { min-height:100%; width:100%; height:100%; border-radius:0; }
  #app:fullscreen .overlay { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }