:root{
  --red:#e60012;
  --red-deep:#a3000c;
  --black:#0b0b0d;
  --white:#f6f4ef;
  --ink:#111;
  --yellow:#ffe600;
  --gray-dark:#1c1c20;
  --gray-light:#e2ded4;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  height:100%;
  width:100%;
  overflow:hidden;
}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Cairo','Barlow Condensed','Arial Narrow','Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.display{font-family:'Archivo Black','Cairo','Arial Black',Impact,sans-serif;font-weight:900;}

/* ============ BACKGROUND LAYERS ============ */
#bg{position:fixed;inset:-6vmax;z-index:0;pointer-events:none;}
.bg-layer{position:absolute;inset:0;will-change:transform;}
#bg-stripes{
  background:repeating-linear-gradient(115deg,
    var(--red) 0 46px, var(--red-deep) 46px 52px,
    var(--red) 52px 120px, #c4000f 120px 126px);
  animation:stripeDrift 22s linear infinite;
}
@keyframes stripeDrift{from{background-position:0 0;}to{background-position:520px 0;}}
#bg-halftone{
  background-image:radial-gradient(circle, rgba(0,0,0,.35) 1.6px, transparent 1.7px);
  background-size:14px 14px;
  mix-blend-mode:multiply;
  animation:halftoneDrift 30s linear infinite;
}
@keyframes halftoneDrift{from{background-position:0 0;}to{background-position:-140px 140px;}}
#bg-vignette{
  background:radial-gradient(ellipse at 32% 40%, transparent 30%, rgba(0,0,0,.72) 100%);
}
.bg-star{position:absolute;opacity:.16;animation:spin 60s linear infinite;transform-origin:center;}
.bg-star.s2{animation-duration:90s;animation-direction:reverse;opacity:.1;}
@keyframes spin{to{transform:rotate(360deg);}}

/* big black slash behind the menu */
#slash{
  position:fixed;z-index:1;inset:0;pointer-events:none;
  background:var(--black);
  clip-path:polygon(58% 0, 100% 0, 100% 100%, 40% 100%, 52% 62%, 45% 60%, 60% 24%, 51% 22%);
  transition:clip-path .8s cubic-bezier(.8,0,.15,1);
}
body[data-screen]:not([data-screen="home"]) #slash{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 62%, 0 60%, 0 24%, 0 22%);
}

/* ============ SHELL / HUD ============ */
#shell{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;overflow:hidden;}
#hud-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px 0;letter-spacing:.12em;font-weight:700;gap:10px;
  flex-shrink:0;
}
.hud-tag{
  background:var(--black);color:var(--white);
  padding:6px 14px;transform:rotate(-2deg) skewX(-6deg);
  font-size:clamp(11px,1.2vw,14px);text-transform:uppercase;
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  white-space:nowrap;border-left:4px solid var(--red);
  display:inline-flex;align-items:center;gap:6px;
}
.hud-slash{color:var(--red);margin-right:4px;font-weight:900;}

/* ============ PERSONA 5 SECURITY GATE (PASSCODE: 3000) ============ */
.gate-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(11,11,13,0.94);
  display:flex;justify-content:center;align-items:center;
  padding:20px;
  backdrop-filter:blur(8px);
}
.gate-overlay.unlocked{display:none !important;}
.gate-card{
  background:var(--white);color:var(--black);
  padding:36px 32px;max-width:480px;width:100%;
  transform:rotate(-1.5deg) skewX(-4deg);
  box-shadow:8px 8px 0 var(--red), 14px 14px 0 var(--black);
  border:4px solid var(--black);
  text-align:center;position:relative;
}
.gate-header{margin-bottom:12px;}
.gate-badge{
  background:var(--red);color:#fff;display:inline-block;
  font-family:'Archivo Black',Impact,sans-serif;font-size:12px;
  padding:4px 12px;margin-bottom:14px;transform:skewX(6deg);letter-spacing:.08em;
}
.gate-desc{font-size:14px;color:#222;font-weight:700;line-height:1.5;}
.gate-card.shake{animation:shakeGate 0.4s ease-in-out;}
@keyframes shakeGate{
  0%,100%{transform:rotate(-1.5deg) skewX(-4deg) translateX(0);}
  20%,60%{transform:rotate(-1.5deg) skewX(-4deg) translateX(-14px);}
  40%,80%{transform:rotate(-1.5deg) skewX(-4deg) translateX(14px);}
}

#stage{flex:1;position:relative;overflow:hidden;}

/* ============ SCREENS ============ */
.screen{
  position:absolute;inset:0;padding:2vh 4vw 80px;
  display:none;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--red) transparent;
}
.screen.active{display:block;}
.screen::-webkit-scrollbar{width:6px;}
.screen::-webkit-scrollbar-thumb{background:var(--red);}

