/* ============================================================
   BẢN ĐỒ VỊ TRÍ NORTON PARK — artwork "LOCATION MAPS" đối tác duyệt 27/09/2026
   Một giao diện sáng duy nhất (artwork nền kem của đối tác) — cố ý không có bản tối.
   ============================================================ */
:root{
  --paper:#f6f4ed; --ground:#f6f4ed; --card:#FFFDF8; --card-2:#FFFAF4;
  --ink:#243C34; --olive:#355c46; --road:#7F855D; --bronze:#c3a16b; --bronze-d:#8A6647; --tan:#996633;
  --gold:#c3a16b; --metro:#7bafa9; --char:#333333; --muted:rgba(36,60,52,.58);
  --line:rgba(36,60,52,.13); --line-2:rgba(164,124,93,.34);
  --shadow:0 16px 42px rgba(36,60,52,.16); --shadow-s:0 6px 18px rgba(36,60,52,.14);
  --f-disp:'The Seasons',Georgia,'Times New Roman',serif;
  --f-sub:'Futura Norton','Century Gothic','Avenir Next','Segoe UI',system-ui,sans-serif;
  --f-body:'Gotham Norton','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --top:64px;          /* chừa hàng tab "Tổng quan | Bản đồ thực tế" của khung ngoài */
  --gap:14px; --bw:clamp(300px,27vw,368px); --peek:74px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font:400 14px/1.45 var(--f-body);overflow:hidden;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--bronze);outline-offset:2px;border-radius:8px}
*{scrollbar-width:thin;scrollbar-color:rgba(164,124,93,.45) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background-color:rgba(164,124,93,.45);border-radius:99px;border:2px solid transparent;background-clip:padding-box}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#lm{position:relative;height:100%;overflow:hidden;background:var(--paper)}

/* ---------- bản đồ ---------- */
#stage{position:absolute;inset:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#stage.drag{cursor:grabbing}
#stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
/* Chrome tách mỗi phần tử SVG đang có hiệu ứng transform/opacity thành một lớp GPU, rồi cắt phần bản đồ tĩnh nằm xen giữa
   thành từng khúc to cỡ cả tấm bản đồ: đo 27/09 được 135 lớp lúc chờ, 182 lớp sau khi chạm một khung thời gian, 120–141
   triệu điểm ảnh ở màn DPR 2 → vượt ngân sách bộ nhớ ô vẽ, Chrome bỏ bớt ô và bản đồ trắng từng mảng (MacBook Air, iPad
   ngang). will-change:contents báo "nội dung bên trong đổi liên tục": Chrome không tách lớp cho hiệu ứng bên trong nữa,
   cả SVG vẽ trong một lớp (còn 12 lớp cho cả trang, 8 triệu điểm ảnh). Safari / Firefox không tách lớp SVG kiểu này. */
#art{will-change:contents}
#art [data-k],#art #np,#art #compassG,#art [id^="air-"],#art .echo,#art .ripple circle,#art [data-u]{transform-box:fill-box;transform-origin:center}
#art [data-g]{transition:fill-opacity .45s ease,stroke-opacity .45s ease}
#art.boot [data-g]{transition:none}
/* mép phải artwork: đường nhạt dần như bản thiết kế (bảng thông tin HTML thay cho bảng vẽ sẵn) */
#fadeR{pointer-events:none}
/* lọc lớp — sinh thêm trong script: #art.off-<lớp> [data-g=<lớp>] */
#art .hide{opacity:0!important;pointer-events:none}
/* làm nổi: mọi thứ khác lùi lại. Làm mờ bằng fill-/stroke-opacity, KHÔNG bằng opacity: 388 phần tử opacity .16 là 388 nút
   hiệu ứng và Chrome lại cắt SVG thành 27 lớp (58 triệu điểm ảnh ở DPR 2, dù đã có will-change); fill-/stroke-opacity chỉ
   là thuộc tính tô màu nên không sinh lớp. Logo dự án (#np) giữ nguyên độ đậm */
