/* Spelbordet — DM stash + portal. Matches the site's Game Mode / Homebrew fantasy skin. */

#spelbordet .spelbord-loading { padding: 2rem; text-align: center; color: var(--text-muted, #6b7280); font-family: var(--font-cinzel, 'Cinzel'), serif; letter-spacing: .5px; }

.spelbord-wrapper { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem 5rem; }

/* ---- Hero ---- */
/* Full-bleed hero matching the group-page look: no box, no border — the
   artwork breaks out of the 1080px wrapper to span the whole viewport and
   fades to the page background at the sides and bottom. */
.spelbord-hero {
    position: relative;
    text-align: center;
    padding: 4.5rem 1rem 3rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* body.app-active reserves 55px under the fixed .unified-header; pull the
       hero up under its (semi-transparent, fading-to-transparent) gradient so
       there's no visible gap, matching the .landing-header hero elsewhere. */
    margin-top: -3rem;
    overflow: hidden;
    /* cover-crops the artwork; anchored to the BOTTOM edge so the top of the
       image is what gets cropped away */
    background-image: url('https://res.cloudinary.com/djewhpfed/image/upload/w_1600,f_auto,q_auto/v1770721302/groups/zunr4w26uta7eqtguxrh.webp');
    background-size: cover;
    background-position: center bottom;
}
/* scrim: readable-text darkening + fade to the page background (--bg-dark)
   on the left/right edges and toward the bottom */
.spelbord-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, #0d0d0d 0%, rgba(13, 13, 13, 0) 18%, rgba(13, 13, 13, 0) 82%, #0d0d0d 100%),
        linear-gradient(180deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.4) 45%, #0d0d0d 100%);
    pointer-events: none; z-index: 0;
}
.spelbord-hero > * { position: relative; z-index: 1; }

.spelbord-title {
    font-family: var(--font-display, 'Cinzel Decorative'), serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 .75rem;
    color: #ddd5c8;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.spelbord-tagline {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-style: italic;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    letter-spacing: .5px;
    color: #c9b97a;
    max-width: 560px;
    margin: 0 auto 1.75rem;
    line-height: 1.5;
}

/* primary CTA row — the single prominent action */
.spelbord-primary-row { display: flex; justify-content: center; margin-bottom: .5rem; }
.spelbord-primary.btn.btn-gold {
    min-width: 260px;
    font-size: 1rem;
    padding: .85rem 2rem;
    letter-spacing: 1px;
}

