/* ============================================================
   BUBBLE: the look. A sunset gradient (pink, coral, mango) over frosted plum
   glass, big radii, glossy highlights, warm glows, springy motion. Loaded
   last and only restyles; layout and phone sizing stay with the files before
   it (responsive.css above all). Animations stand down under reduced motion.
   ============================================================ */
/* Fonts shipped, not fetched (offline, no layout jump): Fredoka for glances,
   Nunito for reading. Variable, Latin subset, SIL OFL 1.1 (art/fonts/). */
@font-face{font-family:"Fredoka";src:url("../art/fonts/fredoka.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../art/fonts/nunito.woff2") format("woff2");
  font-weight:200 1000;font-style:normal;font-display:swap}
:root{
  /* Palette. The old names are kept, pointed at new values, so every file
     that says var(--brand) is already in the new look. */
  --ink:#1b0e2c;
  --ink2:#241237;
  --panel:#2e1747;
  --panel2:#3a1d58;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);
  --text:#fff5ee;
  --dim:#d9b8d6;
  --brand:#ff4f9a;          /* hot pink */
  --coral:#ff7a59;
  --hold:#ffb938;           /* mango */
  --aqua:#3ee6d1;           /* lagoon */
  --good:#46e3a8;
  --bad:#ff5a6e;
  --purple:#c79bff;

  --hot:linear-gradient(135deg,#ff4f9a 0%,#ff7a59 55%,#ffb938 100%);
  --hot-soft:linear-gradient(135deg,rgba(255,79,154,.22),rgba(255,122,89,.18) 55%,rgba(255,185,56,.14));
  --lagoon:linear-gradient(135deg,#3ee6d1,#7aa7ff);
  --glass:linear-gradient(160deg,rgba(72,32,104,.78),rgba(38,17,60,.86));
  --glass-lite:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  --gloss:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.25);
  --lift:0 18px 40px -18px rgba(12,2,24,.85),0 2px 0 rgba(255,255,255,.02);
  --glow-pink:0 10px 30px -8px rgba(255,79,154,.65);
  --glow-aqua:0 0 0 3px rgba(62,230,209,.55),0 0 18px rgba(62,230,209,.45);

  --radius:22px; --r-md:16px; --r-sm:12px; --pill:999px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.22,1,.36,1);

  /* Colour emoji straight after the text faces, which have none: further
     down the stack a system font with flat outline emoji gets there first. */
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color";
  --display:"Fredoka",var(--emoji),ui-rounded,"SF Pro Rounded","Trebuchet MS","Segoe UI",sans-serif;
  --ui:"Nunito",var(--emoji),ui-rounded,"Segoe UI",system-ui,sans-serif;
  /* The old terminal face was on every label in the game. It is the rounded
     display face now, which is most of the "office intranet" gone in one line. */
  --mono:var(--display);
}
body{font-family:var(--ui);background:var(--ink);font-variant-numeric:tabular-nums}
::selection{background:rgba(255,79,154,.45)}

/* ---------- focus: one ring, everywhere, visible on anything ---------- */
:where(button,[tabindex],a,input,select,.choice,.tab,.chip,.item):focus-visible{
  outline:none!important;box-shadow:var(--glow-aqua)!important;border-radius:var(--pill)}
.item:focus-visible,.choice:focus-visible{border-radius:var(--r-md)}

/* ---------- scrollbars ---------- */
.scroll,.pn-body,.cm-list,.cm-read,.tk-list{scrollbar-color:rgba(255,79,154,.55) transparent}
.scroll::-webkit-scrollbar,.pn-body::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb,.pn-body::-webkit-scrollbar-thumb{background:var(--hot);border-radius:99px}

/* ---------- surfaces: every modal card ---------- */
.sign{
  isolation:isolate;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.14);border-radius:28px;
  box-shadow:0 40px 90px -30px rgba(8,0,18,.9),0 0 0 1px rgba(255,79,154,.10),var(--gloss);
  overflow:hidden}
/* The accent: a thin glowing line along the top edge. Other screens colour
   it — the bar tints it by channel — so it keeps the old strip's job. */
.sign::before{content:"";position:absolute;top:0;left:28px;right:28px;height:3px;border-radius:0 0 3px 3px;
  background:var(--hot);opacity:.9;box-shadow:0 0 14px rgba(255,79,154,.7);z-index:1;pointer-events:none}
/* The gloss: a soft light across the top of every bubble. */
.sign::after{content:"";position:absolute;inset:0 0 auto 0;height:120px;left:0;right:0;top:0;
  background:radial-gradient(120% 90% at 20% -30%,rgba(255,255,255,.16),transparent 60%),
             radial-gradient(80% 70% at 100% -20%,rgba(255,79,154,.20),transparent 70%);
  opacity:1;pointer-events:none;border-radius:inherit;z-index:-1}
.sign-title{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em;
  text-transform:none;color:var(--text);border-bottom:1px solid var(--line-soft);padding:14px 18px;position:relative}
.sign-title>span:first-child{background:var(--hot);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:700;font-size:17px}
.badge{font-family:var(--display);font-weight:600;letter-spacing:.06em;border-radius:var(--pill);
  border:0;background:var(--hot-soft);color:var(--hold);padding:4px 10px;box-shadow:var(--gloss)}

