/* Bonanza Fishing Safari — savanna.css
   Dusty midday savanna: umber ground, ochre sun, acacia green, river sky */

:root {
  --sf-ground: #1d1610;
  --sf-ground-2: #2b2118;
  --sf-ground-3: #3a2c1f;
  --sf-ochre: #d68c45;
  --sf-ochre-deep: #a9662b;
  --sf-acacia: #6a994e;
  --sf-acacia-deep: #4b7236;
  --sf-sky: #8ecae6;
  --sf-cream: #f8efe4;
  --sf-dust: #c2ae97;
  --sf-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  --sf-soft: 0 6px 18px rgba(0, 0, 0, .25);
  --sf-r-lg: 26px;
  --sf-r-md: 18px;
  --sf-r-sm: 12px;
  --sf-head: 'Rubik', 'Noto Sans Bengali', system-ui, sans-serif;
  --sf-body: 'PT Serif', 'Noto Sans Bengali', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.sf-body {
  min-height: 100dvh;
  background: var(--sf-ground);
  color: var(--sf-cream);
  font-family: var(--sf-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sf-sky); text-decoration: none; transition: color .18s, background-color .18s; }
a:hover { color: var(--sf-ochre); }
ul { list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--sf-sky); outline-offset: 3px; border-radius: 6px; }

.sf-haze {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 78% 0%, rgba(214, 140, 69, .22), transparent 70%),
    radial-gradient(50% 35% at 10% 12%, rgba(142, 202, 230, .10), transparent 70%),
    radial-gradient(80% 50% at 50% 110%, rgba(106, 153, 78, .16), transparent 70%),
    linear-gradient(180deg, #241a12 0%, var(--sf-ground) 55%, #17110c 100%);
}

/* header */
.sf-top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(29, 22, 16, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.sf-top-row, .sf-nav ul {
  max-width: 1180px; margin: 0 auto; padding: 0 22px;
}
.sf-top-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; }
.sf-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sf-head); font-weight: 800; font-size: clamp(1.02rem, 2.4vw, 1.3rem);
  color: var(--sf-cream); letter-spacing: .3px;
}
.sf-brand:hover { color: var(--sf-ochre); }
.sf-brand-badge {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 50% 50% 14px;
  background: linear-gradient(140deg, var(--sf-ochre), var(--sf-ochre-deep)); font-size: 1.15rem;
}
.sf-top-tools { display: flex; align-items: center; gap: 8px; }
.sf-nav ul { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 10px; }
.sf-nav a {
  display: block; padding: 7px 14px; border-radius: 999px;
  font-family: var(--sf-head); font-size: .86rem; font-weight: 500; color: var(--sf-dust);
}
.sf-nav a:hover { color: var(--sf-cream); background: rgba(214, 140, 69, .18); }
.sf-nav a[aria-current="page"] { color: var(--sf-ground); background: var(--sf-ochre); }

.sf-lang { position: relative; }
.sf-lang-btn, .sf-burger {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 13px; border: 0; border-radius: 999px;
  background: var(--sf-ground-3); color: var(--sf-cream);
  font-family: var(--sf-head); font-size: .84rem; font-weight: 600;
}
.sf-lang-btn, .sf-burger { white-space: nowrap; flex-shrink: 0; }
.sf-lang-btn:hover, .sf-burger:hover { background: #4a3828; }
.sf-lang-caret { font-size: .7rem; opacity: .7; transition: transform .18s; }
.sf-lang-btn[aria-expanded="true"] .sf-lang-caret { transform: rotate(180deg); }
.sf-burger { display: none; }
.sf-lang-list {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 200; min-width: 176px;
  padding: 6px; border-radius: var(--sf-r-md); background: var(--sf-ground-2); box-shadow: var(--sf-shadow);
}
.sf-lang-list.is-open { display: block; }
.sf-lang-opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font-family: var(--sf-head); font-size: .88rem; color: var(--sf-dust);
}
.sf-lang-opt:hover, .sf-lang-opt:focus-visible { background: rgba(214, 140, 69, .18); color: var(--sf-cream); }
.sf-lang-opt.is-active { color: var(--sf-ochre); font-weight: 700; }
.sf-lang-flag { font-size: 1.1rem; }

