/* CompanionLandia: clear light, quiet glass, warm accents. */
:root { --ink:#fbf8ef; --muted:#b1bdd2; --panel:rgba(17,23,38,.94); --line:rgba(159,196,255,.19); }
/* The same warm, tactile surfaces across creation, care, building and play. */
body { --panel-2:#1d2937; --field:#172331; --green-1:#b9d4a1; }
body .gmPicker,body .gmEnding,body .gmHud,body #createModal,body .panel {
  background:linear-gradient(155deg,rgba(35,48,55,.98),rgba(17,27,39,.97));
  border-color:rgba(218,230,210,.19);
}
body .gmPicker,body .gmEnding { border-radius:24px; box-shadow:0 24px 80px #06121c66; padding:28px; }
body .gmPickerTitle,body .gmEndTitle { font-size:25px; letter-spacing:-.025em; }
body .gmCard { border-radius:16px; padding:17px; gap:15px; background:linear-gradient(135deg,#ffffff08,#ffffff02); border-color:#cbd7cf25; }
body .gmCardIcon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:#d4d8b912; }
body .gmCardTitle { font-size:16px; } body .gmCardNote { line-height:1.6; }
body .gmHud { border-radius:19px; box-shadow:0 8px 32px #06121c30; }
body .gmHudTimer { font-variant-numeric:tabular-nums; color:#f1d79f; }
body .gmCardBtn,body .gmBackBtn,body .gmClose { border-radius:11px; min-height:38px; }
body .bar { border-radius:8px; overflow:hidden; background:#07132099; box-shadow:inset 0 1px 3px #0004; }
body .barFill { border-radius:8px; box-shadow:inset 0 1px #ffffff35; }
body .needRow { padding-top:5px; padding-bottom:5px; }
body .field input[type=text],body .field select { border-radius:11px; padding:11px 12px; border-color:#b2c5c32b; background:#0e1c2988; }
body .previewStage { border-radius:20px; background:radial-gradient(ellipse at 50% 30%,#a0afa0,#526968 65%,#30434b); box-shadow:inset 0 1px 0 #ffffff25,0 14px 30px #07131e2b; border-color:#d8e0c72e; }
body .previewCaption { padding:8px 0; line-height:1.65; color:#b9c8c8; }
body .createPreviewCol { background:transparent; }
body #createModal h2 { font-size:28px; letter-spacing:-.035em; }
body .swatch { box-shadow:inset 0 1px 3px #ffffff60,0 2px 5px #0003; }
body #storeOverlay { background:radial-gradient(ellipse at 20% 0%,#293c40,#101e2b 70%); color:#f8f1e3; }
body #storeOverlay .stHead { padding:21px 26px 0; background:#152631bb; border-bottom-color:#d0ddd31c; }
body #storeOverlay .stHead h1 { font-size:27px; letter-spacing:-.035em; }
body #storeOverlay .stGrid { gap:18px; }
body #storeOverlay .stCard { background:linear-gradient(150deg,#31434a,#1a2b37); border-color:#c1d1ca25; border-radius:19px; padding:11px 11px 15px; box-shadow:0 5px 14px #07121d24; }
body #storeOverlay .stCard:hover { border-color:#e7c887a6; transform:translateY(-3px); box-shadow:0 12px 25px #07121d50; }
body #storeOverlay .stCard.selected { border-color:#edcb8b; box-shadow:0 0 0 1px #edcb8b inset; }
body #storeOverlay .stThumb,body #storeOverlay .stPreviewStage { border-radius:13px; background:radial-gradient(ellipse at 50% 35%,#a5b1a0,#627a76 70%,#3b5159); }
body #storeOverlay .stCardName { font-size:14px; margin-top:3px; }
body #storeOverlay .stPrice { color:#edcf96; }
body #storeOverlay .stSide { background:#12233099; padding:24px; }
body #storeOverlay .stSideName { font-size:23px; }
body #storeOverlay .stSideBlurb { color:#b7c8c8; line-height:1.7; }
body #storeOverlay .stTab { padding:10px 16px; }
body #storeOverlay .stBadge { backdrop-filter:blur(8px); background:#152530cc; }
body #storeOverlay .stCartPanel { background:#192c37; }
@media(max-width:720px) {
  body .gmPicker,body .gmEnding { padding:22px 18px; }
  body #storeOverlay .stHead { padding:12px 14px 0; }
  body #storeOverlay .stGrid { gap:10px; }
  body #storeOverlay .stGridWrap { padding:14px 12px; }
  body .createPreviewCol { background:#1b2b36; border-radius:12px; }
  body #createModal h2 { font-size:24px; }
}
button, a, input, select { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button.ghost, button.primary, button.secondary { min-height:38px; border-radius:12px; transition:background .18s,border-color .18s,box-shadow .18s,transform .18s; }
button.primary { background:linear-gradient(150deg,#ffdc93,#ffcf6b); box-shadow:inset 0 1px 0 rgba(251,248,239,.6),0 4px 16px rgba(255,207,107,.12); font-weight:600; }
button.primary:hover { box-shadow:inset 0 1px 0 rgba(251,248,239,.6),0 5px 22px rgba(255,207,107,.24); }
#topbar { padding:14px 24px; background:linear-gradient(180deg,rgba(10,14,28,.96),rgba(17,23,38,.83)); border-bottom-color:rgba(159,196,255,.14); box-shadow:0 5px 24px rgba(10,14,28,.15); }
#homeBtn { font-size:22px; letter-spacing:-.045em; }
#homeBtn::before { content:""; display:inline-block; width:26px; height:26px; margin-right:10px; background:url('/web/favicon.svg') center/contain no-repeat; vertical-align:-5px; }
#topActions { gap:7px; }
#topActions .ghost { background:rgba(159,196,255,.045); border-color:rgba(159,196,255,.14); }
#topActions .ghost:hover { background:rgba(255,207,107,.08); border-color:rgba(255,207,107,.55); }
#crumb { font-size:11px; letter-spacing:.02em; }
#spaceBtn { top:82px; left:24px; padding:10px 16px; border:1px solid var(--line); background:var(--panel); box-shadow:0 4px 18px rgba(10,14,28,.18); }
#stageHint { right:24px; bottom:20px; padding:9px 14px; border-radius:12px; color:var(--muted); background:rgba(17,23,38,.85); }
.panel { top:82px; right:16px; bottom:18px; border:1px solid var(--line); border-radius:22px; padding:26px 24px; box-shadow:0 16px 48px rgba(10,14,28,.35),inset 0 1px 0 rgba(251,248,239,.05); transform:translateX(calc(100% + 24px)); scrollbar-width:thin; scrollbar-color:rgba(159,196,255,.25) transparent; }
.panel.open { transform:translateX(0); }
.panelClose { width:32px; height:32px; border-radius:50%; background:rgba(159,196,255,.07); top:12px; right:12px; }
.panelClose:hover { background:rgba(255,207,107,.12); color:var(--accent); }
.regionHead h2 { font-size:34px; letter-spacing:-.04em; margin-bottom:14px; }
.regionKind { font-size:10px; letter-spacing:.19em; margin-bottom:10px; }
.regionBlurb { font-size:18px; line-height:1.55; }
.regionFlavour { line-height:1.7; }
.regionStats { gap:0; padding:18px 0; margin:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.regionStat { flex:1; }
.regionStat b { font-size:27px; }
.regionStat + .regionStat { border-left:1px solid var(--line); padding-left:17px; }
.villageList { gap:9px; }
.villageRow { padding:13px 14px; border-radius:13px; background:rgba(159,196,255,.045); }
.villageRow b { font-size:16px; }
.villageRow:hover { background:rgba(255,207,107,.07); }
.overlay { background:rgba(10,14,28,.70); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#createModal { box-shadow:0 24px 90px rgba(10,14,28,.55); border-radius:24px; }
body .plLabelLayer .plLabel { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-color:rgba(159,196,255,.23); box-shadow:0 4px 16px rgba(10,14,28,.25); }
body .plLabelLayer .plLabel-region { font-size:14px; font-weight:560; letter-spacing:.015em; padding:7px 14px 8px 10px; }
body .plLabelLayer .plLabel::before { box-shadow:none; }
#welcomeCard { position:fixed; z-index:20; left:32px; bottom:100px; width:310px; padding:24px 0; pointer-events:auto; transition:opacity .3s,transform .3s,visibility .3s; text-shadow:0 2px 20px #0a0e1c; }
.welcomeEyebrow { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--accent); margin-bottom:20px; }
.welcomeEyebrow>span { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:7px; box-shadow:0 0 12px rgba(255,207,107,.5); }
#welcomeTitle { font-weight:560; font-size:43px; line-height:1.09; letter-spacing:-.045em; margin-bottom:18px; }
#welcomeCard p { font-size:13px; line-height:1.8; color:#b1bdd2; margin-bottom:22px; }
.welcomeActions { display:flex; gap:9px; }
.welcomeActions button { min-height:44px; padding:0 13px; font-size:12px; }
.welcomeActions .primary span { margin-left:8px; }
.welcomeFoot { margin-top:17px; font-size:9px; letter-spacing:.02em; color:var(--muted); }
.welcomeFoot span { margin:0 6px; }
body:not([data-view="SPACE"]) #welcomeCard, body:has(.panel.open) #welcomeCard, body:has(.overlay:not([hidden])) #welcomeCard, body:has(#loading:not(.out)) #welcomeCard { opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none; }
@media (min-width:1500px) { #welcomeCard { left:5vw; bottom:18vh; width:360px; } #welcomeTitle { font-size:52px; } }
@media (max-width:1050px) { #welcomeCard { bottom:72px; left:24px; width:255px; } #welcomeTitle { font-size:34px; } #welcomeCard p { font-size:12px; } .welcomeEyebrow { font-size:8px; } #brand { gap:8px; } #homeBtn { font-size:18px; } #homeBtn::before { width:22px; height:22px; margin-right:6px; } }
@media (max-width:720px) { #topbar { padding:10px 12px; } #topActions { gap:5px; } #homeBtn { font-size:18px; } #welcomeCard { left:18px; right:18px; bottom:68px; width:auto; padding:16px 18px; border-radius:18px; border:1px solid var(--line); background:rgba(17,23,38,.92); } #welcomeTitle { font-size:27px; } #welcomeTitle br { display:none; } .welcomeEyebrow { margin-bottom:10px; } #welcomeCard p { display:none; } .welcomeFoot { margin-top:10px; } #welcomeTitle { margin-bottom:14px; } .welcomeActions button { min-height:44px; } #spaceBtn { top:calc(var(--clTopbarH,96px) + 10px); left:12px; } .panel { top:auto; right:0; bottom:0; border-radius:22px 22px 0 0; padding:24px 18px; transform:translateY(calc(100% + 12px)); } .panel.open { transform:translateY(0); } #stageHint { right:12px; } }
@media (max-height:570px) { #welcomeCard { display:none; } }
@media (max-width:720px) {
  #topActions button { font-size:11px; padding:7px 8px; min-height:44px; }
  #spaceBtn { top:calc(var(--clTopbarH,96px) + 10px)!important; }
  #stageHint { top:calc(var(--clTopbarH,96px) + 58px); bottom:auto; left:12px; right:12px; padding:7px 9px; font-size:10px; }
  #previewArtControls { bottom:70px!important; left:12px!important; right:12px; justify-content:center; flex-wrap:wrap; font-size:11px!important; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
#previewArtControls { max-width:calc(100vw - 40px); flex-wrap:wrap; box-shadow:0 6px 24px #08121b44; }
#previewArtControls[hidden],body:has(#storeOverlay:not([hidden])) #previewArtControls,body:has(.overlay:not([hidden])) #previewArtControls { display:none!important; }
@media(min-width:721px) { body:has(#previewArtControls:not([hidden])) #stageHint { bottom:84px; } }