/* Minimal, clean layout – let at integrere i din side */
:root{
  --bg:#0b1220;
  --card:#0f1a2e;
  --muted:#9fb0d0;
  --text:#e8eefc;
  --accent:#5ee4ff;
  --accent2:#ffd86b;
  --border:rgba(255,255,255,.10);
}
#cookie-bar 
{
   background: #111111; 
   color: #EEEEEE;
   font-family: "Arial";
   font-size: 15px;
   text-align: center; 
   padding: 16px 0;
}
#cookie-bar.fixed 
{
   position: fixed; 
   top: 0; 
   left: 0; 
   width: 100%;
}
#cookie-bar.fixed.bottom 
{
   bottom: 0; 
   top: auto;
}
#cookie-bar p 
{
   margin: 0; 
   padding: 0;
}
#cookie-bar a 
{
   color: #FFFFFF; 
   display: inline-block; 
   border-radius: 3px; 
   text-decoration: none; 
   padding: 4px 6px; 
   margin-left: 8px;
}
#cookie-bar .cb-enable 
{
   background: #007700;
}
#cookie-bar .cb-enable:hover 
{
   background: #009900;
}
#cookie-bar .cb-disable 
{
   background: #990000;
}
#cookie-bar .cb-disable:hover 
{
   background: #BB0000;
}
#cookie-bar .cb-policy 
{
   background: #0033BB;
}
#cookie-bar .cb-policy:hover 
{
   background: #0055DD;
}
    * {
        box-sizing: border-box;
    }

    body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: #f4e4c1;
    }

    /* Tema: Middelalder (standard) */
    body.theme-medieval {
        background:
            radial-gradient(circle at top, rgba(255,255,255,0.04), rgba(0,0,0,0.9)),
            repeating-linear-gradient(
                90deg,
                #3a2410 0px,
                #3a2410 40px,
                #2a180a 40px,
                #2a180a 80px
            );
        background-attachment: fixed;
    }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 30% 10%, rgba(94,228,255,.18), transparent 60%),
              radial-gradient(900px 600px at 70% 0%, rgba(255,216,107,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}
.wrap{max-width:1180px;margin:0 auto;padding:18px}
.topbar{
  display:flex;gap:16px;align-items:flex-end;justify-content:space-between;
  padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:rgba(15,26,46,.75);
  backdrop-filter: blur(10px);
}
h1{margin:0;font-size:22px;letter-spacing:.3px}
h2{margin:0 0 8px 0;font-size:18px}
p{margin:6px 0 0 0}
.muted{color:var(--muted)}
.small{font-size:12px}
.hud{display:flex;gap:14px}
.hud .label{color:var(--muted);font-size:12px;margin-right:6px}
.grid{display:grid;grid-template-columns: 1fr 340px;gap:14px;margin-top:14px}
.card{
  border:1px solid var(--border);border-radius:16px;background:rgba(15,26,46,.75);
  backdrop-filter: blur(10px);
  padding:14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.gamecard{padding:12px}
.canvasWrap{
  border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(#93d7ff, #cfefff 55%, #e7f7ff);
}
canvas{display:block;width:100%;height:auto;touch-action:none}
.controls{display:flex;gap:10px;align-items:center;margin-top:12px}
.btn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
  color:var(--text);
  padding:10px 12px;border-radius:12px;
  font-weight:600;
}
.btn:hover{border-color:rgba(94,228,255,.45)}
.btn.primary{
  background: linear-gradient(80deg, rgba(94,228,255,.22), rgba(94,228,255,.10));
  border-color: rgba(94,228,255,.50);
}
.spacer{flex:1}
.tip{margin-top:10px;font-size:13px}

.asideTop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.toplist{margin:10px 0 0 20px;padding:0}
.toplist li{margin:6px 0}
.asideActions{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.asideActions .btn{font-size:13px;padding:9px 10px;text-decoration:none;display:inline-block}

/* Modals */
.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background: rgba(0,0,0,.55);padding:16px;
}
.modal[aria-hidden="false"]{display:flex}
.modalCard{
  width:min(520px, 100%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background: rgba(15,26,46,.90);
  padding:16px 16px 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.modalCard h3{margin:0 0 6px 0}
.input{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  color:var(--text);
  padding:12px;
  margin-top:8px;
}
.row{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}

@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .topbar{align-items:flex-start}
  .hud{margin-top:6px}
}