/* layout */
.sf-main { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 26px 22px 70px; }
.sf-eyebrow {
  display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px;
  background: rgba(106, 153, 78, .22); color: #b8d6a3;
  font-family: var(--sf-head); font-size: .74rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--sf-head); line-height: 1.2; color: var(--sf-cream); }

/* game stage */
.sf-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sf-stage-title {
  max-width: 760px; text-align: center; font-size: clamp(1.15rem, 3vw, 1.65rem); font-weight: 700;
  color: var(--sf-cream);
}
.sf-hud {
  display: flex; width: 100%; max-width: 700px; overflow: hidden;
  border-radius: var(--sf-r-md); background: var(--sf-ground-2); box-shadow: var(--sf-soft);
}
.sf-hud-cell {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 4px;
}
.sf-hud-cell:nth-child(even) { background: rgba(255, 255, 255, .03); }
.sf-hud-wide { flex: 1.4; }
.sf-hud-wider { flex: 1.6; }
.sf-hud-key { font-family: var(--sf-head); font-size: .62rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sf-dust); }
.sf-hud-num { font-family: var(--sf-head); font-size: 1.18rem; font-weight: 800; color: var(--sf-ochre); }
.sf-heart-row, .sf-perk-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.sf-heart { width: 20px; height: 18px; }
.sf-heart.is-gone { opacity: .22; filter: grayscale(1); }
.sf-perk-chip {
  padding: 2px 8px; border-radius: 999px; background: rgba(214, 140, 69, .2); color: var(--sf-ochre);
  font-size: .7rem; font-weight: 700; white-space: nowrap;
}

.sf-perk-slot { width: 100%; max-width: 700px; display: flex; justify-content: center; padding-bottom: 8px; }
.sf-perk-btn {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 440px; padding: 13px 26px; cursor: pointer; border: 0;
  border-radius: 999px 999px 999px 22px; color: var(--sf-ground); text-align: left;
  background: linear-gradient(120deg, #f0b46d, var(--sf-ochre) 55%, #c2702e);
  box-shadow: 0 5px 0 var(--sf-ochre-deep), 0 10px 26px rgba(214, 140, 69, .35);
  transition: transform .15s, box-shadow .15s, opacity .4s;
}
.sf-perk-btn::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: sf-glint 2.6s ease-in-out infinite;
}
@keyframes sf-glint { 0% { left: -70%; } 60%, 100% { left: 130%; } }
.sf-perk-btn:hover { transform: translateY(-2px); }
.sf-perk-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sf-ochre-deep); }
.sf-perk-btn.is-spent { opacity: 0; transform: scale(.94); pointer-events: none; }
.sf-perk-ico { font-size: 2rem; line-height: 1; animation: sf-turn 6s linear infinite; }
@keyframes sf-turn { to { transform: rotate(360deg); } }
.sf-perk-words { display: flex; flex-direction: column; }
.sf-perk-title { font-family: var(--sf-head); font-size: 1.12rem; font-weight: 800; }
.sf-perk-sub { font-size: .84rem; opacity: .85; }

.sf-arena {
  position: relative; width: 100%; max-width: 700px; aspect-ratio: 700 / 420; overflow: hidden;
  border-radius: var(--sf-r-lg); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 6px rgba(214, 140, 69, .14);
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
#sf-backdrop, #sf-water { position: absolute; inset: 0; width: 100%; height: 100%; }
#sf-backdrop { z-index: 0; }
#sf-water { z-index: 1; }
.sf-flash {
  position: absolute; left: 50%; top: 16%; z-index: 20; transform: translateX(-50%);
  font-family: var(--sf-head); font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 800; white-space: nowrap;
  color: var(--sf-cream); text-shadow: 0 2px 14px rgba(29, 22, 16, .9), 0 0 18px rgba(214, 140, 69, .8);
  opacity: 0; pointer-events: none;
}
.sf-flash.show { animation: sf-rise 1.2s ease-out forwards; }
@keyframes sf-rise {
  0% { opacity: 1; transform: translateX(-50%) scale(.8); }
  15% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px); }
}
.sf-over {
  position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 22px; text-align: center; background: rgba(29, 22, 16, .9); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.sf-over.show { opacity: 1; pointer-events: all; }
.sf-over-ico { font-size: 3.6rem; animation: sf-bob 3s ease-in-out infinite; }
@keyframes sf-bob { 50% { transform: translateY(-8px); } }
.sf-over-title { font-size: clamp(1.3rem, 4vw, 1.9rem); color: var(--sf-ochre); }
.sf-over-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sf-chip { display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 8px 14px; border-radius: var(--sf-r-sm); background: var(--sf-ground-3); }
.sf-chip span { font-family: var(--sf-head); font-size: .62rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sf-dust); }
.sf-chip strong { font-family: var(--sf-head); font-size: 1.2rem; color: var(--sf-cream); }
.sf-over-record { padding: 5px 14px; border-radius: 999px; background: rgba(106, 153, 78, .3); font-family: var(--sf-head); font-weight: 700; font-size: .85rem; }

