:root{
      --paper:#f3e6c7;
      --paper2:#efe0bc;
      --ink:#2a2318;
      --ink2:#5b4a33;
      --leather:#24140e;
      --leather2:#160c08;
      --gold:#c9a24a;

      --uiText:#f2e8d1;
      --uiStroke:#ffffff18;

      /* layout */
      --shellPad: 14px;
      --pagePad: 14px;
      --pageGap: 10px;

      /* compact stamps */
      --slotMin: 140px;   /* tile width */
      --imgRadius: 5px;
      --tileRadius: 14px;

      /* parallax */
      --mx: 0px;
      --my: 0px;

      --cover-title-offset: -50px;
      --cover-image-offset: -20px;
    }

    html, body { height: 100%; }
    body{
      margin: 0;
      background: radial-gradient(1200px 600px at 50% 15%, #1c1410 0%, #0b0a0a 60%, #050505 100%);
      color: var(--ink);
      font-family: "EB Garamond", serif;
      overflow: hidden;
    }

    /* ====== TOP BAR ====== */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--uiStroke);
      background: linear-gradient(180deg, rgba(10,10,10,.92), rgba(10,10,10,.70));
      backdrop-filter: blur(10px);
    }
    .muted{
      color: #cfc7b4;
      opacity: .9;
      font-size: 12px;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
    }
    .actions{
      display:flex;
      align-items:center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .btn-neo{
      border: 1px solid #ffffff20;
      background: #0b0d12;
      color: #f5f1e6;
      border-radius: 12px;
      padding: 8px 10px;
      font-size: 13px;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
      transition: transform .08s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
      cursor: pointer;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      user-select:none;
    }
    .btn-neo:hover{ transform: translateY(-1px); border-color:#ffffff3a; }
    .btn-neo:active{ transform: translateY(0px) scale(.99); }
    .btn-neo[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
    #btn-sort,
    #btn-reset{
      display: none !important;
    }
    .btn-accent{ background:#1a0f18; border-color:#bc397a55; }
    .btn-accent:hover{ border-color:#bc397aaa; }

    .btn-accent-green{ background:#1a0f18; border-color:#bc397a55; color:#ffd7ea; }
    .btn-accent-green:hover{ background:#101a0f; border-color:#52a15a; color:#d7ffd6; }

    .btn-accent-green-2{ background:#1a0f18; border-color:#52a15a; }
    .btn-accent-green-2:hover{ background:#101a0f; border-color:#52a15a; color:#d7ffd6; }

    /* ====== MAIN WRAP ====== */
    .stage{
      height: calc(100vh - 50px);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 10px;
      box-sizing: border-box;
    }

    /* ====== ALBUM SHELL ====== */
    .album-shell{
      width: min(1220px, calc(100vw - 20px));
      height: min(840px, calc(100vh - 76px));
      padding: var(--shellPad);
      border-radius: 22px;
      background: radial-gradient(800px 420px at 30% 20%, #3a2318 0%, var(--leather) 55%, var(--leather2) 100%);
      border: 1px solid #ffffff12;
      box-shadow: 0 30px 80px #000000aa, inset 0 0 0 2px #00000055;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
    }
    .album-shell::before{
      content:"STAMPS ALBUM";
      position:absolute;
      top: 12px;
      left: 16px;
      font-family: "Cinzel", serif;
      letter-spacing: .18em;
      font-size: 12px;
      color: #d8b45a;
      text-shadow: 0 1px 0 #000, 0 -1px 0 #ffffff12;
      opacity:.95;
      pointer-events:none;
      z-index: 3;
    }

    .paperfx{
      position: relative;
      background-image:
        linear-gradient(135deg, rgba(231,211,168,1), rgba(238,224,191,1)),
        url("../img/paper_noise_texture.png");
      background-repeat: no-repeat, repeat;
      background-size: cover, 320px 320px;
      background-blend-mode: normal, soft-light;
    }

    /* ====== SPREAD ====== */
    .spread{
      height: 97%;
      display:grid;
      grid-template-columns: 1fr 26px 1fr;
      gap: 0;
      margin-top: 22px;
      align-items: stretch;
      position: relative;
      z-index: 2;
      overflow: visible;
    }
    .spine{
      background: linear-gradient(90deg, #00000055 0%, #00000022 25%, #ffffff10 50%, #00000022 75%, #00000055 100%);
      border-radius: 16px;
      box-shadow: inset 0 0 18px #00000055;
    }

    @media (max-width: 980px){
      body{ overflow:auto; }
      .stage{ height:auto; align-items:flex-start; }
      .album-shell{ height:auto; }
      .spread{ grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
      .spine{ display:none; }
      .binder{ display:none !important; }
    }

    /* paper edges */
    .spread::after{
      content:"";
      position:absolute;
      top: 8px;
      left: -4px;
      width: 580px;
      bottom: -5px;
      background: repeating-linear-gradient(to left, #f1e6cf 0px, #f1e6cf 2px, #e6d9bd 3px, #f1e6cf 4px);
      border-radius: 22px 0 22px 22px;
      box-shadow: -4px 0 8px rgba(0,0,0,.2);
      z-index:-1;
    }
    .spread::before{
      content:"";
      position:absolute;
      top: 8px;
      right: -7px;
      width: 580px;
      bottom: -5px;
      background: repeating-linear-gradient(to right, #f1e6cf 0px, #f1e6cf 2px, #e6d9bd 3px, #f1e6cf 4px);
      border-radius: 0 22px 22px 22px;
      box-shadow: 4px 0 8px rgba(0,0,0,.2);
      z-index:-1;
    }

    /* ====== PAGE ====== */
    .page{
      position: relative;
      overflow:hidden;
      border-radius: 18px;
      border: 1px solid #00000025;
      background: linear-gradient(160deg, rgba(231,211,168,1) 0%, rgba(238,224,191,1) 70%, rgba(245,235,210,1) 100%), url("../img/album_bg.png");
      background-repeat: repeat;
      background-blend-mode: soft-light;
      box-shadow: 0 16px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.25);
      padding: var(--pagePad);
      box-sizing: border-box;
    }
    .page .paper-layer{
      position:absolute; inset:-30px;
      pointer-events:none;
      transform: translate3d(var(--mx), var(--my), 0);
      transition: transform 80ms linear;
      background:
        radial-gradient(520px 260px at 10% 10%, rgba(255,255,255,.35), transparent 60%),
        radial-gradient(1000px 700px at 70% 40%, rgba(0,0,0,.06), transparent 55%),
        radial-gradient(1200px 500px at 50% 105%, rgba(0,0,0,.12), transparent 60%),
        radial-gradient(120px 90px at 22% 38%, rgba(140,90,40,.07), transparent 60%),
        radial-gradient(160px 120px at 78% 22%, rgba(90,60,30,.05), transparent 62%),
        radial-gradient(140px 110px at 68% 72%, rgba(70,50,30,.05), transparent 62%);
      mix-blend-mode: multiply;
      opacity: .9;
      filter: blur(.2px);
    }

    .page-inner{
      position: relative;
      z-index: 2;
      height: 100%;
      display:flex;
      flex-direction: column;
      gap: 10px;
    }

    .page-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 10px;
      border-bottom: 1px solid rgba(0,0,0,.18);
      padding-bottom: 8px;
      flex: 0 0 auto;
    }
    .page-title{
      font-family:"Cinzel", serif;
      font-size: 13px;
      letter-spacing:.10em;
      color: var(--ink);
      margin: 0;
      text-transform: uppercase;
      user-select:none;
    }
    .page-sub{
      font-family: "Caveat", cursive;
      font-size: 18px;
      color: var(--ink2);
      margin: 0;
      opacity: .95;
      white-space: nowrap;
      user-select:none;
    }

    /* ====== GRID ====== */
    .paper-grid{
      flex: 1 1 auto;
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--slotMin), 1fr));
      gap: var(--pageGap);
      align-content: start;
      overflow: hidden;
      padding-right: 2px;
    }

    /* ====== TILE ====== */
    .slot{
      border-radius: var(--tileRadius);
      border: 1px solid rgba(0,0,0,.20);
      background: rgba(240,220,170,.45);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
      padding: 8px;
      position: relative;
      user-select:none;
      touch-action: manipulation;
      display:flex;
      flex-direction: column;
      gap: 6px;
      min-height: 0;
      cursor: grab;
    }
    .slot:active{ cursor: grabbing; }

    .slot::before, .slot::after{
      content:"";
      position:absolute;
      width: 14px; height: 14px;
      background: rgba(0,0,0,.10);
      clip-path: polygon(0 0, 100% 0, 0 100%);
      opacity:.45;
      pointer-events:none;
    }
    .slot::before{ top: 7px; left: 7px; }
    .slot::after{ bottom: 7px; right: 7px; transform: rotate(180deg); }

    /* drag preview helpers */
    .slot.drag-hidden { display: none !important; }
    .slot.drag-placeholder {
      pointer-events: none;
      opacity: 0.25;
      border: 1px dashed rgba(255,255,255,.25);
      background: rgba(255,255,255,.03);
    }
    .slot.drag-placeholder .stamp-img,
    .slot.drag-placeholder .meta-row { visibility: hidden; }

    .stamp-img{
      border-radius: var(--imgRadius);
      overflow:hidden;
      background: #eee2c5;
      border: 1px solid rgba(36,36,36,1.0);
      box-shadow: 0 8px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.20);
      aspect-ratio: 1 / 1;
      position: relative;
    }
    .stamp-img img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      filter: saturate(.96) contrast(1.04);
      transform: scale(1.01);
    }
    .center-trait{
      position: absolute;
      top: 6px;
      left: 6px;
      padding: 2px 6px;
      border-radius: 10px;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(0,0,0,.2);
      font-family: "Caveat", cursive;
      font-size: 14px;
      color: rgba(0,0,0,.82);
      line-height: 1.1;
      box-shadow: 0 6px 12px rgba(0,0,0,.18);
      pointer-events: none;
      display: none;
    }

    .meta-row{
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      flex-wrap: nowrap;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      padding: 3px 7px;
      border-radius: 10px;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
      font-size: 12px;
      color: rgba(0,0,0,.78);
      white-space: nowrap;
    }
    .pill strong{
      font-family: "Caveat", cursive;
      font-size: 16px;
      font-weight: 500;
      margin-left: 2px;
      color: rgba(0,0,0,.82);
    }
    .pill-2{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      padding: 3px 7px;
      border-radius: 10px;
      border: 1px solid rgba(0,0,0,.18);
      background: rgba(255,255,255,.22);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
      font-size: 12px;
      color: rgba(0,0,0,.78);
      white-space: nowrap;
      text-decoration:none;
    }

    /* ====== PAGE FOOTER / NAV ====== */
    .pager{
      flex: 0 0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding-top: 8px;
      border-top: 1px dashed rgba(0,0,0,.20);
      user-select:none;
    }
    .pbtn{
      border: 1px solid rgba(0,0,0,.18);
      background: rgba(255,255,255,.22);
      border-radius: 999px;
      padding: 8px 10px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      color: rgba(0,0,0,.78);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
      font-size: 13px;
      transition: transform .08s ease, filter .15s ease, opacity .15s ease;
    }
    .pbtn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
    .pbtn:active{ transform: translateY(0px) scale(.99); }
    .pbtn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

    .page-ind{
      font-family:"Caveat", cursive;
      font-size: 20px;
      color: rgba(0,0,0,.82);
      white-space: nowrap;
    }

    /* ====== Collected overlay ====== */
    .collected{
      position:absolute;
      left: 8px;
      top: 8px;
      transform: rotate(-12deg);
      padding: 6px 10px;
      border: 2px solid rgba(188,57,122,.70);
      color: rgba(188,57,122,.95);
      background: rgba(255,255,255,.55);
      border-radius: 10px;
      font-family:"Cinzel", serif;
      font-size: 11px;
      letter-spacing:.12em;
      text-transform: uppercase;
      box-shadow: 0 10px 18px rgba(0,0,0,.18);
      opacity: 0;
      pointer-events:none;
    }
    .collected.show{ animation: stampIn 900ms ease-out forwards; }
    @keyframes stampIn{
      0%   { opacity: 0; transform: rotate(-18deg) scale(1.12); filter: blur(.4px); }
      35%  { opacity: 1; transform: rotate(-12deg) scale(1.00); filter: blur(0px); }
      100% { opacity: .95; transform: rotate(-12deg) scale(1.00); }
    }

    /* ====== Drag feedback ====== */
    .sortable-ghost{ opacity: .35; border-color: rgba(0,0,0,.40) !important; }
    .sortable-chosen{
      transform: scale(1.02) rotate(.3deg);
      box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 2px rgba(188,57,122,.25);
      cursor: grabbing !important;
    }

    /* ====== Toast ====== */
    .toast{
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      background: rgba(10,10,10,.82);
      border: 1px solid #ffffff18;
      color: #f2e8d1;
      padding: 10px 12px;
      border-radius: 14px;
      box-shadow: 0 14px 50px rgba(0,0,0,.55);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
      font-size: 13px;
      display:none;
      z-index: 200;
      max-width: calc(100% - 24px);
    }
    .toast.show{ display:block; }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; }
      .page .paper-layer{ transition:none !important; }
    }

    /* ====== Closed album cover ====== */
    .album-cover{
      width: min(610px, calc(100vw - 20px));
      height: min(840px, calc(100vh - 76px));
      border-radius: 22px;
      background: radial-gradient(800px 420px at 30% 20%, #3a2318 0%, var(--leather) 55%, var(--leather2) 100%);
      border: 1px solid #ffffff12;
      box-shadow: 0 30px 80px #000000aa, inset 0 0 0 2px #00000055;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .cover-inner{
      text-align: center;
      color: #f2e8d1;
      user-select: none;
    }
    .cover-title{
      font-family: "Cinzel", serif;
      font-size: 42px;
      letter-spacing: .2em;
      line-height: 1.2;
      color: #d8b45a;
      text-shadow: 0 2px 0 #000, 0 0 25px #000000aa;
      margin-bottom: 14px;
      transform: translateY(var(--cover-title-offset));
    }
    .cover-sub{
      font-size: 12px;
      letter-spacing: .1em;
      opacity: .8;
      margin-bottom: 20px;
    }
    .cover-version{
      margin-top: 18px;
      font-size: 12px;
      letter-spacing: .12em;
      opacity: .7;
    }
    .cover-image{
      width: 300px;
      max-width: 60%;
      margin-bottom: 24px;
      transform: translateY(var(--cover-image-offset));
      filter: drop-shadow(0 6px 12px #0008);
      user-select: none;
      pointer-events: none;
    }
    #cover-connect .unlock { display: none; }
    #cover-connect:hover .lock { display: none; }
    #cover-connect:hover .unlock { display: inline-block; }

    /* ====== Context Move Menu ====== */
    .move-menu{
      position: fixed;
      inset: 0;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding-top: 86px;
      z-index: 600;
    }
    .move-menu.show{ display:flex; }
    .move-backdrop{
      position:absolute;
      inset:0;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(2px);
    }
    .move-card{
      position: relative;
      z-index: 2;
      width: min(720px, calc(100vw - 24px));
      max-height: min(520px, calc(100vh - 120px));
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid #ffffff1c;
      background: rgba(10,10,10,.84);
      box-shadow: 0 22px 70px rgba(0,0,0,.6);
      color: var(--uiText);
      display:flex;
      flex-direction: column;
    }
    .move-head{
      padding: 12px 14px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid #ffffff18;
    }
    .move-head h3{
      margin:0;
      font-family: "Cinzel", serif;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #f2e8d1;
    }
    .move-close{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid #ffffff20;
      background: rgba(255,255,255,.06);
      color: #f2e8d1;
      cursor: pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition: transform .08s ease, border-color .15s ease, background .15s ease;
      user-select:none;
    }
    .move-close:hover{ transform: translateY(-1px); border-color:#ffffff3a; }
    .move-close:active{ transform: translateY(0px) scale(.99); }

    .move-body{ padding: 12px 14px 14px; overflow:auto; }
    .move-grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
      gap: 8px;
    }
    .move-btn{
      height: 40px;
      border-radius: 14px;
      border: 1px solid #ffffff1e;
      background: rgba(255,255,255,.08);
      color: #f2e8d1;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
      font-size: 13px;
      cursor:pointer;
      transition: transform .08s ease, border-color .15s ease, filter .15s ease;
      user-select:none;
    }
    .move-btn:hover{ transform: translateY(-1px); border-color:#ffffff3a; filter: brightness(1.08); }
    .move-btn:active{ transform: translateY(0px) scale(.99); }
    .move-btn.current{
      border-color: rgba(201,162,74,.60);
      color: rgba(255,238,198,.98);
      box-shadow: 0 0 0 2px rgba(201,162,74,.18);
    }
    .move-hint{
      margin: 10px 0 0;
      font-size: 12px;
      color: rgba(242,232,209,.82);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
      line-height: 1.3;
    }

    /* ====== Notes ====== */
    .note{
      position: relative;
      z-index: 2;
      margin-top: 12px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,.20);
      background: rgba(255,255,255,.16);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
      width: min(520px, calc(100vw - 20px));
    }
    .note h3{
      font-family:"Cinzel", serif;
      font-size: 13px;
      letter-spacing:.10em;
      margin: 0 0 6px;
      text-transform: uppercase;
    }
    .note p{
      margin: 0;
      color: rgba(0,0,0,.75);
      font-size: 14px;
      line-height: 1.25;
    }
    .kv{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 8px 10px;
      margin-top: 10px;
      font-size: 14px;
    }
    .kv div{
      padding: 6px 8px;
      border-radius: 10px;
      border: 1px solid rgba(0,0,0,.15);
      background: rgba(255,255,255,.14);
    }
    .kv .k{ color: rgba(0,0,0,.65); }
    .kv .v{ font-family: "Caveat", cursive; font-size: 18px; color: rgba(0,0,0,.80); text-align:right; }

    .note-image{
      width: 170px;
      display: block;
      border-radius: 14px;
      padding: 8px;
      filter: contrast(.92);
    }

    .note-image-wrap{
      position: relative;
      display: inline-block;
    }
    .img-wrap{
      position: relative;
      display: inline-block;
    }
    .addmore-slot{
      display: grid;
      grid-template-rows: auto auto;
      justify-items: start;
    }
    .addmore-slot .note-image{
      grid-row: 1;
      grid-column: 1;
    }
    .addmore-slot .img-plus{
      grid-row: 1;
      grid-column: 1;
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      justify-self: center;
      align-self: center;
    }
    .addmore-slot .addmore_p{
      grid-row: 2;
      grid-column: 1;
    }
    .img-plus{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 57px;
      height: 57px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50px;
      color: #d8b45a;
      background: rgba(0,0,0,0.5);
      border-radius: 50%;
      pointer-events: none;
      text-shadow: 0 0 6px #000;
      transition: transform .2s ease, opacity .2s ease;
    }
    .note-link{
      display: inline-block;
      cursor: pointer;
    }
    .note-link .slot{
      border-color: rgba(0,0,0,.18);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 18px rgba(0,0,0,.12);
    }
    .note-link:hover .img-plus{
      opacity: 1;
      transform: scale(1.12);
    }
    .addmore{
      margin: 0;
      color: rgba(0,0,0,.75);
      font-size: 14px;
      line-height: 1.25;
      margin-left: 60px;
    }
    .addmore_p{
      font-family: "Caveat", cursive;
      font-size: 18px;
      font-weight: 500;
      margin-left: 28px;
      color: rgba(0,0,0,.82);
    }
    .note-link,
    .note-link .img-wrap,
    .note-link .note-image{
      cursor: pointer !important;
    }

    /* ====== Binder rings ====== */
    .album-shell{ position: relative; }
    .binder{
      position: absolute;
      top: 8%;
      bottom: 8%;
      left: 50%;
      transform: translateX(-50%);
      width: 46px;
      pointer-events: none;
      z-index: 40;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
    .binder::before{
      content:"";
      position:absolute;
      top: -2%;
      bottom: -2%;
      left: 50%;
      width: 14px;
      transform: translateX(-50%);
      border-radius: 10px;
      background: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(255,255,255,.55) 18%, rgba(210,210,210,.95) 45%, rgba(120,120,120,.85) 62%, rgba(255,255,255,.35) 78%, rgba(0,0,0,.25) 100%);
      box-shadow: 0 10px 18px rgba(0,0,0,.25), inset 0 2px 5px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.35);
    }
    .ring{
      position: relative;
      width: 52px;
      height: 10px;
      z-index: 1;
    }
    .ring::before{
      content:"";
      position:absolute;
      inset: 0;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(210,210,210,.95) 45%, rgba(120,120,120,.9) 70%, rgba(255,255,255,.35));
      box-shadow: 0 3px 6px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.35);
      -webkit-mask: radial-gradient(circle at 50% 55%, transparent 52%, #000 54%);
              mask: radial-gradient(circle at 50% 55%, transparent 52%, #000 54%);
    }
    .ring::after{
      content:"";
      position:absolute;
      left: 50%;
      top: 50%;
      width: 55px;
      height: 14px;
      transform: translate(-50%,-50%);
      border-radius: 999px;
      background:
        radial-gradient(circle at 18% 50%, rgba(0,0,0,.55) 0 35%, rgba(0,0,0,0) 38%),
        radial-gradient(circle at 82% 50%, rgba(0,0,0,.55) 0 35%, rgba(0,0,0,0) 38%);
      filter: blur(.1px);
      opacity: .55;
    }
    .ring:nth-child(2), .ring:nth-child(3){ transform: scaleX(1.02); }

    /* ====== Achievements (traits) ====== */
    .ach{
      width: 100%;
      height: 100%;
      overflow: hidden;
      display:flex;
      flex-direction: column;
      gap: 10px;
    }
    .ach-top{
      display:flex;
      flex-direction: column;
      gap: 8px;
      padding: 3px 2px 0;
    }
    .ach-title{
      font-family: "Cinzel", serif;
      font-size: 14px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(40,30,20,.82);
    }
    .ach-filter{
      width: 100%;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.35);
      padding: 9px 10px;
      font-size: 13px;
      outline: none;
    }
    .ach-filter:focus{
      border-color: rgba(188,57,122,.35);
      box-shadow: 0 0 0 2px rgba(188,57,122,.18);
    }
    .ach-refresh{
      align-self: flex-start;
      padding: 7px 10px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.28);
      cursor:pointer;
      font-size: 12px;
    }
    .ach-refresh:hover{ filter: brightness(1.05); }
    .ach-list{
      overflow:auto;
      padding-right: 2px;
      scrollbar-width: thin;
    }
    .ach-loading{
      font-size: 13px;
      opacity: .7;
      padding: 10px 2px;
    }
    .ach-cat{
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 14px;
      background: rgba(255,255,255,.20);
      margin: 8px 0;
      overflow:hidden;
    }
    .ach-cat > summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 10px;
    }
    .ach-cat > summary::-webkit-details-marker{ display:none; }
    .ach-cat-name{
      font-weight: 700;
      font-size: 13px;
    }
    .ach-badge{
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.06);
      opacity: .85;
    }
    .ach-items{
      padding: 6px 10px 10px;
      display:flex;
      flex-direction: column;
      gap: 6px;
    }
    .ach-item{
      display:flex;
      align-items:center;
      gap: 10px;
      font-size: 12.5px;
      padding: 6px 8px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.06);
      background: rgba(255,255,255,.16);
      color: inherit;
      text-decoration: none;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .ach-item.have{
      border-color: rgba(80,150,90,.22);
      background: rgba(80,150,90,.10);
    }
    .ach-item:hover,
    .ach-item:focus-visible{
      border-color: rgba(30,90,180,.35);
      background: rgba(120,160,220,.18);
      box-shadow: 0 4px 10px rgba(0,0,0,.08);
      transform: translateY(-1px);
    }
    .ach-count{
      font-variant-numeric: tabular-nums;
      opacity: .75;
    }

    /* ====== Achievements: full-page (no dropdown / no inner scroll) ====== */
    .ach-list{
      overflow: visible !important;
      max-height: none !important;
    }
    .ach-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 10px;
    }
    .ach-section{
      border: 1px solid #00000014;
      background: rgba(255,255,255,.18);
      border-radius: 12px;
      padding: 10px 10px 8px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    }
    .ach-section h4{
      margin: 0 0 8px;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .85;
      display:flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }
    .ach-items{
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
    }
    @media (min-width: 900px){
      .ach-items{ grid-template-columns: 1fr 1fr; }
    }
    .ach-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 6px 8px;
      border-radius: 10px;
      border: 1px solid #00000010;
      background: rgba(255,255,255,.14);
      color: inherit;
      text-decoration: none;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .ach-item.have{
      border-color: rgba(60,140,90,.28);
      background: rgba(90,180,120,.12);
    }
    .ach-item:hover,
    .ach-item:focus-visible{
      border-color: rgba(30,90,180,.35);
      background: rgba(120,160,220,.18);
      box-shadow: 0 4px 10px rgba(0,0,0,.08);
      transform: translateY(-1px);
    }
    .ach-val{
      font-size: 12px;
      line-height: 1.2;
    }

    /* ====== Notes mode (grid -> normal flow) ====== */
    .page-grid.notes-mode{ display:block !important; }
    .page-grid.notes-mode > *{ margin-bottom: 10px; }

    /* Ensure achievements list has no internal scroll/clipping */
    #page-left .ach-list{
      overflow: visible !important;
      max-height: none !important;
    }
    #page-left .ach-grid{
      width: 100%;
      grid-template-columns: 1fr 1fr;
    }

    /* ====== Dedicated Achievements page layout (not stamp grid) ====== */
    .ach-page{
      height: 100%;
      overflow: auto;
      padding: 4px 4px 0;
    }
    .ach-page .ach-top{
      display:flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 1px;
    }
    .ach-page .ach-title{
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      opacity: .9;
    }
    .ach-page .ach-sub{
      font-size: 12px;
      opacity: .7;
      line-height: 1.35;
    }
    .ach-page .ach-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items:start;
    }
    .ach-page .ach-section{
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.14);
      border-radius: 12px;
      padding: 10px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    }
    .ach-page .ach-section h4{
      margin: 0 0 8px;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      opacity: .85;
      display:flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }
    .ach-page .ach-items{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px 8px;
    }
    .ach-page .ach-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 6px 8px;
      border-radius: 10px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.10);
      color: inherit;
      text-decoration: none;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .ach-page .ach-item.have{
      border-color: rgba(60,140,90,.28);
      background: rgba(90,180,120,.12);
    }
    .ach-page .ach-item:hover,
    .ach-page .ach-item:focus-visible{
      border-color: rgba(30,90,180,.35);
      background: rgba(120,160,220,.18);
      box-shadow: 0 4px 10px rgba(0,0,0,.08);
      transform: translateY(-1px);
    }
    .ach-page .ach-val{
      font-size: 12px;
      line-height: 1.15;
    }