:root{ --ink:#1c2418; --paper:#f2ead6; --brass:#8a6d3b; --blood:#c94f43; --gold:#e5c04b; }
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#151a12;touch-action:none;
  overscroll-behavior:none;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
#game{position:fixed;inset:0;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
/* HUD */
#hud{position:fixed;display:flex;justify-content:space-between;
  top:calc(10px + env(safe-area-inset-top));
  left:calc(10px + env(safe-area-inset-left));
  right:calc(10px + env(safe-area-inset-right));
  align-items:flex-start;pointer-events:none;z-index:5}
.chip{background:rgba(28,36,24,.85);color:var(--paper);border:2px solid var(--paper);
  padding:6px 9px;font-size:11px;letter-spacing:.06em;box-shadow:3px 3px 0 rgba(0,0,0,.35)}
#stats{min-width:168px}
.bar{height:8px;border:1px solid var(--paper);margin:3px 0 5px;background:#141a10}
.bar>i{display:block;height:100%;transition:width .15s}
#hpbar>i{background:var(--blood)} #xpbar>i{background:#7fb4b4}
.row{display:flex;justify-content:space-between;gap:8px;text-transform:uppercase}
.row b{color:var(--gold)}
#wep{color:#b9c79a;font-size:10px;margin-top:2px;text-transform:uppercase}
#livesRow{color:var(--blood);letter-spacing:1px}
#tribe{color:#cfe0b0;font-size:10px;margin-top:1px;letter-spacing:.03em}
#tribe:empty{display:none}
#ability,#ability2{margin-top:4px;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:#9db4e0}
#ability .abar,#ability2 .abar{height:4px;border:1px solid #9db4e0;margin-top:2px;background:#141a10}
#ability .abar>i,#ability2 .abar>i{display:block;height:100%;background:#9db4e0}
#ability .rdy,#ability2 .rdy{color:#8fd06a}
#ability:empty,#ability2:empty{display:none}
.touch #ability,.touch #ability2{display:none}
#hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#phase{font-size:11px;text-transform:uppercase;letter-spacing:.1em}
#phase .night{color:#9db4e0}
#mini{width:94px;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;
  background:#151a12;border:2px solid var(--paper);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
@media (max-width:480px){ #mini{width:74px} #stats{min-width:148px} }
/* landscape phones: compact the right HUD column so the minimap ends well
   above the fire button (which owns the bottom-right corner) */
@media (orientation:landscape) and (pointer:coarse){
  #hud-right{gap:5px}
  .chip{padding:4px 7px;font-size:9px}
  #stats{min-width:132px}
  #mini{width:58px}
}
/* toast plaque — anchored bottom-center so it never covers the play field */
#toast{position:fixed;left:50%;
  bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);max-width:min(460px,84vw);
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  box-shadow:0 0 0 3px var(--paper),5px 6px 0 rgba(0,0,0,.4);
  padding:9px 12px 10px;opacity:0;transition:opacity .25s,transform .25s;z-index:11;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass);
  border-bottom:2px solid var(--brass);padding-bottom:3px;margin-bottom:4px}
#toast p{font-size:11px;line-height:1.45}
/* landscape phones: keep it small and narrow enough to clear the corner controls */
@media (orientation:landscape) and (pointer:coarse){
  #toast{bottom:calc(10px + env(safe-area-inset-bottom));max-width:min(360px,54vw);padding:6px 9px 7px}
  #toast h3{font-size:9px;padding-bottom:2px;margin-bottom:3px}
  #toast p{font-size:9.5px;line-height:1.3}
}
/* ---- touch controls (landscape) ---- */
/* left-half capture layer for the floating move stick (touch devices only) */
#moveZone{position:fixed;left:0;top:0;width:50%;height:100%;z-index:5;display:none;touch-action:none}
.touch #moveZone{display:block}
/* the floating stick — JS positions it at the touch point, hidden until then */
#stick{position:fixed;width:134px;height:134px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:6;display:none;
  background:rgba(28,36,24,.26);border:2px solid rgba(242,234,214,.42)}
