/* Projekt: Ninabella | https://nina3c.dk/
 * Brugsvilkår: LICENSE.md / /brugsvilkaar/ | Kilder: SOURCES.md
 * Projekt-credit angiver ikke verificeret ophav til alle bidrag.
 */
/*
 * Ninabella | https://nina3c.dk/
 * Spil: PixelIQ
 * Fil: css/pixeliq.css
 * Version registreret: 2026-10-04T18:54:41+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-10-01T18:29:46+02:00
 * Observeret seneste filændring før registrering: 2026-10-02T01:53:20+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
/* PixelIQ: kun spilindhold. Fælles ramme og fuldskærm ligger i style.css. */
.pixeliq-content {
 --panel: rgba(10,22,40,.9); --line: rgba(255,255,255,.12);
 --text: #eef7ff; --muted: #9eb6ca; --accent: #71f6ff; --cell: 36px;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pixeliq-content .wrap { width: 100%; margin: 0; padding: 0; }
.pixel-ui-icon { display: inline-block; width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -.18em; }
.pixeliq-content .topbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
  }
.pixeliq-content button {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-radius: 14px;
    padding: 11px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  }
.pixeliq-content button:hover { background: rgba(255,255,255,.10); }
.pixeliq-content .layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 20px;
    align-items: stretch;
  }
.pixeliq-content .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.32);
  }
.pixeliq-content .board-card { padding: 18px; }
.pixeliq-content .board-wrap {
    overflow: auto;
    padding: 10px;
    display: flex;
    justify-content: center;
  }
.pixeliq-content .board {
    position: relative;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
.pixeliq-content .cell {
    position: absolute;
    width: var(--cell);
    height: var(--cell);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 2px;
    background: rgba(255,255,255,.025);
    box-shadow: inset 0 0 16px rgba(255,255,255,.018);
  }
.pixeliq-content .cell.off {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
.pixeliq-content .piece-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
.pixeliq-content .placed-piece {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
  }
.pixeliq-content .placed-piece.dragging { cursor: grabbing; z-index: 10; }
.pixeliq-content .drag-ghost {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    touch-action: none;
    opacity: .94;
    filter: brightness(1.08);
    transform: scale(1.035);
    transform-origin: top left;
    transition: none;
  }
.pixeliq-content .block {
    position: absolute;
    width: var(--cell);
    height: var(--cell);
    margin: 0;
    border-radius: 3px;
    box-shadow:
      0 0 14px currentColor,
      0 0 28px color-mix(in srgb, currentColor 35%, transparent),
      inset 0 0 10px rgba(255,255,255,.28);
    border: 1px solid rgba(255,255,255,.35);
  }
.pixeliq-content .side { padding: 18px; }
.pixeliq-content .side h2 { margin: 0 0 8px; font-size: 1.1rem; }
.pixeliq-content .meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }
.pixeliq-content .meta-box {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    color: var(--muted);
  }
.pixeliq-content .meta-box strong { display: block; color: var(--text); font-size: 1.05rem; }
.pixeliq-content .tray {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
.pixeliq-content .tray-piece {
    min-height: 110px;
    position: relative;
    border-radius: 16px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
  }
.pixeliq-content .tray-piece.used { opacity: .28; pointer-events: none; }
.pixeliq-content .mini-piece { position: relative; }
.pixeliq-content .mini-block {
    position: absolute;
    width: calc(var(--cell) - 4px);
    height: calc(var(--cell) - 4px);
    margin: 2px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.34);
    box-shadow: 0 0 10px currentColor;
  }
.pixeliq-content .tray-piece .mini-block {
    width: var(--mini-cell, var(--cell));
    height: var(--mini-cell, var(--cell));
    margin: 0;
    border-radius: 3px;
}
.pixeliq-content .hint {
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.45;
    font-size: .95rem;
  }
.pixeliq-content .status {
    margin-top: 14px;
    min-height: 24px;
    text-align: center;
    font-weight: 800;
    color: var(--accent);
  }
.pixeliq-content .win {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2,6,12,.55);
    backdrop-filter: blur(4px);
    z-index: 100;
  }
.pixeliq-content .win.show { display: flex; }
.pixeliq-content .win-box {
    width: min(420px, 88vw);
    text-align: center;
    padding: 28px;
    border-radius: 24px;
    background: rgba(9,20,36,.96);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 0 60px rgba(113,246,255,.22);
  }
.pixeliq-content .win-box h3 { margin: 0 0 10px; font-size: 2rem; }
.pixeliq-content .confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    overflow: hidden;
  }
.pixeliq-content .confetti i {
    position: absolute;
    width: 8px;
    height: 16px;
    border-radius: 3px;
    top: -20px;
    animation: pixeliq-fall 1.9s linear forwards;
  }
  @keyframes pixeliq-fall {
    to { transform: translateY(110vh) rotate(720deg); opacity: .9; }
  }

