/* Bug notice (shared/bug-notice.js). The card body is the owner's two logo colours (owner via Grok, Nov 1 2026):
   LIQUID GREEN body (#12642a > #0b4a1c > #073812, a wet gloss on top) inside a LIQUID GOLD frame
   (#6b4c00 > #c99200 > #ffe14a > #fff4b0, specular bands). No navy anywhere in the card; silver is not used.
   Pure CSS (sharp on Retina, no bitmaps). Same metal family as chrome.css / goc-dock.css. Lean and symmetrical:
   equal padding left and right, the gold X centred in its own right-hand column.
   Contrast (WCAG 2.x, test/bug-notice-contrast-1101.test.mjs checks every stop with the gloss at its brightest, 10% white):
   body #ffffff >= 5.72:1, link #fff4b0 >= 5.13:1 on the lightest green under the gloss; X glyph #073812 on the gold face
   >= 5.1:1 at its darkest band #c99200. All >= 4.5:1 (AA). Same in light and dark: the card never takes the page theme. */
.goc-bug{position:fixed;top:0;left:0;right:0;height:auto;z-index:2147483600;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;pointer-events:none;
  background:transparent;animation:gocBugIn .22s ease-out both;overscroll-behavior:contain}
.goc-bug.out{animation:gocBugOut .22s ease-in both}
html.goc-bug-open:not(:has(#gateSignIn)),html.goc-bug-open:not(:has(#gateSignIn)) body{overflow:hidden}
/* BUG-20261104-027: on the sign-in page the card sits in the open band above the form (not over the buttons). */
.goc-bug.goc-bug-park{position:absolute;left:0;right:0;width:auto;height:auto;z-index:20;padding:0 12px;margin:0;pointer-events:none;background:transparent;animation:none}
.goc-bug.goc-bug-park .goc-bug-card{margin-top:0;pointer-events:auto}
.goc-bug.goc-bug-pass{pointer-events:none;background:transparent}
.goc-bug.goc-bug-pass .goc-bug-card{pointer-events:none}
.goc-bug.goc-bug-pass .goc-bug-x,.goc-bug.goc-bug-pass .goc-bug-text a{pointer-events:auto}
.goc-bug-card{position:relative;width:min(440px,100%);margin-top:clamp(0px,8vh,72px);padding:4px;border-radius:20px;outline:none;isolation:isolate;pointer-events:auto;
  /* the frame: liquid gold with specular bands */
  background:
    linear-gradient(118deg,transparent 0 14%,rgba(255,255,255,.9) 17%,rgba(255,255,255,0) 21%,transparent 47%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 53%,transparent 82%,rgba(255,255,255,.85) 85%,rgba(255,255,255,0) 88%),
    linear-gradient(180deg,#fff4b0 0%,#ffe14a 24%,#c99200 50%,#6b4c00 62%,#c99200 78%,#ffe14a 100%);
  box-shadow:0 0 0 1px rgba(255,244,176,.55),0 18px 40px rgba(3,20,8,.5),0 0 22px rgba(255,225,74,.32)}
/* one sheen pass across the gold when it opens (off under reduced motion) */
.goc-bug-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  padding:4px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.95) 48%,transparent 66%) no-repeat;background-size:60% 100%;background-position:-120% 0;
  animation:gocBugSheen 1.1s .15s ease-out 1 both}
/* the body: liquid green with a wet high-def gloss (at most 10% white, so the text keeps AA everywhere) */
.goc-bug-plate{position:relative;z-index:1;border-radius:16px;
  background:
    radial-gradient(120% 70% at 50% -18%,rgba(255,255,255,.10),rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#12642a 0%,#0b4a1c 55%,#073812 100%);
  box-shadow:inset 0 1px 0 rgba(255,244,176,.45),inset 0 0 0 1px rgba(255,225,74,.28),inset 0 -10px 18px rgba(0,0,0,.30);
  display:grid;grid-template-columns:1fr 44px;column-gap:14px;align-items:start;
  padding:18px;max-height:min(62vh,62dvh,460px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* !important: the light theme forces p{color:#1a1e24!important} (style.css), which would put dark text on the green */
.goc-bug-text{margin:0;color:#ffffff!important;font:500 16px/1.55 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:left;overflow-wrap:anywhere;text-shadow:0 1px 1px rgba(3,20,8,.55)}
.goc-bug-text a{color:#fff4b0!important;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.goc-bug-text a:hover{color:#ffffff!important}
.goc-bug-text a:focus-visible,.goc-bug-x:focus-visible,.goc-bug-card:focus-visible{outline:3px solid #fff4b0;outline-offset:3px}
/* the round liquid-gold X, 44 x 44 target, in its own column (never over the text) */
.goc-bug-x{position:sticky;top:0;z-index:3;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;color:#073812;
  display:flex;align-items:center;justify-content:center;border:2px solid transparent;
  background:
    radial-gradient(70% 55% at 38% 26%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%) padding-box,
    linear-gradient(180deg,#fff4b0 0%,#ffe14a 45%,#c99200 100%) padding-box,
    linear-gradient(160deg,#fff4b0 0%,#c99200 40%,#6b4c00 60%,#ffe14a 85%,#fff4b0 100%) border-box;
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 5px rgba(107,76,0,.45),0 3px 8px rgba(0,0,0,.4)}
.goc-bug-x:active{transform:translateY(1px)}
@keyframes gocBugIn{from{opacity:0}to{opacity:1}}
@keyframes gocBugOut{from{opacity:1}to{opacity:0}}
@keyframes gocBugSheen{from{background-position:-120% 0}to{background-position:220% 0}}
@media (max-width:360px){.goc-bug-plate{padding:14px;column-gap:10px}.goc-bug-text{font-size:15px;line-height:1.5}}
@media (prefers-reduced-motion:reduce){.goc-bug,.goc-bug.out,.goc-bug-card::after{animation:none}.goc-bug-card::after{display:none}}
@media (forced-colors:active){.goc-bug-card{border:3px solid CanvasText}.goc-bug-x{border:2px solid ButtonText}}

/* tfLW5 (t8690u): on the Living World the bug notice is a centered overlay, same placement
   as Fantasy Corner and the Name-a-game card. Colours and wording stay as they are. */
.goc-bug.goc-bug-center{inset:0;top:0;left:0;right:0;bottom:0;width:auto;height:100%;height:100dvh;
  align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px));
  background:rgba(4,8,22,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  pointer-events:auto}
.goc-bug.goc-bug-center .goc-bug-card{margin-top:0;max-height:min(80vh,80dvh)}
.goc-bug.goc-bug-center .goc-bug-plate{max-height:min(76vh,76dvh,560px)}