:root{
    --felt-dark:#0a2419;
    --felt:#123c2a;
    --felt-light:#1a4d36;
    --gold:#e8b23d;
    --gold-dark:#a8791f;
    --cream:#f4ecd8;
    --ink:#17130c;
    --red:#c8393c;
    --green-win:#7fd858;
    /* Sizes are fixed (no scaling). --ui is kept at 1 only so the win-particle
       code can read it; breakpoints below are used solely to show/hide things. */
    --ui:1;
    --ticketW:320px;
  }
  *{box-sizing:border-box;}
  /* animated "table" backgrounds sit behind the whole game */
  #tableCanvas{ position:fixed; inset:0; z-index:-1; pointer-events:none; display:none; }
  body::before{
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0;
  }
  body.table-holo::before{
    opacity:.5; mix-blend-mode:screen;
    background:linear-gradient(120deg,#ff6ec4,#7873f5,#4ade80,#facc15,#38bdf8,#ff6ec4);
    background-size:300% 300%;
    animation:tableHolo 10s ease-in-out infinite;
  }
  @keyframes tableHolo{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
  body.table-trance::before{
    opacity:.55;
    background:
      radial-gradient(circle at 18% 25%, rgba(255,90,210,.55) 0 9px, transparent 11px),
      radial-gradient(circle at 62% 55%, rgba(90,200,255,.5) 0 12px, transparent 14px),
      radial-gradient(circle at 40% 80%, rgba(150,255,120,.45) 0 8px, transparent 10px),
      radial-gradient(circle at 85% 15%, rgba(255,220,90,.5) 0 10px, transparent 12px);
    background-size:150px 150px, 210px 210px, 120px 120px, 180px 180px;
    animation:tableTrance 2.6s linear infinite;
  }
  @keyframes tableTrance{
    from{ background-position:0 0, 0 0, 0 0, 0 0; }
    to{ background-position:0 150px, 0 -210px, 0 120px, 0 -180px; }
  }
  html,body{
    margin:0; padding:0;
    height:100vh; height:100dvh;
    width:100%;
    background:
      radial-gradient(ellipse at 50% 20%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
    font-family:'VT323', monospace;
    color:var(--cream);
    overflow:hidden;
    overscroll-behavior:none;
    touch-action:none;
    cursor:none;
    -webkit-user-select:none; user-select:none;
    position:fixed;
    inset:0;
  }
  #stage{
    position:relative;
    width:100%; height:100%;
    display:flex; flex-direction:column; align-items:stretch;
    overflow:hidden;                 /* fixed frame; the rail scrolls internally */
    padding:
      max(24px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
    gap:calc(14px);
  }
  /* ---- static full-width header (bordered panel) ---- */
  #headerPanel{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:calc(12px);
    width:100%;
    background:rgba(0,0,0,.28);
    border:3px solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.2), 0 8px 20px rgba(0,0,0,.4);
    border-radius:calc(6px);
    padding:calc(9px) calc(14px);
  }
  #hdrLeft{
    display:flex; align-items:center; gap:calc(14px);
    min-width:0;
  }
  /* ---- body: play column + full-height upgrades rail ---- */
  #appBody{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:row; align-items:stretch;
    gap:calc(16px);
    width:100%;
  }
  /* game/ticket container (bordered panel) */
  #gamePanel{
    position:relative;
    overflow:hidden;
    flex:1 1 auto; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:rgba(0,0,0,.28);
    border:3px solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.2), 0 8px 20px rgba(0,0,0,.4);
    border-radius:calc(6px);
    padding:16px;
  }
  #crowdCanvas{
    position:absolute; left:0; bottom:0; width:100%; height:150px;
    pointer-events:none; z-index:40; display:none;
  }
  /* the fit measures THIS (the flow content); the mascot lives outside it so it
     never affects how the game panel's elements are sized */
  #gameContent{
    display:flex; flex-direction:column; align-items:center;
    gap:calc(10px);
  }
  /* upgrades rail: full body height, scrolls inside */
  #upgradesPanel{
    flex:0 0 auto;
    height:100%;
    display:flex; flex-direction:column;
    gap:calc(8px);
    width:288px;
    background:rgba(0,0,0,.28);
    border:3px solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.2), 0 8px 20px rgba(0,0,0,.4);
    border-radius:calc(6px);
    padding:calc(10px);
  }
  #shop{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
  #shop::-webkit-scrollbar{ width:calc(6px); }
  #shop::-webkit-scrollbar-thumb{ background:var(--gold-dark); border-radius:3px; }
  /* reserved slots so showing/hiding never reflows the layout */
  #eventSlot{
    height:calc(52px);
    width:var(--ticketW);
    display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
  }
  @keyframes upReveal{
    0%{ transform:scale(.7); opacity:0; box-shadow:0 0 0 4px rgba(232,178,61,.6); }
    100%{ transform:scale(1); opacity:1; }
  }
  .upBtn.reveal{ animation:upReveal .45s ease; }

  /* ---- prestige panel (Retire to the Savanna) ---- */
  #prestigePanel{
    flex:0 0 auto;
    margin-top:calc(4px);
    padding-top:calc(8px);
    border-top:2px dashed rgba(232,178,61,.35);
    display:flex; flex-direction:column; gap:calc(6px);
  }
  #legacyLine{
    font-family:'VT323', monospace;
    font-size:calc(14px);
    color:#ffe066; text-align:center; line-height:1;
  }
  #retireBtn{
    font-family:'Press Start 2P', monospace;
    font-size:calc(8px);
    color:var(--ink);
    background:linear-gradient(180deg,#ffe066,#f4a300);
    border:3px solid #b36b00;
    box-shadow:0 4px 0 #7a4a00;
    padding:calc(9px) calc(6px);
    cursor:none; line-height:1.3; letter-spacing:.5px;
    transition:transform .06s, filter .15s;
  }
  #retireBtn:active{ transform:translateY(2px); box-shadow:0 2px 0 #7a4a00; }
  #retireBtn:disabled{
    color:#6a6a62; background:rgba(0,0,0,.3);
    border-color:#3d3d38; box-shadow:0 4px 0 #2a2a26; cursor:none;
  }
  #retireBtn.armed{ background:linear-gradient(180deg,#ff8a3d,#e8432f); color:#fff; border-color:#a3201a; }
  #eraseSaveBtn{
    font-family:'Press Start 2P', monospace;
    font-size:calc(6.5px);
    color:#c48a8a;
    background:rgba(0,0,0,.3);
    border:calc(2px) solid #5a3030;
    padding:calc(6px) calc(6px);
    cursor:none; letter-spacing:.5px; line-height:1.3;
    transition:filter .12s;
  }
  #eraseSaveBtn:hover{ filter:brightness(1.2); }
  #eraseSaveBtn.armed{ background:linear-gradient(180deg,#ff8a3d,#e8432f); color:#fff; border-color:#a3201a; }

  /* ---- Sticker Album ---- */
  #albumBtn{ font-size:calc(9px); }
  #wardrobeBtn{ font-size:calc(9px); }
  #holidayBtn{ font-size:calc(9px); }
  #goalsBtn{ font-size:calc(9px); }
  #albumBtn:active, #muteBtn:active, #wardrobeBtn:active, #holidayBtn:active, #goalsBtn:active{ transform:translateY(1px); }
  #wardrobeBtn:hover, #holidayBtn:hover, #goalsBtn:hover{ filter:brightness(1.15); border-color:var(--gold); }
  @media (max-width: 720px){ #goalsBtn .btn-word{ display:none; } }
  /* goals modal */
  #goalsOverlay{ position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:calc(16px); }
  #goalsOverlay.hidden{ display:none; }
  #goalsPanel{
    width:70vw; min-width:70vw;
    height:70vh; max-height:70vh; overflow:hidden; display:flex; flex-direction:column;
    background:radial-gradient(ellipse at 50% 20%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
    border:calc(4px) solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.25), 0 12px 40px rgba(0,0,0,.6);
    border-radius:calc(8px); padding:calc(14px); color:var(--cream);
  }
  .goals-section-title{ font-family:'Press Start 2P', monospace; font-size:calc(11px); color:#ffe9a8; margin:calc(24px) 0 calc(8px); letter-spacing:1px; }
  .stats-box{ background:rgba(0,0,0,.25); border:calc(2px) solid var(--gold-dark); border-radius:calc(6px); padding:calc(6px) calc(10px); margin-bottom:calc(16px); }
  .stat-row{ display:flex; justify-content:space-between; gap:calc(10px); padding:calc(5px) 0; font-family:'VT323', monospace; font-size:calc(18px); border-bottom:1px solid rgba(232,178,61,.12); }
  .stat-row:last-child{ border-bottom:none; }
  .stat-l{ color:#cdbf9a; } .stat-v{ color:var(--gold); }
  .ach-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(150px), 1fr)); gap:calc(8px); }
  .ach-card{ display:flex; align-items:center; gap:calc(8px); background:rgba(0,0,0,.28); border:calc(3px) solid var(--gold-dark); border-radius:calc(6px); padding:calc(8px); position:relative; }
  .ach-card.got{ border-color:var(--gold); background:rgba(232,178,61,.12); }
  .ach-card.locked{ opacity:.72; }
  .ach-badge{ flex:0 0 auto; width:calc(28px); height:calc(28px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P', monospace; font-size:calc(12px); background:#3a3320; color:#8a7a4a; border:calc(2px) solid #6a5a30; }
  .ach-card.got .ach-badge{ background:var(--gold); color:var(--ink); border-color:var(--gold-dark); }
  .ach-main{ min-width:0; }
  .ach-name{ font-family:'Press Start 2P', monospace; font-size:calc(8.5px); color:var(--gold); line-height:1.3; }
  .ach-card.locked .ach-name{ color:#9a8f70; }
  .ach-desc{ font-family:'VT323', monospace; font-size:calc(16px); color:#cdbf9a; line-height:1.1; margin-top:calc(2px); }
  .ach-check{ position:absolute; top:calc(3px); right:calc(5px); font-family:'Press Start 2P', monospace; font-size:calc(9px); color:var(--green-win); }
  /* holidays gallery modal */
  #holidayOverlay{ position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:calc(16px); }
  #holidayOverlay.hidden{ display:none; }
  #holidayPanel{
    width:70vw; min-width:70vw;
    height:70vh; max-height:70vh; overflow:hidden; display:flex; flex-direction:column;
    background:radial-gradient(ellipse at 50% 20%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
    border:calc(4px) solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.25), 0 12px 40px rgba(0,0,0,.6);
    border-radius:calc(8px); padding:calc(14px); color:var(--cream);
  }
  #holidayBody{ display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(110px), 1fr)); gap:calc(10px); align-content:start; }
  .hol-card{
    display:flex; flex-direction:column; align-items:center; gap:calc(4px);
    background:rgba(0,0,0,.3); border:calc(3px) solid var(--gold-dark);
    border-radius:calc(6px); padding:calc(9px) calc(5px); text-align:center;
  }
  .hol-card.visited{ border-color:var(--green-win); background:rgba(127,216,88,.12); }
  .hol-card.next.ready{ border-color:var(--gold); box-shadow:0 0 calc(12px) rgba(232,178,61,.5); }
  .hol-ico{ width:calc(46px); height:calc(46px); image-rendering:pixelated; }
  .hol-card.locked .hol-ico{ filter:grayscale(1) brightness(.45); }
  .hol-name{ font-family:'Press Start 2P', monospace; font-size:calc(8.5px); color:var(--gold); line-height:1.3; min-height:calc(20px); }
  .hol-card.locked .hol-name{ color:#8fa0ac; }
  .hol-meta{ font-family:'VT323', monospace; font-size:calc(15px); color:#cfe0ea; line-height:1.1; }
  .hol-tag{ font-family:'Press Start 2P', monospace; font-size:calc(6px); letter-spacing:.5px; margin-top:calc(2px); color:#8fa0ac; }
  .hol-card.visited .hol-tag{ color:var(--green-win); }
  .hol-card.ready .hol-tag{ color:var(--gold); }
  #albumOverlay{
    position:fixed; inset:0; z-index:10001;
    background:rgba(0,0,0,.72);
    display:flex; align-items:center; justify-content:center;
    padding:calc(16px);
  }
  #albumOverlay.hidden{ display:none; }
  #albumPanel{
    width:70vw; min-width:70vw;
    height:70vh; max-height:70vh; overflow:hidden;
    display:flex; flex-direction:column;
    background:radial-gradient(ellipse at 50% 20%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
    border:calc(4px) solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.25), 0 12px 40px rgba(0,0,0,.6);
    border-radius:calc(8px);
    padding:calc(14px);
    color:var(--cream);
  }
  /* shared modal chrome: static header (title + desc + close) over a scroll body */
  .modal-header{
    flex:0 0 auto;
    border-bottom:calc(2px) solid rgba(232,178,61,.4);
    padding-bottom:calc(10px);
    margin-bottom:calc(10px);
  }
  .modal-header-top{
    display:flex; align-items:center; justify-content:space-between;
    gap:calc(10px);
  }
  .modal-desc{
    font-family:'VT323', monospace; font-size:calc(18px);
    color:#cdd8e8; text-align:left; margin-top:calc(6px); line-height:1.15;
  }
  .modal-body{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    padding-right:calc(4px);
  }
  .modal-body::-webkit-scrollbar{ width:calc(7px); }
  .modal-body::-webkit-scrollbar-thumb{ background:var(--gold-dark); border-radius:4px; }
  .modal-close{
    font-family:'Press Start 2P', monospace; font-size:calc(14px);
    color:var(--cream); background:rgba(0,0,0,.4); border:3px solid var(--gold-dark);
    width:calc(34px); height:calc(34px); cursor:none; line-height:1;
    flex:0 0 auto;
  }
  .modal-close:hover{ filter:brightness(1.2); border-color:var(--gold); }
  .album-title{ font-family:'Press Start 2P', monospace; font-size:calc(13px); color:var(--gold); text-shadow:2px 2px 0 var(--ink); }
  #albumBonus{
    font-family:'VT323', monospace; font-size:calc(21px);
    color:#9fe0b0; text-align:center; margin-bottom:calc(10px);
  }
  .album-set-title{
    font-family:'Press Start 2P', monospace; font-size:calc(11px);
    color:#ffe9a8; margin:calc(24px) 0 calc(8px); letter-spacing:1px;
  }
  .sticker-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:calc(8px); }
  #albumSymbols{ grid-template-columns:repeat(auto-fill, minmax(calc(56px), 1fr)); gap:calc(6px); }
  #albumTiers{ grid-template-columns:repeat(auto-fill, minmax(calc(64px), 1fr)); gap:calc(6px); }
  .sticker{
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.3); border:calc(3px) solid var(--gold-dark);
    border-radius:calc(6px); position:relative; overflow:hidden;
  }
  .sticker.owned{ border-color:var(--gold); background:rgba(232,178,61,.16); box-shadow:inset 0 0 calc(10px) rgba(232,178,61,.25); }
  .sticker canvas{ width:78%; height:78%; image-rendering:pixelated; }
  .sticker.locked canvas{ opacity:.5; filter:grayscale(1) brightness(.5); }
  .sticker .tier-badge{
    width:82%; height:60%; border-radius:calc(4px);
    display:flex; align-items:center; justify-content:center;
    font-family:'Press Start 2P', monospace; font-size:calc(7px); color:#fff;
    text-shadow:1px 1px 0 rgba(0,0,0,.6);
  }
  .sticker.locked .tier-badge{ filter:grayscale(1) brightness(.45); }
  .album-foot{ font-family:'VT323', monospace; font-size:calc(16px); color:#bcd9c7; text-align:center; margin-top:calc(12px); }

  /* ---- Wardrobe ---- */
  #wardrobeOverlay{
    position:fixed; inset:0; z-index:10001;
    background:rgba(0,0,0,.72);
    display:flex; align-items:center; justify-content:center;
    padding:calc(16px);
  }
  #wardrobeOverlay.hidden{ display:none; }
  #wardrobePanel{
    width:70vw; min-width:70vw;
    height:70vh; max-height:70vh; overflow:hidden;
    display:flex; flex-direction:column;
    background:radial-gradient(ellipse at 50% 20%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
    border:calc(4px) solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.25), 0 12px 40px rgba(0,0,0,.6);
    border-radius:calc(8px);
    padding:calc(14px);
    color:var(--cream);
  }
  .wr-section{ margin-bottom:calc(12px); }
  .wr-section-title{
    font-family:'Press Start 2P', monospace; font-size:calc(11px);
    color:#ffe9a8; margin:calc(24px) 0 calc(8px); letter-spacing:1px;
  }
  .wr-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(96px), 1fr)); gap:calc(8px); }
  .wr-card{
    display:flex; flex-direction:column; align-items:center; gap:calc(4px);
    position:relative;
    background:rgba(0,0,0,.3); border:calc(3px) solid var(--gold-dark);
    border-radius:calc(6px); padding:calc(8px) calc(4px);
    cursor:none; color:var(--cream); transition:filter .12s, transform .06s, border-color .12s;
  }
  .wr-card:hover{ filter:brightness(1.12); transform:translateY(-2px); }
  .wr-card.owned{ border-color:var(--gold); }
  .wr-card.equipped{ border-color:var(--green-win); background:rgba(127,216,88,.14); box-shadow:inset 0 0 calc(10px) rgba(127,216,88,.25); }
  .wr-card.locked{ opacity:.82; }
  .wr-card.selected{ border-color:#fff; box-shadow:0 0 0 calc(2px) #fff, 0 0 calc(14px) rgba(255,255,255,.55); }
  .wr-check{
    position:absolute; top:calc(3px); right:calc(5px);
    font-family:'Press Start 2P', monospace; font-size:calc(9px); color:var(--green-win);
    text-shadow:1px 1px 0 rgba(0,0,0,.6);
  }
  .wr-status.st-owned{ color:#9fe0b0; }
  .wr-status.st-equipped{ color:var(--green-win); }
  .wr-status.st-locked{ color:#e0b48a; font-size:calc(11px); }

  /* wardrobe action footer (static, below the scroll body) */
  .modal-footer{
    flex:0 0 auto;
    border-top:calc(2px) solid rgba(232,178,61,.4);
    padding-top:calc(10px);
    margin-top:calc(10px);
    display:flex; align-items:center; justify-content:space-between;
    gap:calc(12px);
    min-height:calc(46px);
  }
  .wr-foot-hint{ font-family:'VT323', monospace; font-size:calc(18px); color:#9fb0cc; }
  .wr-foot-info{ min-width:0; text-align:left; }
  .wr-foot-name{ font-family:'Press Start 2P', monospace; font-size:calc(11px); color:var(--gold); }
  .wr-foot-sub{ font-family:'VT323', monospace; font-size:calc(17px); color:#cdd8e8; margin-top:calc(3px); }
  .wr-foot-btn{
    flex:0 0 auto;
    font-family:'Press Start 2P', monospace; font-size:calc(11px);
    color:var(--ink); background:var(--gold); border:3px solid var(--gold-dark);
    padding:calc(10px) calc(16px); cursor:none;
    box-shadow:0 4px 0 var(--gold-dark); white-space:nowrap;
    transition:filter .12s, transform .06s;
  }
  .wr-foot-btn:hover:not(:disabled){ filter:brightness(1.1); }
  .wr-foot-btn:active:not(:disabled){ transform:translateY(2px); box-shadow:0 2px 0 var(--gold-dark); }
  .wr-foot-btn:disabled{ cursor:none; background:rgba(255,255,255,.14); color:#9fb0cc; box-shadow:none; border-color:rgba(255,255,255,.22); }
  .wr-foot-btn.is-equipped{ background:rgba(127,216,88,.22); color:var(--green-win); border-color:var(--green-win); }

  .wr-swatch{
    width:calc(52px); height:calc(38px);
    border-radius:calc(5px); border:calc(2px) solid rgba(0,0,0,.4);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .wr-swatch-fx{ font-family:'Press Start 2P', monospace; font-size:calc(18px); background:rgba(0,0,0,.35); }
  .wr-swatch-sprite{ image-rendering:pixelated; height:90%; width:auto; }
  .wr-name{
    font-family:'Press Start 2P', monospace; font-size:calc(8px);
    color:var(--gold); text-align:center; line-height:1.3; min-height:calc(16px);
  }
  .wr-status{
    font-family:'VT323', monospace; font-size:calc(15px);
    color:#cfe0f5; text-align:center; line-height:1.05; min-height:calc(15px);
  }
  .wr-card.equipped .wr-status{ color:var(--green-win); }
  .wr-card.locked .wr-status{ color:#e0b48a; font-size:calc(13px); }

  /* ---- win-effect particles (spawned in the game panel on a win) ---- */  .winfx{
    position:absolute; top:50%; left:50%; z-index:8; pointer-events:none;
    font-family:'Press Start 2P', monospace; font-size:calc(28px);
    transform:translate(-50%,-50%);
    animation:winBurst 1s ease-out forwards;
    text-shadow:2px 2px 0 rgba(0,0,0,.5);
  }
  .winfx.confetti{ width:calc(14px); height:calc(14px); border-radius:3px; }
  @keyframes winBurst{
    0%   { opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(.5) rotate(0deg); }
    18%  { opacity:1; transform:translate(-50%,-50%) translate(calc(var(--dx)*.3),calc(var(--dy)*.3)) scale(1.15) rotate(calc(var(--rot)*.3)); }
    100% { opacity:0; transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot)); }
  }

  /* ---- Lucky Slots mini-game ---- */
  #slotsOverlay{
    position:fixed; inset:0; z-index:10002;
    background:radial-gradient(120% 100% at 50% 0%, rgba(60,20,80,.6), rgba(0,0,0,.85));
    display:flex; align-items:center; justify-content:center; padding:calc(14px);
  }
  #slotsOverlay.hidden{ display:none; }
  /* ---- Wheel of Fortune ---- */
  #wheelOverlay{
    position:fixed; inset:0; z-index:10002;
    background:radial-gradient(120% 100% at 50% 0%, rgba(80,40,20,.6), rgba(0,0,0,.85));
    display:flex; align-items:center; justify-content:center; padding:14px;
  }
  #wheelOverlay.hidden{ display:none; }
  #testButtons{
    display:flex;
    position:fixed; left:0; bottom:0; z-index:10000;
    padding:0 0 32px 32px; align-items:flex-end; gap:10px;
  }
  #testButtons button{
    font-family:'Press Start 2P', monospace; font-size:11px;
    color:#3a0a1a; background:var(--gold); border:3px solid var(--gold-dark);
    padding:8px 10px; border-radius:6px; cursor:pointer; white-space:nowrap;
  }
  /* ---- Memory Match ---- */
  #cardsOverlay{
    position:fixed; inset:0; z-index:10002;
    background:radial-gradient(120% 100% at 50% 0%, rgba(20,60,80,.6), rgba(0,0,0,.85));
    display:flex; align-items:center; justify-content:center; padding:14px;
  }
  #cardsOverlay.hidden{ display:none; }
  #cardsCabinet{
    position:relative; text-align:center;
    background:linear-gradient(180deg,#173040 0%,#0e2030 60%,#08131c 100%);
    border:5px solid var(--gold); border-radius:16px;
    box-shadow:inset 0 0 0 3px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.6);
    padding:18px 22px 22px;
  }
  #cardsClose{
    position:absolute; top:8px; right:10px; z-index:3;
    font-family:'Press Start 2P', monospace; font-size:16px; line-height:1;
    color:#3a0a1a; background:var(--gold); border:2px solid var(--gold-dark);
    width:28px; height:28px; border-radius:6px; cursor:none;
  }
  .cards-title{ font-family:'Press Start 2P', monospace; font-size:15px; color:#ffe9a8; letter-spacing:1px; margin:2px 0 4px; text-shadow:2px 2px 0 rgba(0,0,0,.5); }
  .cards-sub{ font-family:'VT323', monospace; font-size:16px; color:#a9c4d6; margin-bottom:14px; }
  #cardsTimer{ width:100%; height:14px; background:rgba(0,0,0,.45); border:2px solid var(--gold-dark); border-radius:7px; margin:0 0 14px; overflow:hidden; }
  #cardsTimerFill{ height:100%; width:100%; background:linear-gradient(90deg,#8ff0a0 0%,#ffe066 50%,#ff6b5b 100%); border-radius:5px; }
  #cardsGrid{ display:grid; grid-template-columns:repeat(4, 84px); gap:12px; justify-content:center; }
  .mem-card{ width:84px; height:104px; perspective:700px; cursor:none; }
  .mem-inner{ position:relative; width:100%; height:100%; transition:transform .4s; transform-style:preserve-3d; }
  .mem-card.flipped .mem-inner{ transform:rotateY(180deg); }
  .mem-card.matched .mem-inner{ transform:rotateY(180deg); }
  .mem-back, .mem-front{
    position:absolute; inset:0; border-radius:9px; backface-visibility:hidden;
    display:flex; align-items:center; justify-content:center; border:3px solid var(--gold-dark);
  }
  .mem-back{
    background:
      repeating-linear-gradient(45deg, rgba(255,214,90,.16) 0 2px, transparent 2px 10px),
      repeating-linear-gradient(-45deg, rgba(255,214,90,.16) 0 2px, transparent 2px 10px),
      radial-gradient(circle at 50% 38%, #d0233c, #8a0f22 90%);
    box-shadow:inset 0 0 0 3px rgba(255,214,90,.42), inset 0 0 0 6px rgba(0,0,0,.15);
  }
  .mem-back::after{ content:'\2666'; font-family:'Press Start 2P', monospace; font-size:26px; color:#ffd23f; text-shadow:2px 2px 0 rgba(0,0,0,.45); }
  .mem-front{ background:#f4ead2; transform:rotateY(180deg); }
  .mem-card.matched .mem-front{ border-color:var(--green-win); box-shadow:0 0 12px rgba(127,240,150,.6); }
  #cardsResult{ font-family:'Press Start 2P', monospace; font-size:12px; min-height:20px; margin:14px 0 8px; color:#ffe066; }
  #cardsResult.win{ color:#8ff0a0; text-shadow:0 0 10px rgba(127,240,150,.7); }
  #cardsResult.lose{ color:#ff6b5b; text-shadow:2px 2px 0 rgba(0,0,0,.4); }
  #cardsResult.pop{ animation:slotResultPop .5s cubic-bezier(.2,1.6,.4,1); }
  #cardsDone{
    font-family:'Press Start 2P', monospace; font-size:13px;
    color:#3a0a1a; background:var(--gold); border:3px solid var(--gold-dark);
    padding:10px 22px; border-radius:10px; cursor:none; box-shadow:0 4px 0 rgba(0,0,0,.35);
  }
  #cardsDone.win{ background:radial-gradient(circle at 50% 35%, #8ff0a0, #2f8f52 70%); color:#0d2a16; border-color:var(--gold); }
  #cardsDone:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.35); }

  /* ---- unified styling for the three mini-game modals (slots / wheel / cards) ---- */
  #slotsCabinet, #wheelCabinet, #cardsCabinet{
    position:relative; text-align:center; color:var(--cream); width:auto; min-width:400px;
    background:linear-gradient(180deg,#2c2416 0%,#1a140a 60%,#120c05 100%);
    border:5px solid var(--gold); border-radius:16px;
    box-shadow:inset 0 0 0 3px rgba(0,0,0,.3), 0 14px 44px rgba(0,0,0,.6);
    padding:18px 22px 24px;
    animation:modalPop .3s cubic-bezier(.2,1.5,.4,1);
  }
  @keyframes modalPop{ 0%{ transform:scale(.72); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
  #slotsClose, #wheelClose, #cardsClose{
    position:absolute; top:10px; right:10px; z-index:5; padding:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Press Start 2P', monospace; font-size:18px; line-height:1;
    color:#3a0a1a; background:var(--gold); border:2px solid var(--gold-dark);
    width:40px; height:40px; min-width:40px; min-height:40px; border-radius:8px; cursor:none;
  }
  .slots-title, .wheel-title, .cards-title{
    font-family:'Press Start 2P', monospace; font-size:15px; color:#ffe9a8;
    letter-spacing:1px; margin:2px 0 6px; text-shadow:2px 2px 0 rgba(0,0,0,.5);
  }
  .slots-sub, .wheel-sub, .cards-sub{
    font-family:'VT323', monospace; font-size:16px; color:#c9bda0; margin:0 0 14px;
  }
  #wheelCabinet{
    position:relative; text-align:center;
    background:linear-gradient(180deg,#3a2a12 0%,#241708 60%,#160e04 100%);
    border:5px solid var(--gold); border-radius:16px;
    box-shadow:inset 0 0 0 3px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.6);
    padding:18px 22px 24px;
  }
  #wheelClose{
    position:absolute; top:8px; right:10px; z-index:3;
    font-family:'Press Start 2P', monospace; font-size:16px; line-height:1;
    color:#3a0a1a; background:var(--gold); border:2px solid var(--gold-dark);
    width:28px; height:28px; border-radius:6px; cursor:none;
  }
  .wheel-title{
    font-family:'Press Start 2P', monospace; font-size:15px; color:#ffe9a8;
    letter-spacing:1px; margin:2px 0 14px; text-shadow:2px 2px 0 rgba(0,0,0,.5);
  }
  #wheelStage{ position:relative; width:300px; height:300px; margin:0 auto; }
  #wheelCanvas{
    width:300px; height:300px; display:block;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
    transform:rotate(0deg);
  }
  #wheelHub{ display:none; }
  #wheelPointer{
    position:absolute; left:50%; top:-4px; transform:translateX(-50%); z-index:2;
    width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent;
    border-top:24px solid #e8c65a; filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)); pointer-events:none;
  }
  #wheelPointer::after{
    content:''; position:absolute; left:50%; top:-26px; transform:translateX(-50%);
    width:13px; height:13px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #ffffff, #d4d9e0 65%, #9aa0a8);
    box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 -1px 2px rgba(0,0,0,.2);
  }
  #wheelResult{
    font-family:'Press Start 2P', monospace; font-size:13px; min-height:22px;
    margin:14px 0 6px; color:#ffe066; text-align:center;
  }
  #wheelResult.win{ font-size:16px; color:#8ff0a0; text-shadow:0 0 12px rgba(127,240,150,.8), 2px 2px 0 #0d2a16; }
  #wheelResult.miss{ color:#ff6b5b; }
  #wheelResult.pop{ animation:slotResultPop .5s cubic-bezier(.2,1.6,.4,1); }
  #wheelSpin, #slotsSpin{
    font-family:'Press Start 2P', monospace; font-size:15px;
    color:#0d2a16; background:radial-gradient(circle at 50% 35%, #8ff0a0, #2f8f52 70%);
    border:4px solid var(--gold); border-radius:14px;
    padding:12px 28px; width:auto; height:auto; cursor:none; letter-spacing:1px;
    box-shadow:0 5px 0 #1c5a34, inset 0 3px 6px rgba(255,255,255,.35);
    text-shadow:1px 1px 0 rgba(255,255,255,.3);
  }
  #wheelSpin:hover:not(:disabled), #slotsSpin:hover:not(:disabled){ filter:brightness(1.08); }
  #wheelSpin:active:not(:disabled), #slotsSpin:active:not(:disabled){ transform:translateY(3px); box-shadow:0 2px 0 #1c5a34, inset 0 3px 6px rgba(255,255,255,.35); }
  #wheelSpin:disabled, #slotsSpin:disabled{ opacity:.7; }
  #wheelSpin.done, #slotsSpin.done{
    color:#fff; background:radial-gradient(circle at 50% 35%, #ff6a4a, #c01818 70%);
    box-shadow:0 5px 0 #7a0e10, inset 0 3px 6px rgba(255,255,255,.35); text-shadow:1px 1px 0 rgba(0,0,0,.4);
  }
  #wheelSpin.done:active, #slotsSpin.done:active{ transform:translateY(3px); box-shadow:0 2px 0 #7a0e10, inset 0 3px 6px rgba(255,255,255,.35); }
  /* marquee with bulb lights */
  .slots-marquee{
    background:linear-gradient(180deg,#ffe37a,#f0a300);
    border:calc(3px) solid var(--gold-dark); border-radius:calc(18px) calc(18px) calc(6px) calc(6px);
    padding:calc(5px) calc(8px); box-shadow:inset 0 0 calc(10px) rgba(255,255,255,.5);
  }
  .bulbs{
    height:calc(9px);
    background:radial-gradient(circle at center, #fff 24%, #ff9a3d 40%, rgba(255,150,60,.15) 55%, transparent 60%);
    background-size:calc(15px) calc(15px); background-repeat:repeat-x; background-position:center;
    animation:bulbBlink .7s steps(2) infinite;
  }
  @keyframes bulbBlink{ 0%{ filter:brightness(1); } 50%{ filter:brightness(.55); } 100%{ filter:brightness(1); } }
  .marquee-title{
    font-family:'Press Start 2P', monospace; font-size:calc(13px);
    color:#7a1030; text-align:center; text-shadow:1px 1px 0 rgba(255,255,255,.5);
    padding:calc(4px) 0;
  }
  .sevens{ color:#c0182f; text-shadow:1px 1px 0 #fff; }
  /* reel screen with chrome frame + payline */
  .slots-screen{
    position:relative; margin-top:calc(2px);
    background:#0e0a05;
    border:calc(3px) solid var(--gold-dark);
    border-radius:calc(10px);
    padding:calc(8px);
    box-shadow:inset 0 0 calc(12px) rgba(0,0,0,.7);
  }
  #slotsReels{
    display:flex; gap:calc(6px); justify-content:center;
    background:#0c0410; border-radius:calc(6px); padding:calc(6px);
    box-shadow:inset 0 0 calc(16px) rgba(0,0,0,.8);
  }
  .reel{
    width:calc(50px); height:calc(150px);   /* shows 3 symbols */
    overflow:hidden; border-radius:calc(4px); position:relative;
    background:linear-gradient(180deg,#fdf6e6,#efe6cf);
    box-shadow:inset 0 calc(22px) calc(20px) rgba(0,0,0,.4), inset 0 calc(-22px) calc(20px) rgba(0,0,0,.4);
  }
  .reel-strip{ display:flex; flex-direction:column; will-change:transform; }
  .reel-tile{ width:calc(50px); height:calc(50px); image-rendering:pixelated; display:block; }
  .payline{
    position:absolute; left:calc(4px); right:calc(4px); top:50%; transform:translateY(-50%);
    height:calc(52px); z-index:3; pointer-events:none;
    border-top:calc(2px) solid rgba(232,178,61,.85); border-bottom:calc(2px) solid rgba(232,178,61,.85);
    background:rgba(255,210,63,.08);
  }
  .pay-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:0; height:0; }
  .pay-arrow.left{ left:calc(-2px); border-top:calc(8px) solid transparent; border-bottom:calc(8px) solid transparent; border-left:calc(11px) solid var(--gold); }
  .pay-arrow.right{ right:calc(-2px); border-top:calc(8px) solid transparent; border-bottom:calc(8px) solid transparent; border-right:calc(11px) solid var(--gold); }
  .screen-glass{ position:absolute; inset:calc(7px); border-radius:calc(6px); pointer-events:none;
    background:linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%); z-index:3; }
  #slotsResult{
    font-family:'Press Start 2P', monospace; font-size:calc(11px);
    min-height:calc(24px); margin:calc(11px) 0 calc(6px); color:#ffe066; text-align:center;
  }
  #slotsResult.win{ font-size:calc(16px); color:#8ff0a0; text-shadow:0 0 calc(12px) rgba(127,240,150,.85), 2px 2px 0 #0d2a16; }
  #slotsResult.lose{ font-size:calc(13px); color:#ff6b5b; text-shadow:2px 2px 0 rgba(0,0,0,.5); }
  #slotsResult.pop{ animation:slotResultPop .5s cubic-bezier(.2,1.6,.4,1); }
  @keyframes slotResultPop{ 0%{ transform:scale(.4); opacity:0; } 55%{ transform:scale(1.2); opacity:1; } 100%{ transform:scale(1); } }
  .gira-coin{
    position:fixed; top:calc(-44px); z-index:10003; pointer-events:none;
    width:calc(30px); height:calc(30px);
    animation-name:coinFall; animation-timing-function:linear; animation-fill-mode:forwards;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));
  }
  @keyframes coinFall{
    0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:1; }
    88%{ opacity:1; }
    100%{ transform:translateY(112vh) translateX(var(--drift)) rotate(var(--spin)); opacity:0; }
  }
  /* control panel */
  .slots-panel{
    background:transparent; border:none; border-radius:0;
    padding:calc(14px) 0 0; text-align:center; box-shadow:none;
  }
  .slots-bet-label{ font-family:'Press Start 2P', monospace; font-size:calc(8px); color:#ffe9a8; margin-bottom:calc(6px); letter-spacing:1px; }
  #slotsBets{ display:flex; gap:calc(6px); justify-content:center; }
  .bet-btn{
    flex:1; font-family:'Press Start 2P', monospace; font-size:calc(9px);
    color:var(--cream); background:rgba(0,0,0,.35); border:calc(3px) solid var(--gold-dark);
    border-radius:calc(5px); padding:calc(8px) 0; cursor:none;
    transition:filter .12s, border-color .12s;
  }
  .bet-btn:hover:not(:disabled){ filter:brightness(1.15); }
  .bet-btn.sel{ border-color:var(--gold); background:rgba(232,178,61,.22); color:var(--gold); }
  .bet-btn:disabled{ opacity:.5; }
  #slotsBetAmount{ font-family:'VT323', monospace; font-size:calc(18px); color:#9fe0b0; margin:calc(8px) 0 calc(10px); }
  /* coin tray + lever */
  .slots-tray{
    height:calc(14px); margin-top:calc(10px);
    background:linear-gradient(180deg,#1a0308,#3a0a14);
    border:calc(3px) solid var(--gold-dark); border-radius:calc(6px);
    box-shadow:inset 0 calc(4px) calc(8px) rgba(0,0,0,.7);
  }


  /* ---- hover states: the hoof tip sits at the real pointer, so :hover lights
     up whatever the hoof is over ---- */
  .upBtn:hover:not(:disabled){ filter:brightness(1.18); border-color:var(--gold); transform:translateY(-1px); }
  #buyBtn:hover:not(:disabled){ filter:brightness(1.12); transform:translateY(-2px); }
  #muteBtn:hover, #albumBtn:hover{ filter:brightness(1.15); border-color:var(--gold); }
  #retireBtn:hover:not(:disabled){ filter:brightness(1.1); transform:translateY(-1px); }
  #albumClose:hover{ filter:brightness(1.2); border-color:var(--gold); }
  .sticker:hover{ transform:scale(1.06); }

  /* ---- Random event banner ---- */
  #eventBanner{
    width:100%;
    background:linear-gradient(180deg,#ff8a3d,#e8432f);
    border:3px solid #ffe066;
    border-radius:calc(6px);
    box-shadow:0 0 calc(18px) rgba(255,180,60,.6), 0 4px 0 rgba(0,0,0,.35);
    padding:calc(6px) calc(10px);
    animation:eventPop .4s cubic-bezier(.22,1.5,.36,1);
  }
  #eventBanner.hidden{ display:none; }
  @keyframes eventPop{ 0%{ transform:scale(.8); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
  #eventText{
    font-family:'Press Start 2P', monospace;
    font-size:calc(10px);
    color:#fff; text-align:center; letter-spacing:.5px;
    text-shadow:2px 2px 0 rgba(0,0,0,.45);
    margin-bottom:calc(5px);
  }
  #eventBarWrap{
    height:calc(7px);
    background:rgba(0,0,0,.35);
    border-radius:calc(4px);
    overflow:hidden;
  }
  #eventBar{
    height:100%; width:100%;
    background:linear-gradient(90deg,#ffe066,#fff);
    border-radius:calc(4px);
  }
  .shop-title-row{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:calc(4px);
  }
  .shop-title{
    font-family:'Press Start 2P', monospace;
    font-size:calc(10px);
    color:var(--gold);
    text-align:center;
    text-shadow:2px 2px 0 var(--ink);
    letter-spacing:1px;
  }
  #upgradeHelpBtn{
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    font-family:'Press Start 2P', monospace;
    font-size:calc(9px);
    color:var(--gold);
    background:rgba(0,0,0,.4);
    border:calc(2px) solid var(--gold-dark);
    border-radius:50%;
    width:calc(22px); height:calc(22px);
    display:flex; align-items:center; justify-content:center;
    cursor:none; line-height:1;
    transition:filter .12s, border-color .12s;
  }
  #upgradeHelpBtn:hover{ filter:brightness(1.2); border-color:var(--gold); }
  #upgradeHelpBtn:active{ transform:translateY(-50%) scale(.92); }
  /* upgrade-help modal */
  #upgradeHelpOverlay{
    position:fixed; inset:0; z-index:10001;
    background:rgba(0,0,0,.72);
    display:flex; align-items:center; justify-content:center;
    padding:calc(16px);
  }
  #upgradeHelpOverlay.hidden{ display:none; }
  #upgradeHelpPanel{
    width:70vw; min-width:70vw;
    height:70vh; max-height:70vh; overflow:hidden;
    display:flex; flex-direction:column;
    background:radial-gradient(ellipse at 50% 20%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
    border:calc(4px) solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.25), 0 12px 40px rgba(0,0,0,.6);
    border-radius:calc(8px);
    padding:calc(14px);
    color:var(--cream);
  }
  .uh-item{
    display:flex; gap:calc(10px);
    padding:calc(9px) 0;
    border-bottom:1px solid rgba(232,178,61,.16);
  }
  .uh-item:last-child{ border-bottom:none; }
  .uh-dot{
    flex:0 0 auto; width:calc(10px); height:calc(10px);
    border-radius:50%; margin-top:calc(4px);
  }
  .uh-dot.rar-common{ background:#9aa1a8; }
  .uh-dot.rar-uncommon{ background:#4e9c54; }
  .uh-dot.rar-rare{ background:#3f86d0; }
  .uh-dot.rar-epic{ background:#9a5fd0; }
  .uh-dot.rar-legendary{ background:var(--gold); }
  .uh-main{ min-width:0; }
  .uh-name{
    font-family:'Press Start 2P', monospace;
    font-size:calc(10px); color:var(--gold); margin-bottom:calc(3px);
  }
  .uh-desc{ font-family:'VT323', monospace; font-size:calc(18px); color:#e7ddc7; line-height:1.15; }
  .uh-meta{ font-family:'VT323', monospace; font-size:calc(15px); color:#b8a874; margin-top:calc(3px); }
  /* stack below on portrait / narrow screens: rail moves under the play column */
  @media (max-aspect-ratio: 5/6){
    #appBody{ flex-direction:column; align-items:center; }
    #gamePanel{ flex:0 0 auto; }
    #ticketsPanel{ width:var(--ticketW); height:auto; flex:0 0 auto; }
    #upgradesPanel{ width:var(--ticketW); height:auto; flex:1 1 auto; min-height:0; }
  }
  h1{
    font-family:'Press Start 2P', monospace;
    font-size:calc(15px);
    color:var(--gold);
    text-shadow:3px 3px 0 var(--ink), 0 0 18px rgba(232,178,61,.35);
    letter-spacing:1px;
    margin:0 0 calc(4px);
    text-align:center;
  }
  .subtitle{
    font-size:calc(16px);
    color:#bcd9c7;
    letter-spacing:1px;
    margin-bottom:calc(12px);
    text-align:center;
  }
  /* ticket-tier selector */
  /* tickets rail: full body height, scrolls inside (mirrors the upgrades rail) */
  #ticketsPanel{
    flex:0 0 auto;
    height:100%;
    display:flex; flex-direction:column;
    gap:calc(8px);
    width:200px;
    background:rgba(0,0,0,.28);
    border:3px solid var(--gold-dark);
    box-shadow:inset 0 0 0 2px rgba(232,178,61,.2), 0 8px 20px rgba(0,0,0,.4);
    border-radius:calc(6px);
    padding:calc(10px);
  }
  #ticketList{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:calc(7px); }
  #ticketList::-webkit-scrollbar{ width:calc(6px); }
  #ticketList::-webkit-scrollbar-thumb{ background:var(--gold-dark); border-radius:3px; }
  .ticketCard{
    position:relative; flex:0 0 auto; width:100%;
    isolation:isolate;
    display:flex; flex-direction:column; align-items:center; gap:calc(2px);
    border:3px solid var(--gold-dark); border-radius:calc(6px);
    padding:calc(9px) calc(6px); cursor:none; color:#fff;
    text-shadow:1px 1px 0 rgba(0,0,0,.7);
    box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 calc(20px) rgba(0,0,0,.25);
    transition:transform .06s, filter .12s, border-color .12s, opacity .12s;
    overflow:hidden; text-align:center;
  }
  /* available-but-not-selected tickets are dimmed; selected & hovered are full */
  .ticketCard:not(.selected):not(:disabled){ opacity:.55; }
  .ticketCard:hover:not(:disabled){ filter:brightness(1.12); transform:translateY(-1px); opacity:1; }
  .ticketCard.selected{ opacity:1; border-color:var(--gold); box-shadow:0 0 calc(12px) rgba(232,178,61,.7), 0 3px 0 rgba(0,0,0,.4), inset 0 0 calc(20px) rgba(0,0,0,.25); }
  .ticketCard:active:not(:disabled){ transform:translateY(1px); }
  .ticketCard:disabled{ filter:grayscale(.9) brightness(.5); cursor:none; }
  .ticketCard .tk-price{ font-family:'Press Start 2P', monospace; font-size:calc(13px); }
  .ticketCard .tk-name{ font-family:'Press Start 2P', monospace; font-size:calc(8px); color:#ffe9a8; }
  .ticketCard .tk-grid{ font-family:'VT323', monospace; font-size:calc(15px); opacity:.92; }
  .ticketCard.locked .tk-name{ color:#e8dcc0; }
  #coinBar{
    display:flex; align-items:center; gap:calc(8px);
    height:calc(44px);
    background:rgba(0,0,0,.35);
    border:3px solid var(--gold-dark);
    padding:0 calc(14px);
    box-shadow: inset 0 0 0 2px rgba(232,178,61,.25);
  }
  #coinBar img{ width:calc(24px); height:calc(24px); image-rendering:pixelated; }
  #coinCount{
    font-family:'Press Start 2P', monospace;
    font-size:calc(16px);
    color:var(--gold);
  }
  #rateReadout{
    font-family:'VT323', monospace;
    font-size:calc(16px);
    color:#9fe0b0;
    padding-left:calc(8px);
    border-left:2px solid rgba(232,178,61,.3);
  }
  #muteBtn, #albumBtn, #wardrobeBtn, #holidayBtn, #goalsBtn{
    height:calc(44px);
    min-width:calc(44px);
    display:inline-flex; align-items:center; justify-content:center;
    gap:calc(6px);
    font-family:'Press Start 2P', monospace;
    color:var(--cream);
    background:rgba(0,0,0,.35);
    border:3px solid var(--gold-dark);
    padding:0 calc(12px);
    cursor:none;
    letter-spacing:1px; white-space:nowrap;
    transition:filter .12s, border-color .12s;
  }
  .btn-ico{
    width:calc(14px); height:calc(14px);
    fill:currentColor; flex-shrink:0; display:block;
  }
  .btn-word{ display:inline; }
  .btn-count{ display:inline; }
  /* when the header hasn't much room, drop the words and keep icon + counter */
  @media (max-width: 720px){
    #albumBtn .btn-word, #wardrobeBtn .btn-word, #holidayBtn .btn-word, #muteBtn .btn-word{ display:none; }
  }
  .mute-ico .spk{ fill:currentColor; }
  .mute-ico .wave{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .mute-ico .mx{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; display:none; }
  #muteBtn.muted .mute-ico .wave{ display:none; }
  #muteBtn.muted .mute-ico .mx{ display:block; }
  #muteBtn{ font-size:calc(9px); }

  /* ================= TICKET ================= */
  #ticketOuter{ position:relative; flex:0 0 auto; }
  #ticketPaper{
    position:relative;
    width:var(--ticketW);
    color:#fff;
    padding:calc(16px) calc(12px) calc(10px);
    border-radius:calc(7px);
    border:calc(3px) solid rgba(0,0,0,.35);
    box-shadow:
      inset 0 0 0 calc(2px) rgba(255,255,255,.14),
      inset 0 0 calc(30px) rgba(0,0,0,.25);
    /* real perforated edge: notches are cut clean through so the panel shows
       through them (they can't mismatch the background — they're transparent) */
    --notch-r: calc(9px);
    --notch-s: calc(26px);
    -webkit-mask:
      radial-gradient(var(--notch-r) at 50% 0, #0000 98%, #000) 50% 0 / var(--notch-s) 100% repeat-x,
      radial-gradient(var(--notch-r) at 50% 100%, #0000 98%, #000) 50% 100% / var(--notch-s) 100% repeat-x;
    -webkit-mask-composite:source-in;
    mask:
      radial-gradient(var(--notch-r) at 50% 0, #0000 98%, #000) 50% 0 / var(--notch-s) 100% repeat-x,
      radial-gradient(var(--notch-r) at 50% 100%, #0000 98%, #000) 50% 100% / var(--notch-s) 100% repeat-x;
    mask-composite:intersect;
    /* drop-shadow follows the notched silhouette (box-shadow wouldn't) */
    filter:drop-shadow(0 calc(9px) calc(12px) rgba(0,0,0,.5));
  }
  /* ---- special high-tier ticket backgrounds (shared by ticket + ticket card) ---- */
  /* SAFARI: a herd of giraffe silhouettes drifting across */
  .ticket-safari::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:var(--safari-tile) repeat; background-size:calc(46px) calc(46px);
    animation:safariScroll 14s linear infinite;
  }
  @keyframes safariScroll{ from{ background-position:0 0; } to{ background-position:calc(92px) calc(-46px); } }
  /* PRISM: animated holographic rainbow sweep */
  .ticket-holo::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.6;
    background:linear-gradient(120deg,#ff6ec4,#7873f5,#4ade80,#facc15,#ff6ec4);
    background-size:300% 300%;
    animation:holoShift 6s ease-in-out infinite;
  }
  @keyframes holoShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
  /* CRYSTAL: translucent frosted ticket (the panel shows through) */
  #ticketPaper.ticket-crystal{
    border-color:rgba(210,240,255,.5);
    box-shadow:inset 0 0 0 calc(2px) rgba(255,255,255,.3), inset 0 0 calc(30px) rgba(120,180,220,.25);
  }
  /* BEACH: sky, sun, sand (from the gradient) + shimmering water */
  .ticket-beach::after{
    content:''; position:absolute; left:0; right:0; top:38%; height:16%; z-index:-1; pointer-events:none;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 10px, rgba(255,255,255,.3) 14px, rgba(255,255,255,0) 22px);
    background-size:44px 100%; mix-blend-mode:screen;
    animation:beachWaves 2.4s linear infinite;
  }
  @keyframes beachWaves{ from{ background-position:0 0; } to{ background-position:44px 0; } }
  /* CYBER: blinking lights + data flow */
  .ticket-cyber::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(circle at 18% 24%, #ff3a3a 0 2px, transparent 3px),
      radial-gradient(circle at 74% 32%, #40e0ff 0 2px, transparent 3px),
      radial-gradient(circle at 40% 60%, #7fff5a 0 2px, transparent 3px),
      radial-gradient(circle at 86% 72%, #ffcf3a 0 2px, transparent 3px),
      radial-gradient(circle at 28% 84%, #40e0ff 0 2px, transparent 3px);
    animation:cyberBlink .9s steps(2) infinite;
  }
  @keyframes cyberBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
  .ticket-cyber::after{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(0deg, transparent 46%, rgba(64,224,255,.5) 50%, transparent 54%);
    background-size:100% 64px;
    animation:cyberFlow 2.6s linear infinite;
  }
  @keyframes cyberFlow{ from{ background-position:0 64px; } to{ background-position:0 -100%; } }
  /* SPACE: twinkling stars + drifting nebula */
  .ticket-space::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px),
      radial-gradient(circle at 62% 22%, #cfe0ff 0 1px, transparent 2px),
      radial-gradient(circle at 44% 66%, #fff 0 1px, transparent 2px),
      radial-gradient(circle at 80% 54%, #ffe0f0 0 1px, transparent 2px),
      radial-gradient(circle at 30% 84%, #fff 0 1px, transparent 2px);
    background-size:82px 82px, 112px 112px, 92px 92px, 132px 132px, 72px 72px;
    animation:spaceTwinkle 1.8s steps(2) infinite;
  }
  @keyframes spaceTwinkle{ 0%,100%{ opacity:.9; } 50%{ opacity:.35; } }
  .ticket-space::after{
    content:''; position:absolute; inset:-35%; z-index:-1; pointer-events:none; mix-blend-mode:screen;
    background:
      radial-gradient(ellipse at 36% 40%, rgba(170,90,220,.4) 0 12%, transparent 42%),
      radial-gradient(ellipse at 70% 66%, rgba(80,140,255,.35) 0 10%, transparent 40%);
    animation:spaceSpin 26s linear infinite;
  }
  @keyframes spaceSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

  .price-badge{
    position:absolute; top:calc(-16px); left:calc(-14px);
    width:calc(56px); height:calc(56px);
    border-radius:50%;
    background:repeating-conic-gradient(from 0deg, #ffe066 0deg 15deg, #ff6b3d 15deg 30deg);
    display:flex; align-items:center; justify-content:center;
    transform:rotate(-14deg);
    box-shadow:0 4px 8px rgba(0,0,0,.4);
    border:3px solid var(--ink);
    z-index:2;
  }
  .price-badge-inner{
    background:var(--ink); color:#ffe066;
    border-radius:50%; width:calc(34px); height:calc(34px);
    display:flex; align-items:center; justify-content:center;
    font-family:'Press Start 2P', monospace; font-size:calc(9px);
  }
  .cash-icon{
    position:absolute; image-rendering:pixelated; pointer-events:none;
    filter:drop-shadow(1px 2px 1px rgba(0,0,0,.4));
  }
  .cash-icon.tr{ top:calc(6px); right:calc(6px); width:calc(34px); transform:rotate(8deg); }
  .cash-icon.bl{ bottom:calc(6px); left:calc(6px); width:calc(30px); transform:rotate(-10deg); }

  #ticketHeader{
    position:relative;
    padding-bottom:calc(8px);
    padding-top:calc(4px);
    border-bottom:2px dashed rgba(255,255,255,.45);
  }
  /* big bitmap title, centered in the header */
  .hero-title{
    display:flex; flex-direction:column; align-items:center;
    line-height:.92;
    filter:drop-shadow(calc(3px) calc(3px) 0 rgba(0,0,0,.55));
  }
  .ht-line{
    font-family:'Press Start 2P', monospace;
    letter-spacing:calc(1px);
    -webkit-text-stroke:calc(2.4px) var(--ink);
    paint-order:stroke fill;
    text-shadow:0 0 calc(12px) rgba(232,178,61,.45);
  }
  .ht-gira{
    font-size:calc(30px);
    color:#ffe066;
    transform:rotate(-3deg);
    margin-bottom:calc(2px);
  }
  .ht-scratch{
    font-size:calc(23px);
    color:#ff8a3d;
    transform:rotate(2deg);
  }
  .ticket-serial{
    position:absolute; top:calc(4px); right:0;
    font-family:'VT323', monospace;
    font-size:calc(13px);
    color:rgba(255,255,255,.8);
    white-space:nowrap;
  }

  /* ===== per-ticket tagline ribbons: shape, palette, pattern & (sometimes) animation ===== */
  .tagline-ribbon{
    position:relative; isolation:isolate;
    margin:calc(8px) 0 calc(4px);
    font-family:'Press Start 2P', monospace;
    font-size:calc(8px);
    letter-spacing:.5px;
    text-align:center;
    padding:calc(6px) calc(24px);
    color:var(--ink);
    background:linear-gradient(180deg,#ffd23f,#f4a300);
    clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%);
    border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
    filter:drop-shadow(0 0 1.4px rgba(0,0,0,.85)) drop-shadow(0 1px 2px rgba(0,0,0,.5));
  }
  /* shared "sometimes" shine: a highlight sweeps across, then rests */
  .tagline-ribbon.rb-anim::after{
    content:''; position:absolute; top:0; bottom:0; left:0; width:42%;
    background:var(--rb-sweep, linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent));
    transform:translateX(-185%) skewX(-18deg);
    animation:rbSweep var(--rb-dur,4.8s) ease-in-out infinite;
    animation-delay:var(--rb-delay,0s);
    pointer-events:none; z-index:2; mix-blend-mode:screen;
  }
  @keyframes rbSweep{
    0%{transform:translateX(-185%) skewX(-18deg)}
    15%{transform:translateX(195%) skewX(-18deg)}
    100%{transform:translateX(195%) skewX(-18deg)}
  }
  /* STARTER — humble tin plate */
  .rb-starter{
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 8px),
      linear-gradient(180deg,#d7dee3,#98a2aa);
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    border-top:2px solid #616a72; border-bottom:2px solid #616a72;
    color:#2c333a; text-shadow:0 1px 0 rgba(255,255,255,.35);
  }
  /* BRONZE — leafy savanna green */
  .rb-bronze{
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 3px, transparent 3px 9px),
      linear-gradient(180deg,#2fbf6a,#0f7d40);
    clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%);
    border-top:2px solid #0a4425; border-bottom:2px solid #0a4425;
    color:#f0fff6; text-shadow:0 1px 2px rgba(6,40,22,.6);
  }
  /* SILVER — brushed metallic blue, slanted ends */
  .rb-silver{
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px),
      linear-gradient(180deg,#eaf4ff 0%,#7fb4e8 45%,#2f74c0 100%);
    clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);
    border-top:2px solid #12457e; border-bottom:2px solid #12457e;
    color:#0b2f57; text-shadow:0 1px 0 rgba(255,255,255,.4);
    --rb-sweep:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
    --rb-dur:4.2s;
  }
  /* GOLD — regal violet award ribbon with gold trim & forked tails */
  .rb-gold{
    background:
      repeating-linear-gradient(45deg, rgba(255,214,102,.12) 0 3px, transparent 3px 10px),
      linear-gradient(180deg,#b072f0,#6a24b8);
    clip-path:polygon(0 0,5% 50%,0 100%,100% 100%,95% 50%,100% 0);
    border-top:2px solid #ffd66a; border-bottom:2px solid #ffd66a;
    color:#fff3c8; text-shadow:0 1px 3px rgba(40,10,70,.7);
    --rb-sweep:linear-gradient(100deg,transparent,rgba(255,236,170,.7),transparent);
    --rb-dur:5s;
  }
  /* PLATINUM — black slab with gold pinstripe, beveled ends */
  .rb-platinum{
    background:linear-gradient(180deg,#2a2a2a,#050505);
    clip-path:polygon(0 22%,5% 0,95% 0,100% 22%,100% 78%,95% 100%,5% 100%,0 78%);
    border-top:2px solid #c79a2e; border-bottom:2px solid #c79a2e;
    color:#ffdf8a; text-shadow:0 0 6px rgba(199,154,46,.5);
    --rb-sweep:linear-gradient(100deg,transparent,rgba(255,214,120,.55),transparent);
    --rb-dur:5.6s;
  }
  /* SAFARI — sun-baked plank with animal-print dots */
  .rb-safari{
    background:
      radial-gradient(circle at 6px 5px, rgba(60,30,10,.22) 2px, transparent 3px) 0 0/12px 12px,
      linear-gradient(180deg,#f2b354,#c2681a);
    clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%);
    border-top:2px solid #7a3a0e; border-bottom:2px solid #7a3a0e;
    color:#3a1e08; text-shadow:0 1px 0 rgba(255,225,170,.4);
    --rb-sweep:linear-gradient(100deg,transparent,rgba(255,240,200,.6),transparent);
    --rb-dur:6s;
  }
  /* PRISM — holographic gradient, continuously shifting */
  .rb-prism{
    background:linear-gradient(90deg,#ff5f9e,#ffc371,#63e6c0,#7c9cff,#c86bff,#ff5f9e);
    background-size:300% 100%;
    clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);
    border-top:2px solid rgba(255,255,255,.7); border-bottom:2px solid rgba(255,255,255,.7);
    color:#31184a; text-shadow:0 1px 0 rgba(255,255,255,.5);
    animation:rbHolo 6s linear infinite;
  }
  @keyframes rbHolo{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
  /* CRYSTAL — translucent icy glass, faceted ends, cool shimmer */
  .rb-crystal{
    background:
      repeating-linear-gradient(120deg, rgba(255,255,255,.12) 0 2px, transparent 2px 9px),
      linear-gradient(180deg, rgba(214,240,255,.88), rgba(150,196,230,.82));
    clip-path:polygon(0 22%,5% 0,95% 0,100% 22%,100% 78%,95% 100%,5% 100%,0 78%);
    border-top:2px solid rgba(255,255,255,.7); border-bottom:2px solid rgba(120,170,210,.8);
    color:#154a6e; text-shadow:0 1px 0 rgba(255,255,255,.6);
    --rb-sweep:linear-gradient(100deg,transparent,rgba(220,245,255,.85),transparent);
    --rb-dur:4.6s;
  }
  /* BEACH — tropical sky to sand, sunny glint */
  .rb-beach{
    background:linear-gradient(180deg,#7ecbf0 0%,#bfe6cf 55%,#ecdca2 100%);
    clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%);
    border-top:2px solid #e0b45a; border-bottom:2px solid #e0b45a;
    color:#0e5a7a; text-shadow:0 1px 0 rgba(255,255,255,.5);
    --rb-sweep:linear-gradient(100deg,transparent,rgba(255,250,210,.8),transparent);
    --rb-dur:5.2s;
  }
  /* CYBER — neon circuit, glowing pulse + green scan */
  .rb-cyber{
    background:
      repeating-linear-gradient(0deg, rgba(47,230,180,.10) 0 1px, transparent 1px 8px),
      linear-gradient(180deg,#06202c,#04121a);
    clip-path:polygon(0 22%,5% 0,95% 0,100% 22%,100% 78%,95% 100%,5% 100%,0 78%);
    border-top:2px solid #2fe6b4; border-bottom:2px solid #2fe6b4;
    color:#7ff5d6; text-shadow:0 0 6px rgba(47,230,180,.8);
    box-shadow:inset 0 0 8px rgba(47,230,180,.2);
    animation:rbCyberPulse 2.4s ease-in-out infinite;
    --rb-sweep:linear-gradient(100deg,transparent,rgba(90,255,210,.7),transparent);
    --rb-dur:3.8s;
  }
  @keyframes rbCyberPulse{
    0%,100%{ filter:drop-shadow(0 0 1.4px rgba(0,0,0,.85)) drop-shadow(0 0 3px rgba(47,230,180,.45)); }
    50%{ filter:drop-shadow(0 0 1.4px rgba(0,0,0,.85)) drop-shadow(0 0 8px rgba(47,230,180,.95)); }
  }
  /* SPACE — deep nebula with twinkling stars, pointed pennant */
  .rb-space{
    background:
      radial-gradient(1px 1px at 15% 35%, #fff, transparent),
      radial-gradient(1px 1px at 38% 68%, #cfe0ff, transparent),
      radial-gradient(1.3px 1.3px at 62% 30%, #fff, transparent),
      radial-gradient(1px 1px at 80% 62%, #e0d0ff, transparent),
      radial-gradient(1px 1px at 92% 42%, #fff, transparent),
      linear-gradient(180deg,#2a1660,#0a0620);
    clip-path:polygon(0 0,100% 0,93% 50%,100% 100%,0 100%,7% 50%);
    border-top:2px solid #7c5cff; border-bottom:2px solid #7c5cff;
    color:#e9e0ff; text-shadow:0 0 6px rgba(150,120,255,.85);
    animation:rbTwinkle 3.2s ease-in-out infinite;
    --rb-sweep:linear-gradient(100deg,transparent,rgba(210,190,255,.7),transparent);
    --rb-dur:6.5s;
  }
  @keyframes rbTwinkle{
    0%,100%{ filter:brightness(1) drop-shadow(0 0 1.4px rgba(0,0,0,.85)); }
    50%{ filter:brightness(1.22) drop-shadow(0 0 1.4px rgba(0,0,0,.85)); }
  }
  .jackpot-headline{
    font-family:'Press Start 2P', monospace;
    font-size:calc(19px);
    text-align:center;
    letter-spacing:.5px;
    margin:calc(10px) 0 calc(2px);
    background:linear-gradient(180deg,#fff7cc 0%,#ffe066 38%,#f7b52c 62%,#ffdf6b 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.5)) drop-shadow(0 2px 3px rgba(90,45,0,.45));
  }

  #cardOuter{
    position:relative;
    margin:calc(10px) auto;
    padding:calc(14px) calc(12px);
    width:fit-content;
    background:linear-gradient(160deg, var(--gold) 0%, var(--gold-dark) 100%);
    clip-path:polygon(
      14px 0, calc(100% - 14px) 0, 100% 14px,
      100% calc(100% - 14px), calc(100% - 14px) 100%,
      14px 100%, 0 calc(100% - 14px), 0 14px
    );
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
  }
  #cardInner, #cardInner2{
    position:relative;
    width:var(--cardW, calc(var(--ticketW) * 0.78));
    height:var(--cardH, calc(var(--ticketW) * 0.78));
    background:var(--ink);
    overflow:hidden; isolation:isolate;
    box-shadow:0 2px 6px rgba(0,0,0,.45);
  }
  #cardInner canvas, #cardInner2 canvas{
    position:absolute; inset:0;
    width:100%; height:100%;
    image-rendering:crisp-edges;   /* fallback for browsers without 'pixelated' */
    image-rendering:pixelated;     /* nearest-neighbor upscale keeps symbols sharp */
  }
  /* two tickets side by side when the 2nd-ticket feature is active */
  #ticketOuter{ display:flex; justify-content:center; align-items:flex-start; gap:calc(14px); }
  #ticketPaper2{
    display:none;
    position:relative;
    padding:calc(12px);
    border:3px solid var(--gold-dark);
    border-radius:calc(8px);
    background:#0f6c38;
    box-shadow:0 6px 18px rgba(0,0,0,.5);
  }
  #ticketPaper2 .tp2-header{
    font-family:'Press Start 2P', monospace; font-size:calc(9px);
    color:#fff; text-align:center; margin-bottom:calc(8px);
    text-shadow:0 1px 2px rgba(0,0,0,.6); letter-spacing:1px;
  }
  #cardOuter2{ padding:calc(10px); background:rgba(0,0,0,.28); border-radius:calc(6px); }
  #ticketPaper2 .tp2-foot{
    font-family:'Press Start 2P', monospace; font-size:calc(10px);
    color:#ffe066; text-align:center; margin-top:calc(8px);
    text-shadow:0 1px 2px rgba(0,0,0,.6);
  }
  #ticketPaper2 .tp2-foot.done{ color:#8effa8; }
  /* holographic sheen over the "shiny" cells (masked in JS to those cells) */
  #holoCells{
    position:absolute; inset:0; pointer-events:none; display:none;
    mix-blend-mode:color-dodge; opacity:.42;
    background:linear-gradient(115deg, #ff6ec4, #ffd36e 20%, #7cf0a0 40%, #6ec8ff 60%, #c99cff 80%, #ff6ec4);
    background-size:280% 280%;
    animation:holoCellShift 4.5s ease-in-out infinite;
  }
  @keyframes holoCellShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
  #shine{
    position:absolute; top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
    pointer-events:none;
    animation:sweep 4.5s ease-in-out infinite;
    mix-blend-mode:overlay;
  }
  /* animated foil overlay: plays over a fresh (unscratched) ticket, hidden once scratched */
  #foilFx{
    position:absolute; inset:0; pointer-events:none; opacity:0;
    mix-blend-mode:screen; transition:opacity .25s;
  }
  #foilFx.fx-holo{
    opacity:.5;
    background:linear-gradient(120deg,#ff6ec4,#7873f5,#4ade80,#facc15,#38bdf8,#ff6ec4);
    background-size:300% 300%;
    animation:tableHolo 6s ease-in-out infinite;
  }
  #foilFx.fx-aurora{
    opacity:.55;
    background:linear-gradient(115deg, transparent 30%, rgba(120,255,220,.7) 45%, rgba(150,220,255,.8) 52%, rgba(190,160,255,.6) 60%, transparent 75%);
    background-size:100% 260%;
    animation:auroraSweep 3.4s linear infinite;
  }
  @keyframes auroraSweep{ from{ background-position:0 130%; } to{ background-position:0 -90%; } }
  #foilFx.fx-galaxy{
    opacity:.6;
    background:
      radial-gradient(circle at 25% 30%, rgba(255,255,255,.9) 0 1px, transparent 2px),
      radial-gradient(circle at 65% 55%, rgba(200,180,255,.9) 0 1px, transparent 2px),
      radial-gradient(circle at 45% 80%, rgba(255,255,255,.8) 0 1px, transparent 2px),
      radial-gradient(circle at 80% 20%, rgba(180,220,255,.9) 0 1px, transparent 2px);
    background-size:60px 60px, 90px 90px, 70px 70px, 110px 110px;
    animation:galaxyTwinkle 2.2s steps(2) infinite;
  }
  #foilFxCanvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:none; }
  @keyframes galaxyTwinkle{ 0%,100%{ opacity:.6; } 50%{ opacity:.2; } }
  @keyframes sweep{
    0%{ left:-60%; }
    45%{ left:130%; }
    100%{ left:130%; }
  }
  /* foil shavings that fly off where a hoof scratches */
  .scratchfx{
    position:absolute; z-index:5; pointer-events:none;
    width:calc(3px); height:calc(3px);
    border-radius:1px;
    transform:translate(-50%,-50%);
    animation:scratchFly .5s ease-out forwards;
  }
  @keyframes scratchFly{
    0%{ opacity:.95; transform:translate(-50%,-50%) translate(0,0) scale(1); }
    100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--px),var(--py)) scale(.5); }
  }

  #ticketFooter{
    padding-top:8px;
    border-top:2px dashed rgba(255,255,255,.45);
    text-align:center;
  }
  .odds-text{
    font-family:'Press Start 2P', monospace;
    font-size:calc(8px);
    color:#fff;
    letter-spacing:.5px;
    margin-bottom:calc(6px);
  }
  #barcodeCanvas{
    image-rendering:pixelated; display:block; margin:0 auto;
    background:#fff; padding:calc(3px) calc(4px); border-radius:2px;
    width:calc(150px); height:auto;
  }
  .barcode-num{
    font-family:'VT323', monospace;
    font-size:calc(13px);
    letter-spacing:3px;
    color:#3a3016;
    margin-top:calc(2px);
    background:#fff;
    display:inline-block;
    padding:0 4px;
  }
  .void-text{
    font-family:'VT323', monospace;
    font-size:calc(15px);
    line-height:1.2;
    color:rgba(255,255,255,.82);
    margin-top:calc(7px);
    letter-spacing:.3px;
    font-style:italic;
    text-align:center;
    /* always reserve two rows so a 1- vs 2-line quote never moves the layout */
    height:calc(2 * 15px * 1.2);
    overflow:hidden;
  }
  #ticketQuote::before{ content:'\201C'; }
  #ticketQuote::after{ content:'\201D'; }

  /* result decal: a rubber-stamp sticker that slaps onto the panel centre,
     then fades away — sits over the game, never affecting layout */
  #resultBanner{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(.2) rotate(-14deg);
    pointer-events:none; z-index:7;
    font-family:'Press Start 2P', monospace;
    font-size:calc(24px);
    white-space:nowrap;
    color:var(--green-win);
    -webkit-text-stroke:calc(3px) var(--ink);
    paint-order:stroke fill;
    padding:calc(12px) calc(20px);
    background:rgba(20,16,10,.78);
    border:calc(4px) solid currentColor;
    border-radius:calc(10px);
    box-shadow:0 0 calc(30px) rgba(0,0,0,.6), 6px 6px 0 rgba(0,0,0,.35);
    opacity:0;
  }
  #resultBanner.bust{ color:#ff6b5b; }
  #resultBanner.show{ animation:decalSlap 1.15s cubic-bezier(.2,1.5,.4,1) forwards; }
  @keyframes decalSlap{
    0%   { opacity:0; transform:translate(-50%,-50%) scale(.2)  rotate(-16deg); }
    12%  { opacity:1; transform:translate(-50%,-50%) scale(1.18) rotate(-9deg); }
    24%  { opacity:1; transform:translate(-50%,-50%) scale(.96) rotate(-7deg); }
    34%  { opacity:1; transform:translate(-50%,-50%) scale(1)   rotate(-8deg); }
    72%  { opacity:1; transform:translate(-50%,-50%) scale(1)   rotate(-8deg); }
    100% { opacity:0; transform:translate(-50%,-50%) scale(1.15) rotate(-8deg); }
  }

  #buyBtn{
    position:relative;
    flex:0 0 auto;
    white-space:nowrap;
    font-family:'Press Start 2P', monospace;
    font-size:calc(11px);
    color:var(--ink);
    background:var(--gold);
    border:3px solid var(--gold-dark);
    padding:calc(12px) calc(18px) calc(14px);
    cursor:none;
    box-shadow:0 5px 0 var(--gold-dark);
    letter-spacing:.5px;
    display:flex; align-items:center; gap:calc(8px);
    transition:transform .06s, filter .12s;
    overflow:hidden;
  }
  #buyProgress{
    position:absolute; left:0; right:0; bottom:0;
    height:calc(5px);
    background:rgba(0,0,0,.28);
    display:none;
  }
  #buyProgress.on{ display:block; }
  #buyProgressFill{
    height:100%; width:0%;
    background:linear-gradient(90deg,#7a4a00,#b36b00);
  }
  #buyBtn img{ width:calc(18px); height:calc(18px); image-rendering:pixelated; }
  #buyBtn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--gold-dark); }
  #buyBtn:disabled{
    background:#5a5a52; border-color:#3d3d38; color:#9a9a90;
    box-shadow:0 5px 0 #3d3d38; cursor:none;
  }

  /* ---- Automation shop (vertical list inside the right pane) ---- */
  #shop{
    display:flex;
    flex-direction:column;
    gap:calc(7px);
    width:100%;
  }
  .upBtn{
    position:relative;
    width:100%;
    flex:0 0 auto;
    display:flex; flex-direction:row; align-items:center; justify-content:space-between;
    gap:calc(6px);
    font-family:'VT323', monospace;
    color:var(--cream);
    background:rgba(0,0,0,.34);
    border:3px solid var(--gold-dark);
    box-shadow:0 4px 0 rgba(0,0,0,.4);
    padding:calc(8px) calc(9px);
    cursor:none;
    line-height:1.05;
    overflow:hidden;
    text-align:left;
    transition:transform .06s, filter .15s;
  }
  .upBtn > *{ position:relative; z-index:2; }
  /* rarity background layer (behind content) — fancier as rarity rises */
  .upBtn.rar-uncommon::before, .upBtn.rar-rare::before,
  .upBtn.rar-epic::before, .upBtn.rar-legendary::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  .upBtn.rar-uncommon::before{ background:linear-gradient(120deg, rgba(16,36,22,.9), rgba(46,104,58,.9)); }
  .upBtn.rar-rare::before{ background:linear-gradient(120deg, rgba(14,26,48,.92), rgba(31,86,150,.92)); }
  .upBtn.rar-epic::before{ background:linear-gradient(120deg, rgba(28,14,44,.93), rgba(104,44,164,.93)); }
  .upBtn.rar-legendary::before{
    background:linear-gradient(120deg, rgba(48,32,8,.94), rgba(168,120,32,.94), rgba(48,32,8,.94));
    background-size:200% 100%;
    animation:upFlow 6s linear infinite;
  }
  .upBtn.rar-uncommon{ border-color:#4e9c54; }
  .upBtn.rar-rare{ border-color:#3f86d0; }
  .upBtn.rar-epic{ border-color:#9a5fd0; box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 calc(9px) rgba(138,63,209,.45); }
  .upBtn.rar-legendary{ border-color:var(--gold); box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 calc(11px) rgba(232,178,61,.5); animation:upGlow 2.4s ease-in-out infinite; }
  /* sweeping shimmer on the two rarest tiers */
  .upBtn.rar-epic::after, .upBtn.rar-legendary::after{
    content:""; position:absolute; top:0; bottom:0; left:0; width:45%; z-index:1; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform:translateX(-160%);
    animation:upShimmer 3.6s ease-in-out infinite;
  }
  .upBtn.rar-legendary::after{ background:linear-gradient(100deg, transparent, rgba(255,244,200,.5), transparent); animation-duration:2.7s; }
  @keyframes upShimmer{ 0%{ transform:translateX(-160%); } 55%,100%{ transform:translateX(340%); } }
  @keyframes upFlow{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }
  @keyframes upGlow{
    0%,100%{ box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 calc(8px) rgba(232,178,61,.4); }
    50%{ box-shadow:0 4px 0 rgba(0,0,0,.4), 0 0 calc(16px) rgba(232,178,61,.7); }
  }
  .upBtn .up-left{ display:flex; flex-direction:column; align-items:flex-start; gap:calc(2px); }
  .upBtn .up-name{
    font-family:'Press Start 2P', monospace;
    font-size:calc(9px);
    color:var(--gold);
    white-space:nowrap;
  }
  .upBtn .up-eff{ font-size:calc(17px); color:#eaf3ec; white-space:nowrap; }
  .upBtn .up-cost{
    display:flex; align-items:center; gap:calc(3px);
    font-size:calc(19px); color:#ffe9a8; flex-shrink:0;
  }
  .upBtn .up-cost img{ width:calc(16px); height:calc(16px); image-rendering:pixelated; }
  .upBtn:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.4); }
  /* affordable: gold inset ring + brighten (keeps the rarity background intact) */
  .upBtn.affordable{ filter:brightness(1.12) saturate(1.1); outline:calc(2px) solid rgba(255,224,102,.75); outline-offset:calc(-5px); }
  /* disabled/unaffordable: dim, keep rarity look */
  .upBtn:disabled{ color:#c8c8c0; opacity:.6; cursor:none; }
  .upBtn.maxed{ opacity:.72; }
  .upBtn.maxed .up-cost{ color:#9fc2ac; }

  #hint{
    margin-top:calc(12px);
    font-size:calc(14px);
    color:#9fc2ac;
    text-align:center;
    max-width:calc(320px);
  }
  @media (max-height:680px){ #hint{ display:none; } }
  @media (max-height:560px){ h1,.subtitle{ display:none; } }

  /* ---- Giraffe leg cursor (rubber-band leg from the bottom-right corner) ----
     #legCursor is a vertical strip pivoted at its bottom-centre. JS anchors that
     pivot just past the bottom-right corner and sets height = distance to the
     mouse, so the leg always reaches the hoof and its base is never seen cut. */
  #legCursor{
    position:fixed; top:0; left:0;
    width:calc(64px);
    pointer-events:none;
    z-index:10005;   /* always on top, even above the album overlay */
    transform-origin:50% 100%;
    filter:drop-shadow(2px 4px 3px rgba(0,0,0,.4));
    will-change:transform,height;
  }
  /* stretchable fur shaft: a repeating pixel tile so it tiles instead of smears */
  #legShaft{
    position:absolute; inset:0;
    background-image:var(--leg-tile, none);
    background-repeat:repeat-y;
    background-position:center top;
    background-size:100% calc(76px);
    image-rendering:pixelated;
    overflow:hidden;
  }
  /* gold hoof: a bright highlight sweeps down the leg */
  #legShaft.hoof-gold::after{
    content:''; position:absolute; inset:-20% 0;
    pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 47%, rgba(255,251,220,.95) 50%, rgba(255,255,255,.55) 53%, transparent 62%);
    background-size:100% 220%;
    animation:goldShine 1.9s linear infinite;
  }
  @keyframes goldShine{ from{ background-position:0 130%; } to{ background-position:0 -90%; } }
  /* opal crystal hoof: iridescent sweep + twinkling reflections */
  #legShaft.hoof-crystal::after{
    content:''; position:absolute; inset:-20% 0; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(115deg, transparent 32%, rgba(255,170,225,.55) 43%, rgba(150,240,255,.8) 50%, rgba(200,160,255,.6) 57%, transparent 68%);
    background-size:100% 220%;
    animation:crystalShine 2.4s linear infinite;
  }
  @keyframes crystalShine{ from{ background-position:0 130%; } to{ background-position:0 -90%; } }
  #legShaft.hoof-crystal::before{
    content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
    background:
      radial-gradient(circle at 30% 18%, rgba(255,255,255,.95) 0 1px, transparent 2px),
      radial-gradient(circle at 72% 42%, rgba(255,190,235,.95) 0 1px, transparent 2px),
      radial-gradient(circle at 44% 72%, rgba(180,235,255,.95) 0 1px, transparent 2px),
      radial-gradient(circle at 60% 90%, rgba(210,180,255,.9) 0 1px, transparent 2px);
    background-size:42px 58px, 56px 72px, 48px 62px, 64px 80px;
    animation:crystalTwinkle 1.5s steps(2) infinite;
  }
  @keyframes crystalTwinkle{ 0%,100%{ opacity:.85; } 50%{ opacity:.25; } }
  /* cyborg hoof: a bright scan line sweeping up the leg */
  #legShaft.hoof-cyborg::after{
    content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(0deg, transparent 44%, rgba(64,224,255,.75) 50%, transparent 56%);
    background-size:100% 44px;
    animation:cyborgScan 3.6s linear infinite;
  }
  @keyframes cyborgScan{ from{ background-position:0 44px; } to{ background-position:0 -120%; } }
  /* wizard hoof: twinkling magic sparkles */
  #legShaft.hoof-wizard::before{
    content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
    background:
      radial-gradient(circle at 30% 22%, rgba(255,246,192,.95) 0 1px, transparent 2px),
      radial-gradient(circle at 68% 48%, rgba(160,240,255,.9) 0 1px, transparent 2px),
      radial-gradient(circle at 44% 78%, rgba(201,160,255,.9) 0 1px, transparent 2px);
    background-size:44px 60px, 56px 72px, 50px 64px;
    animation:crystalTwinkle 1.4s steps(2) infinite;
  }
  /* hoof stays a fixed size and sits at the top (the mouse end) */
  #legHoof{
    position:absolute; top:calc(-6px); left:50%;
    transform:translateX(-50%);
    width:calc(96px); height:auto;
    image-rendering:pixelated;
  }
  #legCursor.pressing{ filter:drop-shadow(1px 2px 2px rgba(0,0,0,.5)) brightness(1.06); }

  /* ---- Auto-scratcher leg: the dealer's arm reaching in from the bottom-LEFT.
     Half the player's width, translucent, with a sleeve in the dealer's colour. */
  #autoLeg{
    position:fixed; top:0; left:0;
    width:calc(32px);
    pointer-events:none;
    z-index:9998;
    transform-origin:50% 100%;
    opacity:0;
    filter:drop-shadow(1px 2px 2px rgba(0,0,0,.35));
    transition:opacity .3s ease;
    will-change:transform,height;
  }
  #autoLeg.active{ opacity:.6; }
  #autoLegShaft{
    position:absolute; inset:0;
    background:var(--sleeve-color, #c8393c);
    background-image:linear-gradient(90deg, rgba(255,255,255,.18), rgba(0,0,0,.22));
    /* cuff highlight where the sleeve meets the hoof */
    box-shadow:inset 0 calc(5px) 0 rgba(255,255,255,.28);
    image-rendering:pixelated;
  }
  #autoLegHoof{
    position:absolute; top:calc(-2px); left:50%;
    transform:translateX(-50%);
    width:calc(38px); height:auto;
    image-rendering:pixelated;
  }
  /* cloned extra auto-legs (Extra Hooves) share the base styling */
  .autoLegClone{
    position:fixed; top:0; left:0;
    width:calc(32px);
    pointer-events:none; z-index:9997;
    transform-origin:50% 100%;
    opacity:0;
    filter:drop-shadow(1px 2px 2px rgba(0,0,0,.35));
    will-change:transform,height;
  }
  .autoLegClone.active{ opacity:.55; }
  .autoLegShaftClone{
    position:absolute; inset:0;
    background:var(--sleeve-color, #c8393c);
    background-image:linear-gradient(90deg, rgba(255,255,255,.18), rgba(0,0,0,.22));
    box-shadow:inset 0 calc(5px) 0 rgba(255,255,255,.28);
    image-rendering:pixelated;
  }
  .autoLegHoofClone{
    position:absolute; top:calc(-2px); left:50%;
    transform:translateX(-50%);
    width:calc(38px); height:auto;
    image-rendering:pixelated;
  }

  /* ---- Mascot popup ---- */
  #mascotWrap{
    position:absolute;
    bottom:0;
    z-index:9;
    display:flex;
    align-items:flex-end;
    pointer-events:none;
    transition:transform .45s cubic-bezier(.22,1.4,.36,1);
    max-width:calc(100% - calc(20px));
  }
  /* hidden state slides below the panel's bottom (clipped), so the NPC pops up
     from inside the game panel */
  #mascotWrap.left{ left:calc(8px); transform:translateY(calc(200px)); }
  #mascotWrap.right{ right:calc(8px); flex-direction:row-reverse; transform:translateY(calc(200px)); }
  #mascotWrap.show{ transform:translateY(0); }
  /* 50% smaller than the base 190px sprite */
  #mascotWrap canvas{
    display:block;
    image-rendering:pixelated;
    width:calc(95px) !important;
    height:auto !important;
  }
  #mascotWrap #companionCanvas{ width:calc(104px) !important; }
  #mascotGlow{
    position:absolute; left:calc(-16px); bottom:calc(-6px);
    width:calc(126px); height:calc(126px); z-index:-1; pointer-events:none; display:none;
    background:radial-gradient(circle at 50% 56%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.4) 26%, transparent 66%);
  }
  /* opaline theme: luminous, translucent panels */
  body.theme-opaline #gamePanel, body.theme-opaline #ticketsPanel,
  body.theme-opaline #upgradesPanel, body.theme-opaline #headerPanel{
    background:rgba(216,240,255,.07);
    border-color:rgba(200,238,255,.55);
    box-shadow:inset 0 0 0 2px rgba(200,240,255,.3), 0 0 calc(24px) rgba(150,220,255,.35);
  }
  .bubble{
    font-family:'VT323', monospace;
    font-size:calc(15px);
    line-height:1.15;
    background:var(--cream);
    color:var(--ink);
    border:3px solid var(--ink);
    padding:calc(5px) calc(7px);
    max-width:calc(150px);
    align-self:flex-start;
    margin:calc(8px) calc(-6px) 0;
    position:relative;
    box-shadow:3px 3px 0 rgba(0,0,0,.3);
  }