#nub{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;
  background:rgba(242,234,214,.88);border:3px solid #1c2418;transform:translate(-50%,-50%);
  box-shadow:2px 3px 0 rgba(0,0,0,.35)}
/* hold-to-fire button, bottom-right, safe-area aware */
#btnA{position:fixed;z-index:6;display:none;
  right:calc(26px + env(safe-area-inset-right));
  bottom:calc(30px + env(safe-area-inset-bottom));
  width:96px;height:96px;border-radius:50%;
  background:rgba(201,79,67,.9);border:3px solid var(--paper);color:#fff;font:inherit;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:3px 4px 0 rgba(0,0,0,.4);touch-action:none}
#btnA.pressed{transform:translate(2px,2px);box-shadow:1px 2px 0 rgba(0,0,0,.4);background:rgba(201,79,67,1)}
.touch #btnA{display:block}
/* ability buttons, stacked up-left of Fire; the fill spans drain on cooldown */
#btnAbility1,#btnAbility2{position:fixed;z-index:6;display:none;overflow:hidden;
  right:calc(132px + env(safe-area-inset-right));
  width:62px;height:62px;border-radius:50%;
  background:rgba(60,84,120,.92);border:3px solid var(--paper);color:#fff;font:inherit;
  box-shadow:2px 3px 0 rgba(0,0,0,.4);touch-action:none}
#btnAbility1{bottom:calc(46px + env(safe-area-inset-bottom))}
#btnAbility2{bottom:calc(118px + env(safe-area-inset-bottom));background:rgba(120,84,60,.92)}
#btnAbility1 b,#btnAbility2 b{position:relative;z-index:2;font-size:24px;line-height:56px}
#btnAbility1:active,#btnAbility2:active{transform:translate(2px,2px)}
#btnAbility1.cooling,#btnAbility2.cooling{opacity:.7}
/* visible only on touch devices AND once the ability is unlocked (JS toggles .unlocked) */
.touch #btnAbility1.unlocked,.touch #btnAbility2.unlocked{display:block}
#ab1fill,#ab2fill{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(10,14,24,.62);z-index:1;transition:height .1s linear}
/* only show the ability button when unlocked (JS toggles inline display) + on touch */
#btnShop{position:fixed;z-index:6;display:none;font:inherit;font-size:11px;
  right:calc(26px + env(safe-area-inset-right));
  bottom:calc(140px + env(safe-area-inset-bottom));
  letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:var(--ink);
  border:3px solid var(--ink);padding:9px 14px;box-shadow:3px 3px 0 rgba(0,0,0,.4)}
/* touch: no [E] hint, and moved inboard so it clears the minimap + button cluster */
.touch #btnShop .kbd{display:none}
.touch #btnShop{right:calc(212px + env(safe-area-inset-right));
  bottom:calc(44px + env(safe-area-inset-bottom))}
/* boss health bar — top center, under the mute button */
#bossbar{position:fixed;z-index:6;display:none;pointer-events:none;
  top:calc(48px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  width:min(400px,56vw);text-align:center}
#bossbar .bnm{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#e8d8b0;text-shadow:1px 1px 0 #000}
#bossbar .bbar{height:8px;border:2px solid var(--paper);background:#141a10;margin-top:3px;box-shadow:2px 2px 0 rgba(0,0,0,.4)}
#bossbar .bbar>i{display:block;height:100%;width:100%;background:#c94f43;transition:width .15s}
/* the big event banner — for moments that outrank a toast (garden opening) */
#banner{position:fixed;left:50%;top:22%;transform:translate(-50%,-50%) scale(.7);
  min-width:min(440px,80vw);text-align:center;z-index:7;pointer-events:none;
  background:var(--paper);color:var(--ink);border:4px solid var(--brass);
  box-shadow:0 0 0 3px var(--ink),0 0 24px rgba(229,192,75,.55),8px 10px 0 rgba(0,0,0,.45);
  padding:14px 22px 12px;opacity:0;transition:opacity .25s,transform .3s cubic-bezier(.2,1.6,.4,1)}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#banner .bt{font-size:17px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
  border-bottom:2px solid var(--brass);padding-bottom:6px;margin-bottom:6px}
