/* Khelghar 98 · the desktop page */
html,body{margin:0;height:100%;background:#0e7c7b}
body.k98-home{overflow:hidden}
.k98-home .k98-desktop{bottom:var(--k98-bar);bottom:calc(var(--k98-bar) + env(safe-area-inset-bottom))}

/* ---------- icons: a grid on phones, columns down the left on a big screen ---------- */
.k98-icons{list-style:none;margin:0;padding:6px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 2px;position:relative;z-index:1}
.k98-icons li{min-width:0}
.k98-icons .k98-icon{min-height:92px}
@media (min-width:560px){.k98-icons{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
@media (min-width:900px){
  .k98-icons{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(auto-fill,98px);grid-auto-columns:104px;height:100%;align-content:start;justify-content:start;gap:4px 6px}
  .k98-icons .k98-icon{min-height:0}
}
@media (pointer:fine) and (min-width:900px){.k98-icons .k98-icon .img{width:40px;height:40px}}

/* ---------- the welcome window ---------- */
.k98-welcome{position:absolute;z-index:5;width:min(560px,calc(100% - 16px));left:50%;top:50%;transform:translate(-50%,-50%)}
.k98-welcome[hidden]{display:none}
.k98-welcome-in{display:flex;gap:16px;align-items:flex-start}
.k98-welcome-art{flex:none;width:120px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 6px;
  background:linear-gradient(180deg,#0b1f78,#2b83cf);color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px #838383}
.k98-welcome-art span{font-weight:700;font-size:34px;letter-spacing:.04em;color:#ffe29a;text-shadow:2px 2px 0 #0b0b0b}
.k98-welcome-txt{min-width:0}
.k98-welcome h2{font-size:1.35em;margin:0 0 .5em;line-height:1.15}
.k98-welcome h2 b{color:#8a2413}
.k98-welcome p,.k98-welcome li{margin:0 0 .6em}
.k98-welcome ul{padding-left:1.1em;margin:0 0 .6em}
.k98-welcome a{color:#0b1f78}
.k98-welcome a.k98-btn{color:var(--k98-ink)}
.k98-hint{color:#3c3c3c}
.k98-welcome .k98-row{align-items:center}
.k98-welcome .k98-check{margin-right:auto}
@media (max-width:560px){
  .k98-icons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .k98-welcome{top:auto;bottom:62px;transform:translateX(-50%)}
  .k98-welcome .k98-long{display:none}
  .k98-welcome h2{font-size:1.2em}
  .k98-welcome-art{display:none}
  .k98-welcome .k98-row .k98-btn{flex:1}
  .k98-welcome .k98-check{flex:1 0 100%}
}
@media (max-height:620px) and (min-width:561px){
  .k98-welcome{top:8px;transform:translateX(-50%);max-height:calc(100% - 16px);overflow:auto}
}
@media (min-width:900px){.k98-welcome{left:auto;right:6%;transform:translateY(-50%)}}
@media (min-width:900px) and (max-height:620px){.k98-welcome{transform:none}}

/* ---------- boot ---------- */
.k98-boot{display:none}
html.boot .k98-boot{display:flex;position:fixed;inset:0;z-index:300;background:#000;color:#e8e8e8;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  font-family:"DotGothic16",system-ui,sans-serif;font-size:18px;cursor:pointer}
.k98-boot img{width:120px;height:120px;filter:drop-shadow(0 0 20px rgba(233,185,90,.35))}
.k98-boot-name{font-size:44px;font-weight:700;letter-spacing:.04em;color:#f4e7c9}
.k98-boot-name b{color:#e9b95a}
.k98-boot-bar{width:min(260px,70vw);height:18px;padding:3px;border:2px solid #9a9a9a;display:flex;gap:3px;overflow:hidden}
.k98-boot-bar i{display:block;height:100%;width:100%;background:repeating-linear-gradient(90deg,#2b83cf 0 12px,transparent 12px 15px);animation:k98-boot 1.4s steps(18) forwards;transform-origin:left;transform:scaleX(0)}
@keyframes k98-boot{to{transform:scaleX(1)}}
.k98-boot p{margin:0;color:#a9a9a9}