/* Modals pop in like a bubble surfacing. */
#panel.on .pn,#inbox.on .cm,#combat.on .cb,#arcade.on .mg,#ending.on .rep,.screen.on .sign{
  animation:bubbleIn .42s var(--spring) both}
@keyframes bubbleIn{0%{opacity:0;transform:translateY(18px) scale(.94)}100%{opacity:1;transform:none}}
#panel,#inbox,#combat,#arcade{background:radial-gradient(120% 90% at 50% 100%,rgba(255,79,154,.16),rgba(12,4,24,.62) 60%)!important;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;font-family:var(--display);font-weight:600;letter-spacing:.01em;
  border-radius:var(--pill);padding:11px 20px;border:1px solid rgba(255,255,255,.16);
  background:var(--glass-lite);color:var(--text);box-shadow:var(--gloss),0 8px 18px -12px rgba(0,0,0,.7);
  transition:transform .25s var(--spring),box-shadow .2s,background .2s,border-color .2s,filter .2s}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,79,154,.6);
  background:linear-gradient(160deg,rgba(255,79,154,.22),rgba(255,255,255,.06));box-shadow:var(--gloss),var(--glow-pink)}
.btn:active{transform:translateY(0) scale(.95);transition-duration:.08s}
.btn.primary,.btn.primary:hover{background:var(--hot);border-color:transparent;color:#fff;
  text-shadow:0 1px 0 rgba(120,0,50,.35);box-shadow:var(--gloss),var(--glow-pink)}
.btn.primary:hover{filter:brightness(1.07) saturate(1.1)}
/* The gloss on a button: a highlight across its top half. */
.btn::after{content:"";position:absolute;left:8%;right:8%;top:1px;height:46%;border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));pointer-events:none;opacity:.55}
.btn.small{padding:7px 14px;font-size:13px}
.btn:disabled,.btn:disabled:hover{opacity:.45;transform:none;filter:grayscale(.4);box-shadow:none;
  background:var(--glass-lite);border-color:var(--line)}
.kbd{font-family:var(--display);font-weight:700;font-size:11px;color:#fff;background:var(--hot);
  border:0;border-radius:8px;padding:2px 7px;box-shadow:0 2px 0 rgba(120,20,60,.8),var(--gloss)}

/* ---------- HUD corners ---------- */
.hud .card{background:var(--glass);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:var(--lift),var(--gloss)}
/* Emoji first, in their own colour fonts: a rounded text face in front of
   them lets some systems draw an emoji as a flat outline. */
.who-face,.dlg-face,.chip-e,.a-e,.kh-i,.tab-i,.item .ie,.mf,.fe,.cb-face{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color",sans-serif!important}
.who-face{border-radius:50%!important;background:radial-gradient(circle at 50% 35%,rgba(255,79,154,.45),rgba(255,122,89,.18))!important;
  border:0!important;box-shadow:0 0 0 2px rgba(255,255,255,.45),var(--glow-pink)!important;
  animation:facePulse 4s ease-in-out infinite}
@keyframes facePulse{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.5),0 6px 18px -6px rgba(255,79,154,.6)}
  50%{box-shadow:0 0 0 2px rgba(255,255,255,.7),0 8px 26px -4px rgba(255,79,154,.9)}}
.who-name{font-family:var(--display);font-weight:700;letter-spacing:.02em}
.who-rank{font-family:var(--display);font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--hold)}
.bar{height:11px;background:rgba(10,2,20,.55);border:0;border-radius:var(--pill);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.bar>i{border-radius:var(--pill);position:relative;transition:width .6s var(--spring)!important;overflow:hidden}
/* Gloss and a slow shine on every meter. */
.bar>i::before{content:"";position:absolute;left:3px;right:3px;top:1px;height:45%;border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.bar>i::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 5.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
#bPat{background:linear-gradient(90deg,#ff4f9a,#ff7a8a)!important}
#bEne{background:linear-gradient(90deg,#ff9a3c,#ffd166)!important}
#bFood{background:linear-gradient(90deg,#2fd89c,#b8f06a)!important}
#bXp{background:linear-gradient(90deg,#7aa7ff,#c79bff,#ff8fd0)!important}
.bar-row{font-family:var(--display);font-weight:600}
.bar-row .val{color:var(--text)}
.bar-row.bump .val,.money-row.bump b{animation:bump .5s var(--spring)}
.bar-row.bump .lbl{animation:bump .5s var(--spring)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.clock{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(255,79,154,.45)}
.clock small{font-family:var(--display);font-weight:600;letter-spacing:.12em;color:var(--dim)}
.money-row{font-family:var(--display);font-weight:600}
.money-row b{color:var(--hold);display:inline-block}
.sky,.queue{font-family:var(--display);font-weight:600}
.qdot{background:var(--hold)!important;animation:dotPulse 1.4s ease-in-out infinite!important}
.queue.written .qdot{background:var(--brand)!important}
@keyframes dotPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,185,56,.7)}50%{transform:scale(1.25);box-shadow:0 0 0 6px rgba(255,185,56,0)}}