#banner .bp{font-size:12px;line-height:1.5}
@media (orientation:landscape) and (pointer:coarse){
  #banner{top:26%;padding:8px 14px 8px;min-width:min(380px,70vw)}
  #banner .bt{font-size:12px}
  #banner .bp{font-size:9.5px}
}
/* mute toggle — bottom-left corner, out of the HUD and the thumb's arc */
#muteBtn{position:fixed;z-index:7;
  left:calc(10px + env(safe-area-inset-left));
  bottom:calc(10px + env(safe-area-inset-bottom));
  width:32px;height:32px;font-size:14px;line-height:1;cursor:pointer;
  background:rgba(28,36,24,.7);border:2px solid rgba(242,234,214,.5);color:var(--paper);border-radius:6px}
/* rotate-to-landscape gate (mobile portrait only) */
#rotate{position:fixed;inset:0;z-index:20;display:none;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;text-align:center;padding:28px;
  background:#151a12;color:var(--paper)}
#rotate .ico{font-size:46px;animation:rotatehint 2.2s ease-in-out infinite}
#rotate .msg{font-size:16px;letter-spacing:.06em;text-transform:uppercase}
#rotate .sub2{font-size:12px;color:#9db48a}
@keyframes rotatehint{0%,60%{transform:rotate(0)}80%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (pointer:coarse){ #rotate{display:flex} }
/* overlays */
.overlay{position:fixed;inset:0;background:rgba(16,20,12,.88);z-index:10;display:flex;
  align-items:center;justify-content:center;padding:18px}
.card{background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  box-shadow:0 0 0 3px var(--paper),8px 10px 0 rgba(0,0,0,.5);max-width:440px;width:100%;
  padding:20px 20px 18px;text-align:center;max-height:86vh;overflow-y:auto}
.card h1{font-size:22px;letter-spacing:.05em;text-transform:uppercase;line-height:1.15}
.card .sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:5px 0 12px}
.card p{font-size:12.5px;line-height:1.6;text-align:left;margin-bottom:12px}
.btn{font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:#4f7d3a;color:#fff;border:3px solid var(--ink);padding:9px 22px;box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.credit{font-size:10px;color:#6b6350;margin-top:12px;letter-spacing:.04em}
.credit a{color:#6b4a2e}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.red{background:var(--blood)}
.btn[disabled]{opacity:.45;pointer-events:none}
/* park-goer portrait picker on the intro card (no labels — just pick a look) */
.stylebtns{display:flex;gap:12px;justify-content:center;margin-bottom:14px}
.stylebtns .pick{padding:4px;line-height:0;cursor:pointer;background:#b8b2a0;
  border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.stylebtns .pick:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.stylebtns .pick.sel{background:var(--gold)}
.stylebtns .pick canvas{width:44px;height:48px;image-rendering:pixelated}
/* instructions: show the set matching the device (body.touch is live-updated) */
.ctrl-mobile{display:none}
.touch .ctrl-mobile{display:block}
.touch .ctrl-desktop{display:none}
/* landscape phones: overlay cards must fit without scrolling */
@media (orientation:landscape) and (pointer:coarse){
  .card{max-width:560px;padding:8px 14px;max-height:98vh}
  .card h1{font-size:13px}
  .card .sub{font-size:8px;margin:2px 0 5px}
  .card p{font-size:9.5px;line-height:1.3;margin-bottom:5px}
  .card .btn{padding:6px 14px;font-size:10px}
  .stylebtns{gap:8px;margin-bottom:6px}
  .stylebtns .pick{padding:3px;border-width:2px}
  .stylebtns .pick canvas{width:28px;height:31px}
  /* tribe picker: two-column grid + compact cards so all five fit unscrolled */
  #archetype .card{max-width:680px}
  #archetypeItems{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  #archetypeItems .item{margin-bottom:0;padding:4px 6px;gap:5px;border-width:2px;align-items:flex-start}
  #archetypeItems .portrait{width:30px;height:32px;border-width:2px}
  #archetypeItems .nm{font-size:9px}
  #archetypeItems .ds{display:none}
  #archetypeItems .st{font-size:7.5px}
  #archetypeItems .kit{font-size:7.5px;line-height:1.3;margin-top:2px;padding-top:2px}
  #archetypeItems .buy{padding:4px 7px;font-size:8px;border-width:2px;align-self:center}
  /* shop: two-column weapon grid + compact rows so the whole menu fits */
  #shop .card{max-width:660px}
  #shopItems{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:5px}
  #shopItems .item{margin-bottom:0;padding:4px 5px;gap:5px;border-width:2px}
  #shopItems .ic{width:22px;height:22px;border-width:2px}
  #shopItems .nm{font-size:9px}
  #shopItems .st{font-size:7.5px}
  #shopItems .ds{display:none}
  #shopItems .buy{padding:5px 7px;font-size:8.5px;border-width:2px}
  #impItems{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:5px}
  #impItems .item{margin-bottom:0;padding:4px 5px;gap:5px;border-width:2px}
  #impItems .ic{width:24px;height:24px;border-width:2px;font-size:13px}
  #impItems .nm{font-size:9.5px}
  #impItems .st{font-size:8px}
  #impItems .ds{display:none}
  #impItems .buy{padding:5px 7px;font-size:8.5px;border-width:2px}
  #shop .card{padding:9px 12px 9px;max-height:94vh}
  #shop .card h1{font-size:14px}
  #shop .card .sub{margin:2px 0 6px;font-size:8.5px;letter-spacing:.16em}
  #shop .btn{padding:5px 12px;font-size:9.5px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}
  #impHead{margin-top:4px}
  .shopGap{height:4px}
}
/* shop */
#shop{display:none}
#impHead{margin-top:10px}
.shopGap{height:10px}
.item{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);padding:8px;margin-bottom:8px;
  background:#faf5e6;text-align:left}
.item .ic{width:34px;height:34px;image-rendering:pixelated;flex:none;border:2px solid var(--ink);background:#e8e0c8}
.item .impic{display:flex;align-items:center;justify-content:center;font-size:17px}
.item .portrait{width:52px;height:56px;image-rendering:pixelated;flex:none;border:2px solid var(--ink)}
.item .nm{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.item .ds{font-size:10.5px;color:#4a4436;line-height:1.35}
.item .st{font-size:10px;color:var(--brass)}
.item .kit{font-size:9px;color:#5a5346;line-height:1.4;margin-top:3px;border-top:1px dashed #cfc4a8;padding-top:3px}
.item .buy{margin-left:auto;flex:none;font:inherit;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border:2px solid var(--ink);padding:7px 10px;background:var(--gold);box-shadow:2px 2px 0 var(--ink)}
.item .buy.equipped{background:#4f7d3a;color:#fff}
.item .buy[disabled]{opacity:.45}
#deathCard h1{color:var(--blood)}
/* leaderboard */
#lbPost{display:flex;gap:8px;justify-content:center;margin:0 0 10px}
#lbName{font:inherit;font-size:12px;padding:8px 10px;border:2px solid var(--ink);background:#faf5e6;width:160px}
#lbList,#lbListTop{margin-bottom:12px;max-height:44vh;overflow-y:auto}
.lbrow{display:flex;align-items:baseline;gap:8px;font-size:11.5px;padding:4px 6px;
  border-bottom:1px solid #d8d0ba;text-align:left}
.lbrow .r{width:22px;color:var(--brass);flex:none}
.lbrow .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow .s{font-weight:700}
.lbrow .d{color:#7a7360;font-size:10px;flex:none}
.lbrow.me{background:#f6e9b8;border:1px solid var(--brass)}
.lbmsg{font-size:11px;color:#7a7360;padding:6px 0}