/* Mobile first: plade og brikker i de to eksisterende bokse. */
.pixeliq-content .topbar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-bottom: 8px; }
.pixeliq-content .topbar button { min-width: 0; min-height: 38px; padding: 5px 3px; border-radius: 9px; font-size: clamp(9px,2.7vw,11px); line-height: 1.15; }
.pixeliq-content .layout { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 6px; }
.pixeliq-content .card { min-width: 0; padding: 6px; border-radius: 13px; }
.pixeliq-content .board-wrap { min-width: 0; min-height: 0; overflow: hidden; padding: 3px; align-items: center; }
.pixeliq-content .meta { gap: 4px; margin-bottom: 6px; }
.pixeliq-content .meta-box { min-width: 0; padding: 5px; border-radius: 8px; font-size: .64rem; }
.pixeliq-content .meta-box strong { font-size: .78rem; }
.pixeliq-content .side h2 { margin-bottom: 4px; font-size: .82rem; }
.pixeliq-content .tray { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
.pixeliq-content .tray-piece { min-width: 0; min-height: 50px; border-radius: 9px; }
.pixeliq-content .mini-piece { flex: none; }
.pixeliq-content .hint { margin-top: 6px; font-size: .62rem; line-height: 1.25; }
.pixeliq-content .status { min-height: 16px; margin-top: 5px; font-size: .7rem; }
.pixeliq-content .tray-piece.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent),0 0 22px rgb(113 246 255 / 28%); }
@media (min-width: 521px) {
 .pixeliq-content { --cell: 40px; }
 .pixeliq-content .topbar { gap: 7px; margin-bottom: 10px; }
 .pixeliq-content .topbar button { font-size: 14px; padding: 6px 9px; }
 .pixeliq-content .layout { gap: 10px; }
 .pixeliq-content .card { padding: 10px; border-radius: 22px; }
 .pixeliq-content .meta-box { padding: 7px; font-size: .8rem; }
 .pixeliq-content .meta-box strong { font-size: 1.05rem; }
 .pixeliq-content .tray { gap: 7px; }
 .pixeliq-content .tray-piece { min-height: 68px; }
 .pixeliq-content .side h2 { font-size: 1rem; }
 .pixeliq-content .hint { font-size: .76rem; line-height: 1.3; }
 .pixeliq-content .status { font-size: 1rem; }
}
@media (min-width: 981px) {
 .pixeliq-content { --cell: 64px; }
 .pixeliq-content .layout { grid-template-columns: minmax(0,1.3fr) minmax(0,.9fr); gap: 20px; }
 .pixeliq-content .board-card { padding: 14px; }
 .pixeliq-content .side { padding: 16px; }
 .pixeliq-content .tray-piece { min-height: 126px; }
 .pixeliq-content .hint { font-size: .88rem; }
}
/* Skabelonen bestemmer rammen; spillet fordeler pladsen inde i den. */
.pixeliq-page.game-mode-active .pixeliq-content,
.pixeliq-page.game-mode-active .wrap { height: 100%; min-height: 0; }
.pixeliq-page.game-mode-active .wrap { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 8px; }
.pixeliq-page.game-mode-active .topbar { padding-right: 0; margin: 0; }
.pixeliq-page.game-mode-active .layout { height: 100%; min-height: 0; align-items: stretch; }
.pixeliq-page.game-mode-active .board-card { display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 0; }
.pixeliq-page.game-mode-active .board-wrap { height: 100%; }
.pixeliq-page.game-mode-active .side { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); }
.pixeliq-page.game-mode-active .tray { min-height: 0; grid-auto-rows: minmax(0,1fr); }
.pixeliq-page.game-mode-active .tray-piece { min-height: 0; }
.pixeliq-page.game-mode-active .hint { display: none; }

/* I rummeligt landskab samles spillet, og betjeningen ligger under spillefeltet. */
@media (orientation: landscape) and (min-width: 980px) and (min-height: 600px) {
 .pixeliq-page .ninabella-game-layout { max-width: 980px; }
 .pixeliq-content .tray-piece { min-height: 96px; }
 .pixeliq-page.game-mode-active .ninabella-game-page { place-items: center; }
 .pixeliq-page.game-mode-active .ninabella-game-layout {
  width: min(980px, 100%);
  height: min(580px, 100%);
 }
 .pixeliq-page.game-mode-active .wrap { grid-template-rows: minmax(0,1fr) auto; gap: 14px; }
 .pixeliq-page.game-mode-active .layout { grid-row: 1; }
 .pixeliq-page.game-mode-active .topbar { grid-row: 2; padding-right: 0; }
 .pixeliq-page.game-mode-active .tray-piece { min-height: 0; }
 .pixeliq-page.game-mode-active .side { padding-top: 48px; }
}

/* Samme rækkefølge i almindelig visning og fuldskærm på alle skærme. */
.pixeliq-content .wrap { display: grid; gap: 10px; }
.pixeliq-content .layout { grid-row: 1; }
.pixeliq-content .topbar { grid-row: 2; margin-bottom: 0; }