/* buttons */
.sf-btn {
  cursor: pointer; border: 0; border-radius: 999px; padding: 13px 34px; width: 100%; max-width: 290px;
  font-family: var(--sf-head); font-size: 1.04rem; font-weight: 700; letter-spacing: .4px;
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.sf-btn:hover { transform: translateY(-2px); }
.sf-btn:active { transform: translateY(3px); }
.sf-btn:disabled { opacity: .5; cursor: default; transform: translateY(3px); }
.sf-btn-ochre { color: var(--sf-ground); background: var(--sf-ochre); box-shadow: 0 5px 0 var(--sf-ochre-deep), 0 8px 22px rgba(214, 140, 69, .35); }
.sf-btn-acacia { color: var(--sf-cream); background: var(--sf-acacia); box-shadow: 0 5px 0 var(--sf-acacia-deep), 0 8px 22px rgba(106, 153, 78, .35); }
.sf-btn-cast { color: var(--sf-ground); background: linear-gradient(120deg, var(--sf-sky), #b8e0f0); box-shadow: 0 5px 0 #5d9fbf, 0 8px 22px rgba(142, 202, 230, .3); }

/* wheel dialog */
.sf-wheel-layer {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(20, 14, 9, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.sf-wheel-layer.is-on { opacity: 1; visibility: visible; }
.sf-wheel-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; max-width: 500px; max-height: calc(100dvh - 28px); overflow-y: auto;
  padding: 28px 28px 30px; text-align: center; border-radius: 34px 34px 34px 12px;
  background: linear-gradient(170deg, #3a2c1f, var(--sf-ground-2) 60%); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.sf-wheel-title { font-size: clamp(1.25rem, 4vw, 1.7rem); color: var(--sf-ochre); }
.sf-wheel-sub { font-size: .9rem; color: var(--sf-dust); }
.sf-wheel-frame { position: relative; width: 320px; height: 320px; flex-shrink: 0; }
#sf-wheel-disc { display: block; border-radius: 50%; box-shadow: 0 0 0 8px rgba(214, 140, 69, .16), 0 16px 40px rgba(0, 0, 0, .5); transition: box-shadow .3s; }
#sf-wheel-disc.is-spinning { box-shadow: 0 0 0 8px rgba(214, 140, 69, .35), 0 0 60px rgba(214, 140, 69, .45); }
.sf-pointer {
  position: absolute; top: -12px; left: 50%; z-index: 5; width: 30px; height: 30px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--sf-cream), var(--sf-ochre));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
.sf-pin { position: absolute; top: 50%; left: 50%; z-index: 6; width: 40px; height: 40px; transform: translate(-50%, -50%); pointer-events: none; }
.sf-prize { display: none; width: 100%; padding: 14px 20px; border-radius: var(--sf-r-md); background: rgba(106, 153, 78, .18); }
.sf-prize.is-on { display: block; }
.sf-prize-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 4px; }
.sf-prize-name { font-family: var(--sf-head); font-size: 1.12rem; font-weight: 800; color: var(--sf-ochre); }
.sf-prize-text { font-size: .9rem; color: var(--sf-dust); }
#sf-go { display: none; }
#sf-go.is-on { display: inline-block; }

/* home: briefing */
.sf-brief {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center;
  margin-top: 64px; padding: 26px; border-radius: var(--sf-r-lg); background: var(--sf-ground-2); box-shadow: var(--sf-shadow);
}
.sf-brief-pic img { border-radius: 22px 22px 22px 70px; }
.sf-brief-text h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 12px; }
.sf-brief-text p { color: var(--sf-dust); margin-bottom: 12px; }
.sf-catch-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.sf-catch {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--sf-r-sm);
  background: rgba(142, 202, 230, .08); font-family: var(--sf-head); font-size: .72rem; color: var(--sf-cream); text-align: center;
}
.sf-catch img { width: 64px; }

/* home: features */
.sf-kit { margin-top: 64px; text-align: center; }
.sf-kit h2, .sf-bmap h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 22px; }
.sf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: left; }
.sf-tile {
  padding: 22px 20px; border-radius: var(--sf-r-md) var(--sf-r-md) var(--sf-r-md) 4px;
  background: linear-gradient(165deg, var(--sf-ground-3), var(--sf-ground-2)); box-shadow: var(--sf-soft);
}
.sf-tile-ico { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 12px; border-radius: 50%; background: rgba(214, 140, 69, .2); font-size: 1.5rem; }
.sf-tile h3 { font-size: 1.05rem; margin-bottom: 6px; }
.sf-tile p { font-size: .92rem; color: var(--sf-dust); }

