/* 
 * css/style.css
 * Desain Estetika Retro Noir Meja Detektif
 * Mendukung Aspek Rasio Kunci 16:9 dan Efek Visual Interaktif
 */

/* ================= Global Variables & Reset ================= */
:root {
  --color-wood-dark: #1b1010;
  --color-wood-med: #3d2314;
  --color-wood-light: #52311c;
  --color-mahogany: #421b1b;
  --color-paper: #f4edd2;
  --color-paper-shadow: rgba(0, 0, 0, 0.15);
  
  --color-halal: #2e7d32;
  --color-halal-light: #e8f5e9;
  --color-haram: #c62828;
  --color-haram-light: #ffebee;
  --color-syubhat: #ef6c00;
  --color-syubhat-light: #fff3e0;
  
  --font-title: 'Playfair Display', Georgia, serif;
  --font-sans: 'Montserrat', sans-serif;
  --font-typewriter: 'Courier Prime', monospace;
  --font-stamp: 'Special Elite', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: #0c0808;
  color: #f5ecec;
  font-family: var(--font-sans);
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ================= 16:9 Ratio Wrapper System ================= */
.game-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: 10px;
  background: radial-gradient(circle, #1a1010 0%, #050303 100%);
}

.game-container {
  aspect-ratio: 16 / 9;
  width: min(100vw - 20px, (100vh - 20px) * 1.7778);
  height: min(100vh - 20px, (100vw - 20px) * 0.5625);
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 5px solid #2e1c14;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  background-color: #120b0b;
}

/* ================= View Sections Controller ================= */
.game-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 10;
}

.game-view.active {
  display: block;
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* ================= Custom Common UI Elements ================= */
.retro-divider {
  border-top: 3px double #d4af37;
  width: 60%;
  margin: 15px auto;
  opacity: 0.8;
}

/* Retro Buttons */
.btn-retro {
  background: linear-gradient(135deg, #8b5a2b 0%, #5c3a21 100%);
  color: #f7ebd3;
  font-family: var(--font-sans);
  font-weight: 600;
  border: 2px solid #d4af37;
  border-radius: 4px;
  padding: 10px 25px;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.btn-retro:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 175, 55, 0.3);
  background: linear-gradient(135deg, #a06b3a 0%, #6d472c 100%);
  color: #fff;
}

.btn-retro:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.btn-retro.btn-secondary {
  background: linear-gradient(135deg, #3d2f25 0%, #291e17 100%);
  border-color: #7a6350;
  color: #d1c2b4;
}

.btn-retro.btn-secondary:hover {
  background: linear-gradient(135deg, #4d3d30 0%, #36291f 100%);
  border-color: #bfa38a;
  color: #fff;
}

.btn-retro.btn-start {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  border-color: #a5d6a7;
  color: #e8f5e9;
  font-size: 1.1rem;
  padding: 12px 35px;
}

.btn-retro.btn-start:hover {
  background: linear-gradient(135deg, #66bb6a 0%, #388e3c 100%);
  box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
}

.btn-retro-sm {
  background: #36241a;
  border: 1px solid #73513a;
  color: #eed9c4;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 3px;
  transition: all 0.2s;
}
.btn-retro-sm:hover {
  background: #523727;
  border-color: #d4af37;
  color: #fff;
}

/* ================= 1. Main Menu View Styling ================= */
#main-menu-view {
  background: url('../assets/images/desk_bg.png') center/cover no-repeat, #211510;
}

.menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(30, 20, 15, 0.3) 0%, rgba(10, 5, 5, 0.9) 85%);
  z-index: 1;
}

.menu-content {
  position: relative;
  z-index: 5;
}

.detective-badge {
  color: #d4af37;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.badge-star {
  font-size: 0.7rem;
  vertical-align: middle;
}

.game-title {
  font-family: var(--font-title);
  font-size: 4rem;
  font-weight: 700;
  color: #eeddbb;
  text-shadow: 3px 3px 0px #3a2215, 6px 6px 20px rgba(0,0,0,0.8);
  line-height: 0.95;
}

.neon-text {
  font-family: var(--font-title);
  color: #e5c158;
  text-shadow: 0 0 5px rgba(229, 193, 88, 0.5), 0 0 20px rgba(229, 193, 88, 0.3);
  animation: flicker 3s infinite alternate;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px rgba(229, 193, 88, 0.5), 0 0 20px rgba(229, 193, 88, 0.3);
  }
  20%, 24%, 55% {
    text-shadow: none;
    color: #b5953c;
  }
}

.game-tagline {
  font-size: 0.95rem;
  letter-spacing: 1px;
  font-style: italic;
  color: #c4b09c !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ================= 2. Instructions & Credits ================= */
#instructions-view, #credits-view {
  background: #2a1b15;
}

.corkboard-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(61,35,20,0.2) 0%, rgba(15,10,8,0.85) 90%);
  z-index: 1;
}

