@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Baloo+2:wght@400;600;700&family=Bree+Serif&display=swap');

    :root {
      --ink:#1a1d2b;
      --paper:#f6f5ff;
      --sun:#ffd36b;
      --leaf:#4a7c3a;
      --leaf-dark:#2c4b25;
      --stone:#7c7f8f;
      --accent:#6f5cff;
      --accent-deep:#4b3bd9;
      --glow:rgba(111,92,255,.35);
      --card:#ffffff;
      --card-edge:rgba(111,92,255,.18);
      --shadow:0 16px 30px rgba(15,18,35,.18);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:"Fredoka","Baloo 2","Nunito","Trebuchet MS",sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 20% 10%, rgba(111,92,255,.2), transparent 40%),
        radial-gradient(circle at 90% 20%, rgba(255,211,107,.2), transparent 45%),
        linear-gradient(180deg, #f4f4ff 0%, #f7f1ff 40%, #fbe9d6 100%);
      min-height:100vh;
      min-height:100svh;
    }
    html, body{
      width:100%;
      height:100%;
      overflow:hidden;
      -webkit-text-size-adjust:none;
      -ms-text-size-adjust:none;
      text-size-adjust:none;
    }
    html{
      font-size:16px;
    }
    .yard-wrap{
      width:100vw;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px 12px;
    }
    .yard-header{
      position:absolute;
      top:calc(20px + env(safe-area-inset-top, 0px));
      left:12px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      pointer-events:auto;
      z-index:10;
    }
    .yard-title{
      font-size:15px;
      font-weight:800;
      letter-spacing:.4px;
      background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,245,225,.9));
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(111,92,255,.18);
      box-shadow:0 10px 20px rgba(15,18,35,.16);
      backdrop-filter:blur(8px);
      pointer-events:auto;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-family:"Bree Serif","Cooper Black","Trebuchet MS",serif;
      text-transform:uppercase;
      color:var(--ink);
      max-width:min(62vw, 300px);
      overflow:hidden;
    }
    .yard-title span{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .yard-title .yard-title-text{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
      min-width:0;
    }
    .yard-title .yard-title-name{
      font-size:15px;
      font-weight:800;
      letter-spacing:.4px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .yard-title .yard-title-level{
      font-size:11px;
      font-weight:800;
      letter-spacing:.5px;
      text-transform:uppercase;
      color:var(--accent-deep);
      white-space:nowrap;
    }
    .yard-shield{
      width:36px;
      height:36px;
      border-radius:8px;
      object-fit:cover;
      display:none;
      background:transparent;
    }
    .yard-stats{
      position:absolute;
      left:12px;
      right:12px;
      bottom:calc(32px + env(safe-area-inset-bottom, 0px));
      background:rgba(255,255,255,.5);
      border-radius:16px;
      border:none;
      box-shadow:0 10px 20px rgba(15,18,35,.12);
      padding:12px 14px;
      display:grid;
      grid-template-columns:auto 1fr;
      align-items:center;
      gap:12px;
      font-size:13px;
      color:var(--stone);
      backdrop-filter:blur(10px);
      font-family:"Baloo 2","Fredoka","Trebuchet MS",sans-serif;
      background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,245,225,.8));
      box-shadow:0 12px 24px rgba(15,18,35,.14);
    }
    .stats-inline{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      justify-content:flex-end;
    }
    .stats-inline .stat-pill{
      display:flex;
      align-items:center;
      gap:6px;
      padding:8px 16px 8px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.55);
      white-space:nowrap;
      font-weight:700;
      color:var(--ink);
      box-shadow:0 6px 12px rgba(15,18,35,.12);
      border:none;
      text-align:left;
      min-width:150px;
      justify-content:flex-start;
    }
    .stats-inline .stat-pill.is-button{
      cursor:pointer;
    }
    .stats-inline .stat-pill.is-button:focus-visible{
      outline:3px solid var(--accent);
      outline-offset:2px;
    }
    .stats-inline .stat-pill span{
      color:var(--accent-deep);
      font-size:11px;
      letter-spacing:.4px;
      text-transform:uppercase;
      font-weight:800;
    }
    .yard-stats .stat-avatar{
      display:flex;
      align-items:center;
      gap:10px;
      background:transparent;
      border-radius:12px;
      padding:0;
      border:none;
      position:relative;
      overflow:hidden;
      cursor:pointer;
      text-align:left;
    }
    .yard-stats img{
      width:42px;
      height:42px;
      border-radius:12px;
      border:none;
      background:transparent;
      object-fit:cover;
      display:none;
    }
    .stat-label{
      text-transform:uppercase;
      letter-spacing:.6px;
      font-size:10px;
      color:var(--accent-deep);
      font-weight:800;
      font-family:"Bree Serif","Cooper Black","Trebuchet MS",serif;
    }
    .stat-value{
      font-size:15px;
      font-weight:800;
      color:var(--ink);
      font-family:"Bree Serif","Cooper Black","Trebuchet MS",serif;
    }
    .stat-sub{
      font-size:12px;
      color:var(--stone);
    }
    .stat-name{
      font-size:15px;
      font-weight:800;
      color:var(--ink);
      font-family:"Bree Serif","Cooper Black","Trebuchet MS",serif;
    }
    .stat-level{
      font-size:11px;
      color:var(--accent-deep);
      font-weight:800;
      letter-spacing:.3px;
      text-transform:uppercase;
    }
    .yard-hero{
      width:min(92vw, 460px);
      aspect-ratio:9/16;
      height:auto;
      background:url('/assets/app/v2/bg_yard_4.webp') center/100% 100% no-repeat;
      position:relative;
      overflow:hidden;
    }
    .windmill-blades{
      position:absolute;
      left:0;
      top:0;
      width:0;
      height:0;
      pointer-events:none;
      z-index:1;
      transform-origin:50% 50%;
      animation:windmillSpin 7.5s linear infinite;
      user-select:none;
      -webkit-user-select:none;
      -webkit-user-drag:none;
    }
    .yard-walkers{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:1;
      overflow:hidden;
    }
    .yard-walker{
      position:absolute;
      left:0;
      top:0;
      width:0;
      height:0;
      transform:translate(-50%, -50%);
      image-rendering:auto;
      pointer-events:none;
      user-select:none;
      -webkit-user-select:none;
      -webkit-user-drag:none;
      filter:drop-shadow(0 3px 6px rgba(15,18,35,.2));
      opacity:.95;
    }
    @keyframes windmillSpin{
      to{ transform:rotate(360deg); }
    }
    .reveal-ready .yard-title{
      animation:fadeSlide .6s ease-out both;
    }
    .reveal-ready .station{
      animation:popIn .55s ease-out both;
    }
    .station[data-delay]{
      animation-delay:var(--delay, 0ms);
    }
    .station{
      position:absolute;
      border:0;
      padding:0;
      margin:0;
      cursor:pointer;
      background:transparent;
      border-radius:18px;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      text-decoration:none;
      color:var(--ink);
      box-shadow:none;
    }
    .station:hover{
      transform:translateY(-2px) scale(1.01);
      background:rgba(111,92,255,.06);
      box-shadow:0 10px 18px rgba(15,18,35,.12);
    }
    .station:focus-visible{
      outline:3px solid var(--accent);
      outline-offset:2px;
    }
    .station span{
      display:none;
    }
    .guest-screen{
      position:fixed;
      inset:0;
      height:100vh;
      height:100svh;
      width:100vw;
      background:rgba(10,12,20,.35);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px 16px;
      z-index:60;
    }
    .guest-frame{
      width:min(92vw, 460px);
      aspect-ratio:9/16;
      border-radius:24px;
      background:url('/assets/app/v2/bg_load_v2.webp') center/cover no-repeat;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      padding:120px 16px 36px;
      box-shadow:0 18px 36px rgba(15,18,35,.2);
      overflow:hidden;
    }
    .yb-modal{
      display:none;
    }
    .yb-modal.active{
      display:flex;
    }
    body.modal-open .yard-wrap,
    body.modal-open .yard-header,
    body.modal-open .yard-stats,
    body.modal-open .station{
      pointer-events:none;
    }
    .guest-card{
      width:min(90vw, 360px);
      background:linear-gradient(160deg, rgba(255,238,206,.78), rgba(255,248,235,.7));
      border-radius:14px;
      padding:12px;
      backdrop-filter:blur(10px);
      box-shadow:0 10px 18px rgba(77,38,10,.2);
      border:1px solid rgba(255,210,140,.7);
      text-align:center;
    }
    .guest-actions{
      display:none;
    }
    .guest-btn{
      flex:1;
      border:none;
      border-radius:12px;
      padding:10px 12px;
      font-size:14px;
      font-weight:800;
      cursor:pointer;
      color:#fff;
      background:linear-gradient(135deg, #ffb347, #f07a3c);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 8px 16px rgba(15,18,35,.25);
      border:1px solid rgba(255,201,120,.7);
      text-shadow:0 1px 2px rgba(15,18,35,.25);
    }
    .guest-btn.is-loading{
      opacity:.9;
      pointer-events:none;
      position:relative;
      gap:8px;
    }
    .guest-btn.is-loading::after{
      content:'';
      width:14px;
      height:14px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.7);
      border-top-color:rgba(255,255,255,.15);
      animation:guestSpin .7s linear infinite;
    }
    @keyframes guestSpin{
      to{ transform:rotate(360deg); }
    }
    .guest-btn.secondary{
      background:rgba(255,255,255,.92);
      color:#a24b1d;
    }
    .guest-panel{
      width:100%;
      background:linear-gradient(160deg, rgba(255,243,222,.8), rgba(255,252,244,.7));
      border-radius:12px;
      padding:10px;
      backdrop-filter:blur(8px);
      box-shadow:inset 0 0 0 1px rgba(255,214,157,.6);
      text-align:left;
      margin-top:12px;
    }
    .google-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      width:100%;
      border:1px solid rgba(255,201,120,.7);
      border-radius:14px;
      padding:10px 12px;
      background:rgba(255,250,242,.75);
      color:#1f1f1f;
      font-weight:600;
      font-size:14px;
      text-decoration:none;
      box-shadow:0 6px 14px rgba(77,38,10,.18);
    }
    .google-btn img{
      width:18px;
      height:18px;
      display:block;
    }
    .guest-divider{
      display:flex;
      align-items:center;
      gap:8px;
      color:#9a5a2c;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.6px;
      margin:10px 0;
    }
    .guest-divider::before,
    .guest-divider::after{
      content:"";
      height:1px;
      flex:1;
      background:rgba(221,150,80,.6);
    }
    .guest-form .input{
      background:rgba(255,255,255,.88);
      border:1px solid rgba(233,170,106,.7);
      border-radius:14px;
      box-shadow:0 6px 14px rgba(77,38,10,.12);
      color:#3b2010;
    }
    .guest-form .input:focus{
      outline:2px solid rgba(255,193,120,.6);
      border-color:rgba(226,139,70,.9);
    }
    .guest-tabs{
      display:flex;
      gap:6px;
      margin-bottom:12px;
      background:rgba(255,241,220,.65);
      border-radius:0;
      padding:0;
      box-shadow:none;
    }
    .guest-tab{
      flex:1;
      border:none;
      border-radius:12px;
      padding:8px 16px 8px 14px;
      font-weight:800;
      cursor:pointer;
      background:rgba(255,255,255,.7);
      color:#9a5a2c;
      box-shadow:0 6px 14px rgba(77,38,10,.12);
      appearance:none;
      -webkit-appearance:none;
      outline:none;
    }
    .guest-tab:focus-visible{
      outline:2px solid rgba(255,193,120,.6);
      outline-offset:2px;
    }
    .guest-tab.active{
      background:linear-gradient(135deg, #ffb347, #f07a3c);
      color:#fff;
      box-shadow:0 8px 16px rgba(77,38,10,.2);
    }
    .guest-form{
      display:none;
      gap:8px;
      flex-direction:column;
    }
    .guest-form.is-active{
      display:flex;
    }
    .guest-note{
      font-size:12px;
      color:#9a5a2c;
      margin-top:6px;
      text-shadow:0 1px 2px rgba(15,18,35,.35);
    }
    .guest-build{
      margin-top:8px;
      text-align:center;
      font-size:11px;
      color:rgba(26,29,43,.6);
      letter-spacing:.3px;
    }
    .yard-wrap{
      opacity:0;
      transform:translateY(6px) var(--yard-wrap-rotate, none);
      transition:opacity .5s ease, transform .5s ease;
    }
    .yard-wrap.is-ready{
      opacity:1;
      transform:translateY(0) var(--yard-wrap-rotate, none);
    }
    .track-ui{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:4px;
    }
    .track-hud{
      display:flex;
      justify-content:space-between;
      gap:8px;
      font-size:10px;
      color:var(--stone);
      text-transform:uppercase;
      letter-spacing:.6px;
      font-weight:800;
    }
    .track-hud strong{
      display:block;
      color:var(--ink);
      font-size:18px;
      letter-spacing:0;
    }
    .track-desc-title{
      font-size:12px;
      font-weight:800;
      margin:6px 0 2px;
      color:var(--ink);
    }
    .track-desc{
      font-size:11px;
      line-height:1.25;
      margin:0;
      color:var(--stone);
    }
    .track-lane{
      position:relative;
      width:100%;
      height:320px;
      border-radius:16px;
      overflow:visible;
      box-shadow:0 8px 16px rgba(15,18,35,.12);
      background:transparent;
    }
    .track-canvas{
      overflow:hidden;
    }
    .track-statusbar{
      position:absolute;
      top:8px;
      left:8px;
      right:8px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:8px 16px 8px 14px;
      border-radius:14px;
      background:rgba(12,14,24,.65);
      color:#fff;
      font-weight:800;
      letter-spacing:.5px;
      text-transform:uppercase;
      font-size:11px;
      z-index:4;
      pointer-events:none;
    }
    .track-statusbar span{
      display:block;
      font-size:16px;
      font-weight:900;
      letter-spacing:.2px;
      margin-top:2px;
    }
    .track-statusbar .track-stat{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
      min-width:90px;
    }
    .track-statusbar .track-stat:last-child{
      align-items:flex-end;
      text-align:right;
    }
    .track-lane.is-hit{
      animation:trackLaneHit .18s ease;
    }
    .track-lane.is-miss{
      animation:trackLaneMiss .22s ease;
    }
    .track-lane.is-shake{
      animation:trackLaneShake .32s ease;
    }
    .track-status-bars{
      position:absolute;
      top:44px;
      left:10px;
      right:10px;
      display:flex;
      justify-content:space-between;
      gap:12px;
      pointer-events:none;
      z-index:2;
    }
    .track-flow{
      flex:1;
      max-width:46%;
      background:rgba(255,255,255,.8);
      border-radius:14px;
      padding:8px 10px;
      box-shadow:0 6px 12px rgba(15,18,35,.12);
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .track-timer-line{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .track-flow-label,
    .track-cadence-label{
      font-size:10px;
      font-weight:800;
      color:var(--ink);
      letter-spacing:.4px;
      text-transform:uppercase;
      margin-bottom:0;
    }
    .track-race-clock{
      font-family:"Trebuchet MS","Verdana","Arial",sans-serif;
      font-variant-numeric:tabular-nums;
      font-size:15px;
      line-height:1;
      color:#122043;
      letter-spacing:.02em;
    }
    .track-flow-meter{
      position:relative;
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(16,28,54,.18);
      box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
    }
    .track-flow-fill{
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:100%;
      border-radius:999px;
      background:linear-gradient(90deg,#52e08f 0%,#a9f06d 55%,#ffd166 100%);
      transition:width .14s linear, filter .18s ease, opacity .18s ease;
    }
    .track-flow-fill.is-low{
      background:linear-gradient(90deg,#ffad66 0%,#ff7f5e 55%,#ff5454 100%);
      filter:saturate(1.05);
    }
    .track-flow-fill.is-critical{
      background:linear-gradient(90deg,#ff5c5c 0%,#ff3b3b 65%,#d91f1f 100%);
      animation:trailRunFatigueFlash .55s ease-in-out infinite;
      box-shadow:0 0 10px rgba(255,88,88,.55);
    }
    .track-cadence{
      flex:1;
      max-width:46%;
      background:rgba(255,255,255,.8);
      border-radius:14px;
      padding:8px 10px;
      box-shadow:0 6px 12px rgba(15,18,35,.12);
    }
    .track-cadence-bar{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:4px;
    }
    .track-cadence-seg{
      height:10px;
      border-radius:6px;
      background:rgba(0,0,0,.08);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
    }
    .track-cadence.is-tier-1 .track-cadence-seg:nth-child(-n+2){
      background:#ffd36b;
    }
    .track-cadence.is-tier-2 .track-cadence-seg{
      background:#7dd97d;
    }
    .track-cadence.is-tier-2{
      box-shadow:0 0 18px rgba(125,217,125,.55), 0 6px 12px rgba(15,18,35,.12);
      animation:cadenceGlow .7s ease-in-out infinite;
    }
    @keyframes cadenceGlow{
      0%,100%{ filter:brightness(1); }
      50%{ filter:brightness(1.25); }
    }
    @keyframes trackLaneHit{
      0%{ transform:translateY(0); filter:brightness(1) saturate(1); }
      55%{ transform:translateY(-1px); filter:brightness(1.08) saturate(1.15) drop-shadow(0 0 18px rgba(120,255,160,.45)); }
      100%{ transform:translateY(0); filter:brightness(1) saturate(1); }
    }
    @keyframes trackLaneMiss{
      0%{ transform:translateY(0); filter:brightness(1) saturate(1); }
      45%{ transform:translateY(1px); filter:brightness(.95) saturate(1.2) drop-shadow(0 0 14px rgba(255,90,90,.35)); }
      100%{ transform:translateY(0); filter:brightness(1) saturate(1); }
    }
    @keyframes trackLaneBounce{
      0%{ transform:translate(-50%, -50%) scaleX(var(--track-flip, 1)) scale(.94); }
      60%{ transform:translate(-50%, -50%) scaleX(var(--track-flip, 1)) translateY(-4px) scale(1.05); }
      100%{ transform:translate(-50%, -50%) scaleX(var(--track-flip, 1)) scale(1); }
    }
    @keyframes trackLaneShake{
      0%{ transform:translate3d(0,0,0) rotate(0deg); }
      20%{ transform:translate3d(-2px, 1px, 0) rotate(-0.4deg); }
      40%{ transform:translate3d(2px, -1px, 0) rotate(0.4deg); }
      60%{ transform:translate3d(-1px, 1px, 0) rotate(-0.3deg); }
      80%{ transform:translate3d(1px, -1px, 0) rotate(0.3deg); }
      100%{ transform:translate3d(0,0,0) rotate(0deg); }
    }
    #modal-track .track-lane{
      height:min(56vh, 420px);
      min-height:340px;
      flex:1 1 auto;
    }
    #modal-track:not(.is-playing) .minigame-playable{
      max-height:60vh;
      min-height:340px;
    }
    .minigame-modal.is-playing#modal-track .track-lane{
      height:100%;
      width:100%;
      flex:1;
      border-radius:0;
      box-shadow:none;
    }
    .track-canvas{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
      z-index:2;
    }
    .track-lane::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(210,220,245,.85), rgba(210,220,245,0) 35%),
        radial-gradient(circle at 50% 52%, rgba(0,0,0,.12), transparent 55%),
        linear-gradient(90deg, rgba(10,12,20,.2), transparent 22%, transparent 78%, rgba(10,12,20,.2));
      pointer-events:none;
      mix-blend-mode:multiply;
    }
    .track-lane.is-turbo::before{
      content:"";
      position:absolute;
      left:var(--turbo-left, 0px);
      width:var(--turbo-width, 0px);
      bottom:0;
      height:100%;
      background:
        linear-gradient(180deg, rgba(255,236,165,0) 0%, rgba(255,220,120,.32) 32%, rgba(255,190,80,.82) 100%);
      mix-blend-mode:screen;
      opacity:.95;
      filter:blur(0.6px) drop-shadow(0 0 16px rgba(255,210,120,.7));
      transform-origin:50% 100%;
      transform:scaleX(.88);
      clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%);
      pointer-events:none;
      z-index:1;
      animation:turboPulse .7s ease-in-out infinite;
    }
    @keyframes turboPulse{
      0%,100%{ transform:scaleY(0.98); opacity:0.8; }
      50%{ transform:scaleY(1.05); opacity:1; }
    }
    .minigame-modal.is-playing#modal-track .track-avatar{
      opacity:1;
      pointer-events:none;
    }
    #modal-track .track-avatar{
      display:none;
    }
    .minigame-modal:not(.is-playing) .track-lane::after{
      display:none;
    }
    .obstacle-lane{
      --lane-width:800px;
      position:absolute;
      inset:0;
      background:url('/assets/app/v2/obstacle_lane.webp') 0 50% / auto 100% repeat-x;
      will-change:background-position;
    }
    .obstacle-stage{
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .obstacle-avatar{
      position:absolute;
      left:16%;
      top:52%;
      width:92px;
      height:92px;
      --obstacle-scale-x:1;
      --obstacle-scale-y:1;
      --obstacle-offset-y:0px;
      transform:translate(-50%, -50%) translateY(var(--obstacle-offset-y)) scale(var(--obstacle-scale-x), var(--obstacle-scale-y));
      object-fit:contain;
      pointer-events:none;
      outline:none;
      user-select:none;
      -webkit-user-select:none;
      -webkit-user-drag:none;
      -webkit-tap-highlight-color:transparent;
      filter:drop-shadow(0 6px 10px rgba(15,18,35,.25));
      transition:transform .16s ease;
    }
    .obstacle-avatar.is-running{
      animation:obstacleRunBounce .35s ease-in-out infinite;
    }
    .obstacle-avatar.is-jumping{
      --obstacle-offset-y:-34px;
    }
    .obstacle-avatar.is-ducking{
      --obstacle-offset-y:14px;
      --obstacle-scale-y:.85;
    }
    .obstacle-avatar.is-hit-roll{
      animation:obstacleHitRoll 1.12s cubic-bezier(.2,.74,.24,1);
    }
    .obstacle-avatar.is-dizzy{
      animation:obstacleDizzy .56s ease-in-out;
    }
    .obstacle-stars{
      position:absolute;
      left:16%;
      top:33%;
      transform:translate(-50%, -50%);
      pointer-events:none;
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-size:28px;
      font-weight:900;
      letter-spacing:8px;
      color:#ffe37a;
      text-shadow:
        -1px -1px 0 #7a4b00,
        1px -1px 0 #7a4b00,
        -1px 1px 0 #7a4b00,
        1px 1px 0 #7a4b00,
        0 6px 14px rgba(0,0,0,.35);
      opacity:0;
      z-index:8;
    }
    .obstacle-stars.is-visible{
      animation:obstacleStarsSpin .62s ease-out forwards;
    }
    .obstacle-item{
      position:absolute;
      bottom:15%;
      width:100px;
      height:64px;
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      filter:drop-shadow(0 6px 10px rgba(15,18,35,.25));
      transform-origin:50% 100%;
    }
    .obstacle-item.tire{
      top:0;
      width:56px;
      height:84px;
      transform-origin:50% 0%;
    }
    .obstacle-item.gold{
      filter:
        drop-shadow(0 0 14px rgba(255,212,72,.92))
        drop-shadow(0 0 34px rgba(255,206,60,.72))
        drop-shadow(0 8px 12px rgba(15,18,35,.26));
      animation:obstacleGoldPulse .86s ease-in-out infinite;
    }
    .obstacle-item.pizza{
      filter:
        drop-shadow(0 0 12px rgba(255,146,70,.82))
        drop-shadow(0 0 24px rgba(255,228,98,.66))
        drop-shadow(0 8px 12px rgba(15,18,35,.26));
      animation:obstaclePizzaFlash 1.05s ease-in-out infinite;
    }
    .trail-run-popup.is-obstacle-gold{
      font-size:48px;
      color:#fff6bf;
      text-shadow:
        -3px -3px 0 #8b5400,
        3px -3px 0 #8b5400,
        -3px 3px 0 #8b5400,
        3px 3px 0 #8b5400,
        0 0 22px rgba(255,208,76,.9),
        0 10px 18px rgba(0,0,0,.42);
    }
    .trail-run-popup.is-obstacle-gold .trail-run-popup-sub{
      font-size:24px;
      color:#ffe78b;
    }
    .trail-run-popup.is-obstacle-pizza{
      font-size:44px;
      color:#fff1d2;
      text-shadow:
        -3px -3px 0 #7d2600,
        3px -3px 0 #7d2600,
        -3px 3px 0 #7d2600,
        3px 3px 0 #7d2600,
        0 0 24px rgba(255,120,64,.84),
        0 10px 18px rgba(0,0,0,.42);
    }
    .trail-run-popup.is-obstacle-pizza .trail-run-popup-sub{
      font-size:24px;
      color:#ffd39d;
    }
    .trail-run-popup.is-obstacle-hit{
      font-size:40px;
      color:#ffd9d9;
      text-shadow:
        -2px -2px 0 #5e1200,
        2px -2px 0 #5e1200,
        -2px 2px 0 #5e1200,
        2px 2px 0 #5e1200,
        0 0 18px rgba(255,88,88,.8),
        0 10px 16px rgba(0,0,0,.4);
    }
    .trail-run-popup.is-obstacle-hit .trail-run-popup-sub{
      font-size:21px;
      color:#ffe4cb;
    }
    .obstacle-controls{
      display:flex;
      gap:0;
      align-items:stretch;
      justify-content:stretch;
      width:100%;
      height:100%;
    }
    .obstacle-btn{
      flex:1;
      border:none;
      border-radius:12px;
      background:transparent;
      box-shadow:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:transform .1s ease, filter .1s ease, box-shadow .1s ease;
      touch-action:none;
      -webkit-tap-highlight-color:transparent;
    }
    .obstacle-btn:focus{
      outline:none;
    }
    .obstacle-btn:active{
      transform:scale(.98);
      filter:brightness(1.08) saturate(1.05);
      box-shadow:0 0 22px rgba(255,211,107,.55);
    }
    .obstacle-btn.is-pressed{
      transform:scale(.98);
      filter:brightness(1.08) saturate(1.05);
      box-shadow:0 0 22px rgba(255,211,107,.55);
    }
    .obstacle-btn:disabled{
      opacity:.5;
      cursor:not-allowed;
      filter:grayscale(.2);
    }
    .obstacle-btn img{
      display:block;
      pointer-events:none;
      user-select:none;
      -webkit-user-select:none;
    }
    #modal-obstacle.minigame-modal.is-playing.is-landscape .obstacle-controls .obstacle-btn{
      padding:6px 10px;
      overflow:visible;
    }
    #modal-obstacle.minigame-modal.is-playing.is-landscape .obstacle-controls .obstacle-btn img{
      width:100%;
      height:100%;
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      object-position:center;
    }
    .track-avatar{
      position:absolute;
      top:82%;
      left:50%;
      width:96px;
      height:96px;
      transform:translate(-50%, -50%) scaleX(var(--track-flip, 1));
      border-radius:0;
      background:transparent;
      object-fit:contain;
      box-shadow:none;
      border:none;
      outline:none;
      user-select:none;
      -webkit-user-select:none;
      -webkit-user-drag:none;
      -webkit-tap-highlight-color:transparent;
      pointer-events:none;
      filter:drop-shadow(0 4px 8px rgba(15,18,35,.25));
      z-index:4;
    }
    .track-avatar.is-bounce{
      animation:trackLaneBounce .22s ease;
    }
    .track-avatar.is-happy{
      animation:trackHappyBounce .3s ease;
      filter:drop-shadow(0 6px 12px rgba(120,255,160,.4));
    }
    @keyframes trackHappyBounce{
      0%{ transform:translate(-50%, -50%) scaleX(var(--track-flip, 1)) scale(1); }
      40%{ transform:translate(-50%, -55%) scaleX(var(--track-flip, 1)) scale(1.12); }
      70%{ transform:translate(-50%, -47%) scaleX(var(--track-flip, 1)) scale(1.04); }
      100%{ transform:translate(-50%, -50%) scaleX(var(--track-flip, 1)) scale(1); }
    }
    .track-progress{
      position:absolute;
      bottom:8%;
      left:6%;
      height:8px;
      width:0%;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(111,92,255,.55), rgba(255,211,107,.6));
      box-shadow:0 4px 10px rgba(15,18,35,.18);
      opacity:.9;
      display:none;
    }
    .minigame-start-in-game{
      position:absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      margin:auto;
      transform:none;
      display:flex;
      align-items:center;
      gap:12px;
      justify-content:center;
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-weight:900;
      font-size:24px;
      letter-spacing:2px;
      text-transform:uppercase;
      color:#fff3c4;
      text-shadow:
        0 3px 0 #4b1f00,
        0 8px 16px rgba(0,0,0,.45);
      padding:12px 22px;
      border-radius:999px;
      border:2px solid rgba(255,214,120,.7);
      background:linear-gradient(180deg, rgba(14,14,20,.2) 0%, rgba(6,6,10,.65) 100%);
      box-shadow:
        0 14px 22px rgba(0,0,0,.35),
        inset 0 0 0 2px rgba(255,230,160,.15);
      cursor:pointer;
      pointer-events:auto;
      animation:eggdropStartPulse 1.4s ease-in-out infinite;
      max-width:90%;
      width:min(280px, 92%);
      height:fit-content;
      box-sizing:border-box;
      text-align:center;
      white-space:normal;
      z-index:30;
    }
    .minigame-start-text{
      display:flex;
      flex-direction:column;
      align-items:center;
      line-height:1.05;
    }
    .minigame-start-label{
      font-size:1em;
    }
    .minigame-start-cost{
      margin-top:2px;
      font-size:13px;
      letter-spacing:1px;
      font-weight:800;
      opacity:.96;
    }
    .minigame-start-in-game img{
      width:52px;
      height:52px;
      object-fit:contain;
      filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
    }
    .minigame-start-in-game.is-cutesy{
      padding-left:96px;
    }
    .minigame-start-in-game.is-cutesy img{
      position:absolute;
      left:-10px;
      top:50%;
      width:92px;
      height:92px;
      margin:0;
      transform:translateY(-50%) rotate(-6deg);
      filter:drop-shadow(0 10px 14px rgba(0,0,0,.4));
    }
    .minigame-start-in-game:active{
      transform:translateY(2px) scale(0.98);
      box-shadow:
        0 10px 16px rgba(0,0,0,.35),
        inset 0 0 0 2px rgba(255,230,160,.2);
    }
    .minigame-start-in-game:focus-visible{
      outline:3px solid #4aa3ff;
      outline-offset:2px;
    }
    .minigame-modal.is-playing#modal-track .minigame-start-in-game{
      display:none;
    }
    .minigame-modal.is-playing#modal-stretch .minigame-start-in-game{
      display:none;
    }
    .minigame-modal.is-playing#modal-windmill .minigame-start-in-game{
      display:none;
    }
    .yb-modal:not(.is-playing) .minigame-playable > .minigame-start-in-game{
      opacity:1;
      pointer-events:auto;
    }
    .track-lane,
    .stretch-lane{
      overflow:visible;
    }
    .track-action{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:center;
    }
    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }
    .track-lane-controls{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:0;
      margin-top:8px;
    }
    .track-lane-btn{
      border:none;
      border-radius:14px;
      padding:12px 0;
      font-size:0;
      cursor:pointer;
      background:transparent;
      color:transparent;
      box-shadow:none;
      touch-action:none;
      position:relative;
      min-height:56px;
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
    }
    .track-lane-btn.lane-1{ background-image:url('/assets/app/v2/track_1.webp'); }
    .track-lane-btn.lane-2{ background-image:url('/assets/app/v2/track_2.webp'); }
    .track-lane-btn.lane-3{ background-image:url('/assets/app/v2/track_3.webp'); }
    .track-lane-btn.lane-4{ background-image:url('/assets/app/v2/track_4.webp'); }
    .track-lane-btn.is-pressed{
      box-shadow:0 0 26px rgba(111,92,255,.55);
      transform:translateY(1px);
    }
    .track-lane-btn.lane-1.is-pressed{ box-shadow:0 0 26px rgba(255,90,90,.7); }
    .track-lane-btn.lane-2.is-pressed{ box-shadow:0 0 26px rgba(90,220,120,.7); }
    .track-lane-btn.lane-3.is-pressed{ box-shadow:0 0 26px rgba(90,140,255,.7); }
    .track-lane-btn.lane-4.is-pressed{ box-shadow:0 0 26px rgba(255,210,90,.7); }
    .track-lane-btn:focus-visible{
      outline:3px solid var(--accent);
      outline-offset:2px;
    }
    .minigame-perks{
      margin:6px 0 10px;
      padding:8px 10px;
      border-radius:12px;
      background:rgba(255,255,255,.75);
      border:1px solid rgba(255,211,107,.35);
      font-size:11px;
      color:var(--stone);
      text-align:center;
    }
    .minigame-perks strong{
      display:block;
      color:var(--ink);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.4px;
      margin-bottom:4px;
    }
    .minigame-perks span{
      display:block;
      margin-top:4px;
      color:#7a4b00;
    }
    .minigame-perks .perks-set-bonus{
      color:#3a2a00;
      font-weight:600;
    }
    .minigame-perks .perks-snack{
      color:#2f5b46;
      font-weight:600;
    }
    .track-tap-zone{
      position:relative;
      height:140px;
      margin-top:6px;
      border-radius:16px;
      background:transparent;
      box-shadow:none;
      overflow:hidden;
      -webkit-tap-highlight-color:transparent;
      user-select:none;
      -webkit-user-select:none;
    }
    .track-btn{
      flex:0 0 auto;
      border:none;
      border-radius:18px;
      padding:0;
      background:transparent;
      box-shadow:none;
      cursor:pointer;
      position:absolute;
      transition:left .12s ease-out, top .12s ease-out, transform .08s ease, filter .08s ease;
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
    }
    .track-btn:focus{
      outline:none;
    }
    .track-btn:focus-visible{
      outline:3px solid var(--accent);
      outline-offset:2px;
    }
    .track-btn:disabled{
      opacity:.6;
      cursor:not-allowed;
      pointer-events:none;
    }
    .track-btn img{
      width:auto;
      max-width:100%;
      height:60px;
      display:block;
      border-radius:0;
      box-shadow:none;
      transition:transform .08s ease, filter .08s ease;
      background:transparent;
      pointer-events:none;
    }
    .track-btn.is-pressed img{
      transform:scale(.97);
      filter:brightness(1.05);
    }
    .track-btn::after{
      content:"";
      position:absolute;
      inset:6px;
      border-radius:18px;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 45%);
      opacity:0;
      pointer-events:none;
      transition:opacity .12s ease;
    }
    .track-btn.is-pressed::after{
      opacity:.8;
    }
    .track-secondary{
      border:none;
      border-radius:14px;
      padding:8px 10px;
      background:rgba(255,255,255,.7);
      color:var(--accent-deep);
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 8px 16px rgba(15,18,35,.12);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
    }
    .ticket-btn{
      gap:8px;
      padding:10px 14px;
      font-size:14px;
      color:#fff;
      background:linear-gradient(135deg, #ffb347, #f07a3c);
      box-shadow:0 10px 20px rgba(77,38,10,.25);
    }
    .ticket-btn.is-ready{
      background:linear-gradient(135deg, rgba(255,179,71,.7), rgba(240,122,60,.7));
      box-shadow:0 8px 16px rgba(77,38,10,.18);
      opacity:.85;
    }
    .ticket-icon{
      width:18px;
      height:18px;
      display:block;
    }
    .ticket-btn-text{
      font-weight:800;
    }
    .ticket-btn-price{
      font-size:12px;
      font-weight:800;
      opacity:.9;
    }
    .yard-toast{
      position:fixed;
      left:50%;
      bottom:45%;
      transform:translate(-50%, 12px);
      background:rgba(255,255,255,.92);
      color:#5a2d12;
      padding:12px 16px;
      border-radius:14px;
      box-shadow:0 12px 24px rgba(15,18,35,.2);
      font-weight:800;
      font-size:14px;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
      z-index:80;
      min-width:220px;
      text-align:center;
    }
    .yard-toast.is-visible{
      opacity:1;
      transform:translate(-50%, 0);
    }
    .yard-toast.is-anchored{
      bottom:auto;
      top:var(--toast-top, 50%);
      left:var(--toast-left, 50%);
      transform:translate(-50%, -50%);
    }
    .yard-toast.is-anchored.is-visible{
      transform:translate(-50%, -50%);
    }
    body.landscape-minigame-active .yard-toast:not(.is-anchored){
      transform:translate(-50%, 12px) rotate(-90deg);
      transform-origin:center;
    }
    body.landscape-minigame-active .yard-toast:not(.is-anchored).is-visible{
      transform:translate(-50%, 0) rotate(-90deg);
    }
    body.landscape-minigame-active .yard-toast.is-anchored{
      transform:translate(-50%, -50%) rotate(-90deg);
      transform-origin:center;
    }
    body.landscape-minigame-active .yard-toast.is-anchored.is-visible{
      transform:translate(-50%, -50%) rotate(-90deg);
    }
    .achievement-toast-stack{
      position:fixed;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      width:min(92vw, 420px);
      display:flex;
      flex-direction:column;
      gap:10px;
      z-index:90;
      pointer-events:none;
    }
    .achievement-toast{
      position:relative;
      background:transparent;
      border-radius:18px;
      padding:14px 18px 12px;
      box-shadow:0 14px 24px rgba(77,38,10,.2);
      color:#3a2a00;
      opacity:0;
      transform:translateY(0) scale(.1);
      transition:opacity .35s ease, transform .35s ease;
      pointer-events:auto;
      min-height:92px;
    }
    .achievement-toast::before{
      content:"";
      position:absolute;
      inset:-8px -6px -10px -6px;
      background:url('/assets/app/v2/achievement_toast_border.webp') center/100% 112% no-repeat;
      pointer-events:none;
      z-index:0;
    }
    .achievement-toast::after{
      content:"";
      position:absolute;
      inset:-14px;
      border-radius:24px;
      box-shadow:0 0 18px rgba(255,211,107,.55), 0 0 36px rgba(255,178,90,.35);
      opacity:.15;
      animation:achievementGlow 2.4s ease-in-out infinite;
      pointer-events:none;
      z-index:0;
    }
    .achievement-toast.is-visible{
      opacity:1;
      transform:translateY(0) scale(1);
      animation:achievementPop 0.85s cubic-bezier(.2,.9,.25,1.2) both, achievementPulse 3s ease-in-out infinite;
    }
    .achievement-toast.is-dismissed{
      opacity:1;
      transform:translateY(0) scale(1);
      animation:achievementFlyOut .5s ease-in both;
    }
    .achievement-toast-content{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0, 1fr) 88px;
      gap:14px;
      align-items:center;
    }
    .achievement-toast-text{
      min-width:0;
      padding:2px 16px 2px 36px;
      max-width:100%;
      text-shadow:0 1px 0 rgba(255,255,255,.35);
    }
    .achievement-toast-title{
      font-size:14px;
      font-weight:900;
      letter-spacing:.2px;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .achievement-toast-tagline{
      font-size:11px;
      font-weight:700;
      color:#5a3a10;
      margin-top:4px;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .achievement-toast-desc{
      font-size:11px;
      color:#5a3a10;
      margin-top:4px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .achievement-toast-bib{
      width:88px;
      height:78px;
      background:url('/assets/app/v2/achievement_bib.webp') center/contain no-repeat;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      font-weight:900;
      color:#3a2a00;
      text-shadow:0 1px 0 rgba(255,255,255,.5);
      line-height:1;
      gap:2px;
      transform:translate(-2px, -6px) rotate(-2deg);
      filter:drop-shadow(0 6px 10px rgba(77,38,10,.3));
    }
    .achievement-toast-bib span{
      font-size:17px;
      transform:rotate(-3deg) translateY(3px);
    }
    .achievement-toast-bib small{
      font-size:9px;
      text-transform:uppercase;
      letter-spacing:.6px;
      color:#5a3a10;
      transform:rotate(-3deg) translateY(3px);
    }
    .achievement-toast-close{
      position:absolute;
      top:2px;
      right:2px;
      border:none;
      background:rgba(255,255,255,.7);
      color:#7a4a12;
      border-radius:10px;
      font-size:11px;
      padding:2px 6px;
      cursor:pointer;
      z-index:2;
    }
    @keyframes achievementGlow{
      0%{ opacity:.08; }
      50%{ opacity:.35; }
      100%{ opacity:.08; }
    }
    @keyframes achievementPop{
      0%{ transform:translateY(0) scale(0.05); opacity:0; }
      60%{ transform:translateY(0) scale(1.08); opacity:1; }
      80%{ transform:translateY(0) scale(0.98); }
      100%{ transform:translateY(0) scale(1); }
    }
    @keyframes achievementFlyOut{
      0%{ transform:translateY(0) scale(1); opacity:1; }
      100%{ transform:translateY(0) scale(2.2); opacity:0; }
    }
    @keyframes achievementPulse{
      0%{ filter:drop-shadow(0 0 0 rgba(255,211,107,.0)); }
      45%{ filter:drop-shadow(0 0 14px rgba(255,211,107,.55)); }
      100%{ filter:drop-shadow(0 0 0 rgba(255,211,107,.0)); }
    }
    .yard-ticker{
      position:fixed;
      left:50%;
      width:min(86vw, 420px);
      transform:translateX(-50%);
      bottom:var(--ticker-bottom, calc(32px + env(safe-area-inset-bottom, 0px)));
      height:32px;
      background:linear-gradient(160deg, rgba(255,245,220,.98), rgba(255,220,165,.95));
      border:2px solid rgba(122,88,40,.5);
      border-radius:12px;
      box-shadow:0 8px 14px rgba(77,38,10,.18);
      overflow:hidden;
      z-index:20;
      pointer-events:auto;
      cursor:pointer;
    }
    body.yard-rotate-landscape .yard-ticker{
      display:none;
    }
body.yard-rotate-landscape .yard-hero,
body.yard-rotate-landscape .yard-header,
body.yard-rotate-landscape .yard-stats{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
body.landscape-template-playing .yard-hero,
body.landscape-template-playing .yard-header,
body.landscape-template-playing .yard-stats,
body.landscape-template-playing .yard-ticker{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
body.landscape-template-playing .yb-modal#modal-landscape-template{
  display:none;
  z-index:90;
}
body.landscape-template-playing .yb-modal#modal-landscape-template .yb-modal-card{
  overflow:visible;
}
    .yard-ticker-track{
      display:inline-block;
      white-space:nowrap;
      padding:0 40px;
      font-size:11px;
      font-weight:800;
      color:#5a2d12;
      line-height:32px;
      text-transform:none;
      will-change:transform;
    }
    .yard-feed-list{
      display:grid;
      gap:8px;
      margin-top:10px;
    }
    .yard-ticker-track.is-anim{
      animation-name:yardTickerSlide;
      animation-timing-function:linear;
      animation-iteration-count:infinite;
    }
    @keyframes yardTickerSlide{
      0%{transform:translateX(0)}
      100%{transform:translateX(-50%)}
    }
    .track-secondary:disabled{
      opacity:.6;
      cursor:not-allowed;
    }
    .track-status{
      font-size:11px;
      color:var(--stone);
      min-height:22px;
      line-height:1.3;
    }
    .minigame-modal .track-status{
      margin-bottom:0;
      min-height:0;
    }
    .minigame-modal .stretch-status{
      margin-bottom:0;
      min-height:0;
    }
    .minigame-modal .track-status:empty,
    .minigame-modal .stretch-status:empty{
      display:none;
    }
    .track-scores{
      display:grid;
      gap:6px;
      font-size:12px;
      margin-top:6px;
    }
    .track-score-list{
      max-height:220px;
      overflow:auto;
      display:grid;
      gap:6px;
      font-size:12px;
      padding-right:4px;
    }
    .track-score-row{
      display:flex;
      justify-content:space-between;
      padding:6px 8px;
      border-radius:10px;
      background:rgba(255,255,255,.65);
    }
    .track-score-row strong{
      color:var(--ink);
    }
    .track-score-row .yard-feed-time{
      font-size:11px;
      color:var(--stone);
      white-space:nowrap;
      margin-left:8px;
    }
    .yard-list-item{
      width:100%;
      border:none;
      font:inherit;
      text-align:left;
      cursor:pointer;
    }
    .yard-list-item:hover{
      background:rgba(255,255,255,.85);
    }
    .yard-list-item:focus-visible{
      outline:3px solid var(--accent);
      outline-offset:2px;
    }
    .minigame-cabinet{
      position:absolute;
      inset:0;
      background-image:var(--cabinet-image);
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      border-radius:0;
      transition:transform .6s ease, opacity .6s ease;
      z-index:9;
      pointer-events:none;
    }
    .yb-modal.is-launching .minigame-cabinet{
      transform:scale(1.06);
      opacity:0;
    }
    .yb-modal.is-playing .minigame-cabinet{
      opacity:0;
      transform:scale(0.92);
    }
    .yb-modal:not(.is-playing) .minigame-playable > :not(.minigame-cabinet){
      opacity:0;
      pointer-events:none;
    }
    .yb-modal:not(.is-playing) .minigame-playable{
      background:transparent !important;
      box-shadow:none !important;
    }
    .minigame-modal:not(.is-playing) .track-ui,
    .minigame-modal:not(.is-playing) .stretch-ui,
    .minigame-modal:not(.is-playing) .obstacle-ui,
    .minigame-modal:not(.is-playing) .hydration-ui,
    .minigame-modal:not(.is-playing) .eggdrop-ui,
    .minigame-modal:not(.is-playing) .trail-run-ui{
      flex:1;
      min-height:0;
    }
    .minigame-modal:not(.is-playing) .track-hud,
    .minigame-modal:not(.is-playing) .hydration-hud,
    .minigame-modal:not(.is-playing) .eggdrop-hud,
    .minigame-modal:not(.is-playing) .trail-run-hud,
    .minigame-modal:not(.is-playing) .track-status-bars,
    .minigame-modal:not(.is-playing) .track-progress,
    .minigame-modal:not(.is-playing) .track-lane-controls,
    .minigame-modal:not(.is-playing) .obstacle-controls,
    .minigame-modal:not(.is-playing) .hydration-trash-action,
    .minigame-modal:not(.is-playing) .eggdrop-sliderbar,
    .minigame-modal:not(.is-playing) .trail-run-controls{
      display:none !important;
    }
    .minigame-modal:not(.is-playing)#modal-track .trail-run-statusbar{
      display:none !important;
    }
    .minigame-modal:not(.is-playing)#modal-stretch .trail-run-statusbar{
      display:none !important;
    }
    .minigame-modal .yb-modal-card{
      width:min(88vw, 420px);
      height:min(82vh, 680px);
      max-height:min(82vh, 680px);
      display:flex;
      flex-direction:column;
      gap:6px;
      overflow:hidden;
      box-sizing:border-box;
    }
    .minigame-modal .yb-modal-card{
      padding:12px;
    }
    .minigame-modal.is-playing .yb-modal-card{
      width:100vw;
      height:100vh;
      border-radius:0;
      max-height:none;
      max-width:none;
      padding:0;
      background:transparent;
      box-shadow:none;
      display:flex;
      align-items:stretch;
      justify-content:stretch;
      position:relative;
    }
    .minigame-modal.is-playing.minigame-portrait .yb-modal-card{
      width:100%;
      max-width:min(100vw, 460px);
      height:100%;
      max-height:100vh;
      margin:0 auto;
    }
    .minigame-modal.is-playing#modal-track .yb-modal-card,
    .minigame-modal.is-playing#modal-windmill .yb-modal-card{
      max-width:100%;
    }
    .minigame-modal.is-playing#modal-track .minigame-playable,
    .minigame-modal.is-playing#modal-windmill .minigame-playable{
      max-width:100%;
      border-radius:0;
    }
    .minigame-modal.is-playing{
      background:#000;
    }
    .minigame-modal.is-launching .yb-modal-close,
    .minigame-modal.is-playing .yb-modal-close{
      display:none !important;
      pointer-events:none;
    }
    .minigame-modal.is-playing .minigame-actions,
    .minigame-modal.is-playing .minigame-perks,
    .minigame-modal.is-playing .minigame-howto-source,
    .minigame-modal.is-playing .track-hud,
    .minigame-modal.is-playing .stretch-hud,
    .minigame-modal.is-playing .hydration-hud,
    .minigame-modal.is-playing .eggdrop-hud,
    .minigame-modal.is-playing .track-status,
    .minigame-modal.is-playing .stretch-status,
    .minigame-modal.is-playing .track-desc-title,
    .minigame-modal.is-playing .windmill-desc-title,
    .minigame-modal.is-playing .stretch-howto{
      display:none !important;
    }
    .minigame-modal.is-playing.is-landscape h2{
      display:none !important;
    }
    .minigame-modal.is-playing .track-lane-controls{
      display:none !important;
    }
    .minigame-modal.is-playing .track-ui,
    .minigame-modal.is-playing .stretch-ui,
    .minigame-modal.is-playing .obstacle-ui,
    .minigame-modal.is-playing .hydration-ui,
    .minigame-modal.is-playing .eggdrop-ui,
    .minigame-modal.is-playing .trail-run-ui{
      flex:1;
      height:100%;
      width:100%;
      gap:0;
      margin-top:0;
      padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
    }
    .minigame-modal.is-playing .minigame-playable{
      flex:1;
      width:100%;
      height:100%;
      max-height:none;
      aspect-ratio:auto;
      border-radius:0;
      box-shadow:none;
    }
    .minigame-modal.is-playing.is-landscape .minigame-playable{
      aspect-ratio:auto;
      max-height:none;
      height:100%;
    }
    .minigame-modal.is-playing.minigame-portrait .minigame-playable{
      width:100%;
      height:100%;
      aspect-ratio:9/16;
      max-width:100%;
      max-height:100%;
      margin:0;
    }
    .minigame-modal.is-playing .minigame-playable > .minigame-cabinet{
      display:none;
    }
    .minigame-modal.is-playing.is-landscape .minigame-playable{
      width:100%;
      height:100%;
      flex:1 1 auto;
      transform:none;
      position:relative;
      overflow:hidden;
    }
    .minigame-modal .minigame-perks{
      margin:0;
      min-height:64px;
    }
    .minigame-modal .track-ui,
    .minigame-modal .stretch-ui,
    .minigame-modal .obstacle-ui,
    .minigame-modal .hydration-ui,
    .minigame-modal .eggdrop-ui,
    .minigame-modal .trail-run-ui{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .minigame-modal .minigame-playable{
      flex:0 1 auto;
      width:100%;
      height:auto;
      aspect-ratio:9/16;
      min-height:300px;
      max-height:54vh;
    }
    .minigame-modal.minigame-portrait .minigame-playable{
      margin-top:-10px;
    }
    .minigame-modal.is-playing.is-landscape .minigame-playable{
      min-height:0;
      max-height:none;
      height:100%;
    }
    .minigame-modal.minigame-landscape:not(.is-playing) .minigame-playable{
      aspect-ratio:9/16;
      max-height:52vh;
    }
    #modal-hydration:not(.is-playing) .minigame-playable,
    #modal-obstacle:not(.is-playing) .minigame-playable{
      max-height:46vh;
    }
    #modal-hydration:not(.is-playing) .landscape-preview,
    #modal-obstacle:not(.is-playing) .landscape-preview{
      margin-bottom:10px;
    }
    #modal-hydration:not(.is-playing) .landscape-preview{
      margin-bottom:16px;
    }
    #modal-hydration:not(.is-playing) .landscape-preview .minigame-cabinet{
      background-size:92% auto;
      background-position:center 44%;
    }
    #modal-obstacle:not(.is-playing) .landscape-preview .minigame-cabinet{
      background-size:86% auto;
      background-position:center 45%;
    }
    #modal-roost .yb-modal-card{
      height:min(86vh, 720px);
      max-height:min(86vh, 720px);
    }
    #modal-hydration .yb-modal-card,
    #modal-obstacle .yb-modal-card{
      height:min(86vh, 720px);
      max-height:min(86vh, 720px);
    }
    .minigame-actions{
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      gap:8px;
    }
    .minigame-info-content{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .minigame-howto-source{
      display:none;
    }
    .minigame-perks-source{
      display:none;
    }
    .minigame-modal .minigame-actions{
      display:flex;
    }
    .minigame-modal .minigame-actions + .minigame-actions{
      margin-top:10px;
    }
    .minigame-modal .minigame-actions:last-of-type{
      margin-bottom:6px;
      flex-wrap:nowrap;
      width:100%;
    }
    .minigame-modal .minigame-actions:last-of-type .track-secondary{
      flex:1 1 0;
      min-width:0;
      padding:6px 8px;
      font-size:11px;
      white-space:nowrap;
    }
    #modal-burrow .burrow-actions-secondary{
      flex-wrap:nowrap;
      width:100%;
    }
    #modal-burrow .burrow-actions-secondary .track-secondary{
      flex:1 1 0;
      min-width:0;
      white-space:nowrap;
    }
    #modal-burrow .burrow-actions-secondary #burrowContribBtn{
      flex:1.35 1 0;
    }
    .minigame-modal .minigame-playable{
      width:100%;
    }
    .minigame-modal.is-playing .minigame-playable,
    .minigame-modal.is-playing .track-lane,
    .minigame-modal.is-playing .stretch-lane,
    .minigame-modal.is-playing .obstacle-window,
    .minigame-modal.is-playing .hydration-window,
    .minigame-modal.is-playing .eggdrop-window,
    .minigame-modal.is-playing .trail-run-window{
      width:100%;
      height:100%;
    }
    /* Landscape template layout shared by all landscape minigames */
    .landscape-grid,
    .landscape-template-grid{
      display:grid;
      grid-template-areas:
        "game status"
        "controls status";
      grid-template-columns:minmax(0, 1fr) clamp(96px, 22%, 160px);
      grid-template-rows:minmax(0, 1fr) clamp(60px, 20%, 120px);
      column-gap:10px;
      row-gap:8px;
      width:100%;
      height:100%;
      max-width:100%;
      max-height:100%;
      margin:0;
      padding:0;
      align-content:stretch;
      box-sizing:border-box;
    }
    .landscape-grid .landscape-game,
    .landscape-template-grid .landscape-game{
      display:flex;
      grid-area:game;
      align-items:stretch;
      justify-content:stretch;
      min-height:0;
    }
    .landscape-grid .landscape-controls,
    .landscape-template-grid .landscape-controls{
      display:flex;
      grid-area:controls;
      align-items:stretch;
      justify-content:stretch;
      min-height:0;
      height:100%;
    }
    .landscape-grid .landscape-status,
    .landscape-template-grid .landscape-status{
      display:flex;
      grid-area:status;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:10px;
    }
    .minigame-modal.is-playing.is-landscape .landscape-status{
      background:linear-gradient(180deg, rgba(8,12,22,.96), rgba(12,18,30,.9));
      color:#f1f5ff;
      text-shadow:0 1px 3px rgba(0,0,0,.45);
    }
    .minigame-modal.is-playing.is-landscape p{
      display:none !important;
    }
    .minigame-modal.minigame-landscape .landscape-preview{
      display:block;
    }
    .minigame-modal.minigame-landscape .landscape-live{
      display:none;
    }
    .minigame-modal.minigame-landscape.is-playing .landscape-preview{
      display:none;
    }
    .minigame-modal.minigame-landscape.is-playing .landscape-live{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      height:100%;
    }
    .minigame-modal.minigame-landscape:not(.is-playing) .hydration-ui,
    .minigame-modal.minigame-landscape:not(.is-playing) .obstacle-ui{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:6px;
    }
    .minigame-modal.minigame-landscape:not(.is-playing) .landscape-preview{
      flex:0 0 auto;
      width:100%;
      margin-bottom:6px;
    }
    .minigame-modal.minigame-landscape:not(.is-playing) .minigame-playable{
      aspect-ratio:9/16;
      max-height:52vh;
    }
    .minigame-modal.minigame-landscape:not(.is-playing) .minigame-actions{
      display:flex;
    }
    .minigame-modal.is-playing.is-landscape .minigame-playable::after{
      content:none;
    }
    .minigame-modal.is-playing.is-landscape .landscape-game .minigame-playable{
      width:100%;
      height:100%;
      min-height:0;
      margin:0;
      border-radius:12px;
      overflow:hidden;
      background-color:#0f1118;
    }
    .minigame-modal.is-playing.is-landscape .landscape-template-shell{
      position:absolute;
      left:50%;
      top:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      width:var(--landscape-grid-w, calc(100vw * 16 / 9));
      height:var(--landscape-grid-h, 100vw);
      margin:0;
      padding:0;
      transform:translate(-50%, -50%) rotate(-90deg);
      transform-origin:center;
      border:none;
      outline:none;
      box-shadow:none;
    }
    .minigame-modal.is-playing.is-landscape .landscape-game-window{
      width:100%;
      height:100%;
      min-height:0;
      border-radius:16px;
      overflow:hidden;
      background-color:#0f1118;
      background-position:center;
      background-repeat:no-repeat;
      background-size:100% 100%;
      background-image:var(--landscape-bg);
      border:none;
      outline:none;
      box-shadow:none;
    }
    .minigame-modal.is-playing.is-landscape .landscape-controls-slot{
      width:100%;
      height:100%;
      margin:0;
      display:flex;
      align-items:stretch;
      justify-content:stretch;
      gap:0;
      pointer-events:auto;
      opacity:1;
      filter:none;
    }
    .minigame-modal.is-playing.is-landscape .landscape-controls-slot > *{
      flex:1 1 0;
      width:100%;
      height:100%;
    }
    .minigame-modal.is-playing.is-landscape .landscape-controls-slot img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .minigame-modal.is-playing.is-landscape .landscape-status-stack{
      display:flex !important;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      font-size:12px;
      letter-spacing:.8px;
      color:#cfd8f4;
      text-transform:uppercase;
    }
    .minigame-modal.is-playing.is-landscape .landscape-status-stack strong{
      font-size:20px;
      font-weight:900;
      color:#ffffff;
      letter-spacing:.2px;
      text-shadow:0 2px 6px rgba(0,0,0,.55);
    }
    .minigame-modal.is-playing.is-landscape .landscape-status .track-status{
      display:block !important;
      color:#e7eefc;
      font-size:11px;
      text-transform:none;
      letter-spacing:.2px;
    }
    .minigame-modal.is-playing.is-landscape .landscape-game .minigame-playable::after{
      content:none;
    }
    .minigame-modal.is-playing.is-landscape .minigame-exit{
      transform:none;
      pointer-events:auto;
      touch-action:manipulation;
      z-index:12;
    }
    .minigame-modal.is-playing.is-landscape .trail-run-gameover-title,
    .minigame-modal.is-playing.is-landscape .trail-run-gameover .minigame-exit{
      transform:none;
    }

    .landscape-overlay-shell{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      width:var(--landscape-grid-w, min(100%, calc(100vh * 16 / 9)));
      height:var(--landscape-grid-h, auto);
      margin:0;
      padding:0;
      flex:0 0 auto;
    }
    @media (max-width: 900px), (pointer: coarse) {
      .landscape-overlay-shell{
        width:calc(100vw * 16 / 9);
        height:100vw;
      }
    }
    body.landscape-template-playing #modal-landscape-template .landscape-template-shell{
      transform:rotate(-90deg);
      transform-origin:center;
    }
    .minigame-modal.is-playing.is-landscape .yb-modal-card{
      width:100%;
      height:100%;
      max-width:none;
      max-height:none;
      padding:0;
      overflow:visible;
    }
    .minigame-modal.is-playing .obstacle-controls,
    .minigame-modal.is-playing .eggdrop-sliderbar,
    .minigame-modal.is-playing .hydration-trash-action,
    .minigame-modal.is-playing .hydration-trash-btn{
      pointer-events:none;
      opacity:.45;
      filter:grayscale(.5);
    }
    #modal-hydration.minigame-modal.is-playing .hydration-trash-btn{
      opacity:1;
      filter:none;
    }
    #modal-hydration.minigame-modal.is-playing .hydration-trash-action{
      pointer-events:auto;
      opacity:1;
      filter:none;
    }
    #modal-obstacle.minigame-modal.is-playing .obstacle-controls{
      pointer-events:auto;
      opacity:1;
      filter:none;
    }
    .minigame-actions .track-secondary{
      padding:6px 10px;
      font-size:12px;
    }
    .minigame-actions .track-secondary[id$="StartBtn"]{
      position:relative;
      padding:10px 16px;
      min-height:36px;
      font-size:12px;
      font-weight:900;
      letter-spacing:.9px;
      text-transform:uppercase;
      color:#3b0b00;
      background:linear-gradient(180deg, #ffd777 0%, #ffb23e 45%, #f07a2a 100%);
      border:2px solid #fff3bf;
      box-shadow:
        0 6px 0 #a84f16,
        0 10px 18px rgba(64,23,6,.35),
        inset 0 1px 0 rgba(255,255,255,.8);
      text-shadow:0 1px 0 rgba(255,255,255,.6);
      overflow:hidden;
    }
    .minigame-actions .track-secondary[id$="StartBtn"]::before{
      content:"";
      position:absolute;
      inset:3px;
      border-radius:12px;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 55%);
      opacity:.85;
      pointer-events:none;
      mix-blend-mode:screen;
    }
    .minigame-actions .track-secondary[id$="StartBtn"]::after{
      content:"";
      position:absolute;
      left:-40%;
      top:-20%;
      width:60%;
      height:140%;
      background:linear-gradient(120deg, rgba(255,255,255,.75), rgba(255,255,255,0));
      opacity:.35;
      transform:skewX(-20deg);
      animation:startShine 3s ease-in-out infinite;
      pointer-events:none;
    }
    .minigame-actions .track-secondary[id$="StartBtn"]:active{
      transform:translateY(2px);
      box-shadow:
        0 4px 0 #a84f16,
        0 8px 14px rgba(64,23,6,.35),
        inset 0 1px 0 rgba(255,255,255,.8);
    }
    .minigame-actions .track-secondary[id$="StartBtn"]:disabled{
      filter:saturate(.6) brightness(.95);
      box-shadow:0 4px 10px rgba(64,23,6,.2);
    }
    .minigame-actions .track-secondary:not([id$="StartBtn"]):not(.minigame-info-btn){
      padding:7px 12px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.5px;
      text-transform:uppercase;
      color:#1c2238;
      background:linear-gradient(180deg, #e6f0ff 0%, #c9ddff 100%);
      border:1px solid rgba(70,100,140,.35);
      box-shadow:0 6px 12px rgba(32,52,92,.2), inset 0 1px 0 rgba(255,255,255,.85);
      border-radius:10px;
      transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
    }
    .minigame-actions .track-secondary:not([id$="StartBtn"]):not(.minigame-info-btn):hover{
      transform:translateY(-1px);
      box-shadow:0 8px 16px rgba(32,52,92,.22), inset 0 1px 0 rgba(255,255,255,.85);
      filter:saturate(1.05);
    }
    .minigame-actions .track-secondary:not([id$="StartBtn"]):not(.minigame-info-btn):active{
      transform:translateY(1px);
      box-shadow:0 4px 10px rgba(32,52,92,.2);
    }
    .minigame-actions .track-secondary[id$="ScoresBtn"]{
      background:linear-gradient(180deg, #e6fff6 0%, #c9f7e6 100%);
      border-color:rgba(44,120,92,.35);
      color:#0f3a2b;
    }
    .minigame-actions .ticket-btn{
      gap:6px;
      padding:6px 10px;
    }
    .minigame-actions .minigame-info-btn{
      position:relative;
      padding:7px 12px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.5px;
      text-transform:uppercase;
      color:#2f2233;
      background:linear-gradient(180deg, #f7f2ff 0%, #e8defa 100%);
      border:1px solid rgba(85,64,120,.35);
      box-shadow:0 6px 12px rgba(38,24,72,.18), inset 0 1px 0 rgba(255,255,255,.9);
      border-radius:10px;
      transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
    }
    .minigame-actions .minigame-info-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 8px 16px rgba(38,24,72,.2), inset 0 1px 0 rgba(255,255,255,.9);
      filter:saturate(1.05);
    }
    .minigame-actions .minigame-info-btn:active{
      transform:translateY(1px);
      box-shadow:0 4px 10px rgba(38,24,72,.18);
    }
    @keyframes startShine{
      0%{ transform:translateX(-10%) skewX(-20deg); opacity:.05; }
      40%{ opacity:.45; }
      100%{ transform:translateX(140%) skewX(-20deg); opacity:.05; }
    }
    .minigame-exit{
      position:absolute;
      top:8px;
      right:12px;
      z-index:20;
      border:none;
      border-radius:999px;
      padding:6px 10px;
      font-size:11px;
      font-weight:700;
      letter-spacing:.2px;
      background:rgba(0,0,0,.55);
      color:#fff;
      cursor:pointer;
      opacity:.7;
    }
    .minigame-exit:hover{
      opacity:.9;
    }
    .minigame-exit.is-pause{
      background:rgba(18,33,58,.72);
      opacity:.85;
    }
    .yb-modal-close.is-pause{
      background:rgba(18,33,58,.72);
      color:#fff;
      border:1px solid rgba(180,210,255,.32);
      box-shadow:0 8px 16px rgba(10,16,28,.24);
    }
    .minigame-modal:not(.is-playing) .minigame-exit{
      display:none;
    }
    .trail-run-statusbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:8px 20px 8px 16px;
      border-radius:14px 14px 0 0;
      background:rgba(12,14,24,.65);
      color:#fff;
      font-weight:800;
      letter-spacing:.5px;
      text-transform:uppercase;
      font-size:11px;
    }
    .trail-run-statusbar span{
      display:block;
      font-size:16px;
      font-weight:900;
      letter-spacing:.2px;
      margin-top:2px;
    }
    .trail-run-statusbar .trail-run-stat{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
      min-width:90px;
    }
    .trail-run-statusbar .trail-run-stat:last-child{
      align-items:flex-end;
      text-align:right;
      padding-left:16px;
    }
@media (max-width: 520px){
      .trail-run-statusbar{
        padding:8px 28px 8px 14px;
      }
      .trail-run-statusbar .trail-run-stat:last-child{
        padding-left:22px;
        padding-right:4px;
      }
    }
    .minigame-modal.is-playing .trail-run-statusbar{
      width:100%;
      margin:0;
      background:linear-gradient(180deg, rgba(8,12,22,.9), rgba(10,16,28,.82));
      border:1px solid rgba(255,255,255,.28);
      box-shadow:0 10px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
      letter-spacing:.8px;
      border-bottom:none;
    }
    .minigame-modal.is-playing .trail-run-statusbar .trail-run-stat{
      min-width:96px;
    }
    .minigame-modal.is-playing .trail-run-statusbar span{
      font-size:17px;
      text-shadow:0 2px 8px rgba(0,0,0,.45);
    }
    .minigame-modal.is-playing#modal-track .track-ui{
      position:relative;
      width:100%;
      max-width:100%;
      margin:0;
      height:100%;
      box-sizing:border-box;
      padding:0;
    }
    .minigame-modal.is-playing#modal-track .trail-run-statusbar{
      z-index:5;
      display:flex;
      border-radius:0;
    }
    .track-statusbar-arcade{
      position:relative;
    }
    .minigame-modal.is-playing#modal-windmill .trail-run-hud{
      width:100%;
      margin:0;
    }
    .minigame-modal.is-playing#modal-windmill .trail-run-statusbar{
      width:100%;
      border-radius:0;
    }
    .minigame-modal.is-playing#modal-track .track-ui{
      width:100%;
      max-width:100%;
      margin:0;
      height:100%;
    }
    .minigame-modal.is-playing#modal-track .track-lane{
      width:100%;
    }
    .minigame-modal.is-playing#modal-windmill .trail-run-ui{
      width:100%;
      max-width:100%;
      margin:0;
      box-sizing:border-box;
      padding:0;
      min-height:0;
      height:100%;
    }
    .minigame-modal.is-playing#modal-windmill .trail-run-window{
      width:100%;
      flex:1 1 auto;
      min-height:0;
      height:auto;
    }
    .minigame-modal.is-playing#modal-windmill .trail-run-controls{
      flex:0 0 auto;
      gap:10px;
      padding:8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .minigame-modal.is-playing#modal-windmill .trail-run-controls .trail-run-btn{
      min-height:74px;
      padding:4px 8px;
    }
    .minigame-modal.is-playing#modal-windmill .trail-run-controls .trail-run-btn img{
      height:clamp(54px, 8vh, 66px);
    }
    .minigame-modal.is-playing .trail-run-hud{
      display:block;
    }
    .minigame-modal.is-playing .trail-run-hud .trail-run-stamina{
      height:18px;
      border-radius:999px;
    }
    .stretch-ui{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:2px;
      position:relative;
    }
    .countdown-overlay{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:48px;
      font-weight:900;
      color:#fff;
      text-align:center;
      line-height:1.05;
      text-shadow:
        0 2px 0 #111,
        0 -2px 0 #111,
        2px 0 0 #111,
        -2px 0 0 #111,
        2px 2px 0 #111,
        -2px 2px 0 #111,
        2px -2px 0 #111,
        -2px -2px 0 #111,
        0 8px 18px rgba(15,18,35,.35);
      background:transparent;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease;
      z-index:10;
    }
    .countdown-overlay.is-active{
      opacity:1;
      animation:countdownPop .6s ease;
    }
    .countdown-overlay.is-round{
      animation:roundPop .9s ease;
    }
    .countdown-overlay.is-round-fly{
      animation:roundFly 1s ease-in-out both;
    }
    @keyframes countdownPop{
      0%{transform:scale(.9); opacity:.6}
      100%{transform:scale(1); opacity:1}
    }
    @keyframes roundPop{
      0%{transform:scale(1.15); opacity:0}
      35%{transform:scale(1); opacity:1}
      100%{transform:scale(.92); opacity:0}
    }
    @keyframes roundFly{
      0%{transform:translateZ(0) scale(.4); opacity:0; filter:blur(2px)}
      35%{transform:translateZ(0) scale(1.08); opacity:1; filter:blur(0)}
      55%{transform:translateZ(0) scale(0.98); opacity:1; filter:blur(0)}
      70%{transform:translateZ(0) scale(1.02); opacity:1; filter:blur(0)}
      100%{transform:translateZ(0) scale(1.8); opacity:0; filter:blur(1px)}
    }
    @keyframes trackBounce{
      0%{transform:translateY(-50%) scale(1)}
      40%{transform:translateY(-56%) scale(1.02)}
      100%{transform:translateY(-50%) scale(1)}
    }
    .stretch-hud{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:10px;
      font-size:10px;
      color:var(--stone);
      text-transform:uppercase;
      letter-spacing:.6px;
      font-weight:800;
    }
    .stretch-hud strong{
      display:block;
      color:var(--ink);
      font-size:18px;
      letter-spacing:0;
    }
    .stretch-lane{
      position:relative;
      width:100%;
      height:320px;
      border-radius:18px;
      background:url('/assets/app/v2/stretch_zone.webp') center/cover no-repeat;
      overflow:visible;
      box-shadow:0 10px 18px rgba(15,18,35,.14);
      --stretch-avatar-y:52%;
    }
    .stretch-zone{
      position:absolute;
      left:12%;
      right:12%;
      top:18%;
      border-radius:18px;
      background:
        linear-gradient(180deg, rgba(130,255,185,.98) 0%, rgba(70,190,115,.92) 55%, rgba(35,140,85,.9) 100%);
      border:3px solid rgba(255,255,255,.95);
      box-shadow:
        0 0 22px rgba(90,210,110,.75),
        0 10px 18px rgba(0,0,0,.2),
        inset 0 2px 0 rgba(255,255,255,.55),
        inset 0 -6px 12px rgba(0,0,0,.25),
        inset 0 0 0 2px rgba(0,0,0,.18);
      opacity:1;
      transition:opacity .2s ease;
      pointer-events:none;
      z-index:6;
      transform-origin:50% 50%;
    }
    .stretch-zone.is-pong-divider{
      left:50%;
      right:auto;
      width:8px;
      top:10%;
      height:80%;
      transform:translateX(-50%);
      border-radius:999px;
      background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(222,235,255,.7) 100%);
      border:1px solid rgba(0,0,0,.16);
      box-shadow:0 0 0 2px rgba(0,0,0,.08) inset, 0 8px 16px rgba(15,18,35,.18);
      clip-path:none !important;
      opacity:.7;
      z-index:5;
    }
    .stretch-zone.is-pong-divider::before,
    .stretch-zone.is-pong-divider::after,
    .stretch-zone.is-pong-divider .stretch-zone-sheen,
    .stretch-zone.is-pong-divider .stretch-zone-noise{
      display:none;
    }
    .stretch-zone::before{
      content:"";
      position:absolute;
      inset:2px;
      border-radius:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 60%);
      opacity:.7;
      pointer-events:none;
    }
    .stretch-zone::after{
      content:"";
      position:absolute;
      inset:6px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,.25);
      opacity:.6;
      pointer-events:none;
    }
    .stretch-zone .stretch-zone-sheen{
      position:absolute;
      inset:-30% -10%;
      background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 60%);
      opacity:.25;
      transform:translateX(-40%) rotate(6deg);
      animation:stretchSheen 2.6s ease-in-out infinite;
      pointer-events:none;
    }
    .stretch-zone .stretch-zone-noise{
      position:absolute;
      inset:3px;
      border-radius:14px;
      background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, rgba(255,255,255,0) 2px 4px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, rgba(0,0,0,0) 2px 4px);
      mix-blend-mode:overlay;
      opacity:.35;
      pointer-events:none;
    }
    @keyframes stretchSheen{
      0%{ transform:translateX(-60%) rotate(6deg); opacity:.15; }
      50%{ transform:translateX(20%) rotate(6deg); opacity:.35; }
      100%{ transform:translateX(80%) rotate(6deg); opacity:.15; }
    }
    .stretch-zone.is-perfect{
      animation:stretchPulse .9s ease-in-out infinite;
    }
    .stretch-zone.is-yellow{
      background:linear-gradient(180deg, rgba(255,225,120,.98) 0%, rgba(230,165,60,.92) 55%, rgba(180,120,35,.9) 100%);
      box-shadow:
        0 0 22px rgba(255,196,77,.75),
        0 10px 18px rgba(0,0,0,.2),
        inset 0 2px 0 rgba(255,255,255,.55),
        inset 0 -6px 12px rgba(0,0,0,.25),
        inset 0 0 0 2px rgba(0,0,0,.18);
    }
    .stretch-zone.is-red{
      background:linear-gradient(180deg, rgba(255,140,140,.98) 0%, rgba(210,85,85,.92) 55%, rgba(160,60,60,.9) 100%);
      box-shadow:
        0 0 22px rgba(255,90,90,.75),
        0 10px 18px rgba(0,0,0,.2),
        inset 0 2px 0 rgba(255,255,255,.55),
        inset 0 -6px 12px rgba(0,0,0,.25),
        inset 0 0 0 2px rgba(0,0,0,.18);
    }
    @keyframes stretchPulse{
      0%{transform:scale(1); opacity:.85; filter:brightness(1)}
      50%{transform:scale(1.01); opacity:.95; filter:brightness(1.08)}
      100%{transform:scale(1); opacity:.85; filter:brightness(1)}
    }
    .stretch-slider{
      position:absolute;
      top:12%;
      bottom:12%;
      width:10px;
      border-radius:14px;
      background:none;
      border:none;
      box-shadow:none;
      z-index:8;
      pointer-events:none;
    }
    .stretch-slider.stretch-left{
      left:2.6%;
    }
    .stretch-slider.stretch-right{
      right:2.6%;
    }
    .stretch-thumb{
      position:absolute;
      left:50%;
      width:96px;
      height:43px;
      border-radius:12px;
      transform:translate(-50%, -50%);
      background:transparent;
      background-position:center;
      background-size:100% 100%;
      background-repeat:no-repeat;
      border:none;
      box-shadow:none;
      pointer-events:none;
      z-index:9;
    }
    .stretch-left .stretch-thumb{
      background-image:url('/assets/app/v2/balance_button_right.webp');
      left:50%;
      transform:translate(-50%, -50%) rotate(270deg);
    }
    .stretch-right .stretch-thumb{
      background-image:url('/assets/app/v2/balance_button_left.webp');
      left:50%;
      transform:translate(-50%, -50%) rotate(90deg);
    }
    .stretch-lane::before,
    .stretch-lane::after{
      content:"";
      position:absolute;
      left:7%;
      right:7%;
      height:4px;
      border-radius:999px;
      background:
        linear-gradient(90deg,
          rgba(82,120,98,.28) 0%,
          rgba(146,175,144,.68) 22%,
          rgba(246,251,238,.94) 50%,
          rgba(146,175,144,.68) 78%,
          rgba(82,120,98,.28) 100%);
      box-shadow:
        0 1px 0 rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.35) inset,
        0 0 8px rgba(255,255,255,.28);
      pointer-events:none;
      z-index:7;
    }
    .stretch-lane::before{
      top:calc(12% + 4px);
    }
    .stretch-lane::after{
      bottom:calc(12% + 4px);
    }
    #modal-stretch:not(.is-playing) .stretch-lane::before,
    #modal-stretch:not(.is-playing) .stretch-lane::after{
      display:none;
    }
    .stretch-pong-ball{
      position:absolute;
      width:24px;
      height:24px;
      border-radius:50%;
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 26%, rgba(255,170,105,.92) 60%, rgba(204,88,18,.95) 100%);
      box-shadow:
        0 0 0 2px rgba(0,0,0,.14),
        0 7px 14px rgba(0,0,0,.28);
      z-index:11;
      pointer-events:none;
      transition:filter .14s ease, transform .14s ease;
    }
    .stretch-pong-ball.is-powered{
      filter:
        drop-shadow(0 0 8px rgba(255,230,120,.9))
        drop-shadow(0 0 14px rgba(255,176,64,.85))
        drop-shadow(0 0 22px rgba(255,112,56,.65));
      animation:stretchPowerBallPulse .58s ease-in-out infinite;
    }
    @keyframes stretchPowerBallPulse{
      0%{ transform:scale(1); }
      50%{ transform:scale(1.1); }
      100%{ transform:scale(1); }
    }
    .stretch-input{
      position:absolute;
      top:0;
      bottom:0;
      width:auto;
      z-index:10;
      touch-action:none;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    }
    .stretch-input.left{
      left:0;
      right:50%;
    }
    .stretch-input.right{
      left:50%;
      right:0;
    }
    .stretch-howto{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .stretch-howto-line{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      color:var(--stone);
      line-height:1.25;
      background:rgba(255,255,255,.6);
      border-radius:12px;
      padding:8px 10px;
    }
    .stretch-howto-line strong{
      color:var(--ink);
    }
    .stretch-howto-icon{
      width:30px;
      height:30px;
      object-fit:contain;
      display:block;
      flex:0 0 auto;
      filter:drop-shadow(0 3px 6px rgba(15,18,35,.18));
    }
    .stretch-howto-paddle{
      width:34px;
      height:10px;
      border-radius:999px;
      display:block;
      flex:0 0 auto;
      background:linear-gradient(180deg, #f5fcff 0%, #d9ecfa 46%, #b7cee0 100%);
      border:1px solid rgba(50,80,115,.65);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 3px 6px rgba(15,18,35,.2);
    }
    .stretch-howto-icon--paddle-left{
      transform:rotate(270deg);
    }
    .stretch-howto-icon--paddle-right{
      transform:rotate(90deg);
    }
    .stretch-howto-ball{
      width:30px;
      height:30px;
      border-radius:50%;
      display:block;
      flex:0 0 auto;
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 26%, rgba(255,170,105,.92) 60%, rgba(204,88,18,.95) 100%);
      box-shadow:
        0 0 0 2px rgba(0,0,0,.14),
        0 6px 10px rgba(0,0,0,.22);
    }
    .stretch-howto-ball--tiny{
      width:16px;
      height:16px;
      box-shadow:
        0 0 0 1px rgba(0,0,0,.16),
        0 3px 6px rgba(0,0,0,.2);
    }
    .stretch-howto-lives{
      display:inline-flex;
      align-items:center;
      gap:4px;
      flex:0 0 auto;
    }
    .stretch-howto-life{
      width:20px;
      height:20px;
      object-fit:contain;
      filter:drop-shadow(0 2px 4px rgba(15,18,35,.2));
    }
    .stretch-top-strip{
      position:absolute;
      left:8%;
      right:8%;
      top:3.4%;
      height:28px;
      display:none;
      align-items:center;
      justify-content:center;
      gap:6px;
      z-index:12;
      pointer-events:none;
    }
    #modal-stretch.is-playing .stretch-top-strip{
      display:flex;
    }
    .stretch-top-chip{
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:2px 7px;
      border-radius:999px;
      background:rgba(10,18,34,.72);
      border:1px solid rgba(255,255,255,.28);
      color:#f7fbff;
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-size:10px;
      font-weight:800;
      line-height:1;
      letter-spacing:.03em;
      text-shadow:0 1px 0 rgba(0,0,0,.4);
      white-space:nowrap;
    }
    .stretch-top-chip img{
      width:14px;
      height:14px;
      object-fit:contain;
      filter:drop-shadow(0 2px 4px rgba(15,18,35,.3));
    }
    .stretch-avatar{
      position:absolute;
      top:var(--stretch-avatar-y);
      left:50%;
      width:132px;
      height:132px;
      transform:translate(-50%, -50%);
      transform-origin:50% 90%;
      object-fit:contain;
      pointer-events:none;
      z-index:4;
      outline:none;
      user-select:none;
      -webkit-user-select:none;
      -webkit-user-drag:none;
      -webkit-tap-highlight-color:transparent;
      z-index:5;
      transition:transform .08s linear, opacity .2s ease;
    }
    .stretch-lane.is-shake{
      animation:trailRunShake .42s ease;
    }
    .stretch-stars{
      position:absolute;
      transform:translate(-50%, -50%);
      pointer-events:none;
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-size:24px;
      font-weight:900;
      letter-spacing:6px;
      color:#ffe37a;
      text-shadow:
        -1px -1px 0 #7a4b00,
        1px -1px 0 #7a4b00,
        -1px 1px 0 #7a4b00,
        1px 1px 0 #7a4b00,
        0 6px 14px rgba(0,0,0,.35);
      opacity:0;
      z-index:10;
    }
    .stretch-stars.is-visible{
      animation:stretchStarsSpin .92s ease-out forwards;
    }
    @keyframes stretchStarsSpin{
      0%{ opacity:0; transform:translate(-50%, -50%) rotate(0deg) scale(.58); }
      18%{ opacity:1; transform:translate(-50%, -50%) rotate(32deg) scale(1.02); }
      72%{ opacity:1; transform:translate(-50%, -50%) rotate(170deg) scale(1); }
      100%{ opacity:0; transform:translate(-50%, -50%) rotate(230deg) scale(.86); }
    }
    .stretch-powerup{
      position:absolute;
      width:56px;
      height:56px;
      object-fit:contain;
      transform:translate(-50%, -50%);
      pointer-events:none;
      z-index:10;
      filter:drop-shadow(0 8px 14px rgba(0,0,0,.34));
      animation:stretchPowerFloat 1.2s ease-in-out infinite;
    }
    .stretch-powerup-timer{
      position:absolute;
      top:4px;
      left:50%;
      transform:translateX(-50%);
      min-width:116px;
      padding:4px 10px;
      border-radius:999px;
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-size:12px;
      font-weight:900;
      letter-spacing:.4px;
      color:#fff8d6;
      text-align:center;
      background:linear-gradient(180deg, rgba(25,34,58,.86), rgba(14,19,34,.82));
      border:1px solid rgba(255,255,255,.34);
      box-shadow:0 6px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.2);
      text-shadow:0 1px 2px rgba(0,0,0,.45);
      pointer-events:none;
      z-index:13;
      display:none;
    }
    @keyframes stretchPowerFloat{
      0%{ transform:translate(-50%, -50%) rotate(-5deg); }
      50%{ transform:translate(-50%, -52%) rotate(5deg); }
      100%{ transform:translate(-50%, -50%) rotate(-5deg); }
    }
    .stretch-hit-popup{
      position:absolute;
      transform:translate(-50%, -50%);
      pointer-events:none;
      z-index:12;
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-size:30px;
      font-weight:900;
      color:#fff5c8;
      text-shadow:0 2px 0 rgba(0,0,0,.5), 0 10px 18px rgba(0,0,0,.38);
      animation:stretchHitPopup 1.24s cubic-bezier(.2,.75,.22,1) forwards;
    }
    .stretch-hit-popup.is-perfect{
      color:#ffe37a;
    }
    .stretch-hit-popup.is-power{
      color:#7ef3ff;
    }
    @keyframes stretchHitPopup{
      0%{ opacity:0; transform:translate(-50%, -40%) scale(.7); }
      15%{ opacity:1; transform:translate(-50%, -50%) scale(1.04); }
      70%{ opacity:1; transform:translate(-50%, -74%) scale(1); }
      100%{ opacity:0; transform:translate(-50%, -106%) scale(.96); }
    }
    .stretch-balance-bar{
      position:absolute;
      top:12px;
      left:50%;
      width:70%;
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 6px 12px rgba(15,18,35,.12);
      z-index:6;
    }
    #modal-stretch .stretch-balance-bar{
      display:none;
    }
    .stretch-balance-fill{
      height:100%;
      width:100%;
      background:linear-gradient(90deg, #ff5a5a 0%, #ffc44d 50%, #6ee37f 100%);
      border-radius:inherit;
      transition:width .1s ease;
    }
    .stretch-balance-track{
      position:relative;
      flex:1;
      height:14px;
      border-radius:999px;
      background:rgba(0,0,0,.08);
      overflow:hidden;
    }
    .stretch-balance-val{
      font-size:12px;
      font-weight:800;
      color:var(--ink);
      min-width:42px;
      text-align:right;
    }
    .stretch-status{
      font-size:11px;
      color:var(--stone);
      min-height:16px;
    }
    .stretch-howto{
      margin:6px 0 0;
      padding-left:18px;
      color:var(--stone);
      font-size:12px;
      line-height:1.5;
    }
    .stretch-howto li{
      margin-bottom:6px;
    }
    .countdown-overlay.is-breather{
      font-size:26px;
      letter-spacing:0;
      text-transform:none;
    }
    .input{
      width:100%;
      padding:10px 12px;
      border-radius:12px;
      border:none;
      background:rgba(255,255,255,.8);
      font-size:14px;
      color:var(--ink);
    }
    .yb-modal{
      position:fixed;
      inset:0;
      background:rgba(12,14,24,.55);
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease;
      z-index:30;
    }
    .yb-modal.yb-modal-info{
      z-index:80;
    }
    #modal-achievement-share{
      z-index:120;
    }
    .yb-modal.active{
      display:flex;
      opacity:1;
      pointer-events:auto;
    }
    .yb-modal-card{
      width:min(88vw, 420px);
      max-height:min(86vh, 720px);
      overflow:auto;
      background:rgba(255,255,255,.9);
      border-radius:20px;
      padding:20px 18px 16px;
      box-shadow:0 12px 24px rgba(15,18,35,.16);
      border:none;
      position:relative;
      animation:pop .2s ease;
      backdrop-filter:blur(10px);
    }
    .yb-modal-card h2{
      margin:2px 0 6px 0;
      font-size:22px;
      letter-spacing:.2px;
      padding-right:64px;
    }
    .yb-modal-card p{
      margin:6px 0;
      font-size:14px;
      color:var(--stone);
    }
    .yb-modal-card .perk{
      background:rgba(111,92,255,.08);
      border-radius:14px;
      padding:8px 10px;
      font-size:13px;
      margin:8px 0;
      border:none;
    }
    #modal-track .yb-modal-card,
    #modal-stretch .yb-modal-card,
    #modal-obstacle .yb-modal-card,
    #modal-roost .yb-modal-card,
    #modal-hydration .yb-modal-card,
    #modal-windmill .yb-modal-card{
      max-height:84vh;
      overflow:hidden;
      padding:12px;
    }
    @media (min-width: 641px){
      #modal-track .yb-modal-card,
      #modal-stretch .yb-modal-card,
      #modal-obstacle .yb-modal-card,
      #modal-roost .yb-modal-card,
      #modal-hydration .yb-modal-card,
      #modal-windmill .yb-modal-card{
        overflow:hidden;
        padding-bottom:18px;
      }
    }
    #modal-track .yb-modal-card p,
    #modal-stretch .yb-modal-card p,
    #modal-obstacle .yb-modal-card p,
    #modal-roost .yb-modal-card p,
    #modal-hydration .yb-modal-card p,
    #modal-windmill .yb-modal-card p{
      font-size:12px;
      line-height:1.2;
      margin:5px 0;
    }
    #modal-track .minigame-perks,
    #modal-stretch .minigame-perks,
    #modal-obstacle .minigame-perks,
    #modal-roost .minigame-perks,
    #modal-hydration .minigame-perks,
    #modal-windmill .minigame-perks{
      padding:6px 8px;
      margin:4px 0 8px;
      font-size:10.5px;
    }
    #modal-track .minigame-perks strong,
    #modal-stretch .minigame-perks strong,
    #modal-obstacle .minigame-perks strong,
    #modal-roost .minigame-perks strong,
    #modal-hydration .minigame-perks strong,
    #modal-windmill .minigame-perks strong{
      font-size:10px;
    }
    #modal-board .yb-modal-card{
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:16px 14px 14px;
      height:min(86vh, 720px);
      width:min(92vw, 460px);
      max-height:86vh;
    }
    #modal-board .yb-modal-close{
      top:8px;
      right:8px;
    }
    #modal-privacy .yb-modal-card{
      width:min(1100px,96vw);
      max-width:none;
      height:min(92vh,900px);
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:12px;
      overflow:hidden;
    }
    #modal-privacy .yb-modal-close{
      top:8px;
      right:8px;
    }
    .privacy-frame{
      flex:1;
      width:100%;
      border:0;
      border-radius:12px;
      background:#fff;
      box-shadow:inset 0 0 0 1px rgba(111,92,255,.08);
    }
    .board-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      padding-bottom:6px;
      border-bottom:1px solid rgba(111,92,255,.12);
      padding-right:56px;
    }
    .board-header h2{
      margin:0;
      font-size:18px;
      letter-spacing:.2px;
    }
    .board-yardfeed-btn{
      padding:6px 12px;
      font-size:11px;
    }
    .board-icon{
      width:16px;
      height:16px;
      object-fit:contain;
      display:inline-block;
      filter:none;
    }
    .board-tab{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .board-tabs{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .board-tab{
      border:1px solid rgba(111,92,255,.18);
      border-radius:999px;
      padding:3px 8px;
      background:rgba(255,255,255,.45);
      color:var(--stone);
      font-weight:700;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.4px;
      cursor:pointer;
      box-shadow:0 4px 10px rgba(15,18,35,.1);
      white-space:nowrap;
    }
    .board-tab.is-active{
      background:rgba(111,92,255,.16);
      color:var(--accent-deep);
      border:1px solid rgba(111,92,255,.35);
    }
    .board-panel{
      display:none;
      height:100%;
    }
    .board-panel.is-active{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .board-panel[data-board-panel="world"],
    .board-panel[data-board-panel="yard"],
    .board-panel[data-board-panel="leaderboard"],
    .board-panel[data-board-panel="members"],
    .board-panel[data-board-panel="achievements"],
    .board-panel[data-board-panel="settings"]{
      min-height:220px;
      flex:1;
    }
    .board-list{
      background:rgba(255,255,255,.7);
      border-radius:12px;
      padding:8px;
      border:1px solid rgba(111,92,255,.14);
      max-height:none;
      overflow:auto;
      font-size:12.5px;
      color:var(--ink);
      flex:1;
    }
    .board-message{
      display:flex;
      flex-direction:column;
      gap:4px;
      padding:6px 8px;
      border-radius:10px;
      background:rgba(255,255,255,.75);
      box-shadow:0 4px 8px rgba(15,18,35,.06);
    }
    .board-message + .board-message{
      margin-top:6px;
    }
    .board-message.is-self{
      background:rgba(111,92,255,.12);
      border:1px solid rgba(111,92,255,.25);
    }
    .board-message-main{
      display:flex;
      gap:6px;
      align-items:baseline;
    }
    .board-message-text{
      flex:1;
      min-width:0;
    }
    .board-message strong{
      font-size:11px;
      color:var(--accent-deep);
      text-transform:uppercase;
      letter-spacing:.3px;
      white-space:nowrap;
    }
    .board-message-time{
      font-size:11px;
      color:var(--stone);
      margin-left:8px;
      white-space:nowrap;
    }
    .board-input{
      margin-top:0;
      display:flex;
      gap:8px;
      align-items:flex-end;
    }
    .board-input textarea{
      flex:1;
      min-height:40px;
      padding:8px 10px;
      border-radius:10px;
      border:none;
      background:rgba(255,255,255,.9);
      font-size:12.5px;
      resize:none;
      font-family:inherit;
      color:var(--ink);
    }
    .board-dm{
      display:grid;
      grid-template-columns:0.7fr 1.6fr;
      gap:8px;
      min-height:260px;
      flex:1;
    }
    .board-dm-list{
      background:rgba(255,255,255,.7);
      border-radius:12px;
      padding:6px;
      border:1px solid rgba(111,92,255,.14);
      max-height:none;
      overflow:auto;
      font-size:11.5px;
    }
    .board-dm-thread{
      display:flex;
      flex-direction:column;
      flex:1;
      gap:8px;
    }
    .board-dm-header{
      font-weight:800;
      color:var(--ink);
      font-size:13px;
      padding:4px 2px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .board-dm-delete{
      border:none;
      border-radius:999px;
      padding:4px 8px;
      font-size:10px;
      font-weight:800;
      background:rgba(180,35,35,.12);
      color:#7e1414;
      cursor:pointer;
    }
    .board-thread{
      width:100%;
      text-align:left;
      border:none;
      background:rgba(255,255,255,.8);
      border-radius:10px;
      padding:6px;
      margin-bottom:6px;
      cursor:pointer;
      box-shadow:0 4px 8px rgba(15,18,35,.06);
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .board-thread.is-unread{
      border:1px solid rgba(111,92,255,.35);
    }
    .board-thread span{
      font-size:10.5px;
      color:var(--stone);
    }
    .board-thread strong{
      font-size:11.5px;
      color:var(--ink);
    }
    .board-status{
      font-size:10.5px;
      color:var(--stone);
      min-height:16px;
      padding-left:2px;
    }
    .board-search{
      margin-top:0;
      display:flex;
      flex-direction:column;
      gap:8px;
      flex:1;
    }
    .board-search-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      font-size:12px;
      font-weight:700;
      color:var(--ink);
    }
    .board-search-toggle{
      display:flex;
      gap:6px;
    }
    .board-pill{
      border:none;
      border-radius:999px;
      padding:4px 10px;
      background:rgba(255,255,255,.65);
      font-size:11px;
      font-weight:700;
      cursor:pointer;
      color:var(--ink);
    }
    .board-pill.is-active{
      background:var(--accent);
      color:#fff;
    }
    .board-member-list{
      background:rgba(255,255,255,.7);
      border-radius:12px;
      padding:8px;
      border:1px solid rgba(111,92,255,.14);
      max-height:none;
      overflow:auto;
      flex:1;
    }
    .board-member{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      padding:6px 8px;
      border-radius:10px;
      background:rgba(255,255,255,.85);
      box-shadow:0 4px 8px rgba(15,18,35,.06);
      border:none;
      width:100%;
      text-align:left;
      cursor:pointer;
      margin-bottom:8px;
    }
    .board-member-actions{
      display:flex;
      gap:6px;
      align-items:center;
      margin-left:auto;
    }
    .board-member-btn{
      border:none;
      border-radius:999px;
      padding:4px 8px;
      font-size:10px;
      font-weight:700;
      background:rgba(111,92,255,.12);
      color:var(--accent-deep);
      cursor:pointer;
    }
    .board-member-btn.is-secondary{
      background:rgba(0,0,0,.06);
      color:var(--stone);
    }
    .board-member:last-child{
      margin-bottom:0;
    }
    .board-member-info{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .board-avatar{
      width:26px;
      height:26px;
      border-radius:8px;
      object-fit:cover;
      background:rgba(255,255,255,.6);
    }
    .board-member span{
      font-size:10.5px;
      color:var(--stone);
    }
    .board-achievement{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      padding:8px;
      border-radius:10px;
      background:rgba(255,255,255,.8);
      border:1px solid rgba(111,92,255,.12);
      box-shadow:0 4px 8px rgba(15,18,35,.06);
    }
    .board-achievements-header{
      font-size:12px;
      font-weight:800;
      color:var(--accent-deep);
      text-transform:uppercase;
      letter-spacing:.4px;
      margin-bottom:2px;
    }
    .board-achievement + .board-achievement{
      margin-top:8px;
    }
    .board-achievement.is-owned{
      position:relative;
      border:none;
      background:transparent;
      padding:10px 12px;
      min-height:84px;
      box-shadow:0 8px 16px rgba(77,38,10,.16);
    }
    .board-achievement.is-owned::before{
      content:"";
      position:absolute;
      inset:-6px -4px -8px -4px;
      background:url('/assets/app/v2/achievement_toast_border.webp') center/100% 114% no-repeat;
      pointer-events:none;
      z-index:0;
    }
    .board-achievement-content{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:minmax(0, 1fr) 78px;
      gap:12px;
      align-items:center;
      width:100%;
    }
    .board-achievement-text{
      min-width:0;
      padding:2px 12px 2px 45px;
      text-shadow:0 1px 0 rgba(255,255,255,.35);
    }
    .board-achievement-text strong{
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .board-achievement-text .achievement-tagline{
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .board-achievement-text .achievement-desc{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .board-achievement-text .achievement-requirement{
      display:block;
      font-size:11px;
      color:var(--stone);
    }
    .board-achievement-bib{
      width:78px;
      height:66px;
      background:url('/assets/app/v2/achievement_bib.webp') center/contain no-repeat;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      font-weight:900;
      color:#3a2a00;
      text-shadow:0 1px 0 rgba(255,255,255,.5);
      line-height:1;
      gap:2px;
      transform:translate(-2px, -4px) rotate(-2deg);
      filter:drop-shadow(0 5px 8px rgba(77,38,10,.25));
    }
    .board-achievement-bib span{
      font-size:15px;
      transform:rotate(-3deg) translateY(2px);
    }
    .board-achievement-bib small{
      font-size:8px;
      text-transform:uppercase;
      letter-spacing:.6px;
      color:#5a3a10;
      transform:rotate(-3deg) translateY(2px);
    }
    .board-achievement.is-unearned{
      opacity:.55;
    }
    .board-achievement strong{
      display:block;
      font-size:11.5px;
      color:var(--ink);
      margin-bottom:4px;
    }
    .board-achievement span{
      font-size:10.5px;
      color:var(--stone);
    }
    .board-achievement .achievement-tagline{
      color:var(--accent-deep);
      font-weight:700;
      font-size:10.5px;
    }
    .board-achievement-group{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .board-achievement-group + .board-achievement-group{
      margin-top:10px;
    }
    .board-achievement-group-title{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.4px;
      color:var(--accent-deep);
    }
    .board-achievement-category{
      font-size:10px;
      font-weight:700;
      color:var(--stone);
      text-transform:uppercase;
      letter-spacing:.3px;
      margin-top:4px;
    }
    .board-settings{
      display:flex;
      flex-direction:column;
      gap:10px;
      overflow:auto;
      flex:1;
    }
    .board-setting{
      background:rgba(255,255,255,.8);
      border-radius:12px;
      padding:8px;
      border:1px solid rgba(111,92,255,.12);
      box-shadow:0 4px 8px rgba(15,18,35,.06);
    }
    .board-setting.danger{
      border-color:rgba(197,34,34,.25);
      background:linear-gradient(180deg, rgba(255,242,242,.95), rgba(255,232,232,.92));
      box-shadow:0 6px 12px rgba(140,20,20,.12);
    }
    .track-secondary.danger{
      border-color:#c52222;
      color:#a31515;
      background:linear-gradient(180deg, #ffe7e7, #ffd6d6);
      box-shadow:0 8px 16px rgba(170,25,25,.18);
      font-size:11px;
      padding:4px 8px;
      align-self:flex-end;
      min-width:0;
    }
    .track-secondary.danger:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 18px rgba(170,25,25,.24);
    }
    .board-setting label{
      font-size:11.5px;
      font-weight:700;
      color:var(--ink);
    }
    .board-note{
      font-size:10.5px;
      color:var(--stone);
      margin-top:6px;
    }
    .board-toggle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .board-toggle input{
      width:18px;
      height:18px;
    }
    .board-google-btn{
      width:100%;
    }
    .profile-achievement-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border:none;
      border-radius:999px;
      padding:6px 10px;
      background:rgba(111,92,255,.12);
      color:var(--accent-deep);
      font-weight:800;
      font-size:11px;
      letter-spacing:.2px;
      box-shadow:0 4px 8px rgba(15,18,35,.08);
      cursor:pointer;
    }
    .profile-achievement-pill img{
      width:16px;
      height:16px;
      object-fit:contain;
    }
    .board-empty{
      color:var(--stone);
      font-size:12px;
      text-align:center;
      padding:12px 4px;
    }
    .board-leaderboard{
      display:flex;
      flex-direction:column;
      gap:10px;
      overflow:auto;
      padding-right:2px;
    }
    .board-leaderboard-section{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .board-leaderboard-section h3{
      margin:0;
      display:flex;
      align-items:center;
      gap:8px;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.4px;
      color:var(--accent-deep);
    }
    .board-list.board-list-embedded{
      max-height:none;
      min-height:unset;
      flex:none;
      padding:6px 8px;
    }
    .score-rank-row{
      align-items:center;
    }
    .score-rank-name{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }
    .score-rank-name > span:last-child{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .score-rank-num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:26px;
      color:var(--stone);
      font-size:11px;
      font-weight:800;
      flex:0 0 auto;
    }
    .score-rank-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:4px;
      min-width:30px;
      height:20px;
      padding:0;
      border-radius:0;
      border:none;
      box-shadow:none;
      flex:0 0 auto;
      font-size:10px;
      color:rgba(26,24,20,.86);
      background:transparent;
    }
    .score-rank-badge img{
      width:11px;
      height:11px;
      object-fit:contain;
      flex:0 0 auto;
    }
    .score-rank-glyph{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:12px;
      height:12px;
      font-size:11px;
      line-height:1;
      font-family:"Segoe UI Emoji","Noto Color Emoji","Apple Color Emoji",sans-serif;
      transform:translateY(-.25px);
      flex:0 0 auto;
    }
    .score-rank-badge span{
      line-height:1;
      font-weight:900;
    }
    .leaderboard-game-icon{
      width:16px;
      height:16px;
      object-fit:contain;
      flex:0 0 auto;
    }
    @media (max-width: 560px){
      #modal-board .yb-modal-card{
        padding:14px 12px 12px;
        height:92vh;
        width:96vw;
        max-height:92vh;
      }
      .board-header{
        padding-right:52px;
      }
      .board-dm{
        grid-template-columns:1fr;
      }
      .board-dm-list{
        max-height:180px;
      }
      .board-list{
        max-height:none;
      }
    }
    .yb-modal-close{
      position:absolute;
      top:10px;
      right:12px;
      border:0;
      background:linear-gradient(135deg, var(--accent), var(--accent-deep));
      color:#fff;
      border-radius:12px;
      padding:4px 10px;
      cursor:pointer;
      font-size:12px;
    }
    #modal-achievement-share .yb-modal-card{
      width:min(96vw, 820px);
      max-height:92vh;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .share-preview{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(111,92,255,.18);
      background:rgba(255,255,255,.7);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px;
    }
    .share-preview img{
      width:100%;
      height:auto;
      display:block;
      border-radius:12px;
      box-shadow:0 8px 16px rgba(15,18,35,.12);
    }
    .share-actions{
      display:flex;
      gap:8px;
      justify-content:flex-end;
      align-items:center;
    }
    .modal-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
      margin-top:10px;
    }
    .modal-card{
      background:rgba(255,255,255,.7);
      border-radius:14px;
      padding:10px;
      border:none;
      font-size:12px;
      color:var(--stone);
    }
    .profile-doll{
      display:grid;
      gap:12px;
      margin-top:10px;
    }
    .profile-doll-stage{
      position:relative;
      height:360px;
      border-radius:18px;
      background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,244,224,.8));
      box-shadow:inset 0 0 0 1px rgba(255,211,107,.35);
      overflow:hidden;
    }
    .profile-avatar-large{
      position:absolute;
      left:50%;
      top:28%;
      width:170px;
      height:170px;
      transform:translate(-50%, -50%);
      object-fit:contain;
      filter:drop-shadow(0 10px 20px rgba(15,18,35,.18));
    }
    .profile-slot{
      position:absolute;
      width:58px;
      height:58px;
      border-radius:14px;
      background:rgba(255,255,255,.8);
      box-shadow:0 8px 16px rgba(15,18,35,.12);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:6px;
      transform:translate(-50%, -50%);
      z-index:1;
      touch-action:manipulation;
      pointer-events:auto;
    }
    .profile-slot.is-owned{
      cursor:pointer;
    }
    .profile-slot img{
      width:100%;
      height:100%;
      object-fit:contain;
    }
    .profile-slot-label{
      display:none;
    }
    .profile-slot-placeholder{
      width:100%;
      height:100%;
      border-radius:10px;
      background:rgba(111,92,255,.08);
      border:1px dashed rgba(111,92,255,.3);
      color:var(--accent-deep);
      font-size:9px;
      font-weight:800;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:4px;
      text-transform:uppercase;
      letter-spacing:.3px;
    }
    #modal-roost:not(.is-playing) .eggdrop-ui{
      display:grid;
      gap:8px;
      margin-top:6px;
      position:relative;
      padding-top:18px;
    }
    .eggdrop-hud{
      display:flex;
      justify-content:space-between;
      gap:8px;
      font-size:10px;
      color:var(--stone);
      text-transform:uppercase;
      letter-spacing:.6px;
      font-weight:800;
    }
    .eggdrop-hud strong{
      display:block;
      color:var(--ink);
      font-size:18px;
      letter-spacing:0;
    }
    .eggdrop-window,
    .hydration-window,
    .obstacle-window{
      position:relative;
      width:100%;
      touch-action:none;
      z-index:1;
    }
    .eggdrop-window{
      --landscape-bg:url('/assets/app/v2/bg_egg_drop.webp');
    }
    .hydration-window{
      --landscape-bg:url('/assets/app/v2/bg_water_stop.webp');
    }
    #modal-roost:not(.is-playing) .eggdrop-window{
      height:240px;
      margin-top:4px;
      box-shadow:0 8px 16px rgba(15,18,35,.12);
    }
    .eggdrop-sliderbar{
      position:relative;
      width:100%;
      background:url('/assets/app/v2/eggdrop_slidebar.webp') center/100% 100% no-repeat;
      background-color:rgba(255,255,255,.08);
      background-blend-mode:screen;
      filter:brightness(1.25) saturate(1.1);
      touch-action:none;
    }
    #modal-roost.is-playing .eggdrop-sliderbar{
      opacity:1;
      filter:brightness(1.32) saturate(1.15);
      pointer-events:auto;
    }
    #modal-roost:not(.is-playing) .eggdrop-sliderbar{
      height:56px;
      margin-top:6px;
    }
    .eggdrop-slider{
      position:absolute;
      top:36%;
      width:clamp(54px, 12vw, 76px);
      height:clamp(54px, 12vw, 76px);
      transform:translate(-50%, -50%);
      pointer-events:auto;
      touch-action:none;
      user-select:none;
      -webkit-user-drag:none;
      filter:brightness(1.35) drop-shadow(0 6px 10px rgba(15,18,35,.2));
    }
    .eggdrop-window .countdown-overlay{
      z-index:6;
    }
    .eggdrop-fox{
      position:absolute;
      top:-8%;
      width:100px;
      height:100px;
      object-fit:contain;
      pointer-events:none;
      filter:drop-shadow(0 6px 10px rgba(15,18,35,.25));
      z-index:5;
      transform:scaleX(var(--eggdrop-fox-flip, 1));
      transform-origin:center;
    }
    .eggdrop-fox.is-stunned{
      filter:grayscale(0.3) brightness(0.9) drop-shadow(0 6px 10px rgba(15,18,35,.2));
      opacity:0.9;
    }
    .eggdrop-fox.is-hit{
      animation:eggdropFoxHit .25s ease;
    }
    @keyframes eggdropFoxHit{
      0%{ transform:translateX(0) scaleX(var(--eggdrop-fox-flip, 1)); }
      20%{ transform:translateX(-7px) rotate(-3deg) scaleX(var(--eggdrop-fox-flip, 1)); }
      45%{ transform:translateX(8px) rotate(3deg) scaleX(var(--eggdrop-fox-flip, 1)); }
      70%{ transform:translateX(-6px) rotate(-2deg) scaleX(var(--eggdrop-fox-flip, 1)); }
      100%{ transform:translateX(0) scaleX(var(--eggdrop-fox-flip, 1)); }
    }
    .eggdrop-chicken{
      position:absolute;
      bottom:2%;
      width:90px;
      height:90px;
      object-fit:contain;
      pointer-events:none;
      outline:none;
      user-select:none;
      -webkit-user-select:none;
      -webkit-user-drag:none;
      -webkit-tap-highlight-color:transparent;
      filter:drop-shadow(0 6px 10px rgba(15,18,35,.2));
      transform:scaleX(var(--eggdrop-chicken-flip, 1)) scale(var(--eggdrop-chicken-scale, 1));
      transform-origin:center;
    }
    .eggdrop-chicken.is-boosted{
      animation:eggdropBoostPulse .9s ease-in-out infinite;
      filter:
        drop-shadow(0 0 18px rgba(255,230,110,.95))
        drop-shadow(0 0 36px rgba(255,240,150,.85))
        drop-shadow(0 6px 10px rgba(15,18,35,.2));
    }
    @keyframes eggdropBoostPulse{
      0%,100%{
        filter:
          drop-shadow(0 0 16px rgba(255,230,110,.8))
          drop-shadow(0 0 28px rgba(255,240,150,.7))
          drop-shadow(0 6px 10px rgba(15,18,35,.2));
      }
      50%{
        filter:
          drop-shadow(0 0 26px rgba(255,235,120,.98))
          drop-shadow(0 0 48px rgba(255,245,170,.9))
          drop-shadow(0 6px 10px rgba(15,18,35,.2));
      }
    }
    .eggdrop-chicken.is-catching{
      animation:eggdropChickenBounce .28s ease;
    }
    @keyframes eggdropChickenBounce{
      0%{ transform:scaleX(var(--eggdrop-chicken-flip, 1)) scale(var(--eggdrop-chicken-scale, 1)) translateY(0); }
      35%{ transform:scaleX(var(--eggdrop-chicken-flip, 1)) scale(var(--eggdrop-chicken-scale, 1)) translateY(-6px); }
      70%{ transform:scaleX(var(--eggdrop-chicken-flip, 1)) scale(var(--eggdrop-chicken-scale, 1)) translateY(0); }
      100%{ transform:scaleX(var(--eggdrop-chicken-flip, 1)) scale(var(--eggdrop-chicken-scale, 1)) translateY(0); }
    }
    .eggdrop-egg{
      position:absolute;
      width:32px;
      height:40px;
      object-fit:contain;
      pointer-events:none;
      user-select:none;
      -webkit-user-drag:none;
    }
    .eggdrop-splat{
      position:absolute;
      width:56px;
      height:26px;
      object-fit:contain;
      pointer-events:none;
      user-select:none;
      -webkit-user-drag:none;
    }
    .eggdrop-splat.is-cleaned{
      opacity:0;
      transition:opacity .2s ease;
    }
    /* Kabawk landscape: stage + controls + status using template layout (clean rewrite) */
    #modal-roost.is-playing.is-landscape .eggdrop-ui{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      height:100%;
      margin:0;
      padding:0;
      gap:0;
      position:relative;
      box-sizing:border-box;
    }
    #modal-roost.is-playing.is-landscape .eggdrop-sliderbar{
      background-size:100% 100%;
    }
    #modal-roost.is-playing.is-landscape .eggdrop-slider{
      top:46%;
    }
    .eggdrop-fx-layer{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:7;
    }
    .eggdrop-popup-layer{
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .eggdrop-popup{
      position:absolute;
      transform:translate(-50%, -50%) scale(1);
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-weight:800;
      font-size:18px;
      letter-spacing:.6px;
      text-transform:uppercase;
      color:#fff8d5;
      text-shadow:
        0 2px 0 #7a4a00,
        0 4px 10px rgba(0,0,0,.35);
      animation:eggdropPopup .85s ease forwards;
      white-space:nowrap;
    }
    .eggdrop-popup-main{
      display:block;
    }
    .eggdrop-popup-sub{
      display:block;
      margin-top:6px;
      font-size:18px;
      letter-spacing:1.6px;
      color:#fff1b5;
      text-shadow:
        -1px -1px 0 #5a2f00,
        1px -1px 0 #5a2f00,
        -1px 1px 0 #5a2f00,
        1px 1px 0 #5a2f00,
        0 6px 12px rgba(0,0,0,.35);
    }
    .eggdrop-popup-sub-wrap{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      margin-top:6px;
      width:100%;
    }
    .eggdrop-popup-sub-wrap .eggdrop-popup-sub{
      margin-top:0;
      text-align:center;
    }
    .eggdrop-popup-sub-egg{
      width:22px;
      height:26px;
      object-fit:contain;
      filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));
      flex:0 0 auto;
    }
    .eggdrop-popup.is-combo{
      font-size:30px;
      font-weight:900;
      color:#fff9da;
      letter-spacing:1px;
      text-shadow:
        -2px -2px 0 #6b3b00,
        2px -2px 0 #6b3b00,
        -2px 2px 0 #6b3b00,
        2px 2px 0 #6b3b00,
        0 4px 12px rgba(0,0,0,.35),
        0 0 18px rgba(255,220,120,.8);
    }
    .eggdrop-alert{
      position:absolute;
      transform:translate(-50%, -120%);
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-weight:900;
      font-size:38px;
      letter-spacing:2px;
      color:#fff4a3;
      text-shadow:
        -2px -2px 0 #5a2f00,
        2px -2px 0 #5a2f00,
        -2px 2px 0 #5a2f00,
        2px 2px 0 #5a2f00,
        0 0 18px rgba(255,220,120,.85);
      animation:eggdropAlertPop .85s ease both;
      z-index:10;
      pointer-events:none;
    }
    @keyframes eggdropAlertPop{
      0%{ opacity:0; transform:translate(-50%, -110%) scale(0.6) rotate(-6deg); }
      60%{ opacity:1; transform:translate(-50%, -125%) scale(1.15) rotate(4deg); }
      100%{ opacity:0; transform:translate(-50%, -140%) scale(0.98) rotate(0deg); }
    }
    .eggdrop-popup.is-miss{
      color:#ff6a6a;
      text-shadow:
        0 2px 0 #4a0e0e,
        0 0 10px rgba(255,90,90,.6);
    }
    .eggdrop-popup.is-boost{
      color:#fff5b8;
      text-shadow:
        0 2px 0 #6b3b00,
        0 0 14px rgba(255,213,90,.7);
    }
    .eggdrop-popup.is-stun{
      color:#b7d7ff;
      text-shadow:
        0 2px 0 #1c2c44,
        0 0 12px rgba(120,180,255,.6);
    }
    .eggdrop-popup.is-round{
      font-size:26px;
      color:#fff7d2;
      text-shadow:
        -2px -2px 0 #5a2f00,
        2px -2px 0 #5a2f00,
        -2px 2px 0 #5a2f00,
        2px 2px 0 #5a2f00,
        0 8px 16px rgba(0,0,0,.35);
    }
    .eggdrop-popup.is-perfect{
      font-size:28px;
      font-weight:900;
      color:#fff6c6;
      letter-spacing:1px;
      text-shadow:
        -2px -2px 0 #5a2f00,
        2px -2px 0 #5a2f00,
        -2px 2px 0 #5a2f00,
        2px 2px 0 #5a2f00,
        0 10px 18px rgba(0,0,0,.35),
        0 0 18px rgba(255,210,90,.6);
      animation:eggdropPerfectPop 2.6s ease forwards;
    }
    .trail-run-popup-layer{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:7;
    }
    .trail-run-popup{
      position:absolute;
      transform:translate(-50%, -50%) scale(1);
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-weight:900;
      font-size:32px;
      letter-spacing:1.4px;
      text-transform:uppercase;
      color:#fff9da;
      text-shadow:
        -2px -2px 0 #6b3b00,
        2px -2px 0 #6b3b00,
        -2px 2px 0 #6b3b00,
        2px 2px 0 #6b3b00,
        0 6px 14px rgba(0,0,0,.35),
        0 0 18px rgba(255,220,120,.75);
      animation:trailRunPopup .95s ease forwards;
      white-space:nowrap;
    }
    .trail-run-popup-main{
      display:block;
    }
    .trail-run-popup-sub{
      display:block;
      margin-top:6px;
      font-size:20px;
      letter-spacing:1.4px;
      color:#fff1b5;
      text-shadow:
        -1px -1px 0 #5a2f00,
        1px -1px 0 #5a2f00,
        -1px 1px 0 #5a2f00,
        1px 1px 0 #5a2f00,
        0 6px 12px rgba(0,0,0,.35);
    }
    @keyframes trailRunPopup{
      0%{ opacity:0; transform:translate(-50%, -50%) scale(0.6); }
      25%{ opacity:1; transform:translate(-50%, -60%) scale(1.1); }
      70%{ opacity:1; transform:translate(-50%, -64%) scale(1.04); }
      100%{ opacity:0; transform:translate(-50%, -78%) scale(1.02); }
    }
    @keyframes eggdropPopup{
      0%{ opacity:0; transform:translate(-50%, -50%) scale(0.6); }
      35%{ opacity:1; transform:translate(-50%, -60%) scale(1.05); }
      100%{ opacity:0; transform:translate(-50%, -80%) scale(1.05); }
    }
    @keyframes eggdropPerfectPop{
      0%{ opacity:0; transform:translate(-50%, -52%) scale(0.6); }
      20%{ opacity:1; transform:translate(-50%, -62%) scale(1.08); }
      80%{ opacity:1; transform:translate(-50%, -64%) scale(1.03); }
      100%{ opacity:0; transform:translate(-50%, -76%) scale(1.02); }
    }
    .eggdrop-combo-meter{
      position:absolute;
      top:68px;
      right:18px;
      left:auto;
      transform:none;
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-weight:900;
      font-size:15px;
      letter-spacing:.8px;
      text-transform:uppercase;
      color:#ffd452;
      text-shadow:
        0 2px 0 #6b3b00,
        0 0 12px rgba(255,210,90,.7);
      opacity:0;
      text-align:right;
      padding:8px 10px;
      border-radius:12px;
      background:rgba(10,12,18,.55);
      border:1px solid rgba(255,210,90,.35);
    }
    .eggdrop-combo-meter span{
      display:block;
      font-size:12px;
      letter-spacing:1.2px;
      color:#fff1b5;
    }
    .eggdrop-combo-meter strong{
      display:block;
      font-size:24px;
      letter-spacing:1px;
      color:#ffd452;
      text-shadow:
        0 3px 0 #6b3b00,
        0 0 16px rgba(255,210,90,.8);
    }
    .eggdrop-combo-meter.is-active{
      opacity:1;
    }
    .eggdrop-combo-meter.is-pop{
      animation:eggdropComboPop .4s ease;
    }
    @keyframes eggdropComboPop{
      0%{ transform:scale(0.9); }
      55%{ transform:scale(1.12); }
      100%{ transform:scale(1); }
    }
    .eggdrop-gel{
      position:absolute;
      filter:
        drop-shadow(0 8px 12px rgba(15,18,35,.25))
        drop-shadow(0 0 18px rgba(255,210,90,.7))
        drop-shadow(0 0 6px rgba(255,245,200,.9));
      animation:eggdropGelBounce 1.1s ease-in-out infinite;
      z-index:6;
    }
    @keyframes eggdropGelBounce{
      0%,100%{ transform:translateY(0) scale(1); }
      50%{ transform:translateY(var(--gel-bounce, -32px)) scale(1.07); }
    }
    @keyframes eggdropGelPulse{
      0%,100%{ transform:scale(1); }
      50%{ transform:scale(1.05); }
    }
    .eggdrop-power-chicken{
      position:absolute;
      width:72px;
      height:72px;
      object-fit:contain;
      pointer-events:none;
      z-index:7;
      animation:eggdropVisitorLeft 2.2s ease both;
    }
    .eggdrop-power-chicken.is-right{
      animation-name:eggdropVisitorRight;
    }
    .eggdrop-power-chicken.eggdrop-corn-helper,
    .eggdrop-power-chicken.eggdrop-gel-helper{
      opacity:0;
      animation:eggdropAssistSlideIn .5s ease forwards;
    }
    .eggdrop-power-chicken.eggdrop-corn-helper.is-right,
    .eggdrop-power-chicken.eggdrop-gel-helper.is-right{
      animation-name:eggdropAssistSlideInRight;
    }
    .eggdrop-power-chicken.eggdrop-corn-helper.is-leaving,
    .eggdrop-power-chicken.eggdrop-gel-helper.is-leaving{
      animation:eggdropAssistExitLeft .5s ease forwards;
    }
    .eggdrop-power-chicken.eggdrop-corn-helper.is-leaving.is-right,
    .eggdrop-power-chicken.eggdrop-gel-helper.is-leaving.is-right{
      animation-name:eggdropAssistExitRight;
    }
    @keyframes eggdropVisitorLeft{
      0%{ transform:translateX(-90px) scale(0.92); opacity:0; }
      30%{ transform:translateX(18px) scale(1.04); opacity:1; }
      60%{ transform:translateX(10px) scale(1); opacity:1; }
      100%{ transform:translateX(-90px) scale(0.95); opacity:0; }
    }
    @keyframes eggdropVisitorRight{
      0%{ transform:translateX(90px) scale(0.92); opacity:0; }
      30%{ transform:translateX(-18px) scale(1.04); opacity:1; }
      60%{ transform:translateX(-10px) scale(1); opacity:1; }
      100%{ transform:translateX(90px) scale(0.95); opacity:0; }
    }
    @keyframes eggdropAssistSlideIn{
      0%{ transform:translateX(-90px) scale(0.95); opacity:0; }
      100%{ transform:translateX(6px) scale(1); opacity:1; }
    }
    @keyframes eggdropAssistSlideInRight{
      0%{ transform:translateX(90px) scale(0.95); opacity:0; }
      100%{ transform:translateX(-6px) scale(1); opacity:1; }
    }
    @keyframes eggdropAssistExitLeft{
      0%{ transform:translateX(6px) scale(1); opacity:1; }
      100%{ transform:translateX(-110px) scale(0.95); opacity:0; }
    }
    @keyframes eggdropAssistExitRight{
      0%{ transform:translateX(-6px) scale(1); opacity:1; }
      100%{ transform:translateX(110px) scale(0.95); opacity:0; }
    }
    .eggdrop-corn{
      position:absolute;
      width:56px;
      height:56px;
      object-fit:contain;
      pointer-events:none;
      z-index:7;
      filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
      animation:eggdropCornToss var(--corn-duration, .7s) ease-out forwards;
    }
    .eggdrop-speech{
      position:absolute;
      transform:translate(-50%, -92%);
      max-width:240px;
      padding:12px 18px;
      border-radius:18px;
      background:#fff8e5;
      color:#4a2b00;
      font-weight:800;
      font-size:16px;
      letter-spacing:1.2px;
      text-transform:uppercase;
      box-shadow:0 6px 14px rgba(0,0,0,.2);
      border:2px solid #ffd896;
      z-index:9;
      animation:eggdropSpeechPop 1.5s ease both;
      pointer-events:none;
      --bubble-tail-x: 50%;
    }
    .eggdrop-speech.is-chatter{
      font-size:26px;
      padding:10px 16px;
      background:#fff1c2;
      color:#5a2f00;
      box-shadow:
        0 8px 16px rgba(0,0,0,.25),
        0 0 18px rgba(255,210,90,.6);
      animation:eggdropChatterPop .9s ease both;
    }
    @keyframes eggdropChatterPop{
      0%{ opacity:0; transform:translate(-50%, -80%) scale(0.7) rotate(-6deg); }
      60%{ opacity:1; transform:translate(-50%, -95%) scale(1.1) rotate(4deg); }
      100%{ opacity:1; transform:translate(-50%, -100%) scale(1); }
    }
    .eggdrop-speech::after{
      content:"";
      position:absolute;
      left:var(--bubble-tail-x);
      transform:translateX(-50%);
      bottom:-8px;
      width:0;
      height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-top:10px solid #ffd896;
      filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));
    }
    .eggdrop-speech.is-right::after{
      left:var(--bubble-tail-x);
      right:auto;
      --bubble-tail-x: 70%;
    }
    .eggdrop-speech.is-left::after{
      --bubble-tail-x: 30%;
    }
    @keyframes eggdropSpeechPop{
      0%{ opacity:0; transform:translate(-50%, -78%) scale(0.85); }
      35%{ opacity:1; transform:translate(-50%, -90%) scale(1.05); }
      100%{ opacity:0; transform:translate(-50%, -108%) scale(1); }
    }
    @keyframes eggdropCornToss{
      0%{ transform:translate(var(--corn-start-x), var(--corn-start-y)) rotate(0deg) scale(0.9); }
      70%{ transform:translate(calc((var(--corn-start-x) + var(--corn-end-x)) / 2), calc((var(--corn-start-y) + var(--corn-end-y)) / 2)) rotate(360deg) scale(1.05); }
      100%{ transform:translate(var(--corn-end-x), var(--corn-end-y)) rotate(720deg) scale(1); }
    }
    .eggdrop-fox-stun{
      position:absolute;
      width:56px;
      height:56px;
      border-radius:50%;
      border:3px dashed rgba(255,255,255,.9);
      box-shadow:0 0 14px rgba(255,255,255,.55);
      opacity:0;
      pointer-events:none;
      z-index:8;
    }
    .eggdrop-fox-stun.is-active{
      opacity:1;
      animation:eggdropStunSpin 1s linear infinite;
    }
    .eggdrop-fox-stun::after{
      content:"ZZZ";
      position:absolute;
      top:-14px;
      left:50%;
      transform:translateX(-50%);
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-weight:900;
      font-size:12px;
      letter-spacing:2px;
      color:#fff7d2;
      text-shadow:
        -1px -1px 0 #4b2a00,
        1px -1px 0 #4b2a00,
        -1px 1px 0 #4b2a00,
        1px 1px 0 #4b2a00;
    }
    @keyframes eggdropStunSpin{
      0%{ transform:rotate(0deg); }
      100%{ transform:rotate(360deg); }
    }
    .eggdrop-cleaner{
      position:absolute;
      left:-120px;
      bottom:6px;
      width:90px;
      height:90px;
      object-fit:contain;
      pointer-events:none;
      z-index:6;
      animation:none;
      filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));
    }
    .eggdrop-stage-start{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(6,8,14,.35);
      opacity:0;
      pointer-events:none;
      z-index:11;
      transition:opacity .2s ease;
    }
    .eggdrop-stage-start.is-visible{
      opacity:1;
      pointer-events:auto;
    }
    .eggdrop-stage-start-btn{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      gap:12px;
      font-family:"Baloo 2","Fredoka","Bree Serif",sans-serif;
      font-weight:900;
      font-size:24px;
      letter-spacing:2px;
      text-transform:uppercase;
      color:#fff3c4;
      text-shadow:
        0 3px 0 #4b1f00,
        0 8px 16px rgba(0,0,0,.45);
      padding:12px 22px 12px 88px;
      border-radius:999px;
      border:2px solid rgba(255,214,120,.7);
      background:linear-gradient(180deg, rgba(14,14,20,.2) 0%, rgba(6,6,10,.65) 100%);
      box-shadow:
        0 14px 22px rgba(0,0,0,.35),
        inset 0 0 0 2px rgba(255,230,160,.15);
      animation:eggdropStartPulse 1.4s ease-in-out infinite;
    }
    .eggdrop-stage-start-btn .minigame-start-text{
      display:flex;
      flex-direction:column;
      align-items:center;
      line-height:1.05;
    }
    .eggdrop-stage-start-btn .minigame-start-cost{
      margin-top:2px;
      font-size:13px;
      letter-spacing:1px;
      font-weight:800;
      opacity:.96;
    }
    .eggdrop-stage-start-btn::before{
      content:"";
      position:absolute;
      left:-6px;
      top:50%;
      width:86px;
      height:86px;
      background:url("/assets/app/v2/eggdrop_fox.webp") center/contain no-repeat;
      filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
      transform:translateY(-50%) rotate(-6deg);
      pointer-events:none;
    }
    .eggdrop-stage-start-btn:active{
      transform:translateY(2px) scale(0.98);
      box-shadow:
        0 10px 16px rgba(0,0,0,.35),
        inset 0 0 0 2px rgba(255,230,160,.2);
    }
    @keyframes eggdropStartPulse{
      0%,100%{ transform:scale(1); }
      50%{ transform:scale(1.05); }
    }
    #modal-roost.is-playing.is-landscape .trail-run-gameover-title,
    #modal-roost.is-playing.is-landscape .trail-run-gameover .minigame-exit{
      transform:none;
    }
    .hydration-hud{
      display:flex;
      justify-content:space-between;
      gap:8px;
      font-size:10px;
      color:var(--stone);
      text-transform:uppercase;
      letter-spacing:.6px;
      font-weight:800;
    }
    .hydration-hud strong{
      display:block;
      color:var(--ink);
      font-size:18px;
      letter-spacing:0;
    }
    .hydration-window .countdown-overlay{
      z-index:6;
    }
    .trail-run-ui{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:4px;
    }
    .trail-run-hud{
      display:flex;
      justify-content:center;
      align-items:flex-end;
      gap:10px;
      font-size:10px;
      color:var(--stone);
      text-transform:uppercase;
      letter-spacing:.6px;
      font-weight:800;
      width:100%;
    }
    .trail-run-hud > div{
      width:100%;
      text-align:center;
    }
    .trail-run-hud strong{
      display:block;
      color:var(--ink);
      font-size:16px;
      letter-spacing:0;
    }
    .trail-run-stamina{
      width:80%;
      margin:6px auto 0;
      height:24px;
      border-radius:999px;
      background:rgba(255,255,255,.7);
      border:1px solid rgba(111,92,255,.2);
      overflow:hidden;
    }
    .trail-run-fatigue-overlay{
      position:absolute;
      top:12px;
      left:50%;
      transform:translateX(-50%);
      width:min(88%, 420px);
      z-index:7;
      text-align:center;
      pointer-events:none;
    }
    .trail-run-fatigue-overlay .trail-run-fatigue-label{
      font-size:12px;
      font-weight:900;
      color:#fff;
      letter-spacing:.6px;
      text-shadow:0 2px 4px rgba(0,0,0,.45);
      margin-bottom:4px;
    }
    .trail-run-fatigue-overlay .trail-run-stamina{
      width:100%;
      height:22px;
      margin:0;
      background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(210,220,235,.8));
      border:1px solid rgba(0,0,0,.25);
      box-shadow:
        inset 0 2px 4px rgba(255,255,255,.65),
        inset 0 -2px 6px rgba(0,0,0,.25),
        0 6px 12px rgba(0,0,0,.25);
    }
    .trail-run-fatigue-overlay .trail-run-stamina-fill{
      background:linear-gradient(90deg, #4fd56a 0%, #ffd36b 50%, #ff6b6b 100%);
      background-size:100% 100%;
      background-repeat:no-repeat;
      width:100%;
      clip-path:inset(0 100% 0 0);
    }
    .trail-run-fatigue-overlay .trail-run-stamina-fill{
      box-shadow:
        inset 0 2px 6px rgba(255,255,255,.45),
        inset 0 -2px 6px rgba(0,0,0,.25);
    }
    .trail-run-fatigue-label{
      font-size:12px;
      font-weight:800;
      color:var(--stone);
      letter-spacing:.6px;
    }
    .trail-run-stamina-fill{
      height:100%;
      width:0%;
      background:linear-gradient(90deg, #65d06e, #ffd36b, #ff6b6b);
      transition:width .2s ease;
    }
    .trail-run-window{
      position:relative;
      width:100%;
      height:min(48vh, 320px);
      border-radius:16px;
      overflow:hidden;
      background:#1a1d2b;
      box-shadow:0 8px 16px rgba(15,18,35,.12);
      border:1px solid rgba(255,255,255,.6);
    }
    .trail-run-window.is-shake{
      animation:trailRunShake .42s ease;
    }
    .hydration-window.is-shake{
      animation:trailRunShake .42s ease;
    }
    .trail-run-statusbar.is-shake{
      animation:trailRunShake .42s ease;
    }
    .trail-run-gameover{
      position:absolute;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:12px;
      background:rgba(0,0,0,.45);
      z-index:40;
      text-align:center;
    }
    .yb-modal:not(.is-playing) .minigame-playable > .trail-run-gameover{
      pointer-events:auto;
    }
    .yb-modal:not(.is-playing) .minigame-playable > .trail-run-gameover .minigame-exit{
      pointer-events:auto;
    }
    .trail-run-gameover.is-visible{
      display:flex;
      animation:trailRunGameOverFlash .9s ease-in-out infinite;
    }
    .trail-run-gameover-title{
      font-size:28px;
      font-weight:900;
      letter-spacing:.2px;
      color:#fff;
      text-transform:uppercase;
      text-shadow:0 6px 16px rgba(0,0,0,.45);
    }
    .trail-run-gameover .minigame-exit{
      position:static;
      opacity:.9;
      pointer-events:auto;
      background:rgba(15,18,35,.8);
      padding:10px 18px;
      font-size:13px;
    }
    @keyframes trailRunGameOverFlash{
      0%{ opacity:1; }
      50%{ opacity:.7; }
      100%{ opacity:1; }
    }
    .trail-run-track{
      position:absolute;
      inset:0;
      background:url('/assets/app/v2/bg_trail_run.webp') 0 0 / 100% auto repeat-y;
      will-change:background-position;
    }
    .trail-run-lanes{
      position:absolute;
      inset:0;
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      pointer-events:none;
      z-index:2;
    }
    .trail-run-gust,
    .trail-run-warning{
      position:absolute;
      top:0;
      bottom:0;
      width:25%;
      pointer-events:none;
      z-index:3;
      opacity:0;
      transition:opacity .2s ease;
    }
    .trail-run-gust{
      overflow:hidden;
      opacity:.6;
    }
    .trail-run-gust::before{
      content:"";
      position:absolute;
      top:-100%;
      left:0;
      right:0;
      height:200%;
      background:url('/assets/app/v2/trail_run_gust.webp') center/100% 100% repeat-y;
      animation:trailRunGust 1.4s linear infinite;
      will-change:transform;
    }
    .trail-run-warning{
      height:22%;
      top:-12px;
      bottom:auto;
      background:url('/assets/app/v2/trail_run_gust.webp') bottom/cover no-repeat;
      opacity:.32;
    }
    .trail-run-entity{
      position:absolute;
      width:54px;
      height:54px;
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      pointer-events:none;
      filter:drop-shadow(0 6px 10px rgba(15,18,35,.25));
    }
    .trail-run-entity.good{
      animation:trailRunGlowGood 1.2s ease-in-out infinite;
      filter:drop-shadow(0 0 12px rgba(255,210,120,.9)) drop-shadow(0 0 18px rgba(255,160,70,.8));
    }
    .trail-run-entity.bad{
      animation:trailRunGlowBad 1.1s ease-in-out infinite;
      filter:drop-shadow(0 0 8px rgba(66,255,140,.7)) drop-shadow(0 0 14px rgba(40,210,110,.55));
    }
    .trail-run-entities{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:2;
    }
    .trail-run-player{
      position:absolute;
      width:72px;
      height:72px;
      object-fit:contain;
      pointer-events:none;
      bottom:16px;
      left:50%;
      transform:translateX(-50%) scaleX(var(--trail-run-flip, 1));
      filter:drop-shadow(0 8px 12px rgba(15,18,35,.3));
      z-index:4;
    }
    .trail-run-player.is-in-gust{
      z-index:2;
    }
    .trail-run-player.is-bounce{
      animation:trailRunBounce .2s ease;
    }
    .trail-run-player.is-running{
      animation:trailRunStep .6s ease-in-out infinite;
    }
    .trail-run-player.is-fallen{
      animation:trailRunFallFlat .25s ease-out forwards;
      opacity:.95;
    }
    .trail-run-player.is-fatigued{
      animation:trailRunFatigueBreath .7s ease-in-out infinite;
      transform-origin:center;
    }
    .trail-run-controls{
      display:flex;
      gap:8px;
      justify-content:space-between;
      padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .trail-run-btn{
      flex:1;
      border:none;
      border-radius:16px;
      padding:6px 10px;
      font-weight:800;
      cursor:pointer;
      background:transparent;
      box-shadow:none;
      display:flex;
      align-items:center;
      justify-content:center;
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
      transition:transform .08s ease, filter .08s ease;
    }
    .trail-run-btn:focus{
      outline:none;
    }
    .trail-run-btn:focus-visible{
      outline:none;
    }
    .trail-run-btn:active,
    .trail-run-btn.is-pressed{
      transform:scale(.95) translateY(1px);
      filter:brightness(1.05);
    }
    .trail-run-btn img{
      height:64px;
      width:auto;
      display:block;
      pointer-events:none;
      user-select:none;
      -webkit-user-select:none;
      -webkit-user-drag:none;
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .landscape-template-grid{
      grid-template-columns:clamp(96px, 22%, 160px) minmax(0, 1fr);
      grid-template-rows:minmax(0, 1fr) clamp(60px, 20%, 120px);
      grid-template-areas:
        "status game"
        "status controls";
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .landscape-controls{
      grid-area:controls;
      display:flex;
      flex-direction:column;
      align-items:stretch;
      justify-content:center;
      gap:4px;
      padding:4px 8px;
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .landscape-status{
      grid-area:status;
      align-items:flex-start;
      justify-content:center;
      padding-left:10px;
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .landscape-game{
      grid-area:game;
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .landscape-controls .hydration-hud.landscape-status-stack{
      display:flex !important;
      flex-direction:row !important;
      align-items:flex-end;
      justify-content:space-between;
      gap:6px;
      width:100%;
      font-size:10px;
      letter-spacing:.35px;
      color:#dbe7ff;
      text-transform:uppercase;
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .landscape-controls .hydration-hud > div{
      flex:1 1 0;
      min-width:0;
      text-align:center;
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .landscape-controls .hydration-hud strong{
      display:block;
      font-size:17px;
      line-height:1;
      letter-spacing:0;
      color:#ffffff;
      text-shadow:0 2px 6px rgba(0,0,0,.5);
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .landscape-controls #hydrationStatus.track-status{
      display:block !important;
      width:100%;
      min-height:12px;
      margin:0;
      text-align:center;
      font-size:10px;
      letter-spacing:.2px;
      color:#d9e7ff;
    }
    .windmill-desc-title{
      font-size:12px;
      font-weight:800;
      margin:6px 0 2px;
      color:var(--ink);
    }
    .windmill-desc{
      font-size:11px;
      line-height:1.25;
      margin:0;
      color:var(--stone);
    }
    .windmill-howto{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .windmill-howto-line{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      color:var(--stone);
      line-height:1.25;
      background:rgba(255,255,255,.6);
      border-radius:12px;
      padding:8px 10px;
    }
    .windmill-howto-line strong{
      color:var(--ink);
    }
    .windmill-howto-icon{
      width:32px;
      height:32px;
      object-fit:contain;
      display:block;
      flex:0 0 auto;
      filter:drop-shadow(0 3px 6px rgba(15,18,35,.18));
    }
    .windmill-howto-icon.is-gust{
      width:74px;
      height:32px;
      position:relative;
      border-radius:8px;
      overflow:hidden;
      background:rgba(255,255,255,.55);
    }
    .windmill-howto-icon.is-gust::before{
      content:"";
      position:absolute;
      inset:-30% 0;
      background:url('/assets/app/v2/trail_run_gust.webp') center/cover no-repeat;
      transform:rotate(90deg) scale(1.15);
      transform-origin:50% 50%;
    }
    .windmill-howto-inline{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin:0 2px;
    }
    .track-howto{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .track-howto-line{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      color:var(--stone);
      line-height:1.25;
      background:rgba(255,255,255,.6);
      border-radius:12px;
      padding:8px 10px;
    }
    .track-howto-line strong{
      color:var(--ink);
    }
    .track-howto-icon{
      width:30px;
      height:30px;
      object-fit:contain;
      display:block;
      flex:0 0 auto;
      filter:drop-shadow(0 3px 6px rgba(15,18,35,.18));
    }
    @keyframes trailRunGust{
      0%{ transform:translate3d(0, 0, 0); }
      100%{ transform:translate3d(0, 50%, 0); }
    }
    @keyframes trailRunFallFlat{
      0%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scaleY(1); }
      70%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scaleY(.2); }
      100%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scaleY(.08); }
    }
    @keyframes trailRunWarningFlash{
      0%, 100%{ opacity:.15; }
      50%{ opacity:.7; }
    }
    @keyframes trailRunGlowGood{
      0%{ transform:translateX(-50%) scale(1); }
      50%{ transform:translateX(-50%) scale(1.08); }
      100%{ transform:translateX(-50%) scale(1); }
    }
    @keyframes trailRunGlowBad{
      0%{ transform:translateX(-50%) scale(1); }
      50%{ transform:translateX(-50%) scale(1.1); }
      100%{ transform:translateX(-50%) scale(1); }
    }
    @keyframes trailRunStep{
      0%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) translateY(0); }
      50%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) translateY(2px); }
      100%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) translateY(0); }
    }
    @keyframes trailRunBounce{
      0%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scale(.9); }
      60%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scale(1.08); }
      100%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scale(1); }
    }
    @keyframes obstacleRunBounce{
      0%{ transform:translate(-50%, -50%) translateY(calc(var(--obstacle-offset-y) + 0px)) scale(var(--obstacle-scale-x), var(--obstacle-scale-y)); }
      50%{ transform:translate(-50%, -50%) translateY(calc(var(--obstacle-offset-y) + -5px)) scale(var(--obstacle-scale-x), var(--obstacle-scale-y)); }
      100%{ transform:translate(-50%, -50%) translateY(calc(var(--obstacle-offset-y) + 0px)) scale(var(--obstacle-scale-x), var(--obstacle-scale-y)); }
    }
    @keyframes obstacleHitRoll{
      0%{ transform:translate(-50%, -50%) rotate(0deg) scale(1.01); }
      22%{ transform:translate(-50%, -50%) rotate(104deg) scale(.99); }
      52%{ transform:translate(-50%, -50%) rotate(232deg) scale(.97); }
      78%{ transform:translate(-50%, -50%) rotate(330deg) scale(.98); }
      100%{ transform:translate(-50%, -50%) rotate(380deg) scale(1); }
    }
    @keyframes obstacleDizzy{
      0%{ transform:translate(-50%, -50%) rotate(0deg); }
      20%{ transform:translate(-52%, -50%) rotate(-8deg); }
      40%{ transform:translate(-48%, -50%) rotate(8deg); }
      60%{ transform:translate(-52%, -50%) rotate(-8deg); }
      80%{ transform:translate(-48%, -50%) rotate(8deg); }
      100%{ transform:translate(-50%, -50%) rotate(0deg); }
    }
    @keyframes obstacleStarsSpin{
      0%{ opacity:0; transform:translate(-50%, -50%) rotate(0deg) scale(.6); }
      20%{ opacity:1; transform:translate(-50%, -50%) rotate(40deg) scale(1.05); }
      65%{ opacity:1; transform:translate(-50%, -50%) rotate(160deg) scale(1); }
      100%{ opacity:0; transform:translate(-50%, -50%) rotate(220deg) scale(.86); }
    }
    @keyframes obstacleGoldPulse{
      0%{ opacity:.94; filter:brightness(1.05) saturate(1.08); }
      50%{ opacity:1; filter:brightness(1.28) saturate(1.2); }
      100%{ opacity:.94; filter:brightness(1.05) saturate(1.08); }
    }
    @keyframes obstaclePizzaFlash{
      0%{ opacity:.94; filter:brightness(1.05) saturate(1.08); }
      50%{ opacity:1; filter:brightness(1.22) saturate(1.18); }
      100%{ opacity:.94; filter:brightness(1.05) saturate(1.08); }
    }
    @keyframes trailRunShake{
      0%{ transform:translate3d(0,0,0) rotate(0deg); }
      20%{ transform:translate3d(-4px, 2px, 0) rotate(-0.9deg); }
      40%{ transform:translate3d(4px, -2px, 0) rotate(0.9deg); }
      60%{ transform:translate3d(-3px, 2px, 0) rotate(-0.7deg); }
      80%{ transform:translate3d(3px, -2px, 0) rotate(0.7deg); }
      100%{ transform:translate3d(0,0,0) rotate(0deg); }
    }
    @keyframes trailRunFatigueBreath{
      0%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scale(1.05); }
      50%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scale(1.22); }
      100%{ transform:translateX(-50%) scaleX(var(--trail-run-flip, 1)) scale(1.05); }
    }
    @keyframes trailRunFatiguePulse{
      0%{ transform:scaleY(1); box-shadow:none; }
      50%{ transform:scaleY(1.2); box-shadow:0 0 18px rgba(255,118,118,.7); }
      100%{ transform:scaleY(1); box-shadow:none; }
    }
    @keyframes trailRunFatigueFlash{
      0%{ opacity:1; filter:brightness(1); }
      50%{ opacity:.55; filter:brightness(1.25); }
      100%{ opacity:1; filter:brightness(1); }
    }
    .trail-run-stamina-fill.is-hot{
      animation:trailRunFatiguePulse .6s ease-in-out infinite, trailRunFatigueFlash 1s ease-in-out infinite;
      transform-origin:center;
    }
    .trail-run-warning.is-flashing{
      animation:trailRunWarningFlash .3s ease-in-out 3;
    }
    .hydration-cooler{
      position:absolute;
      width:76px;
      height:60px;
      border-radius:12px;
      background:transparent;
      border:0;
      cursor:pointer;
      z-index:4;
    }
    .hydration-cooler[data-lane="0"]{ z-index:6; }
    .hydration-cooler[data-lane="1"]{ z-index:5; }
    .hydration-cooler.is-active{
      box-shadow:none;
    }
    .hydration-player{
      position:absolute;
      width:64px;
      height:64px;
      object-fit:contain;
      pointer-events:none;
      z-index:3;
      --hydration-flip:1;
      transform:scaleX(var(--hydration-flip));
      outline:none;
      user-select:none;
      -webkit-user-select:none;
      -webkit-user-drag:none;
      -webkit-tap-highlight-color:transparent;
      transition:top .12s ease, left .12s ease;
      filter:drop-shadow(0 6px 10px rgba(15,18,35,.2));
    }
    .hydration-player.is-serving{
      --hydration-flip:-1;
    }
    .hydration-player.is-bounce{
      animation:hydrationBounce .25s ease;
    }
    .hydration-runner{
      position:absolute;
      width:54px;
      height:54px;
      object-fit:contain;
      pointer-events:none;
      z-index:2;
      --hydration-flip:1;
      transform:scaleX(var(--hydration-flip));
      transition:transform .12s ease;
      filter:drop-shadow(0 4px 8px rgba(15,18,35,.18));
    }
    .hydration-runner.is-returning{
      --hydration-flip:-1;
    }
    .hydration-runner.is-served{
      animation:hydrationServe .35s ease;
    }
    .hydration-runner.is-drunk{
      animation:hydrationWobble .85s ease-in-out infinite;
    }
    .hydration-drink{
      position:absolute;
      width:34px;
      height:34px;
      object-fit:contain;
      pointer-events:none;
      z-index:3;
      filter:drop-shadow(0 4px 6px rgba(15,18,35,.2));
    }
    .hydration-whisky-popup{
      position:absolute;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      z-index:8;
      transform:translate(-50%, -100%);
      animation:hydrationBonusPop .88s ease-out forwards;
      filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
    }
    .hydration-whisky-popup strong{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:46px;
      padding:4px 10px 3px;
      border-radius:999px;
      border:1px solid rgba(255,248,211,.9);
      background:linear-gradient(180deg, rgba(44,83,35,.92) 0%, rgba(20,56,18,.9) 100%);
      font-size:22px;
      line-height:1;
      font-weight:900;
      font-family:"Trebuchet MS","Verdana","Arial",sans-serif;
      font-variant-numeric:tabular-nums;
      color:#f9ff8a;
      letter-spacing:0;
      -webkit-text-stroke:0;
      text-shadow:0 1px 0 rgba(28,22,5,.8), 0 0 8px rgba(255,236,120,.3);
    }
    .hydration-whisky-popup em{
      font-size:38px;
      line-height:1;
      font-weight:900;
      font-style:normal;
      color:#ff5e2a;
      -webkit-text-stroke:2px #4a1600;
      text-shadow:0 2px 0 #4a1600, 0 0 12px rgba(255,130,84,.7);
    }
    .hydration-whisky-popup.is-leaving{
      opacity:0;
      transform:translate(-50%, -135%);
      transition:opacity .26s ease, transform .26s ease;
    }
    .hydration-drunk-marker{
      position:absolute;
      z-index:8;
      pointer-events:none;
      transform:translate(-50%, -100%);
      font-size:38px;
      line-height:1;
      font-weight:900;
      font-style:normal;
      color:#ff5e2a;
      -webkit-text-stroke:2px #4a1600;
      text-shadow:0 2px 0 #4a1600, 0 0 12px rgba(255,130,84,.7);
      animation:hydrationDrunkAlert 1.1s ease-in-out infinite;
    }
    .hydration-sweep-popup{
      position:absolute;
      top:10px;
      left:10px;
      z-index:9;
      pointer-events:none;
      max-width:min(44%, 260px);
      padding:10px 12px 9px;
      border-radius:12px;
      background:rgba(12,30,16,.9);
      border:2px solid rgba(255,228,109,.92);
      box-shadow:0 8px 20px rgba(0,0,0,.35), 0 0 16px rgba(255,216,96,.4);
      color:#fffdf0;
      animation:hydrationSweepIn .25s ease-out forwards;
    }
    .hydration-sweep-popup strong{
      display:block;
      font-size:23px;
      line-height:1;
      font-weight:900;
      letter-spacing:.3px;
      color:#ffe56b;
      text-shadow:0 2px 0 #4b1a00;
      margin-bottom:4px;
    }
    .hydration-sweep-popup span{
      display:block;
      font-size:12px;
      line-height:1.2;
      font-weight:800;
      letter-spacing:.2px;
      color:#f7ffda;
    }
    .hydration-sweep-popup.is-leaving{
      opacity:0;
      transform:translateY(-8px);
      transition:opacity .26s ease, transform .26s ease;
    }
    .hydration-trash{
      position:absolute;
      width:36px;
      height:36px;
      object-fit:contain;
      z-index:1;
      filter:drop-shadow(0 3px 5px rgba(15,18,35,.18));
    }
    .hydration-trash-btn{
      position:absolute;
      top:10px;
      right:40px;
      height:54px;
      border:0;
      background:transparent;
      cursor:pointer;
      z-index:2;
      padding:0;
      transition:left .2s linear, top .2s linear;
      pointer-events:none;
    }
    .hydration-trash-btn img{
      width:100%;
      height:100%;
      object-fit:contain;
      pointer-events:none;
      user-select:none;
      -webkit-user-drag:none;
      filter:drop-shadow(0 4px 8px rgba(15,18,35,.2));
    }
    .hydration-trash-btn.is-busy{
      pointer-events:none;
      opacity:1;
    }
    .hydration-trash-action-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:0;
      border-radius:12px;
      border:0;
      background:transparent;
      box-shadow:none;
      cursor:pointer;
      transition:transform .1s ease, filter .1s ease;
      -webkit-appearance:none;
      appearance:none;
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
    }
    .hydration-trash-action-btn img{
      display:block;
      pointer-events:none;
      user-select:none;
      -webkit-user-drag:none;
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .hydration-trash-action-btn{
      width:auto;
      max-width:100%;
      height:100%;
      max-height:100%;
      padding:2px 6px;
      border:0 !important;
      background:transparent !important;
      box-shadow:none !important;
    }
    #modal-hydration.minigame-modal.is-playing.is-landscape .hydration-trash-action-btn img{
      width:auto;
      height:100%;
      max-width:100%;
      max-height:100%;
      object-fit:contain;
    }
    .hydration-trash-action-btn:focus{
      outline:none;
    }
    .hydration-trash-action-btn:focus-visible{
      outline:none;
    }
    .hydration-trash-action-btn:active,
    .hydration-trash-action-btn.is-pressed{
      transform:scale(.965) translateY(1px);
      filter:brightness(1.08) saturate(1.08);
      background:transparent !important;
      box-shadow:none !important;
    }

    @keyframes hydrationBounce{
      0%{transform:scaleX(var(--hydration-flip,1)) translateY(0)}
      50%{transform:scaleX(var(--hydration-flip,1)) translateY(-6px)}
      100%{transform:scaleX(var(--hydration-flip,1)) translateY(0)}
    }
    @keyframes hydrationServe{
      0%{transform:scaleX(var(--hydration-flip,1)) scale(1)}
      50%{transform:scaleX(var(--hydration-flip,1)) scale(1.08)}
      100%{transform:scaleX(var(--hydration-flip,1)) scale(1)}
    }
    @keyframes hydrationWobble{
      0%{transform:scaleX(var(--hydration-flip,1)) rotate(0deg)}
      25%{transform:scaleX(var(--hydration-flip,1)) rotate(-7deg)}
      50%{transform:scaleX(var(--hydration-flip,1)) rotate(0deg)}
      75%{transform:scaleX(var(--hydration-flip,1)) rotate(7deg)}
      100%{transform:scaleX(var(--hydration-flip,1)) rotate(0deg)}
    }
    @keyframes hydrationDrunkAlert{
      0%,100%{ transform:translate(-50%, -100%) scale(1) rotate(-5deg); }
      50%{ transform:translate(-50%, -108%) scale(1.08) rotate(5deg); }
    }
    @keyframes hydrationBonusPop{
      0%{opacity:0; transform:translate(-50%, -86%) scale(.72);}
      15%{opacity:1; transform:translate(-50%, -100%) scale(1.02);}
      70%{opacity:1; transform:translate(-50%, -118%) scale(1);}
      100%{opacity:.05; transform:translate(-50%, -134%) scale(.96);}
    }
    @keyframes hydrationSweepIn{
      0%{opacity:0; transform:translateY(-6px) scale(.97);}
      100%{opacity:1; transform:translateY(0) scale(1);}
    }
    .profile-slot[data-slot="top"]{ top:14%; left:14%; }
    .profile-slot[data-slot="chest_device"]{ top:32%; left:14%; }
    .profile-slot[data-slot="wrist"]{ top:50%; left:14%; }
    .profile-slot[data-slot="back"]{ top:68%; left:14%; }
    .profile-slot[data-slot="bottom"]{ top:86%; left:14%; }
    .profile-slot[data-slot="head"]{ top:14%; left:86%; }
    .profile-slot[data-slot="face"]{ top:32%; left:86%; }
    .profile-slot[data-slot="audio"]{ top:50%; left:86%; }
    .profile-slot[data-slot="hands"]{ top:68%; left:86%; }
    .profile-slot[data-slot="grip"]{ top:86%; left:86%; }
    .profile-slot[data-slot="socks"]{ top:74%; left:50%; }
    .profile-slot[data-slot="shoes"]{ top:88%; left:50%; }
    #profileSlotList{
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .profile-gear-tooltip{
      position:absolute;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      min-width:180px;
      max-width:260px;
      background:rgba(255,255,255,.95);
      border-radius:14px;
      padding:10px 12px;
      box-shadow:0 10px 18px rgba(15,18,35,.15);
      border:1px solid rgba(255,211,107,.4);
      text-align:center;
      opacity:0;
      pointer-events:none;
      transition:opacity .15s ease;
      z-index:4;
    }
    .profile-gear-tooltip.is-visible{
      opacity:1;
      pointer-events:auto;
    }
    .profile-gear-tooltip strong{
      display:block;
      font-size:13px;
      font-weight:800;
      color:var(--ink);
    }
    .profile-gear-tooltip span{
      display:block;
      font-size:11px;
      color:var(--stone);
      margin-top:4px;
    }
    .profile-gear-tooltip .perk-line{
      margin-top:6px;
      color:#8a5a00;
      font-size:11px;
    }
    .profile-gear-tooltip .perk-line strong{
      color:#cc7a00;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.3px;
    }
    .profile-perks{
      margin-top:10px;
      border-radius:16px;
      padding:10px 12px;
      background:rgba(255,255,255,.75);
      box-shadow:0 8px 16px rgba(15,18,35,.12);
      font-size:12px;
      color:var(--stone);
      text-align:center;
    }
    #userProgressBar{
      display:block;
    }
    .avatar-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
      margin-top:10px;
    }
    .avatar-option{
      border:none;
      background:rgba(255,255,255,.85);
      border-radius:14px;
      padding:6px;
      box-shadow:0 8px 16px rgba(15,18,35,.12);
      cursor:pointer;
    }
    .avatar-option img{
      width:100%;
      height:80px;
      object-fit:contain;
      display:block;
    }
    .avatar-option.selected{
      outline:3px solid var(--accent);
      outline-offset:2px;
    }
    .yard-info-header{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:10px;
    }
    .yard-info-title-group{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .yard-info-shield{
      width:48px;
      height:48px;
      border-radius:14px;
      object-fit:cover;
      background:rgba(255,255,255,.75);
      border:2px solid rgba(111,92,255,.18);
      display:none;
    }
    .yard-info-name{
      font-size:20px;
      font-weight:800;
      color:var(--ink);
      font-family:"Bree Serif","Cooper Black","Trebuchet MS",serif;
    }
    .yard-info-meta{
      font-size:12px;
      color:var(--stone);
      font-weight:700;
    }
    .yard-progress{
      display:grid;
      gap:6px;
      margin-bottom:12px;
    }
    .yard-progress-bar{
      height:12px;
      border-radius:999px;
      background:rgba(111,92,255,.12);
      box-shadow:inset 0 0 0 1px rgba(111,92,255,.2);
      overflow:hidden;
    }
    .yard-progress-fill{
      display:block;
      height:100%;
      width:0%;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(111,92,255,.55), rgba(255,211,107,.7));
      box-shadow:0 4px 10px rgba(15,18,35,.18);
      transition:width .2s ease;
    }
    .yard-progress-text{
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size:12px;
      color:var(--stone);
      font-weight:700;
    }
    .yard-members-title{
      margin-top:10px;
      font-size:12px;
      color:var(--accent-deep);
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.4px;
    }
    .yard-members-list{
      margin-top:6px;
    }
    .steps-chart{
      margin-top:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .steps-chart-tabs{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:8px;
    }
    .steps-chart-tab{
      border:none;
      border-radius:14px;
      padding:8px 10px;
      font-weight:800;
      cursor:pointer;
      background:rgba(255,255,255,.82);
      color:#8b4a1f;
      box-shadow:0 10px 16px rgba(77,38,10,.12);
      letter-spacing:.4px;
      text-transform:uppercase;
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .steps-chart-tab.is-active{
      background:linear-gradient(135deg, #ffb347, #f07a3c);
      color:#fff;
      box-shadow:0 12px 20px rgba(240,122,60,.35);
      transform:translateY(-1px);
    }
    .steps-chart-card{
      border-radius:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,245,228,.88));
      box-shadow:inset 0 0 0 1px rgba(255,214,157,.6), 0 12px 22px rgba(77,38,10,.14);
      padding:10px 8px 8px;
    }
    .steps-chart-status{
      margin-top:10px;
      padding:10px 12px;
      border-radius:12px;
      text-align:center;
      font-weight:800;
      font-size:15px;
      color:#5a2d12;
      background:rgba(255,255,255,.8);
      box-shadow:0 8px 16px rgba(77,38,10,.16);
      letter-spacing:.2px;
      min-height:40px;
    }
    .steps-summary-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .steps-summary-grid .modal-card{
      padding:8px;
    }
    .steps-chart-bars{
      position:relative;
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:1fr;
      align-items:end;
      gap:6px;
      height:150px;
      padding:12px 6px 12px;
      border-radius:12px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,247,235,.85)),
        repeating-linear-gradient(0deg, rgba(90,45,18,.18) 0, rgba(90,45,18,.18) 1px, transparent 1px, transparent 24px);
      overflow:hidden;
    }
    .steps-chart-bar{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-end;
      gap:6px;
      min-width:0;
      cursor:pointer;
      height:100%;
    }
    .steps-chart-bar::before{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      width:1px;
      background:rgba(90,45,18,.18);
    }
    .steps-chart-fill{
      width:100%;
      height:calc(var(--bar-height, 0) * 1%);
      border-radius:4px 4px 6px 6px;
      background:linear-gradient(180deg, rgba(255,179,71,.98), rgba(240,122,60,.9));
      min-height:4px;
      box-shadow:0 4px 10px rgba(77,38,10,.18);
      border:1px solid rgba(90,45,18,.35);
      transition:height .2s ease;
    }
    .steps-chart-fill.is-peak{
      background:linear-gradient(180deg, rgba(111,92,255,.95), rgba(74,124,58,.92));
    }
    .steps-chart-bar.is-active .steps-chart-fill{
      outline:2px solid rgba(255,211,107,.95);
      outline-offset:2px;
    }
    .steps-chart-label{
      font-size:12px;
      color:#8b4a1f;
      font-weight:800;
      text-align:center;
      padding:24px 8px;
    }
    .steps-chart-cap{
      position:absolute;
      left:50%;
      bottom:calc(var(--bar-height, 0) * 1%);
      width:16px;
      height:2px;
      transform:translate(-50%, -2px);
      background:rgba(90,45,18,.65);
      border-radius:2px;
    }
    .steps-chart-cap::after{
      content:"";
      position:absolute;
      left:50%;
      top:-10px;
      width:2px;
      height:10px;
      transform:translateX(-50%);
      background:rgba(90,45,18,.4);
    }
    .modal-card strong{display:block;color:var(--ink);margin-bottom:4px}
    .modal-tag{
      display:inline-block;
      padding:2px 6px;
      border-radius:10px;
      background:rgba(111,92,255,.12);
      color:var(--accent-deep);
      font-size:11px;
      margin-top:6px;
    }
    .logo-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:8px;
      margin-top:10px;
    }
    .logo-option{
      border:none;
      background:rgba(255,255,255,.7);
      border-radius:12px;
      padding:6px;
      cursor:pointer;
      box-shadow:0 6px 12px rgba(15,18,35,.12);
    }
    .logo-option img{
      width:100%;
      height:auto;
      display:block;
      border-radius:10px;
    }
    @keyframes pop {
      from{transform:scale(.96);opacity:.6}
      to{transform:scale(1);opacity:1}
    }
    @keyframes fadeSlide {
      from{transform:translateY(-8px);opacity:0}
      to{transform:translateY(0);opacity:1}
    }
    @keyframes popIn {
      from{transform:scale(.96);opacity:0}
      to{transform:scale(1);opacity:1}
    }
    @media (max-width:640px){
      html, body{
        height:100%;
        overflow:hidden;
      }
      .guest-screen{
        padding:0;
      }
      .guest-frame{
        width:100vw;
        height:100vh;
        aspect-ratio:auto;
        border-radius:0;
        padding:24px 16px 32px;
        background-size:cover;
        background-position:center;
      }
      .yard-wrap{
        padding:0;
      }
      .yard-hero{
        width:100vw;
        height:100vh;
        aspect-ratio:auto;
      }
      .yard-header{
        top:calc(6px + env(safe-area-inset-top, 0px));
      }
      .yard-title{
        font-size:20px;
        padding:6px 12px;
      }
      .yard-stats{
        bottom:calc(48px + env(safe-area-inset-bottom, 0px));
      }
      .modal-grid{grid-template-columns:1fr}
      .yard-stats{
        flex-direction:row;
        align-items:center;
      }
      .stats-inline{
        flex-wrap:wrap;
        gap:6px;
      }
    }

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Baloo+2:wght@400;600;700&family=Bree+Serif&display=swap');