#art.hl [data-g]:not([data-g="paper"],[data-g="river"],.on,#np,#np *){fill-opacity:.16;stroke-opacity:.16}
#art.hl #comets{stroke-opacity:.3;transition:stroke-opacity .45s}
#pulses circle{fill:none;stroke:var(--bronze);animation:ring 2.2s cubic-bezier(.2,.7,.3,1) infinite}
#pulses circle.core{fill:var(--bronze);fill-opacity:.18;stroke:none;animation:breath 2.2s ease-in-out infinite}
#pulses circle:nth-of-type(3n+2){animation-delay:.73s}
#pulses circle:nth-of-type(3n){animation-delay:1.46s}
@keyframes ring{0%{transform:scale(.35);opacity:.95}80%,100%{transform:scale(1.55);opacity:0}}
@keyframes breath{0%,100%{transform:scale(.85);opacity:.5}50%{transform:scale(1.1);opacity:.9}}
#pulses circle,#halo circle{transform-box:fill-box;transform-origin:center}
#halo circle{fill:none;stroke:#c3a16b;animation:ring 3s cubic-bezier(.2,.7,.3,1) infinite}
#halo circle:nth-child(2){animation-delay:1s}
#halo circle:nth-child(3){animation-delay:2s}
#halo circle.glow{stroke:none;fill:#C9A57F;fill-opacity:.22;animation:breath 3.4s ease-in-out infinite}
#hits circle{fill:transparent;cursor:pointer}
#comets path{fill:none;stroke-linecap:round;pointer-events:none}

/* ---------- bảng thông tin (máy tính: thẻ bên phải · điện thoại: tấm kéo lên) ---------- */
#board{position:absolute;z-index:20;top:var(--top);right:var(--gap);bottom:var(--gap);width:var(--bw);
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.25,1),opacity .35s}
#board.min{transform:translateX(calc(100% + var(--gap) + 8px));opacity:0;pointer-events:none}
.bd-handle{display:none}
.bd-head{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 22px 4px}
.bd-head .logo{width:min(214px,78%);height:auto;display:block}
.icon-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:99px;display:grid;place-items:center;
  color:var(--muted);transition:background .2s,color .2s}
.icon-btn:hover{background:rgba(164,124,93,.12);color:var(--ink)}
.icon-btn svg{width:16px;height:16px}
/* máy tính: hàng mục gọn dưới logo — bấm là cuộn tới mục đó (bộ lọc không bị khuất cuối bảng) */
.bd-tabs{flex:none;display:flex;gap:3px;margin:10px 16px 0;padding:3px;border-radius:99px;background:rgba(36,60,52,.05)}
.bd-tabs button{flex:1;padding:8px 4px;border-radius:99px;font:700 9.5px/1 var(--f-sub);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);opacity:.6;transition:.25s}
.bd-tabs button:hover{opacity:.9}
.bd-tabs button.on{opacity:1;background:var(--card);box-shadow:0 2px 8px rgba(36,60,52,.14)}
.bd-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 20px 18px;margin-top:10px;border-top:1px solid var(--line)}
.sec{padding:16px 0 4px}
.sec + .sec{border-top:1px solid var(--line)}
.sec-t{margin:0 0 12px;font:400 12.5px/1 var(--f-disp);letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}

/* nổi bật: LIỀN KỀ / ĐỐI DIỆN / ĐÓN ĐẦU / KẾ CẬN */
.hi-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.hi{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto auto;column-gap:10px;row-gap:3px;
  text-align:left;padding:8px;margin:-8px;border-radius:12px;transition:background .2s}
.hi:hover,.hi.on{background:rgba(164,124,93,.1)}
.hi .k{grid-column:1/3;display:flex;align-items:center;gap:6px;font:400 13px/1.1 var(--f-disp);letter-spacing:.06em;
  text-transform:uppercase;color:var(--bronze);white-space:nowrap}
.hi .k:after{content:'';flex:1;height:0;border-top:1px solid var(--line-2);margin-left:2px}
.hi .ic{grid-row:2/4;width:40px;height:40px}
.hi .ic svg{width:100%;height:100%;display:block}
.hi b{align-self:end;font:700 12px/1.15 var(--f-sub);letter-spacing:.04em;text-transform:uppercase;color:var(--olive)}
.hi span{font:400 11.5px/1.2 var(--f-body);color:var(--olive);white-space:nowrap}

/* thời gian di chuyển */
.bands{position:relative;display:flex;flex-direction:column;gap:6px}
.band{display:grid;grid-template-columns:74px 22px 1fr;align-items:start;gap:6px;text-align:left;
  padding:8px 6px 10px;margin:0 -6px;border-radius:14px;transition:background .2s}
