/* Game look for the islands edition (loaded last): chunky Fredoka lettering with a dark outline,
   glossy game buttons and thick panel borders, like the Clicker Legends UI itself.
   The outline colour #0f1133 is the UIStroke colour the game's own text uses. */
html:root:not([data-x]) {
  --f-display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --stroke: #0f1133;
  --line: #0f1133;
  --gloss: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(0, 0, 0, .14);
  --g-green: linear-gradient(180deg, #8bff73 0%, #44de3d 48%, #25c432 52%, #169c27 100%);
  --g-blue: linear-gradient(180deg, #86e6ff 0%, #38c4ff 48%, #1ea7f6 52%, #1284dc 100%);
  --g-gold: linear-gradient(180deg, #fff38a 0%, #ffd53d 48%, #ffbf1c 52%, #f39800 100%);
  --g-discord: linear-gradient(180deg, #aab1ff 0%, #727dff 48%, #5865f2 52%, #424bcb 100%);
}

/* ---------- lettering ---------- */
body.islands h1, body.islands h2, body.islands h3 { font-weight: 700; letter-spacing: .005em; }
body.islands h1, body.islands h2 {
  color: #fff; paint-order: stroke fill; -webkit-text-stroke: .2em var(--stroke);
  text-shadow: 0 .09em 0 var(--stroke);
}
body.islands h1 { -webkit-text-stroke-width: .19em; }
body.islands .pc .nm, body.islands .ec .nm, body.islands .wc .nm, body.islands .huge-card .nm,
body.islands .browse .t, body.islands .tbl .petcell b, body.islands .stat-tile .v,
body.islands .howto .odds b, body.islands .tier .tn, body.islands .track .lv b { font-weight: 600; }
body.islands .pc .nm { font-size: 15.5px; }

/* outlined white text, shared by buttons, badges and labels */
body.islands .play-btn, body.islands .discord-btn, body.islands .btn, body.islands .brand .wiki,
body.islands .rail-group .eyebrow, body.islands .rail a.on, body.islands .seg button.on {
  color: #fff; paint-order: stroke fill; -webkit-text-stroke: .26em var(--stroke);
  text-shadow: 0 2px 0 var(--stroke);
}

/* ---------- game buttons ---------- */
body.islands .play-btn, body.islands .discord-btn, body.islands .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 17px;
  font: 700 17px/1 var(--f-display); letter-spacing: .01em;
  background: var(--g-green);
  border: 3px solid var(--stroke); border-radius: 14px;
  box-shadow: var(--gloss), 0 4px 0 var(--stroke);
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
  transition: transform .08s, filter .12s, box-shadow .08s;
}
body.islands .play-btn:hover, body.islands .discord-btn:hover, body.islands .btn:hover {
  filter: brightness(1.08) saturate(1.05); transform: translateY(-1px); box-shadow: var(--gloss), 0 5px 0 var(--stroke);
}
body.islands .play-btn:active, body.islands .discord-btn:active, body.islands .btn:active {
  transform: translateY(3px); box-shadow: var(--gloss), 0 1px 0 var(--stroke); filter: none;
}
body.islands .discord-btn { background: var(--g-discord); }
body.islands .btn { background: var(--g-blue); height: 40px; padding: 0 15px; font-size: 15.5px; }
body.islands .hero .btn[data-open-search] { background: var(--g-gold); }
body.islands .hero .play-btn { height: 48px; padding: 0 20px; font-size: 19px; }
body.islands .hero .btn { height: 48px; padding: 0 18px; font-size: 17px; }
body.islands .play-btn svg, body.islands .discord-btn svg { width: 19px; height: 19px; flex: none; color: #fff; overflow: visible; }
body.islands .play-btn svg path, body.islands .discord-btn svg path {
  fill: #fff; stroke: var(--stroke); stroke-width: 3.2px; stroke-linejoin: round; paint-order: stroke fill;
}
body.islands .play-btn svg, body.islands .discord-btn svg { filter: drop-shadow(0 2px 0 var(--stroke)); }

/* top bar: white game bar, chunky search box, a tilted Wiki badge */
body.islands .topbar { border-bottom: 3px solid var(--stroke); }
body.islands .top-actions { gap: 10px; }
body.islands .search-btn {
  height: 44px; background: #fff; border: 3px solid var(--stroke); border-radius: 14px;
  box-shadow: inset 0 -3px 0 #e1e9f7, 0 4px 0 var(--stroke); color: var(--ink-2); font-weight: 800;
}
body.islands .search-btn svg { color: var(--stroke); }
body.islands .search-btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 #e1e9f7, 0 1px 0 var(--stroke); }
body.islands kbd { border-color: var(--stroke); border-width: 2px 2px 3px; color: var(--ink); }
body.islands .brand .wiki {
  font: 700 15px/1 var(--f-display); padding: 6px 10px 7px; border-radius: 10px;
  background: var(--g-gold); border: 2.5px solid var(--stroke); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--stroke);
  transform: rotate(-5deg);
}
body.islands .icon-btn {
  width: 44px; height: 44px; color: #fff; background: var(--g-blue);
  border: 3px solid var(--stroke); border-radius: 14px; box-shadow: var(--gloss), 0 4px 0 var(--stroke);
}
body.islands .icon-btn svg { filter: drop-shadow(0 2px 0 var(--stroke)); }
body.islands .icon-btn:active { transform: translateY(3px); box-shadow: var(--gloss), 0 1px 0 var(--stroke); }

/* ---------- panels: thick outline and a hard drop, instead of soft glass edges ---------- */
body.islands .rail-group, body.islands .rail-foot, body.islands .page, body.islands .foot,
body.islands .page:has(> .hero) > .block {
  border: 3px solid var(--stroke); box-shadow: 0 6px 0 rgba(15, 17, 51, .3);
}
body.islands .page:has(> .hero) { border: 0; box-shadow: none; }
body.islands .hero { border: 3px solid var(--stroke); box-shadow: 0 6px 0 var(--stroke); }

/* rail: game menu buttons, the open page in blue */
body.islands .rail-group .eyebrow { font: 700 16px/1.1 var(--f-display); text-transform: none; letter-spacing: .01em; padding: 0 4px 7px; }
body.islands .rail a {
  background: #fff; border: 2.5px solid var(--stroke); border-radius: 12px; box-shadow: 0 3px 0 var(--stroke);
  font-weight: 800; transition: transform .08s, box-shadow .08s;
}
body.islands .rail-group { gap: 7px; }
body.islands .rail a:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--stroke); border-color: var(--stroke); }
body.islands .rail a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stroke); }
body.islands .rail a.on {
  background: var(--g-blue); border-color: var(--stroke); box-shadow: var(--gloss), 0 3px 0 var(--stroke);
  font: 700 16px/1.2 var(--f-display);
}
body.islands .rail a.on::after { display: none; }
body.islands .rail a.on .count { color: #fff; font-family: var(--f-display); font-size: 13px; }

/* filters: chunky chips and a game-style variant switch */
body.islands .chip { border: 2px solid var(--stroke); box-shadow: 0 2px 0 var(--stroke); color: var(--ink); }
body.islands .chip.on { background: var(--stroke); color: #fff; }
body.islands .chip.on .dot { border-color: #fff; }
body.islands .seg { background: #fff; border: 3px solid var(--stroke); border-radius: 14px; box-shadow: 0 4px 0 var(--stroke); padding: 3px; }
body.islands .seg button { font: 600 15px/1 var(--f-display); color: var(--ink-2); border-radius: 10px; }
body.islands .seg button.on {
  font-weight: 700; background: var(--g-blue); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2.5px var(--stroke);
}
body.islands .seg button[data-v="Golden"].on { background: var(--g-gold); }
body.islands .seg button[data-v="Rainbow"].on { background: linear-gradient(90deg, #ff6b6b, #ffc93c, #4fe07a, #3cc0ff, #a77bff); }
body.islands .field { border: 2px solid var(--stroke); }

/* home hero: the island sits on the right, so only the text corner is shaded */
body.islands .hero::before {
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(8, 16, 52, .62) 0%, rgba(8, 16, 52, .3) 42%, rgba(8, 16, 52, 0) 68%);
}
body.islands .hero-in p { font-weight: 800; paint-order: stroke fill; -webkit-text-stroke: 3px var(--stroke); text-shadow: 0 2px 0 var(--stroke); }

/* the island in the home window bobs a little, like it floats */
.sky-layer.world img.bob { animation: bob 5.5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

@media (max-width: 900px) {
  body.islands .discord-btn .lbl, body.islands .play-btn .lbl { display: none; }
  body.islands .discord-btn, body.islands .play-btn { padding: 0 11px; }
  body.islands .top-actions { gap: 8px; }
  body.islands .hero .play-btn .lbl { display: inline; }
}
@media (max-width: 640px) {
  body.islands .topbar { gap: 8px; }
  body.islands .search-btn, body.islands .icon-btn, body.islands .play-btn, body.islands .discord-btn { height: 40px; }
  body.islands .icon-btn { width: 40px; }
  body.islands .discord-btn, body.islands .play-btn { padding: 0 9px; }
  body.islands .hero .play-btn, body.islands .hero .btn { height: 44px; font-size: 16px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .sky-layer.world img.bob { animation: none; } }

/* rail labels stay on one line with the bolder buttons */
body.islands .rail a { font-size: 14.5px; padding: 6px 9px; gap: 9px; }
body.islands .rail a.on { font-size: 15.5px; }

/* phones: a taller logo window with open sky at the top for the island */
@media (max-width: 640px) {
  body.islands .hero { min-height: clamp(540px, 80svh, 660px); }
  body.islands .hero-in img.logo { width: min(300px, 66%); }
}