:root {
  --ink:#1a1226;
  --paper:#fff8ec;
  --sun:#ffd56a;
  --leaf:#47b26b;
  --leaf-dark:#237046;
  --stone:#8a7fa8;
  --accent:#ff5aa5;
  --accent-deep:#d8358a;
  --glow:rgba(255,90,165,.35);
  --card:#fffdf8;
  --card-edge:rgba(255,90,165,.2);
  --shadow:0 18px 40px rgba(22,10,45,.2);
}

body {
  font-family:"Fredoka","Baloo 2","Bree Serif","Trebuchet MS",sans-serif;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,90,165,.18), transparent 45%),
    radial-gradient(circle at 90% 8%, rgba(255,213,106,.22), transparent 40%),
    radial-gradient(circle at 30% 90%, rgba(71,178,107,.18), transparent 45%),
    linear-gradient(180deg, #fff5e8 0%, #ffeef6 45%, #e9f8ff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.yard-app{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:manipulation;
}

.yard-wrap {
  width:min(92vw, 430px);
  height:min(94vh, 820px);
  aspect-ratio:9 / 16;
  padding:16px;
  transform:var(--yard-wrap-rotate, none);
}

.yard-hero {
  width:100%;
  height:100%;
  border-radius:28px;
  box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.7);
  overflow:hidden;
  background-size:cover;
  background-position:center;
}