.band:hover{background:rgba(164,124,93,.07)}
.band.on{background:rgba(164,124,93,.13)}
.band .num{width:70px;height:70px;border-radius:99px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#FEF9F5;border:1px solid rgba(164,124,93,.28);box-shadow:inset 0 0 0 5px rgba(255,255,255,.7)}
.band .num b{display:flex;align-items:center;font:300 24px/1 var(--f-disp);color:var(--bronze);letter-spacing:-.01em;font-variant-numeric:lining-nums}
.band .num .dash{display:inline-block;width:.34em;height:1.3px;margin:0 .07em;background:currentColor;opacity:.85}
.band .num i{font:400 9px/1.2 var(--f-sub);font-style:normal;letter-spacing:.14em;color:var(--tan);margin-top:3px}
.band .leaf{width:18px;height:28px;margin-top:4px}
.band .leaf svg{width:100%;height:100%}
.band ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.band li{position:relative;padding:2px 0 2px 12px;font:400 12.5px/1.3 var(--f-body);color:var(--char)}
.band li:before{content:'';position:absolute;left:1px;top:9px;width:4px;height:4px;border-radius:99px;background:#C29A74}
.band li.go{cursor:pointer;border-radius:6px}
.band li.go:hover{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(164,124,93,.5);text-underline-offset:3px}
.band li.off{color:rgba(51,51,51,.62)}

/* bộ lọc: mẫu nhanh + chú thích bấm bật / tắt + nhóm tiện ích */
.presets{display:flex;gap:6px;margin-bottom:12px}
.presets button{flex:1;padding:9px 6px;border-radius:99px;border:1px solid var(--line);
  font:700 10.5px/1 var(--f-sub);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:.2s}
.presets button:hover{border-color:rgba(164,124,93,.5)}
.presets button.on{background:var(--ink);color:#F3EBDA;border-color:var(--ink)}
.legend{display:grid;grid-template-columns:1fr;gap:1px}
.lg{display:flex;align-items:center;gap:10px;width:100%;padding:7px 6px;border-radius:9px;text-align:left;
  font:400 12.5px/1.25 var(--f-body);color:var(--char);transition:background .18s,opacity .18s}
.lg:hover{background:rgba(164,124,93,.09)}
.lg .sw{flex:none;width:34px;height:12px}
.lg .sw svg{width:100%;height:100%;display:block;overflow:visible}
.lg i{flex:1;font-style:normal}
.lg .tick{flex:none;width:18px;height:18px;border-radius:6px;border:1.4px solid rgba(36,60,52,.35);display:grid;place-items:center;transition:.18s}
.lg .tick svg{width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transform:scale(.5);transition:.18s}
.lg.on .tick{background:var(--bronze);border-color:var(--bronze)}
.lg.on .tick svg{opacity:1;transform:none}
.lg:not(.on){opacity:.55}
.cats{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 2px 50px}
.cats button{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;border:1px solid var(--line);
  font:400 11.5px/1 var(--f-body);color:var(--char);transition:.2s}
.cats button i{width:8px;height:8px;border-radius:99px;background:var(--c)}
.cats button:not(.on){opacity:.5}
.cats button.on{border-color:rgba(164,124,93,.45);background:rgba(164,124,93,.08)}
.foot{margin-top:14px;padding:12px 0 2px;border-top:1px solid var(--line);font:400 11px/1.55 var(--f-body);color:var(--muted)}

/* nút mở lại bảng khi thu gọn */
#bdOpen{position:absolute;z-index:19;top:var(--top);right:var(--gap);display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s);
  font:700 10.5px/1 var(--f-sub);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
#bdOpen svg{width:14px;height:14px}

/* ---------- điều khiển ---------- */
#ctl{position:absolute;z-index:18;right:calc(var(--bw) + var(--gap) * 2);bottom:var(--gap);display:flex;flex-direction:column;gap:7px;
  transition:right .45s cubic-bezier(.2,.8,.25,1)}
#lm.bd-min #ctl{right:var(--gap)}
#ctl button{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,253,248,.94);
  border:1px solid var(--line);box-shadow:var(--shadow-s);font:400 20px/1 var(--f-sub);color:var(--ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
#ctl button:hover{background:#fff}
#ctl svg{width:17px;height:17px}
#hint{position:absolute;z-index:17;left:calc((100% - var(--bw) - var(--gap)) / 2);bottom:18px;transform:translateX(-50%);
  padding:8px 15px;border-radius:99px;background:rgba(255,253,248,.88);box-shadow:var(--shadow-s);white-space:nowrap;
  font:700 9.5px/1 var(--f-sub);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);pointer-events:none;
  transition:opacity .6s}
#hint.gone{opacity:0}

/* thẻ điểm */
#card{position:absolute;z-index:25;width:250px;padding:14px 16px 14px;border-radius:16px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s,transform .25s,visibility .25s;pointer-events:auto}
#card.on{opacity:1;visibility:visible;transform:none}
#card .k{font:700 9.5px/1 var(--f-sub);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
#card .n{margin-top:7px;padding-right:18px;font:400 18px/1.2 var(--f-disp);color:var(--ink);text-wrap:balance}
#card .m{display:flex;align-items:baseline;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
#card .m b{font:300 22px/1 var(--f-disp);color:var(--bronze-d)}
#card .m span{font:400 10px/1.3 var(--f-sub);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#card .m:empty{display:none}
#card .x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:99px;display:grid;place-items:center;color:var(--muted);font-size:17px}
#card .x:hover{background:rgba(164,124,93,.12);color:var(--ink)}

/* ---------- mở màn ---------- */
#lm.boot #board{animation:bdIn .9s cubic-bezier(.2,.8,.25,1) .25s both}
#lm.boot #ctl,#lm.boot #hint{animation:fadeIn .6s ease 2.2s both}
@keyframes bdIn{from{transform:translateX(34px);opacity:0}}
@keyframes fadeIn{from{opacity:0}}
#lm.boot .bd-body .sec{animation:secIn .7s cubic-bezier(.2,.8,.25,1) both}
#lm.boot .bd-body .sec:nth-child(1){animation-delay:.55s}
#lm.boot .bd-body .sec:nth-child(2){animation-delay:.75s}
#lm.boot .bd-body .sec:nth-child(3){animation-delay:.95s}
@keyframes secIn{from{transform:translateY(10px);opacity:0}}

/* ---------- ĐIỆN THOẠI DỌC: bảng thành tấm kéo lên ---------- */
@media (max-width:760px) and (min-height:521px){
  :root{--top:58px;--peek:78px}
  #board{top:auto;left:0;right:0;bottom:0;width:auto;height:min(74%,620px);border-radius:22px 22px 0 0;border-bottom:0;
    transform:translateY(calc(100% - var(--peek)));padding-bottom:env(safe-area-inset-bottom,0px)}
  #board.up{transform:none}
  #board.drag{transition:none}
  #board.min{transform:translateY(calc(100% - var(--peek)));opacity:1;pointer-events:auto}
  .bd-handle{display:block;flex:none;height:18px;position:relative;cursor:grab}
  .bd-handle:before{content:'';position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:99px;background:rgba(36,60,52,.2)}
  .bd-head{display:none}
  #board.up .bd-head{display:flex;padding:4px 18px 10px;border-bottom:0}
  #board.up .bd-head .logo{width:150px}
  .bd-head .icon-btn{display:none}
  .bd-tabs{display:flex;flex:none;gap:4px;margin:0 12px 10px;padding:4px;border-radius:99px;background:rgba(36,60,52,.06)}
  .bd-body{margin-top:0;border-top:0}
  .bd-tabs button{flex:1;min-height:44px;border-radius:99px;font:700 11px/1 var(--f-sub);letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);opacity:.62;transition:.25s}
  .bd-tabs button.on{opacity:1;background:var(--ink);color:#F3EBDA;box-shadow:0 4px 12px rgba(36,60,52,.25)}
  .bd-body{padding:0 18px 16px}
  .bd-body .sec{display:none;border-top:0}
  .bd-body .sec.on{display:block;padding-top:6px}
  .sec-t{display:none}
  .hi-grid{gap:16px 12px}
  .band{grid-template-columns:66px 20px 1fr}
  .band .num{width:62px;height:62px}
  .band .num b{font-size:21px}
  .band li{font-size:13px;padding-top:4px;padding-bottom:4px}
  .band li:before{top:11px}
  .lg{padding:10px 6px;font-size:13.5px}
  .cats{padding-left:0}
  .cats button{padding:9px 12px;font-size:12.5px}
  .presets button{padding:12px 6px}
  #ctl{right:12px;bottom:calc(var(--peek) + 12px)}
  #lm.sheet-up #ctl{opacity:0;pointer-events:none}
  #lm.bd-min #ctl{right:12px}
  #hint{display:none}
  #card{left:12px!important;right:12px;top:auto!important;bottom:calc(var(--peek) + 12px);width:auto}
  #bdOpen{display:none!important}
  #lm.boot #board{animation:sheetIn .8s cubic-bezier(.2,.8,.25,1) 1.1s both}
  @keyframes sheetIn{from{transform:translateY(100%)}}
}
/* ---------- ĐIỆN THOẠI NGANG / màn thấp: bảng hẹp bên phải ---------- */
@media (max-height:520px){
  :root{--top:52px;--bw:clamp(236px,33vw,300px);--gap:10px}
  .bd-head{padding:12px 16px 10px}
  .bd-head .logo{width:140px}
  .bd-body{padding:2px 14px 12px}
  .hi-grid{grid-template-columns:1fr;gap:10px}
  .band{grid-template-columns:54px 16px 1fr}
  .band .num{width:50px;height:50px}
  .band .num b{font-size:17px}
  .band .num i{font-size:8px}
  #ctl button{width:38px;height:38px}
  #hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  #lm.boot #board,#lm.boot #ctl,#lm.boot #hint,#lm.boot .bd-body .sec{animation:none}
  #pulses circle,#halo circle{animation:none}
}



