*, *::before, *::after {margin:0px;padding:0px;box-sizing:border-box}
html{font-size:clamp(13px, 2.5vw, 16px); height: 100%;}
body{
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 line-height:1.2;
 background:#333;
 overflow:hidden;
 height: 100dvh;
}

iframe{border:0;background-color:transparent}
.aframe{width:100%;min-height:50px;max-height:100px}
.fullvideoiframe{border:0;overflow:hidden;background-color:transparent;width:100%;min-height:calc(100dvh - 40px)}
.financeframe{height:calc(100dvh + 20px)}
.noscroll{overflow:hidden}

/* SCROLLBAR */
.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #eee;
}
.scrollbar::-webkit-scrollbar {
  width: 8px;
}
.scrollbar::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
  border: 2px solid #eee;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

main {
 width: 100%;
 /* Subtraherar footern och safe-area för att visa allt innehåll */
 height: calc(100dvh - 40px - env(safe-area-inset-bottom,0px));
 padding-bottom:60px;
 overflow-y:auto;
 user-select: none;
 -webkit-overflow-scrolling: touch;
 transition: width .25s ease;
}

/* INFO */
h1,h2,p{font-size:1.0em}
.info-cont{
 width:clamp(350px, 50vw, 600px);text-align:left;
 border-top:1px solid #ccc; border-bottom:1px solid #ccc;border-radius:10px 10px 0px 0px;border-inline:1px solid #ccc;
 margin-bottom:15px;
}
.info-header{
 background:#082567;color:#fff;text-align:left;padding:10px;
 border-radius:10px 10px 0px 0px;
}
.info-item{
 background:#eee;color:#000;text-align:left;padding:10px;
}
.game-item{
 display:flex;justify-content:center;align-items:center;width:100%;height:40px;margin-bottom:1px;
 font-size:1.5em;font-weight:bold;
 cursor:pointer;
}
.game-item-link{ background:green;color:white;width:100%; }

/* FORM */
form { max-width: 100%; margin: auto; background: #fff; padding: 20px 24px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
label { display:block;margin-bottom:6px;font-weight:bold;text-align:left; }
input[type="checkbox"] { display: inline-block; width: auto; }
input, textarea, select { width:100%; padding:10px 0px; margin-bottom:16px; border:1px solid #ccc; border-radius:6px; font-size:1rem; text-indent:10px; }
textarea { height:120px; resize:vertical; }
.form-actions { display:flex; justify-content:space-between; margin-top:12px; }
.form-actions > div { display: flex; gap: 8px; }
button { padding:10px 16px; border:none;border-radius:6px; font-size:1rem;cursor:pointer; }
.cancel { background:#e5e7eb; color:#111; }
.cancel:hover { background:#d1d5db; }
.submit { background:#2563eb; color:white; }
.submit:hover { background:#1e40af; }
.button_std{

}

/* INSTALL */
#installBtn {
 display: block; padding:14px 22px; background:#0078ff;color:white;
 border:none;border-radius:10px; font-size:18px;font-weight:600;
 cursor:pointer; width:100%;max-width:320px; margin:20px auto;
 text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 transition: transform 0.15s ease, background 0.2s ease;
}

/* LISTMENU */
.listmenu-item{
 background:#ddd;width:100%;height:60px;font-size:1.5em;padding-left:10px;
 border-top:1px solid #ccc;display:inline-flex;align-items:center;cursor:pointer;
}
.listmenu-item:hover { background:#4da3ff; }

/* FOOTER */
footer{
 position:fixed;bottom:0;left:0;background:#222;width:100%;user-select: none;
 /* Inkluderar safe-area höjd */
 height:calc(40px + env(safe-area-inset-bottom, 0px));
 display:grid;grid-template-columns: 40px 1fr 40px;
 align-items:center;
 z-index:999; /* Alltid överst för att kunna stänga menyn */
 padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer-col-left, .footer-col-right {
 display:flex;justify-content:center;
 font-size:1.5em;color:#aaa;
}
.footer-col-left:hover, .footer-col-right:hover { color:#fff;cursor:pointer; }

.footer-mid {
 background:#000;color:#fff;height:30px;
 border-radius:20px 20px 0 0;
 display:flex;align-items:center;justify-content:center;
 align-self:end;
}
.footer-icon {padding:0 4%;font-size:1.2em}
/* FOOTER */

/* MENU */
aside {
 position:fixed;top:0;right:0;width:350px;background:#333;user-select:none;
 height:calc(100dvh - 40px - env(safe-area-inset-bottom, 0px)); 
 z-index:500; /* Lägre än footer (999) så knappen fungerar */
 transform:translateX(350px);
 transition:transform .25s ease;
 display: flex;
 flex-direction: column;
}

aside.open { transform:translateX(0); }

@media (max-width: 768px) {
 aside { width:100%; transform:translateX(100%); }
 aside.open { transform: translateX(0); }
 main.aside-open { width:100%; }
}

@media (min-width: 769px) {
 aside.open { border-left: 2px solid #ddd; }
 main.aside-open { width:calc(100% - 350px); }
}

aside .aside-inner {
 flex: 1;
 overflow-y:auto;
 padding-top:15px;
 display:flex;
 flex-direction: column;
 align-items:center;
 color:white;
}
.view{
 padding-bottom:20px;
}
.view * + b {
 margin-top: 15px;
}
.view b {
 display: block;
 padding-left: 10px;
 margin-bottom: 15px;
}
.menu-header{
 background:#000; height:50px; display:flex; align-items:center; justify-content:center; gap:15px; flex-shrink: 0;
}
.menu-header-icon {color:#aaa;font-size:2.0em}
.menu-header-icon:hover {color:#fff;cursor:pointer}
.menu-header-icon.active { color: #4da3ff; }
.aside-inner .view { display:none; width: 100%; }
.aside-inner .view.active { display:block; }

.menu-item{
 background:#ddd;width:320px;height:60px;font-size:1.5em;padding-left:10px;
 border:1px solid #ccc;display:flex;align-items:center;margin: 0 auto 5px auto;
}
.menu-item:hover { background:#4da3ff; }
.menu-item-icon{ font-size:1.5em;padding-right:5px; }
.menu-item-color{ background:#eee;color:#000; }
.menu-item-disabled{ background:gray;color:#000; }
/* MENU */

/* HJÄLPKLASSER */
.fs-06{ font-size:0.6em; }
.fs-08{ font-size:0.8em; }
.pad5{ padding:5px; }
.text { font-size: 1.0em; line-height: 0.8; }
.w100p{ width:100%; }
a{ text-decoration:none; color:#000; }
.link{ text-decoration:underline; cursor:pointer; }
.nolink{ text-decoration:none; }
.linkicon{ display: inline-flex; align-items: center; gap: 0.5rem; text-decoration:none; }
.hide{ display:none; }
.disabled{ background:gray; }
.textcenter { text-align:center; }
.textleft { text-align:left; }
.bc-green{background:#007d3e;color: #fff;}
.bc-red{background:#e5323b;color: #fff;}
.tc-black{ color:#000; }
.tc-white{ color:#fff; }
.tc-gray{ color:gray; }
.tc-green{ color:green; }
.tc-red{ color:#990000; }
.tc-blue{ color:#87CEFA; }
.text-bold { font-weight: bold; }
.center{
 display: grid;
 place-items: start center;
 align-items: start;
 align-content: start;
 text-align: center;
}
.link-block{display: block; width: 100%; text-decoration: none;}