/* ==========================================================================
   TokenTap5e — shared portal styles
   Single owner for rules that dm.html and player.html both use. These were
   byte-identical duplicates in both files; edit here and both portals follow.
   Portal-specific rules stay inline in their own file.
   ========================================================================== */

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

.logo h1 {
      font-family: Georgia, 'EB Garamond', serif;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      text-shadow: 0 0 40px rgba(201, 168, 76, 0.2);
    }

.logo p {
      font-family: 'Cinzel', serif;
      font-size: 15px;
      color: #c9a84c;
      letter-spacing: 4px;
      margin-top: 8px;
      text-transform: uppercase;
    }

.card {
      padding: 32px;
    }

/* 32px of card padding inside 20px of body padding leaves barely 280px of
   content on a phone. Desktop keeps the generous version. */
@media (max-width: 560px) {
  .card { padding: 18px 14px; }
}

.card h2 {
      font-size: 18px;
      color: #c9a84c;
      margin-bottom: 24px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

.form-group {
      margin-bottom: 20px;
    }

/* Reserve the scrollbar gutter permanently. Without it, anything that
       grows the page mid-interaction makes a scrollbar appear, the viewport
       narrows, and every centred element jumps left by half the bar. */
    html { scrollbar-gutter: stable; }

.entry-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 320;
      width: calc(100% - 32px);
      max-width: 480px;
      max-height: 84vh;
      max-height: calc(100dvh - 120px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      background:
        repeating-linear-gradient(-45deg, transparent 0px, transparent 2px, rgba(180,180,180,0.035) 2px, rgba(180,180,180,0.035) 4px),
        linear-gradient(to bottom, #c9a84c20, rgba(0,0,0,0.25) 55%),
        linear-gradient(160deg, #191919, #101010, #0c0c0c) !important;
      border: 1px solid #c9a84c55 !important;
      border-radius: 12px !important;
      padding: 22px !important;
      margin-bottom: 0 !important;
      box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.82);
    }

.entry-panel-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
    }

.entry-panel-bar span {
      font-family: 'Cinzel', serif;
      color: #d9bc63;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

.entry-panel::-webkit-scrollbar { display: none; }

/* Segmented control. The thumb slides rather than both buttons repainting. */
    .seg {
      position: relative;
      display: flex;
      background: #111;
      border: 1px solid #333;
      border-radius: 8px;
      padding: 4px;
      margin-bottom: 16px;
    }

.seg[data-active="0"] .seg-thumb { --seg-i: 0; }

.seg[data-active="1"] .seg-thumb { --seg-i: 1; }

.seg[data-active="2"] .seg-thumb { --seg-i: 2; }

.seg[data-active="3"] .seg-thumb { --seg-i: 3; }

.seg[data-active="-1"] .seg-thumb { opacity: 0; }

.seg button.is-active { color: #f0e2b8; }

@keyframes ttModalPop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

div[id$="-modal"] { animation: ttModalIn 170ms ease-out; }

div[id$="-modal"] > div { animation: ttModalPop 240ms cubic-bezier(.2,.9,.25,1); }

@keyframes ttModalOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes ttModalPopOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.99); } }

div[id$="-modal"].tt-modal-out { animation: ttModalOut 160ms ease-in forwards; }

div[id$="-modal"].tt-modal-out > div { animation: ttModalPopOut 160ms ease-in forwards; }

/* Content settles in rather than snapping. */
    @keyframes tt-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Anything positioned with its own transform cannot use the translate
       variant: an animation transform replaces the element transform, so the
       panel loses its centring for the length of the fade and snaps back. */
    .entry-panel.tt-fade { animation: tt-fade-plain 240ms ease-out; }

@keyframes tt-fade-plain { from { opacity: 0; } to { opacity: 1; } }

/* Entry panels are centred by their own transform, so they fade on opacity
       only. The panel is the card, so there is no inner element to pop. */
    .entry-panel { animation: tt-fade-plain 200ms ease-out; }

.entry-panel.tt-modal-out { animation: ttModalOut 160ms ease-in forwards; }

.panel-flourish {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 26px 0 2px 0;
      width: 100%;
    }

.panel-flourish-line { height: 1px; flex: 1; }