/* Global Homes: project-specific cream artwork, forest inspector and restrained bronze. */
:root{--paper:#f6f4ed;--ground:#f6f4ed;--card:#183d36;--card-2:#24483f;--ink:#f5f1e7;--olive:#355c46;--road:#678064;--bronze:#c3a16b;--bronze-d:#d4b882;--tan:#c3a16b;--muted:#c2d0c5;--line:rgba(214,224,213,.17);--line-2:rgba(195,161,107,.4);--top:16px;--gap:16px;--bw:clamp(296px,27vw,340px);--peek:82px;--f-disp:'Playfair Display',Georgia,serif;--f-sub:'Be Vietnam Pro',system-ui,sans-serif;--f-body:'Be Vietnam Pro',system-ui,sans-serif}
#board{border-radius:28px;box-shadow:0 12px 34px rgba(24,61,54,.16);border:1px solid rgba(195,161,107,.28)}
.bd-head{align-items:flex-start;padding:22px 22px 0;gap:9px}
.brand-box{display:block;padding:12px 14px;background:#f6f4ed;border-radius:16px;width:226px;max-width:calc(100% - 22px)}
.bd-head .logo{width:100%;height:auto}
.map-title{font:400 23px/1.3 var(--f-disp);margin:5px 0 0;color:#f5f1e7}
.map-subtitle{font:500 11px/1.5 var(--f-body);color:#c3a16b;margin:0}
.icon-btn{width:40px;height:40px;top:17px;right:12px;border-radius:14px;color:#c3a16b}
.icon-btn:hover{background:#2d5147;color:#e5cc9f}
.bd-tabs{margin:17px 16px 0;background:#0e2c26;gap:3px;padding:4px;border-radius:15px}
.bd-tabs button{min-height:42px;font:600 11px/1.3 var(--f-body);text-transform:none;letter-spacing:0;opacity:1;border-radius:12px;color:#c2d0c5}
.bd-tabs button.on{background:#c3a16b;color:#183d36;box-shadow:none}
.bd-body{margin-top:12px;padding:7px 22px 18px}
.sec-t{font:500 12px/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:#c3a16b}
.hi{padding:9px;margin:-9px;column-gap:8px;border-radius:16px}
.hi:hover,.hi.on{background:rgba(195,161,107,.14)}
.hi .k{font:500 11px/1.3 var(--f-body);letter-spacing:0;color:#c3a16b}
.hi .k:after{background:rgba(195,161,107,.3)}
.hi b{font:600 11px/1.5 var(--f-body);color:#f5f1e7;text-transform:none;letter-spacing:0}
.hi>span:last-child{font:400 10px/1.4 var(--f-body);color:#c2d0c5}
.hi .ic svg path[fill]:not([fill="none"]){fill:#c3a16b}
.hi .ic svg path[stroke]{stroke:#c3a16b}
.band{padding:13px 0;border-radius:15px}
.band:hover,.band.on{background:rgba(195,161,107,.11)}
.band .num{border-color:rgba(195,161,107,.5);color:#e5cc9f;background:transparent;box-shadow:none}
.band .num i{color:#c2d0c5;font-size:9px;text-transform:none;letter-spacing:0}
.band .num b{font:400 22px/1.1 var(--f-disp);color:#e5cc9f}
.band li{font:400 11px/1.55 var(--f-body);color:#e7eade}
.band li.off{color:#c2d0c5}
.band li.go:hover{color:#e5cc9f}
.lg{color:#f5f1e7;font-size:11px;min-height:40px;border-radius:12px}
.lg:hover{background:rgba(195,161,107,.12)}
.lg .tick{border-color:rgba(195,161,107,.5)}
.lg.on .tick{background:#c3a16b;border-color:#c3a16b;color:#183d36}.lg.on .tick svg path{stroke:#183d36}
.presets{gap:5px;padding:4px;background:#0e2c26;border-radius:14px}
.presets button{min-height:40px;border-radius:11px;font:600 10px/1.3 var(--f-body);text-transform:none;letter-spacing:0;color:#c2d0c5}
.presets button.on{background:#c3a16b;color:#183d36}
.cats button{font:500 10px/1.4 var(--f-body);color:#c2d0c5;border-radius:11px;padding:8px}
.cats button.on{color:#f5f1e7;background:#2d5147}
.foot{color:#c2d0c5;font:400 10px/1.65 var(--f-body)}
#ctl button{width:44px;height:44px;background:#183d36;color:#e5cc9f;border-radius:15px;border:1px solid rgba(195,161,107,.4);box-shadow:0 4px 12px rgba(24,61,54,.1)}
#ctl button:hover{background:#c3a16b;color:#183d36}
#bdOpen{min-height:44px;background:#183d36;color:#e5cc9f;border-radius:15px;font:600 11px/1.4 var(--f-body)}
#hint{display:none}
#card{border-radius:20px;background:#183d36;color:#f5f1e7;border-color:rgba(195,161,107,.35);box-shadow:0 8px 24px rgba(24,61,54,.2);padding:18px 20px}
#card .k{font:600 10px/1.4 var(--f-body);letter-spacing:0;color:#c3a16b;text-transform:none}
#card .n{font:400 21px/1.4 var(--f-disp);color:#f5f1e7}
#card .m{color:#c2d0c5;border-color:rgba(195,161,107,.2)}
#card .m b{font:400 21px/1.3 var(--f-disp);color:#e5cc9f}
#card .x{color:#c3a16b;width:36px;height:36px;border-radius:12px}
#art:focus-visible{outline:none}
#hits circle:focus-visible{fill:rgba(195,161,107,.24);stroke:#c3a16b;stroke-width:3}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid #e5cc9f;outline-offset:3px}
@media(max-width:760px) and (min-height:521px){
:root{--top:12px;--gap:12px;--peek:82px}
#board{border-radius:26px 26px 0 0;height:min(78%,660px)}
.bd-handle:before{background:rgba(195,161,107,.6)}
#board.up .bd-head{padding:3px 18px 12px}
#board.up .brand-box{width:195px;padding:9px 12px;border-radius:13px}
#board.up .bd-head .logo{width:100%}
#board.up .map-title{font-size:21px;margin-top:4px}
#board.up .map-subtitle{display:none}
.bd-tabs{margin:0 12px 12px;padding:4px}
.bd-tabs button{min-height:44px;letter-spacing:0;font-size:12px;text-transform:none}
.bd-tabs button.on{background:#c3a16b;color:#183d36;box-shadow:none}
.bd-body{padding:0 18px 20px}
.hi-grid{gap:19px 14px}
.hi b{font-size:12px}.hi>span:last-child{font-size:11px}.hi .k{font-size:11px}
.band li{font-size:12px;line-height:1.55}
.lg{font-size:12px;min-height:44px;padding:10px 7px}.cats button{padding:10px;font-size:11px}
#card .n{font-size:19px}#card .m{font-size:11px}
}
@media(max-height:520px){.bd-head{padding:12px 16px 0}.brand-box{width:175px;padding:8px 11px}.map-title{font-size:18px}.map-subtitle{display:none}.bd-tabs{margin-top:11px}.bd-tabs button{min-height:36px;font-size:10px}.hi-grid{gap:14px}.hi{grid-template-columns:32px 1fr}.hi .ic{width:32px}.hi b{font-size:10px}.band li{font-size:10px}#ctl button{width:40px;height:40px}}