:root {
        --bg:#1a1f2e;
        --panel-bg:linear-gradient(#2b3248,#1c2233);
        --panel-border:#3a425a;
        --panel-inner:#0e1117;
        --accent-bg:linear-gradient(#3e4b6d,#2c3654);
        --accent-border:#1e2433;
        --hover-bg:#2c3654;
        --highlight:#8899ff;
        --text:#e0e6ff;
        --active-scale:0.97;
        --panelWidth: 280px;
        --uiHeight: 80px;
      }

      html, body {
        margin:0; height:100%; background:var(--bg); overflow:hidden;
        font-family: 'Press Start 2P', monospace;
        touch-action:manipulation;
      }

#loadingScreen {
        position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
        background:var(--bg) url('../assets/pngs/loading-bg.png') center/cover no-repeat;
        color:var(--text); z-index:2000;
        font:12px 'Press Start 2P', monospace;
      }
      #loadingScreen .loading-box {
        background: var(--panel-bg);
        border:2px solid var(--panel-border);
        box-shadow:0 0 0 2px var(--panel-inner) inset;
        border-radius:8px;
        padding:24px 32px;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:16px;
        width:80%;
        max-width:360px;
      }
      #loadingScreen .loading-title {
        font-size:32px; text-align:center;
      }
      #loadingScreen .loading-bar-container {
        display:flex; flex-direction:column; align-items:center; gap:8px; width:100%;
      }
      #loadingScreen .loading-bar-outer {
        width:100%; height:12px; border:2px solid var(--panel-border); background:var(--panel-inner);
      }
      #loadingBar {
        height:100%; width:0%; background:var(--highlight); transition:width .3s;
      }
      #loadingLabel {
        text-align:center; font-size:10px;
      }

    /* Reserve space on the right equal to the animation panel width so UI never overlaps it */

      #ui {
        position: fixed; top: 12px; left: 12px; right: calc(var(--panelWidth) + 24px);
        z-index: 30; display:flex; flex-direction:column; gap:12px; align-items:stretch;
        font: 10px/1.2 'Press Start 2P', monospace; color:var(--text);
        background: var(--panel-bg); padding: 12px 14px; border-radius: 8px;
        border: 2px solid var(--panel-border); box-shadow:0 0 0 2px var(--panel-inner) inset;
        user-select:none; width:364px; max-width: calc(100% - var(--panelWidth) - 48px); touch-action:manipulation;
      }
      #paintPanel {
        position: fixed; left: 12px; right: calc(var(--panelWidth) + 24px); top: calc(var(--uiHeight) + 24px);
        z-index: 20; display:flex; flex-direction:column; gap:12px; align-items:stretch;
        font: 10px/1.2 'Press Start 2P', monospace; color:var(--text);
        background: var(--panel-bg); padding: 12px 14px; border-radius: 8px;
        border: 2px solid var(--panel-border); box-shadow:0 0 0 2px var(--panel-inner) inset;
        user-select:none; width:364px; max-width: calc(100% - var(--panelWidth) - 48px);
      }
      #file, #tex, #skateFile, #skateTex, #animFile {
        color:var(--text); background:#1e2435; border:2px solid var(--panel-border); border-radius:4px; padding:2px 4px;
        font:8px 'Press Start 2P', monospace; width:100%; box-sizing:border-box;
      }
    /* Style file upload buttons so "Choose File" uses the same font */
      #file::file-selector-button,
      #tex::file-selector-button,
      #skateFile::file-selector-button,
      #skateTex::file-selector-button,
      #animFile::file-selector-button {
        font:8px 'Press Start 2P', monospace;
        background: var(--accent-bg);
        color:var(--text);
        border:2px solid var(--accent-border);
        border-radius:4px;
        padding:4px 8px;
        cursor:pointer;
        transition:background-color .15s, border-color .15s;
      }
      #file::file-selector-button:hover,
      #tex::file-selector-button:hover,
      #skateFile::file-selector-button:hover,
      #skateTex::file-selector-button:hover,
      #animFile::file-selector-button:hover { background: var(--hover-bg); }

      .panel-header {
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        border-bottom:2px solid var(--panel-border);
      }
      .collapse-btn {
        width:20px; height:20px; padding:0;
        font:10px/1 'Press Start 2P', monospace;
        background: var(--accent-bg); color:var(--text);
        border:2px solid var(--accent-border); border-radius:4px; cursor:pointer;
      }
      .collapse-btn:active { transform:scale(var(--active-scale)); }
      #uiHeader, #paintHeader, #animHeader { padding:10px 12px; }
      #uiHeader { font-size:10px; letter-spacing:1px; }
    #ui .section { display:flex; flex-direction:column; gap:6px; }
      #ui .section:not(:last-child) { border-bottom:2px solid var(--panel-border); padding-bottom:8px; }
      #ui .sectionTitle {
        font-size:8px; font-weight:400; color:var(--text);
        background: var(--accent-bg); padding:2px 4px; border:2px solid var(--accent-border); border-radius:3px;
      }
    #ui .field { position:relative; display:flex; align-items:center; gap:6px; }
    #ui .field input { flex:1; }
    #ui .field.disabled label,
    #ui .field.disabled input { opacity:0.5; }
      #ui .field.disabled .overlay {
        position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        background:rgba(0,0,0,0.6); color:var(--text); font-size:8px; text-align:center;
        pointer-events:auto; cursor:not-allowed; padding:4px;
      }
      #initialOverlay {
        position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        background:rgba(0,0,0,0.75); color:var(--text); font-size:10px; text-align:center;
        pointer-events:auto; z-index:1000;
      }
      #charField { position:relative; }
      #skateField { position:relative; }
      #skateOffsetField, #propOffsetField { position:relative; width:100%; }
      .hide-toggle {
        position:absolute; top:4px; right:4px;
        width:18.4px; height:18.4px; padding:0;
        display:none; align-items:center; justify-content:center;
        background:var(--panel-bg); color:var(--text);
        border:1px solid var(--panel-border); border-radius:3px;
        cursor:pointer;
      }
      @media (hover:hover) and (pointer:fine) {
        #charSelect:hover + .hide-toggle,
        #skateSelect:hover + .hide-toggle,
        #propSelect:hover + .hide-toggle,
        .hide-toggle:hover { display:flex; }
      }
      .faded { opacity:0.4; }
      .card-row { display:flex; gap:8px; }
      .card-row .field { flex:1; }
      .version-count {
        font-size:8px;
        color:var(--highlight);
        text-align:center;
        grid-column:1/-1;
        margin-bottom:4px;
      }
      .custom-container { display:contents; }
      .dropdown-divider {
        display:none;
        grid-column:1/-1;
        border-top:1px solid var(--panel-border);
        margin:4px 0;
      }
      #charSelect,
      #skateSelect,
      #propSelect {
        color:var(--text); background:#1e2435;
        border:2px solid var(--panel-border); border-radius:4px; padding:6px; cursor:pointer;
        font:8px 'Press Start 2P', monospace; text-align:center;
        display:flex; flex-direction:column; align-items:center; gap:4px;
        width:100%; transition:background-color .15s, border-color .15s, transform .15s;
      }
      #charSelect:hover,
      #skateSelect:hover,
      #propSelect:hover { background:var(--hover-bg); }
      #charSelect:active,
      #skateSelect:active,
      #propSelect:active { transform:scale(var(--active-scale)); }
      #charSelect::after,
      #skateSelect::after,
      #propSelect::after { content:none; }
      #charSelect img,
      #skateSelect img,
      #propSelect img { width:48px; height:48px; image-rendering:pixelated; }
      #charPanel {
        position:absolute; top:100%; left:0; right:0; margin-top:4px;
        background: var(--panel-bg); border:2px solid var(--panel-border);
        border-radius:6px; padding:8px; display:none; z-index:1002;
        overflow:auto;
        grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px;
        max-height:50vh; box-shadow:0 2px 6px rgba(0,0,0,0.4);
      }
      #charPanel.open { display:grid; }
      #charSelect.highlight,
      #skateSelect.highlight,
      #propSelect.highlight {
        border-color:var(--highlight); background:var(--hover-bg);
      }
      #skatePanel {
        position:absolute; top:100%; left:0; right:0; margin-top:4px;
        background: var(--panel-bg); border:2px solid var(--panel-border);
        border-radius:6px; padding:8px; display:none; z-index:1002;
        overflow:auto;
        grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px;
        max-height:50vh; box-shadow:0 2px 6px rgba(0,0,0,0.4);
      }
      #skatePanel.open { display:grid; }
      #propPanel {
        position:absolute; top:100%; left:0; right:0; margin-top:4px;
        background: var(--panel-bg); border:2px solid var(--panel-border);
        border-radius:6px; padding:8px; display:none; z-index:1002;
        overflow:auto;
        grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px;
        max-height:50vh; box-shadow:0 2px 6px rgba(0,0,0,0.4);
      }
      #propPanel.open { display:grid; }
      .char-option,
      .skate-option,
      .prop-option {
        background:#1e2435; border:2px solid var(--panel-border); border-radius:4px; padding:8px;
        color:var(--text); cursor:pointer; font:8px 'Press Start 2P', monospace;
        display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
        transition:background-color .15s, border-color .15s, transform .15s;
        position:relative;
      }
      .char-option:hover,
      .skate-option:hover,
      .prop-option:hover { background:var(--hover-bg); }
      .char-option:active,
      .skate-option:active,
      .prop-option:active { transform:scale(var(--active-scale)); }
      .char-option.selected,
      .skate-option.selected,
      .prop-option.selected { outline:2px solid var(--highlight); }
      .char-option img { width:48px; height:48px; image-rendering:pixelated; }
      .skate-option img { width:48px; height:48px; image-rendering:pixelated; }
      .prop-option img { width:48px; height:48px; image-rendering:pixelated; }

      .delete-btn {
        position:absolute;
        background:var(--panel-bg);
        border:1px solid var(--panel-border);
        border-radius:3px;
        cursor:pointer;
        z-index:1;
        display:none;
        top:4px;
        right:4px;
        padding:2px;
      }
      .delete-btn img { width:12px; height:12px; pointer-events:none; }
      .delete-confirm-wrap {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        display:none;
        flex-direction:column;
        gap:4px;
        z-index:1;
      }
      .delete-confirm,
      .delete-cancel {
        border:1px solid var(--panel-border);
        border-radius:3px;
        cursor:pointer;
        font-family:'Press Start 2P', monospace;
        font-size:calc(8px * 1.35);
        padding:calc(2px * 1.35) calc(4px * 1.35);
        display:flex;
        align-items:center;
        justify-content:center;
      }
      .delete-confirm {
        background:#a00;
        color:#fff;
      }
      .delete-cancel {
        background:#555;
        color:#fff;
      }
      .char-option:hover .delete-btn,
      .skate-option:hover .delete-btn,
      .prop-option:hover .delete-btn { display:flex; }

      @media (hover: none) and (pointer: coarse) {
        .hide-toggle {
          top:6px;
          right:6px;
          width:calc(18.4px * 1.5);
          height:calc(18.4px * 1.5);
        }
        .hide-toggle svg {
          width:calc(13.8px * 1.5);
          height:calc(13.8px * 1.5);
        }
        .delete-btn {
          top:6px;
          right:6px;
          padding:calc(2px * 1.5);
        }
        .delete-btn img {
          width:calc(12px * 1.5);
          height:calc(12px * 1.5);
        }
      }

      .char-option.broken,
      .skate-option.broken,
      .prop-option.broken,
      #charSelect.broken,
      #skateSelect.broken,
      #propSelect.broken { position:relative; }

      .char-option.broken::after,
      .skate-option.broken::after,
      .prop-option.broken::after,
      #charSelect.broken::after,
      #skateSelect.broken::after,
      #propSelect.broken::after {
        content:"currently broken";
        position:absolute; inset:0;
        background:rgba(0,0,0,0.6); color:#fff;
        display:flex; align-items:center; justify-content:center;
        font-size:8px; text-align:center; pointer-events:none;
      }
    #ui input, #paintPanel input { font:8px 'Press Start 2P', monospace; }
    #ui .paint-controls, #paintPanel .paint-controls { display:flex; flex-direction:column; gap:8px; }
    .paint-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

    @media (hover:hover) and (pointer:fine) {
      #paintColor {
        -webkit-appearance:none;
        border:2px solid var(--panel-border);
        border-radius:4px;
        width:32px;
        height:32px;
        flex:0 0 auto;
        padding:0;
        background:none;
        cursor:pointer;
        overflow:hidden;
        transition:border-color .15s, transform .15s;
      }
      #paintColor:hover { border-color:var(--highlight); transform:scale(1.05); }
      #paintColor:active { transform:scale(var(--active-scale)); }
      #paintColor:focus { outline:2px solid var(--highlight); outline-offset:2px; }
      #paintColor::-webkit-color-swatch-wrapper { padding:0; }
      #paintColor::-webkit-color-swatch { border:none; border-radius:2px; }
      #paintColor::-moz-color-swatch { border:none; border-radius:2px; }
    }
    #bucketContiguousWrap { display:flex; align-items:center; gap:4px; flex:0 0 auto; white-space:nowrap; position:relative; }
    #bucketContiguousWrap .help-icon { font-size:8px; opacity:.8; cursor:pointer; border:1px solid var(--accent-border); border-radius:50%; width:12px; height:12px; display:flex; align-items:center; justify-content:center; color:var(--text); }
    #bucketContiguousWrap .help-text { font-size:8px; opacity:.8; color:var(--text); position:absolute; top:100%; left:0; background:var(--panel-bg); border:1px solid var(--accent-border); padding:4px; border-radius:4px; white-space:nowrap; z-index:100; display:none; max-width:calc(100vw - 8px); }
    #ui .btn, #paintPanel .btn { align-self:flex-start; }
    #paintHex {
      width:72px;
      flex:0 0 auto;
      color:var(--text);
      background:#1e2435;
      border:2px solid var(--panel-border);
      border-radius:4px;
      padding:2px 4px;
    }
      .tool-buttons {
        display:flex;
        gap:4px;
        background:var(--panel-bg);
        border:2px solid var(--panel-border);
        border-radius:6px;
        padding:4px;
      }
    .tool-btn {
      width:44px; padding:4px 2px;
      background:transparent;
      border:2px solid transparent; border-radius:4px; cursor:pointer;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
      transition:background-color .15s, border-color .15s, transform .15s;
      color:var(--text);
    }
    .tool-btn:hover:not(.selected) { border-color:var(--panel-border); }
    .tool-btn.selected {
      background:var(--panel-inner);
      border-color:var(--panel-inner);
    }
    .tool-btn:active { transform:scale(var(--active-scale)); }
    .tool-btn.selected img { filter:none; }
    .tool-btn img { width:20px; height:20px; image-rendering:pixelated; display:block; }
    .tool-btn .tool-label { font-size:8px; line-height:1; white-space:nowrap; }
    .tool-btn .tool-label.multiline { white-space:normal; text-align:center; }

    /* Right-side animation panel */
      #animPanel {
        position: fixed; right: 12px; top: 12px; bottom: 12px; z-index: 15;
        width: 280px; max-width: 40vw;
        background: var(--panel-bg);
        border: 2px solid var(--panel-border);
        border-radius: 8px;
        box-shadow:0 0 0 2px var(--panel-inner) inset;
        display: flex; flex-direction: column;
        font: 10px/1.35 'Press Start 2P', monospace; color:var(--text);
        overflow: hidden;
      }
      #animHeader { padding: 10px 12px; }
      #animHeader .title { font-weight:400; letter-spacing: .2px; }
    #animBody { padding: 10px; display:flex; flex-direction:column; gap:10px; overflow:auto; }
      #animControls {
        padding: 10px 12px;
        border-top: 2px solid var(--panel-border);
        display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items:center;
      }
    .row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .anim-list { display:flex; flex-direction:column; gap:8px; }
      .clip {
        display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center;
        padding:8px; border:2px solid var(--panel-border); border-radius:4px;
        background: var(--panel-bg);
        cursor:pointer; transition:background-color .15s, border-color .15s, transform .15s;
      }
      .clip:hover { background: var(--hover-bg); }
      .clip:active { transform:scale(var(--active-scale)); }
      .clip.active { outline: 2px solid var(--highlight); background: var(--hover-bg); }

      #ui.collapsed #uiBody,
      #paintPanel.collapsed #paintBody,
      #animPanel.collapsed #animBody,
      #animPanel.collapsed #animControls { display:none; }
      #animPanel.collapsed { bottom:auto; }

      /* Compact header when panels are collapsed */
      #ui.collapsed,
      #paintPanel.collapsed,
      #animPanel.collapsed {
        padding:4px;
        width:auto;
        max-width:none;
        gap:0;
      }
      #ui.collapsed { right:auto; }
      #paintPanel.collapsed { right:auto; }
      #animPanel.collapsed { height:auto; }
      #ui.collapsed .panel-header,
      #paintPanel.collapsed .panel-header,
      #animPanel.collapsed .panel-header {
        padding:0;
        gap:4px;
        justify-content:center;
        border-bottom:none;
      }
      #ui.collapsed .collapse-btn,
      #paintPanel.collapsed .collapse-btn,
      #animPanel.collapsed .collapse-btn {
        width:16px;
        height:16px;
        font-size:12px;
      }
      #ui.collapsed .panel-header span,
      #paintPanel.collapsed .panel-header span,
      #animPanel.collapsed .panel-header .title {
        font-size:8px;
      }
      #animPanel.collapsed #animCount { display:none; }
    .clipName { font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .clipMeta { opacity:.75; font-size:8px; }

      .btn {
        background: var(--accent-bg); color:var(--text);
        border:2px solid var(--accent-border); border-radius:4px; padding:6px 10px; cursor:pointer;
        font:8px 'Press Start 2P', monospace; transition:background-color .15s, border-color .15s, transform .15s;
      }
      .btn:hover { background: linear-gradient(#485780,#344066); }
      .btn:active { transform:scale(var(--active-scale)); }
    .btn.sm { padding:4px 8px; }

    label.small { font-size:8px; opacity:.8; }
    input[type="range"] { width:100%; }
    canvas { display:block; touch-action:none; }

    button:focus-visible,
    input:focus-visible {
      outline:2px solid var(--highlight);
      outline-offset:2px;
    }

      .badge {
        font-size:8px; padding:2px 6px; border-radius:4px; border:2px solid var(--accent-border);
        background: var(--accent-bg); color:var(--text);
      }

      .boneLabel {
        pointer-events:auto; position:relative; width:6px; height:6px;
        transition:opacity .1s;
      }
      .boneDot {
        width:100%; height:100%; background:#00ff00; border:1px solid #008000;
        border-radius:50%; transition:transform .1s;
      }
      .boneLabel:hover .boneDot { transform:scale(1.5); }
      .boneLabel::after {
        content:attr(data-name); position:absolute; top:-4px; left:8px;
        font-size:8px; color:var(--text); background:#3e4b6d;
        padding:2px 4px; border-radius:4px; border:1px solid var(--accent-border);
        white-space:nowrap; display:none; pointer-events:none;
      }
      .boneLabel:hover::after { display:block; }
      .boneLabel.dim { opacity:0.25; }

      #boneTransform, #skateOffsetControls, #propOffsetControls { display:flex; flex-direction:column; gap:4px; }
      #boneTransform { display:none; margin-top:8px; }
      #boneTransform .bone-row, #skateOffsetControls .bone-row, #propOffsetControls .bone-row { display:flex; align-items:center; gap:6px; background:var(--panel-inner); padding:4px; border:2px solid var(--panel-border); border-radius:4px; }
      #boneTransform .bone-label, #skateOffsetControls .bone-label, #propOffsetControls .bone-label { width:32px; font:8px 'Press Start 2P', monospace; background:var(--accent-bg); color:var(--text); border:2px solid var(--accent-border); border-radius:4px; text-align:center; padding:2px 4px; }
      #boneTransform .axis-label, #skateOffsetControls .axis-label, #propOffsetControls .axis-label { width:12px; font:8px 'Press Start 2P', monospace; text-align:center; }
      #boneTransform .axis-label.x, #skateOffsetControls .axis-label.x, #propOffsetControls .axis-label.x { color:#e24957; }
      #boneTransform .axis-label.y, #skateOffsetControls .axis-label.y, #propOffsetControls .axis-label.y { color:#7ba338; }
      #boneTransform .axis-label.z, #skateOffsetControls .axis-label.z, #propOffsetControls .axis-label.z { color:#4782dd; }
      /* Allow room for negative values without clipping */
      #boneTransform .bone-input, #skateOffsetControls .bone-input, #propOffsetControls .bone-input { width:60px; font:8px 'Press Start 2P', monospace; color:var(--text); background:#1e2435; border:2px solid var(--panel-border); border-radius:4px; padding:2px 4px; }
      #boneUndoRow { display:flex; gap:6px; margin-top:8px; background:var(--panel-inner); padding:4px; border:2px solid var(--panel-border); border-radius:4px; }
      #boneUndoRow .btn { flex:1; }

    /* Bone hierarchy panel */
      #bonePanel {
        position: fixed; left: 12px; right: calc(var(--panelWidth) + 24px);
        top: calc(var(--uiHeight) + 24px); bottom: 12px; z-index: 40;
        width: 360px; max-width: calc(100% - var(--panelWidth) - 48px);
        background: var(--panel-bg);
        border: 2px solid var(--panel-border);
        border-radius: 8px;
        box-shadow:0 0 0 2px var(--panel-inner) inset;
        font: 10px/1.35 'Press Start 2P', monospace; color:var(--text);
        overflow: hidden;
        display: none;
        flex-direction: column;
      }
    #bonePanel.open { display: flex; }
      #boneHeader {
        padding: 10px 12px;
        font-weight: 400;
      }
    #boneBody { flex:1; overflow:auto; padding:10px; }
    #boneBody ul { list-style:none; padding-left:12px; }
    .bone-item { cursor:grab; }
    .bone-item.dragging { opacity:0.5; }
    .bone-info { font-size:8px; opacity:0.75; }

    /* Small screens: let the panel shrink and UI wrap naturally */
    @media (max-width: 700px) {
      #animPanel { width: min(280px, 40vw); }
    }

    #eyedropperPreview {
      position: fixed;
      width: 32px;
      height: 32px;
      border:2px solid #fff;
      border-radius:50%;
      box-shadow:0 0 0 1px #000;
      pointer-events:none;
      display:none;
      z-index:2147483647;
    }

    #shareOverlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1500;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity 0.2s ease;
    }
    #shareOverlay.open {
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    #shareOverlay .share-dialog {
      background: var(--panel-bg);
      border:2px solid var(--panel-border);
      box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 2px var(--panel-inner) inset;
      border-radius:8px;
      padding:32px 28px;
      color:var(--text);
      width:min(90vw, 420px);
      display:grid;
      gap:12px;
      justify-items:center;
      text-align:center;
      box-sizing:border-box;
      position:relative;
      overflow:hidden;
    }
    #shareOverlay .share-title {
      font-size:14px;
      font-weight:600;
    }
    #shareOverlay .share-link-row {
      display:flex;
      align-items:center;
      gap:8px;
      width:100%;
    }
    #shareLinkWrap {
      display:flex;
      flex-direction:column;
      align-items:center;
      width:100%;
      gap:12px;
    }
    #shareOverlay .share-link {
      flex:1;
      background:#1e2435;
      border:2px solid var(--panel-border);
      border-radius:4px;
      color:var(--text);
      padding:10px 14px;
      font:11px 'Press Start 2P', monospace;
      box-sizing:border-box;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    #shareOverlay .share-copy {
      flex-shrink:0;
      font-size:10px;
      line-height:1;
      padding:8px 12px;
    }
    #shareOverlay .share-options {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:center;
      width:100%;
    }
    #shareOverlay .share-option {
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:4px;
      background:none;
      border:none;
      cursor:pointer;
      color:var(--text);
      font-size:10px;
      padding:4px;
    }
    #shareOverlay .share-option img {
      width:24px;
      height:24px;
    }
    #shareOverlay .share-info {
      font-size:10px;
      line-height:1.5;
      opacity:0.6;
      text-align:center;
    }
    #shareOverlay .share-close {
      position:absolute;
      top:12px;
      right:12px;
      background:var(--panel-border);
      border:2px solid var(--accent-border);
      border-radius:6px;
      width:24px;
      height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--text);
      font-size:12px;
      cursor:pointer;
      transition:background-color 0.2s;
    }

    #shareOverlay .share-preview-wrap {
      width:80%;
      margin:0 auto;
      display:none;
      position:relative;
      border-radius:8px;
      z-index:0;
      aspect-ratio:1/1;
    }
    #shareOverlay .share-preview {
      width:100%;
      border-radius:inherit;
      display:block;
    }
    #shareOverlay .share-preview-wrap::before {
      content:"";
      position:absolute;
      inset:-10%;
      border-radius:inherit;
      background:radial-gradient(circle at center, var(--highlight) 0%, rgba(0,0,0,0) 70%);
      filter:blur(16px);
      z-index:-1;
      opacity:0.8;
      animation:shareGlow 3s ease-in-out infinite alternate;
      pointer-events:none;
    }
    @keyframes shareGlow {
      from { transform:scale(0.95); opacity:0.6; }
      to { transform:scale(1.05); opacity:1; }
    }
    #shareOverlay .spinner {
      width:24px;
      height:24px;
      border:3px solid var(--panel-border);
      border-top-color:var(--highlight);
      border-radius:50%;
      animation:spin 1s linear infinite;
      margin:0 auto;
    }
    @keyframes spin { to { transform:rotate(360deg); } }