/* the page basics (no margins, the safe areas of phones with notches) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: full-bleed canvas world, HUD chips pinned to the corners, single-look (always daylight sea) */
:root{
  --sea:#14506f; --ink:#1b2a33; --paper:#fff6dc; --sand:#e9d49b; --leaf:#5c9e45; --coral:#e7704f;
  --chip:rgba(16,40,52,.78); --chip-line:rgba(255,246,220,.18);
  --font:"Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  color-scheme:dark;
}
html,body{height:100%;overflow:hidden}
body{background:var(--sea);color:var(--paper);font-family:var(--font);user-select:none;-webkit-user-select:none;touch-action:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.hud{position:fixed;left:16px;right:16px;top:calc(12px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
.hudside{order:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip);border:1px solid var(--chip-line);border-radius:6px;padding:6px 10px;font-size:15px;display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.chip b{color:var(--sand);font-weight:600}
.chip .k{opacity:.7;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
#mini{background:var(--chip);border:1px solid var(--chip-line);border-radius:6px;padding:4px;width:132px;height:132px;image-rendering:pixelated}
#inv{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--chip);border:1px solid var(--chip-line);border-radius:8px;pointer-events:none;flex-wrap:wrap;justify-content:center;width:max-content;max-width:min(580px,calc(100vw - 32px))}
#inv .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;writing-mode:vertical-rl;transform:rotate(180deg)}
.slot{position:relative;width:46px;height:46px;border-radius:5px;background:rgba(255,246,220,.07);border:1px solid var(--chip-line);display:grid;place-items:center}
.slot svg{width:30px;height:30px}
.slot .n{position:absolute;right:4px;bottom:1px;font-size:14px;font-weight:700;color:var(--paper);text-shadow:0 1px 0 #000;font-variant-numeric:tabular-nums}
.slot.pop{animation:pop .3s}
#inv{pointer-events:auto}
.slot,.pslot{cursor:grab;touch-action:none}
.slot.empty,.pslot.empty{cursor:default}
.slot.sel{outline:2px solid var(--sand);outline-offset:1px;background:rgba(255,246,220,.18)}
.pslot.sel{outline:3px solid var(--coral);outline-offset:1px}
#ghost{position:fixed;z-index:60;pointer-events:none;width:46px;height:46px;transform:translate(-50%,-50%) scale(1.08);display:grid;place-items:center;background:var(--chip);border:1px solid var(--sand);border-radius:5px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
#ghost svg{width:30px;height:30px}
/* pixel icons are 18px images shown at exactly 2x so every pixel stays square */
img.pix{image-rendering:pixelated;display:block;width:36px;height:36px;max-width:none}
#ghost .n{position:absolute;right:4px;bottom:1px;font-size:14px;font-weight:700;color:var(--paper);text-shadow:0 1px 0 #000}
@keyframes pop{50%{transform:scale(1.18);border-color:var(--sand)}}
@media (prefers-reduced-motion:reduce){.slot.pop{animation:none}}
.shopcard{max-width:500px;max-height:calc(100% - 32px);overflow:auto;gap:8px}
.shop-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.bal{font-size:22px;font-weight:700;color:#2f7a3a;font-variant-numeric:tabular-nums}
.stabs{display:flex;gap:4px;border-bottom:2px solid var(--ink);margin-top:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-top:2px}
.stab{background:transparent;border:2px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;padding:6px 12px;font-size:15px;font-weight:600;color:var(--ink);opacity:.6;margin-bottom:-2px;white-space:nowrap}
.stab:hover{opacity:.9}
.stab.on{opacity:1;background:#efe3bf;border-color:var(--ink);border-bottom:2px solid #efe3bf}
#shopBody{min-height:300px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.scol{min-width:0;container-type:inline-size}
.scol>h2{margin:10px 0 2px;font-size:15px;opacity:.85;padding-bottom:4px;border-bottom:2px solid rgba(27,42,51,.25)}
.scol h3{margin:12px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.nothing{padding:14px 0}
.card.shopwide{max-width:min(1320px,100%);width:100%;padding:24px 28px 20px}
.shopwide .srow{grid-template-columns:40px minmax(0,1fr) auto;column-gap:14px;row-gap:6px}
.shopwide .ds{text-wrap:pretty;overflow-wrap:anywhere}
.shopwide .acts{flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.shopwide .sbtn{white-space:nowrap}
/* each Buy/Sell column sizes its own rows: when a column is narrow, the buttons move under the item text instead of squeezing beside it */
@container (max-width:560px){
  .shopwide .srow{grid-template-columns:40px minmax(0,1fr)}
  .shopwide .acts{grid-column:2/-1;justify-content:flex-start}
}
/* stack Buy over Sell before the two columns get cramped */
@media (max-width:1180px){#shopBody{grid-template-columns:minmax(0,1fr);gap:8px}}
@media (max-width:620px){.card.shopwide{padding:20px 16px 16px}}
[hidden]{display:none!important}
/* hunger: one pixel-art bar (a tiny canvas shown at 3x with square pixels) that drains from the right */
.hbar{width:132px;height:24px;image-rendering:pixelated;display:block}
.hbar.low{animation:hpulse 1s steps(2) infinite}
@keyframes hpulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.hbar.low{animation:none}}
@media (max-width:480px){.hbar{width:88px;height:16px}}
.shopcard h2{margin:8px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.srow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid rgba(27,42,51,.14)}
.srow .ic{width:40px;height:40px;border-radius:6px;background:#efe3bf;display:grid;place-items:center}
.srow .ic svg{width:28px;height:28px}
.srow .nm{font-weight:600;font-size:16px}
.srow .ds{font-size:13px;opacity:.72}
.acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.sbtn{background:#fff;border:2px solid var(--ink);border-radius:5px;padding:4px 8px;font-size:14px;font-weight:600;color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.sbtn.buy{background:var(--leaf);color:#fff}
.sbtn:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
.sbtn:disabled{opacity:.35;cursor:default;box-shadow:none}
.owned{font-size:14px;font-weight:600;color:#2f7a3a}
#shopMsg{min-height:20px;font-size:14px;font-weight:600;color:#2f7a3a}
#shopMsg.err{color:#a8432b}
@media (max-width:480px){.slot{width:38px;height:38px}.slot svg{width:24px;height:24px}.srow{grid-template-columns:32px minmax(0,1fr)}.srow .ic{width:32px;height:32px}.acts{grid-column:1/-1;justify-content:flex-start}}
.packgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pslot{position:relative;aspect-ratio:1;max-width:100%;border-radius:6px;background:#efe3bf;border:2px solid rgba(27,42,51,.18);display:grid;place-items:center;align-content:center;gap:2px;padding:4px;min-width:0}
.pslot svg{width:34px;height:34px}
.pslot .pn{font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pslot .n{position:absolute;right:6px;top:4px;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.pslot.empty{background:transparent;border-style:dashed}
#plant{position:fixed;right:24px;bottom:calc(104px + env(safe-area-inset-bottom,0px));width:60px;height:60px;border-radius:50%;display:none;place-items:center;background:var(--leaf);color:#fff;border:2px solid var(--ink);font-size:14px;font-weight:700;touch-action:none}
@media (pointer:coarse){#plant{display:grid}}
/* solid title screen: the island stays hidden until you play */
.overlay.title{background:#1f2f57;z-index:20;overflow:auto;place-items:center start;padding-inline:max(16px,7vw)}
/* pixel-art forest and cabin, drawn at low resolution and scaled up */
#titleArt,#titleSmoke{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:0}
/* the loading screen (only while #intro has .loading): centred over the title art, in pixel type at
   whole-pixel sizes (Silkscreen at 16px, Pixelify Sans at 22px and 66px) */
.loadcard{display:none}
#intro.loading,.continuing #intro{place-items:center;padding-inline:16px}
#intro.loading .titlecard,.continuing #intro .titlecard{display:none}
#intro.loading .loadcard,.continuing #intro .loadcard{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:#fff6dc;max-width:600px;padding:28px 32px;background:rgba(16,24,48,.78);border:2px solid rgba(255,246,220,.3);box-shadow:6px 6px 0 rgba(10,16,32,.55)}
.load-hi,.load-what,.load-code{margin:0;font-family:"Silkscreen",var(--font);font-size:16px;letter-spacing:1px;text-transform:uppercase;text-shadow:2px 2px 0 #1b2a33}
.load-hi{color:#ffd98a}
.load-logo{margin:0;font-size:66px;line-height:1;font-weight:700;color:#fff6dc;text-shadow:4px 4px 0 #1b2a33,-2px -2px 0 #1b2a33,2px -2px 0 #1b2a33,-2px 2px 0 #1b2a33}
.load-what{color:#fff6dc;min-height:1.2em}
.load-dots::after{content:"";animation:loadDots 1.2s steps(4) infinite}
@keyframes loadDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.loadbar{display:flex;gap:4px;padding:6px;background:rgba(16,24,48,.85);border:2px solid #fff6dc;box-shadow:4px 4px 0 #1b2a33}
.loadbar i{display:block;width:22px;height:14px;background:#3a4670}
.loadbar i.on{background:#7ddf8e;box-shadow:inset 0 -3px 0 #4fae63}
.load-code{color:#9ad7ff}
.load-tip{margin:6px 0 0;font-size:22px;line-height:1.3;color:#fff6dc;text-shadow:2px 2px 0 #1b2a33;max-width:520px;text-wrap:balance}
@media (max-width:480px){#intro.loading .loadcard{padding:22px 18px}.load-logo{font-size:44px}.loadbar i{width:16px;height:12px}.load-tip{font-size:18px}}
@media (prefers-reduced-motion:reduce){.load-dots::after{animation:none;content:"..."}}
.card.titlecard{position:relative;z-index:1;background:none;box-shadow:none;padding:16px 0;max-width:380px;color:#fff6dc}
.titlecard .eyebrow{color:#ffd98a;text-shadow:2px 2px 0 #1b2a33}
.card.titlecard h1.logo{font-size:clamp(46px,8vw,78px);color:#fff6dc;text-shadow:4px 4px 0 #1b2a33,-2px -2px 0 #1b2a33,2px -2px 0 #1b2a33,-2px 2px 0 #1b2a33;text-wrap:balance}
.titlecard .btn{box-shadow:0 4px 0 #1b2a33}
.titlecard .btn.ghost{background:#fff6dc;color:var(--ink)}
.titlecard .savenote,.titlecard .savemode{opacity:1;color:#fff6dc;text-shadow:1px 1px 0 #1b2a33,0 0 6px #1b2a33}
.titlecard .how,.leavecard .how{background:rgba(16,30,44,.9);border:2px solid rgba(255,246,220,.25);border-radius:8px;padding:14px;color:#fff6dc}
.titlecard .how .small,.leavecard .how .small{opacity:.85}
.titlecard .keys span{color:var(--ink)}
.titlecard .controls b{color:var(--ink)}
.titlecard .confirm{color:var(--ink)}
.mp{gap:14px}
.mplabel{display:block;margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#ffd98a}
.coderow{display:flex;gap:8px;align-items:center}
/* the island code with its copy buttons, which wrap underneath on narrow screens */
.coderow.mycode{flex-wrap:wrap}.mycode .sbtn{white-space:nowrap}
.code{font-size:26px;font-weight:700;letter-spacing:.18em;font-variant-numeric:tabular-nums;color:#fff6dc}
.tagpreview{display:flex;justify-content:center;padding:4px 0}
.tagchip{background:rgba(16,40,52,.85);border-left:4px solid var(--coral);padding:4px 10px;font-weight:600;color:#fff6dc;border-radius:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nickInput{font:inherit;font-size:18px;min-width:0;flex:1;padding:8px 10px;border:2px solid #1b2a33;border-radius:6px;background:#fff6dc;color:var(--ink)}
#nickInput:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
#joinCode{font:inherit;font-size:20px;letter-spacing:.16em;text-transform:uppercase;width:9ch;min-width:0;flex:1;padding:8px 10px;border:2px solid #1b2a33;border-radius:6px;background:#fff6dc;color:var(--ink)}
#joinCode:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
#joinBtn{padding:9px 16px}
#joinBtn:disabled{opacity:.6;cursor:default}
#mpStatus:empty{display:none}
#mpStatus.err{color:#ffb4a0}
/* the results of "Check my connection": a mark and a line for each thing checked */
.netcheck{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:13px;line-height:1.35}
.netcheck li{display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:start}
.netcheck li::before{content:'·';font-weight:700;text-align:center}
.netcheck li.ok::before{content:'✓';color:#9be08a}
.netcheck li.bad::before{content:'✗';color:#ffb4a0}
.netcheck li.sum{grid-template-columns:1fr;margin-top:2px;color:#ffd98a}
.netcheck li.sum::before{content:none}
/* the title screen hides all the in-game interface */
body.on-title .hud,body.on-title #inv,body.on-title #toast,body.on-title #tradeAsk,body.on-title #pad,body.on-title #act,body.on-title #plant,body.on-title #ghost{display:none!important}
.titlecard{max-width:420px;gap:14px;padding:28px 28px 22px}
.eyebrow{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);font-weight:600}
.card h1.logo{font-size:48px;line-height:.95;margin:0 0 6px;color:var(--sea);text-shadow:3px 3px 0 var(--sand)}
.menu{display:grid;gap:10px}
.menu>.btn{width:100%;text-align:center}
.savenote{margin:-4px 0 2px;text-align:center}
.confirm{display:grid;gap:10px;padding:12px;border:2px solid var(--ink);border-radius:6px;background:#fff}
.confirm p{margin:0;font-size:15px}
.how{display:grid;gap:10px;border-top:2px dashed rgba(27,42,51,.2);padding-top:12px}
.how p{margin:0;font-size:15px;line-height:1.45}
.controls{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px}
.controls b{display:inline-block;min-width:22px;padding:0 5px;margin-right:4px;border:2px solid var(--ink);border-radius:4px;background:#fff;text-align:center;font-size:12px}
.savemode{margin:0;text-align:center}
.homelink{margin:6px 0 0;text-align:center}
.titlecard .homelink{opacity:1;color:#fff6dc;text-shadow:1px 1px 0 #1b2a33,0 0 6px #1b2a33}
.homelink a{color:#ffd877;font-weight:600;text-underline-offset:3px}
#act{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:76px;height:76px;border-radius:50%;display:none;place-items:center;background:var(--coral);color:#fff;border:2px solid var(--ink);font-size:16px;font-weight:700;touch-action:none}
#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--chip);border:1px solid var(--chip-line);border-radius:6px;padding:8px 14px;font-size:16px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}
/* (a long message wraps instead of running off a narrow screen) */
#toast{width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;white-space:normal;text-align:center;text-wrap:balance}
.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:rgba(10,30,40,.45)}
.card{background:var(--paper);color:var(--ink);border-radius:8px;padding:24px 24px 20px;max-width:380px;width:100%;box-shadow:0 10px 0 rgba(0,0,0,.25);display:grid;gap:12px}
.card h1{margin:0;font-size:34px;font-weight:700;line-height:1;text-wrap:balance;color:var(--sea)}
.card p{margin:0;font-size:16px;line-height:1.45}
.keys{display:grid;grid-template-columns:repeat(3,34px);gap:4px;justify-content:start}
.keys span{display:grid;place-items:center;height:34px;border:2px solid var(--ink);border-radius:5px;font-weight:700;background:#fff;box-shadow:0 3px 0 var(--ink)}
.keys span.blank{border:0;box-shadow:none;background:none}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
button{font:inherit;cursor:pointer}
.btn{background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:6px;padding:10px 16px;font-size:18px;font-weight:600;box-shadow:0 3px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
button:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.small{font-size:13px;opacity:.75}
#pad{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:none;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:4px}
#pad button{background:var(--chip);border:1px solid var(--chip-line);color:var(--paper);border-radius:10px;font-size:20px;touch-action:none}
@media (pointer:coarse){#pad,#act{display:grid}#inv{bottom:calc(200px + env(safe-area-inset-bottom,0px))}#toast{bottom:calc(268px + env(safe-area-inset-bottom,0px))}}
.newbtn{pointer-events:auto;background:var(--chip);color:var(--paper);border:1px solid var(--chip-line);border-radius:6px;padding:6px 10px;font-size:14px}
@media (max-width:480px){#mini{width:96px;height:96px}.chip{font-size:13px}}

/* ---- pixel-art interface ----
   Everything gets square corners, chunky stepped borders (box-shadows on each side leave the
   corner pixel notched out), a light top and dark bottom bevel, and unsmoothed pixel text. */
:root{--px:3px;--frame:#0b1a22;--panel:#163444;--panel-hi:#2b5569;--panel-lo:#0d2430}
body{-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-smooth:never;text-rendering:optimizeSpeed}
*,*::before,*::after{border-radius:0!important}
/* dark panels: HUD chips and buttons, minimap, hotbar, messages, touch pad */
.chip,.newbtn,#mini,#inv,#toast,#ghost,#pad button,#board,#tradeAsk{border:0!important;background:var(--panel);
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--frame),0 var(--px) 0 0 var(--frame),calc(-1*var(--px)) 0 0 0 var(--frame),var(--px) 0 0 0 var(--frame),
    inset 0 var(--px) 0 0 var(--panel-hi),inset 0 calc(-1*var(--px)) 0 0 var(--panel-lo)}
#toast{background:var(--panel)}
/* bigger HUD across the top */
.hud{top:calc(16px + env(safe-area-inset-top,0px));left:20px;right:20px}
.chips{gap:14px}
.chip{font-size:22px;padding:9px 16px;gap:12px}
.chip .k{font-size:16px;opacity:.8}
.newbtn{font-size:22px;padding:9px 18px;color:var(--paper)}
.newbtn:hover{background:#1e4558}
.newbtn:active{transform:translateY(3px);box-shadow:0 calc(-1*var(--px)) 0 0 var(--frame),0 var(--px) 0 0 var(--frame),calc(-1*var(--px)) 0 0 0 var(--frame),var(--px) 0 0 0 var(--frame),inset 0 var(--px) 0 0 var(--panel-lo)}
.hbar{width:176px;height:32px}
#mini{width:156px;height:156px;padding:6px}
#toast{font-size:19px;padding:10px 18px}
/* hotbar slots: sunken pixel wells */
#inv{padding:8px 10px;gap:8px;max-width:min(650px,calc(100vw - 32px))}/* wide enough that a full 20-slot pack is two rows of 10 */
#inv .lbl{font-size:13px}
.slot{width:52px;height:52px;border:0;background:var(--panel-lo);box-shadow:inset 0 0 0 2px #24495b,inset 3px 3px 0 0 #081820}
.slot.sel{outline:none;background:#2a4f60;box-shadow:inset 0 0 0 3px var(--sand),inset 5px 5px 0 0 #1a3a48}
.slot .n{font-size:16px;text-shadow:2px 2px 0 #000}
#ghost{box-shadow:0 0 0 3px var(--sand),6px 6px 0 0 rgba(0,0,0,.35)}
/* light paper panels: shop, pack, chest, fainted screen */
.card{box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),0 12px 0 0 rgba(0,0,0,.3),inset 0 4px 0 0 #fffbea,inset 0 -4px 0 0 #e6d6a8}
.card.titlecard{box-shadow:none}
.card.leavecard{background:#14233a;color:#fff6dc;max-width:420px;box-shadow:0 -4px 0 0 #fff6dc,0 4px 0 0 #fff6dc,-4px 0 0 0 #fff6dc,4px 0 0 0 #fff6dc,0 12px 0 0 rgba(0,0,0,.35)}
.leavecard h1{color:#fff6dc;text-shadow:3px 3px 0 #0b1420}
.leavecard .small{color:#fff6dc}
.leaverow .btn{flex:1 1 140px}
.leavecard .btn.ghost{background:#fff6dc;color:var(--ink)}
.leaveset{justify-self:start;font-size:16px;padding:8px 14px}
.leaveset[aria-expanded=true]{background:#ffd98a}
.titlecard .how,.leavecard .how{border:0;box-shadow:0 -3px 0 0 var(--frame),0 3px 0 0 var(--frame),-3px 0 0 0 var(--frame),3px 0 0 0 var(--frame),inset 0 3px 0 0 var(--panel-hi)}
/* chunky pixel buttons with a raised bevel that press down */
.btn,.titlecard .btn{border:0;box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),0 7px 0 0 var(--ink),inset 0 3px 0 0 rgba(255,255,255,.35),inset 0 -3px 0 0 rgba(0,0,0,.22)}
.btn:active,.titlecard .btn:active{transform:translateY(4px);box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),inset 0 3px 0 0 rgba(0,0,0,.2)}
.btn.ghost{background:#fff6dc}
.menu{gap:18px}.row{gap:20px}
.sbtn{border:0;box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink),0 5px 0 0 var(--ink),inset 0 2px 0 0 rgba(255,255,255,.4),inset 0 -2px 0 0 rgba(0,0,0,.18);margin:3px 3px 6px}
.sbtn:active:not(:disabled){transform:translateY(3px);box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink)}
.sbtn:disabled{box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink)}
.pslot{border:0;box-shadow:inset 0 0 0 2px rgba(27,42,51,.3),inset 3px 3px 0 0 rgba(27,42,51,.12)}
.pslot.empty{box-shadow:inset 0 0 0 2px rgba(27,42,51,.18);background:transparent}
.pslot.sel{outline:none;box-shadow:inset 0 0 0 3px var(--coral)}
.srow .ic{box-shadow:inset 0 0 0 2px rgba(27,42,51,.2)}
.keys span,.controls b{border:0;box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink),0 4px 0 0 var(--ink)}
.controls b{margin:2px 6px 4px 2px}
.confirm,.tagchip{border-radius:0}
#nickInput,#joinCode{border:0;box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),inset 3px 3px 0 0 #e6d6a8}
#act,#plant{border:0;box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),inset 0 3px 0 0 rgba(255,255,255,.3),inset 0 -3px 0 0 rgba(0,0,0,.25)}
button:focus-visible{outline:3px solid var(--sand);outline-offset:4px}
/* numbers use Silkscreen, a blockier pixel font whose digits are easier to tell apart */
#coins,#clockV,#mpV,.bal,.slot .n,.pslot .n,#ghost .n,.code{font-family:"Silkscreen",var(--font);font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums}
#coins,#clockV,#mpV{color:#ffe08a;text-shadow:2px 2px 0 #081820}
.slot .n,#ghost .n{font-size:15px;right:3px;bottom:0;text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000}
.pslot .n{font-size:14px}
/* the coin: a pixel-art gold coin stamped with a little duck */
.coin{display:inline-flex;width:30px;height:30px;flex:none}
.coin svg{width:100%;height:100%;display:block}
.bal{display:inline-flex;align-items:center;gap:8px}
.bal .coin{width:28px;height:28px}
/* the storage shed's 60 slots: ten across, and the window scrolls */
/* the storage shed: small slots, 10 to a row, for both the shed and the pack so it all fits without scrolling */
#chestGrid.wide,#chestPack.wide{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
#chestGrid.wide .pslot .pn,#chestPack.wide .pslot .pn{display:none}
#chestGrid.wide .pslot .n,#chestPack.wide .pslot .n{font-size:11px;right:2px;top:1px}
#chestGrid.wide .pslot img.pix,#chestPack.wide .pslot img.pix,#chestGrid.wide .pslot svg,#chestPack.wide .pslot svg{width:24px;height:24px}
#chestGrid.wide .pslot,#chestPack.wide .pslot{padding:2px}
#chest .shopcard:has(#chestGrid.wide){max-width:540px;gap:8px;padding-block:16px 14px}
/* settings panel on the title screen */
.setrow{display:flex;justify-content:space-between;align-items:center;gap:14px}
.setrow .mplabel{margin:0 0 2px}
/* volume sliders: a chunky pixel track that fills in sand as you turn it up, with a square knob */
.setvol{display:grid;gap:6px}
.setvol-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.setvol .mplabel{margin:0}
.volv{font-family:"Silkscreen",var(--font);font-weight:700;color:#ffe08a;min-width:4ch;text-align:right}
input.vol{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;margin:0;--p:75%}
input.vol::-webkit-slider-runnable-track{height:12px;background:linear-gradient(90deg,#e9d49b var(--p),#0b1a22 var(--p));box-shadow:0 -3px 0 0 #fff6dc,0 3px 0 0 #fff6dc,-3px 0 0 0 #fff6dc,3px 0 0 0 #fff6dc}
input.vol::-moz-range-track{height:12px;background:#0b1a22;box-shadow:0 -3px 0 0 #fff6dc,0 3px 0 0 #fff6dc,-3px 0 0 0 #fff6dc,3px 0 0 0 #fff6dc}
input.vol::-moz-range-progress{height:12px;background:#e9d49b}
input.vol::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:26px;margin-top:-7px;background:var(--coral);border:0;box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),inset 0 3px 0 0 rgba(255,255,255,.35)}
input.vol::-moz-range-thumb{width:18px;height:26px;background:var(--coral);border:3px solid var(--ink);border-radius:0}
input.vol:focus-visible{outline:3px solid var(--sand);outline-offset:6px}
/* fishing rarities: coloured frames on fished items, a coloured label in the shop, coloured catch messages */
.slot.rar:not(.sel){box-shadow:inset 0 0 0 3px var(--rc),inset 5px 5px 0 0 #081820}
.pslot.rar:not(.sel){box-shadow:inset 0 0 0 3px var(--rc)}
.rar{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-left:6px;text-shadow:1px 1px 0 rgba(27,42,51,.55)}
#toast[data-rar]{color:var(--rc);box-shadow:0 -3px 0 0 var(--rc),0 3px 0 0 var(--rc),-3px 0 0 0 var(--rc),3px 0 0 0 var(--rc),inset 0 3px 0 0 var(--panel-hi)}
#toast[data-rar=legendary]{font-size:22px;background:#3a2a08;color:#ffe08a}
/* the legendary catch banner: a gold pixel plaque that drops in, with a shimmer running across it */
#legend{position:fixed;left:50%;top:max(20vh,130px);transform:translateX(-50%);z-index:40;pointer-events:none;text-align:center;min-width:300px;padding:18px 28px 16px;
  background:linear-gradient(180deg,#5a3e0a,#3a2806);color:#fff6dc;overflow:hidden;
  box-shadow:0 -4px 0 0 #f5c84e,0 4px 0 0 #f5c84e,-4px 0 0 0 #f5c84e,4px 0 0 0 #f5c84e,0 -8px 0 0 #7a5410,0 8px 0 0 #7a5410,-8px 0 0 0 #7a5410,8px 0 0 0 #7a5410,0 16px 0 0 rgba(0,0,0,.35),inset 0 4px 0 0 #8a6416}
#legend.show{animation:legendIn .55s steps(6) both,legendOut .5s steps(5) 4s both}
#legend::after{content:"";position:absolute;top:0;bottom:0;width:40px;left:-60px;background:rgba(255,246,200,.35);transform:skewX(-20deg);animation:shimmer 1.4s steps(10) .5s 3}
#legend .lg-top{font-family:"Silkscreen",var(--font);font-size:22px;color:#ffe08a;letter-spacing:.06em;text-shadow:2px 2px 0 #1b1204;animation:glowPulse .6s steps(2) infinite}
#legend .lg-item{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 6px;font-size:26px}
#legend .lg-item img,#legend .lg-item svg{width:54px;height:54px;image-rendering:pixelated}
#legend .lg-item b{color:#fff6dc;text-shadow:2px 2px 0 #1b1204}
#legend .lg-sub{font-size:16px;opacity:.9}
@keyframes legendIn{0%{transform:translate(-50%,-140%) scale(.6);opacity:0}70%{transform:translate(-50%,8%) scale(1.06);opacity:1}100%{transform:translate(-50%,0) scale(1)}}
@keyframes legendOut{to{transform:translate(-50%,-30%);opacity:0}}
@keyframes shimmer{to{left:110%}}
@keyframes glowPulse{50%{color:#fffbe0}}
/* the smaller mythical banner: red frame, no shimmer, quieter title, leaves sooner */
#legend.myth{min-width:220px;padding:12px 20px 10px;background:linear-gradient(180deg,#5a1814,#3a0e0c);
  box-shadow:0 -3px 0 0 #f2524a,0 3px 0 0 #f2524a,-3px 0 0 0 #f2524a,3px 0 0 0 #f2524a,0 -6px 0 0 #7a1a14,0 6px 0 0 #7a1a14,-6px 0 0 0 #7a1a14,6px 0 0 0 #7a1a14,0 10px 0 0 rgba(0,0,0,.3),inset 0 3px 0 0 #8a2a20}
#legend.myth.show{animation:legendIn .45s steps(5) both,legendOut .4s steps(4) 2.6s both}
#legend.myth::after{display:none}
#legend.myth .lg-top{font-size:16px;color:#ff9a90;animation:none}
#legend.myth .lg-item{font-size:20px;margin:6px 0 4px;gap:10px}
#legend.myth .lg-item img,#legend.myth .lg-item svg{width:40px;height:40px}
#legend.myth .lg-sub{font-size:14px}
@media (prefers-reduced-motion:reduce){#legend.show,#legend::after,#legend .lg-top{animation:none}}
/* the coin leaderboard under the minimap, shown while friends are on the island */
.hudside{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none;position:relative}
/* (on wider screens it hangs below the minimap without widening the HUD's right column, so the top bar keeps its layout) */
#board{box-sizing:border-box;width:224px;padding:8px 8px 6px;position:absolute;top:100%;right:0;margin-top:14px}
#board .board-h{margin:0 2px 5px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
#boardList{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#boardList li{display:grid;grid-template-columns:14px 8px minmax(0,1fr) auto;align-items:center;gap:6px;padding:3px 4px;font-size:15px}
#boardList li.me{background:#2a4f60;box-shadow:inset 0 0 0 2px var(--sand)}
#boardList .rk{font-family:"Silkscreen",var(--font);font-size:12px;color:#ffe08a;text-align:center}
#boardList .rk svg{display:block;width:14px;height:11px}
#boardList .sw{width:8px;height:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
#boardList .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#boardList b{font-family:"Silkscreen",var(--font);font-weight:700;font-size:13px;color:#ffe08a;text-shadow:1px 1px 0 #081820;font-variant-numeric:tabular-nums}
@media (max-width:700px){.hudside{gap:10px}#board{position:static;margin-top:0;width:136px;padding:6px 5px 4px}#board .board-h{font-size:11px;margin-bottom:3px}
  #boardList li{grid-template-columns:12px minmax(0,1fr) auto;gap:4px;padding:2px 3px;font-size:13px}#boardList b{font-size:11px}#boardList .sw{display:none}#boardList .rk svg{width:12px;height:9px}}
/* tools and gear the player owns, after the pack's slots in the bar */
#inv .gearbox{display:flex;align-items:center;gap:6px;padding-left:10px;box-shadow:inset 3px 0 0 0 #24495b}
#inv .gear{position:relative;width:42px;height:42px;display:grid;place-items:center;background:#1e3d4c;box-shadow:inset 0 0 0 2px #24495b}
#inv .gear img.pix,#inv .gear svg{width:28px;height:28px}
#inv .gear .n{position:absolute;right:2px;bottom:0;font-family:"Silkscreen",var(--font);font-weight:700;font-size:12px;color:var(--paper);text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000}
@media (max-width:480px){#inv .gear{width:34px;height:34px}#inv .gear img.pix,#inv .gear svg{width:24px;height:24px}}
/* phones held sideways: smaller slots and gear, and the bar may use the full width, so the gear doesn't add a row */
@media (pointer:coarse) and (max-height:500px){#inv{max-width:calc(100vw - 32px);gap:5px;padding:5px 8px}#inv .slot{width:38px;height:38px}
  #inv .gearbox{gap:4px;padding-left:6px}#inv .gear{width:30px;height:30px}#inv .gear img.pix,#inv .gear svg{width:20px;height:20px}#inv .gear .n{font-size:10px}}
/* trading: what each player gives side by side, with this player's pack below */
.card.tradecard{max-width:640px;width:100%}
.tradecols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.tradecols section{min-width:0;background:#efe3bf;box-shadow:inset 0 0 0 2px rgba(27,42,51,.2);padding:8px 10px 10px}
.tradecard h2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tradecols h2{margin:0 0 6px}
.tok{font-size:12px;letter-spacing:.06em;color:#fff;background:#2f7a3a;padding:2px 6px;opacity:1}
.tlist{display:grid;gap:2px;min-height:40px;align-content:start}
.tlist .none{margin:8px 0;font-size:14px;opacity:.6}
.trow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px;align-items:center;min-height:32px}
.trow .ic{width:28px;height:28px;display:grid;place-items:center}
.trow .ic svg,.trow .ic img.pix{width:24px;height:24px}
.trow .nm{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .q{font-family:"Silkscreen",var(--font);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.tqty{display:flex;align-items:center;gap:0}
.tqty .sbtn{padding:0 6px;font-size:13px;margin:2px 2px 5px}
.tqty .q{min-width:3ch;text-align:center}
.tcoins{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-weight:600}
.tcoins .coin{width:22px;height:22px}
.tcoins b{font-family:"Silkscreen",var(--font);font-weight:700}
#tradeCoins{font:inherit;font-family:"Silkscreen",var(--font);font-size:16px;width:9ch;min-width:0;padding:4px 6px;border:0;background:#fff6dc;color:var(--ink);
  box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink),inset 2px 2px 0 0 #e6d6a8}
#tradeCoins:focus-visible{outline:3px solid var(--sand);outline-offset:3px}
#tradePack{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
#tradePack .pslot{padding:2px;cursor:pointer}
#tradePack .pslot .pn{display:none}
#tradePack .pslot .n{font-size:12px;right:3px;top:1px}
#tradePack .pslot img.pix,#tradePack .pslot svg{width:26px;height:26px}
#tradePack .pslot.used{opacity:.35;cursor:default}
#tradePeople{display:grid;gap:10px;margin:4px 0}
.tperson{display:flex;align-items:center;gap:10px;text-align:left}
.tperson .sw{width:14px;height:14px;flex:none;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
#tradeMsg{margin:0;min-height:20px;font-size:15px;font-weight:600;color:#2f7a3a}
#tradeMsg.err{color:#a8432b}
#tradeAccept:disabled{opacity:.5;cursor:default}
/* accepted: this player's side can't change until they undo it */
#tradeMain.locked #tradeMine .sbtn,#tradeMain.locked #tradePack .pslot{opacity:.4;pointer-events:none}
#tradeCoins:disabled{opacity:.6}
/* someone asking to trade: a small panel under the top bar, with its own buttons */
#tradeAsk{position:fixed;left:50%;transform:translateX(-50%);top:calc(150px + env(safe-area-inset-top,0px));z-index:45;padding:10px 14px 6px;text-align:center;pointer-events:auto;max-width:calc(100vw - 32px)}
#tradeAsk p{margin:0 0 4px;font-size:18px}
#tradeAsk .row{justify-content:center;gap:8px}
@media (max-width:620px){.tradecols{grid-template-columns:minmax(0,1fr)}#tradePack{grid-template-columns:repeat(6,minmax(0,1fr))}#tradeAsk{top:calc(290px + env(safe-area-inset-top,0px))}}
/* phones: the top bar shrinks back down so it still fits */
@media (max-width:700px){.coin{width:22px;height:22px}.chip{font-size:16px;padding:6px 10px;gap:8px}.chip .k{font-size:12px}.newbtn{font-size:16px;padding:6px 11px}.hbar{width:132px;height:24px}#mini{width:104px;height:104px;padding:4px}.chips{gap:10px}}
@media (max-width:480px){.slot{width:40px;height:40px}.hbar{width:88px;height:16px}#mini{width:88px;height:88px}}
/* ---- small screens: the whole top bar stays clear of the pack bar and the touch controls ----
   Narrow screens (480px wide or less): the chips and buttons flow round the map in the corner, and on
   underneath it at full width, a little smaller (a flex row would leave all the space under the map
   empty, and so take more rows). The pack bar's slots shrink a little too, so a starter pack and a
   tool or two still fit on one row. */
@media (max-width:480px){
  .hud{display:block}
  .hudside{float:right;margin:0 0 6px 10px;gap:8px}
  .chips{display:block;font-size:0}
  .chips>*{display:inline-flex;vertical-align:top;margin:0 8px 8px 0}
  .chip{font-size:14px;padding:5px 9px;gap:6px}
  .chip .k{font-size:11px}
  .coin{width:18px;height:18px}
  .hbar{width:72px;height:14px}
  .newbtn{font-size:14px;padding:5px 10px}
  #mini{width:80px;height:80px;padding:3px}
  #board{width:120px}
  #inv{gap:5px;padding:6px 8px}
  #inv .slot{width:36px;height:36px}
  #inv .gearbox{gap:4px;padding-left:6px}#inv .gear{width:32px;height:32px}
}
/* phones held sideways: the pack bar (and messages, which sit above it) go along the bottom between the movement pad and the
   Plant and Chop buttons (which shrink a little), instead of where they'd be on an upright phone, near
   the top; the top bar is smaller, and the coin leaderboard sits beside the map rather than under it */
@media (pointer:coarse) and (max-height:500px){
  #pad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:4px;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  #act{width:62px;height:62px;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));font-size:14px}
  #plant{width:50px;height:50px;right:max(18px,calc(6px + env(safe-area-inset-right,0px)));bottom:calc(84px + env(safe-area-inset-bottom,0px));font-size:12px}
  #inv{bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 2*max(190px,calc(178px + env(safe-area-inset-left,0px))))}
  #toast{max-width:calc(100vw - 2*max(190px,calc(178px + env(safe-area-inset-left,0px))))}
  .hud{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:calc(8px + env(safe-area-inset-top,0px))}
  .chips{gap:8px}
  .chip{font-size:14px;padding:5px 9px;gap:6px}
  .chip .k{font-size:11px}
  .coin{width:18px;height:18px}
  .hbar{width:72px;height:14px}
  .newbtn{font-size:14px;padding:5px 10px}
  #mini{width:80px;height:80px;padding:3px}
  .hudside{flex-direction:row-reverse;align-items:flex-start;gap:10px}
  #board{position:static;margin-top:0;width:136px;padding:6px 5px 4px}
}
/* what goes over what: on the smallest screens, with a big pack and friends visiting, the top bar and
   the pack bar can meet, so the top bar's buttons stay on top (everything in the pack is also under
   the Pack button); messages go over both, and the windows (shop, pack, trade...) over everything */
#inv{z-index:1}
.hud{z-index:2}
#toast{z-index:3}
.overlay{z-index:10}