/* ==========================================================================
   SAMAR'S GAME IN DUBAI — site styles
   Same tokens as the games (kit/pixel.js PAL + BTN) so everything matches.
   ========================================================================== */
@font-face{font-family:'Samar Blocks';src:url('samar-blocks.woff2?v=4fdff14e') format('woff2');font-display:swap}
:root{
  --ink:#14181F;--night:#0D2340;--navy:#17416E;--navy-l:#2A5E93;--navy-d:#0F2D52;--aqua:#39CCE3;--gold:#F4B731;--gold-l:#FFE28A;--gold-d:#B87B12;
  --coral:#F0503C;--lime:#7ED957;--sand:#E8C98A;--white:#fff;
  --px:'Samar Blocks',ui-monospace,monospace;
  --round:ui-rounded,'SF Pro Rounded','Nunito','Segoe UI Rounded','Segoe UI',system-ui,-apple-system,sans-serif;
  --ol:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink),0 4px var(--ink),2px 4px var(--ink),-2px 4px var(--ink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:#fff;font-family:var(--round);font-weight:700;-webkit-tap-highlight-color:transparent}
img,canvas{display:block}
a{color:inherit}
.px{font-family:var(--px);font-weight:400;letter-spacing:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ol{color:#fff;text-shadow:var(--ol)}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px}

/* ---------- block buttons (identical to the in-game BTN styles) ---------- */
.btn{display:inline-block;font-family:var(--px);font-size:20px;line-height:1;color:var(--ink);text-decoration:none;border:3px solid var(--ink);background:var(--deep);padding:0 0 6px;cursor:pointer;user-select:none;vertical-align:middle}
.btn>span{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px 9px;background:var(--face);box-shadow:inset 3px 3px 0 var(--light),inset -3px -3px 0 var(--dark);white-space:nowrap}
.btn:active,.btn.down{padding:6px 0 0}
.btn.gold{--face:#F4B731;--light:#FFE08A;--dark:#D59A1C;--deep:#9C6A0D}
.btn.aqua{--face:#39CCE3;--light:#A8F1FB;--dark:#22A7BF;--deep:#146E88}
.btn.lime{--face:#7ED957;--light:#C4F5A8;--dark:#5DB83C;--deep:#3A7A22}
.btn.navy{--face:#1F4E7F;--light:#3C77B2;--dark:#173C62;--deep:#0B213D;color:#fff}
.btn.sm{font-size:20px}.btn.sm>span{padding:8px 12px 6px}
.btn.big{font-size:30px}.btn.big>span{padding:16px 26px 13px}
.btn img{width:28px;height:28px;image-rendering:pixelated}

/* ---------- panels ---------- */
.panel{position:relative;background:
  linear-gradient(var(--gold),var(--gold)) 6px 6px/6px 6px no-repeat,linear-gradient(var(--gold),var(--gold)) calc(100% - 6px) 6px/6px 6px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 6px calc(100% - 6px)/6px 6px no-repeat,linear-gradient(var(--gold),var(--gold)) calc(100% - 6px) calc(100% - 6px)/6px 6px no-repeat,var(--navy);
  border:3px solid var(--ink);box-shadow:inset 3px 3px 0 var(--navy-l),inset -3px -3px 0 var(--navy-d),0 6px 0 rgba(8,20,40,.35)}
.ribbon{display:inline-block;margin:0;font-family:var(--px);font-weight:400;font-size:20px;line-height:1;color:var(--ink);background:var(--gold);border:3px solid var(--ink);
  padding:10px 16px 8px;box-shadow:inset 3px 3px 0 var(--gold-l),inset -3px -3px 0 #D59A1C,0 5px 0 var(--ink)}

/* ---------- HOME: the map stage ---------- */
.stage{position:relative;overflow:hidden;background:#2A86C8}
#map{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#pins{position:absolute;inset:0;pointer-events:none}
.logo{position:absolute;left:50%;top:0;transform:translateX(-50%);margin:0;z-index:4;pointer-events:none}
.logo canvas{image-rendering:pixelated;filter:drop-shadow(0 6px 0 rgba(8,20,40,.28))}
.card.live{box-shadow:inset 3px 3px 0 var(--navy-l),inset -3px -3px 0 var(--navy-d),0 0 0 3px var(--gold),0 6px 0 rgba(8,20,40,.35)}
.meet{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:6}
.meet>span{padding:6px 12px 5px 6px}
.clouds i{position:absolute;display:block;width:96px;height:36px;background-size:100% 100%;image-rendering:pixelated;opacity:.92;z-index:3;pointer-events:none;animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-160px)}to{transform:translateX(calc(100vw + 160px))}}

.pin{position:absolute;width:var(--ps,40px);height:var(--ps,40px);transform:translate(-50%,-50%);pointer-events:auto;z-index:5;text-decoration:none;cursor:pointer;border:0;padding:0;background:none}
.pin .face{display:grid;place-items:center;width:100%;height:100%;background:var(--c);border:3px solid var(--ink);
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 0 rgba(0,0,0,.22),0 5px 0 rgba(8,20,40,.4)}
.pin .face img{width:72%;height:72%;object-fit:contain;image-rendering:pixelated}
.pin .n{position:absolute;top:-10px;right:-10px;min-width:22px;height:22px;display:grid;place-items:center;font-family:var(--px);font-size:10px;line-height:1;
  color:var(--ink);background:var(--gold);border:2px solid var(--ink);padding:1px 3px 0}
.pin.live .face{animation:bob 1.6s ease-in-out infinite}
.pin.soon .face{filter:saturate(.45) brightness(.92)}
.pin.hot .face,.pin:hover .face,.pin:focus-visible .face{outline:3px solid #fff;outline-offset:2px;filter:none}
.dot{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%);background:#fff;border:2px solid var(--ink);z-index:4;pointer-events:none}
.dot.live{background:var(--gold)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- cards ---------- */
.card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px;text-decoration:none;color:#fff;cursor:pointer;
  transition:transform .12s ease}
.card:hover,.card.hot{transform:translateY(-3px)}
.card.hot{box-shadow:inset 3px 3px 0 var(--navy-l),inset -3px -3px 0 var(--navy-d),0 0 0 4px var(--gold),0 6px 0 rgba(8,20,40,.35)}
.thumb{position:relative;display:block;width:112px;aspect-ratio:4/3;border:3px solid var(--ink);background:var(--c)}
.thumb img,.thumb canvas{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.card.live .thumb img{image-rendering:auto}
.num{position:absolute;left:-9px;top:-9px;min-width:26px;height:26px;display:grid;place-items:center;font-family:var(--px);font-weight:400;font-size:10px;line-height:1;
  color:var(--ink);background:var(--gold);border:2px solid var(--ink);padding:1px 4px 0}
.soon .thumb .tag-soon{position:absolute;right:-6px;bottom:-8px;font-family:var(--px);font-size:10px;line-height:1;color:#fff;background:var(--coral);border:2px solid var(--ink);padding:4px 5px 3px}
.body{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.name{font-family:var(--px);font-size:20px;line-height:1.05;color:#fff;text-shadow:0 3px 0 var(--ink)}
.place{font-size:14px;color:var(--gold-l);line-height:1.15}
.tagline{font-size:13px;color:#CFE3F2;line-height:1.25}
.card .btn{margin-top:4px}
.soon .name{color:#E3EDF6}
.pill{font-family:var(--px);font-size:10px;line-height:1;color:var(--ink);background:#C9D6E3;border:2px solid var(--ink);padding:4px 6px 3px;margin-top:2px}

/* ---------- HOME: stacked layout (phones, tablets) ---------- */
body.home{background:var(--sand)}
.home main{position:relative;padding:22px 14px 34px;max-width:1080px;margin:0 auto}
.sec{text-align:center;margin:10px 0 18px}
.grid{display:grid;gap:18px;margin-bottom:30px}
.grid.live{grid-template-columns:1fr}
.grid.live .thumb{width:min(42vw,220px)}
.grid.live .name{font-size:30px}
.grid.soon{grid-template-columns:1fr 1fr;gap:16px 12px}
.grid.soon .card{grid-template-columns:1fr;align-items:start;gap:10px;padding:10px}
.grid.soon .thumb{width:100%}
.grid.soon .name{font-size:20px}
.grid.soon .tagline{display:none}
@media (min-width:640px){ .grid.live{grid-template-columns:1fr 1fr} .grid.soon{grid-template-columns:repeat(4,1fr)} .grid.live .thumb{width:170px} }
.foot{text-align:center;padding:26px 16px 40px;background:var(--night);border-top:4px solid var(--ink);font-size:14px;color:#CFE3F2;line-height:1.6}
.foot .px{font-size:20px;color:#fff;display:block;margin-bottom:6px}
.foot img{display:inline-block;width:28px;height:28px;image-rendering:pixelated;vertical-align:middle;margin-right:6px}
.foot a{color:var(--gold-l)}

/* ---------- HOME: wide map-callout layout (desktop) ---------- */
body.home.wide{overflow:hidden;height:100vh}
body.home.wide .stage{position:fixed;inset:0}
body.home.wide main{position:fixed;inset:0;padding:0;max-width:none;pointer-events:none;z-index:6}
body.home.wide .sec{display:none}
body.home.wide .grid{display:block;margin:0}
body.home.wide .card{position:absolute;width:var(--colW);pointer-events:auto;padding:9px 10px;gap:10px}
body.home.wide .card .thumb{width:96px}
body.home.wide .card .name{font-size:20px}
body.home.wide .card.live .tagline{display:none}
body.home.wide .card.soon .tagline{display:block;font-size:12px}
body.home.wide .grid.soon .card{grid-template-columns:auto 1fr;align-items:center}
body.home.wide .grid.soon .thumb{width:96px}
body.home.wide .foot{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);padding:6px 14px;border:3px solid var(--ink);background:rgba(13,35,64,.88);font-size:12px;z-index:7;white-space:nowrap}
body.home.wide .foot .px{display:inline;font-size:10px;margin:0 8px 0 0}
body.home.wide .foot img{width:20px;height:20px}

/* ---------- ABOUT ---------- */
body.about{background:linear-gradient(#5FC3EE 0,#5FC3EE 22%,#7ACFF1 22%,#7ACFF1 40%,#94DAF4 40%,#94DAF4 58%,#B1E5F7 58%,#B1E5F7 100%);min-height:100vh}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top)) 14px 0}
.bar .logo-sm{grid-column:2}
.bar .logo-sm canvas{image-rendering:pixelated}
.about main{max-width:760px;margin:0 auto;padding:14px 14px 150px;position:relative;z-index:2}
.player{padding:18px 16px 22px;margin-top:8px}
.player .ribbon{position:absolute;left:50%;top:-20px;transform:translateX(-50%);white-space:nowrap}
.scene{position:relative;margin:14px 0 6px;aspect-ratio:16/10;border:3px solid var(--ink);overflow:hidden;background:#7ACFF1}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.scene .kick{position:absolute;left:10%;top:4%;width:78%;height:auto;animation:fly 3s ease-in-out infinite;filter:drop-shadow(0 8px 0 rgba(8,20,40,.3))}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(2%,-4%) rotate(1deg)}}
.hello{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:14px}
.hello .who{text-align:center}
.hello .who img{width:84px;height:84px;image-rendering:pixelated;border:3px solid var(--ink);background:var(--aqua)}
.hello .who .px{display:block;margin-top:8px;font-size:30px;color:var(--gold);text-shadow:var(--ol)}
.bubble{position:relative;background:#fff;color:var(--ink);border:3px solid var(--ink);padding:14px 16px;box-shadow:0 5px 0 rgba(8,20,40,.3)}
.bubble::before{content:"";position:absolute;left:-15px;top:22px;width:12px;height:12px;background:#fff;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) translate(4px,-2px)}
.bubble .hi{font-size:30px;line-height:1;margin:0 0 10px;color:var(--coral)}
.bubble p{margin:0;font-size:19px;line-height:1.45}
.bubble b{color:#1C6FA8}
.stats{list-style:none;padding:0;margin:18px 0 6px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stats li{display:flex;align-items:center;gap:10px;background:var(--navy-d);border:3px solid var(--ink);padding:8px 10px}
.stats li img{width:32px;height:32px;image-rendering:pixelated;flex:none}
.stats .k{display:block;font-size:10px;color:var(--gold-l)}
.stats .v{display:block;font-size:20px;color:#fff;margin-top:4px}
.stats li.wide{grid-column:1/-1}
.cta{text-align:center;margin-top:18px}
.mine{margin-top:26px;padding:18px 16px}
.mine h2{margin:0 0 14px}
.mine .grid.live{margin-bottom:10px}
.mine .more{font-size:15px;color:#CFE3F2;text-align:center;margin:6px 0 0}
#skyline{position:fixed;left:0;right:0;bottom:0;width:100%;height:120px;image-rendering:pixelated;z-index:1;pointer-events:none}
.about .foot{position:relative;z-index:2}
@media (min-width:640px){ .stats{grid-template-columns:repeat(4,1fr)} .stats li.wide{grid-column:auto/span 4} .hello .who img{width:110px;height:110px} }

/* ---------- 404 ---------- */
body.lost{min-height:100vh;display:grid;place-items:center;background:var(--sand);text-align:center;padding:20px}
.lost .panel{padding:28px 22px;max-width:420px}
.lost h1{font-size:30px;line-height:1.1;margin:10px 0 12px;color:var(--gold);text-shadow:var(--ol)}
.lost p{font-size:17px;line-height:1.5;margin:0 0 20px;color:#E3EDF6}
.lost img{margin:0 auto;width:120px;image-rendering:pixelated}

@media (prefers-reduced-motion:reduce){ .pin.live .face,.scene .kick,.clouds i{animation:none} .card{transition:none} }

/* ---------- play counts, install button, iOS tip ---------- */
.plays{font-family:var(--px);font-size:10px;line-height:1;color:#A8F1FB;background:rgba(8,20,40,.45);border:2px solid var(--ink);padding:4px 6px 3px}
.plays[hidden],.install[hidden],.ios-tip[hidden]{display:none!important}
.install{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));z-index:6}
.install>span{padding:6px 12px 5px 8px}
@media (max-width:400px){ .install b{display:none} .install>span{padding:6px 8px 5px} }
.install b{font-weight:400}
.ios-tip{position:absolute;left:12px;top:70px;z-index:8;max-width:280px;padding:14px 16px;color:#fff;font-size:15px;line-height:1.45;cursor:pointer}
.ios-tip .px{display:block;font-size:20px;color:var(--gold);margin-bottom:6px}
.ios-tip img{display:inline-block;width:20px;height:20px;vertical-align:-4px;image-rendering:pixelated;background:#fff;border:2px solid var(--ink)}
.ios-tip small{display:block;margin-top:8px;color:#CFE3F2;font-size:12px}
.card.wiggle{animation:wiggle .45s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){ .card.wiggle{animation:none} }

.act{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:4px}
.act .btn{margin-top:0}
body.home.wide.compact .card{padding:7px 9px;gap:9px}
body.home.wide.compact .card .thumb{width:72px}
body.home.wide.compact .card .tagline{display:none!important}
body.home.wide.compact .card .place{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.home.wide.compact .card .body{gap:3px}
body.home.wide.compact .foot{display:none}