/* The jobs tracker. */
.tk-head{font-family:var(--display);font-weight:700;letter-spacing:.04em;border-bottom:1px solid var(--line-soft)}
.tk-lbl{background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.tk-b{border-radius:50%!important;border:1px solid var(--line)!important;background:var(--glass-lite)!important;
  transition:transform .25s var(--spring)}
.tk-b:hover{transform:scale(1.12)}
.tk-q{border-radius:var(--r-sm)!important}
.tk-q.on{background:rgba(70,227,168,.12)!important;border-color:rgba(70,227,168,.5)!important}
.tk-pin{border-radius:10px!important}
.tk-nm b{font-family:var(--display);font-weight:600}

/* The minimap, framed as a little porthole. */
#minimapBtn{border-radius:20px!important;overflow:hidden;border:2px solid rgba(255,255,255,.22)!important;
  box-shadow:var(--lift),0 0 0 3px rgba(255,79,154,.18)!important;transition:transform .3s var(--spring)}
#minimapBtn:hover{transform:scale(1.04) rotate(-1deg)}

/* ---------- the prompt: what E does ----------
   A small glass tag over the thing E reaches, with a tail pointing down at it.
   #prompt is only the point it hangs from (Interact.place() moves it every
   frame); .pr is the tag, so its pop-in never fights the move. */
#prompt{position:absolute;left:0;top:0;z-index:2;pointer-events:none;will-change:transform;
  visibility:hidden;opacity:0;transition:opacity .14s,visibility 0s .14s}
#prompt.on{visibility:visible;opacity:1;transition:opacity .14s}
#prompt .pr{position:absolute;left:0;bottom:7px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  white-space:nowrap;padding:4px 11px 4px 4px;border-radius:999px;
  font:600 12.5px/1.2 var(--display);color:#fff;letter-spacing:.01em;
  background:rgba(14,12,26,.82);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
#prompt .pr::after{content:'';position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;
  background:inherit;border:inherit;border-top:0;border-left:0;transform:rotate(45deg);border-radius:0 0 2px 0}
#prompt.on .pr{animation:prPop .22s var(--spring) both}
#prompt .kbd{min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-size:10.5px;line-height:1}
#prompt.urgent .pr{border-color:rgba(255,200,110,.7);color:#ffe7b0}
@keyframes prPop{from{opacity:0;transform:translateX(-50%) translateY(4px) scale(.92)}to{opacity:1;transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){#prompt.on .pr{animation:none}}

/* ---------- the dock (desktop key hints) ----------
   One row of round buttons: icon, key badge, name as tooltip. engine/juice.js
   reads key and name off each button's text. */
#keyhints.dock{flex-wrap:nowrap;gap:6px;padding:6px 8px;border-radius:var(--pill);
  background:var(--glass);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--lift),var(--gloss)}
#keyhints.dock button{position:relative;width:42px;height:42px;padding:0;justify-content:center;
  border-radius:50%!important;font-size:0!important;border:1px solid rgba(255,255,255,.12)!important;
  background:var(--glass-lite)!important;transition:transform .3s var(--spring),background .2s,box-shadow .2s}
#keyhints.dock .kh-i{font-size:19px!important;opacity:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
#keyhints.dock button::after{content:attr(data-key);position:absolute;right:-3px;bottom:-3px;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;font:700 10px/17px var(--display);color:#fff;background:var(--hot);
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
#keyhints.dock button::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,6px) scale(.9);opacity:0;pointer-events:none;white-space:nowrap;
  font:600 12px var(--display);color:#fff;padding:6px 11px;border-radius:var(--pill);background:var(--hot);
  box-shadow:var(--glow-pink);transition:opacity .15s,transform .25s var(--spring)}
#keyhints.dock button:hover{transform:translateY(-6px) scale(1.12);background:var(--hot-soft)!important;box-shadow:var(--glow-pink)}
#keyhints.dock button:hover::before,#keyhints.dock button:focus-visible::before{opacity:1;transform:translate(-50%,0) scale(1)}
#keyhints.dock button:active{transform:translateY(-2px) scale(.94)}

/* ---------- toasts and the comms rail ---------- */
/* Alerts are bare text over the game (css/comms.css): no glass here. */
.alert{font-family:var(--ui);font-weight:600}
.a-e{font-size:16px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
@keyframes toastIn{0%{opacity:0;transform:translateX(-40px) scale(.8)}60%{opacity:1}100%{opacity:1;transform:none}}
.chip,#cmOne{border-radius:50%!important;width:44px;height:44px;justify-content:center;
  background:var(--glass)!important;border:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--lift),var(--gloss);
  transition:transform .3s var(--spring)}
.chip:hover,#cmOne:hover{transform:translateY(-3px) scale(1.08)}
.chip-n{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  font:700 11px/19px var(--display);color:#fff;background:var(--hot);box-shadow:0 2px 8px rgba(255,79,154,.6);
  animation:popIn .45s var(--spring)}
@keyframes popIn{0%{transform:scale(0)}100%{transform:scale(1)}}