/* home: bonus map */
.sf-bmap {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; margin-top: 64px;
  padding: 30px; border-radius: 30px 30px 30px 8px;
  background: linear-gradient(120deg, rgba(106, 153, 78, .22), rgba(142, 202, 230, .12));
}
.sf-bmap h2 { margin-bottom: 10px; }
.sf-bmap p:not(.sf-eyebrow) { color: var(--sf-dust); }
.sf-perk-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-perk-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--sf-ground-2); box-shadow: var(--sf-soft); font-family: var(--sf-head); font-size: .9rem; font-weight: 600;
}

/* home: contact teaser */
.sf-radio {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; margin-top: 64px;
  padding: 28px 30px; border-radius: var(--sf-r-lg); background: var(--sf-ochre); color: var(--sf-ground);
}
.sf-radio .sf-eyebrow { background: rgba(29, 22, 16, .15); color: var(--sf-ground); }
.sf-radio h2 { color: var(--sf-ground); font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: 6px; }
.sf-radio > div { max-width: 560px; }
.sf-radio-mails { display: flex; flex-direction: column; gap: 8px; }
.sf-radio-mails a {
  display: block; padding: 9px 18px; border-radius: 999px; background: rgba(29, 22, 16, .14);
  color: var(--sf-ground); font-family: var(--sf-head); font-weight: 600; overflow-wrap: anywhere;
}
.sf-radio-mails a:hover { background: var(--sf-ground); color: var(--sf-ochre); }
.sf-radio-mails .sf-radio-more { background: var(--sf-ground); color: var(--sf-cream); text-align: center; }

/* inner pages */
.sf-pagehead { max-width: 760px; margin: 18px 0 30px; }
.sf-pagehead h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: 10px; }
.sf-lede { font-size: 1.06rem; color: var(--sf-dust); }
.sf-stamp { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: var(--sf-ground-3); font-family: var(--sf-head); font-size: .8rem; color: var(--sf-dust); }
.sf-wide-pic { margin-bottom: 30px; }
.sf-wide-pic img { width: 100%; border-radius: 28px 28px 28px 90px; box-shadow: var(--sf-shadow); }
.sf-map-pic img { border-radius: 90px 28px 28px 28px; }

.sf-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sf-story { display: flex; gap: 16px; padding: 22px; border-radius: var(--sf-r-md); background: var(--sf-ground-2); box-shadow: var(--sf-soft); }
.sf-story:last-child { grid-column: 1 / -1; background: linear-gradient(120deg, rgba(214, 140, 69, .22), var(--sf-ground-2)); }
.sf-story-ico { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--sf-ground-3); font-size: 1.45rem; }
.sf-story h2 { font-size: 1.1rem; margin-bottom: 6px; }
.sf-story p { color: var(--sf-dust); font-size: .95rem; }