/* ---------- HOME ---------- */
#screen-home{display:none;padding:1.5vh 4vw 20px;}
#screen-home.active{display:flex;flex-direction:column;justify-content:center;}
#intro-eyebrow{
  font-size:clamp(11px,1.2vw,14px);letter-spacing:.3em;text-transform:uppercase;
  margin-bottom:6px;font-weight:700;text-shadow:2px 2px 0 var(--black);
}
#big-name{
  line-height:.95;margin-bottom:8px;width:100%;max-width:680px;
  cursor:pointer;
}
#big-name .ransom{
  font-size:clamp(26px,4.5vw,56px);
  display:block;
  white-space:normal;
  word-break:break-word;
}
#big-name .sub-ransom{
  font-size:clamp(18px,3.2vw,40px);
  margin-top:2px;
}
#tagline{
  max-width:580px;font-size:clamp(12px,1.15vw,14.5px);line-height:1.5;
  background:var(--black);padding:6px 12px;transform:rotate(-1deg);
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
  margin-bottom:12px;
}
#menu{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.menu-item{
  background:none;border:0;cursor:pointer;color:var(--white);
  text-align:left;position:relative;padding:2px 14px 2px 4px;
  transform:translateX(0);opacity:1;
  touch-action:manipulation;
  transition:transform .18s cubic-bezier(.2,1.2,.3,1);
}
.menu-item .ransom{font-size:clamp(16px,2.1vw,30px);}
.menu-item:nth-child(1){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .03s backwards;}
.menu-item:nth-child(2){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .06s backwards;}
.menu-item:nth-child(3){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .09s backwards;}
.menu-item:nth-child(4){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .12s backwards;}
.menu-item:nth-child(5){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .15s backwards;}
.menu-item:nth-child(6){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .18s backwards;}
.menu-item:nth-child(7){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .21s backwards;}
.menu-item:nth-child(8){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .24s backwards;}
.menu-item:nth-child(9){animation:menuIn .3s cubic-bezier(.2,1.2,.3,1) .27s backwards;}
@keyframes menuIn{from{transform:translateX(-30px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.menu-item::before{
  content:"";position:absolute;left:-4%;top:16%;height:72%;width:0;
  background:var(--black);transform:skewX(-16deg);z-index:-1;
  transition:width .18s cubic-bezier(.7,0,.3,1);
}
.menu-item.sel::before{width:108%;}
.menu-item.sel{transform:translateX(10px) !important;}
.menu-item.sel .ch{color:var(--white);}
.menu-item.sel .ch.box{background:var(--red);color:var(--white);}
.menu-item.sel .ch.boxw{background:var(--white);color:var(--black);}
.menu-item:focus-visible{outline:3px dashed var(--white);outline-offset:4px;}
.cursor-mark{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%) rotate(8deg);
  font-size:clamp(16px,2.2vw,28px);opacity:0;transition:opacity .12s;
  color:var(--white);text-shadow:2px 2px 0 var(--black);
}
.menu-item.sel .cursor-mark{opacity:1;animation:pulse 0.9s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:translateY(-50%) rotate(8deg) scale(1);}50%{transform:translateY(-50%) rotate(8deg) scale(1.18);}}

/* ---------- RANSOM LETTERS ---------- */
.ransom{display:inline-block;}
.ransom .ch{
  display:inline-block;line-height:1;padding:0 .01em;
  transition:transform .15s;
}
.ransom .ch.box{background:var(--black);color:var(--white);padding:.02em .08em;margin:0 .03em;}
.ransom .ch.boxw{background:var(--white);color:var(--black);padding:.02em .08em;margin:0 .03em;}
.ransom .ch.red{color:var(--red);text-shadow:1px 1px 0 var(--black);}
.menu-item:hover .ch,.menu-item.sel .ch{animation:jitter .35s ease both;}
.menu-item:hover .ch:nth-child(odd){animation-delay:.03s;}
.menu-item:hover .ch:nth-child(3n){animation-delay:.06s;}
@keyframes jitter{
  0%{transform:var(--t) translateY(0);}
  35%{transform:var(--t) translateY(-5px) rotate(3deg);}
  70%{transform:var(--t) translateY(2px) rotate(-2deg);}
  100%{transform:var(--t) translateY(0);}
}

/* ---------- SUB-SCREEN CHROME ---------- */
.sub{background:transparent;}
.screen-head-wrap{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin:1vh 0 2.5vh;
}
.screen-head{position:relative;display:inline-block;}
.screen-head .ransom{font-size:clamp(26px,4.5vw,60px);}
.screen-head::after{
  content:"";position:absolute;left:-4px;bottom:-8px;height:8px;width:105%;
  background:var(--red);transform:skewX(-24deg);
}
.back-hint{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--white);color:var(--black);padding:6px 14px;transform:rotate(-2deg);
  cursor:pointer;border:0;font-weight:700;font-family:inherit;
  box-shadow:3px 3px 0 var(--black);touch-action:manipulation;
  transition:background .15s, color .15s, transform .15s;
}
.back-hint:hover{background:var(--red);color:var(--white);transform:rotate(0deg) scale(1.04);}

