:root{
  --desk:#1d1145; --desk2:#26165a;
  --face:#c0c0c0; --shade:#808080; --light:#dfdfdf;
  --ink:#0d0626; --gold:#ffd23f; --mag:#c4278f; --cyan:#42e8ff; --royal:#2b1a7a;
  --px:'Press Start 2P',ui-monospace,Menlo,Consolas,monospace;
  --tx:'Ubuntu Mono','PT Mono','Courier New',ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:44px;-webkit-text-size-adjust:100%}
html.booting{overflow:hidden}
body{
  margin:0;padding-bottom:68px;color:#000;
  font:20px/1.4 var(--tx);
  background-color:var(--desk);
  background-image:conic-gradient(var(--desk2) 25%,var(--desk) 0 50%,var(--desk2) 0 75%,var(--desk) 0);
  background-size:4px 4px;
}
a{color:#0000aa}
:focus-visible{outline:3px dotted #000;outline-offset:2px}
.icons :focus-visible,.ticker :focus-visible,.foot :focus-visible{outline-color:#fff}
.only-mobile,.only-pc{display:none}
html[data-device="mobile"] .only-mobile{display:block}
html[data-device="pc"] .only-pc{display:block}

/* ---------- ticker ---------- */
.ticker{background:#000;color:var(--gold);border-bottom:2px solid var(--mag);font:11px/1 var(--px);overflow:hidden;white-space:nowrap;padding:9px 0}
.ticker span{display:inline-block;padding-left:100%;animation:tick 48s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}

/* ---------- layout ---------- */
.shell{max-width:1040px;margin:0 auto;padding:16px;display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px}
.icons{position:sticky;top:12px;align-self:start;display:flex;flex-direction:column;gap:10px}
.icon{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;color:#fff;text-decoration:none;text-align:center;font-size:17px;line-height:1.1;text-shadow:1px 1px #000}
.icon .l{padding:1px 3px}
.icon:hover .l,.icon:focus-visible .l{background:var(--royal);outline:1px dotted #fff}
main{display:grid;gap:16px;min-width:0}
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px}

/* ---------- windows ---------- */
.win{background:var(--face);border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px var(--shade),inset 1px 1px var(--light),6px 6px 0 rgba(0,0,0,.45);padding:3px;min-width:0}
.tb{display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(90deg,var(--royal),var(--mag));color:#fff;font:10px/1.2 var(--px);padding:5px 5px 5px 8px}
.tb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.min{flex:none;width:24px;height:22px;padding:0;background:var(--face);color:#000;font:18px/1 var(--tx);border:2px solid;border-color:#fff #000 #000 #fff;cursor:pointer}
.min:active{border-color:#000 #fff #fff #000}
.tb .min:focus-visible{outline-color:#fff}
.wbody{padding:12px}
.win h2{font:12px/1.6 var(--px);margin:0 0 10px;overflow-wrap:anywhere}
.win p{margin:0 0 10px;max-width:62ch}
.inset{background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:10px}

.btn{display:inline-block;background:var(--face);color:#000;text-decoration:none;font:11px/1.4 var(--px);padding:11px 14px;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px var(--shade),inset 1px 1px var(--light);cursor:pointer;text-align:center}
.btn:active{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px var(--shade);padding:12px 13px 10px 15px}
.btn.gold{background:var(--gold)}
.btn.discord{background:#8d9bff}
.btn.tiktok{background:var(--cyan)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}

/* ---------- hero ---------- */
.screen{position:relative;background:var(--ink);color:#e8e0ff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:26px 16px 24px;text-align:center;overflow:hidden}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
.screen>*{position:relative;z-index:1}
.official{display:inline-block;margin:0 0 16px;padding:5px 9px;background:#000;color:var(--cyan);border:1px solid var(--cyan);font:10px/1.5 var(--px)}
.gem{display:block;margin:0 auto 16px;width:max-content}
.logo{margin:0;font:clamp(22px,7.4vw,60px)/1.2 var(--px);color:var(--gold);text-shadow:3px 3px 0 var(--mag),6px 6px 0 #000}
.logo.on{animation:flick .7s steps(1) 1}
@keyframes flick{0%{opacity:0}12%{opacity:1}22%{opacity:.15}34%{opacity:1}46%{opacity:.4}60%,100%{opacity:1}}
.screen .sub{margin:18px auto 0;font-size:22px;max-width:36ch}
.screen .btns{justify-content:center}
.screen .btn:focus-visible{outline-color:var(--gold)}
.hint{margin:14px auto 0!important;color:var(--cyan);font-size:18px}

/* ---------- games ---------- */
.games{display:grid;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.card{background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);display:flex;flex-direction:column;min-width:0}
.card.feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--royal),var(--ink));display:grid;place-items:center;overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cbody{padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1}
.cbody h3{font:11px/1.7 var(--px);margin:0;overflow-wrap:anywhere}
.cbody p{margin:0;flex:1}
.card.feat h3{font-size:13px}
.tag{display:inline-block;font:9px/1.4 var(--px);background:#000;color:var(--gold);padding:4px 6px}
.tag.cy{color:var(--cyan)}

/* ---------- live counts ---------- */
.dot{display:inline-block;width:10px;height:10px;background:#ff3b3b;border:1px solid #000;margin-right:8px;vertical-align:-1px;animation:blink 1.2s steps(1) infinite}
.livebar{margin:14px auto 0!important;font-size:22px;color:#fff}
.livebar b{font:14px/1 var(--px);color:var(--gold)}
.live{display:inline-block;font-size:19px;background:#000;color:#fff;padding:2px 8px}
.live b{font:11px/1 var(--px);color:var(--gold)}

.newslist{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.news{background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:10px 12px}
.news h3{font:11px/1.7 var(--px);margin:8px 0 6px;overflow-wrap:anywhere}
.news p{margin:0 0 10px}
.meta{font-size:18px;color:#404040;margin:0}
.ups{list-style:none;margin:0;padding:8px 12px}
.ups li{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;padding:7px 0;border-bottom:1px dotted var(--shade)}
.ups li:last-child{border-bottom:0}
.ups a{color:#0000aa;overflow-wrap:anywhere}

/* ---------- properties / team ---------- */
.props{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.props dt{color:#404040}
.props dd{margin:0;overflow-wrap:anywhere}
.big{font:clamp(16px,4vw,22px)/1.2 var(--px)}
.dev{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.avatar{background:#000;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:8px;line-height:0}
.term{background:#000;color:#4dff88;padding:10px;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);grid-column:1/-1}
.term p{margin:0;max-width:none}
.term .cur{display:inline-block;width:.6em;height:1em;background:#4dff88;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.crew{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.crew li{background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:8px 10px}
.crew b{display:block;font:10px/1.7 var(--px)}
.stack{display:grid;gap:12px}
.stack .btn{display:block}
.note{min-height:1.4em;margin:8px 0 0}

/* ---------- how to play ---------- */
.tabs{display:flex;flex-wrap:wrap;position:relative;z-index:1;margin-bottom:-2px}
.tab{font:10px/1.2 var(--px);color:#000;background:var(--face);padding:11px 14px 9px;border:2px solid;border-color:#fff #000 var(--face) #fff;margin-top:3px;cursor:pointer}
.tab[aria-selected="true"]{margin-top:0;padding-top:14px;padding-bottom:11px}
.panel{background:var(--face);border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px var(--shade);padding:14px}
.steps{margin:0 0 12px;padding-left:1.5em;max-width:62ch}
.steps li{margin-bottom:8px}
kbd{font:10px/1 var(--px);background:#fff;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px var(--shade);padding:3px 5px;margin:0 1px}

/* ---------- about / faq ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.tile{background:#000;color:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:12px 10px;text-align:center}
.tile b{display:block;font:14px/1.5 var(--px);color:var(--gold);margin-bottom:6px;overflow-wrap:anywhere}
.tile b.sm{font-size:10px;line-height:1.7}
.tile span{font-size:18px}
.faq details{background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);margin-bottom:8px}
.faq summary{padding:10px 12px;cursor:pointer;font-weight:700}
.faq details[open] summary{background:var(--royal);color:#fff}
.faq details p{margin:0;padding:10px 12px}

/* ---------- footer ---------- */
.foot{color:#d9d0ff;text-align:center;font-size:18px;padding:6px 16px 20px;max-width:1040px;margin:0 auto}
.foot p{margin:0 auto 10px;max-width:70ch}
.odo{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.odo b{background:#000;color:var(--gold);font:12px/1 var(--px);padding:6px 4px;border:1px solid var(--shade)}

/* ---------- taskbar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--face);border-top:2px solid #fff;box-shadow:0 -1px 0 var(--light);display:flex;align-items:center;gap:6px;padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.bar .btn{padding:9px 10px;font-size:10px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px}
.bar .btn.on{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px var(--shade)}
.bar .grow{flex:1;display:flex;gap:6px;overflow:hidden;justify-content:flex-start}
.clock{font-size:19px;padding:3px 10px;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);background:var(--face);white-space:nowrap}
.start{position:fixed;left:4px;bottom:calc(52px + env(safe-area-inset-bottom));z-index:60;width:260px;max-width:calc(100vw - 8px);display:flex;background:var(--face);border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px var(--shade),6px 6px 0 rgba(0,0,0,.45)}
.start .band{background:linear-gradient(0deg,var(--royal),var(--mag));width:34px;flex:none;position:relative}
.start .band span{position:absolute;left:5px;bottom:8px;writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font:12px/1 var(--px);white-space:nowrap}
.start ul{list-style:none;margin:0;padding:4px;flex:1}
.start a{display:block;padding:10px;color:#000;text-decoration:none}
.start a:hover,.start a:focus-visible{background:var(--royal);color:#fff;outline:none}
.start .sep{border-top:1px solid var(--shade);border-bottom:1px solid #fff;margin:4px 2px}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;z-index:100;background:#000;color:#b8ffcb;font:24px/1.35 var(--tx);padding:22px;display:flex;flex-direction:column}
.boot pre{margin:0;font:inherit;white-space:pre-wrap;flex:1}
.boot .btn{align-self:flex-start;font-size:10px}
.boot .btn:focus-visible{outline-color:#b8ffcb}

/* ================= MOBILE (утас, таблет) ================= */
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr);padding:12px}
  .icons{display:none}
  .row{grid-template-columns:minmax(0,1fr)}
  .card.feat{grid-template-columns:minmax(0,1fr)}
  .win{box-shadow:inset -1px -1px var(--shade),inset 1px 1px var(--light),4px 4px 0 rgba(0,0,0,.45)}
  .wbody{padding:10px}
}
@media (max-width:700px){
  .bar .grow .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bar .grow .btn{flex:1;max-width:56px;padding:9px 0}
  .clock{font-size:17px;padding:3px 6px}
}
@media (max-width:420px){
  .dev{grid-template-columns:minmax(0,1fr)}
  .screen{padding:22px 12px 20px}
  .btns .btn{flex:1 1 100%}
}
@media (pointer:coarse){
  .btn,.tab,.start a{min-height:44px}
  .min{width:32px;height:30px}
  .btns .btn,.stack .btn{display:flex;align-items:center;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker span{animation:none;padding-left:8px}
  .ticker{text-overflow:ellipsis}
  .logo.on,.term .cur{animation:none}
}

/* ================= v2 нэмэлт ================= */
/* ---------- topbar / tools ---------- */
.topbar{display:flex;align-items:stretch;background:#000;border-bottom:2px solid var(--mag)}
.topbar .ticker{flex:1;min-width:0;border-bottom:0}
.tools{display:flex;gap:6px;align-items:center;padding:4px 6px}
.tools button{font:10px/1 var(--px);color:var(--gold);background:#000;border:1px solid var(--gold);padding:8px;min-height:32px;cursor:pointer}
.tools button[aria-pressed="true"]{background:var(--gold);color:#000}
.tools button:focus-visible{outline-color:#fff}
@media (pointer:coarse){.tools button{min-height:40px;min-width:44px}}

/* ---------- countdown ---------- */
.count{margin:18px auto 0;padding:12px;border:1px solid var(--cyan);max-width:100%;width:max-content}
.count .cdl{margin:0 0 10px!important;color:var(--cyan);font-size:19px;max-width:none}
.digits{display:flex;gap:8px;justify-content:center}
.digits div{background:#000;border:1px solid var(--shade);padding:8px 6px;min-width:62px;text-align:center}
.digits b{display:block;font:18px/1.3 var(--px);color:var(--gold)}
.digits span{font-size:16px;color:#e8e0ff}
.count .btn{margin-top:12px}
@media (max-width:420px){.digits div{min-width:0;flex:1;padding:8px 2px}.digits b{font-size:15px}}

/* ---------- card extras ---------- */
.badges{display:flex;flex-wrap:wrap;gap:6px}
.cbtns{display:flex;flex-wrap:wrap;gap:8px}
.cbtns .btn{padding:10px 12px}
.live.vis{background:#2b1a7a}

/* ---------- safety / media ---------- */
.safe{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.safe li{background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:8px 10px}
.safe b{display:block;font:10px/1.8 var(--px);color:#a00}
.media{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.mcard{background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);display:flex;flex-direction:column}
.mcard .mt{aspect-ratio:16/9;background:linear-gradient(135deg,var(--royal),var(--ink));position:relative;overflow:hidden}
.mcard .mt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcard .cbody{padding:10px}

/* ---------- game pages ---------- */
.shell.solo{grid-template-columns:minmax(0,1fr);max-width:920px}
.addr{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:8px 10px;font-size:18px;overflow-wrap:anywhere}
.ghero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.ghero h1{font:clamp(14px,3.6vw,22px)/1.6 var(--px);margin:8px 0 10px;color:#000;text-shadow:none}
.ghero p{max-width:none}
.rel{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rel a{display:block;background:#fff;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);padding:10px 12px;color:#0000aa}
@media (max-width:820px){.ghero{grid-template-columns:minmax(0,1fr)}}

/* ---------- гишүүний карт ---------- */
.idform label{display:block;margin-bottom:6px}
.idrow{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.idrow input{flex:1 1 220px;min-width:0;font:20px/1.2 var(--tx);padding:10px;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);background:#fff;color:#000;border-radius:0}
.cardout{margin-top:14px}
.cardout canvas{display:block;width:100%;max-width:640px;height:auto;margin:0 auto;border:2px solid;border-color:var(--shade) #fff #fff var(--shade);background:#0d0626}
.cardout .btns{justify-content:center}
@media (pointer:coarse){.idrow input{min-height:44px;font-size:18px}}

/* desktop icon-ууд олон болсон тул шахаж, дэлгэц намхан үед гүйлгэдэг болгоно */
.icons{gap:6px;max-height:calc(100vh - 110px);overflow-y:auto;scrollbar-width:thin}
.icon{padding:3px 2px;gap:4px}
.icon [data-art]{display:block;line-height:0}