/* ---------- conversation ---------- */
#dialogue{background:linear-gradient(0deg,rgba(20,4,34,.78),transparent)!important}
.dlg{animation:dlgIn .5s var(--spring) both;overflow:visible!important}
@keyframes dlgIn{0%{opacity:0;transform:translateY(40px) scale(.96)}100%{opacity:1;transform:none}}
.dlg-head{border-bottom:1px solid var(--line-soft)!important;padding:14px 18px 12px!important}
.dlg-face{border-radius:50%;background:var(--hot);box-shadow:0 0 0 3px rgba(255,255,255,.45),var(--glow-pink)}
.dlg-face.sprite{background-color:transparent}
.dlg-name{display:inline-block;font-family:var(--display)!important;font-weight:700;letter-spacing:.06em!important;
  color:#fff!important;background:var(--hot);padding:3px 12px;border-radius:var(--pill);box-shadow:var(--glow-pink);
  font-size:13px!important}
.dlg-role{margin-top:4px;font-family:var(--display);font-weight:500;color:var(--dim)}
.dlg-mood{font-family:var(--display)!important;font-weight:600;color:var(--text)!important;
  background:var(--glass-lite);padding:4px 11px;border-radius:var(--pill);border:1px solid var(--line-soft)}
.dlg-text{font-size:17px!important;line-height:1.6!important;padding:16px 20px!important}
.dlg-text .cursor{background:var(--hot)!important;border-radius:2px}
.dlg-choices{gap:8px!important;padding:0 14px 14px!important}
.choice{font-family:var(--ui);font-weight:700;border-radius:var(--r-md)!important;padding:11px 14px!important;
  background:var(--glass-lite)!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:var(--gloss);transition:transform .28s var(--spring),background .2s,box-shadow .2s,border-color .2s!important;
  animation:choiceIn .45s var(--spring) both}
.choice:nth-child(2){animation-delay:.05s}.choice:nth-child(3){animation-delay:.1s}
.choice:nth-child(4){animation-delay:.15s}.choice:nth-child(5){animation-delay:.2s}.choice:nth-child(n+6){animation-delay:.25s}
@keyframes choiceIn{0%{opacity:0;transform:translateY(10px) scale(.97)}100%{opacity:1;transform:none}}
.choice:hover,.choice.sel{transform:translateX(4px) scale(1.01)!important;border-color:rgba(255,79,154,.7)!important;
  background:var(--hot-soft)!important;box-shadow:var(--gloss),var(--glow-pink)}
.choice .num{display:inline-grid;place-items:center;min-width:22px!important;height:22px;border-radius:50%;
  background:var(--hot);color:#fff!important;font:700 11px var(--display)!important;box-shadow:var(--gloss);flex:0 0 auto}
.choice .tag{font-family:var(--display)!important;font-weight:600}
.dlg-cont{font-family:var(--display)!important;font-weight:600;color:var(--dim)!important}
.dlg-cont::after{content:" ▾";display:inline-block;color:var(--brand);animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* ---------- panels: tabs, headings, cards ---------- */
.tabs,.cm-tabs{border-bottom:1px solid var(--line-soft)!important;gap:6px!important;
  flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent);
          mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent)}
.tabs::-webkit-scrollbar,.cm-tabs::-webkit-scrollbar{display:none}
.tab,.cm-tab{flex:0 0 auto;font-family:var(--display)!important;font-weight:600!important;letter-spacing:.02em!important;
  text-transform:none!important;border-radius:var(--pill)!important;padding:8px 14px!important;
  border:1px solid transparent;transition:transform .3s var(--spring),background .2s,color .2s,box-shadow .2s!important}
.tab:hover,.cm-tab:hover{transform:translateY(-2px);background:var(--glass-lite)!important}
.tab.on,.cm-tab.on{color:#fff!important;background:var(--hot)!important;border-color:transparent!important;
  box-shadow:var(--gloss),var(--glow-pink)!important;transform:scale(1.04)}
.tab-n{border-radius:10px!important;font-family:var(--display)!important;background:var(--hot)!important;color:#fff!important}
.tab.on .tab-n{background:rgba(255,255,255,.3)!important}
.pn-body{padding:18px!important}
.h2{font-family:var(--display)!important;font-weight:700!important;font-size:13px!important;letter-spacing:.08em!important;
  border-bottom:0!important;padding-bottom:4px;margin-bottom:10px!important;color:var(--hold)!important;
  display:flex;align-items:center;gap:10px}
.h2::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,79,154,.5),transparent)}
.item,.stat-box,.mind-card,.farm-sum .fs,.farm-plots .fp,.farm-prod .fst,.ws-mats .wm,.ach,.skill,.quest,.setting{
  border-radius:var(--r-md)!important;background:var(--glass-lite)!important;border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:var(--gloss);transition:transform .3s var(--spring),box-shadow .2s,border-color .2s!important}
.item:hover,.mind-card:hover,.farm-plots .fp:hover,.ach:hover{transform:translateY(-3px)!important;
  border-color:rgba(255,79,154,.55)!important;box-shadow:var(--gloss),var(--glow-pink)}
