:root{
  --ink:#2B1A0C;
  --wood:#D48A34; --wood-hi:#F0B45C; --wood-lo:#9A5B1B; --wood-edge:#5E3510;
  --parch:#FCEFCF; --parch-edge:#D8B477; --parch-ink:#5A3A1A;
  --blue:#3DA6F2; --blue-hi:#8FD3FF; --blue-lo:#1F6FC0; --gold:#F5B833; --gold-lo:#B77912;
  --sky1:#5CC6F5; --sky2:#B9E8FF;
  --display:"Lilita One","Arial Black",sans-serif; --body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:700 15px/1.35 var(--body);color:var(--parch-ink);background:linear-gradient(180deg,var(--sky1),var(--sky2));min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #fff;outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.outlined{color:#fff;text-shadow:-3px -1px 0 var(--ink),-3px 0px 0 var(--ink),-3px 1px 0 var(--ink),-2px -2px 0 var(--ink),-2px -1px 0 var(--ink),-2px 0px 0 var(--ink),-2px 1px 0 var(--ink),-2px 2px 0 var(--ink),-1px -3px 0 var(--ink),-1px -2px 0 var(--ink),-1px -1px 0 var(--ink),-1px 0px 0 var(--ink),-1px 1px 0 var(--ink),-1px 2px 0 var(--ink),-1px 3px 0 var(--ink),0px -3px 0 var(--ink),0px -2px 0 var(--ink),0px -1px 0 var(--ink),0px 1px 0 var(--ink),0px 2px 0 var(--ink),0px 3px 0 var(--ink),1px -3px 0 var(--ink),1px -2px 0 var(--ink),1px -1px 0 var(--ink),1px 0px 0 var(--ink),1px 1px 0 var(--ink),1px 2px 0 var(--ink),1px 3px 0 var(--ink),2px -2px 0 var(--ink),2px -1px 0 var(--ink),2px 0px 0 var(--ink),2px 1px 0 var(--ink),2px 2px 0 var(--ink),3px -1px 0 var(--ink),3px 0px 0 var(--ink),3px 1px 0 var(--ink),0 5px 0 var(--ink)}

/* sky */
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.9;filter:drop-shadow(0 6px 0 rgba(120,180,220,.35))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:260px;height:70px;left:52%;top:62%}.c1::before{width:120px;height:120px;left:40px;top:-60px}.c1::after{width:90px;height:90px;left:130px;top:-40px}
.c2{width:200px;height:56px;left:78%;top:20%}.c2::before{width:90px;height:90px;left:30px;top:-44px}.c2::after{width:70px;height:70px;left:100px;top:-30px}
.c3{width:180px;height:50px;left:-40px;top:76%}.c3::before{width:80px;height:80px;left:40px;top:-40px}.c3::after{width:60px;height:60px;left:100px;top:-24px}
.c4{width:150px;height:44px;left:44%;top:8%;opacity:.7}.c4::before{width:70px;height:70px;left:30px;top:-34px}.c4::after{width:50px;height:50px;left:84px;top:-20px}
@media (prefers-reduced-motion:no-preference){.cloud{animation:drift 60s linear infinite alternate}.c2{animation-duration:80s}.c4{animation-duration:90s}}
@keyframes drift{to{transform:translateX(-60px)}}

/* layout */
.game{position:relative;z-index:1;display:grid;grid-template-columns:minmax(360px,540px) 1fr;gap:22px;max-width:1280px;margin:0 auto;padding:16px;min-height:100vh}
.left{display:flex;flex-direction:column;gap:14px;min-height:0}

/* gold-framed blue bar */
.framebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-radius:14px;
  background:linear-gradient(180deg,#1E88C7,#155F93);border:5px solid var(--gold);
  box-shadow:0 0 0 4px var(--ink),inset 0 3px 0 rgba(255,255,255,.25),0 6px 0 4px rgba(43,26,12,.35)}