/* ============ P5 CARDS & GRIDS ============ */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:18px 24px;padding-top:10px;
}
.card{
  color:var(--ink);position:relative;
  padding:16px 18px;text-decoration:none;display:block;
  transform:rotate(var(--tilt, 0deg)) translateY(20px);opacity:0;
  transition:transform .18s cubic-bezier(.7,0,.3,1), filter .18s;
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.45));
}
.card::before{
  content:"";position:absolute;inset:0;background:var(--white);
  clip-path:polygon(0 5%, 3% 0, 100% 0, 100% 90%, 97% 100%, 0 100%);
}
.card>*{position:relative;}
.screen.active .card{animation:cardIn .5s cubic-bezier(.2,1.1,.3,1) forwards;animation-delay:var(--d, 0ms);}
@keyframes cardIn{to{transform:rotate(var(--tilt, 0deg)) translateY(0);opacity:1;}}
.card:hover{
  transform:rotate(0deg) scale(1.02) !important;
  filter:drop-shadow(8px 8px 0 var(--black));
  z-index:3;
}
.card.feat{color:var(--white);filter:drop-shadow(6px 6px 0 var(--red-deep));}
.card.feat::before{background:var(--black);}
.card.feat:hover{filter:drop-shadow(9px 9px 0 var(--red));}

