:root {
    --bg:#0d0b08; --surface:#1a1510; --surface2:#221d14; --border:#3d3120;
    --gold:#c8973a; --gold-light:#e8b84b; --gold-dim:#7a5a20;
    --text:#e8dfc8; --text-dim:#8a7d66; --danger:#e74c3c;
    --card-shadow:0 8px 32px rgba(0,0,0,0.6),0 2px 8px rgba(200,151,58,0.15);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{touch-action:manipulation;-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--text);font-family:'Crimson Pro',serif;height:100vh;height:100dvh;overflow:hidden;position:fixed;width:100%}
  body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(ellipse at 20% 50%,rgba(200,151,58,0.04) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,rgba(41,128,185,0.03) 0%,transparent 50%)}

  .app{display:flex;flex-direction:column;height:100vh;max-width:960px;margin:0 auto;position:relative;z-index:1}

  /* HEADER */
  .header{position:relative;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:10px 16px 8px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(34,29,20,0.97) 0%,rgba(13,11,8,0.85) 100%);backdrop-filter:blur(8px);flex-shrink:0}
  .header-left{display:flex;align-items:center;gap:10px}
  .app-logo{height:40px;width:auto;max-width:220px;object-fit:contain;display:block}
  .patreon-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;
    background:#FF424D;color:#fff;font-family:'Cinzel',serif;font-size:11px;font-weight:700;
    letter-spacing:0.03em;text-decoration:none;border:1px solid rgba(0,0,0,0.2);
    box-shadow:0 2px 8px rgba(255,66,77,0.3);transition:all 0.15s;white-space:nowrap}
  .patreon-btn:hover{background:#e63946;box-shadow:0 4px 14px rgba(255,66,77,0.5);transform:translateY(-1px)}
  .patreon-icon{font-size:13px;line-height:1}
  @media (max-width:560px){
    .patreon-text{display:none}
    .patreon-btn{padding:6px 9px}
  }
  .logo-fallback{font-family:'Cinzel',serif;font-size:16px;font-weight:700;color:var(--gold-light);letter-spacing:0.08em}
  .header-actions{display:flex;gap:8px;align-items:center;position:relative;overflow:visible}
  .btn-icon{width:34px;height:34px;border:1px solid var(--border);background:var(--surface);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;color:var(--text-dim);font-size:16px}
  .btn-icon:hover{border-color:var(--gold-dim);color:var(--gold);background:var(--surface2)}
  .btn-add-token{display:none} /* kept for legacy reference, hidden */

  /* ── ADD DROPDOWN ──────────────────────────────────────────────────────── */
  .add-dropdown{position:relative}
  .btn-add-main{display:flex;align-items:center;gap:6px;padding:7px 16px;
    background:linear-gradient(135deg,var(--gold-dim),var(--gold));
    border:none;border-radius:8px;color:var(--bg);
    font-family:'Cinzel',serif;font-size:12px;font-weight:700;
    letter-spacing:0.05em;cursor:pointer;transition:all 0.15s;
    box-shadow:0 2px 8px rgba(200,151,58,0.3)}
  .btn-add-main:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(200,151,58,0.45)}
  .add-main-plus{font-size:16px;line-height:1;font-weight:400}
  .add-main-caret{font-size:10px;transition:transform 0.2s}
  .add-main-caret.open{transform:rotate(180deg)}

  .add-dropdown-menu{
    position:absolute;top:calc(100% + 6px);right:0;
    background:var(--surface);border:1px solid var(--border);
    border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,0.7);
    min-width:240px;max-height:calc(100dvh - 140px);overflow-y:auto;overflow-x:hidden;z-index:300;
    transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;
    transition:transform 0.18s ease,opacity 0.18s ease,visibility 0s linear 0.18s;
    scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  }
  .add-dropdown-menu.open{transform:translateY(0);opacity:1;pointer-events:all;visibility:visible;
    transition:transform 0.18s ease,opacity 0.18s ease,visibility 0s}

  .add-dropdown-item{width:100%;display:flex;align-items:center;gap:12px;
    padding:11px 14px;background:transparent;border:none;
    border-bottom:1px solid var(--border);cursor:pointer;
    text-align:left;transition:background 0.12s}
  .add-dropdown-item:last-child{border-bottom:none}
  .add-dropdown-item:hover{background:var(--surface2)}
  .add-item-img{width:28px;height:28px;object-fit:cover;border-radius:5px;display:block}
  .add-item-icon{font-size:20px;flex-shrink:0;width:28px;height:28px;text-align:center;display:flex;align-items:center;justify-content:center}
  .add-item-name{font-family:'Cinzel',serif;font-size:12px;color:var(--text);
    font-weight:600;letter-spacing:0.04em;margin-bottom:1px}
  .add-item-sub{font-size:10px;color:var(--text-dim);font-family:'Crimson Pro',serif}

  /* GAME BAR */
  .game-bar{display:flex;align-items:center;padding:6px 16px;background:var(--surface);border-bottom:1px solid var(--border);gap:8px;font-size:11px;color:var(--text-dim);letter-spacing:0.06em;flex-shrink:0;flex-wrap:nowrap;overflow-x:auto}
  .game-bar-stat{display:flex;align-items:center;gap:5px}
  .game-bar-stat span{color:var(--gold-light);font-weight:600;font-size:12px}
  .game-bar-divider{width:1px;height:14px;background:var(--border)}

  /* Game bar search */
  .game-bar-search{display:flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;flex:1;min-width:80px;max-width:200px;transition:border-color 0.15s}
  .game-bar-search:focus-within{border-color:var(--gold-dim)}
  .game-bar-search-icon{font-size:11px;opacity:0.5;flex-shrink:0}
  .game-bar-search-input{background:transparent;border:none;color:var(--text);font-family:'Crimson Pro',serif;font-size:12px;outline:none;width:100%;min-width:0}
  .game-bar-search-input::placeholder{color:var(--text-dim)}
  .game-bar-search-clear{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:11px;padding:0;flex-shrink:0;line-height:1}
  .game-bar-search-clear:hover{color:var(--danger)}

  /* Game bar buttons */
  .btn-game-bar{padding:4px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:0.04em;cursor:pointer;transition:all 0.15s;white-space:nowrap;flex-shrink:0}
  .btn-game-bar:hover{border-color:var(--gold-dim);color:var(--gold)}
  .btn-game-bar.has-undo{opacity:1;pointer-events:all;border-color:rgba(200,151,58,0.4);color:var(--gold)}

  /* Collapsed token card */
  .token-card-wrapper.collapsed{padding:0;width:190px;height:44px;flex-shrink:0}
  .token-card-wrapper.collapsed .token-card{background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden;width:190px;height:44px;max-height:44px}
  .collapsed-bar{display:none;align-items:center;justify-content:space-between;height:44px;padding:0 44px 0 10px;gap:8px;cursor:pointer}
  .token-card-wrapper.collapsed .card-collapse-btn{top:50%;transform:translateY(-50%);right:4px;width:20px;height:20px;font-size:11px}
  .token-card-wrapper.collapsed .card-delete-btn{top:50%;transform:translateY(-50%);right:24px;width:20px;height:20px;font-size:11px}
  .collapsed-bar-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text);font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,0.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .collapsed-bar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .collapsed-bar-pt{font-family:'Cinzel',serif;font-size:11px;color:var(--gold-light);font-weight:700}
  .collapsed-bar-count{color:var(--gold);font-weight:700}
  .collapsed-bar-tapped{color:#e0a84a;font-size:12px}
  .collapsed-bar-expand{font-size:10px;color:var(--text-dim);cursor:pointer;padding:2px 6px;border:1px solid var(--border);border-radius:4px;background:transparent;transition:all 0.1s}
  .collapsed-bar-expand:hover{border-color:var(--gold-dim);color:var(--gold)}
  .token-card-wrapper.collapsed .collapsed-bar{display:flex}
  .token-card-wrapper.collapsed .card-delete-btn{top:0;right:0}
  /* Hide scrollable content and actions when collapsed, show only the bar */
  .token-card-wrapper.collapsed .card-content-scroll{display:none}
  .token-card-wrapper.collapsed .card-actions{display:none}
  .token-card-wrapper.collapsed .tapped-overlay{display:none}
  .token-card-wrapper.collapsed .card-color-stripe{display:none}

  /* ── Generic collapse for all non-token card types ──────────────────────── */
  .generic-collapse-btn{position:absolute;top:2px;right:26px;z-index:6}
  [class*="-card-wrapper"].generic-collapsed{padding:0 !important;width:190px !important;height:44px !important;flex-shrink:0;overflow:hidden;background:none !important}
  /* Hide everything inside a generically-collapsed card except the bar + buttons */
  [class*="-card-wrapper"].generic-collapsed > *{display:none !important}
  [class*="-card-wrapper"].generic-collapsed > .generic-collapsed-bar{display:flex !important}
  [class*="-card-wrapper"].generic-collapsed > .card-collapse-btn,
  [class*="-card-wrapper"].generic-collapsed > .generic-collapse-btn,
  [class*="-card-wrapper"].generic-collapsed > [class*="-delete-btn"]{display:flex !important}
  .generic-collapsed-bar{display:none;align-items:center;gap:8px;height:44px;width:190px;
    padding:0 48px 0 10px;cursor:pointer;background:var(--surface2);
    border:1px solid var(--border);border-radius:8px;box-sizing:border-box}
  .gcollapse-icon{font-size:16px;flex-shrink:0}
  .gcollapse-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text);font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  [class*="-card-wrapper"].generic-collapsed > .generic-collapse-btn{top:50%;transform:translateY(-50%);right:4px;width:20px;height:20px;font-size:11px}
  [class*="-card-wrapper"].generic-collapsed > [class*="-delete-btn"]{top:50%;transform:translateY(-50%);right:24px;width:20px;height:20px;font-size:11px}

  /* Notes panel — slides from right */
  .notes-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);backdrop-filter:blur(6px);z-index:400;display:flex;align-items:stretch;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity 0.2s}

  /* Options modal */
  .options-section{display:flex;flex-direction:column;gap:8px}
  .options-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);cursor:pointer;text-align:left;transition:all 0.12s}
  .options-btn:hover{border-color:var(--gold-dim);background:rgba(200,151,58,0.06)}
  .options-btn-icon{font-size:20px;flex-shrink:0;width:26px;text-align:center}
  .options-btn-name{font-family:'Cinzel',serif;font-size:13px;color:var(--text);font-weight:600;margin-bottom:1px}
  .options-btn-sub{font-size:10px;color:var(--text-dim);font-family:'Crimson Pro',serif}
  .options-btn div{flex:1}
  .options-btn-arrow{font-size:20px;color:var(--text-dim);flex-shrink:0}
  .options-divider{height:1px;background:var(--border);margin:16px 0}
  /* Settings toggles */
  .settings-block{display:flex;flex-direction:column;gap:2px}
  .settings-label{font-family:'Cinzel',serif;font-size:10px;color:var(--gold-light);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px}
  .setting-row{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;cursor:pointer}
  .setting-name{font-family:'Crimson Pro',serif;font-size:13px;color:var(--text)}
  .setting-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
  .setting-switch input{opacity:0;width:0;height:0;position:absolute}
  .setting-slider{position:absolute;inset:0;background:var(--surface2);border:1px solid var(--border);border-radius:24px;transition:all 0.2s;cursor:pointer}
  .setting-slider::before{content:'';position:absolute;height:18px;width:18px;left:2px;top:2px;background:var(--text-dim);border-radius:50%;transition:all 0.2s}
  .setting-switch input:checked + .setting-slider{background:rgba(200,151,58,0.3);border-color:var(--gold-dim)}
  .setting-switch input:checked + .setting-slider::before{transform:translateX(18px);background:var(--gold-light)}
  .setting-hint{display:block;font-size:9px;color:var(--text-dim);font-style:italic;margin-top:1px;font-family:'Crimson Pro',serif}
  .setting-stepper{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .stepper-btn{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.12s}
  .stepper-btn:hover{border-color:var(--gold-dim);background:var(--gold-dim);color:var(--bg)}
  .stepper-val{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--gold-light);min-width:18px;text-align:center}
  .tokenmod-summary{margin-top:8px;padding:8px 10px;background:rgba(200,151,58,0.08);border:1px solid var(--gold-dim);border-radius:8px;font-family:'Crimson Pro',serif;font-size:11px;color:var(--gold-light);text-align:center;min-height:16px}
  #tokenmod-options.tokenmod-disabled{opacity:0.5;pointer-events:none}
  .endgame-sound-row{display:flex;gap:10px}
  .endgame-btn{flex:1;padding:12px;border-radius:10px;font-family:'Cinzel',serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.12s;border:1px solid}
  .endgame-btn.victory{background:rgba(200,151,58,0.15);border-color:var(--gold-dim);color:var(--gold-light)}
  .endgame-btn.victory:hover{background:rgba(200,151,58,0.3);border-color:var(--gold)}
  .endgame-btn.defeat{background:rgba(150,40,40,0.15);border-color:rgba(180,60,60,0.5);color:#e8a0a0}
  .endgame-btn.defeat:hover{background:rgba(150,40,40,0.3);border-color:#c84444}
  .options-contact{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
  .options-contact-label{font-family:'Cinzel',serif;font-size:10px;color:var(--gold-light);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px}
  .options-contact-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px}
  .options-contact-key{color:var(--text-dim);font-family:'Crimson Pro',serif}
  .options-contact-val{color:var(--text);font-family:'Crimson Pro',serif;user-select:all}
  .options-fineprint{margin-top:14px;font-size:10px;line-height:1.5;color:var(--text-dim);font-family:'Crimson Pro',serif;font-style:italic;text-align:center}

  /* Credits modal */
  .credits-section{margin-bottom:18px}
  .credits-section:last-child{margin-bottom:0}
  .credits-section-title{font-family:'Cinzel',serif;font-size:11px;color:var(--gold-light);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
  .credits-entry{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;gap:12px}
  .credits-name{font-family:'Crimson Pro',serif;font-size:14px;color:var(--text);font-weight:600}
  .credits-name a{color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(200,151,58,0.3);transition:border-color 0.15s}
  .credits-name a:hover{border-bottom-color:var(--gold)}
  .credits-role{font-family:'Crimson Pro',serif;font-size:11px;color:var(--text-dim);font-style:italic;text-align:right;flex-shrink:0}
  .notes-overlay.open{opacity:1;pointer-events:all}
  .notes-panel{width:min(380px,92vw);height:100%;background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 48px rgba(0,0,0,0.7);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.32,0.72,0,1)}
  .notes-overlay.open .notes-panel{transform:translateX(0)}
  .notes-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
  .notes-panel-title{font-family:'Cinzel',serif;font-size:15px;color:var(--gold-light);letter-spacing:0.08em}
  .notes-panel-body{flex:1;display:flex;flex-direction:column;padding:12px 14px}
  .notes-textarea{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Crimson Pro',serif;font-size:14px;line-height:1.7;padding:12px 14px;resize:none;outline:none;transition:border-color 0.15s}
  .notes-textarea:focus{border-color:var(--gold-dim)}
  .notes-textarea::placeholder{color:var(--text-dim);font-style:italic}
  .game-turn{margin-left:auto}
  .game-turn strong{color:var(--text)}

  /* FILTER BAR */
  /* TOKEN GRID */
  .tokens-scroll{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;z-index:1;padding:20px 16px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;display:flex;flex-direction:row;gap:24px;align-items:flex-start}
  /* Collapsed cards: their own columns, up to 10 per column then wrap to a new one */
  .collapsed-grid{display:flex;flex-flow:column wrap;gap:8px;align-content:flex-start;
    max-height:520px;flex-shrink:0}
  .collapsed-grid:empty{display:none}
  .tokens-scroll::-webkit-scrollbar{height:4px}

  /* ── PROLIFERATE MODE ────────────────────────────────────────────────────── */
  .proliferate-bar{display:none;align-items:center;gap:10px;padding:8px 16px;background:linear-gradient(90deg,rgba(120,80,200,0.25),rgba(80,120,200,0.25));border-bottom:1px solid rgba(150,120,220,0.5);flex-shrink:0;flex-wrap:wrap}
  .proliferate-bar.active{display:flex}
  .proliferate-info{font-family:'Crimson Pro',serif;font-size:12px;color:#d8c8ff;flex:1;min-width:160px}
  .proliferate-count{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:#fff;background:rgba(120,80,200,0.5);padding:3px 10px;border-radius:12px;flex-shrink:0}
  .proliferate-action-btn{flex-shrink:0;padding:6px 14px;border:1px solid rgba(150,120,220,0.6);border-radius:8px;background:rgba(255,255,255,0.08);color:#e0d8ff;font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:0.04em;cursor:pointer;transition:all 0.12s}
  .proliferate-action-btn:hover{background:rgba(255,255,255,0.16);border-color:#b89cff}
  .proliferate-action-btn.confirm{background:rgba(120,200,120,0.25);border-color:rgba(120,200,120,0.6);color:#c8ffc8}
  .proliferate-action-btn.confirm:hover{background:rgba(120,200,120,0.4)}
  .proliferate-action-btn.cancel{background:rgba(200,80,80,0.2);border-color:rgba(200,100,100,0.5);color:#ffc8c8}
  .proliferate-action-btn.cancel:hover{background:rgba(200,80,80,0.35)}
  /* Cards eligible for proliferate (have counters) get a pulsing highlight */
  .prolif-eligible{cursor:pointer !important;outline:2px dashed rgba(180,150,255,0.7);outline-offset:3px;border-radius:12px;animation:prolifPulse 1.6s ease-in-out infinite}
  .prolif-selected{outline:3px solid #b89cff !important;outline-offset:3px;box-shadow:0 0 20px rgba(150,120,220,0.7) !important}
  @keyframes prolifPulse{0%,100%{outline-color:rgba(180,150,255,0.4)}50%{outline-color:rgba(180,150,255,0.9)}}

  /* ── DICE ────────────────────────────────────────────────────────────────── */
  .dice-result{text-align:center;padding:18px 12px;margin-bottom:14px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .dice-result-label{font-family:'Cinzel',serif;font-size:10px;color:var(--text-dim);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px}
  .dice-result-value{font-family:'Cinzel',serif;font-size:38px;font-weight:700;color:var(--gold-light);line-height:1;text-shadow:0 2px 12px rgba(200,151,58,0.4);transition:color 0.1s}
  .dice-result-value.rolling{opacity:0.85;color:var(--text)}
  .dice-result-value.landed{animation:diceLand 0.35s cubic-bezier(0.34,1.56,0.64,1)}
  .dice-result-value.special{font-size:22px}
  @keyframes diceLand{0%{transform:scale(0.5);opacity:0.4}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
  .dice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .dice-btn{padding:12px 4px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);font-family:'Cinzel',serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.12s;display:flex;flex-direction:column;align-items:center;gap:3px}
  .dice-btn:hover{border-color:var(--gold-dim);background:rgba(200,151,58,0.1);transform:translateY(-1px)}
  .dice-btn:active{transform:translateY(0)}
  .dice-btn-icon{font-size:18px}
  .dice-btn.planar{grid-column:span 4;background:rgba(120,100,220,0.1);border-color:rgba(120,100,220,0.35)}
  .dice-btn.planar:hover{background:rgba(120,100,220,0.2);border-color:#9b8cff}

  /* ── MULTI-DICE ROLL ─────────────────────────────────────────────────────── */
  .dice-multi-divider{display:flex;align-items:center;text-align:center;margin:16px 0 12px;color:var(--gold);font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase}
  .dice-multi-divider::before,.dice-multi-divider::after{content:'';flex:1;height:1px;background:var(--gold-dim)}
  .dice-multi-divider span{padding:0 12px}
  .dice-multi-controls{display:flex;gap:10px;margin-bottom:12px}
  .dice-multi-field{flex:1;display:flex;flex-direction:column;gap:4px}
  .dice-multi-field label{font-family:'Cinzel',serif;font-size:9px;color:var(--text-dim);letter-spacing:0.06em;text-transform:uppercase;text-align:center}
  .dice-multi-select{width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);font-family:'Cinzel',serif;font-size:14px;text-align:center;outline:none;cursor:pointer}
  .dice-stepper{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface2)}
  .dice-stepper button{width:30px;height:36px;border:none;background:transparent;color:var(--gold-light);font-size:16px;cursor:pointer;flex-shrink:0;transition:background 0.12s}
  .dice-stepper button:hover{background:rgba(200,151,58,0.15)}
  .dice-stepper input{flex:1;width:100%;min-width:0;border:none;background:transparent;color:var(--text);font-family:'Cinzel',serif;font-size:15px;font-weight:700;text-align:center;outline:none;-moz-appearance:textfield}
  .dice-stepper input::-webkit-outer-spin-button,.dice-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .dice-multi-roll-btn{width:100%;padding:12px;border:1px solid var(--gold-dim);border-radius:10px;background:rgba(200,151,58,0.15);color:var(--gold-light);font-family:'Cinzel',serif;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.12s;margin-bottom:12px}
  .dice-multi-roll-btn:hover{background:rgba(200,151,58,0.28);border-color:var(--gold)}
  .dice-multi-results{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-height:160px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding:2px}
  .dice-multi-results:empty{display:none}
  .multi-die-result{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:var(--surface2);border:1px solid var(--gold-dim);color:var(--gold-light);font-family:'Cinzel',serif;font-size:16px;font-weight:700;flex-shrink:0;transition:opacity 0.18s,color 0.18s,border-color 0.18s}
  .multi-die-result.dropped{opacity:0.32;border-color:var(--border);color:var(--text-dim);text-decoration:line-through;background:transparent}
  .dice-multi-results.rolling .multi-die-result{opacity:0.75;transform:scale(0.96)}
  .dice-multi-results.landed .multi-die-result{animation:multiDieLand 0.35s ease}
  @keyframes multiDieLand{0%{transform:scale(1.14)}60%{transform:scale(0.97)}100%{transform:scale(1)}}
  .dice-multi-total{text-align:center;font-family:'Cinzel',serif;font-size:15px;color:var(--text);margin-top:10px;font-weight:600}
  .dice-multi-total:empty{display:none}
  .multi-total-value{font-size:22px;color:var(--gold-light);font-weight:700}
  .multi-total-note{font-size:11px;color:var(--text-dim);font-style:italic;font-family:'Crimson Pro',serif}

  /* ── GLOSSARY ────────────────────────────────────────────────────────────── */
  .glossary-list{display:flex;flex-direction:column;gap:4px;max-height:400px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .glossary-item{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface2)}
  .glossary-item-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
  .glossary-item-icon{font-size:14px;flex-shrink:0}
  .glossary-item-name{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--gold-light)}
  .glossary-rule-num{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--bg);background:var(--gold);padding:1px 7px;border-radius:5px;flex-shrink:0;letter-spacing:0.02em}
  .rules-disclaimer{font-family:'Crimson Pro',serif;font-size:11px;line-height:1.5;color:var(--text-dim);font-style:italic;padding:9px 12px;margin-bottom:10px;background:rgba(200,151,58,0.06);border:1px solid var(--gold-dim);border-left:3px solid var(--gold);border-radius:6px}
  .glossary-item-text{font-family:'Crimson Pro',serif;font-size:12px;line-height:1.5;color:var(--text);font-style:italic}
  .glossary-empty{text-align:center;padding:30px;color:var(--text-dim);font-family:'Crimson Pro',serif;font-style:italic}
  /* Resource links */
  .glossary-resource{display:block;padding:11px 13px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);text-decoration:none;transition:all 0.12s;cursor:pointer}
  .glossary-resource:hover{border-color:var(--gold-dim);background:rgba(200,151,58,0.08)}
  .glossary-resource-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
  .glossary-resource-arrow{margin-left:auto;color:var(--text-dim);font-size:13px;flex-shrink:0}
  .glossary-resource:hover .glossary-resource-arrow{color:var(--gold-light)}
  .glossary-resource .glossary-item-text{font-style:normal}
  /* How-to-use guide */
  .guide-list{display:flex;flex-direction:column;gap:6px}
  .guide-group-title{font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin:12px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--gold-dim)}
  .guide-group-title:first-child{margin-top:0}
  .guide-item{display:flex;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);align-items:flex-start}
  .guide-item-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center;line-height:1.3}
  .guide-item-body{flex:1;min-width:0}
  .guide-item-name{font-family:'Cinzel',serif;font-size:12.5px;font-weight:700;color:var(--gold-light);margin-bottom:2px}
  .guide-item-desc{font-family:'Crimson Pro',serif;font-size:12px;line-height:1.45;color:var(--text)}

  /* ── MANA POOL — pentagon layout in modal ────────────────────────────────── */
  .mana-pentagon{position:relative;width:280px;height:280px;margin:10px auto 4px}
  .mana-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-50%)}
  /* Pentagon points: W top, U upper-right, B lower-right, R lower-left, G upper-left, C center */
  .mana-node.mp-pos-W{top:14%;left:50%}
  .mana-node.mp-pos-U{top:42%;left:90%}
  .mana-node.mp-pos-B{top:88%;left:72%}
  .mana-node.mp-pos-R{top:88%;left:28%}
  .mana-node.mp-pos-G{top:42%;left:10%}
  .mana-node.mp-pos-C{top:52%;left:50%}
  .mana-orb{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:20px;font-weight:700;border:2px solid rgba(0,0,0,0.35);box-shadow:0 3px 10px rgba(0,0,0,0.5),inset 0 2px 6px rgba(255,255,255,0.25);position:relative}
  .mana-orb.mp-W{background:radial-gradient(circle at 40% 35%,#f5efd8,#cfc295);color:#3a3320}
  .mana-orb.mp-U{background:radial-gradient(circle at 40% 35%,#5bade0,#2071a8);color:#fff}
  .mana-orb.mp-B{background:radial-gradient(circle at 40% 35%,#6a4080,#3a1c4a);color:#e8d8f0}
  .mana-orb.mp-R{background:radial-gradient(circle at 40% 35%,#e05b4a,#a82e22);color:#fff}
  .mana-orb.mp-G{background:radial-gradient(circle at 40% 35%,#3cae6a,#16703c);color:#fff}
  .mana-orb.mp-C{background:radial-gradient(circle at 40% 35%,#c8c8c8,#7a7a7a);color:#1a1a1a;width:58px;height:58px;font-size:21px}
  .mana-orb-count{position:absolute;bottom:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--bg);border:2px solid var(--gold);color:var(--gold-light);font-family:'Cinzel',serif;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 6px rgba(0,0,0,0.6)}
  .mana-orb-count.zero{border-color:var(--border);color:var(--text-dim);opacity:0.5}
  .mana-node-btns{display:flex;gap:4px;margin-top:2px}
  .mana-node-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.12s}
  .mana-node-btn:hover{border-color:var(--gold-dim);background:var(--gold-dim);color:var(--bg)}
  .mana-total-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}
  .mana-total-label{font-family:'Cinzel',serif;font-size:10px;color:var(--text-dim);letter-spacing:0.08em;text-transform:uppercase}
  .mana-total-val{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--gold-light)}
  .mana-empty-btn{display:block;margin:14px auto 0;padding:8px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text-dim);font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.06em;cursor:pointer;transition:all 0.12s}
  .mana-empty-btn:hover{border-color:var(--danger);color:var(--danger)}
  .tokens-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .tokens-grid{display:flex;flex-direction:row;flex-wrap:nowrap;gap:24px;align-items:flex-start;height:100%}

  /* TOKEN CARD */
  /* ── CARD FRAME — background-image approach ──────────────────────────────── */
  :root {
    --frame-inset-x: 14px;   /* horizontal inset from frame edge */
    --frame-inset-y: 14px;   /* vertical inset from frame edge — tune independently */
  }
  .token-card-wrapper{
    position:relative;
    display:inline-flex;
    overflow:visible;
    flex-shrink:0;
    /* background-image set dynamically per token color in renderCard */
    background-size: 100% 100%;
    padding: var(--frame-inset-y) var(--frame-inset-x);
    border-radius: 12px;
  }
  .token-card{
    background: transparent;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow 0.15s;
    position: relative;
    animation: cardIn 0.25s ease forwards;
    width: 260px;
    background-color: rgba(13,11,8,0.55);
  }
  .token-card-wrapper:hover .token-card{box-shadow:0 12px 40px rgba(0,0,0,0.7),0 4px 12px rgba(200,151,58,0.2)}
  /* Tapped — TAPPED label only, no border color change */
  .token-card.tapped{}
  @keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}

  /* TAPPED OVERLAY */
  .tapped-overlay{display:none;position:absolute;top:44px;left:0;right:0;height:160px;z-index:10;align-items:center;justify-content:center;pointer-events:none}
  .tapped-overlay-label{font-family:'Cinzel',serif;font-size:32px;font-weight:700;color:var(--gold-light);letter-spacing:0.18em;text-shadow:0 2px 16px rgba(0,0,0,0.9),0 0 32px rgba(200,151,58,0.6);transform:rotate(-15deg);border:3px solid var(--gold);border-radius:8px;padding:6px 18px;background:rgba(13,11,8,0.7);backdrop-filter:blur(2px)}
  .token-card.tapped .tapped-overlay{display:flex}

  /* Color stripe — REMOVED */
  .card-color-stripe{display:none}

  /* Card header text — full brightness with text shadow for readability */
  .card-header{display:flex;align-items:flex-start;justify-content:space-between;padding:8px 10px 4px;gap:6px}
  .card-name{font-family:'Cinzel',serif;font-size:12px;font-weight:600;color:var(--text);line-height:1.2;flex:1;text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(0,0,0,0.7)}
  .card-type{font-size:10px;color:var(--text);letter-spacing:0.04em;text-shadow:0 1px 3px rgba(0,0,0,0.9)}
  .card-mana{display:flex;gap:3px;flex-shrink:0}
  .mana-pip{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:'Cinzel',serif;border:1px solid rgba(0,0,0,0.3);flex-shrink:0}
  .mana-W{background:#d4c9a8;color:#333}.mana-U{background:#2980b9;color:#fff}.mana-B{background:#4a235a;color:#ddd}.mana-R{background:#c0392b;color:#fff}.mana-G{background:#1e8449;color:#fff}.mana-C{background:#666;color:#ddd}

  /* ── ART WINDOW — fixed size, three-layer stack ─────────────────────────────
     Layer 1: color gradient background (art-White, art-Red etc.)
     Layer 2: token art image (object-fit:contain, centered)
     Layer 3: art-frame.png overlay (296×251px, positioned so black window aligns)
     Art image is inset to sit inside the black window of the frame.
     ─────────────────────────────────────────────────────────────────────────── */
  /* ── ART WINDOW ──────────────────────────────────────────────────────────────
     Frame image is 296×251px (aspect ratio 1.179:1)
     Card width inside wrapper is 260px, so art height = 260 / 1.179 = ~220px
     This keeps the frame at its natural ratio with no distortion.
     ─────────────────────────────────────────────────────────────────────────── */
  .card-art{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    margin:0;
    overflow:visible;
    background:transparent;
    display:flex;align-items:center;justify-content:center;
  }
  .card-art-img{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:90%;
    height:90%;
    object-fit:contain;
    object-position:center;
    z-index:1;
  }
  .card-art-fallback{position:absolute;font-size:48px;z-index:1;display:flex;align-items:center;justify-content:center;inset:0;color:rgba(255,255,255,0.12)}

  /* Art frame — overlays the art area on top */
  .card-art-frame{
    position:absolute;
    inset:0;
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
    z-index:2;
    pointer-events:none;
  }

  .art-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,0.06) 0%,transparent 70%);z-index:0}

  /* Per-color art backgrounds removed — art window is transparent */
  .card-pt{position:absolute;bottom:6px;right:8px;background:rgba(0,0,0,0.78);border:1px solid var(--gold-dim);border-radius:6px;padding:3px 9px;font-family:'Cinzel',serif;font-size:17px;font-weight:700;color:var(--gold-light);z-index:4;text-shadow:0 1px 4px rgba(0,0,0,0.95)}
  .card-keywords{display:flex;flex-wrap:wrap;gap:3px;padding:4px 8px}
  .keyword-tag{padding:2px 6px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#000;border:none;background:#c8973a}
  .kwc-flying{background:#2980b9;color:#fff}
  .kwc-haste{background:#c0392b;color:#fff}
  .kwc-trample{background:#1e8449;color:#fff}
  .kwc-deathtouch{background:#7d3c98;color:#fff}
  .kwc-lifelink{background:#d4c9a8;color:#333}
  .kwc-indestructible{background:#c8973a;color:#000}
  .kwc-hexproof{background:#148f77;color:#fff}
  .kwc-menace{background:#922b21;color:#fff}

  /* COUNTERS */
  .counters-section{padding:4px 8px;border-top:1px solid var(--border)}
  .counters-label{font-size:9px;color:var(--text);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px}
  .counters-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .counter-chip{display:flex;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:2px 4px 2px 4px}
  .counter-img-wrap{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--surface);display:flex;align-items:center;justify-content:center}
  .counter-img{width:28px;height:28px;object-fit:contain;display:block}
  .counter-img-fallback{width:28px;height:28px;font-size:10px;font-weight:700;align-items:center;justify-content:center;border-radius:50%;background:var(--surface)}
  .counter-label{font-size:9px;font-weight:600;letter-spacing:0.04em;color:var(--text);max-width:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
  .counter-type{font-size:10px;font-weight:600;letter-spacing:0.04em}
  .counter-val{font-family:'Cinzel',serif;font-size:12px;font-weight:700;min-width:16px;text-align:center;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
  .keyword-img{width:14px;height:14px;object-fit:contain;vertical-align:middle;margin-right:3px;display:inline-block}
  .keyword-img-fallback{display:none}
  .cv-plus{color:#2ecc71}.cv-minus{color:#e74c3c}.cv-loyalty{color:var(--gold-light)}.cv-poison{color:#a569bd}.cv-energy{color:#5dade2}.cv-other{color:var(--text)}
  .counter-btn{width:18px;height:18px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;line-height:1;transition:all 0.1s;flex-shrink:0}
  .counter-btn.inc{background:rgba(39,174,96,0.2);color:#2ecc71}.counter-btn.inc:hover{background:rgba(39,174,96,0.4)}
  .counter-btn.dec{background:rgba(231,76,60,0.2);color:#e74c3c}.counter-btn.dec:hover{background:rgba(231,76,60,0.4)}
  .add-counter-btn{width:22px;height:22px;border:1px dashed var(--gold-dim);border-radius:50%;background:transparent;color:var(--gold-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all 0.12s}
  .add-counter-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(200,151,58,0.08)}

  /* COPY */
  .copy-section{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-top:1px solid var(--border);background:rgba(0,0,0,0.2)}
  .copy-label{font-size:10px;color:var(--text);letter-spacing:0.06em;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
  .copy-controls{display:flex;align-items:center}
  .copy-btn{width:26px;height:26px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.1s}
  .copy-btn:first-child{border-radius:6px 0 0 6px}.copy-btn:last-child{border-radius:0 6px 6px 0}
  .copy-btn:hover{background:var(--border);color:var(--gold)}
  .copy-count{width:34px;height:26px;background:var(--surface);border:1px solid var(--border);border-left:none;border-right:none;color:var(--gold-light);font-family:'Cinzel',serif;font-size:13px;font-weight:700;text-align:center;display:flex;align-items:center;justify-content:center}

  /* CARD DELETE BUTTON — hangs off top-right corner, half outside */
  /* Collapse button — yellow, sits left of delete btn */
  .card-collapse-btn{position:absolute;top:-8px;right:18px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #cc9900;background:#cc9900;color:#000;cursor:pointer;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(200,151,0,0.5)}
  .card-collapse-btn:hover{background:#ffcc00;border-color:#ffcc00;transform:scale(1.15)}

  /* Delete button */
  .card-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .card-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15);box-shadow:0 3px 12px rgba(255,26,26,0.8)}

  /* Keyword + button — inline in keyword row */
  .kw-add-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px dashed var(--gold-dim);background:transparent;color:var(--gold-dim);cursor:pointer;font-size:13px;font-weight:400;line-height:1;padding:0;transition:all 0.12s;vertical-align:middle;flex-shrink:0}
  .kw-add-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(200,151,58,0.08)}

  /* Token card overflow fix — scrollable inner content, action bar always visible */
  .token-card{
    display:flex;
    flex-direction:column;
    overflow:visible;  /* keep visible so buttons at top:-8px aren't clipped */
  }
  .card-content-scroll{
    display:flex;
    flex-direction:column;
    max-height:calc(100dvh - 220px);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
  }
  /* Sticky action bar — always visible at bottom */
  .card-actions{
    display:flex;flex-direction:row;
    border-top:1px solid var(--border);
    background:rgba(13,11,8,0.85);
    flex-shrink:0;
    position:sticky;
    bottom:0;
    z-index:5;
  }
  .card-action-btn{flex:1;padding:6px 2px;background:transparent;border:none;color:var(--text);cursor:pointer;font-size:10px;letter-spacing:0.02em;font-family:'Crimson Pro',serif;transition:all 0.1s;display:flex;align-items:center;justify-content:center;white-space:nowrap}
  .card-action-btn:not(:last-child){border-right:1px solid var(--border)}
  .card-action-btn:hover{background:var(--surface2);color:var(--text)}
  .card-action-btn.tap-btn:hover{color:var(--gold)}
  .card-action-btn.sac-btn:hover{color:#e74c3c}

  /* COPY COUNT — editable */
  .copy-count{width:44px;height:26px;background:var(--surface);border:1px solid var(--border);border-left:none;border-right:none;color:var(--gold-light);font-family:'Cinzel',serif;font-size:13px;font-weight:700;text-align:center;cursor:text;outline:none;transition:border-color 0.15s;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
  .copy-count:focus{border-color:var(--gold-dim);border-left:1px solid var(--gold-dim);border-right:1px solid var(--gold-dim)}

  /* ORACLE TEXT */
  .oracle-section{padding:4px 8px;border-top:1px solid var(--border)}
  .oracle-label{font-size:9px;color:var(--text);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px;font-family:'Cinzel',serif}
  .oracle-text{width:100%;text-shadow:0 1px 3px rgba(0,0,0,0.8);background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text);font-family:'Crimson Pro',serif;font-size:12px;font-style:italic;line-height:1.5;resize:none;outline:none;padding:4px 6px;min-height:40px;transition:border-color 0.15s}
  .oracle-text:focus{border-color:var(--border);background:var(--surface2);color:var(--text)}
  .oracle-text::placeholder{color:rgba(200,185,155,0.7);font-style:italic}

  /* ATTACHED TO FIELD (equipment / aura) */
  .attached-section{padding:4px 8px;border-top:1px solid var(--border)}
  .attached-label{font-size:9px;color:var(--text);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px;font-family:'Cinzel',serif}
  .attached-input{width:100%;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text);font-family:'Crimson Pro',serif;font-size:12px;outline:none;padding:4px 6px;transition:border-color 0.15s;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
  .attached-input:focus{border-color:var(--border);background:var(--surface2);color:var(--text)}
  .attached-input::placeholder{color:rgba(200,185,155,0.7)}

  /* ATTACHMENTS (equipment worn by token) */
  .attachments-section{border-top:1px solid var(--border);padding:4px 8px}
  .attachments-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
  .attachments-label{font-size:9px;color:var(--text);letter-spacing:0.1em;text-transform:uppercase;font-family:'Cinzel',serif}
  .attachments-toggle{font-size:10px;color:var(--text-dim);transition:transform 0.2s}
  .attachments-toggle.open{transform:rotate(180deg)}
  .attachments-body{overflow:hidden;max-height:0;transition:max-height 0.25s ease}
  .attachments-body.open{max-height:200px}
  .attachment-list{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0}
  .attachment-chip{display:flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:2px 4px 2px 8px;font-size:11px;color:var(--text)}
  .attachment-remove{width:14px;height:14px;border-radius:50%;border:none;background:rgba(231,76,60,0.2);color:#e74c3c;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}
  .attachment-remove:hover{background:rgba(231,76,60,0.4)}
  .attachment-add-row{display:flex;gap:4px;margin-top:4px}
  .attachment-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 8px;color:var(--text);font-family:'Crimson Pro',serif;font-size:12px;outline:none}
  .attachment-input:focus{border-color:var(--gold-dim)}
  .attachment-input::placeholder{color:rgba(200,185,155,0.7)}
  .attachment-add-btn{padding:4px 10px;background:rgba(200,151,58,0.15);border:1px solid var(--gold-dim);border-radius:6px;color:var(--gold);cursor:pointer;font-size:11px;white-space:nowrap}
  .attachment-add-btn:hover{background:rgba(200,151,58,0.25)}

  /* EMPTY STATE */
  .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--text-dim);text-align:center;padding:40px 20px}
  .empty-state-icon{font-size:48px;opacity:0.3}
  .empty-state h3{font-family:'Cinzel',serif;font-size:16px;color:var(--text-dim);font-weight:400}
  .empty-state p{font-size:13px;max-width:240px;line-height:1.5}

  /* MODAL */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(5px);z-index:400;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.2s,visibility 0s linear 0.2s}
  .modal-overlay.open{opacity:1;pointer-events:all;visibility:visible;transition:opacity 0.2s,visibility 0s}
  .modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:500px;box-shadow:0 24px 80px rgba(0,0,0,0.85);transform:scale(0.95) translateY(10px);transition:transform 0.2s;overflow:hidden;max-height:92vh;display:flex;flex-direction:column}
  .modal-overlay.open .modal{transform:scale(1) translateY(0)}
  /* Search-based modals align to the top so the mobile keyboard doesn't cover results */
  .modal-overlay.top-align{align-items:flex-start;padding-top:60px}
  .modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%);flex-shrink:0}
  .modal-title{font-family:'Cinzel',serif;font-size:14px;color:var(--gold-light);letter-spacing:0.06em}
  .modal-close{width:28px;height:28px;border:1px solid var(--border);background:transparent;border-radius:6px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.1s}
  .modal-close:hover{border-color:var(--danger);color:var(--danger)}
  .modal-body{padding:14px 16px;overflow-y:auto;flex:1}
  .modal-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}

  .form-row{display:flex;gap:10px;margin-bottom:12px}
  .form-group{flex:1;display:flex;flex-direction:column;gap:5px}
  .form-label{font-size:10px;color:var(--text-dim);letter-spacing:0.1em;text-transform:uppercase;font-family:'Cinzel',serif}
  .form-input,.form-select{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-family:'Crimson Pro',serif;font-size:14px;outline:none;transition:border-color 0.15s;width:100%}
  .form-input:focus,.form-select:focus{border-color:var(--gold-dim)}
  .form-select{cursor:pointer} option,optgroup{background:var(--surface2)}

  /* ── SUBTYPE TAG PICKER ────────────────────────────────────────────────── */
  .subtype-picker{display:flex;flex-direction:column;gap:6px}
  .subtype-tags{display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
  .subtype-tag{display:flex;align-items:center;gap:4px;background:rgba(200,151,58,0.12);
    border:1px solid var(--gold-dim);border-radius:20px;padding:3px 6px 3px 10px;
    font-size:12px;color:var(--gold-light);font-family:'Crimson Pro',serif}
  .subtype-tag-remove{width:15px;height:15px;border-radius:50%;border:none;
    background:rgba(200,151,58,0.2);color:var(--gold);cursor:pointer;font-size:11px;
    display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;line-height:1}
  .subtype-tag-remove:hover{background:rgba(231,76,60,0.3);color:#e74c3c}
  .subtype-search{background:var(--surface2);border:1px solid var(--border);border-radius:8px;
    padding:7px 10px;color:var(--text);font-family:'Crimson Pro',serif;font-size:13px;
    outline:none;transition:border-color 0.15s;width:100%;box-sizing:border-box}
  .subtype-search:focus{border-color:var(--gold-dim)}
  .subtype-search::placeholder{color:var(--text-dim)}
  .subtype-list{max-height:140px;overflow-y:auto;border:1px solid var(--border);
    border-radius:8px;background:var(--surface2);scrollbar-width:thin;
    scrollbar-color:var(--border) transparent}
  .subtype-list-item{padding:7px 12px;cursor:pointer;font-size:13px;
    color:var(--text-dim);font-family:'Crimson Pro',serif;transition:all 0.1s;
    border-bottom:1px solid rgba(61,49,32,0.3)}
  .subtype-list-item:last-child{border-bottom:none}
  .subtype-list-item:hover{background:rgba(200,151,58,0.08);color:var(--text)}
  .subtype-list-item.selected{color:var(--text-dim);opacity:0.4;pointer-events:none}
  .subtype-list-item.hidden{display:none}
  .subtype-list-empty{padding:10px 12px;font-size:12px;color:var(--text-dim);
    font-style:italic;text-align:center}

  .type-toggle-row{display:flex;flex-wrap:wrap;gap:5px}
  .type-toggle{padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:11px;cursor:pointer;transition:all 0.12s;font-family:'Crimson Pro',serif;letter-spacing:0.04em}
  .type-toggle:hover{border-color:var(--gold-dim);color:var(--text)}
  .type-toggle.active{background:rgba(200,151,58,0.15);border-color:var(--gold-dim);color:var(--gold)}

  .color-picker{display:flex;gap:6px;flex-wrap:wrap}
  .color-option{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all 0.12s;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0.45}
  .color-option:hover{opacity:0.85;transform:scale(1.08)}
  .color-option.selected{border-color:var(--gold-light);transform:scale(1.12);opacity:1;box-shadow:0 0 8px rgba(200,151,58,0.5)}
  .co-W{background:#d4c9a8}.co-U{background:#2980b9}.co-B{background:#4a235a}.co-R{background:#c0392b}.co-G{background:#1e8449}.co-C{background:#666}

  .section-label-sm{font-size:9px;color:var(--text-dim);letter-spacing:0.12em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:5px;padding-bottom:3px;border-bottom:1px solid var(--border)}
  .keywords-grid{display:flex;flex-wrap:wrap;gap:4px}
  .keyword-toggle{padding:4px 9px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:11px;cursor:pointer;transition:all 0.12s;letter-spacing:0.04em;font-family:'Crimson Pro',serif}
  .keyword-toggle:hover{border-color:var(--gold-dim);color:var(--text)}
  .keyword-toggle.active{background:rgba(200,151,58,0.15);border-color:var(--gold-dim);color:var(--gold)}

  .btn-add-emblem{display:flex;align-items:center;gap:6px;padding:7px 14px;background:linear-gradient(135deg,#2a2a4a,#3a3a6a);border:1px solid #5a5a9a;border-radius:8px;color:#aaaaff;font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:0.05em;cursor:pointer;transition:all 0.15s}
  .btn-add-emblem:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(100,100,200,0.3)}
  .btn-add-dungeon{display:flex;align-items:center;gap:6px;padding:7px 14px;background:linear-gradient(135deg,#1a2a3a,#1a3a5a);border:1px solid #2a5a7a;border-radius:8px;color:#66aacc;font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:0.05em;cursor:pointer;transition:all 0.15s}
  .btn-add-dungeon:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(40,120,160,0.3)}

  /* DUNGEON CARD */
  .dungeon-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .dungeon-card{background:transparent;border:none;border-radius:8px;overflow:hidden;box-shadow:none;transition:box-shadow 0.15s;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .dungeon-card-wrapper:hover .dungeon-card{box-shadow:0 12px 40px rgba(0,0,0,0.7),0 4px 12px rgba(40,120,160,0.2)}

  .dungeon-header{padding:8px 10px 6px;text-align:center}
  .dungeon-label{font-size:8px;color:#66aacc;letter-spacing:0.18em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .dungeon-name{font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--text);line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(0,0,0,0.7)}

  /* Dungeon map area — clickable, sized to image's natural ratio (260×360) */
  .dungeon-map{
    width:260px;
    height:360px;
    margin:0;position:relative;
    overflow:hidden;border-radius:8px;
    cursor:crosshair;
    background:#0d1a1a;
    border-top:1px solid rgba(255,255,255,0.04);
  }
  .dungeon-map-img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;object-position:center;
    z-index:1;pointer-events:none;
  }
  .dungeon-map-fallback{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:8px;
    color:rgba(100,170,200,0.4);font-family:'Cinzel',serif;
    font-size:11px;letter-spacing:0.08em;z-index:1;pointer-events:none;
  }
  .dungeon-map-fallback-icon{font-size:32px;opacity:0.5}

  /* The position marker dot */
  .dungeon-marker{
    position:absolute;
    width:18px;height:18px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%, #aaffdd, #00cc88);
    border:2px solid rgba(255,255,255,0.8);
    box-shadow:0 0 0 3px rgba(0,204,136,0.35), 0 0 12px rgba(0,204,136,0.7);
    z-index:10;
    transform:translate(-50%,-50%);
    pointer-events:none;
    animation:markerPulse 1.8s ease-in-out infinite;
    display:none;
  }
  @keyframes markerPulse{
    0%,100%{box-shadow:0 0 0 3px rgba(0,204,136,0.35), 0 0 12px rgba(0,204,136,0.7)}
    50%   {box-shadow:0 0 0 6px rgba(0,204,136,0.15), 0 0 20px rgba(0,204,136,0.9)}
  }

  .dungeon-art-frame{position:relative;margin-top:-220px;height:220px;width:100%;background-size:230px 220px;background-repeat:no-repeat;background-position:center;z-index:3;pointer-events:none}

  .dungeon-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .dungeon-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}

  /* Dungeon picker modal */
  .dungeon-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:4px 0}
  .dungeon-picker-item{padding:12px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);cursor:pointer;text-align:center;transition:all 0.15s}
  .dungeon-picker-item:hover{border-color:#2a5a7a;background:rgba(40,120,160,0.08)}
  .dungeon-picker-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text);margin-bottom:2px;line-height:1.3}
  .dungeon-picker-rooms{font-size:9px;color:#66aacc;letter-spacing:0.06em}align-items:center;gap:6px;padding:7px 14px;background:linear-gradient(135deg,#3a2a1a,#5a3a1a);border:1px solid #7a5a2a;border-radius:8px;color:#ccaa66;font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:0.05em;cursor:pointer;transition:all 0.15s}
  .btn-add-helper:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(160,120,40,0.3)}

  /* HELPER CARD */
  .helper-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .helper-card{background:transparent;border:none;border-radius:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 220px);box-shadow:none;transition:box-shadow 0.15s;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .helper-card-wrapper:hover .helper-card{box-shadow:0 12px 40px rgba(0,0,0,0.7),0 4px 12px rgba(160,120,40,0.2)}
  .helper-header{padding:8px 10px 6px;text-align:center}
  .helper-label{font-size:8px;color:#ccaa66;letter-spacing:0.18em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .helper-name{font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--text);line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(0,0,0,0.7)}
  .helper-art{position:relative;width:100%;aspect-ratio:1/1;margin:0;overflow:visible;background:transparent;display:flex;align-items:center;justify-content:center}
  .helper-art-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%;object-fit:contain;object-position:center;z-index:1}
  .helper-art-frame{position:absolute;inset:0;height:100%;width:100%;background-size:100% 100%;background-repeat:no-repeat;background-position:center;z-index:2;pointer-events:none}
  .helper-rules{padding:10px 12px;font-family:'Crimson Pro',serif;font-size:12px;line-height:1.6;color:var(--text);text-shadow:0 1px 3px rgba(0,0,0,0.8);font-style:italic;border-top:1px solid var(--border)}
  /* Covers field — only on face-down helpers */
  .helper-covers-section{padding:6px 10px 8px;border-top:1px solid var(--border)}
  .helper-covers-label{font-size:8px;color:#ccaa66;letter-spacing:0.12em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:4px}
  .helper-covers-input{width:100%;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text);font-family:'Crimson Pro',serif;font-size:12px;outline:none;padding:3px 6px;transition:border-color 0.15s;box-sizing:border-box}
  .helper-covers-input:focus{border-color:var(--border);background:rgba(13,11,8,0.4)}
  .helper-covers-input::placeholder{color:rgba(200,185,155,0.6)}
  .helper-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .helper-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}
  /* Helper picker modal */
  .helper-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:4px 0}
  .helper-picker-item{padding:12px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);cursor:pointer;text-align:center;transition:all 0.15s}
  .helper-picker-item:hover{border-color:#7a5a2a;background:rgba(160,120,40,0.08)}
  .helper-picker-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text);margin-bottom:2px;line-height:1.3}
  .helper-picker-tag{font-size:9px;color:#ccaa66;letter-spacing:0.06em}align-items:center;gap:6px;padding:7px 14px;background:linear-gradient(135deg,#2a3a2a,#3a5a3a);border:1px solid #4a7a4a;border-radius:8px;color:#88cc88;font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:0.05em;cursor:pointer;transition:all 0.15s}
  .btn-add-marker:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(80,160,80,0.3)}

  /* MARKER CARD */
  .marker-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .marker-card{background:transparent;border:none;border-radius:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 220px);box-shadow:none;transition:box-shadow 0.15s;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .marker-card-wrapper:hover .marker-card{box-shadow:0 12px 40px rgba(0,0,0,0.7),0 4px 12px rgba(80,160,80,0.2)}
  .marker-header{padding:8px 10px 6px;text-align:center}
  .marker-label{font-size:8px;color:#88cc88;letter-spacing:0.18em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .marker-name{font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--text);line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(0,0,0,0.7)}
  .marker-art{position:relative;width:100%;aspect-ratio:1/1;margin:0;overflow:visible;background:transparent;display:flex;align-items:center;justify-content:center}
  .marker-art-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%;object-fit:contain;object-position:center;z-index:1}
  .marker-art-frame{position:absolute;inset:0;height:100%;width:100%;background-size:100% 100%;background-repeat:no-repeat;background-position:center;z-index:2;pointer-events:none}
  .marker-counter-section{padding:14px 12px 10px;text-align:center;border-top:1px solid var(--border)}
  .marker-counter-type{font-size:9px;color:#88cc88;letter-spacing:0.14em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:8px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .marker-counter-display{display:flex;align-items:center;justify-content:center;gap:10px}
  .marker-counter-img{width:40px;height:40px;border-radius:50%;object-fit:cover}
  .marker-counter-val{font-family:'Cinzel',serif;font-size:28px;font-weight:700;color:var(--gold-light);text-shadow:0 2px 8px rgba(0,0,0,0.9),0 0 16px rgba(200,151,58,0.4);min-width:48px;text-align:center}
  .marker-counter-btns{display:flex;flex-direction:column;gap:4px}
  .marker-counter-btn{width:28px;height:28px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;font-weight:700;line-height:1;transition:all 0.1s}
  .marker-counter-btn.inc{background:rgba(39,174,96,0.25);color:#2ecc71}.marker-counter-btn.inc:hover{background:rgba(39,174,96,0.45)}
  .marker-counter-btn.dec{background:rgba(231,76,60,0.25);color:#e74c3c}.marker-counter-btn.dec:hover{background:rgba(231,76,60,0.45)}
  .marker-rules{padding:8px 12px;font-family:'Crimson Pro',serif;font-size:11px;line-height:1.5;color:var(--text);text-shadow:0 1px 3px rgba(0,0,0,0.8);font-style:italic;border-top:1px solid var(--border)}
  .marker-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .marker-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}
  .marker-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:4px 0}
  .marker-picker-item{padding:12px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);cursor:pointer;text-align:center;transition:all 0.15s}
  .marker-picker-item:hover{border-color:#4a7a4a;background:rgba(80,160,80,0.08)}
  .marker-picker-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text);margin-bottom:3px;line-height:1.3}
  .marker-picker-counter{font-size:10px;color:#88cc88;letter-spacing:0.06em}

  /* EMBLEM CARD */
  .emblem-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;
    background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .emblem-card{background:transparent;border:none;border-radius:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 220px);
    box-shadow:none;transition:box-shadow 0.15s;position:relative;
    animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .emblem-card-wrapper:hover .emblem-card{box-shadow:0 12px 40px rgba(0,0,0,0.7),0 4px 12px rgba(100,100,200,0.2)}

  /* Emblem art area — square, art scaled to card width, transparent behind */
  .emblem-art{position:relative;width:100%;aspect-ratio:1/1;margin:0;
    overflow:visible;background:transparent;
    display:flex;align-items:center;justify-content:center}
  /* Art sits behind, inset so the frame's margin houses it. 256x256 source. */
  .emblem-art-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:88%;height:88%;object-fit:contain;object-position:center;z-index:1}
  .emblem-art-fallback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-size:48px;opacity:0.5;z-index:1}
  /* Frame overlays ON TOP — extended slightly beyond the art window to cover edges */
  .emblem-art-frame{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
    background-size:100% 100%;background-repeat:no-repeat;background-position:center;
    z-index:2;pointer-events:none}

  /* Emblem name header */
  .emblem-header{padding:8px 10px 6px;text-align:center}
  .emblem-label{font-size:8px;color:#aaaaff;letter-spacing:0.18em;text-transform:uppercase;
    font-family:'Cinzel',serif;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .emblem-name{font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--text);
    line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(0,0,0,0.7)}

  /* Emblem rules text — prominent */
  .emblem-rules{margin:8px 10px;padding:10px 12px;font-family:'Crimson Pro',serif;font-size:13px;
    line-height:1.6;color:#f5ecd8;text-shadow:0 1px 2px rgba(0,0,0,0.6);
    background:rgba(13,11,8,0.82);border:1px solid rgba(255,255,255,0.1);border-radius:8px;min-height:60px}
  .emblem-rules-input{width:100%;background:transparent;border:none;
    color:#f5ecd8;font-family:'Crimson Pro',serif;font-size:13px;font-style:italic;
    line-height:1.6;resize:none;outline:none;padding:0;min-height:60px;
    text-shadow:0 1px 2px rgba(0,0,0,0.6)}
  .emblem-rules-input::placeholder{color:rgba(245,236,216,0.5);font-style:italic}

  /* Emblem copy section — same as token */
  .emblem-copy-section{display:flex;align-items:center;justify-content:space-between;
    padding:6px 10px;border-top:1px solid var(--border);background:rgba(0,0,0,0.2)}

  /* Emblem delete button */
  .emblem-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;
    border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;
    font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .emblem-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);cursor:pointer;font-family:'Crimson Pro',serif;font-size:13px;transition:all 0.1s}
  .btn-cancel:hover{border-color:var(--text-dim);color:var(--text)}
  .btn-create{padding:8px 20px;background:linear-gradient(135deg,var(--gold-dim),var(--gold));border:none;border-radius:8px;color:var(--bg);font-family:'Cinzel',serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.1s}
  .btn-create:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(200,151,58,0.4)}

  /* COUNTER MODAL */
  .counter-search{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-family:'Crimson Pro',serif;font-size:13px;outline:none;margin-bottom:10px;transition:border-color 0.15s}
  .counter-search:focus{border-color:var(--gold-dim)}
  .counter-search::placeholder{color:var(--text-dim)}
  .counter-category{margin-bottom:12px}
  .counter-cat-label{font-size:9px;color:var(--text-dim);letter-spacing:0.12em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border)}
  .counter-options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .counter-option{padding:8px 6px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer;text-align:center;transition:all 0.12s}
  .counter-option:hover{border-color:var(--gold-dim);background:rgba(200,151,58,0.06)}
  .counter-option.hidden{display:none}
  .cto-icon{width:36px;height:36px;border-radius:50%;overflow:hidden;margin:0 auto 4px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .cto-icon-fallback{width:36px;height:36px;border-radius:50%;font-size:13px;font-weight:700;align-items:center;justify-content:center}
  .cto-name{font-size:11px;font-family:'Cinzel',serif;color:var(--text);line-height:1.2}

  .btn-board-stats{margin-left:auto;padding:5px 12px;background:rgba(200,151,58,0.1);border:1px solid var(--gold-dim);border-radius:8px;color:var(--gold);font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:0.05em;cursor:pointer;transition:all 0.15s;white-space:nowrap}
  .btn-board-stats:hover{background:rgba(200,151,58,0.2);border-color:var(--gold)}

  /* BOARD STATS OVERLAY */
  .stats-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);backdrop-filter:blur(6px);z-index:400;display:flex;align-items:stretch;justify-content:flex-start;opacity:0;pointer-events:none;transition:opacity 0.2s}
  .stats-overlay.open{opacity:1;pointer-events:all}
  .stats-panel{width:min(360px,92vw);height:100%;max-height:100%;background:var(--surface);border-right:1px solid var(--border);box-shadow:8px 0 48px rgba(0,0,0,0.7);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform 0.28s cubic-bezier(0.32,0.72,0,1);overflow:hidden}
  .stats-overlay.open .stats-panel{transform:translateX(0)}
  .stats-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
  .stats-panel-title{font-family:'Cinzel',serif;font-size:15px;color:var(--gold-light);letter-spacing:0.08em}
  .stats-panel-close{width:28px;height:28px;border:1px solid var(--border);background:transparent;border-radius:6px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.1s}
  .stats-panel-close:hover{border-color:var(--danger);color:var(--danger)}
  .stats-panel-body{overflow-y:auto;flex:1;padding:14px 16px 28px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .stats-section{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
  .stats-section-title{font-family:'Cinzel',serif;font-size:10px;color:var(--gold);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
  .stats-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(61,49,32,0.4)}
  .stats-row:last-child{border-bottom:none}
  .stats-row-label{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:6px}
  .stats-row-val{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--gold-light)}
  .stats-row-val.zero{color:var(--text-dim);font-weight:400;opacity:0.5}
  .stats-color-pip{width:10px;height:10px;border-radius:50%;flex-shrink:0}
  .stats-empty{font-size:12px;color:var(--text-dim);font-style:italic;text-align:center;padding:8px 0}
  .toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface2);border:1px solid var(--gold-dim);border-radius:10px;padding:8px 16px;font-size:12px;color:var(--gold-light);font-family:'Cinzel',serif;letter-spacing:0.05em;z-index:500;transition:transform 0.25s ease;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
  .toast.show{transform:translateX(-50%) translateY(0)}

  /* ── ATTRACTION CARD ─────────────────────────────────────────────────────── */
  .attraction-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .attraction-card{background:transparent;border:none;border-radius:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 220px);box-shadow:none;transition:box-shadow 0.15s;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .attraction-card-wrapper:hover .attraction-card{box-shadow:0 12px 40px rgba(0,0,0,0.7),0 4px 12px rgba(255,80,200,0.2)}
  .attraction-art{position:relative;width:100%;aspect-ratio:1/1;margin:0;overflow:visible;background:transparent;display:flex;align-items:center;justify-content:center}
  .attraction-art-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%;object-fit:contain;object-position:center;z-index:1}
  .attraction-art-frame{position:absolute;inset:0;height:100%;width:100%;background-size:100% 100%;background-repeat:no-repeat;background-position:center;z-index:2;pointer-events:none}
  .attraction-header{padding:8px 10px 4px}
  .attraction-label{display:inline-block;font-size:9px;color:#ffbbe0;letter-spacing:0.16em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:4px;padding:2px 8px;border-radius:10px;background:rgba(13,11,8,0.7);font-weight:700}
  .attraction-name{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:#fff;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,0.95),0 0 6px rgba(0,0,0,0.8)}
  .attraction-acorn{font-size:10px;color:#aaff66;letter-spacing:0.06em;font-family:'Crimson Pro',serif;font-style:italic;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.9)}
  /* Lights row — horizontal left to right */
  .attraction-lights{display:flex;flex-direction:row;gap:5px;padding:6px 10px;align-items:center;border-top:1px solid var(--border)}
  .attraction-lights-label{font-size:10px;color:#fff;font-weight:700;font-family:'Cinzel',serif;letter-spacing:0.06em;margin-right:4px;flex-shrink:0;text-shadow:0 1px 3px rgba(0,0,0,0.9)}
  .attraction-light{width:26px;height:26px;border-radius:50%;border:2px solid rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:#000;background:rgba(255,255,255,0.45);flex-shrink:0}
  .attraction-light.lit{background:#cc3388;border-color:#99004d;color:#fff;box-shadow:0 0 8px rgba(153,0,77,0.5)}
  /* Visit text */
  .attraction-visit{padding:9px 11px;margin:6px 8px;border-radius:8px;background:rgba(13,11,8,0.82);font-family:'Crimson Pro',serif;font-size:13px;line-height:1.55;color:#f5ecd8;font-style:italic;border:1px solid rgba(255,255,255,0.1)}
  .attraction-visit-label{font-family:'Cinzel',serif;font-size:10px;color:#ff99cc;font-weight:700;letter-spacing:0.08em;font-style:normal;margin-bottom:4px}
  /* Tap + copy + attachments — same as tokens */
  .attraction-actions{display:flex;border-top:1px solid var(--border)}
  .attraction-action-btn{flex:1;padding:6px 2px;background:transparent;border:none;color:#000;cursor:pointer;font-size:10px;font-weight:600;font-family:'Crimson Pro',serif;transition:all 0.1s;display:flex;align-items:center;justify-content:center;white-space:nowrap;text-shadow:0 1px 2px rgba(255,255,255,0.3)}
  .attraction-action-btn:not(:last-child){border-right:1px solid var(--border)}
  .attraction-action-btn:hover{background:var(--surface2)}
  .attraction-action-btn.tap-btn:hover{color:#99004d}
  .attraction-copy-section{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-top:1px solid var(--border);background:rgba(0,0,0,0.2)}
  .attraction-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .attraction-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}
  /* Attraction modal */
  .attraction-filter-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
  .attraction-tab{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-size:11px;cursor:pointer;font-family:'Cinzel',serif;transition:all 0.12s}
  .attraction-tab.active{background:rgba(255,80,200,0.12);border-color:#ff80cc;color:#ff80cc}
  .attraction-list{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .attraction-list-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer;transition:all 0.12s}
  .attraction-list-item:hover{border-color:#ff80cc;background:rgba(255,80,200,0.06)}
  .attraction-list-lights{display:flex;gap:3px;flex-shrink:0}
  .attraction-list-light{width:18px;height:18px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--text-dim);background:var(--surface);flex-shrink:0}
  .attraction-list-light.lit{background:#ff80cc;border-color:#ff40aa;color:#000}
  .attraction-list-info{flex:1;min-width:0}
  .attraction-list-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text);margin-bottom:2px}
  .attraction-list-visit{font-family:'Crimson Pro',serif;font-size:10px;color:var(--text-dim);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .attraction-list-tag{font-size:9px;color:#88cc44;flex-shrink:0}

  /* ── STICKER SHEET CARD ─────────────────────────────────────────────────── */
  .sticker-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .sticker-card{background:transparent;border:none;border-radius:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 220px);box-shadow:none;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .sticker-header{padding:6px 10px 4px;border-bottom:1px solid var(--border);text-align:center}
  .sticker-label{display:inline-block;font-size:9px;color:#5a4400;letter-spacing:0.16em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:4px;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,0.6);font-weight:700}
  .sticker-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:#1a1208;text-shadow:0 1px 2px rgba(255,255,255,0.5)}
  .sticker-sections{padding:6px 8px;display:flex;flex-direction:column;gap:4px}
  .sticker-section-title{font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:5px 8px;border-radius:4px;margin-bottom:6px;font-weight:700}
  .sticker-section-title.name-title  {color:#fff;background:#2b7cc4;border-left:4px solid #16466e}
  .sticker-section-title.art-title   {color:#fff;background:#c47a1a;border-left:4px solid #7e4d00}
  .sticker-section-title.text-title  {color:#fff;background:#8a3cc4;border-left:4px solid #531a7e}
  .sticker-section-title.pt-title    {color:#fff;background:#3a9c3a;border-left:4px solid #1e641e}
  /* Each sticker = stacked block: description on top (wraps), field below */
  .sticker-row{display:flex;flex-direction:column;gap:3px;margin-bottom:5px;
    padding:3px 5px;background:rgba(255,255,255,0.35);border-radius:6px;
    border:1px solid rgba(0,0,0,0.12)}
  .sticker-content{font-family:'Crimson Pro',serif;font-size:12px;color:#1a1208;
    font-weight:700;line-height:1.35;width:100%;
    overflow-wrap:break-word;word-break:break-word}
  .sticker-attach-row{display:flex;align-items:center;gap:6px;width:100%}
  .sticker-arrow{color:rgba(0,0,0,0.55);font-size:11px;flex-shrink:0;
    font-family:'Cinzel',serif;letter-spacing:0.04em;text-transform:uppercase}
  .sticker-input{flex:1;background:rgba(255,255,255,0.65);border:1px solid rgba(0,0,0,0.25);
    border-radius:4px;color:#000;font-family:'Crimson Pro',serif;font-size:13px;
    outline:none;padding:2px 5px;min-width:0;width:100%;box-sizing:border-box;
    transition:border-color 0.15s}
  .sticker-input:focus{border-color:var(--gold-dim)}
  .sticker-input::placeholder{color:rgba(0,0,0,0.5);font-style:italic}
  .sticker-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .sticker-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}
  /* Sticker modal */
  .sticker-modal-search{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-family:'Crimson Pro',serif;font-size:13px;outline:none;margin-bottom:10px;box-sizing:border-box}
  .sticker-modal-search:focus{border-color:var(--gold-dim)}
  .sticker-modal-tabs{display:flex;gap:8px;margin-bottom:10px}
  .sticker-modal-tab{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--text-dim);font-size:11px;cursor:pointer;font-family:'Cinzel',serif;transition:all 0.12s}
  .sticker-modal-tab.active{background:rgba(255,200,68,0.12);border-color:#ffcc44;color:#ffcc44}
  .sticker-list{display:flex;flex-direction:column;gap:5px;max-height:380px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .sticker-list-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer;transition:all 0.12s}
  .sticker-list-item:hover{border-color:#ffcc44;background:rgba(255,200,68,0.06)}
  .sticker-list-num{font-family:'Cinzel',serif;font-size:9px;color:var(--text-dim);flex-shrink:0;width:24px}
  .sticker-list-name{font-family:'Cinzel',serif;font-size:11px;color:var(--text);flex:1}
  .sticker-list-preview{font-family:'Crimson Pro',serif;font-size:10px;color:var(--text-dim);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}

  /* ── SPEED CARD ─────────────────────────────────────────────────────────── */
  .speed-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .speed-card{background:transparent;border:none;border-radius:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 220px);box-shadow:none;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .speed-header{padding:8px 10px 4px;text-align:center}
  .speed-label{display:inline-block;font-size:9px;color:#ffd680;letter-spacing:0.16em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:4px;padding:2px 8px;border-radius:10px;background:rgba(13,11,8,0.7);font-weight:700}
  .speed-name{font-family:'Cinzel',serif;font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.95),0 0 6px rgba(0,0,0,0.8)}
  .speed-art{position:relative;width:100%;aspect-ratio:1/1;margin:0;overflow:visible;background:transparent;display:flex;align-items:center;justify-content:center}
  .speed-art-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%;object-fit:contain;object-position:center;z-index:1}
  .speed-art-frame{position:absolute;inset:0;height:100%;width:100%;background-size:100% 100%;background-repeat:no-repeat;background-position:center;z-index:2;pointer-events:none}
  .speed-counter-section{padding:16px 12px 8px;text-align:center;border-top:1px solid var(--border)}
  .speed-pips{display:flex;justify-content:center;gap:10px;margin-bottom:12px}
  .speed-pip{width:44px;height:44px;border-radius:50%;border:2px solid rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:#1a1a1a;background:rgba(255,255,255,0.7);transition:all 0.2s}
  .speed-pip.active{border-color:#cc7700;color:#000;background:rgba(255,170,34,0.65);box-shadow:0 0 12px rgba(204,119,0,0.4)}
  .speed-pip.maxspeed{border-color:#aa2200;color:#fff;background:rgba(204,40,0,0.85);box-shadow:0 0 16px rgba(204,40,0,0.5);animation:speedPulse 1.2s ease-in-out infinite}
  @keyframes speedPulse{0%,100%{box-shadow:0 0 16px rgba(255,68,0,0.5)}50%{box-shadow:0 0 28px rgba(255,68,0,0.9)}}
  .speed-controls{display:flex;justify-content:center;gap:10px;margin-top:4px}
  .speed-btn{padding:6px 18px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:18px;cursor:pointer;transition:all 0.12s}
  .speed-btn:hover{border-color:#ffaa22;color:#ffaa22}
  .speed-maxlabel{font-size:10px;color:#aa2200;font-weight:700;font-family:'Cinzel',serif;letter-spacing:0.1em;margin-top:6px;min-height:16px}
  .speed-reminder{padding:9px 11px;margin:6px 10px;border-radius:8px;background:rgba(13,11,8,0.82);font-family:'Crimson Pro',serif;font-size:13px;line-height:1.55;color:#f5ecd8;font-style:italic;border:1px solid rgba(255,255,255,0.1)}
  .speed-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .speed-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}

  /* ── DAY/NIGHT CARD ──────────────────────────────────────────────────────── */
  .daynight-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .daynight-card{background:transparent;border:none;border-radius:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 220px);box-shadow:none;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .daynight-face{display:none;flex-direction:column}
  .daynight-face.active{display:flex}
  .daynight-art{position:relative;width:100%;aspect-ratio:1/1;margin:0;overflow:visible;background:transparent;display:flex;align-items:center;justify-content:center}
  .daynight-art.day{background:linear-gradient(160deg,#2a2010 0%,#1a1508 100%)}
  .daynight-art.night{background:linear-gradient(160deg,#0a0a2a 0%,#050514 100%)}
  .daynight-art-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%;object-fit:contain;object-position:center;z-index:1}
  .daynight-art-frame{position:absolute;inset:0;height:100%;width:100%;background-size:100% 100%;background-repeat:no-repeat;background-position:center;z-index:2;pointer-events:none}
  .daynight-header{padding:8px 10px 4px;text-align:center}
  .daynight-label{font-size:8px;letter-spacing:0.18em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .daynight-label.day{color:#ffdd88}
  .daynight-label.night{color:#8888ff}
  .daynight-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text);text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .daynight-rules{padding:8px 12px;font-family:'Crimson Pro',serif;font-size:11px;line-height:1.5;color:var(--text);font-style:italic;border-top:1px solid var(--border)}
  .daynight-flip-btn{width:100%;padding:9px;border:none;cursor:pointer;font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:0.06em;transition:all 0.15s;border-top:1px solid var(--border)}
  .daynight-flip-btn.to-night{background:rgba(10,10,42,0.6);color:#8888ff}
  .daynight-flip-btn.to-night:hover{background:rgba(80,80,180,0.2)}
  .daynight-flip-btn.to-day{background:rgba(42,32,10,0.6);color:#ffdd88}
  .daynight-flip-btn.to-day:hover{background:rgba(180,140,40,0.2)}
  .daynight-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .daynight-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}

  /* ── RING TEMPTS YOU CARD ────────────────────────────────────────────────── */
  .ring-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .ring-card{background:transparent;border:none;border-radius:8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 220px);box-shadow:none;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .ring-header{padding:5px 10px 2px;text-align:center}
  .ring-label{display:inline-block;font-size:9px;color:#ffd680;letter-spacing:0.16em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:4px;padding:2px 8px;border-radius:10px;background:rgba(13,11,8,0.7);font-weight:700}
  .ring-name{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.95),0 0 6px rgba(0,0,0,0.8)}
  .ring-art{position:relative;width:100%;aspect-ratio:1/1;margin:0;overflow:visible;background:transparent;display:flex;align-items:center;justify-content:center}
  .ring-art-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%;object-fit:contain;object-position:center;z-index:1}
  .ring-art-frame{position:absolute;inset:0;height:100%;width:100%;background-size:100% 100%;background-repeat:no-repeat;background-position:center;z-index:2;pointer-events:none}
  .ring-tiers{padding:5px 8px 3px;border-top:1px solid var(--border)}
  .ring-tier{display:flex;gap:7px;padding:6px 8px;border-radius:6px;margin-bottom:4px;background:rgba(13,11,8,0.75);border:1px solid rgba(255,255,255,0.08);transition:background 0.2s;cursor:pointer;align-items:flex-start}
  .ring-tier.unlocked{background:rgba(204,136,0,0.32);border-color:rgba(255,200,80,0.4)}
  .ring-tier-pip{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,0.35);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background:rgba(255,255,255,0.12);transition:all 0.2s}
  .ring-tier.unlocked .ring-tier-pip{border-color:#ffcc66;background:#e0a838;color:#1a1208}
  .ring-tier-text{font-family:'Crimson Pro',serif;font-size:12px;line-height:1.4;color:#c8bca0;font-style:italic;transition:color 0.2s}
  .ring-tier.unlocked .ring-tier-text{color:#fff;font-style:normal}
  .ring-controls{display:flex;justify-content:center;gap:8px;padding:4px 10px;border-top:1px solid var(--border)}
  .ring-btn{padding:5px 14px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:16px;cursor:pointer;transition:all 0.12s}
  .ring-btn:hover{border-color:#cc8800;color:#cc8800}
  .ring-bearer-section{padding:4px 10px 6px;border-top:1px solid var(--border)}
  .ring-bearer-label{font-size:9px;color:#ffcc66;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:4px;text-shadow:0 1px 3px rgba(0,0,0,0.9)}
  .ring-bearer-input{width:100%;background:rgba(13,11,8,0.6);border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:#fff;font-family:'Crimson Pro',serif;font-size:13px;outline:none;padding:5px 7px;transition:border-color 0.15s;box-sizing:border-box}
  .ring-bearer-input:focus{border-color:var(--border);background:rgba(13,11,8,0.4)}
  .ring-bearer-input::placeholder{color:rgba(245,236,216,0.45)}
  .ring-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}

  /* ── PLANECHASE CARD ────────────────────────────────────────────────────── */
  .plane-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .plane-card{background:transparent;border:none;border-radius:8px;overflow:visible;position:relative;animation:cardIn 0.25s ease forwards;width:280px;background-color:rgba(13,11,8,0)}
  .plane-header{padding:8px 12px 6px;text-align:center;border-bottom:1px solid var(--border)}
  .plane-label{font-size:8px;letter-spacing:0.18em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .plane-label.type-plane{color:#9b8cff}
  .plane-label.type-phenomenon{color:#ff9bd8}
  .plane-name{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,0.95);line-height:1.15}
  .plane-origin{font-size:9px;color:var(--text-dim);font-style:italic;font-family:'Crimson Pro',serif;margin-top:2px}
  .plane-body{padding:8px 12px;display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .plane-ability{font-family:'Crimson Pro',serif;font-size:11.5px;line-height:1.5;color:#f5ecd8;text-shadow:0 1px 2px rgba(0,0,0,0.6);background:rgba(13,11,8,0.82);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:8px 10px}
  .plane-ability-label{display:inline-block;font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:2px;padding:1px 6px;border-radius:3px}
  .plane-ability-label.static-label{color:#cfc8f5;background:rgba(120,100,220,0.25)}
  .plane-ability-label.chaos-label{color:#ffc8e8;background:rgba(220,80,160,0.25)}
  .plane-chaos-symbol{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#c0392b;color:#fff;font-size:9px;font-weight:700;margin-right:4px;vertical-align:middle}
  .plane-deck-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--border)}
  .plane-remaining{font-family:'Cinzel',serif;font-size:10px;color:var(--text-dim);letter-spacing:0.04em}
  .plane-remaining b{color:var(--gold-light);font-size:13px}
  .plane-walk-btn{flex-shrink:0;padding:7px 16px;border:1px solid var(--gold-dim);border-radius:8px;background:rgba(200,151,58,0.12);color:var(--gold-light);font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:0.05em;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:5px}
  .plane-walk-btn:hover{background:rgba(200,151,58,0.25);border-color:var(--gold)}
  .plane-walk-btn:disabled{opacity:0.4;cursor:not-allowed;border-color:var(--border);color:var(--text-dim);background:var(--surface2)}
  .plane-exhausted{text-align:center;padding:6px;font-family:'Crimson Pro',serif;font-size:11px;font-style:italic;color:var(--text-dim)}
  .plane-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .plane-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}

  /* ── ARCHENEMY SCHEME CARD ──────────────────────────────────────────────── */
  .scheme-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .scheme-card{background:transparent;border:none;border-radius:8px;overflow:visible;position:relative;animation:cardIn 0.25s ease forwards;width:280px;background-color:rgba(13,11,8,0)}
  .scheme-header{padding:8px 12px 6px;text-align:center;border-bottom:1px solid var(--border)}
  .scheme-label{font-size:8px;letter-spacing:0.18em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,0.9);color:#e0564a}
  .scheme-label.ongoing-type{color:#e0a84a}
  .scheme-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,0.95);line-height:1.15}
  .scheme-ongoing-badge{display:inline-block;font-family:'Cinzel',serif;font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#1a1208;background:#e0a84a;border-radius:3px;padding:1px 6px;margin-top:4px}
  .scheme-body{padding:10px 12px;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .scheme-text{font-family:'Crimson Pro',serif;font-size:12px;line-height:1.5;color:#f5ecd8;text-shadow:0 1px 2px rgba(0,0,0,0.6);background:rgba(13,11,8,0.82);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:9px 11px}
  .scheme-deck-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--border)}
  .scheme-count{font-family:'Cinzel',serif;font-size:10px;color:var(--text-dim);letter-spacing:0.04em}
  .scheme-count b{color:var(--gold-light);font-size:13px}
  .scheme-set-btn{flex-shrink:0;padding:7px 14px;border:1px solid #c0392b;border-radius:8px;background:rgba(192,57,43,0.18);color:#ff8a7a;font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:0.04em;cursor:pointer;transition:all 0.15s}
  .scheme-set-btn:hover{background:rgba(192,57,43,0.3);border-color:#e0564a}
  .scheme-keep-row{padding:6px 12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}
  .scheme-keep-btn{flex:1;padding:6px;border:1px dashed var(--gold-dim);border-radius:6px;background:transparent;color:var(--gold-light);font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.04em;cursor:pointer;transition:all 0.12s}
  .scheme-keep-btn:hover{background:rgba(200,151,58,0.1);border-style:solid}
  /* Active ongoing schemes list */
  .scheme-active-section{padding:6px 12px 8px;border-top:1px solid var(--border)}
  .scheme-active-label{font-family:'Cinzel',serif;font-size:8px;color:#e0a84a;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:5px}
  .scheme-active-item{display:flex;align-items:flex-start;gap:6px;padding:6px 8px;margin-bottom:4px;background:rgba(13,11,8,0.82);border:1px solid rgba(224,168,74,0.35);border-radius:6px}
  .scheme-active-item-text{flex:1;min-width:0}
  .scheme-active-item-name{font-family:'Cinzel',serif;font-size:10px;font-weight:700;color:#ffcc66;line-height:1.2}
  .scheme-active-item-rules{font-family:'Crimson Pro',serif;font-size:10px;line-height:1.4;color:#e8dcc0;margin-top:2px}
  .scheme-abandon-btn{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,80,80,0.5);background:transparent;color:#ff6a6a;cursor:pointer;font-size:11px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;transition:all 0.12s}
  .scheme-abandon-btn:hover{background:rgba(255,80,80,0.2);border-color:#ff6a6a}
  .scheme-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .scheme-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}
  .ring-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}

  /* ── ATTRACTION CARD ─────────────────────────────────────────────────────── */
  .attraction-card-wrapper{position:relative;display:inline-flex;overflow:visible;flex-shrink:0;background-size:100% 100%;padding:var(--frame-inset-y) var(--frame-inset-x);border-radius:12px}
  .attraction-card{background:transparent;border:none;border-radius:8px;overflow:hidden;box-shadow:none;position:relative;animation:cardIn 0.25s ease forwards;width:260px;background-color:rgba(13,11,8,0)}
  .attraction-card-wrapper:hover .attraction-card{box-shadow:0 12px 40px rgba(0,0,0,0.7),0 4px 12px rgba(220,80,220,0.2)}
  .attraction-art{position:relative;width:100%;aspect-ratio:1/1;margin:0;overflow:visible;background:transparent;display:flex;align-items:center;justify-content:center}
  .attraction-art-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%;object-fit:contain;object-position:center;z-index:1}
  .attraction-art-frame{position:absolute;inset:0;height:100%;width:100%;background-size:100% 100%;background-repeat:no-repeat;background-position:center;z-index:2;pointer-events:none}
  .attraction-header{padding:8px 10px 4px;display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
  .attraction-header-left{flex:1}
  .attraction-label{font-size:8px;color:#dd66dd;letter-spacing:0.18em;text-transform:uppercase;font-family:'Cinzel',serif;margin-bottom:2px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .attraction-label.acorn{color:#88cc44}
  .attraction-name{font-family:'Cinzel',serif;font-size:12px;font-weight:600;color:var(--text);line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
  .attraction-type{font-size:9px;color:var(--text-dim);padding:2px 10px 4px;font-style:italic;border-bottom:1px solid var(--border)}
  .attraction-rules{padding:8px 10px;font-family:'Crimson Pro',serif;font-size:12px;line-height:1.5;color:var(--text);text-shadow:0 1px 3px rgba(0,0,0,0.8)}
  .attraction-visit-label{font-size:9px;font-weight:700;color:#dd66dd;font-family:'Cinzel',serif;letter-spacing:0.06em;font-style:normal}
  .attraction-delete-btn{position:absolute;top:-8px;right:-8px;z-index:30;width:22px;height:22px;border-radius:50%;border:2px solid #ff1a1a;background:#ff1a1a;color:#fff;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.15s;line-height:1;padding:0;box-shadow:0 2px 8px rgba(255,26,26,0.6)}
  .attraction-delete-btn:hover{background:#ff4444;border-color:#ff4444;transform:scale(1.15)}

  /* Attraction spawn modal */
  .attraction-modal-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px}
  .attraction-tab{flex:1;padding:8px;background:transparent;border:none;color:var(--text-dim);font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.06em;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}
  .attraction-tab.active{color:#dd66dd;border-bottom-color:#dd66dd}
  .attraction-list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .attraction-list-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer;transition:all 0.15s}
  .attraction-list-item:hover{border-color:#dd66dd;background:rgba(220,80,220,0.06)}
  .attraction-list-item-name{flex:1;font-family:'Cinzel',serif;font-size:11px;color:var(--text)}
  .attraction-list-lights{display:flex;gap:2px}
  .attraction-list-light{width:14px;height:14px;border-radius:50%;border:1px solid #444;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:#555;background:#1a1a1a}
  .attraction-list-light.lit{border-color:#ff9900;color:#000;background:#ff9900}