.yard-header {
  left:18px;
  top:calc(18px + env(safe-area-inset-top, 0px));
}

.yard-title {
  border-radius:18px;
  border:2px solid rgba(255,90,165,.25);
  box-shadow:0 10px 22px rgba(22,10,45,.16);
}

.station {
  border-radius:18px;
  background:rgba(255,255,255,.85);
  border:2px solid rgba(255,90,165,.22);
  box-shadow:0 10px 20px rgba(22,10,45,.18);
}

.yard-stats {
  left:18px;
  right:18px;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius:18px;
  border:2px solid rgba(255,255,255,.65);
}

.yb-modal-card {
  width:min(100%, 420px);
  max-width:calc(var(--yard-frame-width, 100vw) - 32px);
  max-height:calc(var(--yard-frame-height, 100vh) - 32px);
  border-radius:26px;
  border:2px solid rgba(255,90,165,.2);
  display:flex;
  flex-direction:column;
}

#modal-welcome .yb-modal-card.yb-welcome-card{
  width:min(100%, 400px);
  align-items:center;
  text-align:center;
  gap:8px;
  padding:16px 14px 14px;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,211,107,.26), transparent 48%),
    radial-gradient(circle at 85% 0%, rgba(111,92,255,.20), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,237,.95));
}

.yb-welcome-hero{
  position:relative;
  width:100%;
  height:140px;
  border-radius:18px;
  background:
    linear-gradient(160deg, rgba(8,12,22,.48), rgba(14,18,32,.24)),
    linear-gradient(140deg, rgba(255,255,255,.92), rgba(238,247,255,.9), rgba(255,243,209,.9));
  background-size:cover;
  background-position:center;
  border:1px solid rgba(15,18,35,.08);
  box-shadow:0 10px 20px rgba(15,18,35,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.yb-welcome-avatar{
  width:128px;
  height:128px;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(15,18,35,.35));
  animation:welcomeBounce 1.8s ease-in-out infinite;
}

.yb-welcome-copy{
  margin:0;
  font-size:clamp(.92rem, 2.8vw, 1.02rem);
  line-height:1.32;
  color:#2a3241;
  min-height:40px;
}

#modal-welcome #welcome-title{
  margin-top:2px;
  margin-bottom:2px;
  padding-right:0;
  font-size:30px;
}

