@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Monoton&family=Press+Start+2P&family=Lilita+One&display=swap');
:root{ --cell:11px; --grid-line:rgba(0,0,0,.08); --ink:#111; --bg1:#fff176; --bg2:#ffe082; --accent:#ff00f7; --accent2:#00e5ff }
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(circle at 20% 10%, var(--bg2) 0, var(--bg1) 35%, #fff59d 70%);
  background-attachment:fixed;color:var(--ink);font-family:"Lilita One",system-ui,Arial}
a{text-decoration:none;color:inherit}
.header{position:sticky;top:0;z-index:50}
.topbar{padding:.9rem 1.2rem;background:linear-gradient(90deg,#111 0 20%,#2f005b 50%,#111 100%);
  color:#fff;display:flex;align-items:baseline;gap:1rem;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.brand{font:700 1.6rem "Monoton";text-shadow:0 3px 0 #ffea00,0 0 18px rgba(255,0,255,.65)}
.tag{font:700 .9rem "Press Start 2P";opacity:.85}
.rainbow{height:6px;background:linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#00e676,#00e5ff,#7c4dff,#ff00f7,#ff004c);
  animation:scrollx 6s linear infinite}
@keyframes scrollx{to{background-position:200% 0}}
.notice{background:repeating-linear-gradient(45deg,#fff59d 0 12px,#ffeb3b 12px 24px);
  padding:.7rem 1rem;border-bottom:3px solid #111;color:#111;font:700 1rem "Bangers";letter-spacing:.5px}
.stage{min-height:calc(100vh - 150px);display:flex;justify-content:center;align-items:flex-start;padding:24px}
.grid{position:relative;width:calc(100 * var(--cell));height:calc(100 * var(--cell));background:#fff;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:calc(var(--cell)) calc(var(--cell));border:1px solid #000;outline:8px solid transparent;
  box-shadow:0 0 0 4px #111,0 0 0 6px var(--accent),0 0 0 10px var(--accent2),0 10px 30px rgba(0,0,0,.18)}

.tile{position:absolute;overflow:hidden;border:0;display:flex;align-items:center;justify-content:center;
  background:#fff} /* čisté biele pozadie, žiadny blur */
.tile.backfill-blur::before{content:"";position:absolute;inset:0;background:var(--backfill, none);
  background-position:center;background-size:cover;filter:blur(14px) saturate(120%);transform:scale(1.1)}
.tile .thumb{width:100%;height:100%;display:block;object-position:center;image-rendering:auto}
.tile.fit-contain .thumb{object-fit:contain}
.tile.fit-cover .thumb{object-fit:cover}

.tooltip{position:fixed;left:0;top:0;transform:translate(-9999px,-9999px);background:#111;color:#fff;
  padding:.25rem .45rem;border:2px solid #fff;border-radius:0;font:700 .8rem "Bangers";pointer-events:none;z-index:1000;
  box-shadow:6px 6px 0 #fff, 0 6px 20px rgba(0,0,0,.3)}
.panel{position:fixed;left:16px;top:162px;z-index:60;background:#fff;border:3px solid #111;border-radius:0;
  padding:1rem;box-shadow:10px 10px 0 #111,0 10px 28px rgba(0,0,0,.25);width:360px}
.panel h3{margin:.1rem 0 .6rem 0;font:700 1.4rem "Bangers"}
.panel .row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.panel label{display:grid;gap:.25rem;font:700 .95rem "Lilita One"}
.panel input,.panel select,.panel button{font:700 1rem "Lilita One";padding:.5rem .6rem;border:2px solid #111;border-radius:0}
.panel button{background:linear-gradient(90deg,#7c4dff,#00e5ff);color:#fff;border-color:#111;cursor:pointer;margin-top:.35rem}
.stage.admin{padding-left:390px}


/* === Mobile scaling fix (keeps 100x100 grid in view without breaking positions) === */
.board-wrap{position:relative; max-width:100vw; overflow:visible}
@media (max-width: 640px){
  .stage{padding:12px}
  .board-wrap{width:100vw; overflow:hidden}
  /* square spacer to keep correct scroll height */
  .board-wrap::before{content:""; display:block; width:100%; padding-top:100%}
  .board-wrap > .grid{
    position:absolute; left:0; top:0;
    transform-origin:top left;
    transform:scale(calc(100vw / (100 * var(--cell))));
  }
}