:root{
  --bg:#F6E7C8; --bg2:#FFF4DC; --card:#FFFBF1; --ink:#4A2F14; --muted:#7a5b3a;
  --accent:#D23A2E; --accent-d:#9c241b; --wood:#A8743F; --wood-d:#6b4423; --gold:#FFC23F;
  --teal:#1f7f8c; --neon:#2B2A5C; --radius:18px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:linear-gradient(#FFF1D6,var(--bg) 380px,var(--bg));background-color:var(--bg);line-height:1.6;font-size:1.0625rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-d)}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
.center{text-align:center}
.small{font-size:.9rem;color:var(--muted)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2rem,6.5vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,4.5vw,2.1rem);margin-top:1.6em}
h3{font-size:1.2rem}
.section>.wrap>h2:first-child,.page-head h1,.world h2{margin-top:0}

/* header */
.site-header{background:var(--card);border-bottom:4px solid var(--wood);position:sticky;top:0;z-index:50}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;padding-top:.5rem;padding-bottom:.5rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--accent);font-weight:900;font-size:1.5rem;margin-right:auto}
.brand img{border-radius:10px}
.nav{display:flex;flex-wrap:wrap;gap:.2rem .3rem;order:3;width:100%}
.nav a{color:var(--ink);text-decoration:none;padding:.35rem .7rem;border-radius:999px;font-weight:700;font-size:.98rem}
.nav a:hover,.nav a[aria-current]{background:var(--gold);color:var(--ink)}
.langs{position:relative;order:2}
.langs summary{list-style:none;cursor:pointer;padding:.3rem .7rem;border-radius:999px;border:2px solid var(--wood);font-weight:800;font-size:.9rem;color:var(--ink);background:var(--card);white-space:nowrap}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:" \25BE"}
.langs[open] summary{background:var(--gold)}
.langlist{list-style:none;margin:.4rem 0 0;padding:.4rem;position:absolute;right:0;top:100%;z-index:60;width:max-content;max-width:calc(100vw - 2rem);max-height:70vh;overflow:auto;background:var(--card);border:3px solid var(--wood);border-radius:14px;box-shadow:0 8px 24px rgba(74,47,20,.25);display:grid;grid-template-columns:repeat(2,minmax(9rem,1fr));gap:.1rem}
@media(min-width:760px){.langlist{grid-template-columns:repeat(3,minmax(9.5rem,1fr))}}
.lang{display:block;padding:.35rem .6rem;border-radius:8px;font-weight:800;font-size:.95rem;text-decoration:none;color:var(--ink);border:2px solid transparent}
.foot-langs{margin:.8rem 0;font-size:.9rem}
.site-footer .foot-langs a{color:#f6e7c8;opacity:.9}
a.lang:hover{border-color:var(--wood)}
.lang.cur{background:var(--ink);color:#fff}
.btn-sm{order:2;padding:.45rem 1rem;font-size:.95rem}
@media(min-width:760px){.nav{order:0;width:auto;margin-left:1rem}.brand{margin-right:0}.langs{margin-left:auto}}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:800;padding:.7rem 1.4rem;border-radius:999px;box-shadow:0 4px 0 var(--accent-d);border:0;font-size:1rem;transition:transform .08s}
.btn:hover{color:#fff;background:#e0463a;transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-d)}
.btn-big{font-size:1.3rem;padding:.9rem 2rem}
.btn-alt{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--wood-d);border:2px solid var(--wood-d)}
.btn-alt:hover{background:#fff;color:var(--accent)}

/* hero */
.hero{padding:2rem 0 1rem;overflow:hidden}
.hero-grid{display:grid;gap:2rem;align-items:center}
.hero-copy h1 span{color:var(--accent);display:block}
.lead{font-size:1.2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.4rem 0 .8rem}
.hero-art{display:flex;justify-content:center}
.phone{background:#2a1a0b;border-radius:34px;padding:9px;box-shadow:0 18px 36px rgba(74,47,20,.35);overflow:hidden}
.phone img{border-radius:26px;width:100%}
.phone-hero{width:min(270px,70vw);transform:rotate(2.5deg)}
@media(min-width:820px){.hero-grid{grid-template-columns:1.2fr .8fr}.hero{padding:3.5rem 0 2rem}.phone-hero{width:300px}}

.section{padding:2.5rem 0}
.band{background:var(--card);border-block:4px solid #ecd6a8}
.sub{max-width:40rem;margin:-.2rem 0 1.6rem}
.page-head{padding:2.5rem 0 1rem}

/* world cards */
.cards3{display:grid;gap:1.2rem;grid-template-columns:1fr;margin:1.5rem 0}
@media(min-width:700px){.cards3{grid-template-columns:repeat(3,1fr)}}
.wcard{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 20px rgba(74,47,20,.18);border:3px solid var(--wood);display:flex;flex-direction:column}
.wcard img{aspect-ratio:1/1;width:100%;object-fit:cover;object-position:50% 100%}
.wcard div{padding:1rem 1.1rem 1.2rem}
.wcard h3{margin-bottom:.3em}
.wcard p{margin:0}
.wcard.harbor{border-color:var(--teal)}
.wcard.kiosk{border-color:#6a3fd1;background:#f1ecff}

/* steps */
.steps{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1rem}
@media(min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--bg2);border-radius:var(--radius);padding:1.2rem;border:3px solid var(--wood);position:relative}
.band .steps li{background:var(--bg)}
.num{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;margin-bottom:.5rem;box-shadow:0 3px 0 var(--accent-d)}
.steps p{margin:0}

/* features */
.feat{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:620px){.feat{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.feat{grid-template-columns:repeat(4,1fr)}}
.feat article{background:var(--card);border-radius:var(--radius);padding:1.1rem;border:2px solid #ecd6a8}
.feat p{margin:0}
.ico{font-size:2rem;line-height:1;margin-bottom:.4rem}
.shots{display:flex;gap:1rem;justify-content:center;margin:2rem 0 1rem;flex-wrap:wrap}
.shots .phone{width:min(210px,44vw);border-radius:26px;padding:7px}
.shots .phone img{border-radius:20px}
.cta{background:var(--wood);color:#fff;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 2px,transparent 2px 70px)}
.cta h2{margin-top:0}

/* worlds page */
.world{padding:2.5rem 0}
.world-grid{display:grid;gap:1.6rem;align-items:center}
.world img{border-radius:var(--radius);border:4px solid var(--wood);box-shadow:0 12px 26px rgba(74,47,20,.25);width:min(320px,100%);margin:0 auto}
@media(min-width:760px){.world-grid{grid-template-columns:320px 1fr}.world:nth-of-type(even) .world-grid{grid-template-columns:1fr 320px}.world:nth-of-type(even) img{order:2}}
.world.harbor{background:#dff1f0}
.world.kiosk{background:#2B2A5C;color:#FFF4D6}
.world.kiosk a:not(.btn){color:#FFD23F}
.world.kiosk img{border-color:#43e0e8}
.world.harbor img{border-color:var(--teal)}
dt{font-weight:800;margin-top:.8rem}
dd{margin:0}

/* text pages */
.plain{padding-left:1.3rem}
.plain li{margin:.5rem 0}
.faq details{background:var(--card);border:2px solid #ecd6a8;border-radius:14px;padding:.2rem 1rem;margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:800;padding:.7rem 0}
.faq p{margin:.2rem 0 .9rem}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.4rem}
.draft-note{background:#fff3c4;border:2px dashed #c79100;border-radius:12px;padding:.7rem 1rem;font-weight:700}
mark.ph{background:#ffe27a;color:var(--ink);padding:0 .25em;border-radius:4px}
.table-wrap{overflow-x:auto;margin:1rem 0}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.95rem}
th,td{border:1px solid #d8bf8a;padding:.5rem .7rem;text-align:left;vertical-align:top}
th{background:#f0dcae}
code{background:#f0dcae;padding:0 .3em;border-radius:4px}

/* footer */
.site-footer{background:var(--ink);color:#f6e7c8;padding:2rem 0 2.5rem;margin-top:2rem}
.site-footer a{color:#FFD98A}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:.8rem 0}
.foot-brand{display:flex;align-items:center;gap:.5rem;margin:0}
.foot-brand img{border-radius:8px}
.site-footer .small{color:#d8c49a}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:520px){.brand{font-size:1.25rem}.brand img{width:32px;height:32px}.langs{margin-left:auto}.brand{margin-right:0}}

/* Per-language system font stacks (no webfonts: nothing to download, no tofu on common OSes).
   The Latin/Greek/Cyrillic stack above already covers tr, pl, nl, id, de, fr, es, it, pt and the Latin/Cyrillic wave 3 languages (sv, da, nb, pt-PT, cs, uk, ro, ms, fi, hu, ru). */
:lang(ja){--font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP","Droid Sans Japanese",sans-serif}
:lang(ko){--font:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR","Noto Sans KR","Nanum Gothic","Droid Sans Fallback",sans-serif}
:lang(zh-Hans),:lang(zh-CN){--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",sans-serif}
:lang(zh-Hant),:lang(zh-TW){--font:"PingFang TC","Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans CJK TC","Noto Sans TC","Source Han Sans TC",sans-serif}
/* Wave 3. Thai: a Thai-capable stack is required (the default stack has no Thai glyphs and would show tofu
   boxes on some Linux/Android setups). Thai has no spaces between words, so lines break at dictionary boundaries. */
:lang(th){--font:"Thonburi","Sukhumvit Set","Leelawadee UI","Tahoma","Noto Sans Thai","Noto Sans Thai UI","Sarabun","Loma","Garuda","Droid Sans Thai",sans-serif}
:lang(th) body{line-height:1.85;overflow-wrap:anywhere}
:lang(th) h1,:lang(th) h2,:lang(th) h3{line-height:1.45;letter-spacing:0}
:lang(th) h1{font-size:clamp(1.8rem,6vw,3rem)}
/* Vietnamese stacks diacritics: put fonts with full Vietnamese coverage first. */
:lang(vi){--font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
:lang(vi) body{line-height:1.7}
:lang(vi) h1,:lang(vi) h2,:lang(vi) h3{line-height:1.3}
:lang(ja) body,:lang(ko) body,:lang(zh-Hans) body,:lang(zh-Hant) body{line-height:1.8}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ko) h1,:lang(ko) h2,:lang(ko) h3,:lang(zh-Hans) h1,:lang(zh-Hans) h2,:lang(zh-Hans) h3,:lang(zh-Hant) h1,:lang(zh-Hant) h2,:lang(zh-Hant) h3{line-height:1.35;letter-spacing:0}
:lang(ja) h1,:lang(zh-Hans) h1,:lang(zh-Hant) h1{font-size:clamp(1.8rem,6vw,3rem)}
:lang(ko) h1{font-size:clamp(1.8rem,6vw,3rem)}
:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
:lang(ja) body,:lang(zh-Hans) body,:lang(zh-Hant) body{line-break:strict;overflow-wrap:anywhere}
.langlist .lang[lang]{font-family:var(--font)}