/* GNOMIANA – Flash-site 2001 theme */
:root{
  --bg:#05060b;
  --bg2:#0b1022;
  --panel1:#0f1a3a;
  --panel2:#0a1230;
  --text:#eaf0ff;
  --muted:#a9b8e8;
  --accent:#00e5ff;
  --accent2:#ff2bd6;
  --green:#27ff6f;
  --danger:#ff3559;
  --shadow:rgba(0,0,0,.6);
}
#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;
  color:var(--text);
  font-family: Verdana, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 30% 0%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(900px 520px at 75% 10%, rgba(255,43,214,.14), transparent 58%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}
.wrap{max-width:1120px;margin:0 auto;padding:18px 16px 24px}
.topbar{
  display:flex;gap:14px;align-items:flex-end;justify-content:space-between;
  padding:14px 16px;border-radius:18px;
  background: linear-gradient(180deg, rgba(15,26,58,.95), rgba(10,18,48,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 60px var(--shadow);
  position:relative;overflow:hidden;
}
.topbar::before{
  content:"";position:absolute; inset:-40% -20% auto -20%; height:80%;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
  transform: rotate(8deg);pointer-events:none;
}
.topbar::after{
  content:"";position:absolute; inset:0;
  background: radial-gradient(closest-side, rgba(0,229,255,.12), transparent 60%);
  pointer-events:none;
}
.title{
  margin:0;font-size:22px;letter-spacing:1px;text-transform:uppercase;
  display:flex;gap:10px;align-items:baseline;
  text-shadow: 0 0 12px rgba(0,229,255,.22);
}
.titleGlow{
  text-shadow: 0 0 10px rgba(0,229,255,.30), 0 0 18px rgba(255,43,214,.16);
}
.badge{
  font-size:11px;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(0,229,255,.18), rgba(0,0,0,.12));
  box-shadow: 0 0 0 3px rgba(0,229,255,.06);
}
.badgeFlash{
  background: linear-gradient(180deg, rgba(255,43,214,.22), rgba(0,0,0,.12));
  box-shadow: 0 0 0 3px rgba(255,43,214,.06);
}
p{margin:6px 0 0 0}
.muted{color:var(--muted)}
.small{font-size:12px}
.subline{opacity:.96}
.hud{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.hud > div{
  min-width:96px;padding:8px 10px;border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 26px rgba(0,0,0,.22);
}
.hud .label{font-size:11px;margin-right:6px;color:rgba(234,240,255,.75)}
.card{
  border-radius:18px;
  background: linear-gradient(180deg, rgba(15,26,58,.90), rgba(10,18,48,.88));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 60px var(--shadow);
  padding:14px;position:relative;overflow:hidden;
}
.card::after{
  content:"";position:absolute; inset:0;
  background: radial-gradient(closest-side, rgba(0,229,255,.10), transparent 60%);
  pointer-events:none;opacity:.7;
}
.card > *{position:relative}
.stage{margin-top:14px}
.canvasWrap{
  width:100%;max-width:860px;margin:0 auto;aspect-ratio: 16 / 9;
  border-radius:18px;overflow:hidden;background:#000;
  border:1px solid rgba(0,229,255,.25);
  box-shadow: 0 0 0 4px rgba(0,229,255,.06), 0 22px 44px rgba(0,0,0,.40);
  position:relative;
}
.canvasWrap::after{
  content:"";position:absolute; inset:0;pointer-events:none;opacity:.22;
  background:
    radial-gradient(closest-side, rgba(255,43,214,.10), transparent 55%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.40) 3px);
}
canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}
.hint{margin-top:10px;font-size:13px}
.btn{
  cursor:pointer;font-weight:700;padding:10px 12px;border-radius:14px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.12));
  box-shadow: 0 0 0 3px rgba(0,229,255,.06), 0 16px 26px rgba(0,0,0,.30);
}
.btn:hover{
  box-shadow: 0 0 0 3px rgba(255,43,214,.08), 0 18px 30px rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.18);
}
.btn:active{transform: translateY(1px)}
.btn.primary{
  border-color: rgba(39,255,111,.28);
  background: linear-gradient(180deg, rgba(39,255,111,.22), rgba(0,0,0,.12));
  box-shadow: 0 0 0 3px rgba(39,255,111,.08), 0 18px 30px rgba(0,0,0,.34);
}
.overlay{
  position:fixed; inset:0;display:none;align-items:center;justify-content:center;
  background: rgba(0,0,0,.68);padding:16px;z-index:50;
}
.overlay[aria-hidden="false"]{display:flex}
.panel{
  width:min(980px, 100%);border-radius:20px;
  background: linear-gradient(180deg, rgba(15,26,58,.96), rgba(10,18,48,.94));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  padding:14px;position:relative;overflow:hidden;
}
.panel::after{
  content:"";position:absolute; inset:0;pointer-events:none;opacity:.18;
  background: radial-gradient(closest-side, rgba(0,229,255,.12), transparent 60%);
}
.panel > *{position:relative}
.panelSmall{width:min(560px, 100%)}
.panelHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.panelTitle .big{font-weight:900;letter-spacing:1px;text-transform:uppercase;font-size:20px}
.panelTitle .small{font-size:12px}
.panelGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.panelCol{padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background: rgba(0,0,0,.10)}
.groupTitle{text-transform:uppercase;letter-spacing:.6px;font-weight:800;font-size:12px;color:rgba(234,240,255,.85);margin:4px 0 8px}
.btnRow{display:flex;gap:10px;flex-wrap:wrap}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}
.rowLabel{color:rgba(234,240,255,.78);font-size:13px}
.hsList{margin:10px 0 0 20px;padding:0}
.hsList li{margin:8px 0;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10))}
.panelFoot{margin-top:10px}
.input{
  width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);color:var(--text);
  padding:12px;margin-top:12px;
}
.input:focus{outline:none;border-color: rgba(0,229,255,.35);box-shadow: 0 0 0 3px rgba(0,229,255,.10)}
.fab{
  position:fixed;right:16px;bottom:16px;z-index:40;
  padding:12px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,43,214,.18), rgba(0,0,0,.14));
  color:var(--text);font-weight:900;letter-spacing:.8px;cursor:pointer;
  box-shadow: 0 0 0 3px rgba(255,43,214,.08), 0 18px 30px rgba(0,0,0,.36);
}
.fab:hover{box-shadow: 0 0 0 3px rgba(0,229,255,.10), 0 18px 30px rgba(0,0,0,.36)}
@media (max-width: 980px){
  .panelGrid{grid-template-columns:1fr}
  .hud{justify-content:flex-start}
}


.jsStatus{max-width:1120px;margin:10px auto 0 auto;padding:0 16px;opacity:.95}