:root{
      --bg:#0f1220;
      --panel:rgba(255,255,255,.08);
      --line:rgba(255,255,255,.14);
      --text:#fff;
      --muted:rgba(255,255,255,.72);
      --good:#9fffa8;
      --warn:#ffd38a;
      --bad:#ff9aa5;
      --btn:rgba(255,255,255,.12);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius:14px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

      --tile:112px;
      --thumbPad:4px;
      --gap:10px;

      --shelfPad:10px;
      --cardAR: 3 / 4;

      --woodA:#6b4a2d;
      --woodB:#4b2f1a;
      --woodC:#7a5736;
      --woodD:#3a2414;

      --shrineLine: rgba(180,255,240,.35);
      --shrineGlow: rgba(0,255,204,.22);
      --shrineGlow2: rgba(64,160,255,.16);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 50% 20%, #1a2040 0%, #070812 60%),
        linear-gradient(#07060b,#0c0b12);
      min-height:100svh;
    }
    body.noscroll{ overflow:hidden; touch-action:none; }

    .mono{font-family:var(--mono)}
    .wrap{max-width:980px;margin:0 auto;padding:14px 12px 140px}

    .btn{
      appearance:none;
      border:1px solid var(--line);
      background:var(--btn);
      color:var(--text);
      padding:10px 12px;
      border-radius:12px;
      cursor:pointer;
      font-weight:900;
      white-space:nowrap;
      -webkit-tap-highlight-color: transparent;
      min-width:0;
    }
    .btn:active{transform:translateY(1px)}
    .btn.warn{background:linear-gradient(180deg, rgba(255,211,138,.18), rgba(255,255,255,.10));}
    .btn.ghost{background:transparent}
    .btn[disabled]{opacity:.55;cursor:not-allowed}

    .header{
      position:sticky; top:0; z-index:20;
      background:linear-gradient(to bottom, rgba(15,18,32,.95), rgba(15,18,32,.55));
      backdrop-filter: blur(6px);
      border-bottom:1px solid var(--line);
    }
    .head-inner{
      max-width:980px;margin:0 auto;padding:10px 12px;
      display:flex;align-items:center;gap:10px;
    }
    .back{
      width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
      background:var(--btn); color:var(--text); font-size:18px; cursor:pointer;
      -webkit-tap-highlight-color: transparent;
      flex:0 0 auto;
    }
    .titlebox{flex:1;min-width:0}
    .title{font-size:16px;font-weight:950;letter-spacing:.02em}
    .top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}

    .card{
      border:1px solid var(--line);
      background:var(--panel);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card-h{
      padding:12px 12px 10px;
      border-bottom:1px solid var(--line);
      display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
    }
    .card-title{font-weight:950;font-size:14px}
    .card-desc{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}
    .card-b{padding:12px}

    .stats{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap:8px;
      margin-bottom:12px;
    }
    @media (max-width: 680px){
      .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    .stat{
      border:1px solid var(--line);
      background:rgba(0,0,0,.14);
      border-radius:12px;
      padding:8px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      min-width:0;
    }
    .stat .k{font-size:11px;color:var(--muted);white-space:nowrap}
    .stat .v{
      font-size:14px;
      font-weight:950;
      display:flex;
      align-items:baseline;
      gap:6px;
      white-space:nowrap;
      min-width:0;
    }
    .stat .v small{font-size:11px;color:var(--muted);font-weight:800}
    .good{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)}

    .repstat{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      width:100%;
    }
    .rep-left{
      min-width:0;
      flex:1;
    }
    .repcheck-btn{
      appearance:none;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
      color:var(--text);
      padding:7px 10px;
      border-radius:10px;
      font-size:12px;
      font-weight:900;
      cursor:pointer;
      white-space:nowrap;
      flex:0 0 auto;
    }

    .stage-card{margin-bottom:12px}
    .stage{
      position:relative;
      width:100%;
      max-width:980px;
      border-radius:14px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.18);
    }
    .stage-media{
      position:relative;
      width:100%;
      aspect-ratio: 16 / 9;
      background: rgba(0,0,0,.22);
      border-bottom:1px solid rgba(255,255,255,.12);
      overflow:hidden;
    }
    @media (max-width: 520px){
      .stage-media{ aspect-ratio: 16 / 10; }
    }
    .stage-bg{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:contain; object-position:center;
      image-rendering:pixelated;
      display:block;
      background: rgba(0,0,0,.22);
    }
    .stage-visitor{
      position:absolute;
      left:50%;
      bottom:51px;
      height:150px;
      image-rendering: pixelated;
      pointer-events:none;
      opacity:0;
      transform:translateX(-50%) translateY(8px);
      transition: opacity .45s ease, transform .45s ease;
      will-change: opacity, transform;
      filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
    }
    .stage-visitor.show{opacity:1;transform:translateX(-50%) translateY(0)}
    .stage-overlay{
      position:absolute;
      right:10px;
      top:10px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
      pointer-events:none;
      z-index:5;
    }
    .stage-overlay .tag{
      border:1px solid rgba(255,255,255,.22);
      background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78));
      border-radius:999px;
      padding:7px 10px;
      font-size:12px;
      color:rgba(255,255,255,.92);
      white-space:nowrap;
      box-shadow: 0 12px 30px rgba(0,0,0,.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      text-shadow: 0 2px 0 rgba(0,0,0,.35);
    }
    .stage-ui{
      position:relative;
      display:flex;
      align-items:flex-start;
      justify-content:flex-start;
      gap:10px;
      padding:12px;
      pointer-events:auto;
      background: transparent;
    }
    .bubble{
      width:100%;
      border:1px solid rgba(120,255,235,.38);
      background:
        radial-gradient(circle at 18% 20%, rgba(0,255,204,.20), rgba(0,0,0,0) 52%),
        radial-gradient(circle at 82% 30%, rgba(64,160,255,.16), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(0,170,160,.18), rgba(0,0,0,.62));
      border-radius:14px;
      padding:12px 14px;
      line-height:1.35;
      box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 0 34px rgba(0,255,204,.18);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      min-width:0;
    }
    .bubble-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .bubble-left{
      min-width:0;
      flex:1;
    }
    .bubble .n{font-weight:950;font-size:16px;letter-spacing:.02em;text-shadow: 0 2px 0 rgba(0,0,0,.35);}
    .bubble .n.neg{ color: var(--bad); }
    .bubble .m{color:rgba(255,255,255,.94);font-size:14px;margin-top:6px;line-height:1.55;text-shadow: 0 2px 0 rgba(0,0,0,.25);}

    .talk-inline{
      margin-top:12px;
      display:none;
      gap:10px;
    }
    .talk-inline-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .talk-inline-mood{
      font-size:12px;
      color:rgba(255,255,255,.78);
      line-height:1.45;
    }
    .talk-inline-timer{
      flex:0 0 auto;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
      font-size:12px;
      font-weight:950;
      white-space:nowrap;
    }
    .talk-inline-choices{
      display:grid;
      gap:8px;
      margin-top:8px;
    }
    .talk-inline-foot{
      margin-top:8px;
      font-size:11px;
      color:rgba(255,255,255,.68);
      line-height:1.5;
    }

    .grid{display:grid;grid-template-columns:1fr;gap:12px}

    .shelf-board{
      position:relative;
      border-radius:16px;
      padding:12px;
      border:1px solid rgba(255,255,255,.18);
      box-shadow: 0 18px 55px rgba(0,0,0,.55);
      overflow:hidden;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(255,255,255,.035) 0px,
          rgba(255,255,255,.035) 8px,
          rgba(0,0,0,.02) 8px,
          rgba(0,0,0,.02) 18px
        ),
        repeating-linear-gradient(
          180deg,
          rgba(0,0,0,.10) 0px,
          rgba(0,0,0,.10) 2px,
          rgba(255,255,255,.06) 2px,
          rgba(255,255,255,.06) 36px
        ),
        linear-gradient(180deg, rgba(122,87,54,.92), rgba(58,36,20,.92));
    }
    .shelf-board:before{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
        radial-gradient(circle at 50% 90%, rgba(0,0,0,.20), rgba(0,0,0,0) 60%);
      mix-blend-mode: overlay;
      opacity:.9;
    }
    .shelf-board:after{
      content:"";
      position:absolute; inset:8px;
      border-radius:12px;
      border:1px solid rgba(0,0,0,.18);
      box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
      pointer-events:none;
    }

    .shelves{
      position:relative;
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:10px;
      z-index:1;
    }
    @media (min-width: 940px){
      .shelves{ grid-template-columns: repeat(3, minmax(0,1fr)); }
    }

    .shelf{
      border:1px solid rgba(255,255,255,.18);
      border-radius:14px;
      overflow:hidden;
      min-width:0;
      background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.28));
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      position:relative;
    }
    .shelf.locked{opacity:.62;filter:saturate(.75)}

    .shelf.shrine{
      border-color: var(--shrineLine);
      box-shadow:
        0 18px 55px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 0 34px rgba(0,255,204,.12);
    }
    .shelf.shrine:before{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 18% 18%, var(--shrineGlow), rgba(0,0,0,0) 52%),
        radial-gradient(circle at 82% 26%, var(--shrineGlow2), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(0,170,160,.10), rgba(0,0,0,.25));
      opacity:.9;
    }
    .shelf.shrine .shelf-top{
      border-bottom:1px dashed rgba(180,255,240,.25);
    }

    .shelf-top{
      padding:10px 10px 8px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px dashed rgba(255,255,255,.16);
      min-width:0;
      position:relative;
      z-index:1;
    }
    .shelf-title{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .shelf-name{
      font-weight:950;
      font-size:13px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .shelf-tag{
      font-size:11px;
      color:rgba(255,255,255,.78);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
    }

    .tierPill{
      flex:0 0 auto;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.20);
      background:rgba(0,0,0,.25);
      font-size:12px;
      font-weight:950;
      line-height:1;
      white-space:nowrap;
      position:relative;
      z-index:1;
    }
    .tier--high{ color: var(--bad); border-color: rgba(255,154,165,.38); }
    .tier--mid { color: var(--warn); border-color: rgba(255,211,138,.34); }
    .tier--low { color: var(--good); border-color: rgba(159,255,168,.30); }
    .tier--shrine{
      color: rgba(200,255,240,.96);
      border-color: rgba(180,255,240,.38);
      background: rgba(0,0,0,.35);
      text-shadow: 0 2px 0 rgba(0,0,0,.35);
    }

    .shelf-body{
      padding: var(--shelfPad);
      display:grid;
      gap:10px;
      min-width:0;
      position:relative;
      z-index:1;
    }

    .slot{
      width:100%;
      aspect-ratio: var(--cardAR);
      border-radius:14px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.22);
      overflow:hidden;
      position:relative;
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .slot img{
      width:100%;
      height:100%;
      object-fit:contain;
      padding:5px;
      image-rendering:pixelated;
      display:block;
    }
    .slot .ph{
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      color:rgba(255,255,255,.70);
      font-size:12px;
      text-align:center;
      padding:10px;
      line-height:1.25;
    }
    .slot .qty{
      position:absolute; right:8px; bottom:8px;
      font-size:12px; font-weight:950;
      background:rgba(0,0,0,.62);
      border:1px solid rgba(255,255,255,.18);
      padding:3px 9px;border-radius:999px;
      font-family:var(--mono);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .shelf-info{
      min-width:0;
      display:grid;
      gap:6px;
    }

    .line{
      font-size:12px;
      color:rgba(255,255,255,.80);
      line-height:1.35;
      min-width:0;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .line b{color:var(--text)}

    .line.titleLine{
      font-size:14px;
      font-weight:950;
      color:var(--text);
      line-height:1.25;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .priceLine b{font-size:16px}
    .subNote{color:rgba(255,255,255,.68);font-size:11px}

    .shelf-actions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:4px;
      min-width:0;
    }
    .mini{
      padding:10px 10px;
      border-radius:12px;
      font-size:12px;
      font-weight:950;
      flex: 1 1 120px;
      min-width:0;
    }
    @media (max-width: 420px){
      .line.titleLine{ font-size:13px; -webkit-line-clamp:3; }
      .priceLine b{ font-size:15px; }
      .mini{ flex: 1 1 100%; }
    }

    .modal{
      position:fixed; inset:0;
      background:rgba(0,0,0,.65);
      display:none;
      align-items:flex-end;
      justify-content:center;
      z-index:100;
      padding:14px 12px;
      overscroll-behavior: contain;
    }
    .modal.show{display:flex}
    .sheet{
      width:min(980px, 100%);
      border:1px solid var(--line);
      background:rgba(15,18,32,.98);
      border-radius:16px;
      box-shadow: var(--shadow);
      overflow:hidden;
      max-height: 86vh;
      display:flex;
      flex-direction:column;
    }
    .sheet-h{
      padding:12px; border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      flex:0 0 auto;
      min-width:0;
    }
    .sheet-h b{font-size:14px}
    .sheet-b{
      padding:12px;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      flex: 1 1 auto;
      touch-action: pan-y;
    }
    .sheet-actions{
      display:flex;gap:8px;justify-content:flex-end;
      padding:12px;border-top:1px solid var(--line);flex:0 0 auto
    }
    .close{width:40px;height:40px;border-radius:12px}

    .cards{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:var(--gap);
      align-items:stretch;
    }
    @media (max-width: 340px){
      .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (min-width: 920px){
      .cards{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }

    .citem{
      position:relative;
      border:1px solid rgba(255,255,255,.14);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
      border-radius:14px;
      overflow:hidden;
      cursor:pointer;
      user-select:none;
      -webkit-tap-highlight-color:transparent;
      transition:transform .12s ease, filter .12s ease;
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .citem:active{transform:scale(.985)}
    .cimg{
      width:100%;
      height:var(--tile);
      display:block;
      background:rgba(0,0,0,.14);
      position:relative;
    }
    .cimg img{
      width:100%;height:100%;
      object-fit:contain;
      padding:var(--thumbPad);
      image-rendering:pixelated;
      image-rendering:crisp-edges;
      display:block;
    }
    .cimg .ph{
      width:100%;height:100%;
      display:flex;align-items:center;justify-content:center;
      color:rgba(255,255,255,.6);
      font-size:11px;text-align:center;padding:8px;line-height:1.2;
    }
    .cimg .cnt{
      position:absolute; right:6px; top:6px;
      font-size:11px; font-weight:950;
      background:rgba(0,0,0,.62);
      border:1px solid rgba(255,255,255,.18);
      padding:3px 8px;border-radius:999px;
      font-family:var(--mono);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .cmeta{
      padding:7px 8px 9px;
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
    }
    .cname{
      font-size:12px;
      font-weight:950;
      line-height:1.25;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .csub{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:6px;
      color:var(--muted);
      font-size:11px;
      min-width:0;
    }
    .csub .tagmini{
      display:inline-flex;align-items:center;gap:6px;
      padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.18);color:var(--muted);max-width:100%;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      min-width:0;
    }
    .csub .tagmini b{color:var(--text);font-weight:800}

    .toast{
      position:fixed;
      left:12px;
      right:12px;
      bottom:50%;
      transform: translateY(50%);
      display:flex;
      justify-content:center;
      pointer-events:none;
      z-index:200;
    }
    .toast .box{
      width:min(680px, 100%);
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.65);
      color:var(--text);
      border-radius:14px;
      padding:10px 12px;
      box-shadow: var(--shadow);
      pointer-events:none;
      display:none;
      white-space:pre-line;
    }
    .toast .box.show{display:block;animation: popIn .18s ease-out;}
    @keyframes popIn{
      from{ transform: translateY(8px) scale(.98); opacity: 0; }
      to  { transform: translateY(0)   scale(1);   opacity: 1; }
    }

    .toast .box.toast--sale{
      border-color: rgba(255,211,138,.90);
      background: linear-gradient(180deg, rgba(255,211,138,.28), rgba(0,0,0,.80));
      box-shadow:
        0 22px 70px rgba(0,0,0,.70),
        0 0 0 1px rgba(255,211,138,.25) inset,
        0 0 40px rgba(255,211,138,.20);
      transform-origin:center;
      animation: salePop .20s ease-out, salePulse 1.2s ease-in-out infinite;
    }
    @keyframes salePop{
      from{ transform: translateY(16px) scale(.92); opacity:0; }
      to  { transform: translateY(0)    scale(1);   opacity:1; }
    }
    @keyframes salePulse{
      0%,100%{ filter: drop-shadow(0 0 0 rgba(255,211,138,0)); }
      50%{ filter: drop-shadow(0 0 14px rgba(255,211,138,.35)); }
    }
    .toast .box.toast--sale b{
      font-size:18px;
      letter-spacing:.02em;
      text-shadow: 0 2px 0 rgba(0,0,0,.25);
    }
    .toast .box.toast--sale .small{
      font-size:14px;
      color:rgba(255,255,255,.96);
    }

    .toast .box.toast--contract{
      border-color: rgba(180,255,240,.78);
      background:
        radial-gradient(circle at 18% 20%, rgba(0,255,204,.22), rgba(0,0,0,0) 52%),
        radial-gradient(circle at 82% 26%, rgba(64,160,255,.16), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(0,170,160,.18), rgba(0,0,0,.84));
      box-shadow:
        0 22px 80px rgba(0,0,0,.72),
        0 0 0 1px rgba(180,255,240,.18) inset,
        0 0 44px rgba(0,255,204,.18);
      animation: salePop .20s ease-out, contractPulse 1.4s ease-in-out infinite;
    }
    @keyframes contractPulse{
      0%,100%{ filter: drop-shadow(0 0 0 rgba(0,255,204,0)); }
      50%{ filter: drop-shadow(0 0 16px rgba(0,255,204,.28)); }
    }

    .sale-flash{
      position:fixed; inset:0;
      pointer-events:none;
      background: radial-gradient(circle at 50% 55%, rgba(255,211,138,.22), rgba(0,0,0,0) 55%);
      opacity:0;
      z-index:190;
    }
    .sale-flash.show{ animation: flash .55s ease-out; }
    @keyframes flash{
      0%{ opacity:0; }
      18%{ opacity:1; }
      100%{ opacity:0; }
    }

    .contract-flash{
      position:fixed; inset:0;
      pointer-events:none;
      background: radial-gradient(circle at 50% 55%, rgba(0,255,204,.20), rgba(0,0,0,0) 58%);
      opacity:0;
      z-index:191;
    }
    .contract-flash.show{ animation: flash .60s ease-out; }

    .cd{font-size:11px;color:var(--muted);margin-left:8px;align-self:center;}
    .head-actions-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0;}

    .errbar{
      position:fixed;
      left:10px; right:10px;
      bottom:10px;
      z-index:9999;
      display:none;
    }
    .errbar.show{display:block}
    .errbar .box{
      border:1px solid rgba(255,154,165,.55);
      background:rgba(0,0,0,.78);
      border-radius:14px;
      padding:10px 12px;
      box-shadow: 0 14px 50px rgba(0,0,0,.55);
      font-size:12px;
      line-height:1.5;
    }
    .errbar .t{font-weight:950;color:var(--bad)}
    .errbar .m{margin-top:4px;color:rgba(255,255,255,.92);white-space:pre-wrap;font-family:var(--mono)}

    .guestbar{
      display:grid;
      gap:10px;
    }
    .guestlist{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:10px;
    }
    @media (max-width: 820px){
      .guestlist{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 520px){
      .guestlist{ grid-template-columns: 1fr; }
    }

    .gcard{
      border:1px solid rgba(255,255,255,.14);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
      border-radius:14px;
      padding:10px;
      display:grid;
      gap:8px;
      min-width:0;
      box-shadow: 0 8px 24px rgba(0,0,0,.20);
    }
    .ghead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      min-width:0;
    }
    .gname{
      font-size:13px;
      font-weight:950;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .gmeta{
      font-size:11px;
      color:var(--muted);
      white-space:nowrap;
      flex:0 0 auto;
    }
    .gline{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }
    .ghearts{
      font-size:16px;
      letter-spacing:.06em;
      line-height:1;
      white-space:nowrap;
    }
    .ghearts .on{ color:#ff86b3; text-shadow:0 0 10px rgba(255,134,179,.35); }
    .ghearts .off{ color:rgba(255,255,255,.18); }
    .gauge{
      position:relative;
      flex:1;
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.12);
    }
    .gauge > i{
      position:absolute; inset:0 auto 0 0;
      width:0%;
      background:linear-gradient(90deg, rgba(255,134,179,.85), rgba(255,211,138,.92));
      box-shadow: 0 0 18px rgba(255,134,179,.22);
      border-radius:999px;
      display:block;
    }
    .gsub{
      font-size:11px;
      color:rgba(255,255,255,.78);
      line-height:1.4;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .gempty{
      font-size:12px;
      color:var(--muted);
      line-height:1.6;
    }

    .affection-list{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:10px;
    }
    @media (max-width: 640px){
      .affection-list{
        grid-template-columns: 1fr;
      }
    }

    .talk-choice{
      width:100%;
      text-align:left;
      border:1px solid rgba(255,255,255,.14);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      color:var(--text);
      border-radius:14px;
      padding:13px 14px;
      font-size:14px;
      line-height:1.5;
      font-weight:900;
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 10px 22px rgba(0,0,0,.18);
    }
    .talk-choice:active{ transform:translateY(1px); }