.card .card-tag{
  position:absolute;top:-10px;right:12px;
  background:var(--black);color:var(--white);
  font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;transform:rotate(2deg);border-left:3px solid var(--red);
}
.card.feat .card-tag{background:var(--red);border-left:0;}
.card h3{
  font-family:'Archivo Black','Cairo',Impact,sans-serif;
  font-size:clamp(15px,1.5vw,19px);line-height:1.15;text-transform:uppercase;
  margin-bottom:6px;word-break:break-word;
}
.card h3 em{font-style:normal;color:var(--red);}
.card p{font-size:13.5px;line-height:1.5;color:#333;text-align:right;}
.card.feat p{color:#d8d5cf;}
.card .meta{
  margin-top:12px;display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;letter-spacing:.08em;font-weight:700;
}

.badge-status{
  background:var(--white);color:var(--black);padding:3px 8px;
  font-weight:700;font-size:11px;letter-spacing:.05em;
  transform:skewX(-8deg);box-shadow:2px 2px 0 var(--black);
}
.badge-status.active{background:var(--red);color:var(--white);}

/* ============ PAPER CONTAINERS ============ */
.paper{
  max-width:880px;background:var(--white);color:var(--ink);
  padding:20px 24px;font-size:15.5px;line-height:1.6;
  clip-path:polygon(0 3%, 2% 0, 100% 0, 100% 96%, 98% 100%, 0 100%);
  transform:rotate(-.6deg);box-shadow:8px 8px 0 rgba(0,0,0,.5);
  margin-bottom:2.5vh;
  direction:rtl;
  text-align:right;
}
.section-title{
  display:inline-block;
  background:var(--black);
  color:var(--white);
  font-family:'Archivo Black','Cairo',Impact,sans-serif;
  font-size:clamp(14px,1.5vw,18px);
  padding:4px 12px;
  transform:rotate(-1.5deg) skewX(-6deg);
  margin-bottom:12px;
  box-shadow:3px 3px 0 var(--red);
  letter-spacing:.04em;
}
.paper strong{color:var(--red);}
.paper .stamp{
  display:inline-block;background:var(--black);color:var(--white);
  padding:2px 8px;transform:rotate(-2deg);font-weight:700;font-size:.92em;
  margin:2px 3px;
}

/* ============ P5 BUTTONS & CONTROLS ============ */
.p5-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;text-decoration:none;border:0;cursor:pointer;
  background:var(--red);color:var(--white);
  font-family:'Archivo Black','Cairo',Impact,sans-serif;
  font-size:clamp(13px,1.4vw,17px);text-transform:uppercase;letter-spacing:.05em;
  padding:10px 20px;transform:skewX(-8deg) rotate(-1deg);
  box-shadow:5px 5px 0 var(--black);
  transition:transform .15s, background .15s, color .15s, box-shadow .15s;
}
.p5-btn span{display:inline-block;transform:skewX(8deg);}
.p5-btn:hover{
  background:var(--white);color:var(--red);
  transform:skewX(-8deg) rotate(0) scale(1.04);
  box-shadow:7px 7px 0 var(--black);
}
.p5-btn:active{transform:skewX(-8deg) scale(.97);}
.p5-btn.dark{background:var(--black);color:var(--white);border-left:3px solid var(--red);}
.p5-btn.dark:hover{background:var(--white);color:var(--black);}

/* ============ P5 TOGGLE SWITCH ============ */
.p5-toggle-wrap{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--black);color:var(--white);padding:14px 18px;
  transform:rotate(-0.5deg) skewX(-4deg);margin-bottom:14px;
  box-shadow:5px 5px 0 rgba(0,0,0,.4);border-right:5px solid var(--red);
}
.p5-toggle-wrap .info{direction:rtl;text-align:right;}
.p5-toggle-wrap .title{
  font-family:'Archivo Black','Cairo',Impact,sans-serif;
  font-size:16px;letter-spacing:.04em;
}
.p5-toggle-wrap .desc{font-size:13px;color:#aaa;margin-top:2px;}
.p5-toggle{
  border:0;cursor:pointer;padding:6px 14px;font-family:'Archivo Black','Cairo',Impact,sans-serif;
  font-size:13px;letter-spacing:.08em;transform:skewX(4deg);
  box-shadow:3px 3px 0 var(--black);transition:all .18s cubic-bezier(.2,1.2,.3,1);
}
.p5-toggle.active{background:var(--red);color:var(--white);}
.p5-toggle:not(.active){background:#444;color:#ddd;}
.p5-toggle:hover{transform:skewX(4deg) scale(1.05);}

/* ============ P5 LEADERBOARD TABLE ============ */
.p5-tabs{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.p5-tab{
  background:var(--black);color:var(--white);border:0;cursor:pointer;
  font-family:'Archivo Black','Cairo',Impact,sans-serif;font-size:13.5px;
  padding:8px 16px;transform:skewX(-8deg);box-shadow:3px 3px 0 rgba(0,0,0,.5);
  transition:all .15s;
}
.p5-tab.active{background:var(--red);color:var(--white);box-shadow:4px 4px 0 var(--black);}
.p5-tab:hover{background:var(--white);color:var(--black);}

.lead-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--white);color:var(--black);padding:10px 14px;
  margin-bottom:8px;transform:skewX(-6deg);box-shadow:4px 4px 0 rgba(0,0,0,.3);
  direction:rtl;text-align:right;transition:transform .15s;
}
.lead-row:hover{transform:skewX(-6deg) translateX(-6px);background:#fff;}
.lead-row.top-1{border-right:6px solid var(--yellow);background:#fffde6;}
.lead-row.top-2{border-right:6px solid #aaa;background:#f0f0f0;}
.lead-row.top-3{border-right:6px solid #cd7f32;background:#faf3ea;}
.lead-rank{
  font-family:'Archivo Black','Cairo',Impact,sans-serif;
  font-size:16px;width:40px;color:var(--red);flex-shrink:0;
}
.lead-name-wrap{flex:1;padding:0 12px;}
.lead-name{font-weight:900;font-size:14.5px;}
.lead-title{font-size:11.5px;color:#555;font-weight:700;}
.lead-stats{
  display:flex;gap:10px;align-items:center;font-size:13px;
  font-family:'Archivo Black','Cairo',Impact,sans-serif;
}
.lead-badge{
  background:var(--black);color:var(--white);padding:2px 8px;
  font-size:11px;letter-spacing:.05em;transform:skewX(6deg);
}

/* ============ P5 AUDIT & LOG FEED ============ */
.audit-feed{display:flex;flex-direction:column;gap:8px;}
.audit-card{
  background:var(--black);color:var(--white);padding:8px 12px;
  transform:skewX(-6deg);border-left:4px solid var(--red);
  font-size:12.5px;font-family:'Cairo',monospace;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;
}
.audit-action{font-weight:900;color:var(--yellow);letter-spacing:.06em;}
.audit-time{font-size:11px;color:#aaa;}

/* ============ P5 INPUTS & FORMS ============ */
.p5-input{
  width:100%;border:3px solid var(--black);background:#fff;color:var(--ink);
  padding:10px 12px;font-family:inherit;font-size:14.5px;direction:rtl;
  transform:skewX(-2deg);transition:border-color .15s, box-shadow .15s;
}
.p5-input:focus{outline:none;border-color:var(--red);box-shadow:4px 4px 0 var(--red);}
.p5-select{
  width:100%;border:3px solid var(--black);background:#fff;color:var(--ink);
  padding:10px 12px;font-family:inherit;font-size:14.5px;direction:rtl;
  transform:skewX(-2deg);cursor:pointer;
}

/* ============ WIPE TRANSITION ============ */
#wipe{position:fixed;inset:-10%;z-index:50;pointer-events:none;}
#wipe .pane{
  position:absolute;inset:0;transform:translateX(-130%) skewX(-14deg);
}
#wipe .p1{background:var(--red);}
#wipe .p2{background:var(--black);}
#wipe .p3{background:var(--white);}
#wipe.go .pane{animation:wipeAcross .7s cubic-bezier(.75,0,.2,1) forwards;}
#wipe.go .p2{animation-delay:.06s;}
#wipe.go .p1{animation-delay:.12s;}
@keyframes wipeAcross{
  0%{transform:translateX(-130%) skewX(-14deg);}
  45%{transform:translateX(0%) skewX(-14deg);}
  55%{transform:translateX(0%) skewX(-14deg);}
  100%{transform:translateX(130%) skewX(-14deg);}
}
#wipe .flash{position:absolute;inset:0;background:var(--white);opacity:0;}
#wipe.go .flash{animation:flash .7s linear forwards;}
@keyframes flash{0%,44%{opacity:0;}48%{opacity:1;}56%{opacity:0;}100%{opacity:0;}}

/* ============ CUSTOM ANIMATED CURSOR ============ */
@media (pointer:fine){
  body.cursor-on, body.cursor-on *{cursor:none !important;}
}
#cursor{
  position:fixed;left:0;top:0;width:48px;height:48px;z-index:9999;
  pointer-events:none;display:none;
  background-repeat:no-repeat;background-position:0 0;
  background-image:url("../assets/cursors/normal.png");
  margin:-3px 0 0 -4px;
}
#cursor.link{
  background-image:url("../assets/cursors/link.png");
  margin:-6px 0 0 -6px;
}

.p5-btn.sm{padding:4px 8px;font-size:11px;}
.p5-btn.black{background:var(--black);color:var(--white);}
.p5-btn.black:hover{box-shadow:4px 4px 0 var(--red), 6px 6px 0 #fff;}

.p5-table{width:100%;border-collapse:collapse;margin-top:10px;}
.p5-table th{background:var(--black);color:var(--white);padding:8px 10px;text-align:right;font-size:13px;border-bottom:2px solid var(--red);}
.p5-table td{padding:8px 10px;font-size:13px;border-bottom:1px solid #ddd;vertical-align:middle;}
.p5-table tr:hover td{background:rgba(230,0,18,0.06);}

.badge-locked{background:var(--red);color:#fff;padding:2px 6px;font-size:10.5px;font-weight:900;border-radius:2px;}
.badge-unlocked{background:#3dff6e;color:#000;padding:2px 6px;font-size:10.5px;font-weight:900;border-radius:2px;}
.badge-voice{background:#00f0ff;color:#000;padding:2px 6px;font-size:10.5px;font-weight:900;border-radius:2px;}
.badge-text{background:#aaa;color:#000;padding:2px 6px;font-size:10.5px;font-weight:900;border-radius:2px;}
.badge-bot{background:var(--black);color:var(--yellow);padding:2px 6px;font-size:10.5px;font-weight:900;border-radius:2px;}
.badge-human{background:#e2ded4;color:#000;padding:2px 6px;font-size:10.5px;font-weight:700;border-radius:2px;}

/* ============ PER-SCREEN MENU ARTWORK ============ */
.menu-art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:transform;pointer-events:none;
  transition:opacity .55s ease;
}
body[data-screen="home"]        #art-home,
body[data-screen="overview"]    #art-overview,
body[data-screen="database"]    #art-database,
body[data-screen="leaderboard"] #art-leaderboard,
body[data-screen="automod"]     #art-automod,
body[data-screen="channels"]    #art-channels,
body[data-screen="moderation"]  #art-moderation,
body[data-screen="tickets"]     #art-tickets,
body[data-screen="knowledge"]   #art-knowledge,
body[data-screen="broadcast"]   #art-broadcast{opacity:1;}

body.has-art-home #slash{display:none;}
body.has-art-home[data-screen="home"] #bg-halftone{opacity:.5;}
body.has-art-home[data-screen="home"] #bg-vignette{
  background:
    linear-gradient(100deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 36%, transparent 58%),
    radial-gradient(ellipse at 32% 40%, transparent 30%, rgba(0,0,0,.55) 100%);
}

/* Knowledge Manager Items */
.knowledge-item {
  background: var(--white);
  color: var(--black);
  padding: 12px 14px;
  border-left: 5px solid var(--red);
  box-shadow: 3px 3px 0 var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  transition: transform .18s ease;
  border-radius: 2px;
}
.knowledge-item:hover {
  transform: translateX(-4px);
}
.knowledge-item-content {
  flex: 1;
  min-width: 220px;
}
.knowledge-item-text {
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
  word-break: break-word;
}
.badge-cat {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  padding: 2px 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 2px;
}
.badge-cat-learnedSlang { background: var(--red); color: #fff; }
.badge-cat-serverJokes { background: var(--yellow); color: #000; }
.badge-cat-memberQuirks { background: #00f0ff; color: #000; }
.badge-cat-hotTopics { background: #3dff6e; color: #000; }

/* ============ RESPONSIVENESS ============ */
@media (max-width:768px){
  #hud-top{padding:10px 12px 0;}
  .hud-tag{font-size:11px;padding:4px 8px;}
  .screen{padding:12px 14px 140px 14px;}
  #screen-home{padding:0 14px 100px;}
  .menu-item{padding:4px 6px;}
  .menu-item .ransom{font-size:clamp(18px,5.5vw,30px);}
  .menu-item.sel{transform:translateX(6px) !important;}
  .cursor-mark{right:-28px;font-size:18px;}
  .grid{grid-template-columns:1fr;gap:14px;}
  .card{transform:none !important;padding:14px 12px;}
  .paper{padding:16px 12px;font-size:13.5px;transform:none !important;}

  /* Mobile Table to Persona 5 Card Transformation */
  .p5-table, .p5-table tbody, .p5-table tr, .p5-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .p5-table thead { display: none; }
  .p5-table tr {
    background: #fff;
    margin-bottom: 14px;
    padding: 12px 10px;
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 var(--red);
    border-radius: 2px;
  }
  .p5-table td {
    padding: 6px 0;
    border-bottom: 1px dashed #e0e0e0;
    text-align: right;
  }
  .p5-table td:last-child {
    border-bottom: none;
    padding-top: 10px;
  }
  .p5-table td > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .p5-table td .p5-btn {
    flex: 1 1 calc(50% - 6px);
    min-height: 44px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }

  /* Leaderboard row on mobile */
  .lead-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 10px;
  }
  .lead-stats {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  /* Knowledge item on mobile */
  .knowledge-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .knowledge-item-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .knowledge-item-actions .p5-btn {
    flex: 1;
    min-height: 42px;
    justify-content: center;
  }

  /* Inputs and buttons */
  .p5-input, .p5-select {
    font-size: 14px;
    padding: 10px 12px;
  }
  .p5-btn {
    min-height: 44px;
    padding: 10px 16px;
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;}
}