:root{

      --bg:#05060c;

      --bg-panel:#0b1020;

      --accent:#20e0a6;

      --accent-soft:#11b47f;

      --danger:#ff4b6a;

      --text:#f5f7ff;

      --muted:#9aa4c2;

      --border:#1b2140;

      --step:#1ac0d8;

      --step-shadow:#0590aa;

      --pill-yellow:#ffc928;

      --pill-black:#13151c;

      --pill-white:#fdfdfd;

      --pill-blue:#275dff;

      --pill-pink:#ff437b;

      --accent-2:#7fd2ff;

      --green:#29f1a8;

    }



    *{box-sizing:border-box;margin:0;padding:0}

    body{

      min-height:100vh;

      background:radial-gradient(circle at 10% 0,#182033 0,#05060c 55%);

      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

      color:var(--text);

    }



    .hidden{display:none !important;}



    /* Top bar */

    .topbar{

      height:110px;

      padding:0 32px;

      display:flex;

      align-items:center;

      justify-content:space-between;

      border-bottom:1px solid var(--border);

      background:linear-gradient(to right,rgba(5,6,12,.96),rgba(8,14,26,.96));

      box-shadow:0 8px 20px rgba(0,0,0,.7);

      position:sticky;

      top:0;

      z-index:20;

    }



    .brand{

      display:flex;

      align-items:center;

      gap:18px;

    }



    .brand-logo{

      height:90px;

      display:block;

    }



    .brand-text-main{

      font-weight:700;

      font-size:22px;

      letter-spacing:.03em;

    }



    .brand-text-sub{

      font-size:11px;

      text-transform:uppercase;

      letter-spacing:.16em;

      color:var(--muted);

    }



    .wallet-btn{

      border:none;

      border-radius:999px;

      padding:10px 20px;

      font-size:13px;

      font-weight:600;

      cursor:pointer;

      background:linear-gradient(135deg,var(--accent),var(--accent-soft));

      color:#041010;

      box-shadow:0 10px 22px rgba(0,0,0,.7);

      display:inline-flex;

      align-items:center;

      gap:6px;

      transition:transform .12s ease,box-shadow .12s ease,background .12s ease,opacity .12s ease;

    }

    .wallet-btn:hover{

      transform:translateY(-1px);

      box-shadow:0 14px 30px rgba(0,0,0,.8);

    }

    .wallet-btn.connected{

      background:rgba(7,18,26,.96);

      color:var(--text);

      border:1px solid rgba(79,195,247,.5);

      box-shadow:0 8px 24px rgba(0,0,0,.7);

    }

    .wallet-btn.connected:hover{

      background:#ff4b6a;

      border-color:#ff4b6a;

    }

    .wallet-btn .hover-label{display:none;}

    .wallet-btn.connected:hover .main-label{display:none;}

    .wallet-btn.connected:hover .hover-label{display:inline;}



    main{

      padding:20px 24px 8px;

      display:flex;

      justify-content:center;

    }



    .page-wrap{

      width:min(1200px,100%);

      display:flex;

      flex-direction:column;

      gap:18px;

    }



    .panel{

      background:linear-gradient(145deg,#0b1020,#05060c);

      border-radius:18px;

      border:1px solid var(--border);

      box-shadow:0 18px 60px rgba(0,0,0,.6);

      padding:20px 22px;

    }



    .panel-header{

      display:flex;

      justify-content:space-between;

      align-items:flex-end;

      margin-bottom:18px;

    }



    .panel-title{

      font-size:22px;

      font-weight:650;

    }

    .panel-subtitle{

      font-size:13px;

      color:var(--muted);

      margin-top:4px;

    }



    .explosion-particle{

      width:14px;

      height:14px;

      box-shadow:0 0 20px rgba(255,120,40,0.8);

    }

    @keyframes explosion-pop{

      0%{

        transform:scale(0.6) translate(0,0);

        opacity:1;

      }

      60%{

        transform:scale(1.8) translate(var(--dx, 0px), var(--dy, 0px));

        opacity:1;

      }

      100%{

        transform:scale(1.8) translate(var(--dx, 0px), var(--dy, 0px));

        opacity:0;

      }

    }



    /* BONUS POPUP */

    .bonus-popup{

      position:fixed;

      top:50%;

      left:50%;

      transform:translate(-50%, -50%);

      background:rgba(0,0,0,0.88);

      border:2px solid var(--accent);

      padding:32px 28px;

      border-radius:24px;

      text-align:center;

      z-index:9999;

      backdrop-filter:blur(8px);

      width:440px;

      max-width:95vw;

      box-shadow:0 0 40px rgba(0,255,180,0.4);

      overflow:hidden;

    }



    .bonus-popup img{

      width:140px;

      height:140px;

      margin-bottom:16px;

    }



    .bonus-popup p{

      font-size:20px;

      color:var(--text);

      font-weight:600;

      line-height:1.4;

    }



    .confetti-piece{

      position:absolute;

      width:8px;

      height:14px;

      border-radius:2px;

      opacity:0.9;

      animation:confetti-fall 1.2s ease-out forwards;

    }



    @keyframes confetti-fall{

      0%{

        transform:translateY(-10px) rotate(0deg);

        opacity:1;

      }

      100%{

        transform:translateY(190px) rotate(260deg);

        opacity:0;

      }

    }



    .hidden{ display:none !important; }



    /* HERO / HOME */

    .hero-layout{

      display:grid;

      grid-template-columns: minmax(0,3fr) minmax(0,2fr);

      gap:20px;

      align-items:center;

    }



    .hero-city{

      position:relative;

      height:260px;

      border-radius:16px;

      overflow:hidden;

      border:1px solid rgba(255,255,255,.06);

    }



    .hero-banner{

      width:100%;

      height:100%;

      object-fit:cover;

      display:block;

    }



    .hero-copy-title{

      font-size:18px;

      font-weight:600;

    }

    .hero-copy-text{

      font-size:13px;

      color:var(--muted);

      margin-top:8px;

      line-height:1.6;

    }



    .hero-actions{

      margin-top:16px;

      display:flex;

      flex-wrap:wrap;

      gap:10px;

    }



    .btn-primary{

      border:none;

      border-radius:999px;

      padding:9px 18px;

      font-size:13px;

      font-weight:600;

      cursor:pointer;

      background:linear-gradient(135deg,var(--accent),var(--accent-soft));

      color:#041010;

      box-shadow:0 10px 22px rgba(0,0,0,.7);

      display:inline-flex;

      align-items:center;

      gap:6px;

      transition:transform .12s ease,box-shadow .12s ease,background .12s ease,opacity .12s ease;

    }

    .btn-primary:hover{

      transform:translateY(-1px);

      box-shadow:0 14px 30px rgba(0,0,0,.8);

    }



    .btn-outline{

      border-radius:999px;

      padding:8px 16px;

      font-size:12px;

      border:1px solid rgba(255,255,255,.24);

      background:rgba(0,0,0,.35);

      color:var(--text);

      cursor:pointer;

      display:inline-flex;

      align-items:center;

      gap:6px;

      transition:background .12s ease,border-color .12s ease,transform .12s ease,opacity .12s ease;

    }

    .btn-outline:hover:enabled{

      background:rgba(255,255,255,.06);

      border-color:rgba(79,195,247,.6);

      transform:translateY(-1px);

    }

    .btn-outline:disabled{

      opacity:0.4;

      cursor:default;

    }



    @media (max-width:880px){

      main{ padding:16px 12px 4px; }

    }



    .game-controls-bar{

      display:flex;

      flex-wrap:wrap;

      align-items:center;

      gap:10px 18px;

      margin-bottom:14px;

      padding:10px 12px;

      border-radius:12px;

      border:1px dashed rgba(255,255,255,.14);

      background:rgba(0,0,0,.35);

    }



    .game-controls-bar .label{

      font-size:11px;

      text-transform:uppercase;

      letter-spacing:.16em;

      color:var(--muted);

    }

    .game-controls-bar .stat{

      font-size:14px;

      font-weight:600;

    }



    .volume-slider{

      width:110px;

      accent-color: var(--accent);

      cursor:pointer;

    }

    @media (max-width:880px){

      .volume-slider{

        width:90px;

      }

    }



    .gc-section{

      display:flex;

      flex-direction:column;

      gap:4px;

      font-size:13px;

    }



    .gc-inline{

      display:flex;

      align-items:center;

      gap:6px;

      font-size:13px;

    }



    .badge-row{

      display:flex;

      flex-wrap:wrap;

      gap:6px;

      font-size:11px;

    }

    .badge{

      padding:4px 8px;

      border-radius:999px;

      border:1px solid rgba(255,255,255,.08);

      background:rgba(0,0,0,.25);

      color:var(--muted);

    }

    .badge.accent{

      border-color:rgba(32,224,166,.5);

      background:rgba(32,224,166,.12);

      color:var(--accent);

    }



    .gc-input{

      background:rgba(5,8,14,.85);

      border-radius:999px;

      border:1px solid rgba(255,255,255,.12);

      padding:6px 10px;

      color:var(--text);

      width:84px;

      font-size:13px;

    }



    .gc-status{

      flex:1;

      min-width:180px;

      font-size:11px;

      color:var(--muted);

      max-height:64px;

      overflow:auto;

    }

    .gc-status p{ margin-bottom:2px; }



    .gc-actions{

      display:flex;

      gap:8px;

      align-items:center;

      flex-wrap:wrap;

    }



    /* Character select */

    .char-select-row{

      display:flex;

      flex-wrap:wrap;

      gap:6px;

    }

    .char-btn{

      display:inline-flex;

      align-items:center;

      gap:4px;

      padding:4px 8px;

      border-radius:999px;

      border:1px solid rgba(255,255,255,.18);

      background:rgba(0,0,0,.4);

      color:var(--muted);

      font-size:11px;

      cursor:pointer;

      transition:background .12s ease,border-color .12s ease,transform .08s ease,color .12s ease;

    }

    .char-btn img{

      width:26px;

      height:26px;

      border-radius:50%;

      display:block;

    }

    .char-btn span{

      white-space:nowrap;

    }

    .char-btn.selected{

      border-color:rgba(32,224,166,.7);

      background:rgba(32,224,166,.16);

      color:var(--accent);

      transform:translateY(-1px);

    }



    .game-viewport{

      border-radius:18px;

      border:1px solid rgba(255,255,255,.06);

      background:#12a4c9;

      overflow:hidden;

      position:relative;

      padding:0;

      height:720px;

      width:100%;

      display:flex;

      justify-content:center;

      align-items:center;

    }



    /* Per-level themes */

    .steps-scene.level-1{

      background:linear-gradient(to top,#1197bd,#16b8dd);

    }

    .steps-scene.level-1 .step{

      background:linear-gradient(to bottom,#e5ecf4,#cfd8e3);

    }



    .steps-scene.level-2{

      background:linear-gradient(to top,#f6d365,#fda085);

    }

    .steps-scene.level-2 .step{

      background:linear-gradient(to bottom,#ffeaa7,#f6b93b);

    }



    .steps-scene.level-3{

      background:linear-gradient(to top,#2ecc71,#27ae60);

    }

    .steps-scene.level-3 .step{

      background:linear-gradient(to bottom,#55efc4,#00b894);

    }



    .steps-scene.level-4{

      background:linear-gradient(to top,#74b9ff,#0984e3);

    }

    .steps-scene.level-4 .step{

      background:linear-gradient(to bottom,#a0c4ff,#4ea8de);

    }



    .steps-scene.level-5{

      background:linear-gradient(to top,#ff9f43,#ff6b01);

    }

    .steps-scene.level-5 .step{

      background:linear-gradient(to bottom,#ffd9a0,#ff9f43);

    }



    .steps-scene.level-6{

      background:linear-gradient(to top,#ff7675,#d63031);

    }

    .steps-scene.level-6 .step{

      background:linear-gradient(to bottom,#ff9aa2,#ff4757);

    }



    .steps-scene{

      position:relative;

      width:100%;

      height:100%;

      background:linear-gradient(to top,#1197bd,#16b8dd);

    }



    .step{

      position:absolute;

      width:260px;

      height:40px;

      background:linear-gradient(to bottom,var(--step),var(--step-shadow));

      border-radius:10px;

      box-shadow:0 30px 40px rgba(0,0,0,.85);

      transform-origin:center;

      animation:platform-sway 4s ease-in-out infinite;

    }

    .step::after{

      content:"";

      position:absolute;

      inset:0;

      background:linear-gradient(to top,rgba(255,255,255,.28),transparent 55%);

      border-radius:inherit;

    }

    .step::before{

      content:"";

      position:absolute;

      left:10%;

      right:10%;

      bottom:-22px;

      height:18px;

      border-radius:999px;

      background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);

      filter:blur(1px);

      opacity:.9;

      pointer-events:none;

    }



    .step-1{ bottom:18%;  left:16%; }

    .step-2{ bottom:36%;  left:40%; }

    .step-3{ bottom:54%;  left:16%; }

    .step-4{ bottom:72%;  left:40%; }

    .step-5{ bottom:88%;  left:16%; }



    @keyframes platform-sway {

      0%   { transform:skewX(-10deg) translateX(-10px); }

      50%  { transform:skewX(-7deg)  translateX( 12px); }

      100% { transform:skewX(-10deg) translateX(-10px); }

    }



    @keyframes platform-wobble {

      0%   { transform:skewX(-10deg) translateX(-10px) rotate(0deg); }

      25%  { transform:skewX(-9deg) translateX(-6px) rotate(1.5deg); }

      50%  { transform:skewX(-8deg) translateX( 6px) rotate(-1.5deg); }

      75%  { transform:skewX(-9deg) translateX(-2px) rotate(0.8deg); }

      100% { transform:skewX(-10deg) translateX(-10px) rotate(0deg); }

    }

    .step.wobble{

      animation:platform-sway 4s ease-in-out infinite, platform-wobble 0.35s ease-out;

    }



    .pill{

      position:absolute;

      width:60px;

      height:36px;

      border-radius:999px;

      box-shadow:0 12px 18px rgba(0,0,0,.55);

    }

    .pill::after{

      content:"";

      position:absolute;

      inset:0;

      border-radius:inherit;

      background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.65),transparent 60%);

      mix-blend-mode:screen;

    }



    .pill-yellow{ background:var(--pill-yellow); }

    .pill-black{  background:var(--pill-black); }

    .pill-white{  background:var(--pill-white); }

    .pill-blue{   background:var(--pill-blue); }

    .pill-pink{   background:var(--pill-pink); }



    .pill-yellow{ bottom:12%; left:30%; }

    .pill-black{  bottom:32%; left:44%; }

    .pill-white{  bottom:52%; left:20%; }

    .pill-blue{   bottom:72%; left:55%; }

    .pill-pink{   bottom:67%; left:52%; }



    .frog-pill {

      position:absolute;

      width:72px;

      height:72px;

      border-radius:50%;

      background:transparent !important;

      box-shadow:none !important;

      display:flex;

      align-items:center;

      justify-content:center;

      z-index:10;

      overflow:visible;

    }



    .frog-pill::after{

      content:none !important;

    }



    .frog-sprite{

      width:100%;

      height:100%;

      object-fit:contain;

      pointer-events:none;

    }



    @media (max-width:880px){

      .game-controls-bar{

        flex-direction:column;

        align-items:flex-start;

      }

      .gc-status{

        max-height:80px;

      }

    }



    .footer{

      border-top:1px solid var(--border);

      background:#05060c;

      padding:16px 24px 14px;

      margin-top:16px;

    }



    .footer-grid{

      max-width:1200px;

      margin:0 auto 10px;

      display:grid;

      grid-template-columns:repeat(3,minmax(0,1fr));

      gap:18px;

      align-items:flex-start;

    }



    @media (max-width:900px){

      .footer-grid{

        grid-template-columns:1fr;

      }

    }



    .foot-card,

    .foot-connect{

      background:linear-gradient(145deg,#0b1020,#05060c);

      border-radius:14px;

      border:1px solid rgba(255,255,255,.12);

      box-shadow:0 10px 30px rgba(0,0,0,.6);

      padding:10px 12px;

      font-size:12px;

    }



    .foot-head{

      width:100%;

      border:none;

      background:rgba(0,0,0,.3);

      border-radius:999px;

      padding:7px 12px;

      display:flex;

      align-items:center;

      justify-content:space-between;

      gap:8px;

      font-size:11px;

      letter-spacing:.18em;

      text-transform:uppercase;

      color:var(--muted);

      cursor:pointer;

      transition:background .15s ease,border-color .15s ease,transform .1s ease;

      border:1px solid rgba(255,255,255,.16);

    }

    .foot-head:hover{

      background:rgba(255,255,255,.06);

      transform:translateY(-1px);

    }



    .foot-head .head-label{

      white-space:nowrap;

    }



    .eye-icon{

      font-size:16px;

      line-height:1;

      opacity:.35;

      transition:opacity .15s ease,transform .15s ease;

    }



    .foot-card.open .eye-icon{

      opacity:1;

      transform:scale(1.08);

    }



    .foot-body{

      margin-top:10px;

      padding-top:8px;

      border-top:1px dashed rgba(255,255,255,.14);

      color:var(--muted);

      display:none;

      line-height:1.5;

    }



    .foot-card.open .foot-body{

      display:block;

    }



    .foot-body ul{

      padding-left:16px;

      margin-top:4px;

    }

    .foot-body li{

      margin-bottom:4px;

    }



    .foot-title{

      font-size:13px;

      font-weight:650;

      margin-bottom:8px;

    }



    .contact-list{

      list-style:none;

      padding:0;

      margin:0;

      display:grid;

      gap:6px;

      color:var(--muted);

    }

    .contact-list span{

      font-weight:600;

      margin-right:4px;

    }



    .foot-link{

      color:var(--accent-2);

      text-decoration:none;

      transition:color .2s ease,text-shadow .2s ease;

    }

    .foot-link:hover,

    .foot-link:focus-visible{

      color:var(--green);

      text-shadow:0 0 8px rgba(41,241,168,.25);

      outline:none;

    }



    .copyright{

      max-width:1200px;

      margin:0 auto;

      border-top:1px solid rgba(255,255,255,.12);

      padding-top:10px;

      font-size:11px;

      color:var(--muted);

      text-align:left;

    }

    @media (max-width:900px){

      .copyright{text-align:center;}

    }

/* ETH Mainnet Level-UP rebuild enhancements */
html, body { overflow-x: hidden; }
body { background: radial-gradient(circle at 12% 0%, rgba(32,224,166,.34), transparent 30%), radial-gradient(circle at 88% 12%, rgba(127,210,255,.22), transparent 28%), linear-gradient(180deg, #06111f 0%, #04060c 58%, #03040a 100%); }
.topbar { border-bottom: 1px solid rgba(127,210,255,.2); box-shadow: 0 18px 60px rgba(0,0,0,.38); backdrop-filter: blur(16px); }
.network-chip, .badge { border: 1px solid rgba(127,210,255,.34); background: linear-gradient(135deg, rgba(32,224,166,.14), rgba(39,93,255,.12)); box-shadow: inset 0 0 18px rgba(127,210,255,.08), 0 8px 24px rgba(0,0,0,.22); }
.network-chip { color: #eaffff; border-radius: 999px; padding: 10px 14px; font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.panel, .foot-card, .foot-connect { border-color: rgba(127,210,255,.22); box-shadow: 0 24px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); }
.hero-banner { filter: saturate(1.22) contrast(1.08) drop-shadow(0 18px 34px rgba(32,224,166,.2)); }
.btn-primary, .btn-outline, .wallet-btn { min-height: 42px; border-radius: 10px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease; }
.btn-primary:hover, .btn-outline:hover, .wallet-btn:hover, .char-btn:hover { transform: translateY(-2px); filter: saturate(1.18); }
.btn-primary:active, .btn-outline:active, .wallet-btn:active, .char-btn:active { transform: translateY(0); }
.btn-primary { box-shadow: 0 12px 28px rgba(32,224,166,.24), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-outline { border-color: rgba(127,210,255,.38); background: rgba(7,14,28,.78); }
.game-controls-bar { background: linear-gradient(180deg, rgba(10,18,36,.92), rgba(5,10,22,.88)); border: 1px solid rgba(127,210,255,.22); border-radius: 12px; padding: 14px; gap: 12px; }
.gc-section, .gc-actions, .gc-status, .active-player-panel, .eth-rewards-panel, .leaderboard-card { border: 1px solid rgba(127,210,255,.2); background: rgba(5,10,22,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.18); }
.gc-status { max-height: 150px; overflow: auto; }
.char-btn { border: 1px solid rgba(127,210,255,.26); background: linear-gradient(180deg, rgba(18,28,52,.95), rgba(8,12,26,.95)); box-shadow: 0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
.char-btn.selected { border-color: rgba(32,224,166,.75); box-shadow: 0 0 0 2px rgba(32,224,166,.16), 0 14px 32px rgba(32,224,166,.2); }
.game-viewport { display: flex; justify-content: center; width: 100%; }
.steps-scene { overflow: hidden; background: radial-gradient(circle at 22% 20%, rgba(255,255,255,.28), transparent 8%), linear-gradient(180deg, #18bff1 0%, #167ac4 44%, #0d2654 100%); box-shadow: inset 0 0 80px rgba(255,255,255,.12), 0 28px 72px rgba(0,0,0,.42); isolation: isolate; }
.steps-scene:before { content: ""; position: absolute; inset: -20% -10%; background: linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.12) 45%, transparent 58% 100%); animation: skyDrift 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes skyDrift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
.step { border: 2px solid rgba(255,255,255,.55); box-shadow: inset 0 5px 0 rgba(255,255,255,.28), inset 0 -10px 0 rgba(0,0,0,.18), 0 15px 26px rgba(0,0,0,.32); }
.pill { box-shadow: inset 0 5px 8px rgba(255,255,255,.34), inset 0 -7px 8px rgba(0,0,0,.28), 0 0 20px rgba(255,255,255,.22); }
.frog-pill { filter: drop-shadow(0 12px 18px rgba(0,0,0,.36)) drop-shadow(0 0 14px rgba(32,224,166,.48)); }
.levelup-player-grid, .leaderboard-panel { display: grid; gap: 12px; width: 100%; margin: 12px 0; }
.levelup-player-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, .35fr); }
.leaderboard-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.active-player-panel, .eth-rewards-panel, .leaderboard-card { border-radius: 12px; padding: 14px; }
.active-player-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.active-player-panel strong, .eth-rewards-value, .leaderboard-card strong { display: block; color: #f7fffb; font-size: 22px; }
.active-player-panel span, .leaderboard-card span { color: var(--muted); }
.eth-rewards-panel { text-align: center; background: linear-gradient(135deg, rgba(32,224,166,.18), rgba(39,93,255,.16)); }
.eth-rewards-label { font-size: 12px; font-weight: 900; color: #bdfdeb; }
.leaderboard-status { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.profile-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(1,4,10,.82); backdrop-filter: blur(12px); }
.profile-box { position: relative; width: min(440px, 100%); border: 1px solid rgba(127,210,255,.28); border-radius: 14px; padding: 24px; background: linear-gradient(180deg, #0d1830, #060a15); box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.profile-box h2 { margin-bottom: 8px; }
.profile-box p { color: var(--muted); margin-bottom: 14px; }
.profile-box label { display: block; margin-top: 12px; color: #dbefff; font-size: 13px; font-weight: 800; }
.profile-box input { width: 100%; margin-top: 6px; padding: 12px; border-radius: 10px; border: 1px solid rgba(127,210,255,.28); background: #040814; color: #fff; }
.profile-close { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.profile-error { min-height: 20px; margin: 10px 0; color: #ff8ba0; font-size: 13px; }
@media (max-width: 1024px) { .page-wrap { width: min(100%, 940px); } .game-controls-bar { align-items: stretch; } .game-viewport, .steps-scene { max-width: 100%; } }
@media (max-width: 768px) { .topbar { height: auto; min-height: 96px; padding: 12px; flex-wrap: wrap; gap: 12px; } .brand { min-width: 0; } .game-controls-bar, .gc-actions, .badge-row, .gc-inline { flex-wrap: wrap; } .levelup-player-grid, .leaderboard-panel { grid-template-columns: 1fr; } .active-player-panel { align-items: flex-start; flex-direction: column; } .char-select-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps-scene { width: min(100%, 520px); min-height: 560px; } }
@media (max-width: 520px) { .page-wrap { padding-inline: 10px; } .panel { padding: 14px; } .hero-layout { grid-template-columns: 1fr; } .gc-section, .gc-actions, .gc-status { width: 100%; } .btn-primary, .btn-outline, .wallet-btn { width: 100%; justify-content: center; } .network-chip { width: 100%; text-align: center; } .char-select-row { grid-template-columns: 1fr; } .steps-scene { min-height: 500px; border-radius: 12px; } .profile-box { padding: 18px; max-height: 92vh; overflow: auto; } }
.game-over-overlay { position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.58); backdrop-filter: blur(6px); }
.game-over-box { width: min(360px, 100%); text-align: center; border-radius: 14px; border: 1px solid rgba(255,75,106,.45); background: linear-gradient(180deg, rgba(36,8,20,.96), rgba(7,10,20,.96)); padding: 26px; box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 28px rgba(255,75,106,.22); }
.game-over-box h2 { color: #fff; font-size: 34px; margin-bottom: 8px; }
.game-over-box p { color: var(--muted); margin-bottom: 18px; }

/* Asset fallbacks */
img.asset-missing { display: none !important; }
.char-btn::before { content: attr(data-fallback); display: none; font-size: 28px; line-height: 1; }
.char-btn:has(img.asset-missing)::before { display: block; }
.frog-pill:has(.frog-sprite.asset-missing)::before { content: attr(data-fallback); display: grid; place-items: center; width: 100%; height: 100%; font-size: 42px; }
.brand a:has(.brand-logo.asset-missing)::after { content: "LEVEL-UP"; display: inline-grid; place-items: center; min-width: 92px; min-height: 48px; border-radius: 10px; border: 1px solid rgba(127,210,255,.35); color: #f7fffb; font-weight: 900; background: linear-gradient(135deg, rgba(32,224,166,.22), rgba(39,93,255,.2)); }
.hero-city:has(.hero-banner.asset-missing)::before { content: "LEVEL-UP"; display: grid; place-items: center; min-height: 220px; border-radius: 14px; border: 1px solid rgba(127,210,255,.28); color: #f7fffb; font-size: 38px; font-weight: 900; background: radial-gradient(circle at 30% 20%, rgba(32,224,166,.35), transparent 30%), linear-gradient(135deg, #0d2b54, #06111f); }

/* Gameplay weather/background themes */
.steps-scene.theme-sunny {
  background:
    radial-gradient(circle at 82% 14%, rgba(255,238,118,.95) 0 6%, rgba(255,238,118,.28) 7% 15%, transparent 17%),
    linear-gradient(180deg, #32c7ff 0%, #25aee6 45%, #1074bf 100%);
}
.steps-scene.theme-clouds {
  background:
    radial-gradient(ellipse at 18% 24%, rgba(255,255,255,.82) 0 10%, transparent 12%),
    radial-gradient(ellipse at 34% 18%, rgba(255,255,255,.68) 0 12%, transparent 14%),
    radial-gradient(ellipse at 76% 28%, rgba(255,255,255,.72) 0 14%, transparent 16%),
    linear-gradient(180deg, #87d7ff 0%, #54aee1 55%, #2476b2 100%);
}
.steps-scene.theme-rain {
  background:
    repeating-linear-gradient(105deg, rgba(190,229,255,.22) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #526b86 0%, #31475f 54%, #172c45 100%);
}
.steps-scene.theme-snow {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 32%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 58%, rgba(255,255,255,.75) 0 2px, transparent 3px),
    linear-gradient(180deg, #dff7ff 0%, #a9d4ec 52%, #6f9fca 100%);
}
.steps-scene.theme-night {
  background:
    radial-gradient(circle at 18% 16%, #ffffff 0 1px, transparent 2px),
    radial-gradient(circle at 44% 26%, #d9f4ff 0 1px, transparent 2px),
    radial-gradient(circle at 72% 14%, #ffffff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 46%, #c8e8ff 0 1px, transparent 2px),
    linear-gradient(180deg, #08152f 0%, #0a234c 50%, #061124 100%);
}
.steps-scene.theme-arcade {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,67,123,.38), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(32,224,166,.36), transparent 20%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, #17114e 0%, #31106a 48%, #05060c 100%);
}
.steps-scene.theme-rain:before { background: repeating-linear-gradient(105deg, rgba(255,255,255,.18) 0 1px, transparent 1px 13px); animation: rainFall .7s linear infinite; }
.steps-scene.theme-snow:before { background: radial-gradient(circle, rgba(255,255,255,.85) 0 2px, transparent 3px); background-size: 42px 42px; animation: snowDrift 7s linear infinite; }
.steps-scene.theme-clouds:before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation: skyDrift 12s ease-in-out infinite alternate; }
.steps-scene.theme-night:before { background: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 2px); background-size: 56px 44px; animation: starPulse 3s ease-in-out infinite alternate; }
.steps-scene.theme-arcade:before { background: linear-gradient(115deg, transparent 0 35%, rgba(32,224,166,.2) 45%, transparent 58% 100%); animation: skyDrift 3s ease-in-out infinite alternate; }
@keyframes rainFall { from { transform: translateY(-24px); } to { transform: translateY(24px); } }
@keyframes snowDrift { from { transform: translateY(-18px) translateX(-8px); } to { transform: translateY(34px) translateX(8px); } }
@keyframes starPulse { from { opacity: .45; } to { opacity: .9; } }

/* Level-UP arcade polish pass */
:root {
  --glass: rgba(6, 13, 28, .76);
  --glass-strong: rgba(9, 18, 38, .92);
  --cyan: #3ee8ff;
  --emerald: #29f1a8;
  --gold: #ffd86b;
  --blue: #3f7bff;
  --pink: #ff4f9a;
  --card-border: rgba(127, 210, 255, .28);
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(41, 241, 168, .26), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(63, 123, 255, .24), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255, 216, 107, .08), transparent 32%),
    linear-gradient(180deg, #08172c 0%, #050813 52%, #03040a 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(127, 210, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 210, 255, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 70%);
}

.topbar {
  min-height: 104px;
  height: auto;
  padding: 12px clamp(16px, 3vw, 34px);
  gap: 18px;
}

.topbar > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.brand-logo {
  height: clamp(66px, 8vw, 94px);
  filter: drop-shadow(0 0 10px rgba(62, 232, 255, .34)) drop-shadow(0 0 18px rgba(41, 241, 168, .18)) !important;
}

main {
  padding: 28px clamp(14px, 3vw, 32px) 10px;
}

.page-wrap {
  width: min(1200px, 100%);
  gap: 24px;
}

.panel {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(10, 21, 45, .95), rgba(4, 8, 18, .96));
  border: 1px solid var(--card-border);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.08) 49%, transparent 58% 100%);
  opacity: .55;
}

.panel > * {
  position: relative;
  z-index: 1;
}

.panel-header {
  align-items: center;
  margin-bottom: 20px;
}

.panel-title {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
  color: #f7ffff;
  text-shadow: 0 0 20px rgba(62,232,255,.18);
}

.panel-subtitle {
  max-width: 820px;
  font-size: 15px;
  line-height: 1.55;
  color: #b8c8df;
}

.hero-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
  gap: clamp(18px, 3vw, 34px);
}

.hero-city {
  height: clamp(280px, 35vw, 430px);
  border-radius: 20px;
  border: 1px solid rgba(62, 232, 255, .34);
  box-shadow:
    0 24px 70px rgba(0,0,0,.36),
    0 0 38px rgba(41,241,168,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-city::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58%, rgba(2,7,18,.42)),
    radial-gradient(circle at 20% 18%, rgba(255,216,107,.18), transparent 28%);
}

.hero-copy-title {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1;
  font-weight: 950;
  color: #f8ffff;
}

.hero-copy-text {
  font-size: 16px;
  color: #bdcbe3;
}

.hero-actions .btn-primary {
  min-width: 180px;
  min-height: 54px;
  font-size: 16px;
}

#gameView {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1200px;
  margin-inline: auto;
}

#gameView.hidden {
  display: none !important;
}

#gameView .panel-header {
  order: 1;
  margin-bottom: 0;
  padding-bottom: 2px;
}

.game-viewport {
  order: 2;
  height: clamp(540px, 61vw, 660px);
  min-height: 540px;
  border-radius: 24px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(62,232,255,.3), rgba(41,241,168,.18), rgba(255,216,107,.18)),
    rgba(4, 8, 18, .92);
  border: 1px solid rgba(127,210,255,.36);
  box-shadow:
    0 28px 90px rgba(0,0,0,.42),
    0 0 46px rgba(62,232,255,.14),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.steps-scene {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  transition: background .85s ease, box-shadow .85s ease, filter .85s ease;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow:
    inset 0 0 110px rgba(255,255,255,.1),
    inset 0 -42px 80px rgba(0,0,0,.18),
    0 24px 54px rgba(0,0,0,.36);
}

.game-controls-bar {
  order: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.gc-section,
.gc-actions,
.gc-status,
.active-player-panel,
.eth-rewards-panel,
.leaderboard-card {
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 38%),
    var(--glass);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 16px 38px rgba(0,0,0,.22);
}

.gc-section {
  padding: 14px;
  min-height: 92px;
}

.gc-section:nth-of-type(1) {
  grid-column: span 3;
}

.gc-section:nth-of-type(2) {
  grid-column: span 3;
}

.gc-section:nth-of-type(3) {
  grid-column: span 4;
}

.gc-section:nth-of-type(4) {
  grid-column: span 2;
}

.gc-actions {
  grid-column: span 8;
  padding: 14px;
  gap: 10px;
  align-content: center;
}

.gc-status {
  grid-column: span 4;
  padding: 14px;
  min-height: 96px;
  max-height: 118px;
  color: #b9c9de;
  line-height: 1.4;
}

.gc-status::before {
  content: "Run Log";
  display: block;
  margin-bottom: 7px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-controls-bar .label,
.label {
  color: #88e9ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.game-controls-bar .stat {
  font-size: clamp(17px, 1.5vw, 22px);
  color: #ffffff;
}

.gc-inline {
  gap: 8px;
  font-size: 14px;
  color: #dbe9ff;
}

.gc-input {
  width: 78px;
  min-height: 38px;
  border-radius: 10px;
  border-color: rgba(62,232,255,.34);
}

.badge {
  padding: 7px 10px;
  color: #dceaff;
  font-weight: 750;
}

.badge.accent {
  color: #caffef;
}

.btn-primary,
.btn-outline,
.wallet-btn {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
}

.btn-primary {
  background: linear-gradient(135deg, #4ffff0 0%, #29f1a8 48%, #98ff6d 100%);
  color: #031013;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 16px 34px rgba(41,241,168,.24),
    0 0 24px rgba(62,232,255,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.btn-outline {
  color: #e8f8ff;
  border: 1px solid rgba(62,232,255,.36);
  background:
    linear-gradient(180deg, rgba(23, 43, 78, .9), rgba(7, 14, 31, .88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.18);
}

.btn-primary:hover:enabled,
.btn-outline:hover:enabled,
.wallet-btn:hover:enabled {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(41,241,168,.24),
    0 0 30px rgba(62,232,255,.22),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.btn-primary:active,
.btn-outline:active,
.wallet-btn:active {
  transform: scale(.98);
}

.btn-primary:disabled,
.btn-outline:disabled {
  opacity: .46;
  filter: grayscale(.35);
  box-shadow: none;
}

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.wallet-btn:focus-visible,
.char-btn:focus-visible,
.foot-head:focus-visible {
  outline: 3px solid rgba(255,216,107,.72);
  outline-offset: 3px;
}

.volume-slider {
  width: min(170px, 100%);
  min-height: 28px;
}

.char-select-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.char-btn {
  justify-content: center;
  min-height: 66px;
  padding: 8px;
  border-radius: 14px;
  color: #d9eaff;
}

.char-btn img {
  width: 38px;
  height: 38px;
  box-shadow: 0 0 18px rgba(41,241,168,.18);
}

.char-btn.selected {
  color: #ffffff;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(41,241,168,.24), rgba(16,41,48,.92));
}

.levelup-player-grid,
.leaderboard-panel {
  grid-column: 1 / -1;
  margin: 0;
  gap: 14px;
}

.active-player-panel,
.eth-rewards-panel,
.leaderboard-card {
  padding: 18px;
}

.active-player-panel {
  border-color: rgba(41,241,168,.35);
}

.active-player-panel strong {
  margin-top: 4px;
  font-size: clamp(24px, 2vw, 30px);
}

#activePlayerWallet {
  display: block;
  margin-top: 3px;
  font-size: 13px;
}

.eth-rewards-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(62,232,255,.45);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, rgba(41,241,168,.26), rgba(63,123,255,.28));
}

.eth-rewards-panel::after {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.18) 48%, transparent 56% 100%);
  animation: rewardGlimmer 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes rewardGlimmer {
  0%, 48% { transform: translateX(-28%); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translateX(28%); opacity: 0; }
}

.eth-rewards-value {
  font-size: clamp(28px, 3vw, 40px);
  color: #f8ffff;
  text-shadow: 0 0 18px rgba(62,232,255,.42);
}

.leaderboard-card {
  position: relative;
  min-height: 146px;
}

.leaderboard-card::before {
  content: "Trophy";
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #07111c;
  background: linear-gradient(135deg, var(--gold), #fff0a6);
  font-size: 11px;
  font-weight: 900;
}

.leaderboard-card:nth-child(2)::before {
  content: "Climber";
  background: linear-gradient(135deg, #8af7ff, #8dffcf);
}

.leaderboard-card strong {
  font-size: clamp(28px, 3vw, 38px);
  color: #ffffff;
}

.leaderboard-status {
  padding: 2px 4px;
}

.step {
  height: 44px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9) 0 16%, rgba(151,239,255,.95) 17% 48%, rgba(27,154,202,.95) 49% 100%);
  box-shadow:
    inset 0 6px 0 rgba(255,255,255,.52),
    inset 0 -12px 0 rgba(0,0,0,.18),
    0 17px 26px rgba(0,0,0,.28),
    0 0 22px rgba(62,232,255,.2);
}

.step::after {
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.55) 12% 22%, transparent 24% 100%),
    linear-gradient(to top, rgba(255,255,255,.24), transparent 58%);
}

.steps-scene.theme-sunny .step,
.steps-scene.theme-clouds .step {
  background: linear-gradient(180deg, #ffffff 0 18%, #aef3ff 19% 58%, #38bae0 59% 100%);
  box-shadow: inset 0 6px 0 rgba(255,255,255,.6), inset 0 -12px 0 rgba(0,82,132,.18), 0 18px 28px rgba(8,52,94,.3), 0 0 18px rgba(255,255,255,.22);
}

.steps-scene.theme-rain .step {
  background: linear-gradient(180deg, #dbffff 0 18%, #5be6dc 19% 58%, #178d9f 59% 100%);
  box-shadow: inset 0 6px 0 rgba(255,255,255,.42), inset 0 -12px 0 rgba(0,47,62,.24), 0 18px 30px rgba(0,19,36,.34), 0 0 22px rgba(91,230,220,.2);
}

.steps-scene.theme-snow .step {
  background: linear-gradient(180deg, #ffffff 0 22%, #d9fbff 23% 60%, #91c9ef 61% 100%);
  box-shadow: inset 0 7px 0 rgba(255,255,255,.74), inset 0 -11px 0 rgba(82,134,178,.2), 0 18px 28px rgba(16,51,84,.22), 0 0 26px rgba(230,255,255,.46);
}

.steps-scene.theme-night .step {
  border-color: rgba(158,211,255,.84);
  background: linear-gradient(180deg, #7be7ff 0 16%, #5e7bff 17% 55%, #412c9d 56% 100%);
  box-shadow: inset 0 6px 0 rgba(255,255,255,.4), inset 0 -12px 0 rgba(0,0,0,.28), 0 18px 30px rgba(0,0,0,.36), 0 0 26px rgba(94,123,255,.44);
}

.steps-scene.theme-arcade .step {
  border-color: rgba(157,255,217,.9);
  background: linear-gradient(180deg, #d8fff4 0 16%, #29f1a8 17% 55%, #008f9e 56% 100%);
  box-shadow: inset 0 6px 0 rgba(255,255,255,.48), inset 0 -12px 0 rgba(0,0,0,.24), 0 18px 30px rgba(0,0,0,.32), 0 0 30px rgba(41,241,168,.48);
}

.pill {
  height: 42px;
  border: 2px solid rgba(255,255,255,.46);
  box-shadow:
    inset 0 7px 10px rgba(255,255,255,.42),
    inset 0 -9px 10px rgba(0,0,0,.32),
    0 12px 22px rgba(0,0,0,.32),
    0 0 20px rgba(255,255,255,.22);
}

.pill::before {
  content: "";
  position: absolute;
  inset: 9px 13px auto auto;
  width: 12px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  filter: blur(.2px);
}

.pill.fire {
  background:
    radial-gradient(circle at 28% 28%, #fff3a0 0 12%, transparent 18%),
    linear-gradient(135deg, #ffef60, #ff7a1a 48%, #ff2f5f);
  border-color: rgba(255,226,111,.72);
  box-shadow: inset 0 7px 10px rgba(255,255,255,.38), inset 0 -9px 10px rgba(94,6,0,.34), 0 0 26px rgba(255,99,38,.48), 0 14px 24px rgba(0,0,0,.3);
}

.pill.bomb {
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.55) 0 10%, transparent 16%),
    linear-gradient(135deg, #313846, #080b12 56%, #131927);
  border-color: rgba(255,79,154,.58);
  box-shadow: inset 0 7px 10px rgba(255,255,255,.16), inset 0 -10px 12px rgba(0,0,0,.55), 0 0 24px rgba(255,79,154,.36), 0 14px 24px rgba(0,0,0,.36);
}

.pill-yellow:not(.fire):not(.bomb),
.pill-white:not(.fire):not(.bomb) {
  box-shadow:
    inset 0 7px 10px rgba(255,255,255,.52),
    inset 0 -9px 10px rgba(0,0,0,.24),
    0 0 24px rgba(255,216,107,.36),
    0 12px 22px rgba(0,0,0,.28);
}

.pill-blue:not(.fire):not(.bomb),
.pill-pink:not(.fire):not(.bomb) {
  box-shadow:
    inset 0 7px 10px rgba(255,255,255,.42),
    inset 0 -9px 10px rgba(0,0,0,.32),
    0 0 24px rgba(62,232,255,.28),
    0 12px 22px rgba(0,0,0,.3);
}

.frog-pill {
  filter:
    drop-shadow(0 16px 18px rgba(0,0,0,.4))
    drop-shadow(0 0 18px rgba(41,241,168,.5));
}

.frog-pill::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -8px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.38), transparent 70%);
  z-index: -1;
}

.steps-scene.theme-sunny {
  background:
    radial-gradient(circle at 80% 15%, rgba(255,247,145,.96) 0 5%, rgba(255,223,87,.34) 6% 16%, transparent 19%),
    radial-gradient(ellipse at 18% 24%, rgba(255,255,255,.72) 0 8%, transparent 10%),
    radial-gradient(ellipse at 40% 18%, rgba(255,255,255,.48) 0 10%, transparent 12%),
    linear-gradient(180deg, #31d6ff 0%, #21aee8 50%, #1580cb 100%);
}

.steps-scene.theme-clouds {
  background:
    radial-gradient(ellipse at 14% 22%, rgba(255,255,255,.88) 0 9%, transparent 11%),
    radial-gradient(ellipse at 26% 18%, rgba(255,255,255,.78) 0 12%, transparent 14%),
    radial-gradient(ellipse at 48% 28%, rgba(255,255,255,.58) 0 10%, transparent 13%),
    radial-gradient(ellipse at 82% 20%, rgba(255,255,255,.76) 0 15%, transparent 17%),
    linear-gradient(180deg, #9ee4ff 0%, #5eb9e8 54%, #2a81c1 100%);
}

.steps-scene.theme-rain {
  background:
    radial-gradient(ellipse at 54% 18%, rgba(180,215,235,.2), transparent 24%),
    repeating-linear-gradient(108deg, rgba(218,246,255,.26) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #5b748d 0%, #314a64 56%, #16304f 100%);
}

.steps-scene.theme-snow {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 14%, rgba(255,255,255,.78) 0 1px, transparent 3px),
    radial-gradient(circle at 64% 28%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 52%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    linear-gradient(180deg, #edfaff 0%, #b7dff3 52%, #78a9d1 100%);
}

.steps-scene.theme-night {
  background:
    radial-gradient(circle at 78% 18%, rgba(236,245,255,.95) 0 5%, rgba(236,245,255,.18) 6% 13%, transparent 15%),
    radial-gradient(circle at 18% 16%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 43% 25%, #d9f4ff 0 1px, transparent 2px),
    radial-gradient(circle at 62% 12%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 86% 46%, #bfe9ff 0 1px, transparent 2px),
    linear-gradient(180deg, #091334 0%, #12265b 52%, #070e24 100%);
}

.steps-scene.theme-arcade {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,79,154,.48), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(41,241,168,.42), transparent 20%),
    repeating-linear-gradient(0deg, rgba(62,232,255,.1) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 38px),
    linear-gradient(180deg, #1a145b 0%, #421486 48%, #060714 100%);
}

.steps-scene.theme-sunny::before,
.steps-scene.theme-clouds::before {
  background:
    radial-gradient(ellipse at 12% 30%, rgba(255,255,255,.42) 0 8%, transparent 10%),
    radial-gradient(ellipse at 72% 26%, rgba(255,255,255,.3) 0 11%, transparent 13%),
    linear-gradient(100deg, transparent 0 34%, rgba(255,255,255,.16) 44%, transparent 58% 100%);
  animation: cloudFloat 14s ease-in-out infinite alternate;
}

.steps-scene.theme-rain::before {
  background:
    repeating-linear-gradient(108deg, rgba(255,255,255,.32) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 60%);
  animation: rainFall .58s linear infinite;
}

.steps-scene.theme-snow::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 2px);
  background-size: 42px 42px, 66px 66px;
  animation: snowDrift 7s linear infinite;
}

.steps-scene.theme-night::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(118,201,255,.8) 0 1px, transparent 2px);
  background-size: 56px 44px, 91px 70px;
  animation: starPulse 3s ease-in-out infinite alternate;
}

.steps-scene.theme-arcade::before {
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(41,241,168,.28) 45%, transparent 58% 100%),
    radial-gradient(circle at 50% 100%, rgba(255,216,107,.18), transparent 34%);
  animation: arcadeSweep 3.4s ease-in-out infinite alternate;
}

@keyframes cloudFloat {
  from { transform: translateX(-4%) translateY(0); opacity: .75; }
  to { transform: translateX(5%) translateY(-1%); opacity: .95; }
}

@keyframes arcadeSweep {
  from { transform: translateX(-7%) scale(1); }
  to { transform: translateX(7%) scale(1.04); }
}

.footer {
  background: linear-gradient(180deg, rgba(4,8,18,.92), #03040a);
}

.footer-grid {
  gap: 20px;
}

.foot-card,
.foot-connect {
  border-radius: 18px;
  padding: 14px;
}

.foot-head {
  min-height: 44px;
  border-radius: 12px;
}

@media (max-width: 1200px) {
  .page-wrap {
    width: min(100%, 1080px);
  }

  .game-controls-bar {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .gc-section:nth-of-type(1),
  .gc-section:nth-of-type(2),
  .gc-section:nth-of-type(3),
  .gc-section:nth-of-type(4) {
    grid-column: span 4;
  }

  .gc-actions,
  .gc-status {
    grid-column: span 4;
  }
}

@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }

  .game-viewport {
    height: clamp(520px, 72vw, 620px);
  }
}

@media (max-width: 768px) {
  .topbar {
    justify-content: center;
  }

  .brand {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .topbar > div:last-child {
    width: 100%;
    justify-content: center;
  }

  .game-controls-bar {
    grid-template-columns: 1fr;
  }

  .gc-section:nth-of-type(1),
  .gc-section:nth-of-type(2),
  .gc-section:nth-of-type(3),
  .gc-section:nth-of-type(4),
  .gc-actions,
  .gc-status {
    grid-column: 1;
  }

  .gc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gc-actions .volume-slider {
    grid-column: 1 / -1;
    width: 100%;
  }

  .game-viewport {
    height: min(620px, 78vh);
    min-height: 500px;
    padding: 7px;
    border-radius: 18px;
  }

  .steps-scene {
    min-height: 0;
    width: 100%;
  }
}

@media (max-width: 520px) {
  main {
    padding-inline: 10px;
  }

  .page-wrap {
    padding-inline: 0;
  }

  .panel {
    border-radius: 18px;
    padding: 14px;
  }

  .panel-title {
    font-size: 24px;
  }

  .hero-city {
    height: 260px;
  }

  .game-viewport {
    height: min(560px, 76vh);
    min-height: 460px;
  }

  .gc-actions {
    grid-template-columns: 1fr;
  }

  .char-select-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .active-player-panel,
  .eth-rewards-panel,
  .leaderboard-card,
  .gc-section,
  .gc-actions,
  .gc-status {
    padding: 13px;
  }
}

/* Level-UP UX refinement: HUD, touch controls, social strip, full-board game over */
#gameView .panel-header {
  order: 1;
}

.game-controls-bar {
  order: 2;
}

.game-board-topline {
  order: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: -2px 0 0;
}

.social-icon-row {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.social-icon-btn {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: #eaffff;
  border: 1px solid rgba(62,232,255,.38);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(18,36,70,.92), rgba(5,13,29,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 12px 28px rgba(0,0,0,.24),
    0 0 20px rgba(62,232,255,.12);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}

.social-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.social-icon-btn:hover,
.social-icon-btn:focus-visible {
  color: #ffffff;
  border-color: rgba(41,241,168,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 16px 34px rgba(0,0,0,.28),
    0 0 28px rgba(41,241,168,.28);
  transform: translateY(-2px);
  outline: none;
}

.game-sound-control {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(127,210,255,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 48%),
    rgba(6,13,28,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.2);
}

.sound-toggle {
  width: 46px;
  min-width: 46px;
  padding-inline: 0;
}

.game-sound-control .volume-slider {
  width: 138px;
}

.game-viewport {
  order: 4;
  position: relative;
}

.touch-controls {
  order: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(720px, 100%);
  margin: 0 auto 4px;
}

.touch-control-btn {
  min-height: 64px;
  border: 1px solid rgba(62,232,255,.48);
  border-radius: 18px;
  color: #f7ffff;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(180deg, rgba(34,66,116,.96), rgba(6,18,42,.96));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -10px 18px rgba(0,0,0,.28),
    0 14px 30px rgba(0,0,0,.26),
    0 0 24px rgba(62,232,255,.16);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.touch-control-btn.jump {
  color: #031013;
  border-color: rgba(183,255,188,.8);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(135deg, #4ffff0 0%, #29f1a8 52%, #c5ff66 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -10px 18px rgba(0,80,64,.22),
    0 18px 38px rgba(41,241,168,.24),
    0 0 30px rgba(41,241,168,.24);
}

.touch-control-btn:hover,
.touch-control-btn.is-pressed {
  transform: translateY(-2px);
  filter: saturate(1.16);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.24),
    inset 0 -10px 18px rgba(0,0,0,.24),
    0 18px 38px rgba(0,0,0,.3),
    0 0 30px rgba(62,232,255,.28);
}

.touch-control-btn:active,
.touch-control-btn.is-pressed {
  transform: scale(.98);
}

.gc-status.hidden {
  display: none !important;
}

.gc-actions {
  grid-column: span 4;
  justify-content: center;
}

.gc-actions .btn-primary,
.gc-actions .btn-outline {
  flex: 1 1 130px;
}

.gc-section:nth-of-type(1),
.gc-section:nth-of-type(2),
.gc-section:nth-of-type(3),
.gc-section:nth-of-type(4) {
  grid-column: span 3;
}

.contact-mini {
  margin: 0;
  color: #b8c8df;
  line-height: 1.5;
}

.game-over-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,79,154,.32), transparent 28%),
    radial-gradient(circle at 78% 24%, rgba(41,241,168,.34), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(255,216,107,.24), transparent 36%),
    rgba(3, 6, 16, .78);
  backdrop-filter: blur(8px) saturate(1.25);
}

.game-over-overlay::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.28) 46%, transparent 56% 100%),
    radial-gradient(circle, rgba(255,255,255,.86) 0 1px, transparent 2px);
  background-size: auto, 54px 54px;
  animation: gameOverShimmer 3.2s ease-in-out infinite, gameOverSparkle 2.4s linear infinite;
  pointer-events: none;
}

.game-over-overlay::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  border: 2px solid rgba(62,232,255,.55);
  box-shadow:
    inset 0 0 28px rgba(41,241,168,.18),
    0 0 30px rgba(62,232,255,.22),
    0 0 48px rgba(255,79,154,.18);
  animation: gameOverBorderPulse 1.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.game-over-box {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  text-align: center;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), transparent 28%),
    linear-gradient(180deg, rgba(11,27,58,.92), rgba(5,8,20,.9));
  padding: clamp(26px, 6vw, 58px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 30px 90px rgba(0,0,0,.48),
    0 0 52px rgba(41,241,168,.22);
}

.game-over-kicker {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 950;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.game-over-box h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(48px, 10vw, 108px);
  line-height: .9;
  font-weight: 1000;
  text-shadow:
    0 0 14px rgba(255,255,255,.36),
    0 0 34px rgba(62,232,255,.5),
    0 0 58px rgba(255,79,154,.35);
}

.game-over-box p {
  margin: 0;
  color: #dff8ff;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 850;
}

.game-over-box #gameOverScore {
  color: var(--gold);
  text-shadow: 0 0 22px rgba(255,216,107,.5);
}

.game-over-subtitle {
  margin: 8px 0 22px;
  color: #aeefff;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 800;
}

.game-over-box .btn-primary {
  min-width: min(260px, 100%);
  min-height: 58px;
  justify-content: center;
  font-size: 17px;
}

@keyframes gameOverShimmer {
  0%, 35% { transform: translateX(-28%) rotate(0deg); opacity: 0; }
  52% { opacity: 1; }
  100% { transform: translateX(28%) rotate(0deg); opacity: 0; }
}

@keyframes gameOverSparkle {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 54px 54px; }
}

@keyframes gameOverBorderPulse {
  from { opacity: .58; transform: scale(.995); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 1200px) {
  .gc-section:nth-of-type(1),
  .gc-section:nth-of-type(2),
  .gc-section:nth-of-type(3),
  .gc-section:nth-of-type(4),
  .gc-actions {
    grid-column: span 4;
  }
}

@media (max-width: 768px) {
  .game-board-topline {
    grid-template-columns: 1fr;
  }

  .social-icon-row,
  .game-sound-control {
    grid-column: 1;
    justify-self: center;
  }

  .game-sound-control {
    width: min(360px, 100%);
    justify-content: center;
  }

  .touch-controls {
    gap: 10px;
  }

  .touch-control-btn {
    min-height: 60px;
    border-radius: 16px;
  }
}

@media (max-width: 520px) {
  .social-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .game-sound-control {
    flex-wrap: wrap;
  }

  .game-sound-control .volume-slider {
    width: 100%;
  }

  .touch-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .touch-control-btn {
    min-height: 56px;
    padding-inline: 8px;
    font-size: 13px;
  }

  .game-over-overlay {
    padding: 14px;
  }

  .game-over-overlay::after {
    inset: 8px;
  }

  .game-over-box {
    border-radius: 18px;
    padding: 24px 16px;
  }
}

/* Final gameplay layout polish */
main {
  padding: 14px clamp(10px, 2vw, 24px) 8px;
}

.topbar {
  min-height: 88px;
  padding: 8px clamp(14px, 2.4vw, 28px);
}

.brand-logo {
  height: clamp(58px, 6.6vw, 78px);
}

.page-wrap {
  gap: 14px;
}

#gameView {
  gap: 10px;
  padding: clamp(12px, 1.6vw, 18px);
}

#gameView .panel-header {
  order: 1;
  padding-bottom: 0;
}

#gameView .panel-title {
  font-size: clamp(22px, 2.4vw, 30px);
}

.game-board-topline {
  order: 2;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0;
}

.game-board-topline .gc-actions {
  grid-column: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.game-board-topline .gc-actions .btn-primary,
.game-board-topline .gc-actions .btn-outline {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.game-board-topline .social-icon-row {
  grid-column: 2;
  justify-self: center;
}

.game-board-topline .game-sound-control {
  grid-column: 3;
  justify-self: end;
  width: min(260px, 100%);
}

.game-controls-bar {
  order: 3;
  display: grid;
  grid-template-columns: minmax(165px, 1fr) minmax(210px, 1.08fr) minmax(270px, 1.35fr) minmax(185px, .95fr);
  gap: 8px;
}

.game-controls-bar .gc-actions,
.game-controls-bar .gc-status {
  display: none !important;
}

.gc-section {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 10px;
}

.gc-section:nth-of-type(1),
.gc-section:nth-of-type(2),
.gc-section:nth-of-type(3),
.gc-section:nth-of-type(4) {
  grid-column: auto;
}

.game-controls-bar .label,
.label {
  font-size: 10px;
  letter-spacing: .11em;
}

.game-controls-bar .stat {
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.15;
}

.gc-inline,
.badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12px;
}

.badge {
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.2;
}

.gc-input {
  width: 56px;
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 8px;
}

.char-select-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 5px;
}

.char-btn {
  min-height: 42px;
  padding: 5px 4px;
  border-radius: 9px;
  gap: 4px;
  font-size: 11px;
}

.char-btn img {
  width: 24px;
  height: 24px;
}

.game-viewport {
  order: 4;
  height: clamp(500px, 57vh, 700px);
  min-height: 500px;
  padding: 8px;
  border-radius: 18px;
}

.steps-scene {
  border-radius: 13px;
}

.step {
  width: clamp(176px, 24vw, 270px);
  height: clamp(36px, 3.6vw, 44px);
  border-radius: 14px;
}

.step-1 { bottom: 9%; left: 10%; }
.step-2 { bottom: 26%; left: 46%; }
.step-3 { bottom: 43%; left: 16%; }
.step-4 { bottom: 60%; left: 42%; }
.step-5 { bottom: 76%; left: 24%; }

.touch-controls {
  order: 5;
  margin-top: 0;
  padding-top: 0;
}

.post-game-stats {
  order: 6;
  display: grid;
  grid-template-columns: minmax(190px, 1.05fr) minmax(150px, .72fr) minmax(180px, .86fr) minmax(180px, .86fr);
  gap: 8px;
  align-items: stretch;
}

.post-game-stats .active-player-panel,
.post-game-stats .eth-rewards-panel,
.post-game-stats .leaderboard-card {
  min-height: 0;
  border-radius: 10px;
  padding: 10px;
}

.post-game-stats .active-player-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.post-game-stats .active-player-panel strong,
.post-game-stats .eth-rewards-value,
.post-game-stats .leaderboard-card strong {
  margin: 2px 0 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.05;
}

#activePlayerWallet,
.post-game-stats .leaderboard-card span {
  font-size: 11px;
  line-height: 1.25;
}

.post-game-stats .btn-outline {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 11px;
}

.eth-rewards-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.post-game-stats .leaderboard-card {
  display: grid;
  gap: 2px;
}

.post-game-stats .leaderboard-card::before {
  content: none;
  display: none;
}

.gc-status,
.gc-status::before {
  display: none !important;
}

.step.platform-hit,
.step.platform-bounce {
  will-change: transform, filter;
}

.step.platform-hit {
  animation: platform-sway 4s ease-in-out infinite, platform-land-pulse .34s ease-out;
}

.step.platform-bounce {
  animation: platform-sway 4s ease-in-out infinite, platform-bounce-pulse .34s ease-out;
}

.pill.ball-bounce {
  animation: ball-bounce-pop .3s ease-out;
}

.pill.ball-bounce::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.62);
  box-shadow: 0 0 18px rgba(62,232,255,.45), 0 0 28px rgba(41,241,168,.24);
  animation: ball-sparkle-ring .3s ease-out forwards;
  pointer-events: none;
}

@keyframes platform-land-pulse {
  0% { filter: brightness(1); box-shadow: inherit; }
  42% {
    filter: brightness(1.35) saturate(1.22);
    box-shadow:
      inset 0 6px 0 rgba(255,255,255,.58),
      inset 0 -12px 0 rgba(0,0,0,.18),
      0 17px 26px rgba(0,0,0,.28),
      0 0 34px rgba(41,241,168,.58);
  }
  100% { filter: brightness(1); }
}

@keyframes platform-bounce-pulse {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.45) saturate(1.35); }
  50% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}

@keyframes ball-bounce-pop {
  0% { transform: scale(1); filter: brightness(1); }
  38% { transform: scale(1.16); filter: brightness(1.45) saturate(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes ball-sparkle-ring {
  0% { transform: scale(.6); opacity: .95; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (max-width: 1100px) {
  .game-board-topline {
    grid-template-columns: 1fr auto 1fr;
  }

  .game-controls-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-game-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  main {
    padding-inline: 8px;
  }

  #gameView {
    gap: 8px;
  }

  .game-board-topline {
    grid-template-columns: 1fr;
  }

  .game-board-topline .gc-actions,
  .game-board-topline .social-icon-row,
  .game-board-topline .game-sound-control {
    grid-column: 1;
    justify-self: center;
  }

  .game-board-topline .gc-actions {
    width: 100%;
  }

  .game-controls-bar,
  .post-game-stats {
    grid-template-columns: 1fr;
  }

  .char-select-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-viewport {
    height: clamp(460px, 64vh, 580px);
    min-height: 460px;
  }
}

@media (max-width: 520px) {
  .game-board-topline .gc-actions {
    flex-wrap: wrap;
  }

  .game-board-topline .gc-actions .btn-primary,
  .game-board-topline .gc-actions .btn-outline {
    flex: 1 1 32%;
  }

  .post-game-stats .active-player-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .game-viewport {
    height: min(520px, 70vh);
    min-height: 420px;
    padding: 6px;
  }

  .step {
    width: clamp(150px, 52vw, 190px);
  }

  .frog-pill {
    width: 62px;
    height: 62px;
  }
}

/* Final Bluehost-ready top control cleanup */
.topbar {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(150px, 1fr) auto;
  align-items: center;
  column-gap: clamp(12px, 2vw, 22px);
}

.topbar > div:last-child,
.topbar-wallet-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar-social-slot {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.topbar .social-icon-row {
  grid-column: auto;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.topbar .social-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #eaffff;
  border-color: rgba(62,232,255,.36);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(18,36,70,.88), rgba(5,13,29,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 20px rgba(0,0,0,.22),
    0 0 16px rgba(62,232,255,.1);
}

.topbar .social-icon-btn svg {
  width: 20px;
  height: 20px;
}

#pauseBtn,
.wallet-hud-card,
.app-wallet-state,
.leaderboard-card:has(#bottomPlayerScore),
#bottomPlayerScore,
#bottomPlayerScore ~ *,
#bottomPlayerScore + span {
  display: none !important;
}

.game-board-topline {
  grid-template-columns: minmax(210px, .82fr) minmax(420px, 1.55fr) minmax(190px, .72fr);
  align-items: stretch;
  gap: 10px;
  min-height: 0;
}

.game-board-topline .gc-actions {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}

.game-board-topline .gc-actions .btn-primary,
.game-board-topline .gc-actions .btn-outline {
  min-height: 54px;
  border-radius: 12px;
  font-size: 13px;
}

.top-game-stats {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(140px, .9fr) minmax(150px, 1fr);
  gap: 8px;
  min-width: 0;
}

.top-game-stats .active-player-panel,
.top-game-stats .eth-rewards-panel,
.top-game-stats .leaderboard-card {
  min-height: 54px;
  border-radius: 12px;
  padding: 8px 10px;
}

.top-game-stats .active-player-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.top-game-stats .active-player-panel strong,
.top-game-stats .eth-rewards-value,
.top-game-stats .leaderboard-card strong {
  margin-top: 1px;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.04;
}

.top-game-stats #activePlayerWallet,
.top-game-stats .leaderboard-card span {
  font-size: 10px;
  line-height: 1.18;
}

.top-game-stats .btn-outline {
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 10px;
}

.top-game-stats .leaderboard-card {
  display: grid;
  gap: 1px;
}

.top-game-stats .leaderboard-card::before {
  content: none;
  display: none;
}

.game-board-topline .game-sound-control {
  align-self: stretch;
  min-height: 54px;
  width: 100%;
  justify-self: stretch;
  justify-content: flex-end;
}

.game-controls-bar {
  grid-template-columns: minmax(150px, .72fr) minmax(420px, 1.68fr) minmax(180px, .78fr);
}

.current-run-card {
  grid-column: 1;
}

.character-card {
  grid-column: 2;
}

.entry-card {
  grid-column: 3;
}

.character-card .char-select-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.character-card .char-btn {
  min-height: 58px;
  padding: 7px 6px;
  border-radius: 12px;
  font-size: 12px;
}

.character-card .char-btn img {
  width: 34px;
  height: 34px;
}

.post-game-stats,
.leaderboard-panel:empty,
.levelup-player-grid:empty {
  display: none !important;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(220px, auto) 1fr;
  }

  .topbar-social-slot {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .game-board-topline {
    grid-template-columns: minmax(190px, .78fr) minmax(360px, 1.45fr) minmax(180px, .72fr);
  }

  .top-game-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .game-board-topline,
  .game-controls-bar {
    grid-template-columns: 1fr;
  }

  .game-board-topline .gc-actions,
  .top-game-stats,
  .game-board-topline .game-sound-control,
  .current-run-card,
  .character-card,
  .entry-card {
    grid-column: 1;
  }

  .top-game-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-game-stats .high-score-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .topbar {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .topbar > div:last-child,
  .topbar-wallet-area {
    justify-content: center;
  }

  .game-board-topline .gc-actions,
  .top-game-stats,
  .character-card .char-select-row {
    grid-template-columns: 1fr 1fr;
  }

  .top-game-stats .active-player-panel,
  .top-game-stats .eth-rewards-panel,
  .top-game-stats .high-score-card {
    grid-column: auto;
  }

  .top-game-stats .high-score-card {
    grid-column: 1 / -1;
  }
}