#modal-welcome .yb-welcome-actions{
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  margin-top:2px;
}

#modal-welcome .yb-welcome-btn{
  flex:1 1 0;
  min-width:0;
  min-height:48px;
  border-radius:16px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 10px 18px rgba(20,18,42,.22),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .08s ease, filter .08s ease, box-shadow .08s ease;
}

#modal-welcome .yb-welcome-btn:active{
  transform:translateY(1px) scale(.98);
  filter:brightness(1.03);
}

#modal-welcome .yb-welcome-btn-sync{
  color:#fff9e9;
  background:linear-gradient(180deg, #2f62ff 0%, #2748c8 100%);
}

#modal-welcome .yb-welcome-btn-enter{
  color:#2f2200;
  background:linear-gradient(180deg, #ffd76a 0%, #ffb739 100%);
}

#modal-welcome .yb-welcome-sync-status{
  width:100%;
  min-height:42px;
  margin-top:4px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,18,35,.12);
  background:rgba(255,255,255,.72);
  color:#2a3241;
  font-size:12px;
  line-height:1.25;
  text-align:center;
  white-space:normal;
}

@keyframes welcomeBounce{
  0%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-3px) rotate(-1.4deg); }
  100%{ transform:translateY(0) rotate(0deg); }
}

.yb-modal-card > .track-score-list,
.yb-modal-card > .yard-feed-list,
.yb-modal-card > .yard-members-list {
  max-height:200px;
  overflow:auto;
}

