/* SUMMERLAND - interface
   Palette lifted from the reference stills: cream paper #FDF8E8, warm brown ink
   #5E5142, sky #BFE9FB. Every glyph is inline SVG, never an emoji. */

:root{
  --cream:#FDF8E8;
  --cream-2:#F6EFDA;
  --ink:#5E5142;
  --ink-soft:#8B8078;
  --sky:#BFE9FB;
  --sea:#5FB6DC;
  --sun:#FFD98A;
  --coral:#E0765A;
  --good:#7FC08C;
  --bad:#E06A62;
  --shadow:0 3px 0 rgba(120,100,72,.16), 0 8px 18px rgba(120,100,72,.14);
  --shadow-lift:0 4px 0 rgba(120,100,72,.18), 0 14px 30px rgba(120,100,72,.20);
  --font:'Quicksand', ui-rounded, 'Varela Round', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#BFE9FB}
body{
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}
button{font-family:var(--font);cursor:pointer;border:0;background:none;color:inherit}

/* ---------------------------------------------------------- boot */
.boot{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:linear-gradient(180deg,#7FC8EC 0%, #BFE9FB 52%, #F0E6BE 100%);
  transition:opacity .8s ease}
.boot.out{opacity:0;pointer-events:none}
.boot-inner{text-align:center;transform:translateY(-6vh)}
.boot-title{font-size:clamp(34px,7vw,64px);font-weight:700;letter-spacing:.16em;color:var(--cream);
  text-shadow:0 3px 0 rgba(120,100,72,.18), 0 12px 26px rgba(90,110,120,.28)}
.boot-sub{margin-top:10px;font-size:15px;font-weight:500;color:#F3EBD5;opacity:.92;letter-spacing:.03em}
.boot-bar{margin:26px auto 0;width:min(260px,60vw);height:8px;border-radius:99px;background:rgba(253,248,232,.34);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0%;border-radius:99px;background:var(--cream);transition:width .3s ease}
.boot-step{margin-top:12px;font-size:12.5px;font-weight:500;color:#F7F0DC;opacity:.8;letter-spacing:.05em}

/* ---------------------------------------------------------- start */
.start{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(94,81,66,.20);backdrop-filter:blur(3px);animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.start-panel{width:min(520px,92vw);padding:34px 34px 26px;border-radius:22px;background:var(--cream);
  box-shadow:var(--shadow-lift);text-align:center}
.start-title{font-size:34px;font-weight:700;letter-spacing:.14em;color:var(--ink)}
.start-body{margin:14px 0 18px;font-size:15px;line-height:1.62;font-weight:500;color:var(--ink-soft)}
.start-keys{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:22px}
.start-keys span{font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--cream-2);
  padding:6px 11px;border-radius:9px}
.start-keys b{color:var(--ink)}
.btn-primary{display:inline-block;padding:13px 30px;border-radius:13px;font-size:15.5px;font-weight:700;
  letter-spacing:.02em;color:var(--cream);background:var(--sea);
  box-shadow:0 3px 0 #3F94BA, 0 10px 20px rgba(63,148,186,.32);transition:transform .12s ease, box-shadow .12s ease}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 #3F94BA, 0 14px 24px rgba(63,148,186,.34)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 #3F94BA, 0 6px 12px rgba(63,148,186,.3)}
.start-foot{margin-top:16px;font-size:11.5px;font-weight:500;color:#B6AB9C}

/* ---------------------------------------------------------- hud */
.hud{position:fixed;inset:0;z-index:40;pointer-events:none;user-select:none}
.hud.photo{opacity:0}

.hud-topright{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.chip{width:44px;height:44px;border-radius:10px;background:var(--cream);box-shadow:var(--shadow);
  display:grid;place-items:center;pointer-events:auto;transition:transform .12s ease}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:translateY(1px)}
.chip .glyph{width:23px;height:23px;fill:#7C7167;stroke:#7C7167}
.chip .glyph .accent{fill:#A98FD0}
.chip .glyph .lines{stroke:#BDB2A6}
.chip .glyph .knockout{fill:var(--cream);stroke:none}
.chip.off .glyph{fill:#C9BFB2;stroke:#C9BFB2}
.chip.off .glyph .wave1,.chip.off .glyph .wave2{opacity:.25}
.counter{margin-top:2px;font-size:26px;font-weight:600;color:var(--cream);letter-spacing:.02em;
  text-shadow:0 2px 0 rgba(120,100,72,.20), 0 6px 14px rgba(90,110,120,.24)}

.hud-topleft{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.wallet,.clockchip{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 11px;border-radius:10px;
  background:var(--cream);box-shadow:var(--shadow);font-size:15px;font-weight:700;color:var(--ink)}
.clockchip{font-size:12.5px;font-weight:600;color:var(--ink-soft);height:32px;padding:0 12px 0 9px}
.wallet .coin{width:19px;height:19px;fill:var(--sun)}
.wallet .coin .coin-in{fill:#F2C165}
.clockchip .sunglyph{width:16px;height:16px;fill:#E8B75F;stroke:#E8B75F}

/* ---------------------------------------------------------- cast + fight */
.castwrap{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);text-align:center}
.castbar{position:relative;width:min(320px,64vw);height:16px;border-radius:99px;background:var(--cream);
  box-shadow:var(--shadow);overflow:hidden}
.castbar i{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#8FD3A0,#F2CE72 62%,#E0765A);transition:width .04s linear}
.castbar b{position:absolute;top:0;bottom:0;width:2px;background:rgba(94,81,66,.28)}
.casthint{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--cream);letter-spacing:.04em;
  text-shadow:0 2px 6px rgba(90,110,120,.4)}

.fightwrap{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);width:min(380px,76vw)}
.fightrow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.flabel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
  width:34px;text-align:right;text-shadow:0 2px 6px rgba(90,110,120,.45)}
.tension,.progress{position:relative;flex:1;height:15px;border-radius:99px;background:var(--cream);
  box-shadow:var(--shadow);overflow:hidden}
.tension i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--good);border-radius:99px}
.tension i.warn{background:#EFC060}
.tension i.danger{background:var(--bad)}
.tension b{position:absolute;top:0;bottom:0;background:rgba(127,192,140,.30);pointer-events:none}
.tension s{position:absolute;top:-2px;bottom:-2px;width:3px;background:var(--ink);opacity:.5;border-radius:2px}
.progress i{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#7FC8EC,#5FB6DC);border-radius:99px}
.fighthint{text-align:center;font-size:12.5px;font-weight:600;color:var(--cream);letter-spacing:.03em;
  text-shadow:0 2px 6px rgba(90,110,120,.4)}

.strike{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:76px;font-weight:700;
  color:var(--cream);text-shadow:0 4px 0 rgba(224,118,90,.85), 0 10px 26px rgba(90,110,120,.4);
  animation:pop .34s cubic-bezier(.2,1.5,.4,1) infinite alternate}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.9)}to{transform:translate(-50%,-50%) scale(1.12)}}

.prompt{position:absolute;left:50%;bottom:128px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;
  padding:8px 15px 8px 9px;border-radius:11px;background:var(--cream);box-shadow:var(--shadow);
  font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.prompt b{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--cream-2);
  color:var(--ink);font-size:12.5px;font-weight:700}

/* ---------------------------------------------------------- toasts */
.toast-stack{position:absolute;left:50%;top:82px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px}
.toast{padding:9px 17px;border-radius:11px;background:var(--cream);box-shadow:var(--shadow);
  font-size:13.5px;font-weight:600;color:var(--ink-soft);animation:toastin .3s ease;white-space:nowrap}
.toast.out{opacity:0;transform:translateY(-8px);transition:all .35s ease}
@keyframes toastin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------- dialogue */
.dialogue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);width:min(540px,88vw);
  padding:20px 26px 22px;border-radius:14px;background:var(--cream);box-shadow:var(--shadow-lift);
  pointer-events:auto;animation:dup .28s cubic-bezier(.2,.9,.3,1)}
@keyframes dup{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.dname{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#BDAF9C;margin-bottom:6px}
.dtext{font-size:16px;line-height:1.55;font-weight:500;color:var(--ink-soft)}
.dclose{position:absolute;top:-9px;right:-9px;width:30px;height:30px;border-radius:9px;background:var(--cream);
  box-shadow:var(--shadow);display:grid;place-items:center;pointer-events:auto}
.dclose svg{width:15px;height:15px;stroke:#9C9084}

/* ---------------------------------------------------------- catch card */
.catch{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(94,81,66,.22);
  backdrop-filter:blur(2px);animation:fade .3s ease}
.catch-card{position:relative;width:min(420px,92vw);padding:26px 26px 24px;border-radius:20px;background:var(--cream);
  box-shadow:var(--shadow-lift);text-align:center;animation:cardin .42s cubic-bezier(.2,1.3,.35,1)}
@keyframes cardin{from{opacity:0;transform:scale(.86) translateY(18px)}to{opacity:1;transform:none}}
.catch-ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:6px 18px;border-radius:9px;
  background:var(--coral);color:var(--cream);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;box-shadow:0 3px 0 rgba(160,80,60,.35)}
.catch-ribbon.rare{background:#8E6FD0;box-shadow:0 3px 0 rgba(96,72,160,.35)}
.catch-ribbon.legend{background:#E0A93F;box-shadow:0 3px 0 rgba(170,124,40,.4)}
#catchArt{width:100%;height:auto;display:block;margin:6px 0 2px}
.catch-name{font-size:24px;font-weight:700;color:var(--ink)}
.catch-rarity{display:flex;gap:5px;justify-content:center;margin:8px 0 14px}
.catch-rarity i{width:7px;height:7px;border-radius:99px;background:#E2D8C2}
.catch-rarity i.on{background:var(--sun)}
.catch-stats{display:flex;justify-content:center;gap:22px;margin-bottom:14px}
/* The number and its unit sit on one baseline. The previous version pulled the
   unit back with a negative margin, which collided as soon as a value grew to
   four digits. */
.catch-stats div{display:flex;flex-direction:column;align-items:center;min-width:74px}
.catch-stats span{font-size:22px;font-weight:700;color:var(--ink);line-height:1.05}
.catch-stats em{font-style:normal;font-size:11px;font-weight:700;color:#C0B5A6;margin-left:2px}
.catch-stats i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#C0B5A6;margin-top:6px}
.catch-note{font-size:13px;line-height:1.5;font-weight:500;color:var(--ink-soft);margin-bottom:18px;min-height:19px}

/* ---------------------------------------------------------- sheets */
.sheet{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(94,81,66,.22);
  backdrop-filter:blur(2px);animation:fade .25s ease;padding:20px}
.sheet-card{position:relative;width:min(720px,94vw);max-height:86vh;overflow-y:auto;padding:26px 28px 26px;
  border-radius:20px;background:var(--cream);box-shadow:var(--shadow-lift)}
.sheet-card.narrow{width:min(520px,94vw)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.sheet-title{font-size:23px;font-weight:700;color:var(--ink)}
.sheet-head .dclose{position:static;box-shadow:none;background:var(--cream-2)}
.sheet-sub{font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:16px}
.sheet-foot{margin:16px 0 0;font-size:12px;color:#BDB2A6}
.jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:11px}
.jcard{padding:11px;border-radius:13px;background:var(--cream-2);text-align:center}
.jcard canvas{width:100%;height:auto;display:block;border-radius:9px}
.jcard.locked canvas{filter:grayscale(1) brightness(.86) opacity(.5)}
.jname{margin-top:7px;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25}
.jcard.locked .jname{color:#BDB2A6}
.jmeta{font-size:10.5px;font-weight:600;color:#BDB2A6;margin-top:3px}
.infolist{margin:6px 0 0;padding-left:20px}
.infolist li{font-size:14px;line-height:1.7;font-weight:500;color:var(--ink-soft);margin-bottom:3px}
.infolist b{color:var(--ink);font-weight:700}
.shoprows{display:flex;flex-direction:column;gap:10px}
.srow{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:14px;background:var(--cream-2)}
.srow .sicon{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--cream);display:grid;place-items:center}
.srow .sicon svg{width:23px;height:23px;fill:#9C9084}
.srow .sbody{flex:1;min-width:0}
.srow .stitle{font-size:14.5px;font-weight:700;color:var(--ink)}
.srow .sdesc{font-size:12px;font-weight:500;color:var(--ink-soft);margin-top:2px}
.srow .sbuy{padding:9px 16px;border-radius:10px;font-size:13px;font-weight:700;color:var(--cream);background:var(--sea);
  box-shadow:0 2px 0 #3F94BA;white-space:nowrap}
.srow .sbuy[disabled]{background:#DCD3C2;color:#B0A594;box-shadow:none;cursor:default}
.srow.owned .sbuy{background:var(--good);box-shadow:0 2px 0 #5FA070}

@media (max-width:640px){
  .hud-topright{top:12px;right:12px;gap:8px}
  .chip{width:40px;height:40px}
  .counter{font-size:22px}
  .hud-topleft{top:12px;left:12px}
  .catch-stats{gap:14px}
  .dialogue{bottom:20px;padding:16px 20px 18px}
  .dtext{font-size:14.5px}
}

/* ---------------------------------------------------------- rank + points */
.rankchip{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:10px;
  background:var(--cream);box-shadow:var(--shadow);font-size:12.5px;font-weight:700;color:var(--ink)}
.rankchip .rankglyph{width:16px;height:16px;fill:#E0A93F}
.rankchip .rankbar{position:relative;display:block;width:52px;height:5px;border-radius:99px;
  background:#E6DCC6;overflow:hidden}
.rankchip .rankbar b{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:99px;background:#E0A93F}
.points{font-size:13px;font-weight:700;color:var(--cream);letter-spacing:.03em;
  text-shadow:0 2px 0 rgba(120,100,72,.20), 0 6px 14px rgba(90,110,120,.24)}
.catch-points{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:2px 0 10px}
.catch-points span{font-size:34px;font-weight:700;color:#E0A93F;line-height:1}
.catch-points i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:#C0B5A6}
.catch-bonus{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px;min-height:0}
.catch-bonus span{font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px;
  background:var(--cream-2);color:#9A8E7C}
.catch-bonus span.hot{background:#F6E3D2;color:#C06A44}
.jcard .jtier{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-top:3px}
.srow.locked{opacity:.55}
.srow .slock{font-size:11px;font-weight:700;color:#B0A594;white-space:nowrap;padding:9px 4px}
.tierrow{display:flex;align-items:center;gap:8px;margin:18px 0 8px}
.tierrow b{font-size:12px;font-weight:700;letter-spacing:.10em;text-transform:uppercase}
.tierrow i{flex:1;height:1px;background:#E6DCC6}
.tierrow em{font-style:normal;font-size:11px;font-weight:600;color:#BDB2A6}

/* ============================================================== landing */
/* The 3D beach keeps running behind this. Blur and lift it so it reads as a
   backdrop rather than as a game you are being kept out of. */
body.landing-on canvas#scene{
  filter:blur(7px) saturate(1.06) brightness(1.04);
  transform:scale(1.05);
  transition:filter .9s ease, transform 1.2s ease;
}
body.landing-off canvas#scene{filter:none;transform:none;transition:filter .8s ease, transform 1s ease}

.landing{position:fixed;inset:0;z-index:78;display:grid;place-items:center;padding:24px;
  animation:fade .6s ease;overflow-y:auto}
.landing.out{opacity:0;pointer-events:none;transition:opacity .55s ease}
.landing-veil{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(253,248,232,.10), rgba(253,248,232,0) 60%),
    linear-gradient(180deg, rgba(38,60,72,.30) 0%, rgba(38,60,72,.14) 38%, rgba(94,81,66,.34) 100%);}
.landing-inner{position:relative;width:min(620px,100%);text-align:center;color:var(--cream);
  padding:8px 0 12px}

.brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:26px}
.brandmark{width:44px;height:44px;filter:drop-shadow(0 4px 10px rgba(40,60,70,.35))}
.brand-name{font-size:19px;font-weight:700;letter-spacing:.28em;color:var(--cream);
  text-shadow:0 2px 10px rgba(40,60,70,.45)}

.landing-title{margin:0 0 16px;font-size:clamp(30px,6vw,50px);line-height:1.14;font-weight:700;
  letter-spacing:-.01em;color:var(--cream);text-shadow:0 3px 0 rgba(70,90,100,.18), 0 14px 34px rgba(40,60,70,.42)}
.landing-sub{margin:0 auto 30px;max-width:460px;font-size:15.5px;line-height:1.66;font-weight:500;
  color:#F4F1E6;opacity:.94;text-shadow:0 2px 12px rgba(40,60,70,.5)}

.cta{position:relative;display:inline-block;width:min(430px,100%)}
.btn-play{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:17px 28px;border-radius:15px;font-size:17px;font-weight:700;letter-spacing:.01em;
  color:var(--cream);background:var(--sea);
  box-shadow:0 4px 0 #3F94BA, 0 16px 34px rgba(30,70,90,.38);
  transition:transform .14s ease, box-shadow .14s ease}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 6px 0 #3F94BA, 0 22px 42px rgba(30,70,90,.42)}
.btn-play:active{transform:translateY(2px);box-shadow:0 2px 0 #3F94BA, 0 10px 20px rgba(30,70,90,.36)}
.btn-play .chev{width:19px;height:19px;stroke:var(--cream);transition:transform .22s ease}
.btn-play.open .chev{transform:rotate(180deg)}

.cta-menu{position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:3;
  display:flex;flex-direction:column;gap:9px;padding:9px;border-radius:17px;
  background:var(--cream);box-shadow:var(--shadow-lift);
  animation:menuin .24s cubic-bezier(.2,.9,.3,1);text-align:left}
@keyframes menuin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cta-opt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:14px;border-radius:12px;
  background:transparent;transition:background .14s ease}
.cta-opt:hover{background:var(--cream-2)}
.cta-opt:disabled{opacity:.5;cursor:default}
.cta-opt .opt-icon{flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:var(--cream-2);
  display:grid;place-items:center}
.cta-opt .opt-icon svg{width:21px;height:21px;fill:none;stroke:#8A7F72}
.cta-opt .opt-icon svg rect{fill:none;stroke:#8A7F72;stroke-width:1.8}
.cta-opt .opt-icon svg .dot{fill:#8A7F72;stroke:none}
.cta-opt .opt-body{flex:1;min-width:0;display:block}
.cta-opt .opt-body b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.cta-opt .opt-body i{display:block;font-style:normal;font-size:12px;line-height:1.5;font-weight:500;
  color:var(--ink-soft)}
.cta-opt .opt-tag{flex:0 0 auto;align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 9px;border-radius:7px;background:var(--cream-2);color:#A99C8B;
  white-space:nowrap}
.cta-opt .opt-tag.gold{background:#F7E8C6;color:#B08333}
.cta-opt .opt-tag.spent{background:#F2DAD6;color:#B5675C}

.landing-feats{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:78px 0 0}
.landing-feats span{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:#EFEADC;
  background:rgba(253,248,232,.16);padding:7px 13px;border-radius:9px;backdrop-filter:blur(4px)}
.landing-feats b{font-weight:700;color:var(--cream)}
.landing-foot{margin-top:16px;font-size:12px;font-weight:500;color:#EDE7D8;opacity:.75;
  text-shadow:0 2px 8px rgba(40,60,70,.45)}
.cta-menu.hidden + .landing-feats{margin-top:26px}

/* demo clock in the HUD */
.demochip{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 9px;border-radius:10px;
  background:var(--cream);box-shadow:var(--shadow);font-size:12.5px;font-weight:700;color:var(--ink)}
.demochip .demoglyph{width:15px;height:15px;fill:none;stroke:#8A7F72}
.demochip.low{background:#F7E3DE}
.demochip.low .demoglyph{stroke:#C0604F}
.demochip.low span{color:#B5544A}

@media (max-width:640px){
  .landing-inner{width:100%}
  .landing-feats{margin-top:56px}
  .cta-opt .opt-tag{display:none}
}
.catch-stats div > b{display:flex;align-items:baseline;justify-content:center;gap:1px;font-weight:700}

/* ------------------------------------------------------------ mode chip */
/* Two glyphs stacked in one chip; the class on the button picks which shows. */
.chip.mode{position:relative}
.chip.mode .glyph{position:absolute;transition:opacity .18s ease, transform .18s ease}
.chip.mode .g-rod{opacity:0;transform:scale(.8) rotate(-12deg)}
.chip.mode .g-eye{opacity:1;transform:none}
.chip.mode.fishing .g-rod{opacity:1;transform:none}
.chip.mode.fishing .g-eye{opacity:0;transform:scale(.8) rotate(12deg)}
.chip.mode .glyph .solid{fill:#7C7167;stroke:none}
.chip.mode.fishing{background:#EAF4EC}
.chip.mode.fishing .glyph{fill:none;stroke:#4E8C63}
.chip.mode.fishing .glyph .solid{fill:#4E8C63}
.chip.mode .glyph{fill:none;stroke:#7C7167}
.modehint{position:absolute;top:100%;right:0;margin-top:6px;padding:5px 10px;border-radius:8px;
  background:var(--cream);box-shadow:var(--shadow);font-size:11px;font-weight:700;color:var(--ink-soft);
  white-space:nowrap;opacity:0;transform:translateY(-4px);transition:all .2s ease;pointer-events:none}
.chip.mode:hover .modehint{opacity:1;transform:none}

/* ------------------------------------------------------------- board */
.boardrows{display:flex;flex-direction:column;gap:6px}
.brow{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;background:var(--cream-2)}
.brow.mine{background:#EDF3E9;box-shadow:inset 0 0 0 1.5px #BBD3B4}
.brow .bpos{flex:0 0 26px;font-size:13px;font-weight:700;color:#B9AE9C;text-align:center}
.brow.top .bpos{color:#D9A43B}
.brow .bwho{flex:1;min-width:0}
.brow .bname{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .bfish{font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-top:1px}
.brow .bsize{flex:0 0 auto;font-size:12px;font-weight:600;color:#B0A594;text-align:right}
.brow .bpts{flex:0 0 auto;min-width:62px;text-align:right;font-size:16px;font-weight:700;color:#D9A43B}
.boardempty{padding:26px 8px;text-align:center;font-size:13.5px;font-weight:500;color:var(--ink-soft);line-height:1.6}

/* --------------------------------------------------------- name field */
.namefield{width:min(430px,100%);margin:0 auto 16px;text-align:left}
.namefield label{display:block;margin:0 0 7px 2px;font-size:12.5px;font-weight:600;
  color:#EDE7D8;opacity:.9;text-shadow:0 2px 8px rgba(40,60,70,.45)}
.nameinput-wrap{display:flex;gap:8px}
.nameinput-wrap input{flex:1;min-width:0;height:50px;padding:0 16px;border:0;border-radius:13px;
  background:var(--cream);color:var(--ink);font-family:var(--font);font-size:16px;font-weight:700;
  box-shadow:var(--shadow);outline:none;transition:box-shadow .16s ease}
.nameinput-wrap input::placeholder{color:#C3B8A8;font-weight:600}
.nameinput-wrap input:focus{box-shadow:var(--shadow), 0 0 0 3px rgba(95,182,220,.5)}
.nameinput-wrap input.bad{box-shadow:var(--shadow), 0 0 0 3px rgba(224,106,98,.55)}
#nameDice{flex:0 0 50px;width:50px;height:50px;border-radius:13px;background:var(--cream);
  box-shadow:var(--shadow);display:grid;place-items:center;transition:transform .14s ease}
#nameDice:hover{transform:translateY(-1px) rotate(-8deg)}
#nameDice:active{transform:translateY(1px)}
#nameDice svg{width:22px;height:22px;fill:#9C9084;stroke:#9C9084}
@media (max-width:640px){ .namefield{width:100%} }