#overallLB .lb-row, #puzzleLB .lb-row { border: none !important; box-shadow: none !important; background: transparent !important; }
#overallLB .lb-row.me, #puzzleLB .lb-row.me { border: none !important; box-shadow: none !important; }
#lbLeft.lb-panel, #lbRight.lb-panel {
    position: fixed;
    padding: 60px 12px; /* ensure content starts within the middle section */
    border: 0; box-shadow: none; background: transparent;
    overflow: hidden; /* keep caps within panel */
}
#lbLeft.lb-panel::before, #lbRight.lb-panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: 25px; bottom: 25px; pointer-events: none; z-index: 0;
    background: url('assets/icons/scroll-mid.gif') repeat-y center top;
    background-size: 100% auto;
}
#lbLeft.lb-panel::after, #lbRight.lb-panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image: url('assets/icons/scroll-top.gif'), url('assets/icons/scroll-bottom.gif');
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: 100% 50px, 100% 50px;
}

/* Ensure inner lists account for inner padding and remain clickable */
#lbLeft .lb-title, #lbRight .lb-title { position: relative; z-index: 2; margin-top: 0; }
#lbLeft .lb-list, #lbRight .lb-list { position: relative; z-index: 2; max-height: calc(100vh - 160px); overflow-y: auto; padding-bottom: 8px; }
/* RS-style parchment completion overlay */
.scroll-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 3000; }
.scroll-card { position: relative; width: min(720px, 92vw); max-width: 720px; }
.scroll-img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.scroll-text { position: absolute; top: 32%; left: 0; right: 0; text-align: center; color: #261c12; font-family: 'RuneScape', Arial, sans-serif; max-width: 560px; margin: 0 auto; line-height: 1.4; padding: 0 16px; }
.scroll-sub { font-family: 'RuneScape', Arial, sans-serif; font-size: clamp(14px, 2.6vw, 18px); margin: 8px 0; }
.scroll-rsn { margin-top: 16px; }
.scroll-rsn .input { margin-top: 8px; }
.scroll-actions { position: absolute; bottom: 22%; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; }
.scroll-x { position: absolute; top: 16%; right: 12%; width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; }
.scroll-x:hover { opacity: .85; }

@media (max-width: 640px) {
  .scroll-actions { bottom: 22%; }
  .scroll-x { top: 15%; right: 11%; width: 32px; height: 32px; }
}
/*
 OSRS-themed Connections styles
 - Fonts per osrs.design (place local .ttf files in assets/fonts/)
 - Colors per osrs.design
*/

/* CSS Variables for OSRS palette */
:root {
    --osrs-yellow: #FFCF3F;
    --osrs-gold: #E6A519;
    --osrs-brown: #694D23;
    --osrs-dark-brown: #382D1A;
    --osrs-black: #0F0F0F;

    --osrs-ui-bg: #2E2C29;
    --osrs-ui-border: #474745;
    --osrs-ui-panel: #46433A;

    --osrs-green: #00FF00;
    --osrs-red: #FF0000;
    --osrs-blue: #008BFF;
    --osrs-cyan: #00FFFF;

    /* shared grid width so panels can match */
    --grid-max: 600px;
    --grid-gap: 8px;
    --grid-padding: 10px;
    --grid-border: 2px;
    --tile-size: calc((var(--grid-max) - (2 * var(--grid-padding)) - (2 * var(--grid-border)) - (3 * var(--grid-gap))) / 4);
    --board-width: calc(var(--grid-max) + 2 * var(--grid-padding) + 2 * var(--grid-border));
}

/* Local font-face declarations (provide files under assets/fonts) */
@font-face {
    font-family: 'RuneScape';
    src: url('assets/fonts/runescape.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RuneScape Small';
    src: url('assets/fonts/runescape_small.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RuneScape Bold';
    src: url('assets/fonts/runescape_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; image-rendering: pixelated; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--osrs-ui-bg);
    color: var(--osrs-yellow);
    font-family: 'RuneScape', Arial, sans-serif;
    -webkit-font-smoothing: none;
    text-rendering: optimizeSpeed;
}

.container {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

 .header { text-align: center; margin-bottom: 16px; position: relative; }
.title { margin: 0; font-size: 34px; color: var(--osrs-gold); font-family: 'RuneScape Bold', Arial, sans-serif; }
.subtitle { margin: 6px 0 0; color: var(--osrs-yellow); font-family: 'RuneScape Small', Arial, sans-serif; }
h1, h2, h3 { font-family: 'RuneScape Bold', Arial, sans-serif; }
p, li, label, input, textarea, button { font-family: 'RuneScape', Arial, sans-serif; }
.header { position: relative; }
 .header-actions { display: none; }
.header-rail { display: flex; justify-content: space-between; align-items: center; width: var(--board-width); margin: 0 auto; }
.header-rail #browsePuzzles { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.header-rail #browsePuzzles::before { content: ""; display: inline-block; width: 16px; height: 16px; background: url('assets/icons/search.png') no-repeat center / contain; image-rendering: pixelated; }
.rsn-footer { margin: 6px auto 0; width: var(--board-width); font-family: 'RuneScape Small', Arial, sans-serif; font-size: 0.95rem; color: var(--osrs-yellow); display: flex; align-items: center; gap: 8px; }
.rsn-footer #shareBtn { order: 0; }
.rsn-footer #rsnBanner { order: 1; margin-left: auto; }
.rsn-footer #openRsnBtn, .rsn-footer #logoutBtn { order: 2; }
.rsn-footer .btn-small { margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.rsn-footer .btn-small[hidden] { display: none !important; }
.rsn-footer a.btn-small { color: var(--osrs-gold); cursor: pointer; }
.rsn-footer a.btn-small:hover { color: #ffd064; }
.badge {
    position: absolute;
    top: -8px;
    right: -14px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--osrs-red);
    color: #fff;
    font-family: 'RuneScape Bold', Arial, sans-serif;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Add icon inside Login/Logout buttons */
#openRsnBtn::before, #logoutBtn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background: url('assets/icons/logout.png') no-repeat center / contain;
    image-rendering: pixelated;
    vertical-align: middle;
    position: relative;
    top: 0;
}
h1, h2, h3 { font-family: 'RuneScape Bold', Arial, sans-serif; }
p, li, label, input, textarea, button { font-family: 'RuneScape', Arial, sans-serif; }

.panel {
    background: var(--osrs-ui-panel);
    border: 2px solid var(--osrs-ui-border);
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--osrs-black) inset, 0 2px 0 0 rgba(0,0,0,0.4);
}

.instructions.panel { padding: 12px; margin-bottom: 12px; }
#game-container { width: fit-content; margin: 0 auto; }
#game-container > #topInstructions,
#game-container > #solved-container,
#game-container > #controls { width: 100%; box-sizing: border-box; }

.lb-panel { padding: 10px; }
.lb-title { margin: 0 0 6px; color: #000; font-family: 'RuneScape Bold', Arial, sans-serif; text-align: center; }
.lb-title { position: relative; }
.lb-title::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: middle; background: url('assets/icons/skills.png') no-repeat center / contain; image-rendering: pixelated; position: relative; top: -7px; }
#lbRight .lb-title::before { background-image: url('assets/icons/combat.png'); width: 16px; height: 16px; top: -5px; }
.lb-list { display: grid; gap: 6px; overflow-x: hidden; }
.lb-header { display: grid; grid-template-columns: 1fr 60px 64px; gap: 4px; align-items: center; padding: 6px 8px; background: transparent; border: none; border-radius: 0; position: sticky; top: 0; z-index: 3; }
.lb-header div { font-family: 'RuneScape Bold', Arial, sans-serif; color: #000; }
.lb-header div:nth-child(1) { text-align: left; }
.lb-header div:nth-child(2), .lb-header div:nth-child(3) { text-align: center; }
.lb-row { display: grid; grid-template-columns: 1fr 60px 64px; gap: 4px; align-items: center; background: transparent; border: none; border-radius: 0; padding: 4px 2px; }
.lb-row.me { box-shadow: none; border: none; }
.lb-row .lb-name, .lb-row .lb-stat { color: #000; font-family: 'RuneScape', Arial, sans-serif; }
.lb-row.me .lb-name { font-family: 'RuneScape Bold', Arial, sans-serif; }
.lb-row.me .lb-stat { font-family: 'RuneScape Bold', Arial, sans-serif; }
.lb-name { text-align: left; }
.lb-stat { text-align: center; }
#puzzleLB .lb-row .lb-stat:last-child, #puzzleLB .lb-header div:last-child { text-align: right; }
.lb-row.me { border-color: var(--osrs-gold); box-shadow: 0 0 0 1px var(--osrs-gold) inset; }
.lb-name { font-family: 'RuneScape', Arial, sans-serif; color: var(--osrs-yellow); }
.lb-stat { font-family: 'RuneScape Small', Arial, sans-serif; color: var(--osrs-yellow); }
.instructions.panel.info { background: #4b402a; border-color: #6a5734; }
.instructions.panel.info p { color: #ffe6a6; }
.instructions.panel.info strong { color: #ffdb6e; }
.instructions p { margin: 0; }
.instructions strong { color: var(--osrs-gold); }

#board { border: 2px solid var(--osrs-ui-border); border-radius: 6px; padding: var(--grid-padding); background: #1b1a17; width: var(--board-width); margin: 0 auto; box-sizing: border-box; box-shadow: inset 0 0 0 2px var(--osrs-ui-border), 0 2px 0 rgba(0,0,0,.4); min-height: 0; }

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
    user-select: none;
    max-width: var(--grid-max);
    padding: 0; /* padding is now on #board */
}

/* Inventory-style wrapper now handled by #board */

.tile {
    position: relative;
    background: #1f1e1b;
    border: 2px solid var(--osrs-dark-brown);
    border-radius: 6px;
    width: var(--tile-size);
    height: var(--tile-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    color: var(--osrs-yellow);
    transition: transform 100ms ease, box-shadow 100ms ease, border-color 100ms ease, background 100ms ease, color 100ms ease, opacity 100ms ease, filter 120ms ease;
    box-sizing: border-box;
}
.tile:hover { box-shadow: 0 2px 0 0 rgba(0,0,0,.6); border-color: var(--osrs-ui-border); }
.tile:focus-visible { outline: 2px solid var(--osrs-blue); outline-offset: 2px; }
.tile.selected { background: #214166; color: #fff; border-color: var(--osrs-blue); filter: drop-shadow(0 0 6px rgba(0,139,255,.35)); }
.tile.correct { background: #4a3a0f; border-color: var(--osrs-gold); color: var(--osrs-gold); }
.tile.incorrect { background: #4a0f0f; border-color: var(--osrs-red); color: #fff; }
.tile.locked { cursor: default; opacity: .95; }

/* Solved groups container (above grid) */
.solved-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; width: var(--board-width); margin-left: auto; margin-right: auto; align-items: center; }

/* Solved row container overlay */
/* Full-width solved panels */
.solved-panel { width: 100%; height: var(--tile-size); margin: 0 auto; background: var(--osrs-ui-panel); border: 2px solid var(--osrs-brown); border-radius: 6px; padding: 6px 10px; box-shadow: 0 2px 0 rgba(0,0,0,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; }
.solved-title { font-family: 'RuneScape Bold', Arial, sans-serif; font-size: 1.35rem; color: #fff; margin-bottom: 4px; }
.solved-items { font-family: 'RuneScape Small', Arial, sans-serif; font-size: 1.1rem; color: #fff; }

/* Subtle stone texture overlay */
.tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    pointer-events: none;
    background-image: url('assets/textures/stone.jpg'), repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, rgba(0,0,0,0.04) 2px 4px);
    background-size: 64px 64px, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
    opacity: .22;
}

/* Tile content layout */
.tile-content { display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; gap: 6px; width: 100%; height: 100%; }
.tile-icon { width: 40px; height: 40px; image-rendering: pixelated; }
.tile-label { font-family: 'RuneScape Small', Arial, sans-serif; font-size: 1.3rem; line-height: 1.2; padding: 0 4px; }

.controls { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.btn {
    appearance: none;
    border: 2px solid var(--osrs-ui-border);
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 700;
    font-family: 'RuneScape Bold', Arial, sans-serif;
    color: var(--osrs-yellow);
    background: #1f1e1b;
    box-shadow: 0 2px 0 rgba(0,0,0,.4);
    transition: transform 80ms ease, background 120ms ease, opacity 120ms ease, border-color 120ms ease;
}
.btn:hover { background: #2a2824; border-color: var(--osrs-gold); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: #3a2f14; border-color: var(--osrs-gold); color: var(--osrs-gold); }
.btn-primary:hover { background: #4a3a1a; }
.btn-danger { background: #372020; border-color: #c85f5f; color: #ffb3b3; }
.btn-danger:hover { background: #452626; border-color: #d67474; }

.message-bar { margin-top: 10px; padding: 8px; border: 2px solid var(--osrs-ui-border); border-radius: 6px; background: #1f1e1b; color: var(--osrs-cyan); font-family: 'RuneScape Small', Arial, sans-serif; text-align: center; }

.found-list { display: none; }
.group-panel { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; border: 2px inset var(--osrs-ui-border); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.group-title { font-family: 'RuneScape Bold', Arial, sans-serif; }
.group-items { font-family: 'RuneScape Small', Arial, sans-serif; }
.group-teal { background: #0b3b3b; color: #7ed6d6; --group-overlay: rgba(126,214,214,0.25); }
.group-purple { background: #2d1740; color: #cda4ff; --group-overlay: rgba(205,164,255,0.25); }
.group-green { background: #103d10; color: #8cf18c; --group-overlay: rgba(140,241,140,0.25); }
.group-red { background: #3d1010; color: #ff9c9c; --group-overlay: rgba(255,156,156,0.25); }
.menu { margin-top: 10px; padding: 10px; display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.button-group { display: flex; gap: 8px; }
.guess-counter { margin-top: 0; text-align: right; font-family: 'RuneScape Small', Arial, sans-serif; color: var(--osrs-yellow); white-space: nowrap; }
.owner-actions { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.hitsplat { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; top: -2px; }
.hitsplat img { width: 32px; height: 24px; display: inline-block; image-rendering: pixelated; }
.hitsplat #mistakesNum { position: absolute; top: 50%; left: 50%; transform: translate(-63%, -50%); font-family: 'RuneScape Bold', Arial, sans-serif; color: #fff; font-size: 14px; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }

/* Completion dialog */
.completion-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: fit-content; max-width: 600px; padding: 16px 24px; background-color: var(--osrs-ui-panel); border: 2px solid var(--osrs-brown); border-radius: 8px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.5); z-index: 1000; }
.completion-dialog h2 { font-family: 'RuneScape Bold', Arial, sans-serif; font-size: 1.4rem; color: var(--osrs-yellow); margin: 0 0 8px 0; }
.completion-dialog p { font-family: 'RuneScape', Arial, sans-serif; font-size: 1rem; color: var(--osrs-gold); margin: 4px 0; }
.completion-dialog .perfect { color: var(--osrs-green); }
.completion-dialog .close-button { margin-top: 12px; padding: 6px 14px; border: 2px solid var(--osrs-brown); border-radius: 6px; background-color: var(--osrs-ui-panel); color: var(--osrs-yellow); font-family: 'RuneScape', Arial, sans-serif; cursor: pointer; }
.completion-dialog .close-button:hover { background-color: #3A322C; }
.menu .instructions { margin-bottom: 10px; }
.guess-counter { margin-top: 8px; text-align: center; font-family: 'RuneScape Small', Arial, sans-serif; color: var(--osrs-yellow); }

/* Hide any stray status/input bars inside the main game container */
#status { display: none !important; }
#game-container > .message-bar { display: none !important; }
#game-container > input.input, #game-container > .input { display: none !important; }

/* Modals */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5); z-index: 1000; }
.modal.show { display: flex; }
.modal#rsnModal { align-items: flex-start; padding-top: 8vh; }
.modal .dialog { width: min(720px, 92vw); padding: 16px; }
.modal .dialog h2 { margin: 0 0 8px; color: var(--osrs-gold); font-family: 'RuneScape Bold', Arial, sans-serif; }
.modal .dialog p { margin: 0 0 8px; }
.modal .dialog .list { margin-top: 8px; display: grid; gap: 8px; }
.pzl-toolbar { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 8px; }
.pzl-controls { display: inline-flex; gap: 8px; align-items: stretch; }
/* Floating filters popover (no layout shift) */
.pzl-filters { position: absolute; top: 100%; right: 0; margin-top: 8px; width: min(520px, 80vw); padding: 10px; border: 2px solid var(--osrs-ui-border); border-radius: 6px; background: #2a2824; box-shadow: 0 8px 24px rgba(0,0,0,.6); z-index: 20; }
.pzl-filter-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; margin: 6px 0; }
.pzl-filter-tags { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pzl-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pzl-count { font-family: 'RuneScape Small', Arial, sans-serif; color: var(--osrs-yellow); }
.pzl-pager { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
.pzl-page { font-family: 'RuneScape Small', Arial, sans-serif; color: var(--osrs-yellow); }

/* Quest list styling */
.quest-list { border: 2px solid var(--osrs-ui-border); border-radius: 6px; background: #1f1e1b; box-shadow: inset 0 0 0 1px var(--osrs-black); padding: 6px; display: grid; gap: 2px; }
.quest-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.quest-row:hover { background: #2a2824; }
.quest-name { color: var(--osrs-yellow); }
.quest-meta { font-family: 'RuneScape Small', Arial, sans-serif; color: #bba56b; display: inline-flex; gap: 10px; }
.quest-meta .type-badge { padding: 2px 6px; border: 2px solid var(--osrs-ui-border); border-radius: 6px; background: #1f1e1b; color: var(--osrs-yellow); }
.quest-name.completed { color: var(--osrs-green); }
.quest-name.uncompleted { color: var(--osrs-red); }
.quest-actions { display: inline-flex; gap: 6px; }
.quest-row .quest-actions .btn { padding: 2px 6px; font-size: 0.85rem; }

@media (max-width: 720px) {
  .pzl-filter-row { grid-template-columns: 1fr; }
  .quest-meta { display: none; }
}
.modal .dialog .modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--osrs-ui-border);
    border-radius: 6px;
    background: #1f1e1b;
    color: var(--osrs-yellow);
    font-family: 'RuneScape Bold', Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.modal .dialog .modal-close:hover { background: #2a2824; border-color: var(--osrs-gold); }
.puzzle-card-row { align-items: flex-start; }
.puzzle-meta { flex: 1 1 auto; }
.puzzle-status { min-width: 150px; }

/* Puzzle browser cards */
 .puzzle-card { border: 2px solid var(--osrs-ui-border); border-radius: 6px; padding: 10px; background-color: #1f1e1b; box-shadow: inset 0 0 0 1px var(--osrs-black); cursor: pointer; }
 .puzzle-card-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
 .puzzle-meta { display: grid; gap: 2px; }
.puzzle-status { text-align: right; }
.status-title { font-family: 'RuneScape Bold', Arial, sans-serif; }
.status-subtext { font-family: 'RuneScape Small', Arial, sans-serif; opacity: 0.9; }
.status-complete .status-title { color: var(--osrs-green); }
.status-incomplete .status-title { color: var(--osrs-gold); }
 .card-actions { display: flex; gap: 6px; margin-top: 4px; justify-content: flex-end; }
 .btn-small { padding: 4px 8px; font-size: 0.85rem; }
 .puzzle-card:hover { border-color: var(--osrs-gold); background-color: #24221e; }
 /* Toast */
 .toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #1f1e1b; color: var(--osrs-yellow); border: 2px solid var(--osrs-gold); border-radius: 6px; padding: 8px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.5); z-index: 3000; }

/* Disclaimer */
.site-disclaimer { max-width: 880px; margin: 24px auto; padding: 8px 12px; color: #bba56b; font-family: 'RuneScape Small', Arial, sans-serif; font-size: 0.95rem; opacity: 0.9; text-align: center; }

 /* Loading overlay */
 .loading-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); z-index: 2500; }
 .loading-overlay[hidden] { display: none !important; }
 .spinner { width: 36px; height: 36px; border: 4px solid #3a332b; border-top-color: var(--osrs-gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }

/* Creator form */
.creator-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fieldset { padding: 12px; }
.fieldset legend { color: var(--osrs-gold); font-family: 'RuneScape Bold', Arial, sans-serif; padding: 0 6px; }
.form-row { display: grid; grid-template-columns: 85px 1fr; align-items: center; gap: 8px; margin: 6px 0; }
.modal #rsnModal .form-row, #rsnModal .form-row { grid-template-columns: 1fr; }
.input, .textarea {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 2px solid var(--osrs-ui-border);
    background: #1f1e1b;
    color: var(--osrs-yellow);
}
.input option[data-placeholder="1"] { color: #8f8260; }
.category-name, .item-input { background-color: var(--osrs-ui-bg); color: var(--osrs-yellow); box-sizing: border-box; }
.category-name { border: 2px solid var(--osrs-gold); }
.item-input { border: 2px solid var(--osrs-ui-border); }
.textarea { min-height: 90px; resize: vertical; }
.helper { color: var(--osrs-cyan); font-family: 'RuneScape Small', Arial, sans-serif; }
.error { color: var(--osrs-red); font-family: 'RuneScape Small', Arial, sans-serif; }
.form-row label { font-family: 'RuneScape Small', Arial, sans-serif; }
/* Success message inside contact modal */
#contactSuccess { margin-top: 6px; }
/* Creator mode toggle */
.toggle-group { display: inline-flex; gap: 10px; align-items: center; }
.toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 2px solid var(--osrs-ui-border); border-radius: 6px; background: #1f1e1b; cursor: pointer; }
.toggle input { accent-color: var(--osrs-gold); }

/* Icon search field styling */
.icon-picker { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.icon-search-btn { height: 36px; padding: 6px 10px; border: 2px solid var(--osrs-ui-border); border-radius: 6px; background: #1f1e1b; color: var(--osrs-yellow); font-family: 'RuneScape Bold', Arial, sans-serif; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.icon-search-btn:hover { background: #2a2824; border-color: var(--osrs-gold); }
.icon-search-btn.disabled { opacity: .5; cursor: not-allowed; filter: grayscale(0.4); }
.icon-search-btn.icon-preview { cursor: default; opacity: 1; filter: none; }
.icon-search-btn.icon-preview:hover { background: #1f1e1b; border-color: var(--osrs-ui-border); }
.icon-search-btn.icon-preview.words-only { opacity: .6; }
.icon-search-btn.icon-preview.words-only img.icon-thumb { filter: grayscale(1) contrast(0.9) opacity(0.8); }
.icon-suggestions { position: absolute; z-index: 2000; left: 0; right: 0; max-height: 220px; overflow-y: auto; background: #1f1e1b; border: 2px solid var(--osrs-ui-border); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.6); display: none; }
.icon-suggestions.show { display: block; }
.icon-suggestion { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; }
.icon-suggestion:hover { background: #2a2824; }
.icon-thumb { width: 24px; height: 24px; image-rendering: pixelated; }
.icon-search-btn .icon-thumb { width: 24px; height: 24px; display: block; }

/* Creator icons mode UI */
.creator-icons-ui { margin-top: 6px; display: none; }
.creator-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.creator-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.creator-tile { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid var(--osrs-ui-border); border-radius: 6px; background: #1f1e1b; }
.creator-icon { width: 40px; height: 40px; image-rendering: pixelated; }
.creator-label { font-family: 'RuneScape Small', Arial, sans-serif; color: var(--osrs-yellow); }
.creator-actions { display: inline-flex; gap: 6px; }
.creator-empty { color: #a5976f; font-family: 'RuneScape Small', Arial, sans-serif; }

/* Creator stepper (mobile-friendly) */
.creator-controls { justify-content: space-between; }
.creator-controls #creatorNext { margin-left: auto; }
.creator-controls #creatorCancel { margin-left: auto; }
.creator-step { display: none; }
.creator-step.active { display: block; }

@media (max-width: 720px) {
    .creator-grid { grid-template-columns: 1fr; }
}

/* Fixed side leaderboards */
.lb-fixed {
    position: fixed;
    top: 120px;
    width: 240px;
    background: var(--osrs-ui-panel);
    border: 2px solid var(--osrs-ui-border);
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.lb-fixed.left { left: 16px; }
.lb-fixed.right { right: 16px; }

@media (max-width: 1200px) {
    .lb-fixed { display: none; }
}

/* Animations */
@keyframes fadeSlideUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes flashRed { 0% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgba(255,0,0,.6)); } 100% { filter: none; } }
.anim-out { animation: fadeSlideUp 240ms ease forwards; }
.anim-flash { animation: flashRed 320ms ease; }

/* --- Mobile-only styles --- */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }

    .container { max-width: none; padding-left: clamp(8px, 3vw, 16px); padding-right: clamp(8px, 3vw, 16px); }

    /* Header rail aligns actions within board width while being responsive */
    .header-rail { width: 100%; max-width: var(--board-width); padding-left: 0; padding-right: 0; }

    /* Ensure solved list, board, controls match viewport width without overflow */
    #game-container { width: 100%; }
    #game-container > #topInstructions,
    #game-container > #solved-container,
    #game-container > #controls { width: 100%; }

    /* Board wraps grid with fluid width */
    #board { width: 100%; max-width: var(--board-width); margin-left: auto; margin-right: auto; }

    /* Grid: 4 equal columns that fit screen */
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 2.6vw, 12px); max-width: none; }

    /* Tiles stay square, readable, and tappable (>=44px) */
    .tile { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: clamp(6px, 2.2vw, 10px); border-radius: 8px; }
    .tile-label { font-size: clamp(12px, 3.6vw, 16px); }

    /* Solved panel height follows tile size visually, but avoid overflow */
    .solved-panel { height: auto; min-height: 44px; }

    /* Controls: stick to bottom on mobile, larger tap targets (scope to main game controls only) */
    #controls { position: sticky; bottom: 0; background: #1b1a17; padding-top: 8px; padding-bottom: 10px; gap: 8px; justify-content: center; }
    .menu { min-height: auto; }
    .button-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
    .btn { min-height: 44px; padding: 10px 14px; font-size: clamp(14px, 3.6vw, 16px); }
    /* Smaller text for bottom action buttons so labels fit */
    .button-group .btn { width: 100%; white-space: nowrap; font-size: clamp(12px, 3vw, 14px); padding: 10px 12px; }
    /* Place guess counter on its own wrapped line */
    #guess-counter, .guess-counter { grid-column: 1 / -1; text-align: center; white-space: normal; line-height: 1.2; font-size: clamp(12px, 3.2vw, 14px); margin-top: 6px; }
    .btn-small { min-height: 36px; }

    /* Hide owner actions (Edit/Delete) on mobile */
    #ownerActions { display: none !important; }

    /* Creator modal form stack */
    .creator-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }

    /* Prevent long words/labels from causing overflow */
    .tile, .instructions, .btn, .lb-row, .puzzle-card { word-break: break-word; hyphens: auto; }

    /* Login banner layout for small screens */
    .rsn-footer { width: 100%; max-width: var(--board-width); text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
    #rsnBanner { flex: 1 0 100%; white-space: normal; }

    /* Puzzle Browser footer actions alignment */
    #puzzleModal .dialog .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; justify-content: stretch; }
    #puzzleModal .dialog .controls .btn { width: 100%; }
}