.track-action {
  flex-wrap:wrap;
}

@media (max-width: 560px), (max-height: 900px) {
  .yard-wrap {
    width:100vw;
    height:100vh;
    aspect-ratio:auto;
    padding:0;
    transform:var(--yard-wrap-rotate, none);
  }
  .yard-hero {
    border-radius:0;
  }
}


.guest-screen {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.guest-card {
  width:min(92vw, 420px);
  border-radius:26px;
  border:2px solid rgba(255,90,165,.2);
  box-shadow:var(--shadow);
}

/* Hotspot overlays off, keep click areas */
.station {
  background:transparent;
  border:none;
  box-shadow:none;
  color:transparent;
}
.station:hover,
.station:focus-visible {
  background:transparent;
  border:none;
  box-shadow:none;
  outline:none;
}
.station span {
  opacity:0;
}


/* Landscape template test */
#modal-landscape-template .landscape-template-ui{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
}
#modal-landscape-template .landscape-template-window{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  border-radius:16px;
  overflow:hidden;
  background:#0f1118;
  box-shadow:0 8px 16px rgba(15,18,35,.12);
  max-height:min(36vh, 320px);
  margin-bottom:12px;
}
#modal-landscape-template .yb-modal-card{
  overflow:visible;
}
#modal-landscape-template .landscape-template-ui + .minigame-actions{
  margin-top:12px;
}
#modal-landscape-template.is-playing .landscape-template-window{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  background:#111426;
}
#modal-landscape-template.is-playing .yb-modal-card{
  padding:0;
  max-width:none;
  max-height:none;
  width:100%;
  height:100%;
  border:none;
}
#modal-landscape-template.is-playing .yb-modal-card{
  opacity:0;
  pointer-events:none;
}
#modal-landscape-template.is-playing .minigame-cabinet{
  display:none;
}
#modal-landscape-template.is-playing h2,
#modal-landscape-template.is-playing p,
#modal-landscape-template.is-playing .minigame-perks,
#modal-landscape-template.is-playing .minigame-actions,
#modal-landscape-template.is-playing .track-status,
#modal-landscape-template.is-playing .yb-modal-close{
  display:none !important;
}
#modal-landscape-template .landscape-shell{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:none;
  transform-origin:center;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(12,18,34,.35);
}
#modal-landscape-template.is-playing .landscape-shell{
  display:none;
}
body.landscape-template-mobile #modal-landscape-template .landscape-shell{
  transform:rotate(90deg);
}
body.landscape-template-desktop #modal-landscape-template .landscape-shell{
  transform:none;
}
#modal-landscape-template .landscape-template-window{
  border:none;
}

