/* =========================================
   Base theme (pirate parchment + wood)
   ========================================= */
:root{
  --ink:#1d0f06;
  --ink-soft:#3b2415;
  --light:#fff8e6;
  --gold1:#ffe29a; --gold2:#d9a817; --gold3:#9a6b12;
  --red1:#c5271f;  --red2:#8f1610;
  --wood1:#4a2c13; --wood2:#2e1a0a;
  --foil1:#1a2844; --foil2:#0b1323;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:#b59761;
}
.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
  white-space:nowrap;
}

/* =========================================
   Top wooden HUD bar
   ========================================= */
.woodbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(#6c3f1b,#4f2b13 40%,#3a1f0f 60%, #2b170a 100%);
  border-bottom:3px solid #1b0f06;
  box-shadow:0 10px 30px rgba(0,0,0,.6) inset,
             0 8px 24px rgba(0,0,0,.4);
}
.woodbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 16px;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:10px;
  align-items:center;
}
.bar-pill{
  color:#fff7d2;
  font-weight:800;
  letter-spacing:.5px;
  background:linear-gradient(#533114,#3a1f0f);
  border:2px solid #120903;
  border-radius:14px;
  padding:8px 12px;
  box-shadow:
    0 2px 0 #000 inset,
    0 0 10px rgba(255,235,170,.25);
  white-space:nowrap;
  font-size:14px;
  line-height:1.2;
}
.coin-icon{margin-right:6px}
.addr-chip{
  justify-self:end;
  color:#fff7d2;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(0,0,0,.6);
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
}

/* standard buttons */
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  color:#fff;
  font-weight:800;
  letter-spacing:.3px;
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(#263a63,#1c2947);
  box-shadow:
    0 2px 0 #0b1222 inset,
    0 6px 16px rgba(0,0,0,.5);
  font-size:14px;
  line-height:1.2;
}
.btn.primary{
  background:linear-gradient(#27528a,#1c3c63);
}
.btn.cta{
  background:linear-gradient(#e83a2f,#b21f17);
  border:2px solid #781710;
  text-shadow:0 1px 0 #6e0f0a;
  box-shadow:
    0 2px 0 #6e0f0a inset,
    0 8px 22px rgba(0,0,0,.6);
}
.btn:active{
  transform:translateY(1px);
}

/* =========================================
   Scene background around the parchment
   ========================================= */
.scene{
  position:relative;
  min-height:calc(100vh - 70px);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,200,.35), transparent 35%),
    radial-gradient(circle at 80% -5%, rgba(255,255,170,.3), transparent 40%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 16px, rgba(0,0,0,.05) 16px 32px),
    linear-gradient(140deg,#bfa16f 0%,#947348 60%);
  background-blend-mode:screen,multiply,normal,normal;
}

/* =========================================
   Parchment card
   ========================================= */
.container{
  max-width:960px;
  margin:0 auto;
  padding:20px;
}
.parchment{
  position:relative;
  margin-top:20px;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,240,150,.4), transparent 45%),
    linear-gradient(#f7edd3,#e3d0a6 70%, #d1b98a);
  border:3px solid #1b0f06;
  border-radius:20px;
  padding:22px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.3) inset,
    0 14px 40px rgba(0,0,0,.6);
}
.parchment::after{
  /* Sunbeam overlay for drama */
  content:"";
  position:absolute;
  left:55%;
  top:-10%;
  width:50%;
  height:60%;
  background:
    linear-gradient(70deg, rgba(255,255,210,.3), rgba(255,255,210,.05) 60%),
    linear-gradient(60deg, rgba(255,255,220,.25), rgba(255,255,220,0) 70%);
  filter:blur(2px);
  pointer-events:none;
}

.brand-title{
  font-family:'Pirata One',cursive;
  color:#3b2415;
  text-shadow:0 2px 0 #fff8e6,
               0 0 16px rgba(255,231,170,.5);
  font-size:46px;
  line-height:1.05;
  margin:0 0 10px 4px;
}

/* =========================================
   Ticket / scratch card
   ========================================= */