/* secondary action under the primary CTA (e.g. start new while a session is active) */
.spelbord-secondary-row { display: flex; justify-content: center; margin-top: .85rem; }
.spelbord-secondary {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: .85rem; letter-spacing: .3px;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary, #a0a8b8);
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    padding: .15rem .1rem;
    transition: color .15s, border-color .15s;
}
.spelbord-secondary:hover { color: #f0d875; border-color: var(--gm-gold, #d4af37); }

/* "Återuppta:" + dropdown, shown when more than one session is ongoing */
.spelbord-resume-picker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 260px;
    justify-content: center;
}
.spelbord-resume-label {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: 1rem;
    letter-spacing: 1px;
    color: var(--gm-gold, #d4af37);
    white-space: nowrap;
}
.spelbord-resume-select {
    font-family: var(--font-crimson, 'Crimson Pro'), serif;
    font-size: 1rem;
    padding: .7rem 1rem;
    border-radius: 3px;
    border: 1px solid var(--gm-gold, #d4af37);
    background: var(--card-bg, #1a1a1a);
    color: #e8e0cc;
    cursor: pointer;
    max-width: 100%;
}
@media (max-width: 520px) {
    .spelbord-resume-picker { flex-direction: column; gap: .35rem; width: 100%; }
    .spelbord-resume-select { width: 100%; }
}

/* ---- thin gold divider ---- */
.spelbord-divider {
    height: 1px; border: 0; margin: 0 auto 2.25rem;
    max-width: 720px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
}

/* ---- demoted tool row (verbs) ---- */
.spelbord-tools { text-align: center; margin-bottom: 1rem; }
.spelbord-tools-label {
    display: block;
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .22em;
    color: var(--text-muted, #6b7280);
    margin-bottom: .9rem;
}
.spelbord-tool-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem;
}
.spelbord-tool {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: .82rem; letter-spacing: .3px;
    padding: .5rem .95rem;
    border-radius: 3px;
    border: 1px solid rgba(139, 115, 53, 0.5);
    background: linear-gradient(180deg, rgba(34, 38, 47, 0.6), rgba(20, 23, 28, 0.6));
    color: #cdb98c;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.spelbord-tool:hover:not(.is-soon) {
    border-color: var(--gm-gold, #d4af37);
    color: #f0d875;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.04));
}
.spelbord-tool .tool-glyph { font-size: .9rem; opacity: .8; }
.spelbord-tool.is-soon {
    opacity: .45; cursor: default; color: var(--text-muted, #6b7280);
    border-color: var(--border-default, #2d3341);
    border-style: dashed;
}
.spelbord-tool .tool-soon {
    font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gm-gold, #d4af37);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 3px; padding: 0 .3rem; margin-left: .15rem;
}

/* ---- staging zone (the stash) — tabbed ---- */
.spelbord-staging { display: block; margin-top: 2.5rem; }
.spelbord-tabbar { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--gold-border, rgba(212, 175, 55, 0.15)); margin-bottom: 1.5rem; }
.spelbord-tab {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: .92rem; letter-spacing: .3px;
    padding: .55rem 1.1rem;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-secondary, #a0a8b8); cursor: pointer;
    transition: color .15s, border-color .15s;
}
.spelbord-tab:hover { color: #cdb98c; }
.spelbord-tab.active { color: #f0d875; border-bottom-color: var(--gm-gold, #d4af37); }
.spelbord-pane { display: none; }
.spelbord-pane.active { display: block; }

.spelbord-shelf h2 {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: 1.25rem; font-weight: 600; letter-spacing: .5px;
    color: #ddd5c8;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--gold-border, rgba(212, 175, 55, 0.15));
}
.shelf-empty {
    color: var(--text-muted, #6b7280);
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-size: .9rem; line-height: 1.5;
    padding: .5rem 0;
}
.shelf-add {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: .82rem; letter-spacing: .3px;
    padding: .5rem 1rem; margin-bottom: 1rem;
    border-radius: 3px;
    border: 1px dashed rgba(139, 115, 53, 0.6);
    background: transparent; color: #cdb98c; cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.shelf-add:hover { border-color: var(--gm-gold, #d4af37); color: #f0d875; }

/* map cards */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.map-card {
    border: 1px solid var(--border-default, #2d3341);
    border-radius: 3px; overflow: hidden;
    background: var(--card-bg, linear-gradient(145deg, #1e2128 0%, #191c23 100%));
    transition: border-color .15s, transform .15s;
}
.map-card:hover { border-color: rgba(212, 175, 55, 0.4); transform: translateY(-2px); }
.map-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bg-dark, #0d0d0d); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.map-thumb img { width: 100%; height: 100%; object-fit: cover; }
.map-thumb-empty { font-size: 2rem; opacity: .4; }
.map-badge {
    position: absolute; top: 7px; left: 7px;
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: .58rem; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(13, 13, 13, 0.8); color: #a0a8b8;
    border: 1px solid var(--border-default, #2d3341);
    padding: 1px 6px; border-radius: 3px;
}
.map-badge--ks { background: rgba(212, 175, 55, 0.16); color: #f0d875; border-color: rgba(212, 175, 55, 0.4); }
.map-name {
    padding: .55rem .6rem .35rem;
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: .85rem; color: var(--text-primary, #f5f5f5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-actions { display: flex; gap: .4rem; padding: 0 .6rem .6rem; }
.map-actions button {
    flex: 1; font-family: var(--font-body, 'Inter'), sans-serif;
    font-size: .72rem; padding: .35rem; border-radius: 3px;
    border: 1px solid var(--border-default, #2d3341);
    background: transparent; color: var(--text-secondary, #a0a8b8); cursor: pointer;
    transition: border-color .15s, color .15s;
}
.map-actions .map-rename:hover { border-color: var(--gm-gold, #d4af37); color: #f0d875; }
.map-actions .map-delete:hover { border-color: var(--brand-red, #c53030); color: #e57373; }

/* material shelf */
/* De-sticky the reused homebrew rows here — their position:sticky is meant for the
   full homebrew page, not this shelf. */
#shelfMaterial .homebrew-list-row { position: static; }
.mat-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.mat-chip {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    font-size: .72rem; letter-spacing: .3px;
    padding: .3rem .8rem; border-radius: 3px;
    border: 1px solid var(--border-default, #2d3341);
    background: transparent; color: var(--text-secondary, #a0a8b8); cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.mat-chip:hover { border-color: rgba(212, 175, 55, 0.5); color: #cdb98c; }
.mat-chip.active { background: rgba(212, 175, 55, 0.16); color: #f0d875; border-color: rgba(212, 175, 55, 0.5); }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .65rem; }
.mat-card {
    border: 1px solid var(--border-default, #2d3341);
    border-radius: 3px; padding: .7rem .75rem;
    display: flex; flex-direction: column; gap: .35rem;
    background: var(--card-bg, linear-gradient(145deg, #1e2128 0%, #191c23 100%));
    transition: border-color .15s;
}
.mat-card:hover { border-color: rgba(212, 175, 55, 0.4); }
.mat-type {
    font-family: var(--font-body, 'Inter'), sans-serif;
    font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--gm-gold, #d4af37);
}
.mat-name { font-family: var(--font-cinzel, 'Cinzel'), serif; font-size: .88rem; color: var(--text-primary, #f5f5f5); }

/* ---- signed-out promo ---- */
.spelbord-promo { text-align: center; padding: 3.5rem 1rem; position: relative; }
.spelbord-promo::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 240px;
    background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0) 65%);
    pointer-events: none;
}
.spelbord-promo > * { position: relative; }
.spelbord-promo .spelbord-title { margin-bottom: 1rem; }
.spelbord-promo .spelbord-tagline { margin-bottom: 2rem; max-width: 600px; }
.spelbord-cta.btn.btn-gold { min-width: 240px; font-size: 1rem; padding: .85rem 2rem; letter-spacing: 1px; }

/* ---- group picker (modal) + upload toast ---- */
.spelbord-picker-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.spelbord-picker {
    background: var(--bg-panel, linear-gradient(180deg, #16181f 0%, #0f1115 100%));
    border: 1px solid var(--border-gold, #8b7335);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    padding: 1.75rem; border-radius: 3px; max-width: 380px; width: 90%;
}
.spelbord-picker h3 {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    color: #ddd5c8; margin: 0 0 1.1rem; text-align: center; letter-spacing: .5px;
}
.spelbord-group-opts { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.spelbord-group-opt {
    font-family: var(--font-cinzel, 'Cinzel'), serif;
    padding: .7rem 1rem; border-radius: 3px;
    border: 1px solid var(--border-default, #2d3341);
    background: linear-gradient(180deg, rgba(34, 38, 47, 0.6), rgba(20, 23, 28, 0.6));
    color: var(--text-primary, #f5f5f5); cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
}
.spelbord-group-opt:hover { border-color: var(--gm-gold, #d4af37); background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03)); }
.spelbord-modal-empty { text-align: center; color: var(--text-secondary, #a0a8b8); font-family: var(--font-body, 'Inter'), sans-serif; margin: 0 0 1rem; }
.spelbord-modal-create { display: block; width: 100%; margin-bottom: 1rem; }
.spelbord-picker-cancel {
    display: block; width: 100%; background: none; border: none;
    color: var(--text-muted, #6b7280); cursor: pointer;
    font-family: var(--font-body, 'Inter'), sans-serif; font-size: .85rem; padding: .4rem;
}
.spelbord-picker-cancel:hover { color: var(--text-secondary, #a0a8b8); }

.spelbord-toast {
    position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
    z-index: 10000;
    background: var(--bg-panel, linear-gradient(180deg, #16181f 0%, #0f1115 100%));
    border: 1px solid var(--border-gold, #8b7335);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #ddd5c8; padding: .7rem 1.3rem; border-radius: 3px;
    font-family: var(--font-cinzel, 'Cinzel'), serif; letter-spacing: .3px;
}

/* ---- responsive ---- */
@media (max-width: 600px) {
    .spelbord-wrapper { padding: 0 1rem 4rem; }
    .spelbord-primary.btn.btn-gold, .spelbord-cta.btn.btn-gold { min-width: 0; width: 100%; }
    .map-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    /* Keep the tab strip on one scrollable row instead of wrapping. */
    .spelbord-tabbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .spelbord-tabbar::-webkit-scrollbar { display: none; }
    .spelbord-tab { flex: 0 0 auto; white-space: nowrap; padding-left: .8rem; padding-right: .8rem; }
}

/* ---- Arbetsyta (DM workspace) ---- */
.ws-add { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ws-add-label { font-family: var(--font-cinzel, 'Cinzel'), serif; font-size: .78rem; color: var(--text-muted, #6b7280); }
.ws-add-btn { margin-bottom: 0; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.ws-card { display: flex; flex-direction: column; border: 1px solid var(--border-default, #2d3341); border-radius: 3px; overflow: hidden; background: var(--card-bg, linear-gradient(145deg, #1e2128 0%, #191c23 100%)); transition: border-color .15s; }
.ws-card:hover { border-color: rgba(212, 175, 55, 0.4); }
.ws-thumb { aspect-ratio: 16 / 9; background: var(--bg-dark, #0d0d0d); display: flex; align-items: center; justify-content: center; }
.ws-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-thumb--icon { font-size: 2rem; }
.ws-meta { padding: .55rem .65rem .35rem; display: flex; flex-direction: column; gap: .25rem; }
.ws-kind { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gm-gold, #d4af37); display: flex; align-items: center; gap: .4rem; }
.ws-linked { color: var(--gm-green, #22c55e); border: 1px solid rgba(34,197,94,.4); border-radius: 3px; padding: 0 .3rem; font-size: .9em; }
.ws-title { font-family: var(--font-cinzel, 'Cinzel'), serif; font-size: .9rem; color: var(--text-primary, #f5f5f5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-actions { display: flex; gap: .35rem; padding: 0 .6rem .6rem; margin-top: auto; }
.ws-act { flex: 1; font-family: var(--font-body, 'Inter'), sans-serif; font-size: .7rem; padding: .35rem; border-radius: 3px; border: 1px solid var(--border-default, #2d3341); background: transparent; color: var(--text-secondary, #a0a8b8); cursor: pointer; transition: border-color .15s, color .15s; }
.ws-open:hover, .ws-push:hover { border-color: var(--gm-gold, #d4af37); color: #f0d875; }
.ws-del:hover { border-color: var(--brand-red, #c53030); color: #e57373; }

/* ---- Workspace modal inputs ---- */
.ws-modal .ws-input { display: block; width: 100%; margin-bottom: .75rem; padding: .55rem .7rem; border-radius: 3px; border: 1px solid var(--border-default, #2d3341); background: var(--bg-dark, #0d0d0d); color: var(--text-primary, #f5f5f5); font-family: var(--font-body, 'Inter'), sans-serif; box-sizing: border-box; }
.ws-modal-actions { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; margin-top: .25rem; }
.ws-modal-actions .spelbord-picker-cancel { width: auto; }

/* ---- Note editor (Quill host) ---- */
.ws-note-textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
.ws-modal { max-width: 560px; }

/* SLP creator hosted in a modal (tall form → scroll inside) */
.ws-slp-modal { max-width: 820px; width: 95%; max-height: 88vh; overflow-y: auto; position: relative; }
.ws-slp-close { position: absolute; top: .55rem; right: .7rem; z-index: 2; background: none; border: none; color: var(--text-secondary, #a0a8b8); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ws-slp-close:hover { color: #f0d875; }
.ws-slp-host { margin-top: .4rem; }

/* image lightbox */
.spelbord-lightbox-inner { position: relative; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.spelbord-lightbox-inner img { max-width: 92vw; max-height: 82vh; object-fit: contain; border: 1px solid var(--border-gold, #8b7335); border-radius: 3px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); background: var(--bg-dark, #0d0d0d); }
.spelbord-lightbox-cap { font-family: var(--font-cinzel, 'Cinzel'), serif; color: #ddd5c8; letter-spacing: .3px; }
.spelbord-lightbox .ws-slp-close { position: absolute; top: -2.4rem; right: 0; font-size: 1.5rem; }
/* The SLP creator's sticky bars are meant for full-page scroll; inside the modal's
   own scroll container they all pin to top:0 and stack ("fold up"). Make them static. */
.ws-slp-modal .slp-game-selector,
.ws-slp-modal .slp-hero-section,
.ws-slp-modal .slp-section { position: static; }

/* ---- Strider (encounter library) ---- */
.enc-card .ws-meta { padding: .7rem .75rem; }
.enc-loc { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .72rem; color: var(--text-muted, #6b7280); }
.enc-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.enc-tag { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .58rem; letter-spacing: .04em; color: #cdb98c; border: 1px solid rgba(139, 115, 53, 0.5); border-radius: 3px; padding: 0 .35rem; }
.enc-top-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.enc-threat { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 3px; padding: .05rem .4rem; white-space: nowrap; }
.enc-threat-easy { color: var(--gm-green, #22c55e); border: 1px solid rgba(34, 197, 94, 0.4); }
.enc-threat-medium { color: var(--gm-gold, #d4af37); border: 1px solid rgba(212, 175, 55, 0.4); }
.enc-threat-hard { color: #e57373; border: 1px solid rgba(197, 48, 48, 0.5); }
.enc-monsters { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .7rem; color: var(--text-secondary, #a0a8b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-note-snip { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .68rem; font-style: italic; color: var(--text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.enc-add-card { align-items: center; justify-content: center; gap: .4rem; border: 2px dashed var(--gm-gold, #d4af37); background: transparent; cursor: pointer; min-height: 140px; transition: background-color .15s, border-color .15s; }
.enc-add-card:hover { background: rgba(212, 175, 55, 0.08); }
.enc-add-plus { font-family: var(--font-cinzel, 'Cinzel'), serif; font-size: 1.6rem; color: var(--gm-gold, #d4af37); line-height: 1; }
.enc-add-label { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .78rem; color: var(--gm-gold, #d4af37); text-align: center; }

.grp-count { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .72rem; color: var(--text-muted, #6b7280); }

/* ---- Map card description + tags ---- */
.map-desc { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .72rem; color: var(--text-muted, #6b7280); padding: 0 .6rem .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.map-tags { padding: 0 .6rem .5rem; margin-top: 0; }

/* ---- Workspace cards: whole card clickable ---- */
.ws-card-clickable { cursor: pointer; }

/* Note thumbnail — a parchment scrap showing the note's opening lines. */
.ws-thumb--note { background: linear-gradient(160deg, #f3ead7 0%, #e8dcc0 100%); align-items: flex-start; justify-content: flex-start; padding: .55rem .65rem; overflow: hidden; box-sizing: border-box; }
.ws-note-paper { font-family: 'Crimson Pro', serif; font-size: .82rem; line-height: 1.35; color: #33291c; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; white-space: pre-line; }
.ws-note-empty { color: #8a7b60; font-style: italic; }

/* Google-doc thumbnail — branded document icon + product label. */
.ws-thumb--gdoc { flex-direction: column; gap: .35rem; background: linear-gradient(145deg, #23262e 0%, #1b1e25 100%); }
.ws-gdoc-type { font-family: var(--font-body, 'Inter'), sans-serif; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary, #a0a8b8); }

/* ---- Note editor: parchment sheet instead of bare form fields ---- */
.ws-note-sheet { background: linear-gradient(165deg, #f3ead7 0%, #e9ddc2 100%); border-radius: 3px; padding: 1rem 1.1rem; margin-bottom: .75rem; box-shadow: inset 0 0 22px rgba(120, 95, 55, 0.18); }
.ws-note-title-input { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(120, 95, 55, 0.35); font-family: var(--font-cinzel, 'Cinzel'), serif; font-size: 1.15rem; color: #2c2216; padding: .2rem 0 .4rem; margin-bottom: .6rem; outline: none; box-sizing: border-box; }
.ws-note-title-input::placeholder { color: #a08c68; }
.ws-note-body-input { display: block; width: 100%; min-height: 240px; background: transparent; border: 0; resize: vertical; font-family: 'Crimson Pro', serif; font-size: 1.05rem; line-height: 1.5; color: #33291c; outline: none; box-sizing: border-box; }
.ws-note-body-input::placeholder { color: #a08c68; }

/* ---- POI editor (Spelbordet image maps) ---- */
.spelbord-poi-editor { max-width: 720px; }
.spelbord-poi-editor-hint {
    font-family: 'Crimson Pro', serif;
    color: #c8bfaa;
    font-size: 0.85rem;
    margin-bottom: 8px;
    text-align: center;
}
.spelbord-poi-editor-stage {
    position: relative;
    line-height: 0;
    cursor: crosshair;
}
.spelbord-poi-editor-stage img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}