.item .it,.mind-card .mnm,.stat-box .sk{font-family:var(--display);font-weight:700}
.item .ie{filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));transition:transform .35s var(--spring)}
.item:hover .ie{transform:scale(1.2) rotate(-8deg)}
.rar{border-radius:var(--pill)!important;font-family:var(--display)!important;font-weight:700!important;
  border:0!important;padding:3px 9px!important;letter-spacing:.06em!important}
.rar.common{background:rgba(62,230,209,.16)!important;color:var(--aqua)!important}
.rar.rare{background:rgba(255,79,154,.2)!important;color:#ff8fc2!important}
.rar.epic{background:var(--hot)!important;color:#fff!important;box-shadow:var(--glow-pink)}
.farm-plots .fp.s3{box-shadow:var(--gloss),0 0 0 2px var(--good),0 0 18px -4px var(--good)!important;animation:ripe 2s ease-in-out infinite}
@keyframes ripe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.mb{border-radius:var(--pill)!important;background:rgba(10,2,20,.5)!important}
.mb i{border-radius:var(--pill)!important;transition:width .8s var(--spring)!important}
.mind-card .mp{border-radius:var(--pill)!important;font-family:var(--display)!important;font-weight:700}

/* The comms console. */
.cm-list .cm-row,.cm-item,.cm-thread{border-radius:var(--r-md)!important}
.bubble,.cm-bubble,.msg{border-radius:18px!important}

/* The bar: serving a guest. */
.move{font-family:var(--ui);font-weight:700;border-radius:var(--r-md)!important;background:var(--glass-lite)!important;
  border:1px solid rgba(255,255,255,.12)!important;box-shadow:var(--gloss);
  transition:transform .28s var(--spring),box-shadow .2s,border-color .2s!important}
.move:hover:not(:disabled){transform:translateY(-3px) scale(1.02);border-color:rgba(255,79,154,.7)!important;box-shadow:var(--gloss),var(--glow-pink)}
.move:active:not(:disabled){transform:scale(.96)}
.move.primary{background:linear-gradient(135deg,rgba(70,227,168,.3),rgba(62,230,209,.15))!important;border-color:rgba(70,227,168,.7)!important}
.cb-face{border-radius:50%;background:var(--hot-soft);box-shadow:0 0 0 3px rgba(255,255,255,.25)}

/* ---------- touch controls ---------- */
#touchE,#touchMenu{background:var(--hot)!important;border:2px solid rgba(255,255,255,.45)!important;color:#fff!important;
  font-family:var(--display)!important;font-weight:700!important;box-shadow:var(--glow-pink),var(--gloss)!important;
  transition:transform .25s var(--spring)!important}
#touchMenu{background:var(--glass)!important;box-shadow:var(--lift),var(--gloss)!important}
#touchE:active,#touchMenu:active{transform:scale(.9)!important}
.stick{border-color:rgba(255,255,255,.25)!important;background:radial-gradient(circle,rgba(255,79,154,.12),rgba(38,17,60,.35))!important}
#stickKnob{background:var(--hot)!important;box-shadow:var(--glow-pink),var(--gloss)!important}

/* ---------- the name and look screens, the title's buttons ---------- */
#nameInput{font-family:var(--display)!important;font-weight:600;border-radius:var(--pill)!important;
  background:rgba(10,2,20,.55)!important;border:2px solid rgba(255,255,255,.14)!important;transition:border-color .2s,box-shadow .2s}
#nameInput:focus{border-color:var(--brand)!important;box-shadow:var(--glow-pink)}
.look-row select{border-radius:var(--pill)!important;background:rgba(10,2,20,.55)!important;font-family:var(--display)}
.look-row label{font-family:var(--display)!important;font-weight:600;letter-spacing:.06em!important}
#lookView{border-radius:22px!important;background:var(--hot-soft)!important;border:1px solid rgba(255,255,255,.14)!important}

/* ---------- a bubble pops where you tap (engine/juice.js) ---------- */
.pop-bubble{position:absolute;pointer-events:none;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,79,154,.35) 45%,rgba(255,79,154,0) 70%);
  animation:popBubble .55s var(--out) forwards;z-index:3}
@keyframes popBubble{0%{transform:scale(.4);opacity:.95}100%{transform:scale(7);opacity:0}}

/* ---------- motion off means off ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body.calm *,body.calm *::before,body.calm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important}

/* ---------- no more dashed lines ----------
   Soft solid rules, one side each. */
.dlg-head,.cb-top,.tabs,.cm-tabs,.cm-mail,.cm-call,.l-hour,.setting,.board-head,
#cutscene.plain .cut-label,.sign-title,.h2{border-bottom-style:solid!important;border-bottom-color:var(--line-soft)!important}
.cb-log,.cb-tell,.cm-foot,.tk-list,.board-note{border-top-style:solid!important;border-top-color:var(--line-soft)!important}
.cm-list{border-right-style:solid!important;border-right-color:var(--line-soft)!important}
.cb-tell{background:rgba(255,185,56,.07)!important}