.landscape-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:120;
}
body.landscape-template-playing .landscape-overlay{
  display:flex;
}
body.landscape-template-mobile .landscape-overlay-shell{
  width:calc(100vw * 16 / 9);
  height:100vw;
  transform:rotate(-90deg);
  transform-origin:center;
}
body.landscape-template-desktop .landscape-overlay-shell{
  transform:rotate(-90deg);
  transform-origin:center;
}
.landscape-overlay .landscape-grid{
  background:#1b2a5a;
  border:3px dashed rgba(255,255,255,.55);
  z-index:2;
}
.landscape-overlay .minigame-exit{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  transform:none;
  opacity:.9;
  border:2px dashed rgba(255,255,255,.5);
  background:rgba(12,16,26,.65);
}
#modal-landscape-template .landscape-controls,
#landscapeTemplateOverlay .landscape-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  border:2px dashed rgba(255,255,255,.35);
  min-height:56px;
  background:rgba(12,16,26,.55);
}
#modal-landscape-template .landscape-status,
#landscapeTemplateOverlay .landscape-status{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(8,12,22,.92), rgba(10,16,28,.85));
  border:2px dashed rgba(255,255,255,.35);
  color:#fff;
  text-transform:uppercase;
  font-size:11px;
}
#modal-landscape-template .landscape-status::before,
#landscapeTemplateOverlay .landscape-status::before{
  content:"Status";
  font-size:10px;
  letter-spacing:.6px;
  opacity:.7;
}
#modal-landscape-template .landscape-template-stage,
#landscapeTemplateOverlay .landscape-template-stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(135deg, #ffd56a, #ff9f6b);
  color:#1a0e00;
  font-weight:800;
  position:relative;
  outline:2px dashed rgba(255,255,255,.35);
}
#modal-landscape-template .landscape-template-stage::after{
  content:"Game Window";
  position:absolute;
  top:12px;
  left:12px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:rgba(255,255,255,.7);
}
#landscapeTemplateOverlay .landscape-template-stage::after{
  content:"Game Window";
  position:absolute;
  top:12px;
  left:12px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:rgba(26,14,0,.7);
}
#modal-landscape-template .landscape-template-stat,
#landscapeTemplateOverlay .landscape-template-stat{
  text-align:center;
}
#modal-landscape-template .landscape-template-stat span,
#landscapeTemplateOverlay .landscape-template-stat span{
  display:block;
  font-size:16px;
  margin-top:4px;
}
#modal-landscape-template .minigame-actions{
  display:flex;
  opacity:1;
  pointer-events:auto;
  position:relative;
  z-index:2;
}