.panel-flourish-line--l { background: linear-gradient(to left, #c9a84c66, transparent); }

.panel-flourish-line--r { background: linear-gradient(to right, #c9a84c66, transparent); }

.panel-flourish > span {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 4px;
      color: #c9a84c99;
      white-space: nowrap;
    }

.panel-flourish > span > span { color: #ffffff99; }

.entry-panel-bar button {
      background: transparent;
      border: 1px solid #333;
      color: #aaa;
      font-size: 18px;
      line-height: 1;
      width: 34px;
      height: 34px;
      border-radius: 6px;
      cursor: pointer;
    }

.form-group label {
      display: block;
      font-size: 12px;
      color: #888;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

.form-group input {
      width: 100%;
      background: #111;
      border: 1px solid #333;
      border-radius: 6px;
      padding: 12px 16px;
      color: #ffffff;
      font-size: 16px;
      outline: none;
      transition: border-color 0.2s;
    }

.form-group input:focus {
      border-color: #c9a84c;
    }

.btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #e6c877 0%, #c9a84c 42%, #a4832f 100%);
      color: #1a1408;
      border: 1px solid #7c6323;
      border-radius: 6px;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.45);
      transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
    }

.btn:hover {
      filter: brightness(1.08);
    }

/* Button vocabulary. .btn is the base and defaults to gold so the portals'
   bare class="btn" keeps working. Modifiers below fully override fill, border
   and depth, so any combination resolves regardless of class order. */
/* .btn-gold and .btn-primary need no rules: .btn is gold by default, so those
   class names resolve correctly on their own. Listed here so the vocabulary
   reads complete. */

.btn-outline, .btn-secondary {
  background: linear-gradient(135deg, rgba(201,168,76,0.52) 0%, rgba(201,168,76,0.30) 42%, rgba(201,168,76,0.14) 100%);
  color: #f2dfa4;
  border: 1px solid #c9a84cc4;
  box-shadow: inset 0 1px 0 rgba(201,168,76,0.18), 0 1px 3px rgba(0,0,0,0.35);
  text-shadow: none;
}
.btn-outline:hover, .btn-secondary:hover {
  background: linear-gradient(135deg, rgba(201,168,76,0.66) 0%, rgba(201,168,76,0.42) 42%, rgba(201,168,76,0.22) 100%);
  filter: none;
}

.btn-ghost {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 42%, transparent 100%);
  color: #8a8a8a;
  border: 1px solid #2a2a2a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.3);
  text-shadow: none;
}
.btn-ghost:hover { color: #e8e0d0; border-color: #777; filter: none; }

.btn-danger {
  background: linear-gradient(135deg, rgba(255,68,68,0.28) 0%, rgba(255,68,68,0.15) 42%, rgba(255,68,68,0.06) 100%);
  color: #ff8080;
  border: 1px solid #ff444488;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.35);
  text-shadow: none;
}
.btn-danger:hover { background: linear-gradient(135deg, rgba(255,68,68,0.26) 0%, rgba(255,68,68,0.14) 42%, rgba(255,68,68,0.05) 100%); filter: none; }

/* Opaque red. For the one action in a panel that cannot be undone. */
.btn-danger-solid {
  background: linear-gradient(135deg, #e06a6a 0%, #b73333 42%, #7f1d1d 100%);
  color: #fff2f2;
  border: 1px solid #641717;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.45);
  text-shadow: none;
}
.btn-danger-solid:hover { filter: brightness(1.1); }

.btn-blue {
  background: linear-gradient(135deg, #7ab8ff 0%, #4a9eff 42%, #2b6fbf 100%);
  color: #06121f;
  border: 1px solid #245a94;
}
.btn-purple {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 42%, #7429c4 100%);
  color: #ffffff;
  border: 1px solid #5b1f96;
  text-shadow: none;
}

/* Buttons that hardcode the gold fill inline instead of using .btn. Their
   shorthand sets background-image:none, so layering the gradient here reaches
   all of them without touching any markup. Delete this block to revert. */
button[style*="background:#c9a84c;"] {
  background-image: linear-gradient(135deg, #e6c877 0%, #c9a84c 42%, #a4832f 100%) !important;
  border: 1px solid #7c6323 !important;
  box-shadow: inset 0 1px 0 rgba(255, 248, 224, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.3);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
}

button[style*="background:#c9a84c;"]:hover {
  filter: brightness(1.08);
}

button[style*="background:#c9a84c;"]:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Transparent buttons, matched on the border colour they already declare,
   which is where the intent lives: gold reads as outline, grey as ghost, red
   as danger. Buttons with no border are text actions and stay flat.
   Delete this block to revert. */
button[style*="background:transparent"][style*="#c9a84c44"],
button[style*="background:transparent"][style*="#c9a84c33"],
button[style*="background:#c9a84c18"],
button[style*="background:#c9a84c11"],
button[style*="background:#c9a84c22"] {
  background-image: linear-gradient(135deg, #e6c877 0%, #c9a84c 42%, #a4832f 100%) !important;
  color: #1a1408 !important;
  border-color: #7c6323 !important;
  box-shadow: inset 0 1px 0 rgba(201,168,76,0.16), 0 1px 3px rgba(0,0,0,0.35);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
}

button[style*="background:transparent"][style*="#333"],
button[style*="background:transparent"][style*="#444"],
button[style*="background:transparent"][style*="#555"] {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 42%, transparent 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.3);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
}

button[style*="background:transparent"][style*="#ff4444"] {
  background-image: linear-gradient(135deg, rgba(255,68,68,0.22) 0%, rgba(255,68,68,0.12) 42%, rgba(255,68,68,0.04) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 3px rgba(0,0,0,0.35);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
}

/* Blue, green, and red-with-a-fill were never in the vocabulary, so these
   buttons stayed flat wireframes while everything else gained depth. */
button[style*="background:transparent"][style*="#4a9eff"] {
  background-image: linear-gradient(135deg, rgba(74,158,255,0.26) 0%, rgba(74,158,255,0.13) 42%, rgba(74,158,255,0.04) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 3px rgba(0,0,0,0.35);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
}

button[style*="background:transparent"][style*="#4CAF50"] {
  background-image: linear-gradient(135deg, rgba(76,175,80,0.26) 0%, rgba(76,175,80,0.13) 42%, rgba(76,175,80,0.04) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 3px rgba(0,0,0,0.35);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
}

button[style*="background:#ff4444"] {
  background-image: linear-gradient(135deg, rgba(255,68,68,0.30) 0%, rgba(255,68,68,0.16) 42%, rgba(255,68,68,0.05) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.35);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
}
button[style*="background:#ff4444"]:hover { filter: brightness(1.15); }
button[style*="background:#ff4444"]:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.35); }

button[style*="background:transparent"][style*="solid"]:hover { filter: brightness(1.18); }
button[style*="background:transparent"][style*="solid"]:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}

.btn:active {
      transform: translateY(1px);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.35);
    }

.btn-secondary {
      background: linear-gradient(135deg, rgba(201, 168, 76, 0.20) 0%, rgba(201, 168, 76, 0.10) 42%, rgba(201, 168, 76, 0.03) 100%);
      color: #c9a84c;
      border: 1px solid #c9a84c44;
      margin-top: 12px;
      box-shadow: inset 0 1px 0 rgba(201, 168, 76, 0.18), 0 1px 3px rgba(0, 0, 0, 0.35);
      text-shadow: none;
    }

.btn-secondary:hover {
      background: linear-gradient(135deg, rgba(201, 168, 76, 0.30) 0%, rgba(201, 168, 76, 0.16) 42%, rgba(201, 168, 76, 0.06) 100%);
      filter: none;
    }

.dashboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

.dashboard-header h2 {
      margin-bottom: 0;
      font-size: 18px;
      color: #c9a84c;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

.camp-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(to bottom, var(--camp-glow, rgba(201,168,76,0.14)) 0%, var(--camp-glow-soft, rgba(201,168,76,0.06)) 42%, rgba(0,0,0,0.3) 78%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
    z-index: 0;
  }

.camp-panel > * { position: relative; z-index: 1; }



.token-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(135deg,
    var(--item-color, rgba(201,168,76,0.12)) 0px,
    var(--item-mid, rgba(201,168,76,0.05)) 240px,
    rgba(10,10,10,0.90) 560px
  );
  pointer-events: none;
  z-index: 0;
}

.token-item > * {
  position: relative;
  z-index: 1;
}

.metal-panel > * {
    position: relative;
    z-index: 1;
  }

  .tt-swords {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><g transform='translate(0,511) scale(0.1,-0.1)'><path d='M9336.9,4935.4c-208.7-106.5-366.3-342.9-366.3-551.6c0-44.7-121.4-176.8-585.7-641.1l-585.7-585.7l-372.7,372.7c-308.8,308.8-372.7,383.4-372.7,432.4c0,187.4-225.8,308.8-402.6,219.4c-213-110.8-172.5-438.8,59.7-502.7c57.5-14.9,155.5-98,374.8-319.5l298.2-298.2l-176.8-176.8l-174.6-174.7v-285.4v-285.4l283.3,14.9l281.2,14.9l170.4,168.3l170.4,170.4l336.5-336.5c183.2-183.2,334.4-349.3,334.4-366.3c0-57.5,83.1-168.3,151.2-204.5c78.8-40.5,204.5-31.9,283.3,19.2c74.5,49,125.7,174.7,108.6,264.1c-19.2,108.6-129.9,217.2-234.3,234.3c-76.7,10.6-127.8,53.2-475,398.3l-387.6,385.5l590,590c519.7,519.7,600.6,592.1,658.1,592.1c251.3,0,543.1,264.1,592.1,536.7c19.2,110.7-17.1,232.2-93.7,304.6c-55.4,51.1-85.2,63.9-198.1,70.3C9488.1,5001.4,9454.1,4992.9,9336.9,4935.4z M7647.9,2664.9c-34.1-200.2-27.7-191.7-193.8-219.4c-83.1-12.8-153.4-21.3-155.5-19.2c-8.5,8.5,46.9,293.9,57.5,306.7c10.6,8.5,300.3,68.2,308.8,61.8C7669.2,2792.7,7660.7,2735.2,7647.9,2664.9z'/><path d='M244.5,4914.1c-38.3-21.3-85.2-66-106.5-98c-55.4-85.2-49-270.5,10.6-391.9c98-204.5,342.9-383.4,526.1-383.4c83.1,0,100.1-14.9,677.3-592.1l590-590l-368.5-368.5c-285.4-285.4-379.1-366.3-421.7-366.3c-76.7,0-193.8-83.1-238.5-170.4c-66-129.9-10.6-285.4,123.5-349.3c151.2-72.4,304.6-12.8,372.7,142.7c25.6,57.5,147,196,338.6,387.6l300.3,298.2l166.1-166.1l164-164h291.8h289.7l-10.6,272.6l-10.6,270.5l-168.3,170.4l-168.3,170.4l347.2,347.2c189.6,189.6,362.1,345,381.3,345c59.6,0,164,106.5,187.4,191.7c49,178.9-78.8,340.8-272.6,340.8c-80.9,0-106.5-10.6-176.8-83.1c-63.9-63.9-83.1-100.1-83.1-153.3c0-66-38.3-110.7-394-466.4l-394-394L1614,3697.9c-581.5,581.5-581.5,581.5-594.2,688C972.9,4769.2,517.2,5080.2,244.5,4914.1z M2502.2,2696.9l119.3-25.5l23.4-119.3c12.8-66,29.8-136.3,34.1-155.5c6.4-23.4,0-38.3-19.2-38.3c-68.2,0-283.3,51.1-296.1,70.3c-6.4,12.8-19.2,66-27.7,119.3c-6.4,53.2-17,115-23.4,136.3C2299.8,2728.8,2331.8,2731,2502.2,2696.9z'/><path d='M5839.7,1516.9L4955.8,633L4106,1480.7l-847.7,845.6l10.7-270.5l10.6-272.6h-291.8h-289.7l851.9-851.9L4402,79.3L2568.2-1756.7L734.4-3594.7L564-3871.6C385.1-4163.4,189.2-4534,165.7-4632c-6.4-32-4.3-61.8,6.4-70.3c59.6-36.2,647.5,264.1,1024.5,523.9c147,100.1,749.7,692.2,3130.9,3075.5l2949.9,2949.8l-279-12.8l-281.1-14.9l12.8,291.8c4.3,159.7,6.4,289.7,2.1,289.7C6727.8,2400.8,6325.3,2002.5,5839.7,1516.9z'/><path d='M5556.4-534.1l-270.5-270.5L6983.4-2500C8813-4323.1,8700.1-4223,9256-4542.5c232.1-134.2,453.7-234.3,513.3-234.3c76.7,0,10.6,183.2-217.3,592.1c-276.9,498.4-238.5,455.8-2027.6,2247C6604.3-1015.4,5846.1-261.5,5839.7-261.5S5705.5-382.9,5556.4-534.1z'/></g></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><g transform='translate(0,511) scale(0.1,-0.1)'><path d='M9336.9,4935.4c-208.7-106.5-366.3-342.9-366.3-551.6c0-44.7-121.4-176.8-585.7-641.1l-585.7-585.7l-372.7,372.7c-308.8,308.8-372.7,383.4-372.7,432.4c0,187.4-225.8,308.8-402.6,219.4c-213-110.8-172.5-438.8,59.7-502.7c57.5-14.9,155.5-98,374.8-319.5l298.2-298.2l-176.8-176.8l-174.6-174.7v-285.4v-285.4l283.3,14.9l281.2,14.9l170.4,168.3l170.4,170.4l336.5-336.5c183.2-183.2,334.4-349.3,334.4-366.3c0-57.5,83.1-168.3,151.2-204.5c78.8-40.5,204.5-31.9,283.3,19.2c74.5,49,125.7,174.7,108.6,264.1c-19.2,108.6-129.9,217.2-234.3,234.3c-76.7,10.6-127.8,53.2-475,398.3l-387.6,385.5l590,590c519.7,519.7,600.6,592.1,658.1,592.1c251.3,0,543.1,264.1,592.1,536.7c19.2,110.7-17.1,232.2-93.7,304.6c-55.4,51.1-85.2,63.9-198.1,70.3C9488.1,5001.4,9454.1,4992.9,9336.9,4935.4z M7647.9,2664.9c-34.1-200.2-27.7-191.7-193.8-219.4c-83.1-12.8-153.4-21.3-155.5-19.2c-8.5,8.5,46.9,293.9,57.5,306.7c10.6,8.5,300.3,68.2,308.8,61.8C7669.2,2792.7,7660.7,2735.2,7647.9,2664.9z'/><path d='M244.5,4914.1c-38.3-21.3-85.2-66-106.5-98c-55.4-85.2-49-270.5,10.6-391.9c98-204.5,342.9-383.4,526.1-383.4c83.1,0,100.1-14.9,677.3-592.1l590-590l-368.5-368.5c-285.4-285.4-379.1-366.3-421.7-366.3c-76.7,0-193.8-83.1-238.5-170.4c-66-129.9-10.6-285.4,123.5-349.3c151.2-72.4,304.6-12.8,372.7,142.7c25.6,57.5,147,196,338.6,387.6l300.3,298.2l166.1-166.1l164-164h291.8h289.7l-10.6,272.6l-10.6,270.5l-168.3,170.4l-168.3,170.4l347.2,347.2c189.6,189.6,362.1,345,381.3,345c59.6,0,164,106.5,187.4,191.7c49,178.9-78.8,340.8-272.6,340.8c-80.9,0-106.5-10.6-176.8-83.1c-63.9-63.9-83.1-100.1-83.1-153.3c0-66-38.3-110.7-394-466.4l-394-394L1614,3697.9c-581.5,581.5-581.5,581.5-594.2,688C972.9,4769.2,517.2,5080.2,244.5,4914.1z M2502.2,2696.9l119.3-25.5l23.4-119.3c12.8-66,29.8-136.3,34.1-155.5c6.4-23.4,0-38.3-19.2-38.3c-68.2,0-283.3,51.1-296.1,70.3c-6.4,12.8-19.2,66-27.7,119.3c-6.4,53.2-17,115-23.4,136.3C2299.8,2728.8,2331.8,2731,2502.2,2696.9z'/><path d='M5839.7,1516.9L4955.8,633L4106,1480.7l-847.7,845.6l10.7-270.5l10.6-272.6h-291.8h-289.7l851.9-851.9L4402,79.3L2568.2-1756.7L734.4-3594.7L564-3871.6C385.1-4163.4,189.2-4534,165.7-4632c-6.4-32-4.3-61.8,6.4-70.3c59.6-36.2,647.5,264.1,1024.5,523.9c147,100.1,749.7,692.2,3130.9,3075.5l2949.9,2949.8l-279-12.8l-281.1-14.9l12.8,291.8c4.3,159.7,6.4,289.7,2.1,289.7C6727.8,2400.8,6325.3,2002.5,5839.7,1516.9z'/><path d='M5556.4-534.1l-270.5-270.5L6983.4-2500C8813-4323.1,8700.1-4223,9256-4542.5c232.1-134.2,453.7-234.3,513.3-234.3c76.7,0,10.6,183.2-217.3,592.1c-276.9,498.4-238.5,455.8-2027.6,2247C6604.3-1015.4,5846.1-261.5,5839.7-261.5S5705.5-382.9,5556.4-534.1z'/></g></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .tt-charged {
    position: relative;
    overflow: hidden;
  }
  .tt-charged::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg);
    animation: ttChargedShimmer 3.2s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes ttChargedShimmer {
    0%, 100% { left: -60%; }
    55%, 100% { left: 130%; }
  }

  .tt-image {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g transform='translate(-362,-101)'><path d='M392,129 C392,130.104 391.104,131 390,131 L384.832,131 L377.464,123.535 L386,114.999 L392,120.999 L392,129 L392,129 Z M366,131 C364.896,131 364,130.104 364,129 L364,128.061 L371.945,120.945 L382.001,131 L366,131 L366,131 Z M370,105 C372.209,105 374,106.791 374,109 C374,111.209 372.209,113 370,113 C367.791,113 366,111.209 366,109 C366,106.791 367.791,105 370,105 L370,105 Z M390,101 L366,101 C363.791,101 362,102.791 362,105 L362,129 C362,131.209 363.791,133 366,133 L390,133 C392.209,133 394,131.209 394,129 L394,105 C394,102.791 392.209,101 390,101 L390,101 Z M370,111 C371.104,111 372,110.104 372,109 C372,107.896 371.104,107 370,107 C368.896,107 368,107.896 368,109 C368,110.104 368.896,111 370,111 L370,111 Z'/></g></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g transform='translate(-362,-101)'><path d='M392,129 C392,130.104 391.104,131 390,131 L384.832,131 L377.464,123.535 L386,114.999 L392,120.999 L392,129 L392,129 Z M366,131 C364.896,131 364,130.104 364,129 L364,128.061 L371.945,120.945 L382.001,131 L366,131 L366,131 Z M370,105 C372.209,105 374,106.791 374,109 C374,111.209 372.209,113 370,113 C367.791,113 366,111.209 366,109 C366,106.791 367.791,105 370,105 L370,105 Z M390,101 L366,101 C363.791,101 362,102.791 362,105 L362,129 C362,131.209 363.791,133 366,133 L390,133 C392.209,133 394,131.209 394,129 L394,105 C394,102.791 392.209,101 390,101 L390,101 Z M370,111 C371.104,111 372,110.104 372,109 C372,107.896 371.104,107 370,107 C368.896,107 368,107.896 368,109 C368,110.104 368.896,111 370,111 L370,111 Z'/></g></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

/* Chevron bookend for collapsible cards. Lifted from player.html's sheet
   sections so both portals share one definition. */
   .tt-caret {
    display: flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; flex-shrink: 0;
    color: #c9a84c99; font-size: 0; line-height: 1;
    transition: transform 220ms cubic-bezier(.4,0,.2,1), color 200ms ease;
  }
  .tt-caret::after {
    content: ''; display: block; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); margin-left: -2px;
  }
  .tt-caret.is-open { transform: rotate(90deg); color: #c9a84c; }

/* Panel surfaces. These were duplicated in both portals; the ::after and > *
   halves already lived here, so the base rules belong here too. */
   .camp-panel {
    background: linear-gradient(160deg, #1a1a1a, #111, #0d0d0d) !important;
    position: relative;
    overflow: hidden;
  }
  
  .metal-panel {
    background: repeating-linear-gradient(145deg, #2b2b2b 0px, #343434 240px, #2b2b2b 480px);
    border: 2px solid #c9a84c55;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
  }
  .metal-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background-image: repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 2px,
      rgba(180,180,180,0.035) 2px,
      rgba(180,180,180,0.035) 4px
    );
    pointer-events: none;
    z-index: 0;
  }

  /* Attuned items carry a slow sweep. Same geometry as .tt-charged but longer
   and dimmer: this is a persistent state, not a call to action. */
/* Attuned items carry a soft inner glow rather than a sweep. A moving
   highlight reads as loading; a steady glow reads as a state. Uses box-shadow
   and border, so it never competes with .token-item::after for the gradient. */
   .tt-attuned::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 26px rgba(201,168,76,0.30);
    pointer-events: none;
    z-index: 2;
  }

/* ── Section divider ───────────────────────────────────────────
   Ten lines of identical SVG markup appeared six times across two
   files, and they had already drifted: the player portal's copies
   had the wordmark colours inverted. One rule, one truth. */
.tt-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.tt-divider::before,
.tt-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}
.tt-divider::before { background: linear-gradient(to right, transparent, #c9a84c66); }
.tt-divider::after  { background: linear-gradient(to left,  transparent, #c9a84c66); }
.tt-divider-mark {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #888;
  font-family: Georgia, serif;
}
.tt-divider-mark svg { flex-shrink: 0; }
/* TokenTap white, 5e gold. Canonical across landing, index and coin. */
.tt-divider-mark .tt-5e { color: #c9a84c88; }