/* The comms console's rows. */
.cm-row{border-radius:var(--r-md)!important;transition:transform .25s var(--spring),background .2s,border-color .2s!important}
.cm-row:hover{transform:translateX(3px)}
.cm-row.on{border-color:rgba(255,79,154,.6)!important;background:var(--hot-soft)!important;box-shadow:var(--gloss)}
.cm-row.new::before{background:var(--hot)!important}

/* ---------- phones: glass without the blur ----------
   A backdrop blur re-renders the map behind it every frame, so always-on
   pieces use richer, more opaque glass. Modals keep the blur: the world stops
   drawing under them. */
@media (pointer:coarse){
  .hud .card,.chip,#cmOne,#minimapBtn{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hud .card,.chip,#cmOne{background:linear-gradient(160deg,rgba(64,28,94,.94),rgba(34,15,54,.96))!important}
  .bar>i::after{animation:none}
}

/* The screens between the title and the game — your name, your look, the
   help page — on a warm dusk glow rather than the old blue-grey. */
.screen:not(#titleScreen){background:radial-gradient(900px 600px at 50% 15%,rgba(255,79,154,.22),transparent 60%),
  radial-gradient(1200px 800px at 50% 110%,rgba(255,185,56,.14),transparent 60%),var(--ink)!important}
/* Except the opening while it is filming the island (Cut, engine/boot.js):
   the world is drawn behind it, and the glow above hid every shot but the
   captions. The help page borrows the same screen and keeps the glow. */
#cutscene.world{background:none!important}

/* ============================================================
   FACES AND DEPTH
   ============================================================ */

/* ---------- living portraits (engine/portrait.js) ---------- */
canvas.portrait{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
/* Your HUD face fills its circle exactly, whatever size the layout gives the
   circle: drawn bigger than the circle and left to the grid, it hung from the
   top-left corner (an overflowing grid item is not centred everywhere). */
.who-face.live canvas.portrait{width:100%!important;height:100%!important}

/* The dialogue portrait pops up out of the top of the box, in a frame
   washed in the speaker's own colour (--who, set by Dialogue.open). */
#dialogue{--who:var(--brand)}
.dlg-face.live{flex:0 0 auto;padding:0!important;font-size:0;border-radius:28px;overflow:hidden;align-self:flex-end;
  margin-top:-62px;position:relative;
  background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.45),transparent 55%),
             linear-gradient(165deg,var(--who),#ff7a59 60%,#3a1d58)!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.75),0 14px 34px -8px var(--who),inset 0 -14px 24px rgba(40,0,40,.35)!important;
  animation:portraitPop .6s var(--spring) both}
.dlg-face.live::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 35%)}
@keyframes portraitPop{0%{opacity:0;transform:translateY(24px) scale(.7) rotate(-6deg)}100%{opacity:1;transform:none}}
.dlg-name{background:linear-gradient(135deg,var(--who),var(--brand) 70%)!important;
  box-shadow:0 6px 18px -6px var(--who)!important}
.dlg{box-shadow:0 40px 90px -30px rgba(8,0,18,.9),0 0 70px -30px var(--who),var(--gloss)!important}
.dlg::before{background:linear-gradient(90deg,var(--who),#ff7a59,#ffb938)!important;box-shadow:0 0 14px var(--who)!important}

/* Your face, round, in the corner. The same size on a phone as anywhere
   else — shrinking it there as well made you a speck. */
.who-face.live{padding:0!important;width:46px;height:46px;border-radius:50%!important;overflow:hidden;
  display:grid!important;place-items:center;font-size:0!important}

/* Faces on the Islanders cards, framed in their own colour. */
.mind-card{position:relative;overflow:hidden}
.mind-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--who),transparent)}
.mind-card .mf.live{width:56px;height:56px;border-radius:18px;overflow:hidden;flex:0 0 auto;display:grid;place-items:end center;
  background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.35),transparent 60%),linear-gradient(165deg,var(--who),#3a1d58);
  box-shadow:0 0 0 2px rgba(255,255,255,.55),0 8px 20px -8px var(--who)}

/* Hearts off a face. */
.heart-pop{position:fixed;z-index:999;pointer-events:none;font-size:20px;line-height:1;
  font-family:var(--emoji),sans-serif;filter:drop-shadow(0 3px 6px rgba(255,79,154,.6));
  animation:heartUp 1.4s var(--out) both}
@keyframes heartUp{0%{opacity:0;transform:translate(-50%,0) scale(.4)}
  15%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-90px) scale(.9) rotate(12deg)}}

/* ---------- depth ---------- */
/* Glass with an edge of light: a gradient border that catches the top-left
   and fades, instead of one flat line all the way round. */
.hud .card,#keyhints.dock,.sign{border:1px solid transparent!important;
  background:var(--glass) padding-box,
    linear-gradient(155deg,rgba(255,255,255,.42),rgba(255,79,154,.30) 35%,rgba(255,255,255,.04) 70%,rgba(255,185,56,.22)) border-box!important}
@media (pointer:coarse){
  .hud .card{background:linear-gradient(160deg,rgba(64,28,94,.95),rgba(34,15,54,.97)) padding-box,
    linear-gradient(155deg,rgba(255,255,255,.42),rgba(255,79,154,.30) 35%,rgba(255,255,255,.04) 70%,rgba(255,185,56,.22)) border-box!important}
}