#modal-landscape-template .breakout-template-preview{
  background:radial-gradient(circle at 22% 22%, #6ec3ff 0%, #1a3f86 36%, #0f1938 100%);
  color:#e8f3ff;
}

#modal-landscape-template.landscape-template-breakout .landscape-template-ui,
#modal-landscape-template.landscape-template-breakout .landscape-shell,
#modal-landscape-template.landscape-template-breakout .landscape-grid{
  display:none !important;
}

#modal-landscape-template.landscape-template-breakout.is-playing .yb-modal-card{
  opacity:1 !important;
  pointer-events:auto !important;
  visibility:visible !important;
  width:min(88vw, 420px) !important;
  height:min(82vh, 680px) !important;
  max-height:min(82vh, 680px) !important;
  max-width:min(88vw, 420px) !important;
  margin:0 auto !important;
  border:none;
  border-radius:20px !important;
  padding:12px !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 12px 24px rgba(15,18,35,.16) !important;
  display:flex;
  flex-direction:column;
}

#modal-landscape-template.landscape-template-breakout.is-playing #landscape-template-title,
#modal-landscape-template.landscape-template-breakout.is-playing #landscape-template-title + p{
  display:none !important;
}

#modal-landscape-template.landscape-template-breakout .landscape-breakout-ui{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  gap:6px;
}