.ticket-wrap{
  display:flex;
  justify-content:center;
  margin-top:14px;
}
.ticket{
  position:relative;
  width:420px;
  height:210px;
  border-radius:16px;
  border:3px solid #1b0f06;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.6), transparent 55%),
    linear-gradient(#fdf7e6,#ead6a8 70%,#dfc792);
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    0 0 0 3px rgba(255,255,255,.35) inset;
}
.ticket.scratching .foil{
  animation:foilshake .16s infinite;
}
@keyframes foilshake{
  0%   {transform:translate(0,0)}
  25%  {transform:translate(.4px,-.4px)}
  50%  {transform:translate(-.4px,.4px)}
  75%  {transform:translate(.3px,0)}
  100% {transform:translate(0,0)}
}

/* bubbles (slots) */
.prize-row{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  z-index:1;
  pointer-events:none;
}
.bubble{
  width:110px;
  height:110px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #fff7de 0%, #dbc494 45%, #a77f49 80%);
  border:4px solid rgba(0,0,0,.8);
  box-shadow:
    0 5px 10px rgba(0,0,0,.6),
    0 0 0 3px rgba(255,255,255,.45) inset,
    0 0 12px rgba(255,255,200,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  user-select:none;
  text-align:center;
}

/* pirate icons inside bubbles */
.ico-doubloon,
.ico-swords,
.ico-skull{
  font-family:'Pirata One',cursive;
  font-size:56px;
  line-height:1;
  display:block;
}

.ico-doubloon{
  color:#facc15;
  text-shadow:
    0 0 6px rgba(250,204,21,.8),
    0 2px 0 #000;
}
.ico-swords{
  color:#e2e8f0;
  text-shadow:
    0 0 8px rgba(99,102,241,.6),
    0 2px 0 #000;
}
.ico-skull{
  color:#fffbe6;
  text-shadow:
    0 0 6px rgba(255,255,255,.6),
    0 2px 0 #000,
    0 0 12px rgba(255,0,0,.4);
}

/* foil that fades out */
.foil{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:16px;
  pointer-events:auto;
  cursor:grab;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.06) 0 18px,
      rgba(255,255,255,0) 18px 36px),
    linear-gradient(var(--foil1),var(--foil2));
  box-shadow:
    0 0 0 3px rgba(255,255,255,.08) inset,
    0 6px 16px rgba(0,0,0,.8);
  opacity:1;
  transition:opacity .15s linear;
}

/* shiny scratch streaks */
#v8_streakLayer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.v8_streak{
  position:absolute;
  width:72px;
  height:28px;
  border-radius:24px;
  background:radial-gradient(circle at 25% 50%,
    rgba(255,255,200,.95),
    rgba(255,225,120,.5) 40%,
    rgba(0,0,0,0) 70%);
  box-shadow:0 0 10px rgba(255,242,150,.65);
  transform-origin:center center;
  animation:streakfade .45s forwards;
  pointer-events:none;
}
@keyframes streakfade{
  from{opacity:.95;transform:scale(1) rotate(var(--ang,0deg))}
  to  {opacity:0;  transform:scale(1.35) rotate(var(--ang,0deg))}
}

/* coin cursor following finger/mouse */
#v8_coin{
  position:absolute;
  z-index:4;
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid #000;
  display:none;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 30%, #fff9d1 0%, #f0cd61 45%, #b48224 80%);
  box-shadow:0 2px 4px rgba(0,0,0,.8),
             0 0 12px rgba(255,240,150,.6);
}
#v8_coin::after{
  content:"⚔";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:'Pirata One',cursive;
  font-size:20px;
  color:#2b170a;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

/* hint bubble */
.hint-pill{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:rgba(8,16,32,.55);
  border:2px solid rgba(255,255,255,.25);
  border-radius:8px;
  padding:8px 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  text-align:center;
  color:#dbeafe;
  text-shadow:
    0 2px 2px #000,
    0 0 8px rgba(255,255,255,.35);
  box-shadow:
    0 10px 26px rgba(0,0,0,.8),
    0 0 20px rgba(90,150,255,.35) inset;
}

/* WIN / NO WIN badge */
.badge{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%) scale(.9);
  border-radius:10px;
  padding:6px 12px;
  font-weight:900;
  letter-spacing:.3px;
  display:none;
  z-index:4;
  pointer-events:none;
  border:2px solid #000;
  box-shadow:
    0 6px 12px rgba(0,0,0,.6),
    0 0 0 2px rgba(255,255,255,.5) inset;
}
.badge.win{
  background:linear-gradient(var(--gold1),var(--gold2));
  color:#3b230f;
}
.badge.lose{
  background:linear-gradient(#f0a3a0,#c95f5a);
  color:#300;
}
@keyframes pop{
  0%  {transform:translateX(-50%) scale(.4)}
  70% {transform:translateX(-50%) scale(1.1)}
  100%{transform:translateX(-50%) scale(1)}
}

/* =========================================
   Action row + status
   ========================================= */
.action-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:16px;
}
.pill{
  background:#f6e6bf;
  color:var(--ink-soft);
  border:2px solid #1b0f06;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 3px 0 #c2a56a inset;
  font-size:13px;
  line-height:1.2;
}
.grow{flex:1}