/* A hibiscus tucked into the corner of the big cards — the panel, the comms
   console, the dialogue box — so they are somewhere, not just a box. */
.pn,.cm,.dlg{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='%23ff4f9a' opacity='.16'%3E%3Cellipse rx='15' ry='27' cy='-22'/%3E%3Cellipse rx='15' ry='27' cy='-22' transform='rotate(72)'/%3E%3Cellipse rx='15' ry='27' cy='-22' transform='rotate(144)'/%3E%3Cellipse rx='15' ry='27' cy='-22' transform='rotate(216)'/%3E%3Cellipse rx='15' ry='27' cy='-22' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='8' fill='%23ffb938' opacity='.22'/%3E%3Cpath d='M0 0 L20 -32' stroke='%23ffd166' stroke-width='3' opacity='.25'/%3E%3C/svg%3E")
      no-repeat right -34px bottom -38px / 170px padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='%233ee6d1' opacity='.10'%3E%3Cellipse rx='15' ry='27' cy='-22'/%3E%3Cellipse rx='15' ry='27' cy='-22' transform='rotate(72)'/%3E%3Cellipse rx='15' ry='27' cy='-22' transform='rotate(144)'/%3E%3Cellipse rx='15' ry='27' cy='-22' transform='rotate(216)'/%3E%3Cellipse rx='15' ry='27' cy='-22' transform='rotate(288)'/%3E%3C/g%3E%3C/svg%3E")
      no-repeat left -30px top 40% / 110px padding-box,
    var(--glass) padding-box,
    linear-gradient(155deg,rgba(255,255,255,.42),rgba(255,79,154,.30) 35%,rgba(255,255,255,.04) 70%,rgba(255,185,56,.22)) border-box!important}

/* Bubbles rising behind an open panel. On a layer of its own and moved with
   transform only, so it is the compositor's job and costs a frame nothing. */
#panel::before,#inbox::before,#combat::before{content:"";position:absolute;left:0;right:0;top:0;height:200%;
  pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.22) 0 5px,rgba(255,255,255,.05) 6px,transparent 9px),
    radial-gradient(circle at 70% 60%,rgba(255,255,255,.18) 0 9px,rgba(255,79,154,.08) 10px,transparent 14px),
    radial-gradient(circle at 40% 85%,rgba(62,230,209,.25) 0 4px,transparent 7px),
    radial-gradient(circle at 88% 35%,rgba(255,185,56,.22) 0 6px,transparent 9px);
  background-size:260px 300px,380px 420px,200px 240px,320px 360px;
  animation:bubblesUp 26s linear infinite}
#panel>.sign,#inbox>.sign,#combat>.sign{z-index:1}
@keyframes bubblesUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}

/* Cards lean towards the pointer (engine/juice.js sets --rx/--ry/--mx/--my),
   with a highlight that follows it. */
.item,.mind-card,.farm-plots .fp,.stat-box,.ach{transform-style:preserve-3d}
.item:hover,.mind-card:hover,.farm-plots .fp:hover,.ach:hover,.stat-box:hover{
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)!important;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.13),transparent 60%),var(--glass-lite)!important}

/* Stickers: rarity tags sit a little askew, like they were slapped on. */
.rar{transform:rotate(-3deg);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.item:hover .rar{transform:rotate(2deg) scale(1.08);transition:transform .3s var(--spring)}
/* In the dialogue box the flower sits further into the corner and fainter:
   the choices run right across it, and a flower behind a button reads as a
   mark on the button. */
.dlg{background-position:right -64px bottom -70px,left -30px top 40%,0 0,0 0!important;
  background-size:150px,90px,auto,auto!important}

/* ---------- the guide ----------
   The tracker as one line: an arrow to where you are going, the job's name
   with a dot per step, the next thing to do, and the distance. The other jobs
   and the Jobs tab are one tap away in a drop-down list. It fades while
   nothing changes and lights up on progress (Track.point/flash in
   engine/progress.js). */
#tracker{width:auto!important;max-width:320px;max-height:none!important;
  display:flex;flex-direction:column;align-items:flex-end}
#tracker.none .gd-far,#tracker.none .gd-ic{display:none}
.guide{position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end;
  max-width:100%;transition:opacity .6s ease,filter .6s ease}
.gd-main{display:flex;align-items:center;gap:9px;max-width:100%;min-height:40px;
  padding:5px 12px 5px 5px;border-radius:var(--pill);cursor:pointer;text-align:left;
  font:inherit;color:var(--text);
  background:linear-gradient(180deg,rgba(38,26,52,.72),rgba(22,18,34,.66));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  transition:border-color .25s,box-shadow .25s,transform .25s var(--spring)}
.gd-main:hover{border-color:rgba(255,111,170,.45);transform:translateY(-1px)}
.gd-main:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.guide.open .gd-main{border-color:rgba(255,111,170,.55)}

/* The compass: a small round bubble with the arrow in it, which turns to
   face wherever the pin is. Aqua while it has somewhere to point, a soft
   pulse when you are nearly there. */
