:root {
  --dw-bg: #f6e7c4; --dw-fg: #22333b; --dw-accent: #d9583e; --dw-panel: rgba(34, 51, 59, .96);
  --dw-font-body: 'Work Sans', system-ui, sans-serif; --display: 'Shrikhand', Georgia, serif; --lcd: 'VT323', ui-monospace, monospace;
  --sand: #f3dfb3; --coral: #e9775c; --teal: #1d6f78; --deep: #22333b; --cream: #fbf3e0; --line: rgba(34, 51, 59, .18);
}
body { overflow-x: hidden; background: var(--dw-bg); }
.dw-toast { color: var(--cream); }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0 0 .45em; color: var(--deep); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
section { padding: clamp(56px, 8vw, 110px) clamp(16px, 5vw, 64px); }
a { color: var(--teal); }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 10px clamp(16px, 4vw, 40px); background: #f6e7c4e8; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 3px solid var(--coral); }
.brand { font-family: var(--display); font-size: 1.45rem; color: var(--teal); text-decoration: none; }
.brand span { color: var(--coral); margin-left: .1em; }
.topbar nav { display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: .92rem; }
.topbar nav a { color: var(--deep); text-decoration: none; }
.topbar nav a:hover { color: var(--coral); }
@media (max-width: 640px) { .topbar nav a { display: none; } }

.hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; min-height: 100svh; padding-top: 96px;
  background: radial-gradient(90% 70% at 80% 30%, #ffd59a 0%, transparent 60%), var(--dw-bg); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: 0; } .poster { order: -1; } }
.kicker { font-family: var(--lcd); font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: 0 0 .6rem; }
.hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.4rem); color: var(--coral); text-shadow: 3px 3px 0 var(--deep); }
.lede { font-size: clamp(1.05rem, 1.8vw, 1.2rem); max-width: 46ch; }
.hint { font-size: .9rem; opacity: .75; font-style: italic; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }
.btn { font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--deep); border: 3px solid var(--deep); padding: .8em 1.3em; border-radius: 999px; background: var(--cream); transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-hot { background: var(--coral); color: #fff; }
.poster { position: relative; margin: 0; border: 10px solid var(--cream); box-shadow: 0 2px 0 var(--deep), 0 30px 60px #22333b44; transform: rotate(1.2deg); background: var(--cream); }
.poster img { width: 100%; height: auto; }

.hs { position: absolute; width: 8%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed transparent; background: transparent; transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: var(--coral); background: #e9775c33; }
.hs.is-found { border-color: #1d6f7866; }
.hs-glint { left: 68%; top: 80%; } .hs-bottle { left: 79.5%; top: 68%; width: 9%; } .hs-light { left: 84%; top: 15%; width: 6%; }
.hs-key { left: 58%; top: 38%; width: 10%; } .hs-locket { left: 66%; top: 66%; width: 10%; } .hs-soldier { left: 64%; top: 46%; width: 10%; }

.game { background: var(--teal); color: var(--cream); }
.game h2 { color: var(--cream); }
.game-head { max-width: 860px; margin: 0 auto 1.4rem; text-align: center; }
.game a { color: var(--sand); }
kbd { font-family: var(--lcd); font-size: 1.05em; border: 1px solid currentColor; border-radius: 4px; padding: 0 .35em; }
.rig { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .rig { grid-template-columns: 1fr; } }
.beach-frame { position: relative; border-radius: 18px; overflow: hidden; border: 6px solid var(--cream); box-shadow: 0 24px 60px #0005; }
#sand.is-tall { aspect-ratio: 640 / 720; }
#sand { width: 100%; height: auto; aspect-ratio: 16 / 10; display: block; touch-action: none; cursor: none; background: var(--sand); }
.dug { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(86%, 380px); background: var(--cream); color: var(--deep); border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 20px 50px #0006; text-align: center; border: 3px solid var(--deep); animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.dug b { display: block; font-family: var(--display); font-size: 1.4rem; color: var(--coral); line-height: 1.1; margin: .2em 0; }
.dug .ico { font-size: 2.2rem; line-height: 1; }
.dug small { display: block; opacity: .75; }
.dug button { margin-top: .6rem; font: inherit; font-weight: 700; border: 2px solid var(--deep); background: var(--sand); border-radius: 999px; padding: .4em 1em; cursor: pointer; color: var(--deep); }
@keyframes pop { from { transform: translate(-50%, -40%) scale(.8); opacity: 0; } }
.unit { background: #2c3e46; border-radius: 22px; padding: 16px; border: 4px solid #1a262b; box-shadow: inset 0 2px 0 #ffffff1a, 0 20px 40px #0004; display: grid; gap: 12px; }
.power { font: inherit; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .6em; border-radius: 999px; border: 2px solid #ffffff44; background: #1a262b; color: #9fb3ba; cursor: pointer; }
.power[aria-pressed="true"] { background: #2e8b57; color: #eaffef; border-color: #7dffb0; box-shadow: 0 0 18px #7dffb066; }
.lcd { background: #b9c9a0; color: #1d2a12; border-radius: 10px; padding: 10px 12px; font-family: var(--lcd); border: 3px solid #1a262b; box-shadow: inset 0 3px 8px #0003; }
.lcd-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.3rem; }
.lcd-row b { font-size: 3rem; line-height: 1; }
.lcd-row.small { font-size: 1.15rem; }
.lcd-row.small b { font-size: 1.3rem; }
.bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: 6px 0; height: 22px; align-items: end; }
.bars i { display: block; background: #1d2a1222; height: 100%; border-radius: 2px; }
.bars i.on { background: #1d2a12; }
.dig { font-family: var(--display); font-size: 1.5rem; padding: .35em; border-radius: 14px; border: 3px solid #1a262b; background: var(--coral); color: #fff; cursor: pointer; box-shadow: 0 4px 0 #1a262b; }
.dig:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a262b; }
.dig[disabled] { opacity: .5; cursor: not-allowed; }
.keys { margin: 0; font-size: .82rem; color: #c8d6da; }
.pouch { background: var(--cream); color: var(--deep); border-radius: 12px; padding: 10px 12px; }
.pouch-h { margin: 0 0 .3rem; font-weight: 700; }
.pouch ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; max-height: 180px; overflow: auto; }
.pouch li { display: flex; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line); padding: 3px 0; }
.again { margin-top: .5rem; font: inherit; font-weight: 700; width: 100%; border-radius: 999px; border: 2px solid var(--deep); background: var(--sand); padding: .4em; cursor: pointer; color: var(--deep); }
.token { display: block; margin: 18px auto 0; font: inherit; font-weight: 700; background: #c9a227; color: var(--deep); border: 3px solid var(--deep); border-radius: 999px; padding: .6em 1.3em; cursor: pointer; }
.token[hidden] { display: none; }

.tray { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .tray { grid-template-columns: 1fr; } }
.art { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 6px solid var(--cream); box-shadow: 0 24px 50px #22333b40; transform: rotate(-.8deg); }
.art img { width: 100%; height: auto; }
.features { padding-left: 1.1em; }
.features li { margin: .45em 0; }
.found { font-family: var(--lcd); font-size: 1.3rem; }
.reward { padding: .8rem 1rem; border: 3px solid var(--coral); border-radius: 12px; background: #fff6; }
.journal li { margin: .5em 0; }

.vote { text-align: center; max-width: 1000px; margin: 0 auto; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 1.2rem auto 0; }
.offer { font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--deep); background: var(--cream); border: 3px solid var(--deep); border-radius: 18px; padding: 1em; cursor: pointer; box-shadow: 0 4px 0 var(--deep); transition: transform .15s; }
.offer small { font-weight: 400; font-size: .86rem; }
.offer:hover, .offer:focus-visible { transform: translateY(-3px); background: #fff; }
.offers.small .offer { font-size: .95rem; font-weight: 600; }
.also { margin: 2rem 0 0; font-weight: 600; }

.club { display: grid; justify-items: center; text-align: center; background: var(--coral); color: #fff; }
.club h2 { color: #fff; text-shadow: 3px 3px 0 var(--deep); }
.club .dw-optin { text-align: left; width: 100%; --dw-fg: #22333b; --dw-bg: #fbf3e0; color: #fff; }
.club .dw-optin input[type=email] { background: var(--cream); color: var(--deep); border: 3px solid var(--deep); }
.club .dw-optin button[type=submit] { background: var(--deep); color: #fff; }
.club .dw-consent { opacity: 1; }
.offer-note { margin: 0; font-family: var(--lcd); font-size: 1.3rem; color: var(--deep); }

.foot { padding: 30px 16px 10px; text-align: center; }
.more { font-weight: 600; font-size: .92rem; }