.status{
  margin-top:12px;
  text-align:center;
  font-weight:800;
  color:#3b2415;
  background:#f6e6bf;
  border:2px solid #1b0f06;
  border-radius:10px;
  padding:10px;
  box-shadow:0 3px 0 #c2a56a inset;
  font-size:13px;
  line-height:1.4;
}

/* footer */
.foot{
  text-align:center;
  color:#3b2415;
  padding:24px 12px 40px;
  font-size:12px;
  line-height:1.4;
}
/* make the app behave like a fullscreen game scene */
body {
  margin:0;
  background:#544022; /* fallback before gradients */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* the wooden HUD should look thicker, more like an in-game HUD bar */
.woodbar {
  position:relative;
  z-index:60;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,180,.25), transparent 60%),
    linear-gradient(#5a3615 0%, #3a200b 60%, #2a1507 100%);
  border-bottom:4px solid #120903;
  box-shadow:
    0 3px 0 #000 inset,
    0 10px 30px rgba(0,0,0,.8),
    0 30px 60px rgba(0,0,0,.8);
  padding-top:8px;
  padding-bottom:8px;
}

/* subtle metal rivet dots to sell the "wood plank" fantasy */
.woodbar::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 4% 50%, rgba(255,236,170,.8) 0 3px, rgba(0,0,0,0) 4px),
    radial-gradient(circle at 96% 50%, rgba(255,236,170,.8) 0 3px, rgba(0,0,0,0) 4px);
  pointer-events:none;
  opacity:.4;
}

.woodbar-inner {
  max-width:1100px;
  margin:0 auto;
  padding:6px 16px;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:12px;
  align-items:center;
}

/* the balanced pill look is good, but add inner highlights and embossed edges */
.bar-pill {
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  color:#fff7d2;
  letter-spacing:.5px;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,200,.3) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(#4b2a0f 0%, #2a1408 100%);
  border:2px solid #0b0502;
  border-radius:10px;
  padding:8px 12px;
  box-shadow:
    0 2px 0 rgba(0,0,0,.9) inset,
    0 0 10px rgba(255,235,170,.25),
    0 4px 10px rgba(0,0,0,.8);
  min-width:max-content;
}

/* the scene now fills viewport under the bar */
.scene {
  position:relative;
  flex:1;
  min-height:0; /* allow flexbox to size it */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:24px 16px 120px; /* leave bottom padding for big button */
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,200,.35), transparent 35%),
    radial-gradient(circle at 80% -5%, rgba(255,255,170,.3), transparent 40%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 16px, rgba(0,0,0,.05) 16px 32px),
    linear-gradient(140deg,#bfa16f 0%,#947348 60%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:inset 0 80px 120px rgba(0,0,0,.6), inset 0 -120px 200px rgba(0,0,0,.8);
}