.gd-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),transparent 55%),var(--hot);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 4px 12px -4px rgba(255,79,154,.7)}
.gd-arrow{display:block;font-size:13px;line-height:1;color:#fff;opacity:.55;
  font-family:var(--ui);text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:transform .45s var(--spring),opacity .3s}
.guide.aimed .gd-arrow{opacity:1}
.guide.near .gd-ic{animation:gdNear 1.6s ease-in-out infinite}
@keyframes gdNear{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 0 0 0 rgba(94,234,212,.55)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 0 0 7px rgba(94,234,212,0)}}

.gd-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.gd-job{display:flex;align-items:center;gap:7px;min-width:0}
.gd-job b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.02em;
  background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.gd-dots{flex:0 0 auto;display:flex;gap:3px}
.gd-dots:empty{display:none}
.gd-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,transform .3s}
.gd-dots i.d{background:var(--aqua)}
.gd-dots i.c{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);transform:scale(1.25)}
.gd-step{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;line-height:1.3;color:var(--text)}
.gd-step:empty{display:none}
.gd-far{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--aqua);white-space:nowrap;letter-spacing:.02em}
.gd-far:empty,.gd-n:empty{display:none}
.gd-n{flex:0 0 auto;font-size:10px;font-weight:800;color:#fff;padding:2px 6px;border-radius:var(--pill);
  background:rgba(255,255,255,.12)}

/* Walking, nothing new: it steps back. Still there, still readable if you
   look for it, not something the eye keeps landing on. */
.guide.quiet{opacity:.42}
.guide.quiet .gd-step{max-width:0;opacity:0}
.gd-step{transition:max-width .5s ease,opacity .4s ease;max-width:260px}
/* A step done: a green sweep through the pill. A new job: a pink glow. */
.guide.done .gd-main{animation:gdDone 1.4s ease-out}
.guide.fresh .gd-main{animation:gdFresh 1.4s ease-out}
@keyframes gdDone{0%{box-shadow:0 0 0 0 rgba(70,227,168,.7);border-color:rgba(70,227,168,.9);transform:scale(1.04)}
  100%{box-shadow:0 0 0 14px rgba(70,227,168,0)}}
@keyframes gdFresh{0%{box-shadow:0 0 0 0 rgba(255,79,154,.7);border-color:rgba(255,111,170,.9);transform:scale(1.04)}
  100%{box-shadow:0 0 0 14px rgba(255,79,154,0)}}

/* The list: every open job, the one you are following marked, tap one to
   follow it instead. */
.gd-more{margin-top:6px;width:min(290px,calc(100vw - 24px));padding:5px;border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:3px;max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(38,26,52,.9),rgba(22,18,34,.88));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px -20px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transform-origin:top right;animation:gdOpen .28s var(--spring)}
.gd-more[hidden]{display:none}
@keyframes gdOpen{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.gd-row{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:12px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--text);font:inherit;text-align:left;transition:background .15s}
.gd-row:hover{background:rgba(255,255,255,.07)}
.gd-row:focus-visible{outline:2px solid var(--aqua);outline-offset:-2px}
.gd-row.on{background:rgba(70,227,168,.1);border-color:rgba(70,227,168,.35)}
.gd-pin{flex:0 0 auto;width:18px;text-align:center;font-size:12px;color:var(--dim)}
.gd-rt{flex:1;min-width:0;display:flex;flex-direction:column}
.gd-rt b{font-family:var(--display);font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-rt span{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-row i{flex:0 0 auto;font-style:normal;font-size:10px;color:var(--dim)}
.gd-row.on b{color:var(--good)}
.gd-empty{margin:0;padding:8px;font-size:11.5px;color:var(--dim)}
.gd-all{margin-top:2px;padding:7px;border-radius:12px;border:0;cursor:pointer;font:inherit;
  font-family:var(--display);font-size:11.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.08)}
.gd-all:hover{background:rgba(255,79,154,.25)}

/* Phones: the same line, narrower — the job name and the arrow, the step
   underneath, and the distance tucked in. It keeps the width the
   notifications already leave for it (--tk-w in responsive.css). */
@media (max-width:820px),(max-height:520px){
  #tracker{max-width:var(--tk-w)}
  body.southpaw #tracker,body.southpaw .guide{align-items:flex-start}
  .gd-main{gap:6px;min-height:34px;padding:3px 9px 3px 3px}
  .gd-ic{width:26px;height:26px}
  .gd-job b{font-size:11px}
  /* Two short lines rather than one cut off after three words: at this width
     the step is the part worth reading. */
  .gd-step{font-size:10.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
  .gd-far{display:none}
  .gd-dots i{width:4px;height:4px}
  .gd-more{width:min(250px,calc(100vw - 20px))}
  body.southpaw .gd-more{transform-origin:top left}
}
@media(pointer:coarse){.gd-row{min-height:40px}}
body.calm .guide,body.calm .gd-step,body.calm .gd-arrow{transition:none}
body.calm .guide.near .gd-ic,body.calm .guide.done .gd-main,body.calm .guide.fresh .gd-main,body.calm .gd-more{animation:none}