.coins{display:flex;align-items:center;gap:10px;font:32px/1 var(--display);color:#fff;text-shadow:-3px -1px 0 var(--ink),-3px 0px 0 var(--ink),-3px 1px 0 var(--ink),-2px -2px 0 var(--ink),-2px -1px 0 var(--ink),-2px 0px 0 var(--ink),-2px 1px 0 var(--ink),-2px 2px 0 var(--ink),-1px -3px 0 var(--ink),-1px -2px 0 var(--ink),-1px -1px 0 var(--ink),-1px 0px 0 var(--ink),-1px 1px 0 var(--ink),-1px 2px 0 var(--ink),-1px 3px 0 var(--ink),0px -3px 0 var(--ink),0px -2px 0 var(--ink),0px -1px 0 var(--ink),0px 1px 0 var(--ink),0px 2px 0 var(--ink),0px 3px 0 var(--ink),1px -3px 0 var(--ink),1px -2px 0 var(--ink),1px -1px 0 var(--ink),1px 0px 0 var(--ink),1px 1px 0 var(--ink),1px 2px 0 var(--ink),1px 3px 0 var(--ink),2px -2px 0 var(--ink),2px -1px 0 var(--ink),2px 0px 0 var(--ink),2px 1px 0 var(--ink),2px 2px 0 var(--ink),3px -1px 0 var(--ink),3px 0px 0 var(--ink),3px 1px 0 var(--ink),0 5px 0 var(--ink)}
.sharebox{text-align:right;font:20px/1.05 var(--display);color:#FFE38A;text-shadow:-2px -1px 0 var(--ink),-2px 0px 0 var(--ink),-2px 1px 0 var(--ink),-1px -2px 0 var(--ink),-1px -1px 0 var(--ink),-1px 0px 0 var(--ink),-1px 1px 0 var(--ink),-1px 2px 0 var(--ink),0px -2px 0 var(--ink),0px -1px 0 var(--ink),0px 1px 0 var(--ink),0px 2px 0 var(--ink),1px -2px 0 var(--ink),1px -1px 0 var(--ink),1px 0px 0 var(--ink),1px 1px 0 var(--ink),1px 2px 0 var(--ink),2px -1px 0 var(--ink),2px 0px 0 var(--ink),2px 1px 0 var(--ink),0 4px 0 var(--ink)}
.sharebox small{display:block;font:800 12px var(--body);color:#DDF2FF;text-shadow:none}
.coin{display:inline-block;width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%,#FFF2A8 0 18%,#FFD23F 19% 58%,#E39B10 59%);border:3px solid var(--ink)}
.coin.big{width:38px;height:38px;border-width:4px}

/* wooden panel */
.wood{flex:1;display:flex;flex-direction:column;min-height:0;border-radius:16px;padding:0 10px 10px;
  background:linear-gradient(180deg,var(--wood),#C27A28);border:5px solid var(--wood-edge);
  box-shadow:inset 0 4px 0 var(--wood-hi),inset 0 -5px 0 var(--wood-lo),0 7px 0 rgba(43,26,12,.4)}
.tabs{display:flex;gap:6px;margin:-5px -5px 0;padding:0 6px;overflow-x:auto;scrollbar-width:none}
.tabs button{flex-shrink:0;padding:10px 14px 8px;border:4px solid var(--wood-edge);border-top:0;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#B06A20,#8E5217);color:#FCE3B5;font:18px var(--display);letter-spacing:.3px}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,var(--parch),#F2DDAA);color:var(--parch-ink);transform:translateY(0)}
.statline{margin:10px 2px 8px;padding:8px 12px;border-radius:10px;background:rgba(58,30,8,.55);color:#FFF4DA;font:800 14px var(--body)}
.scroll{flex:1;overflow-y:auto;padding-right:4px;min-height:0;scrollbar-color:var(--gold) var(--wood-lo)}
.rows{display:grid;gap:10px}

/* parchment rows */
.parch,.row{background:linear-gradient(180deg,var(--parch),#F4DFAF);border:4px solid var(--parch-edge);border-radius:10px;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),0 4px 0 rgba(94,53,16,.45)}
.pad{padding:16px}
.parch h2{margin:0 0 8px;font:24px var(--display);color:var(--parch-ink)}
.parch p{margin:0 0 12px}
.row{display:flex;align-items:center;gap:14px;padding:10px 12px;min-height:98px}
.row .info{flex:1;min-width:0}
.row .name{font:21px/1.1 var(--display);color:var(--parch-ink)}
.row .desc{font:800 13px var(--body);color:#8A6337;margin-top:3px}
.row .desc b{color:#2F8F3A}
.lvl{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:#7B4A18;color:#FFE9B8;font:800 12px var(--body)}
.icon{width:74px;height:74px;flex-shrink:0;display:grid;place-items:center}
.icon svg{width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(94,53,16,.35))}

/* blue buttons */
.bluebtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:132px;min-height:74px;padding:6px 12px;
  border-radius:14px;border:4px solid var(--gold);text-decoration:none;
  background:linear-gradient(180deg,var(--blue-hi) 0,var(--blue) 45%,var(--blue-lo) 100%);
  box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.55),0 6px 0 3px rgba(43,26,12,.45);
  font:24px/1 var(--display);color:#fff;text-shadow:-2px -1px 0 #0F3F73,-2px 0px 0 #0F3F73,-2px 1px 0 #0F3F73,-1px -2px 0 #0F3F73,-1px -1px 0 #0F3F73,-1px 0px 0 #0F3F73,-1px 1px 0 #0F3F73,-1px 2px 0 #0F3F73,0px -2px 0 #0F3F73,0px -1px 0 #0F3F73,0px 1px 0 #0F3F73,0px 2px 0 #0F3F73,1px -2px 0 #0F3F73,1px -1px 0 #0F3F73,1px 0px 0 #0F3F73,1px 1px 0 #0F3F73,1px 2px 0 #0F3F73,2px -1px 0 #0F3F73,2px 0px 0 #0F3F73,2px 1px 0 #0F3F73,0 4px 0 #0F3F73;transition:transform .06s}
.bluebtn:active{transform:translateY(3px)}
.bluebtn .cost{display:flex;align-items:center;gap:6px;font:20px var(--display)}
.bluebtn .cost .coin{width:20px;height:20px}
.bluebtn.sm{min-width:0;min-height:44px;flex-direction:row;font-size:18px;padding:4px 16px}
.bluebtn.wide{width:100%;min-height:52px;flex-direction:row;font-size:20px}
.bluebtn[disabled],.bluebtn.off{filter:grayscale(.9) brightness(.9);cursor:not-allowed}
.bluebtn.cant{filter:saturate(.35) brightness(.95)}

/* board & pool */
.board{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.board li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:var(--parch);border:4px solid var(--parch-edge);font:800 16px var(--body)}
.board li .rk{font:22px var(--display);width:44px;color:#B77912}
.board li:nth-child(1) .rk{color:#E5A00D}.board li:nth-child(2) .rk{color:#8C9AA6}.board li:nth-child(3) .rk{color:#B8733A}
.board li .pts{margin-left:auto;display:flex;align-items:center;gap:6px}
.board li.me{background:#DDF3FF;border-color:#7CC4F0}
.pool-total{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:10px;background:rgba(58,30,8,.55);color:#FFF4DA;font:22px var(--display)}
.copyrow{display:flex;gap:8px;margin:0 0 12px}
.copyrow input{flex:1;min-width:0;min-height:44px;border-radius:10px;border:3px solid var(--parch-edge);background:#fff;padding:0 10px;font:700 13px var(--body);color:var(--parch-ink)}
.how ol{margin:0 0 12px;padding-left:20px}.how li{margin-bottom:8px}
.fine{font:700 12px var(--body);color:#8A6337;margin:10px 2px 0}
.panel>.fine{color:#FCE3B5}

/* stage */
.stage{display:flex;flex-direction:column;align-items:center;min-width:0}
.stagetop{width:100%;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.seasonpill{min-width:0;padding:8px 16px;border-radius:12px;background:linear-gradient(180deg,#1E88C7,#155F93);border:4px solid var(--gold);box-shadow:0 0 0 3px var(--ink);
  color:#fff;font:19px/1.15 var(--display);text-shadow:-2px -1px 0 var(--ink),-2px 0px 0 var(--ink),-2px 1px 0 var(--ink),-1px -2px 0 var(--ink),-1px -1px 0 var(--ink),-1px 0px 0 var(--ink),-1px 1px 0 var(--ink),-1px 2px 0 var(--ink),0px -2px 0 var(--ink),0px -1px 0 var(--ink),0px 1px 0 var(--ink),0px 2px 0 var(--ink),1px -2px 0 var(--ink),1px -1px 0 var(--ink),1px 0px 0 var(--ink),1px 1px 0 var(--ink),1px 2px 0 var(--ink),2px -1px 0 var(--ink),2px 0px 0 var(--ink),2px 1px 0 var(--ink),0 4px 0 var(--ink);text-align:center}
.seasonpill small{display:block;font:800 12px var(--body);text-shadow:none;color:#DDF2FF}
.arena{position:relative;width:min(620px,100%);aspect-ratio:600/470;margin-top:8px;cursor:pointer;user-select:none;touch-action:manipulation;outline:none}
.island{position:absolute;left:0;right:0;bottom:0;width:100%;filter:drop-shadow(0 18px 20px rgba(20,70,110,.25))}
@media (prefers-reduced-motion:no-preference){.island,.bearwrap{animation:bob 4s ease-in-out infinite}}
@keyframes bob{50%{translate:0 -8px}}
.bearwrap{position:absolute;left:50%;top:6%;width:44%;transform:translateX(-50%);transform-origin:50% 100%}
.bear{width:100%;display:block;transition:transform .07s}
.arena.hit .bear{transform:scale(1.08,.9)}
.bear.pop{animation:pop .45s ease-in forwards}
@keyframes pop{30%{transform:scale(1.2) rotate(-8deg)}100%{transform:scale(0) rotate(25deg);opacity:0}}
.bear.enter{animation:enter .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes enter{from{transform:scale(.2) translateY(40px);opacity:0}}
.arena[aria-disabled="true"] .bear{filter:saturate(.6)}
.ripples,.floats{position:absolute;inset:0;pointer-events:none}
.float{position:absolute;font:34px var(--display);color:#FFE14D;text-shadow:-4px -1px 0 var(--ink),-4px 0px 0 var(--ink),-4px 1px 0 var(--ink),-3px -2px 0 var(--ink),-3px -1px 0 var(--ink),-3px 0px 0 var(--ink),-3px 1px 0 var(--ink),-3px 2px 0 var(--ink),-2px -3px 0 var(--ink),-2px -2px 0 var(--ink),-2px -1px 0 var(--ink),-2px 0px 0 var(--ink),-2px 1px 0 var(--ink),-2px 2px 0 var(--ink),-2px 3px 0 var(--ink),-1px -4px 0 var(--ink),-1px -3px 0 var(--ink),-1px -2px 0 var(--ink),-1px -1px 0 var(--ink),-1px 0px 0 var(--ink),-1px 1px 0 var(--ink),-1px 2px 0 var(--ink),-1px 3px 0 var(--ink),-1px 4px 0 var(--ink),0px -4px 0 var(--ink),0px -3px 0 var(--ink),0px -2px 0 var(--ink),0px -1px 0 var(--ink),0px 1px 0 var(--ink),0px 2px 0 var(--ink),0px 3px 0 var(--ink),0px 4px 0 var(--ink),1px -4px 0 var(--ink),1px -3px 0 var(--ink),1px -2px 0 var(--ink),1px -1px 0 var(--ink),1px 0px 0 var(--ink),1px 1px 0 var(--ink),1px 2px 0 var(--ink),1px 3px 0 var(--ink),1px 4px 0 var(--ink),2px -3px 0 var(--ink),2px -2px 0 var(--ink),2px -1px 0 var(--ink),2px 0px 0 var(--ink),2px 1px 0 var(--ink),2px 2px 0 var(--ink),2px 3px 0 var(--ink),3px -2px 0 var(--ink),3px -1px 0 var(--ink),3px 0px 0 var(--ink),3px 1px 0 var(--ink),3px 2px 0 var(--ink),4px -1px 0 var(--ink),4px 0px 0 var(--ink),4px 1px 0 var(--ink),0 6px 0 var(--ink);animation:up .8s ease-out forwards;white-space:nowrap}
.float.crit{color:#FF6B5B;font-size:44px}
@keyframes up{from{transform:translate(-50%,0) scale(.8);opacity:1}30%{transform:translate(-50%,-20px) scale(1.15)}to{transform:translate(-50%,-110px);opacity:0}}
.spark{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF2A8 0 18%,#FFD23F 19% 58%,#E39B10 59%);border:3px solid var(--ink);animation:fly .7s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(200deg);opacity:0}}
.foe{text-align:center;margin-top:-6px}
.foename{font:28px var(--display);color:#FF5A4E;text-shadow:-4px -1px 0 #fff,-4px 0px 0 #fff,-4px 1px 0 #fff,-3px -2px 0 #fff,-3px -1px 0 #fff,-3px 0px 0 #fff,-3px 1px 0 #fff,-3px 2px 0 #fff,-2px -3px 0 #fff,-2px -2px 0 #fff,-2px -1px 0 #fff,-2px 0px 0 #fff,-2px 1px 0 #fff,-2px 2px 0 #fff,-2px 3px 0 #fff,-1px -4px 0 #fff,-1px -3px 0 #fff,-1px -2px 0 #fff,-1px -1px 0 #fff,-1px 0px 0 #fff,-1px 1px 0 #fff,-1px 2px 0 #fff,-1px 3px 0 #fff,-1px 4px 0 #fff,0px -4px 0 #fff,0px -3px 0 #fff,0px -2px 0 #fff,0px -1px 0 #fff,0px 1px 0 #fff,0px 2px 0 #fff,0px 3px 0 #fff,0px 4px 0 #fff,1px -4px 0 #fff,1px -3px 0 #fff,1px -2px 0 #fff,1px -1px 0 #fff,1px 0px 0 #fff,1px 1px 0 #fff,1px 2px 0 #fff,1px 3px 0 #fff,1px 4px 0 #fff,2px -3px 0 #fff,2px -2px 0 #fff,2px -1px 0 #fff,2px 0px 0 #fff,2px 1px 0 #fff,2px 2px 0 #fff,2px 3px 0 #fff,3px -2px 0 #fff,3px -1px 0 #fff,3px 0px 0 #fff,3px 1px 0 #fff,3px 2px 0 #fff,4px -1px 0 #fff,4px 0px 0 #fff,4px 1px 0 #fff,0 6px 0 #fff;filter:drop-shadow(0 3px 0 rgba(43,26,12,.35))}
.hp{font:26px var(--display);color:#E0261A;text-shadow:-3px -1px 0 #fff,-3px 0px 0 #fff,-3px 1px 0 #fff,-2px -2px 0 #fff,-2px -1px 0 #fff,-2px 0px 0 #fff,-2px 1px 0 #fff,-2px 2px 0 #fff,-1px -3px 0 #fff,-1px -2px 0 #fff,-1px -1px 0 #fff,-1px 0px 0 #fff,-1px 1px 0 #fff,-1px 2px 0 #fff,-1px 3px 0 #fff,0px -3px 0 #fff,0px -2px 0 #fff,0px -1px 0 #fff,0px 1px 0 #fff,0px 2px 0 #fff,0px 3px 0 #fff,1px -3px 0 #fff,1px -2px 0 #fff,1px -1px 0 #fff,1px 0px 0 #fff,1px 1px 0 #fff,1px 2px 0 #fff,1px 3px 0 #fff,2px -2px 0 #fff,2px -1px 0 #fff,2px 0px 0 #fff,2px 1px 0 #fff,2px 2px 0 #fff,3px -1px 0 #fff,3px 0px 0 #fff,3px 1px 0 #fff,0 5px 0 #fff}
.hpbar{width:min(300px,70vw);height:24px;margin:4px auto 0;border-radius:999px;background:#3B2413;border:4px solid #3B2413;box-shadow:0 0 0 3px #C9CED4,0 4px 0 3px rgba(43,26,12,.3);overflow:hidden}
.hpbar div{height:100%;width:100%;border-radius:999px;background:linear-gradient(180deg,#8DF06A,#35B82E);transition:width .12s}
.energy{width:min(420px,92%);margin-top:18px}
.elabel{display:flex;justify-content:space-between;font:20px var(--display);color:#fff;text-shadow:-2px -1px 0 var(--ink),-2px 0px 0 var(--ink),-2px 1px 0 var(--ink),-1px -2px 0 var(--ink),-1px -1px 0 var(--ink),-1px 0px 0 var(--ink),-1px 1px 0 var(--ink),-1px 2px 0 var(--ink),0px -2px 0 var(--ink),0px -1px 0 var(--ink),0px 1px 0 var(--ink),0px 2px 0 var(--ink),1px -2px 0 var(--ink),1px -1px 0 var(--ink),1px 0px 0 var(--ink),1px 1px 0 var(--ink),1px 2px 0 var(--ink),2px -1px 0 var(--ink),2px 0px 0 var(--ink),2px 1px 0 var(--ink),0 4px 0 var(--ink)}
.ebar{height:22px;margin-top:4px;border-radius:999px;background:#12476E;border:4px solid var(--ink);overflow:hidden}
.ebar div{height:100%;width:0;background:linear-gradient(180deg,#FFE57A,#F5A911);transition:width .2s}
.note{min-height:26px;margin-top:10px;padding:0 12px;text-align:center;font:800 15px var(--body);color:#0F3F73}
.note.err{color:#B3261E}.note.ok{color:#1B7A2E}
.payout{margin-top:10px;padding:12px 16px;border-radius:12px;background:var(--parch);border:4px solid #3FC06A;box-shadow:0 0 0 3px var(--ink);text-align:center}
.demo-bar{position:relative;z-index:2}

@media (max-width:900px){
  .game{grid-template-columns:minmax(0,1fr);gap:12px;padding:10px}
  .wood,.framebar,.stage{min-width:0;max-width:100%}
  .left{display:contents}
  .framebar{order:0}.stage{order:1}.wood{order:2}
  .wood{min-height:60vh}
  .coins{font-size:26px}.coin.big{width:30px;height:30px}
  .foename{font-size:22px}.hp{font-size:20px}
  .row{min-height:86px}.bluebtn{min-width:112px;min-height:64px;font-size:20px}.icon{width:58px;height:58px}
}

.topbtns{display:flex;gap:10px;align-items:center}
.xbtn{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#111;border:4px solid var(--gold);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px rgba(43,26,12,.45)}
.xbtn svg{width:22px;height:22px}
.xbtn:active{transform:translateY(3px)}

#shareRef{margin-bottom:16px}
#refStats{margin-top:6px}

.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(15,40,70,.55)}
.modal[hidden]{display:none}
.modal-card{max-width:420px;width:100%;text-align:center}
.modal-card .bluebtn{margin:6px 0 4px}
.linkbtn{background:none;border:0;color:#8A6337;font:800 15px var(--body);padding:12px;min-height:44px;text-decoration:underline}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;max-width:min(520px,92vw);
  padding:14px 18px;border-radius:14px;background:#2B1A0C;color:#FFE9B8;font:800 15px var(--body);box-shadow:0 0 0 3px var(--gold),0 8px 24px rgba(0,0,0,.35);text-align:center}
.toast.err{background:#7A1E14;color:#fff}
.toast[hidden]{display:none}
#connectBtn.pulse{animation:pulse .8s ease-in-out 3}
@keyframes pulse{50%{transform:scale(1.08)}}

.walletbal{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:10px 14px;border-radius:10px;background:linear-gradient(180deg,#1E88C7,#155F93);border:3px solid var(--gold);box-shadow:0 0 0 3px var(--ink);color:#fff;font:800 14px var(--body)}
.walletbal b{display:flex;align-items:center;gap:8px;font:22px var(--display);text-shadow:-2px 0 #2B1A0C,2px 0 #2B1A0C,0 -2px #2B1A0C,0 2px #2B1A0C,0 4px 0 #2B1A0C}
.walletbal[hidden]{display:none}

.walletwrap{position:relative}
.walletmenu{position:absolute;right:0;top:calc(100% + 12px);z-index:15;min-width:200px;padding:10px;border-radius:14px;
  background:linear-gradient(180deg,var(--parch),#F4DFAF);border:4px solid var(--parch-edge);box-shadow:0 0 0 3px var(--ink),0 8px 0 3px rgba(43,26,12,.35)}
.walletmenu::before{content:"";position:absolute;top:-13px;right:26px;width:18px;height:18px;background:var(--parch);border-left:4px solid var(--parch-edge);border-top:4px solid var(--parch-edge);transform:rotate(45deg)}
.walletmenu[hidden]{display:none}
.redbtn{width:100%;min-height:48px;border-radius:12px;border:4px solid var(--gold);
  background:linear-gradient(180deg,#FF9A8A 0,#F0554A 45%,#B7281D 100%);
  box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.5),0 5px 0 3px rgba(43,26,12,.4);
  font:20px var(--display);color:#fff;text-shadow:-2px 0 #6B130B,2px 0 #6B130B,0 -2px #6B130B,0 2px #6B130B,0 4px 0 #6B130B;cursor:pointer}
.redbtn:active{transform:translateY(3px)}