/* parchment “panel” needs to feel like a burnt treasure map pinned to screen */
.parchment {
  width: min(480px, 90vw);
  border-radius:22px;
  border:3px solid #1b0f06;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,240,150,.4), transparent 45%),
    linear-gradient(#fff2cf 0%, #e8d0a5 60%, #d1b98a 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.45) inset,
    0 20px 40px rgba(0,0,0,.85),
    0 60px 120px rgba(0,0,0,.7);
  padding:20px 20px 16px;
  position:relative;
  text-align:center;
}

/* glowing gold god rays, more dramatic and narrower */
.parchment::after {
  content:"";
  position:absolute;
  left:50%;
  top:-20%;
  width:70%;
  height:70%;
  background:
    linear-gradient(70deg, rgba(255,255,210,.35), rgba(255,255,210,0) 60%),
    linear-gradient(30deg, rgba(255,255,180,.25), rgba(255,255,180,0) 70%);
  filter:blur(4px);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* pirate headline style: heavier stroke + embossed fill */
.brand-title {
  font-family:'Pirata One',cursive;
  font-size:40px;
  line-height:1.1;
  margin:0 0 12px;
  color:#2a1a0c;
  text-shadow:
    0 2px 0 #fff8e6,
    0 0 10px rgba(0,0,0,.8),
    0 0 30px rgba(255,231,170,.4);
  letter-spacing:.02em;
}

/* card that holds the 3 bubbles */
.ticket {
  width:100%;
  height:200px;
  border-radius:18px;
  border:3px solid #1b0f06;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.6), transparent 55%),
    linear-gradient(#fff9e9,#ead6a8 70%,#dfc792);
  box-shadow:
    0 10px 26px rgba(0,0,0,.65),
    0 0 0 3px rgba(255,255,255,.5) inset,
    0 40px 80px rgba(0,0,0,.8);
  position:relative;
  overflow:hidden;
  margin:0 auto 16px;
}

/* slots get thicker black outline + subtle inner glow */
.bubble {
  width:95px;
  height:95px;
  border-radius:50%;
  border:4px solid rgba(0,0,0,.85);
  background:
    radial-gradient(circle at 35% 30%, #fff7de 0%, #dbc494 45%, #a77f49 80%);
  box-shadow:
    0 5px 10px rgba(0,0,0,.8),
    0 0 0 3px rgba(255,255,255,.55) inset,
    0 0 20px rgba(255,255,200,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.ico-doubloon {
  font-family:'Pirata One',cursive;
  font-size:48px;
  line-height:1;
  color:#ffd84a;
  text-shadow:
    0 0 8px rgba(255,230,120,.9),
    0 2px 0 #000,
    0 0 20px rgba(255,255,120,.6);
}
.ico-swords {
  font-family:'Pirata One',cursive;
  font-size:48px;
  line-height:1;
  color:#f0f4ff;
  text-shadow:
    0 0 10px rgba(99,102,241,.8),
    0 2px 0 #000;
}
.ico-skull {
  font-family:'Pirata One',cursive;
  font-size:48px;
  line-height:1;
  color:#fffbe6;
  text-shadow:
    0 0 10px rgba(255,255,255,.8),
    0 2px 0 #000,
    0 0 16px rgba(255,0,0,.45);
}

/* scratch foil gets angled stripes and thick inner bevel */
.foil {
  border-radius:18px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.12) inset,
    0 8px 20px rgba(0,0,0,.9);
  background:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.08) 0 18px,
      rgba(255,255,255,0) 18px 36px),
    linear-gradient(#1f2d4c 0%, #0a1222 100%);
}

/* badge polish: deeper rim, bigger pop */
.badge {
  bottom:8px;
  font-size:14px;
  line-height:1.2;
  padding:8px 14px;
  border-radius:12px;
  border:2px solid #000;
  box-shadow:
    0 8px 14px rgba(0,0,0,.8),
    0 0 0 2px rgba(255,255,255,.6) inset,
    0 0 30px rgba(255,230,120,.4);
}
.badge.win {
  background:radial-gradient(circle at 30% 20%, #fff8c9 0%, #ffd84a 40%, #b97a12 80%);
  color:#3b230f;
  text-shadow:
    0 1px 0 #fff,
    0 0 12px rgba(255,255,200,.6),
    0 0 30px rgba(255,220,120,.8);
}
.badge.lose {
  background:radial-gradient(circle at 30% 20%, #ffe0e0 0%, #d84a4a 40%, #7a1c18 80%);
  color:#300;
  text-shadow:
    0 1px 0 #fff,
    0 0 8px rgba(255,200,200,.6);
}

/* CTA at bottom of screen, big pirate button */
.big-cta-wrapper {
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:80;
}
.big-cta-btn {
  min-width:280px;
  font-size:22px;
  line-height:1.2;
  font-family:'Nunito',sans-serif;
  font-weight:800;
  letter-spacing:.03em;
  color:#fff7d2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.4) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(#b81c12 0%, #6f0c08 100%);
  border:3px solid #2b0a05;
  border-radius:14px;
  padding:16px 24px;
  box-shadow:
    0 2px 0 #2b0a05 inset,
    0 0 0 3px rgba(255,255,255,.4) inset,
    0 16px 40px rgba(0,0,0,.9),
    0 0 40px rgba(255,0,0,.4);

  text-shadow:
    0 2px 0 rgba(0,0,0,.9),
    0 0 10px rgba(255,255,180,.5);
}
.big-cta-icon {
  font-family:'Pirata One',cursive;
  font-size:28px;
  line-height:1;
  color:#ffd84a;
  text-shadow:
    0 0 8px rgba(255,220,120,.8),
    0 2px 0 #000;
}


/* --- GLOBAL RESPONSIVE TWEAKS --- */

/* Fluid pirate headline + HUD text sizes */
.brand-title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin-bottom: 16px;
}

.bar-pill {
  font-size: clamp(12px, 2.5vw, 15px);
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.2;
}

.addr-chip {
  font-size: clamp(10px, 2vw, 12px);
  padding: 6px 8px;
  border-radius: 8px;
}

/* Bubble icon sizing fluid */
.ico-doubloon,
.ico-swords,
.ico-skull {
  font-size: clamp(36px, 6vw, 48px);
}

/* Badge text scales too */
.badge {
  font-size: clamp(13px, 2.5vw, 14px);
  padding: 8px 14px;
  border-radius: 12px;
}


/* --- TICKET & SCRATCH AREA SCALING --- */

/* Let the ticket shrink on mobile so it never overflows */
.ticket {
  width: min(90vw, 420px);
  height: auto;
  aspect-ratio: 2 / 1; /* keeps nice proportions without hardcoding px height */
  border-radius: 18px;
}

/* Position layers inside the ticket using absolute math that survives scaling */
.prize-row,
.foil,
#v8_streakLayer,
#v8_coin,


/* Bubble row: evenly spaced and responsive */
.prize-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-bottom: 8%;
  gap: 2vw;
}

/* Bubble size fluid instead of fixed 95px */
.bubble {
  width: clamp(70px, 22vw, 95px);
  height: clamp(70px, 22vw, 95px);
  border-radius: 50%;
  border-width: 4px;
  box-shadow:
    0 5px 10px rgba(0,0,0,.8),
    0 0 0 3px rgba(255,255,255,.55) inset,
    0 0 20px rgba(255,255,200,.45);
}

/* Center hint text a little tighter on small screens */
.hint-pill {
  font-size: clamp(10px, 2.2vw, 12px);
  padding: 6px 8px;
  line-height: 1.2;
  border-radius: 6px;
}

/* Coin: lock its visual size instead of scaling so it "feels physical" */
#v8_coin {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #000;
  box-shadow:
    0 2px 4px rgba(0,0,0,.8),
    0 0 12px rgba(255,240,150,.6);
}
#v8_coin::after {
  font-size: 18px;
}


/* --- BOTTOM PLAY BUTTON: MOBILE-FIRST --- */

.big-cta-wrapper {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); /* sits above iOS home bar */
  z-index: 9999;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none; /* so only the button itself catches taps */
}

.big-cta-btn {
  pointer-events: auto; /* re-enable pointer on the button itself */
  width: min(90vw, 360px); /* stretchy on phones, capped on desktop */
  min-width: 0;
  font-size: clamp(18px, 4vw, 22px);
  padding: 16px 20px;
  border-radius: 14px;
  border-width: 3px;
width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* keep the pirate glow but tighten outer shadow for phones */
  box-shadow:
    0 2px 0 #2b0a05 inset,
    0 0 0 3px rgba(255,255,255,.4) inset,
    0 12px 28px rgba(0,0,0,.9),
    0 0 30px rgba(255,0,0,.4);
}
.big-cta-icon {
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1;
  text-shadow:
    0 0 8px rgba(255,220,120,.8),
    0 2px 0 #000;
}


/* --- WOOD BAR RESPONSIVE LAYOUT --- */

@media (max-width: 600px) {
  .woodbar-inner {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
    justify-content: flex-start;
  }

  .bar-pill {
    border-radius: 8px;
    padding: 6px 10px;
  }

  /* Put balance + jackpot on first row, wallet + connect on second row */
  .bar-pill:nth-child(1),
  .bar-pill:nth-child(2) {
    order: 1;
  }
  .addr-chip {
    order: 2;
  }
  #connectBtn {
    order: 2;
  }

  .addr-chip {
    background:rgba(0,0,0,.4);
    flex:0 1 auto;
    max-width: 60%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .woodbar-inner {
    /* turn off the rigid grid columns */
    grid-template-columns: none;
  }
}


/* --- PARCHEMENT + SCENE MOBILE TUNING --- */

.scene {
  padding: 16px 12px 120px;
  box-shadow:
    inset 0 60px 120px rgba(0,0,0,.7),
    inset 0 -100px 160px rgba(0,0,0,.9);
  background-position: center;
  background-size: cover;
}

.parchment {
  width: 100%;
  max-width: 480px;
  border-radius: 20px;
  padding: 16px 16px 14px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.45) inset,
    0 18px 36px rgba(0,0,0,.9),
    0 60px 120px rgba(0,0,0,.8);
}

/* softer rays + animation on mobile too */
@keyframes sunSweep {
  0%   { transform:translate(-10%,-5%) rotate(-5deg) scale(1);   opacity:.55; }
  50%  { transform:translate(0%,0%)   rotate(0deg)  scale(1.07); opacity:.9;  }
  100% { transform:translate(-10%,-5%) rotate(-5deg) scale(1);   opacity:.55; }
}
.parchment::after {
  animation: sunSweep 4s ease-in-out infinite;
  left: 50%;
  width: 80%;
  height: 70%;
  top: -25%;
  filter: blur(4px);
  opacity: .8;
}

/* Hide desktop-only footer etc on mobile. We already hid these before, but double down */
.foot {
  display: none;
}