.sf-diaries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sf-diary {
  padding: 22px; border-radius: 6px 22px 22px 22px; background: #efe1c6; color: #3a2c1f;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transform: rotate(-.6deg);
}
.sf-diary:nth-child(even) { transform: rotate(.7deg); background: #e6d3b0; }
.sf-diary h2 { color: #2b2118; font-size: 1.12rem; margin-bottom: 8px; }
.sf-diary p { font-size: .94rem; }
.sf-diary-when {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--sf-acacia); color: var(--sf-cream); font-family: var(--sf-head); font-size: .74rem; font-weight: 600;
}

.sf-cares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sf-care { padding: 24px 22px; border-radius: var(--sf-r-md); background: var(--sf-ground-2); box-shadow: var(--sf-soft); }
.sf-care:nth-child(3n+1) { background: linear-gradient(160deg, rgba(106, 153, 78, .25), var(--sf-ground-2)); }
.sf-care-ico { display: block; font-size: 1.9rem; margin-bottom: 10px; }
.sf-care h2 { font-size: 1.08rem; margin-bottom: 6px; }
.sf-care p { color: var(--sf-dust); font-size: .94rem; }
.sf-callout {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding: 20px 24px;
  border-radius: var(--sf-r-md); background: rgba(142, 202, 230, .12);
}
.sf-callout span { font-size: 1.6rem; }

.sf-inboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sf-inbox { display: flex; gap: 14px; padding: 20px; border-radius: var(--sf-r-md); background: var(--sf-ground-2); box-shadow: var(--sf-soft); min-width: 0; }
.sf-inbox > div { min-width: 0; }
.sf-inbox-ico { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(214, 140, 69, .2); font-size: 1.3rem; }
.sf-inbox h2 { font-size: 1.04rem; margin-bottom: 4px; }
.sf-inbox p { color: var(--sf-dust); font-size: .9rem; margin-bottom: 8px; }
.sf-inbox a { display: inline-block; font-family: var(--sf-head); font-weight: 600; overflow-wrap: anywhere; }
.sf-inbox small { display: block; margin-top: 6px; color: #b8d6a3; font-size: .8rem; }
.sf-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.sf-desk-card { padding: 22px; border-radius: var(--sf-r-md); background: var(--sf-ground-3); }
.sf-desk-hours { background: linear-gradient(160deg, rgba(142, 202, 230, .2), var(--sf-ground-3)); }
.sf-desk-stop { background: linear-gradient(160deg, rgba(200, 85, 61, .22), var(--sf-ground-3)); }
.sf-desk-ico { display: block; font-size: 1.6rem; margin-bottom: 8px; }
.sf-desk-card h2 { font-size: 1.06rem; margin-bottom: 8px; }
.sf-desk-card p, .sf-desk-card li { color: var(--sf-dust); font-size: .92rem; }
.sf-ticks li, .sf-crosses li { position: relative; padding-left: 24px; margin-bottom: 4px; }
.sf-ticks li::before { content: '✔'; position: absolute; left: 0; color: var(--sf-acacia); }
.sf-crosses li::before { content: '✖'; position: absolute; left: 0; color: #e07a5f; }
.sf-asks { margin-top: 34px; }
.sf-asks h2 { font-size: 1.4rem; margin-bottom: 14px; }
.sf-ask { margin-bottom: 10px; border-radius: var(--sf-r-sm); background: var(--sf-ground-2); }
.sf-ask summary { cursor: pointer; padding: 15px 18px; font-family: var(--sf-head); font-weight: 600; list-style: none; }
.sf-ask summary::-webkit-details-marker { display: none; }
.sf-ask summary::before { content: '＋'; margin-right: 10px; color: var(--sf-ochre); }
.sf-ask[open] summary::before { content: '－'; }
.sf-ask p { padding: 0 18px 16px 42px; color: var(--sf-dust); }
.sf-asks-link { margin-top: 16px; }
.sf-asks-link a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: rgba(142, 202, 230, .14); font-family: var(--sf-head); font-weight: 600; }

.sf-clauses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sf-clause { padding: 20px 22px; border-radius: var(--sf-r-md); background: var(--sf-ground-2); }
.sf-clause:nth-child(4n+1) { background: linear-gradient(150deg, rgba(214, 140, 69, .18), var(--sf-ground-2)); }
.sf-clause h2 { font-size: 1.04rem; margin-bottom: 6px; color: var(--sf-ochre); }
.sf-clause p { color: var(--sf-dust); font-size: .94rem; }

.sf-flows { display: flex; flex-direction: column; gap: 12px; }
.sf-flow {
  display: grid; grid-template-columns: 1fr 210px; gap: 18px; align-items: center;
  padding: 18px 22px; border-radius: var(--sf-r-md); background: var(--sf-ground-2);
}
.sf-flow:nth-child(odd) { background: #30251b; }
.sf-flow h2 { font-size: 1.04rem; margin-bottom: 4px; }
.sf-flow p { color: var(--sf-dust); font-size: .93rem; }
.sf-flow-where { padding: 10px 14px; border-radius: var(--sf-r-sm); background: rgba(106, 153, 78, .18); font-family: var(--sf-head); font-size: .84rem; color: var(--sf-cream) !important; }
.sf-flow-where span { display: block; font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; color: #b8d6a3; }

/* footer */
.sf-foot { position: relative; z-index: 1; margin-top: 40px; background: #150f0a; }
.sf-foot-inner { max-width: 820px; margin: 0 auto; padding: 46px 22px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sf-foot-brand { font-family: var(--sf-head); font-weight: 800; font-size: 1.15rem; color: var(--sf-ochre); }
.sf-foot-tag { color: var(--sf-dust); font-size: .92rem; }
.sf-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sf-foot-links a { display: block; padding: 6px 12px; border-radius: 999px; background: var(--sf-ground-2); color: var(--sf-dust); font-family: var(--sf-head); font-size: .84rem; }
.sf-foot-links a:hover { color: var(--sf-cream); background: var(--sf-ground-3); }
.sf-age {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sf-acacia); color: var(--sf-cream); font-family: var(--sf-head); font-weight: 800;
}
.sf-warn { display: grid; gap: 8px; max-width: 660px; padding: 16px 20px; border-radius: var(--sf-r-md); background: var(--sf-ground-2); }
.sf-warn p { font-size: .8rem; line-height: 1.6; color: var(--sf-dust); }
.sf-owner { font-size: .84rem; color: var(--sf-cream); font-weight: 700; }
.sf-copy { font-size: .78rem; color: #8b7a66; }

/* responsive */
@media (max-width: 980px) {
  .sf-burger { display: inline-flex; }
  .sf-nav { display: none; }
  .sf-nav.is-open { display: block; }
  .sf-nav ul { flex-direction: column; padding-top: 4px; padding-bottom: 14px; }
  .sf-nav a { padding: 11px 14px; border-radius: var(--sf-r-sm); }
  .sf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-brief, .sf-bmap { grid-template-columns: 1fr; }
  .sf-diaries, .sf-cares, .sf-inboxes, .sf-desk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sf-main { padding: 18px 14px 56px; }
  .sf-top-row { padding: 0 14px; }
  .sf-nav ul { padding-left: 14px; padding-right: 14px; }
  .sf-brand > span:last-child { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-hud-cell { padding: 8px 2px; }
  .sf-hud-key { font-size: .54rem; letter-spacing: .6px; }
  .sf-hud-num { font-size: 1rem; }
  .sf-heart { width: 16px; height: 14px; }
  .sf-catch-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-tiles, .sf-stories, .sf-diaries, .sf-cares, .sf-inboxes, .sf-desk, .sf-clauses { grid-template-columns: 1fr; }
  .sf-story:last-child { grid-column: auto; }
  .sf-flow { grid-template-columns: 1fr; gap: 10px; }
  .sf-brief, .sf-bmap, .sf-radio { padding: 20px; }
  .sf-wheel-card { padding: 22px 16px 24px; }
  .sf-wheel-frame { width: 280px; height: 280px; }
  #sf-wheel-disc { width: 280px !important; height: 280px !important; }
}
@media (max-width: 420px) {
  .sf-burger span:last-child { display: none; }
  .sf-wheel-frame { width: 240px; height: 240px; }
  #sf-wheel-disc { width: 240px !important; height: 240px !important; }
  .sf-perk-btn { padding: 12px 18px; }
  .sf-perk-title { font-size: 1rem; }
  .sf-perk-sub { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}