.view-content {
  position: relative;
  z-index: 5;
  height: 100%;
}

.section-title {
  font-family: var(--font-title);
  color: #eed9c4;
  font-size: 2.2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 2px;
}

/* Memo Post-its */
.memo-paper {
  background-color: #f7eed0;
  color: #2b1f15;
  border-radius: 2px;
  box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(212, 190, 130, 0.2);
  min-height: 250px;
  border-left: 3px solid #bba16c;
  font-family: var(--font-typewriter);
  font-size: 0.75rem;
  line-height: 1.5;
}

.memo-paper h4 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  border-bottom: 2px dotted #8c734e;
  padding-bottom: 5px;
  margin-bottom: 12px;
  color: #422d1d;
}

.rotate-left {
  transform: rotate(-1.5deg);
  transition: transform 0.3s ease;
}
.rotate-left:hover {
  transform: rotate(0deg) scale(1.02);
}

.rotate-right {
  transform: rotate(1.5deg);
  transition: transform 0.3s ease;
}
.rotate-right:hover {
  transform: rotate(0deg) scale(1.02);
}

.memo-list {
  padding-left: 15px;
}

.memo-list li {
  margin-bottom: 8px;
}

.icon-tool {
  font-size: 1.3rem;
  display: inline-block;
  transform: translateY(-2px);
}

/* Credits Paper board */
.paper-clip-board {
  background-color: #f4ecd0;
  color: #211a14;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  max-width: 800px;
  margin: 0 auto;
  border-top: 8px solid #5c3a21;
}

.edu-badge {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.bg-halal { background-color: var(--color-halal); }
.bg-haram { background-color: var(--color-haram); }
.bg-syubhat { background-color: var(--color-syubhat); }
.text-warning-dark { color: #d67b00; }
.bg-brown-light { background-color: #ebdcb9; color: #423023; }

/* ================= 3. Level Selection View ================= */
.level-card {
  background: linear-gradient(145deg, #ebd9be 0%, #c4af94 100%);
  border-radius: 6px;
  color: #2b1f1a;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  min-height: 260px;
  max-width: 250px;
  border-top: 5px solid #d4af37;
}

.level-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}

.level-stars {
  font-size: 1.5rem;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.level-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
}

.level-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #59483c !important;
}

.btn-start-level {
  width: 100%;
  font-size: 0.8rem;
  padding: 6px 12px;
}

/* ================= 4. Gameplay View (Detective Desk) ================= */
#gameplay-view {
  background-color: #1a0f0a;
}

.desk-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 80% 10%, #4a2818 0%, #170a05 100%);
  z-index: 1;
}

.desk-lamp-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70%;
  height: 90%;
  background: radial-gradient(ellipse at center, rgba(255, 235, 150, 0.15) 0%, rgba(255, 235, 150, 0) 70%);
  z-index: 2;
  pointer-events: none;
}

#gameplay-view .view-content {
  position: relative;
  z-index: 5;
  height: 100%;
}

/* Top Bar */
.game-top-bar {
  background: rgba(20, 12, 8, 0.85);
  border: 1px solid #4a2a1a;
  backdrop-filter: blur(5px);
  z-index: 100;
}

