:root{--teal:#123f3b;--teal2:#0c2c29;--orange:#e2582d;--mustard:#e8b93c;--cream:#f7ebd3;--ink:#13201f;--card:#fff8e8}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Trebuchet MS','Segoe UI',Tahoma,sans-serif}
.icon{display:inline-block;vertical-align:-0.15em;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-solid{fill:currentColor;stroke:none}
html,body{height:100%}
body{background:var(--teal);color:var(--ink);overflow:hidden;height:100vh;width:100vw;position:relative;background-image:linear-gradient(rgba(232,185,60,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(232,185,60,.07) 1px,transparent 1px);background-size:46px 46px}
#bg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#progress{position:absolute;top:0;left:0;height:6px;width:0;background:linear-gradient(90deg,var(--orange),var(--mustard));z-index:200;transition:width .4s}
.presentation-container{position:relative;z-index:10;width:100%;height:100%;display:flex;justify-content:center;align-items:center}
.slide{position:absolute;width:92%;max-width:1200px;height:84vh;max-height:760px;padding:26px 36px;background:var(--cream);border-radius:18px;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--orange);display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transform:translateY(16px) rotate(-.6deg);transition:all .4s ease-out;pointer-events:none;text-align:center;overflow-y:auto;overflow-x:hidden}
.slide.active{opacity:1;transform:none;pointer-events:auto}
.meme-split{display:grid;grid-template-columns:1.2fr 0.8fr;gap:32px;align-items:center;width:100%;max-width:1100px;text-align:left}
.meme-split .txt{display:flex;flex-direction:column;gap:12px;width:100%}
.meme-split h2{text-align:left;margin-bottom:6px}
.meme-split h2::after{left:0;transform:none}
.meme-split .card{padding:14px 16px}
.meme-frame{display:flex;justify-content:center;align-items:center;width:100%}
.meme-img{max-height:min(48vh,410px);max-width:100%;width:auto;border:3px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--mustard);object-fit:contain;animation:floaty 4s ease-in-out infinite}
@media(max-width:900px){.meme-split{grid-template-columns:1fr;text-align:center}.meme-split h2::after{left:50%;transform:translateX(-50%)}}
h1{font-family:'Arial Black',Impact,sans-serif;font-size:clamp(2rem,4.6vw,3.6rem);color:var(--teal);margin-bottom:14px;font-weight:900;line-height:1.1;letter-spacing:-1px}
h1 em{font-style:normal;background:var(--mustard);padding:0 10px;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
h2{font-family:'Arial Black',Impact,sans-serif;font-size:clamp(1.6rem,3.2vw,2.4rem);color:var(--teal);margin-bottom:22px;position:relative;padding-bottom:10px;letter-spacing:-.5px}
h2::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:110px;height:6px;background:var(--orange);border-radius:3px}
h3{font-size:1.25rem;color:var(--teal);margin-bottom:6px;font-weight:900}
p{font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.5;max-width:850px;margin-bottom:10px}
.sticker{display:inline-block;font-family:'Courier New',monospace;font-weight:800;font-size:.95rem;letter-spacing:1px;text-transform:uppercase;background:var(--orange);color:#fff;padding:6px 14px;border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);margin-bottom:14px}
.sticker.m{background:var(--mustard);color:var(--ink)}
.tagline{font-size:1.6rem;font-weight:900;color:var(--orange)}
.banner{width:100%;max-width:470px;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--mustard);margin-bottom:16px;display:block}
.banner.sm{max-width:300px;margin:18px 0 0}
.highlight-box{background:var(--teal);color:var(--cream);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--mustard);padding:12px 24px;border-radius:12px;font-size:1.1rem;font-weight:700;margin-top:16px;max-width:980px;text-align:left}
.quote-text{font-family:'Arial Black',Impact,sans-serif;font-size:clamp(1.5rem,3.2vw,2.5rem);color:var(--teal);line-height:1.25;padding:0 20px}
.sub{font-size:1.25rem;font-weight:700;color:var(--orange);margin-top:6px}
.grid{display:grid;gap:18px;width:100%;margin-top:6px}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:3px solid var(--ink);border-radius:14px;padding:18px 16px;text-align:left;box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column}
.card p{font-size:1rem;line-height:1.4;margin:0}
.step{font-family:'Courier New',monospace;font-size:.85rem;font-weight:800;letter-spacing:1.5px;color:var(--orange);margin-bottom:6px}
.card.dark{background:var(--teal);color:var(--cream);box-shadow:5px 5px 0 var(--orange)}
.card.dark h3,.card.dark p{color:var(--cream)}
.card.dark .step{color:var(--mustard)}
.av{width:54px;height:54px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Arial Black',Impact,sans-serif;font-size:1.6rem;color:var(--ink);margin-bottom:10px;box-shadow:3px 3px 0 var(--ink)}
.nova .av{background:var(--mustard)}.rex .av{background:var(--orange);color:#fff}.vera .av{background:#5fc3b1}
.role{font-weight:800;font-size:1.05rem;margin-bottom:6px;color:var(--orange)}
.vibe{font-family:'Courier New',monospace;font-size:.9rem;font-weight:700;margin-top:10px;color:var(--teal)}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:8px;width:100%}
.arrow{font-size:1.8rem;color:var(--orange);font-weight:900}
.keys{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.keys span{font-family:'Courier New',monospace;font-size:.95rem;font-weight:800;background:var(--card);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:4px 12px;border-radius:8px}
.layers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;width:100%}
.tag{display:inline-block;align-self:flex-start;font-family:'Courier New',monospace;font-size:.75rem;font-weight:800;letter-spacing:1px;padding:3px 9px;border-radius:20px;border:2px solid var(--ink);background:var(--mustard);color:var(--ink);margin-bottom:8px}
.hint{position:absolute;bottom:34px;left:40px;z-index:100;font-family:'Courier New',monospace;font-size:.85rem;color:var(--mustard)}
@media(max-width:800px){.g3,.layers,.flow{grid-template-columns:1fr}.arrow{display:none}.slide{overflow-y:auto;justify-content:flex-start}.hint{display:none}}
/* motion + memes */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) scale(1.04)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.slide.active>*{animation:rise .55s both}
.slide.active>*:nth-child(2){animation-delay:.1s}.slide.active>*:nth-child(3){animation-delay:.2s}.slide.active>*:nth-child(4){animation-delay:.3s}.slide.active>*:nth-child(5){animation-delay:.4s}.slide.active>*:nth-child(6){animation-delay:.5s}
.slide.active>.sticker{animation:rise .55s both,wiggle 3s ease-in-out .7s infinite}
.slide.active .grid>*,.slide.active .flow>*,.slide.active .layers>*,.slide.active .jokes>*{animation:rise .5s both}
.slide.active :is(.grid,.flow,.layers,.jokes)>*:nth-child(1){animation-delay:.25s}.slide.active :is(.grid,.flow,.layers,.jokes)>*:nth-child(2){animation-delay:.35s}.slide.active :is(.grid,.flow,.layers,.jokes)>*:nth-child(3){animation-delay:.45s}.slide.active :is(.grid,.flow,.layers,.jokes)>*:nth-child(4){animation-delay:.55s}.slide.active :is(.grid,.flow,.layers,.jokes)>*:nth-child(5){animation-delay:.65s}.slide.active :is(.grid,.flow,.layers,.jokes)>*:nth-child(6){animation-delay:.75s}.slide.active :is(.grid,.flow,.layers,.jokes)>*:nth-child(7){animation-delay:.85s}
.card{transition:transform .2s,box-shadow .2s}.card:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:8px 8px 0 var(--ink)}
.tagline{display:inline-block;animation:pulse 2.4s ease-in-out infinite}
.split{display:flex;gap:40px;align-items:center;justify-content:center;width:100%;text-align:left}
.split .txt{flex:1;max-width:520px}.split .txt h1{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.meme{display:block;border:3px solid var(--ink);border-radius:12px;box-shadow:7px 7px 0 var(--mustard);animation:floaty 4s ease-in-out infinite;max-width:100%}
.meme.tall{height:min(52vh,430px);width:auto}.meme.wide{width:min(440px,70vw);height:auto}
.memewrap{display:flex;justify-content:center}
.caption{font-family:'Arial Black',Impact,sans-serif;font-size:clamp(1.3rem,2.6vw,2rem);color:var(--teal);margin-bottom:14px;line-height:1.2}
.caption b{color:var(--orange)}
.jokes{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.jokes .card p{font-size:1.05rem}.jokes .card h3{font-size:1.1rem}
.jokes .lang{font-family:'Courier New',monospace;font-size:.8rem;font-weight:800;color:var(--orange);margin-bottom:4px}
@media(max-width:800px){.split{flex-direction:column}.jokes{grid-template-columns:1fr}}
.win-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:860px;margin-top:6px}
.win-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.win-btn{font-family:'Arial Black',Impact,sans-serif;font-size:1.05rem;padding:10px 22px;border-radius:12px;border:3px solid var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.win-btn.judge-yes{background:#10b981;color:#fff;box-shadow:4px 4px 0 var(--ink)}
.win-btn.judge-no{background:#e11d48;color:#fff;box-shadow:4px 4px 0 var(--ink)}
.win-btn.aud-yes{background:#0284c7;color:#fff;box-shadow:4px 4px 0 var(--ink)}
.win-btn.aud-no{background:var(--mustard);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.win-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.win-btn.active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);outline:3px solid var(--teal)}
.win-display{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.win-video{max-height:min(44vh,340px);width:auto;max-width:100%;border:3px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--mustard);background:#000}
.win-img{max-height:min(44vh,340px);width:auto;max-width:100%;border:3px solid var(--ink);border-radius:14px;box-shadow:7px 7px 0 var(--mustard);object-fit:contain}

/* Paradigm Card on Slide 1 */
.paradigm-card{width:100%;max-width:840px;background:var(--card);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:14px 18px;margin:12px 0 8px}
.paradigm-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.paradigm-item{flex:1;padding:10px 14px;border-radius:10px;border:2px solid var(--ink);text-align:left}
.paradigm-item.old{background:#ffe4e6;border-color:#e11d48}
.paradigm-item.new{background:#d1fae5;border-color:#059669}
.paradigm-label{font-family:'Courier New',monospace;font-size:.8rem;font-weight:900;letter-spacing:1px;margin-bottom:4px}
.paradigm-item.old .paradigm-label{color:#be123c}
.paradigm-item.new .paradigm-label{color:#047857}
.paradigm-desc{font-size:.92rem;font-weight:800;color:var(--ink);line-height:1.35}
.paradigm-vs{font-family:'Arial Black',Impact,sans-serif;font-size:1.3rem;color:var(--orange);font-weight:900}
.paradigm-sub{font-size:1rem;line-height:1.45;max-width:820px;color:var(--teal)}

/* Internship Finale Slide */
.intern-split{display:grid;grid-template-columns:0.95fr 1.05fr;gap:20px;width:100%;max-width:1050px;align-items:center;margin-top:4px}
.intern-left{display:flex;flex-direction:column;align-items:center}
.photo-pair{display:flex;gap:14px;justify-content:center;align-items:flex-end}
.photo-box{display:flex;flex-direction:column;align-items:center}
.hero-img{max-height:min(32vh,240px);width:auto;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--mustard);background:#fff;object-fit:contain}
.meme-small{max-height:min(28vh,210px);width:auto;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--orange);background:#fff;object-fit:contain}
.photo-tag{font-family:'Courier New',monospace;font-size:.8rem;font-weight:800;background:var(--ink);color:var(--cream);padding:3px 8px;border-radius:6px;margin-top:6px}
.intern-right{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.qr-container{background:var(--card);border:3px solid var(--ink);border-radius:14px;padding:12px 16px;box-shadow:5px 5px 0 var(--mustard);display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px}
.qr-label{font-family:'Arial Black',Impact,sans-serif;font-size:.9rem;color:var(--teal);letter-spacing:.5px;margin-bottom:8px}
.qr-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.qr-tab{font-family:'Courier New',monospace;font-size:.78rem;font-weight:800;padding:4px 10px;border-radius:6px;border:2px solid var(--ink);background:#fff;cursor:pointer;transition:all .15s}
.qr-tab.active{background:var(--orange);color:#fff;box-shadow:2px 2px 0 var(--ink)}
.qr-frame{display:flex;flex-direction:column;align-items:center;gap:4px}
.qr-img{width:130px;height:130px;border:2px solid var(--ink);border-radius:10px;background:#fff;padding:4px}
.qr-desc{font-size:.8rem;font-weight:700;color:var(--teal)}
.badges-wrap{width:100%;max-width:460px;text-align:center}
.badges-title{font-family:'Courier New',monospace;font-size:.8rem;font-weight:800;letter-spacing:.5px;color:var(--teal);margin-bottom:6px}
.badges-grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.badges-grid a{display:inline-block;transition:transform .15s}
.badges-grid a:hover{transform:scale(1.08)}
.badges-grid img{height:22px;border-radius:4px}

/* Comprehensive Phone & Mobile Responsiveness */
@media (max-width:900px){
  .slide{width:95%;height:86vh;padding:18px 16px}
  .intern-split{grid-template-columns:1fr;gap:14px}
  .photo-pair{gap:10px}
  .hero-img{max-height:190px}
  .meme-small{max-height:170px}
}
@media (max-width:600px){
  body{background-size:28px 28px}
  .slide{width:96%;height:88vh;padding:14px 10px 65px;border-width:2px;box-shadow:5px 5px 0 var(--orange);border-radius:12px;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  h1{font-size:clamp(1.35rem,6.2vw,2.1rem);margin-bottom:6px}
  h2{font-size:clamp(1.15rem,5vw,1.7rem);margin-bottom:12px}
  h2::after{width:65px;height:4px}
  h3{font-size:1.02rem}
  p{font-size:.92rem}
  .tagline{font-size:1.2rem}
  .sticker{font-size:.75rem;padding:4px 10px;margin-bottom:8px}
  .banner{max-height:115px;margin-bottom:8px;object-fit:cover}
  .banner.sm{max-height:85px;margin:8px 0 0}
  .paradigm-row{flex-direction:column;gap:6px}
  .paradigm-vs{font-size:.95rem;margin:-2px 0}
  .paradigm-card{padding:10px 12px;margin:8px 0 6px}
  .paradigm-desc{font-size:.84rem}
  .paradigm-sub{font-size:.88rem}
  .meme-img{max-height:200px}
  .meme.tall{height:190px}
  .meme.wide{width:92%}
  .flow{grid-template-columns:1fr;gap:8px}
  .card{padding:10px 12px}
  .card p{font-size:.88rem}
  .keys{margin-top:8px;gap:5px}
  .keys span{font-size:.78rem;padding:2px 8px}
  .controls{bottom:12px;left:50%;right:auto;transform:translateX(-50%);gap:10px;padding:5px 12px;width:auto;max-width:92vw;justify-content:center}
  .slide{padding-bottom:95px !important;max-height:85vh;height:85vh}
  .nav-btn{width:38px;height:38px;font-size:1rem;border-width:2px}
  .slide-number{font-size:.9rem;min-width:40px}
  .hint{display:none}
  .win-btns{gap:6px}
  .win-btn{font-size:.82rem;padding:7px 12px}
  .win-video,.win-img{max-height:195px}
  .qr-container{padding:8px 10px}
  .qr-img{width:115px;height:115px}
  .badges-grid img{height:19px}
}


/* Universal Floating App Navigation Bar */
.controls {
  position: fixed !important;
  bottom: 14px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  background: rgba(12, 44, 41, 0.96) !important;
  padding: 6px 16px !important;
  border-radius: 40px !important;
  border: 2px solid var(--mustard) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.nav-btn {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.25rem !important;
  border-radius: 50% !important;
  border: 2px solid var(--ink) !important;
  background: var(--mustard) !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  touch-action: manipulation;
}
.nav-btn:active {
  transform: scale(0.92) !important;
}
.slide-number {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  min-width: 55px !important;
  text-align: center !important;
  font-family: 'Courier New', monospace !important;
}

/* Mobile Responsiveness for all screens <= 768px */
@media (max-width: 768px) {
  body {
    overflow: hidden;
    height: 100vh;
  }
  .slide {
    width: 95% !important;
    max-width: 95% !important;
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    padding: 16px 12px 105px 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    border-radius: 14px !important;
    box-shadow: 6px 6px 0 var(--orange) !important;
  }
  
  /* Slide 16: Internship Finale */
  .intern-split {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .photo-pair {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
  }
  .photo-box {
    flex: 1 !important;
    max-width: 48% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero-img, .meme-small {
    width: 100% !important;
    max-height: 145px !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .photo-tag {
    font-size: 0.72rem !important;
    padding: 2px 6px !important;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .intern-right {
    width: 100% !important;
    gap: 10px !important;
  }
  .qr-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 8px !important;
  }
  .qr-tabs {
    gap: 4px !important;
    margin-bottom: 6px !important;
  }
  .qr-tab {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
  }
  .qr-img {
    width: 120px !important;
    height: 120px !important;
  }
  .badges-grid {
    gap: 4px !important;
    justify-content: center !important;
  }
  .badges-grid img {
    height: 19px !important;
  }
  .highlight-box {
    font-size: 0.88rem !important;
    padding: 8px 12px !important;
  }

  /* Slide elements scaling */
  h1 { font-size: clamp(1.35rem, 6.2vw, 2.1rem) !important; margin-bottom: 6px !important; }
  h2 { font-size: clamp(1.15rem, 5vw, 1.7rem) !important; margin-bottom: 10px !important; }
  h3 { font-size: 1rem !important; }
  p { font-size: 0.9rem !important; }
  .tagline { font-size: 1.15rem !important; }
  .meme-img { max-height: 190px !important; }
  .win-video, .win-img { max-height: 190px !important; }
  .hint { display: none !important; }
}

/* Meme Banter Toggle Button and Content */
.banter-box {
  width: 100%;
  max-width: 680px;
  margin: 10px auto 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banter-btn {
  background: var(--card);
  color: var(--teal);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 6px 14px;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
}
.banter-btn:hover {
  background: var(--mustard);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.banter-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.banter-btn.active {
  background: var(--orange);
  color: #fff;
  border-color: var(--ink);
}
.banter-arrow {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
.banter-btn.active .banter-arrow {
  transform: rotate(180deg);
}
.banter-content {
  display: none;
  width: 100%;
  margin-top: 8px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 4px 4px 0 var(--mustard);
  text-align: left;
  animation: rise 0.25s ease-out;
}
.banter-content.open {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.banter-line {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
}
.banter-line strong {
  color: var(--orange);
}

/* Slide 10: Audience Vote Styles */
.slide-vote {
  padding: 20px 24px;
}
.vote-sub {
  margin-bottom: 8px;
  font-size: 1.15rem;
}
.vote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 900px;
  margin: 4px auto 10px;
}
.vote-card {
  padding: 12px 14px;
  text-align: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.vote-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 6px 6px 0 var(--ink);
}
.vote-card:active {
  transform: translateY(1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.vote-card.voted {
  border-color: var(--orange);
  background: #fff;
}
.vote-card .av {
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
  margin-bottom: 6px;
}
.vote-card h3 {
  font-size: 1.15rem;
  margin-bottom: 3px;
}
.vote-card .role {
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.vote-card .quote {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.3;
  margin-bottom: 8px;
}
.vote-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.vote-action-btn {
  background: var(--teal);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.12s, background 0.12s;
  pointer-events: auto;
}
.vote-card:hover .vote-action-btn,
.vote-card.voted .vote-action-btn {
  background: var(--orange);
  color: #fff;
}
.vote-count {
  background: var(--mustard);
  color: var(--ink);
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.78rem;
}
.vote-bottom-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 880px;
  margin: 4px auto 0;
}
.vote-meme-frame {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.vote-img {
  max-height: 120px;
  width: auto;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--mustard);
  object-fit: contain;
}
.vote-box {
  margin: 0;
  flex: 1;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Slide 10: PC Responsive scaling for standard/shorter laptops & high DPI displays */
@media (max-height: 720px) and (min-width: 769px) {
  .slide-vote {
    padding: 12px 20px !important;
    justify-content: center !important;
  }
  .slide-vote .sticker {
    font-size: 0.8rem !important;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
  }
  .slide-vote h2 {
    font-size: 1.6rem !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }
  .slide-vote h2::after {
    height: 4px !important;
    width: 80px !important;
  }
  .vote-sub {
    font-size: 0.92rem !important;
    margin-bottom: 6px !important;
  }
  .vote-grid {
    gap: 10px !important;
    margin: 2px auto 6px !important;
  }
  .vote-card {
    padding: 8px 10px !important;
  }
  .vote-card .av {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.1rem !important;
    margin-bottom: 3px !important;
  }
  .vote-card h3 {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }
  .vote-card .role {
    font-size: 0.78rem !important;
    margin-bottom: 2px !important;
  }
  .vote-card .quote {
    font-size: 0.78rem !important;
    margin-bottom: 5px !important;
  }
  .vote-action-btn {
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
  }
  .vote-bottom-row {
    margin-top: 4px !important;
    gap: 12px !important;
  }
  .vote-img {
    max-height: 85px !important;
  }
  .vote-box {
    font-size: 0.82rem !important;
    padding: 6px 12px !important;
  }
}

/* Slide 10 on Mobile & Small Screens */
@media (max-width: 768px) {
  .slide-vote {
    padding: 14px 10px 85px 10px !important;
    justify-content: flex-start !important;
  }
  .vote-sub {
    font-size: 0.88rem !important;
    margin-bottom: 6px !important;
  }
  .vote-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 4px 0 8px !important;
  }
  .vote-card {
    padding: 8px 4px !important;
    border-radius: 10px !important;
    border-width: 2px !important;
  }
  .vote-card .av {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.95rem !important;
    margin-bottom: 3px !important;
    border-width: 2px !important;
  }
  .vote-card h3 {
    font-size: 0.88rem !important;
    margin-bottom: 2px !important;
  }
  .vote-card .role {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }
  .vote-card .quote {
    font-size: 0.7rem !important;
    line-height: 1.18 !important;
    margin-bottom: 4px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .vote-action-btn {
    font-size: 0.68rem !important;
    padding: 3px 5px !important;
    border-width: 1.5px !important;
    gap: 3px !important;
  }
  .vote-count {
    padding: 0 4px !important;
    font-size: 0.65rem !important;
  }
  .vote-bottom-row {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 4px !important;
    width: 100% !important;
  }
  .vote-meme-frame {
    margin: 0 auto !important;
  }
  .vote-img {
    max-height: 110px !important;
    border-width: 2px !important;
  }
  .vote-box {
    text-align: center !important;
    font-size: 0.75rem !important;
    padding: 5px 8px !important;
    border-width: 2px !important;
    justify-content: center !important;
  }
  .banter-box {
    margin-top: 8px;
  }
  .banter-btn {
    font-size: 0.76rem;
    padding: 4px 10px;
  }
  .banter-line {
    font-size: 0.82rem;
  }
}

/* Photo Zoom Feature Styles */
.photo-zoom-container,
.photo-zoom-wrap {
  position: relative !important;
  display: inline-flex !important;
  max-width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

.zoomable-photo {
  cursor: zoom-in !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
  touch-action: manipulation !important;
}

.zoomable-photo:hover {
  filter: brightness(1.04) !important;
}

.photo-zoom-btn,
.photo-zoom-badge {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  top: auto !important;
  background: var(--mustard) !important;
  color: var(--ink) !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  padding: 4px 9px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  cursor: pointer !important;
  z-index: 25 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
  touch-action: manipulation !important;
}

.photo-zoom-btn:hover,
.photo-zoom-btn:active,
.photo-zoom-badge:hover,
.photo-zoom-badge:active {
  transform: scale(1.08) !important;
  background: var(--orange) !important;
  color: #fff !important;
}

/* Fullscreen Zoom Modal */
.zoom-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000000 !important;
  display: none;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  opacity: 0;
  transition: opacity 0.25s ease !important;
  overflow: hidden !important;
}

.zoom-modal.active {
  display: flex !important;
  opacity: 1 !important;
}

.zoom-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10, 32, 30, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 1 !important;
}

.zoom-toolbar {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 900px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  gap: 12px !important;
}

.zoom-title-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(18, 63, 59, 0.85) !important;
  border: 2px solid var(--mustard) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  color: var(--cream) !important;
  font-family: 'Courier New', monospace !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  max-width: 45vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.zoom-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(18, 63, 59, 0.92) !important;
  border: 2px solid var(--mustard) !important;
  border-radius: 30px !important;
  padding: 6px 12px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45) !important;
}

.zoom-btn {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  font-family: 'Arial Black', Impact, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  transition: transform 0.15s, background 0.15s !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}

.zoom-btn:hover {
  transform: translate(-1px, -1px) !important;
  background: var(--mustard) !important;
}

.zoom-btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}

.zoom-btn.reset-btn {
  width: auto !important;
  padding: 0 10px !important;
  font-size: 0.85rem !important;
  font-family: 'Courier New', monospace !important;
  background: var(--teal) !important;
  color: var(--cream) !important;
  border-color: var(--mustard) !important;
}

.zoom-btn.close-btn {
  background: var(--orange) !important;
  color: #fff !important;
  font-size: 1.25rem !important;
}

.zoom-level {
  font-family: 'Courier New', monospace !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  min-width: 52px !important;
  text-align: center !important;
  user-select: none !important;
}

.zoom-stage {
  position: relative !important;
  z-index: 5 !important;
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  touch-action: none !important;
  cursor: grab;
}

.zoom-stage.is-dragging {
  cursor: grabbing !important;
}

#zoom-img {
  max-width: 90vw !important;
  max-height: 72vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border: 3px solid var(--ink) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 8px 8px 0 var(--mustard) !important;
  background: #fff !important;
  transform-origin: center center !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: auto !important;
  will-change: transform !important;
}

.zoom-hint {
  position: relative !important;
  z-index: 10 !important;
  background: rgba(18, 63, 59, 0.92) !important;
  border: 2px solid var(--mustard) !important;
  color: var(--cream) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
  pointer-events: none !important;
  text-align: center !important;
}

@media (max-width: 600px) {
  .zoom-toolbar {
    padding: 10px 8px !important;
  }
  .zoom-title-box {
    display: none !important;
  }
  .zoom-controls {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
  }
  .zoom-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
  }
  .zoom-btn.reset-btn {
    padding: 0 8px !important;
    font-size: 0.78rem !important;
  }
  .zoom-level {
    font-size: 0.85rem !important;
    min-width: 44px !important;
  }
  #zoom-img {
    max-width: 94vw !important;
    max-height: 68vh !important;
    border-width: 2px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 5px 5px 0 var(--mustard) !important;
  }
  .zoom-hint {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
    max-width: 94vw !important;
  }
}