#modal-landscape-template.landscape-template-breakout:not(.is-playing) .trail-run-statusbar,
#modal-landscape-template.landscape-template-breakout:not(.is-playing) #landscapeBreakoutHudStatus{
  display:none !important;
}

#modal-landscape-template.landscape-template-breakout.is-playing .minigame-playable{
  aspect-ratio:9/16 !important;
  min-height:0 !important;
  height:100% !important;
  max-height:100% !important;
  width:100% !important;
  margin:0 !important;
}

#modal-landscape-template.landscape-template-breakout.is-playing .trail-run-statusbar{
  gap:4px;
  padding:4px 6px;
}

#modal-landscape-template.landscape-template-breakout.is-playing .trail-run-statusbar .trail-run-stat{
  min-width:0;
  font-size:10px;
  padding:6px 4px;
}

#modal-landscape-template.landscape-template-breakout.is-playing .trail-run-statusbar .trail-run-stat span{
  font-size:14px;
}

#modal-landscape-template.landscape-template-breakout .landscape-breakout-admin-controls{
  position:absolute;
  top:10px;
  right:10px;
  z-index:9;
  display:flex;
  gap:6px;
  pointer-events:auto;
}

#modal-landscape-template.landscape-template-breakout .landscape-breakout-admin-controls .track-secondary{
  padding:5px 7px;
  font-size:10px;
  min-height:26px;
  line-height:1;
}

#modal-landscape-template.landscape-template-breakout .landscape-breakout-stage{
  flex:1;
  min-height:0;
  max-height:none;
  position:relative;
  overflow:hidden;
  background:url('/assets/app/v2/stretch_zone.webp') center/cover no-repeat;
}

#modal-landscape-template.landscape-template-breakout .landscape-breakout-canvas{
  position:absolute;
  inset:0;
  z-index:2;
  touch-action:none;
}

#modal-landscape-template.landscape-template-breakout .landscape-breakout-stage::before,
#modal-landscape-template.landscape-template-breakout .landscape-breakout-stage::after,
#modal-landscape-template.landscape-template-breakout .stretch-lane::before,
#modal-landscape-template.landscape-template-breakout .stretch-lane::after{
  display:none !important;
}

#modal-landscape-template.landscape-template-breakout .countdown-overlay{
  z-index:4;
}

#modal-landscape-template.landscape-template-breakout .landscape-breakout-toast{
  z-index:5;
}

#modal-landscape-template.landscape-template-breakout .minigame-start-in-game{
  z-index:6;
}

#modal-landscape-template.landscape-template-breakout .minigame-exit{
  z-index:7;
}

#modal-landscape-template.landscape-template-breakout + .landscape-overlay{
  display:none !important;
}

#landscapeTemplateOverlay .landscape-grid{
  background:linear-gradient(180deg, rgba(8,14,30,.98), rgba(8,12,20,.98));
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
}

#landscapeTemplateOverlay .landscape-template-stage{
  background:linear-gradient(180deg, #1a2f58 0%, #10192c 56%, #172034 100%);
  outline:1px solid rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.16);
}

#landscapeTemplateOverlay .landscape-template-stage::after{
  content:"Recovery Rally";
  color:rgba(236,244,255,.78);
}

.landscape-breakout-canvas{
  width:100%;
  height:100%;
  display:block;
  border-radius:10px;
}

.landscape-breakout-controls{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
}

.landscape-breakout-btn{
  width:100%;
  min-height:42px;
  font-size:12px;
  font-weight:800;
}

.landscape-breakout-toast{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  padding:8px 12px;
  border-radius:10px;
  background:rgba(5,10,20,.78);
  border:1px solid rgba(255,255,255,.22);
  color:#f5fbff;
  font-weight:800;
  letter-spacing:.3px;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
  text-transform:uppercase;
}

.landscape-breakout-toast.is-visible{
  opacity:1;
}