.case-badge, .score-badge, .timer-badge {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.case-badge { color: #dfbda5; }
.score-badge { color: #5cb85c; text-shadow: 0 0 5px rgba(92,184,92,0.3); }
.timer-badge { color: #f0ad4e; }

.desk-layout {
  z-index: 10;
}

/* LEFT PANEL: Map Berkas Kasus */
.case-folder-wrapper {
  background-color: #ebd2ad;
  border-radius: 0 6px 6px 6px;
  box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.4);
  position: relative;
  border: 2px solid #5a3f29;
}

.case-folder-tab {
  position: absolute;
  top: -22px;
  left: 0;
  background-color: #ebd2ad;
  color: #4a2e1d;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.65rem;
  padding: 4px 15px;
  border-radius: 5px 12px 0 0;
  border-top: 2px solid #5a3f29;
  border-left: 2px solid #5a3f29;
  border-right: 2px solid #5a3f29;
  letter-spacing: 1px;
}

.case-folder-body {
  color: #382417;
  height: 100%;
}

.case-file-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: #2b170c;
  letter-spacing: 1px;
}
.case-file-subtitle {
  font-size: 0.55rem;
  letter-spacing: 2px;
  font-weight: 600;
}

.case-incident-desc {
  font-family: var(--font-typewriter);
  font-size: 0.68rem;
  line-height: 1.4;
  padding: 5px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
}

/* Product Box Mockup */
.case-product-box {
  background-color: #ebdcb9;
  border: 2px dashed #997c64;
  min-height: 110px;
}

.product-graphic-container {
  width: 100%;
  height: 95px;
}

.product-box-mockup {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #c02929 0%, #8a1d1d 100%);
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 5px;
  position: relative;
  transition: transform 0.2s;
}

.product-name-label {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.6rem;
  text-align: center;
  text-transform: uppercase;
}

/* Dynamic Logo Target & UV Overlay system */
.uv-scan-zone {
  position: absolute;
  bottom: 12px;
  right: 15px;
  width: 48px;
  height: 48px;
  border: 1px dotted #888;
  background-color: rgba(255,255,255,0.8);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

.halal-logo-img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  transition: filter 0.3s;
}

.uv-revealed-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.65rem;
  color: #ff0055;
  background: rgba(10, 0, 20, 0.95);
  opacity: 0; /* Hidden by default */
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10; /* Draw spotlight watermark on top of logos */
}

/* CENTER PANEL: Ingredients Paper */
.ingredients-paper {
  background-color: #f7eed0;
  background-image: radial-gradient(circle at 10% 90%, rgba(139,69,19,0.05) 0%, transparent 60%);
  color: #261b12;
  box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  border: 1px solid #c7b695;
  position: relative;
}

.typewriter-title {
  font-family: var(--font-typewriter);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.typewriter-subtitle {
  font-family: var(--font-typewriter);
  font-size: 0.58rem;
  color: #614a38;
}

.typewriter-content {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: pre-line;
}

/* Styling critical ingredient highlight spans */
.critical-word {
  font-weight: 700;
  border-bottom: 1px dashed #d9534f;
  padding: 0 2px;
  cursor: pointer;
  background-color: rgba(217, 83, 79, 0.05);
  transition: all 0.2s;
}

.critical-word:hover {
  background-color: rgba(217, 83, 79, 0.15);
  border-bottom-style: solid;
}

/* RIGHT PANEL: Tools Rack */
.tools-rack {
  background-color: #2b1911;
  border: 2px solid #5a3c2c;
  border-radius: 6px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
}

.rack-title {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 800;
  color: #c9b19e;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.bg-wood-dark {
  background: #140b08;
}

.tool-btn {
  background: linear-gradient(180deg, #442a1d 0%, #2b180e 100%);
  border: 2px solid #6b432f;
  border-radius: 6px;
  width: 90px;
  height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ebd2be;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.tool-btn:hover {
  background: #543729;
  border-color: #aa775c;
  color: #fff;
}

.tool-btn.active {
  background: linear-gradient(180deg, #7c44d1 0%, #431f7c 100%);
  border-color: #b08aff;
  color: #fff;
  box-shadow: 0 0 10px rgba(176, 138, 255, 0.5);
  animation: toolPulse 1.5s infinite alternate;
}

@keyframes toolPulse {
  from { box-shadow: 0 0 6px rgba(176, 138, 255, 0.4); }
  to { box-shadow: 0 0 14px rgba(176, 138, 255, 0.7); }
}

.tool-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

.tool-label {
  font-size: 0.55rem;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

.active-tool-indicator {
  font-size: 0.6rem;
  font-weight: 800;
  color: #d4af37;
  letter-spacing: 1.5px;
}

/* Pocket Book Container */
.pocket-book-container {
  background-color: #381b10;
  border-radius: 6px;
  border: 3px solid #542d1e;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 5px 12px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.pocket-book-cover {
  height: 100%;
}

.book-crest {
  font-size: 2rem;
}

.book-title {
  font-family: var(--font-title);
  color: #ebd6be;
  font-size: 0.85rem;
  letter-spacing: 1px;
}
.book-subtitle {
  font-size: 0.55rem;
  color: #a3846e !important;
}

.pocket-book-open {
  background-color: #fcf9ec;
  color: #2c1a11;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: bookOpen 0.3s ease-out;
}

@keyframes bookOpen {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.btn-close-book {
  background: none;
  border: none;
  font-size: 1.2rem;
  font-weight: 700;
  color: #8c2a2a;
  cursor: pointer;
}

.bg-book-paper {
  background-color: #f7f4e2;
  font-size: 0.7rem;
}

.mini-tabs .nav-link {
  font-size: 0.58rem;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: #eae5cd;
  color: #63523f;
  margin-right: 2px;
}

.mini-tabs .nav-link.active {
  background-color: #fcf9ec;
  border-color: #2c1a11;
  color: #000 !important;
}

.guidebook-scroll-content {
  font-size: 0.65rem;
  line-height: 1.4;
  padding-right: 5px;
}

.guide-item {
  border-bottom: 1px dotted #ccc;
  padding: 6px 0;
}

.guide-item-title {
  font-weight: 700;
  font-size: 0.7rem;
}

/* Verdict Bar Stamping Drawer */
.verdict-bar {
  background: linear-gradient(180deg, #3d2216 0%, #1f0f09 100%);
  border: 2px solid #5a3c2c;
  z-index: 10;
}

.verdict-bar-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.8rem;
  color: #dfc8b6;
  letter-spacing: 1px;
}

.btn-verdict {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  border: 3px solid;
  border-radius: 4px;
  padding: 8px 30px;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: all 0.2s;
  cursor: pointer;
}

.btn-verdict-halal {
  background: linear-gradient(180deg, #43a047 0%, #2e7d32 100%);
  border-color: #a5d6a7;
}
.btn-verdict-halal:hover {
  background: #388e3c;
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.5);
  transform: scale(1.03);
}

.btn-verdict-syubhat {
  background: linear-gradient(180deg, #fb8c00 0%, #ef6c00 100%);
  border-color: #ffcc80;
}
.btn-verdict-syubhat:hover {
  background: #f57c00;
  box-shadow: 0 0 12px rgba(255, 152, 0, 0.5);
  transform: scale(1.03);
}

.btn-verdict-haram {
  background: linear-gradient(180deg, #e53935 0%, #c62828 100%);
  border-color: #ef9a9a;
}
.btn-verdict-haram:hover {
  background: #d32f2f;
  box-shadow: 0 0 12px rgba(244, 67, 54, 0.5);
  transform: scale(1.03);
}

/* ================= 5. INTERACTIVE MOUSE OVERLAY SYSTEMS ================= */

/* Lens overlays that will follow cursor when active */
.virtual-uv-overlay {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 4px solid #7c44d1;
  box-shadow: 0 0 20px rgba(124, 68, 209, 0.8), inset 0 0 15px rgba(124, 68, 209, 0.5);
  background: radial-gradient(circle, rgba(124, 68, 209, 0.15) 0%, rgba(124, 68, 209, 0.0) 70%);
  z-index: 999;
  pointer-events: none; /* Allows click through */
  display: none;
  transform: translate(-50%, -50%);
}

.virtual-magnifier-lens {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #ccc;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  background-color: transparent;
  z-index: 999;
  pointer-events: none;
  display: none;
  transform: translate(-50%, -50%);
}

/* Spotlight radial mask when UV tool is dragged/focused on product zone */
.uv-scan-zone.uv-active .uv-revealed-watermark {
  opacity: 1;
  /* Spotlight effect tracking the --uv-x and --uv-y relative properties */
  background: radial-gradient(circle 35px at var(--uv-x, 50%) var(--uv-y, 50%), 
              rgba(124, 68, 209, 0.35) 0%, 
              rgba(124, 68, 209, 0.8) 50%,
              rgba(10, 5, 20, 0.98) 100%);
  color: #4efc4e; /* Make watermarks stand out (e.g. Asli/Palsu in green/red neon) */
}

/* ================= 6. LAB REPORT FEEDBACK MODAL ================= */
.lab-report-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: none; /* Active via JS class toggle */
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lab-report-sheet {
  background-color: #f2ebd5;
  color: #1b120c;
  width: 100%;
  max-width: 500px;
  max-height: 90%;
  border: 2px solid #5a3e29;
  border-top: 10px solid #2e7d32; /* Can be styled red dynamically if wrong */
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: var(--font-sans);
  animation: modalSlide 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.15);
}

@keyframes modalSlide {
  from { transform: translateY(-50px) rotate(-3deg); opacity: 0; }
  to { transform: translateY(0) rotate(-1.5deg); opacity: 1; }
}

.report-clip {
  position: absolute;
  top: -20px;
  left: 45%;
  font-size: 1.8rem;
  z-index: 10;
}

.verdict-stamp-icon {
  font-family: var(--font-stamp);
  font-size: 2.2rem;
  border: 4px double;
  padding: 0 15px;
  border-radius: 6px;
  transform: rotate(-10deg);
}

/* Correct Stamp state */
.stamp-correct {
  border-color: var(--color-halal) !important;
  color: var(--color-halal) !important;
}

/* Incorrect Stamp state */
.stamp-incorrect {
  border-color: var(--color-haram) !important;
  color: var(--color-haram) !important;
}

.explanation-text {
  font-family: var(--font-typewriter);
  font-size: 0.72rem;
  line-height: 1.5;
  background-color: rgba(255,255,255,0.4);
  padding: 10px;
  border-radius: 4px;
  border: 1px dotted #8c735a;
}

/* ================= 7. Final Results View ================= */
.diploma-paper {
  background-color: #faf6eb;
  border: 10px double #8b6b47;
  width: 100%;
  max-width: 580px;
  border-radius: 4px;
  color: #382819;
  position: relative;
}

.diploma-seal {
  position: absolute;
  top: -20px;
  right: 25px;
  font-size: 3rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.diploma-heading {
  font-family: var(--font-title);
  letter-spacing: 2px;
  border-bottom: 2px dotted #8b6b47;
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.diploma-student-name {
  font-family: var(--font-stamp);
  font-size: 1.5rem;
  color: #5c3a21;
}

.diploma-closing-phrase {
  font-family: var(--font-title);
  font-size: 0.65rem;
}

/* Scrollbar Vintage Look */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
}
::-webkit-scrollbar-thumb {
  background: #8b6c50;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6d5037;
}

/* ================= 8. SCROLL & FLEXBOX BUG FIXES ================= */
.case-report-body {
  max-height: 155px !important;
  overflow-y: auto !important;
  min-height: 0;
}

.guidebook-scroll-content {
  max-height: 215px !important;
  overflow-y: auto !important;
  min-height: 0;
}

/* ================= 9. DIPLOMA vs WARNING CARD ================= */
.diploma-paper.warning-diploma {
  border-color: #c62828 !important;
  background-color: #ffebee !important;
  color: #5c0e0e !important;
}

.diploma-paper.warning-diploma .diploma-heading {
  border-bottom: 2px dashed #c62828 !important;
}

.diploma-paper.warning-diploma .diploma-seal {
  filter: drop-shadow(0 4px 6px rgba(198, 40, 40, 0.3));
}