:root{
  --bg:#05060b; --cream:#f6ecd9; --muted:#8f98ab; --dim:#566077;
  --gold:#e2b95e; --gold2:#f4d58d; --eth:#8c92ff; --sol:#40f0b0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--cream);font-family:Inter,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:26px 14px 60px;overflow-x:hidden}
.head{text-align:center}
.head .k{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.26em;color:var(--gold)}
.head h1{font-family:"Playfair Display",serif;font-weight:900;font-size:clamp(22px,4.5vw,34px);margin-top:8px}
.head p{color:var(--muted);font-size:13px;margin-top:6px}
.tabs{display:flex;gap:8px;margin:18px 0 8px}
.tab{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;padding:9px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.14);color:var(--muted);cursor:pointer;background:rgba(255,255,255,.03)}
.tab.on{color:#0c0a04;font-weight:700}
.tab.t-elite.on{background:linear-gradient(135deg,#f4d58d,#c9973f);border-color:#e2b95e}
.tab.t-honors.on{background:linear-gradient(135deg,#f0f3f9,#8d97a9);border-color:#c9d2e0;color:#12141a}
.tab.t-classic.on{background:linear-gradient(135deg,#4a5060,#22252e);border-color:#5a6070;color:#e6ebf4}
.tryme{display:flex;gap:8px;justify-content:center;margin:10px 0 22px;flex-wrap:wrap}
.tryme input{background:#0e111b;border:1.5px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 14px;color:var(--cream);font-size:13.5px;font-family:Inter;width:min(46vw,230px)}
.tryme input:focus{outline:none;border-color:var(--gold)}

/* ================= THE SCENE ================= */
.scene{perspective:1400px;position:relative}
.aurora{position:absolute;inset:-70px;z-index:0;filter:blur(60px);opacity:.55;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;animation:drift 9s ease-in-out infinite}
.aurora i:nth-child(1){width:280px;height:280px;left:-40px;top:-20px;background:var(--a1)}
.aurora i:nth-child(2){width:240px;height:240px;right:-50px;bottom:0;background:var(--a2);animation-delay:-4.5s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-20px) scale(1.15)}}

.card3d{
  --rx:0deg; --ry:0deg; --mx:50%; --my:38%; --tilt:0;
  --s1:#e2b95e; --s2:#8a6420; --stxt:#f4d58d; --a1:rgba(226,185,94,.5); --a2:rgba(255,150,60,.35);
  position:relative;z-index:1;width:min(360px,92vw);aspect-ratio:36/56;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .18s ease-out;
  border-radius:26px;
  cursor:grab;
}
.card3d.snap{transition:transform .8s cubic-bezier(.2,1.4,.4,1)}
.card3d.honors{--s1:#c9d2e0; --s2:#6d7789; --stxt:#eef2fa; --a1:rgba(190,205,235,.45); --a2:rgba(120,160,255,.3)}
.card3d.classic{--s1:#4a5060; --s2:#1a1d26; --stxt:#c6cede; --a1:rgba(110,120,150,.35); --a2:rgba(226,185,94,.22)}

.face{
  position:absolute;inset:0;border-radius:26px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--s1) 20%, transparent), transparent 46%),
    radial-gradient(90% 60% at 50% 115%, color-mix(in srgb, var(--s1) 12%, transparent), transparent 50%),
    linear-gradient(165deg,#12151f 0%, #090b12 48%, #10131c 100%);
  border:2px solid var(--s1);
  box-shadow:0 34px 80px rgba(0,0,0,.75), 0 0 60px color-mix(in srgb, var(--s1) 30%, transparent), inset 0 0 40px rgba(0,0,0,.5);
}
.face::before{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.06) .6px, transparent .7px);
  background-size:5px 5px}
/* HOLO FOIL */
.holo{position:absolute;inset:0;border-radius:26px;pointer-events:none;mix-blend-mode:color-dodge;
  opacity:calc(.14 + var(--tilt)*.5);
  background:
    repeating-linear-gradient(115deg,
      rgba(255,80,120,.5) 0 6px, rgba(255,190,60,.5) 6px 12px, rgba(120,255,160,.5) 12px 18px,
      rgba(80,180,255,.5) 18px 24px, rgba(190,120,255,.5) 24px 30px);
  background-position:calc(var(--mx)*1.4) 0;
  -webkit-mask-image:radial-gradient(300px 380px at var(--mx) var(--my), #000 8%, transparent 62%);
          mask-image:radial-gradient(300px 380px at var(--mx) var(--my), #000 8%, transparent 62%);
  transition:opacity .2s}
/* GLARE */
.glare{position:absolute;inset:0;border-radius:26px;pointer-events:none;
  background:radial-gradient(240px 260px at var(--mx) var(--my), rgba(255,255,255,.22), transparent 60%);
  mix-blend-mode:screen}
.fil{position:absolute;width:44px;height:44px;border:2px solid var(--s1);opacity:.8;pointer-events:none}
.fil.tl{top:10px;left:10px;border-right:none;border-bottom:none;border-radius:14px 0 0 0}
.fil.tr{top:10px;right:10px;border-left:none;border-bottom:none;border-radius:0 14px 0 0}
.fil.bl{bottom:10px;left:10px;border-right:none;border-top:none;border-radius:0 0 0 14px}
.fil.br{bottom:10px;right:10px;border-left:none;border-top:none;border-radius:0 0 14px 0}
.layer{position:absolute;left:0;right:0;text-align:center;transform-style:preserve-3d;pointer-events:none}
.wm{top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  font-family:"Playfair Display",serif;font-weight:900;font-size:min(74vw,290px);
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb, var(--s1) 26%, transparent);
  transform:translateZ(8px);line-height:1}
.crown{top:4.5%;transform:translateZ(46px)}
.rays{position:absolute;left:50%;top:52px;width:220px;height:220px;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, transparent 0 14deg, color-mix(in srgb, var(--s1) 55%, transparent) 16deg 18deg, transparent 20deg 34deg,
    color-mix(in srgb, var(--s1) 45%, transparent) 36deg 38deg, transparent 40deg);
  -webkit-mask-image:radial-gradient(circle, #000 20%, transparent 68%);
          mask-image:radial-gradient(circle, #000 20%, transparent 68%);
  animation:spin 14s linear infinite;opacity:.8}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.crown svg{position:relative;width:118px;filter:drop-shadow(0 10px 22px color-mix(in srgb, var(--s1) 55%, transparent))}
.capA{fill:var(--s1)}
.band{top:22.5%;transform:translateZ(34px)}
.statusband{display:inline-block;font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:.34em;
  color:#0c0a04;font-weight:700;border-radius:20px;padding:7px 20px;
  background:linear-gradient(135deg,var(--stxt),var(--s1) 60%,var(--s2));
  box-shadow:0 4px 18px color-mix(in srgb, var(--s1) 45%, transparent)}
.statussub{margin-top:7px;font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.14em;color:var(--stxt);opacity:.85}
.mast{top:33.5%;transform:translateZ(24px);font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.26em;color:var(--gold)}
.namez{top:37%;transform:translateZ(40px)}
.cname{font-family:"Playfair Display",serif;font-weight:900;font-size:34px;letter-spacing:.01em;
  background:linear-gradient(100deg,var(--stxt) 15%, #fff 38%, var(--s1) 60%, var(--stxt) 85%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:foil 5s ease-in-out infinite}
@keyframes foil{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.cclass{top:45.5%;transform:translateZ(26px);font-size:12.5px;font-weight:700}
.medalz{top:51.5%;transform:translateZ(30px);display:flex;justify-content:center;gap:12px}
.medal{width:58px}
.medal .coin{width:48px;height:48px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--stxt) 65%, #fff), var(--s1) 55%, var(--s2));
  border:2px solid var(--s2);box-shadow:0 6px 16px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,255,255,.4)}
.medal small{display:block;font-family:"DM Mono",monospace;font-size:7px;letter-spacing:.06em;color:var(--muted);margin-top:5px}
.quotez{top:65%;transform:translateZ(22px);padding:0 26px;font-size:12px;line-height:1.6;color:var(--muted);font-style:italic}
.schoolz{top:76.5%;transform:translateZ(16px);font-size:9px;color:var(--dim)}
.idz{top:81.5%;transform:translateZ(18px)}
.cid{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.1em;color:var(--dim)}
.cid b{color:var(--stxt);font-weight:500}
.sealring{display:inline-block;margin-top:6px;width:26px;height:26px;border-radius:50%;
  border:2px dashed var(--s1);animation:spin2 10s linear infinite;position:relative}
.sealring::after{content:"🎓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;animation:spin2 10s linear infinite reverse}
@keyframes spin2{to{transform:rotate(360deg)}}
.hookz{top:92%;transform:translateZ(24px);font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.16em;color:var(--gold)}
.hint{margin-top:26px;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--dim);text-align:center}
@media (prefers-reduced-motion: reduce){
  .rays,.aurora i,.cname,.sealring,.sealring::after{animation:none}
}

/* Preserve the supplied artwork; only adapt controls and narrow screens. */
.scene { --a1:rgba(226,185,94,.5); --a2:rgba(255,150,60,.35); }
.scene.honors { --a1:rgba(190,205,235,.45); --a2:rgba(120,160,255,.3); }
.scene.classic { --a1:rgba(110,120,150,.35); --a2:rgba(226,185,94,.22); }
.card3d { width:min(360px,calc(100vw - 48px)); touch-action:pan-y; user-select:none; }
.tab { min-height:40px; }
.tab:focus-visible,button:focus-visible {outline:2px solid var(--gold2);outline-offset:4px}
.motion-controls {position:relative;z-index:2;text-align:center;margin:-8px 0 20px;max-width:390px;min-height:70px}
.motion-buttons {display:flex;justify-content:center;gap:8px}
.motion-buttons button {font:11px "DM Mono",monospace;color:var(--gold2);background:#11131b;border:1px solid #615034;padding:9px 14px;border-radius:18px;cursor:pointer;min-height:36px}
.motion-buttons button[aria-pressed="true"] {background:#252014}
.motion-buttons button:disabled {opacity:.6;cursor:default}
[hidden] {display:none!important}
#motion-status {font-size:11px;line-height:1.5;color:var(--muted);margin-top:8px;padding:0 8px}
.hint {max-width:560px;line-height:1.8;position:relative}
.namez {padding:0 15px}
.cname {white-space:nowrap}
.tryme input {min-width:0;font-size:16px}
@media(max-width:380px){.statusband{font-size:10px}.statussub{font-size:8px}.mast{font-size:8px}.quotez{font-size:11px}.cclass{font-size:11px}.schoolz{font-size:8px}.hookz{font-size:8px}.head .k{font-size:9px}.tab{padding:9px 14px}.tryme{width:100%}.tryme input{width:calc(50% - 4px)}}
@media(prefers-reduced-motion:reduce){.card3d,.card3d.snap{transition:none}}
html { overflow-x:clip; }
body { overflow-x:clip; }
.tryme {width:min(100%,468px);flex-wrap:nowrap}
.tryme input {flex:1;width:0;min-width:0}
.quotez {overflow-wrap:anywhere}

/* Card-only presentation; scale the complete artwork to fit either orientation. */
html,body {width:100%;height:100%;overflow:hidden}
body {display:block;min-height:100svh;padding:0}
.scene {position:absolute;left:50%;top:50%;width:360px;height:560px;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center}
.scene:focus-visible {outline:1px solid var(--gold);outline-offset:16px;border-radius:26px}
.card3d {width:360px;height:560px;touch-action:none}
.wm {font-size:290px}

/* Center within the actual WebView, without negative translated layers. */
html,body { min-height:0; }
#viewport {position:fixed;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.scene {position:relative;left:auto;top:auto;flex:0 0 360px;transform:scale(var(--scene-scale,0));}

/* API-driven content keeps the existing layered artwork and effect variables. */
.finish-silver{--a1:rgba(190,205,235,.45);--a2:rgba(120,160,255,.3)}
.card3d.finish-silver{--s1:#c9d2e0;--s2:#6d7789;--stxt:#eef2fa}
.finish-black{--a1:rgba(110,120,150,.35);--a2:rgba(226,185,94,.22)}
.card3d.finish-black{--s1:#4a5060;--s2:#1a1d26;--stxt:#c6cede}
.finish-bronze{--a1:rgba(199,141,89,.4);--a2:rgba(139,84,51,.3)}
.card3d.finish-bronze{--s1:#c78d59;--s2:#704626;--stxt:#f1cfab}
.personalized .cname{display:flex;align-items:baseline;justify-content:center;gap:6px}
.personalized #cn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.personalized #cy,.personalized #name-divider{flex:none}
.personalized .statusband{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.personalized .statussub,.personalized .mast{padding:0 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.personalized .cclass{top:44.5%;padding:0 16px;font-size:10px;line-height:1.5;max-height:32px;overflow:hidden}
.chain-label{color:var(--stxt)}
.personalized .medalz{top:51.5%;height:76px;gap:10px;padding:0 18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;pointer-events:auto;touch-action:pan-x}
.personalized .medal{width:70px;flex:0 0 70px}
.personalized .medal small{font-size:8px;line-height:1.25;overflow-wrap:anywhere;max-height:30px;overflow:hidden;color:#a8b0c0}
.personalized .coin{position:relative;overflow:hidden}
.personalized .coin img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px}
.medal[data-tier="silver"] .coin{background:radial-gradient(circle at 32% 28%,#fff,#c9d2e0 55%,#6d7789);border-color:#6d7789}
.medal[data-tier="bronze"] .coin{background:radial-gradient(circle at 32% 28%,#f1cfab,#c78d59 55%,#704626);border-color:#704626}
.medal[data-tier="gold"] .coin{background:radial-gradient(circle at 32% 28%,#fff3ce,#e2b95e 55%,#8a6420);border-color:#8a6420}
.personalized .quotez{top:66%;font-size:11px;max-height:52px;overflow:auto;scrollbar-width:none;pointer-events:auto;touch-action:pan-y}
.personalized .schoolz{top:77.3%;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 20px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;touch-action:pan-x}
.personalized .many-items{justify-content:flex-start}
.house{display:inline-flex;flex:none;align-items:center;gap:5px;max-width:150px;padding:4px 7px;border:1px solid color-mix(in srgb,var(--s1) 35%,transparent);border-radius:12px;color:var(--stxt);font-size:9px;white-space:nowrap}
.house>span:last-child{overflow:hidden;text-overflow:ellipsis}
.house-icon{position:relative;width:15px;height:15px;display:flex;align-items:center;justify-content:center;flex:none}
.house-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.personalized .idz{top:84%}
.personalized .cid{font-size:7px;letter-spacing:.05em;color:#929caf;padding:0 12px}
.personalized .sealring{width:23px;height:23px;margin-top:7px}
.personalized .hookz{top:93%;font-size:8px;color:var(--stxt)}
.data-error .layer,.data-error .holo,.data-error .glare{display:none}
.yearbook-error{position:absolute;inset:0;display:flex;align-items:center;padding:36px;text-align:center;font-size:16px;line-height:1.6;color:var(--cream)}
.card3d.personalized{touch-action:auto}
.personalized .face{touch-action:none}