refactor(dnd): mobile responsiveness

Author: fezcode

src/components/dnd/DndCard.jsx

@@ -12,17 +12,18 @@ const DndCard = ({
     <motion.div
       whileHover={{ y: -10 }}
       transition={{ type: 'spring', stiffness: 300 }}
+      className="h-full"
     >
       <Link
         to={link}
-        className="block group relative p-12 dnd-fantasy-card text-center h-full min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden"
+        className="block group relative p-6 md:p-12 dnd-fantasy-card text-center h-full min-h-[300px] md:min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden"
       >
         {/* Silk Ribbon */}
-        <div className="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2" />
+        <div className="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2 hidden md:block" />
 
         {/* Background Runes */}
-        <div className="dnd-card-rune top-12 left-12 -rotate-12">ᚦ</div>
-        <div className="dnd-card-rune bottom-12 right-12 rotate-12">ᛉ</div>
+        <div className="dnd-card-rune top-4 md:top-12 left-4 md:left-12 -rotate-12">ᚦ</div>
+        <div className="dnd-card-rune bottom-4 md:bottom-12 right-4 md:right-12 rotate-12">ᛉ</div>
 
         {/* Ink Splatters */}
         <div className="dnd-ink-splatter w-8 h-8 top-1/4 right-8" />
@@ -36,32 +37,32 @@ const DndCard = ({
         <div className="absolute inset-6 border border-dnd-gold/10 pointer-events-none group-hover:border-dnd-gold/20 transition-colors" />
 
         {/* Ornate corners - larger and more detailed */}
-        <div className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
-        <div className="absolute top-6 right-6 w-12 h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
-        <div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
-        <div className="absolute bottom-6 right-6 w-12 h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
+        <div className="absolute top-4 md:top-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
+        <div className="absolute top-4 md:top-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-t-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
+        <div className="absolute bottom-4 md:bottom-6 left-4 md:left-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
+        <div className="absolute bottom-4 md:bottom-6 right-4 md:right-6 w-8 md:w-12 h-8 md:h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
 
-        <div className="mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10">
+        <div className="mb-6 md:mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10">
           {icon}
         </div>
 
-        <h3 className="text-4xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">
+        <h3 className="text-3xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-4 md:mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">
           {title}
         </h3>
 
-        <p className="text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">
+        <p className="text-sm md:text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">
           {description}
         </p>
 
         {/* Mini Wax Seal at bottom */}
-        <div className="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50">
+        <div className="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50 hidden md:block">
            <div className="dnd-wax-seal">
               <span className="dnd-wax-seal-inner text-sm">SF</span>
            </div>
         </div>
 
         {/* Interaction hint - refined and darker */}
-        <div className="mt-10 pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10">
+        <div className="mt-6 md:mt-10 pt-4 md:pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10">
           <div className="flex items-center gap-4">
              <div className="h-px w-8 bg-dnd-crimson/20" />
              <div className="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]" />

src/components/dnd/DndFooter.jsx

@@ -6,8 +6,8 @@ const DndFooter = () => {
   const { bgImageName } = useContext(DndContext);
 
   return (
-    <footer className="relative mt-24 border-t-2 border-dnd-gold bg-dnd-crimson/95 py-16 px-6 text-white">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 items-center text-center md:text-left">
+    <footer className="relative mt-12 md:mt-24 border-t-2 border-dnd-gold bg-dnd-crimson/95 py-12 md:py-16 px-6 text-white">
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 items-center text-center md:text-left">
         <div className="space-y-4">
           <div className="flex justify-center md:justify-start">
             <span className="text-4xl font-playfairDisplay font-black uppercase tracking-tighter dnd-gold-gradient-text">

src/components/dnd/DndLayout.jsx

@@ -256,16 +256,19 @@ const DndLayout = ({ children }) => {
 
   return (
     <div className="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden">
-      <ViewportFrame />
-      <Lightning />
-      <LootDiscovery />
-      <FireplaceAudio />
-      <FireOverlay />
-      <Torchlight />
-      <DiceRoller />
-      <FireParticles />
-      <DustMotes />
-      <FloatingRunes />
+      <div className="hidden md:block">
+        <ViewportFrame />
+        <Lightning />
+        <LootDiscovery />
+        <FireplaceAudio />
+        <FireOverlay />
+        <Torchlight />
+        <DiceRoller />
+        <FireParticles />
+        <DustMotes />
+        <FloatingRunes />
+      </div>
+
       {/* Immersive Background */}
       <div className="fixed inset-0 z-0">
         <div

src/components/dnd/DndNavbar.jsx

@@ -13,14 +13,14 @@ const DndNavbar = () => {
   return (
     <nav className="fixed top-0 left-0 right-0 z-[300] dnd-nav-modern border-b-2 border-dnd-gold">
       {/* Top Bar: Navigation & Breadcrumbs */}
-      <div className="bg-black/40 px-12 py-2 flex items-center justify-between border-b border-white/5 mt-[25px]">
+      <div className="bg-black/40 px-4 md:px-12 py-2 flex items-center justify-between border-b border-white/5 md:mt-[25px]">
         <div className="flex items-center gap-4">
           <Link to="/" className="text-white hover:text-dnd-gold transition-colors">
             <House size={18} weight="fill" />
           </Link>
 
           {breadcrumbs && breadcrumbs.length > 0 && (
-            <div className="flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.2em]">
+            <div className="hidden sm:flex items-center gap-2 font-mono text-[9px] uppercase tracking-[0.2em]">
               {breadcrumbs.map((crumb, index) => (
                 <React.Fragment key={crumb.path || index}>
                   <CaretRight size={10} className="text-white/40" />

src/components/dnd/DndSearchInput.jsx

@@ -3,7 +3,7 @@ import { MagnifyingGlass } from '@phosphor-icons/react';
 
 const DndSearchInput = ({ value, onChange, placeholder = "Search the archives..." }) => {
   return (
-    <div className="relative max-w-md mx-auto mb-16 group">
+    <div className="relative max-w-md mx-auto mb-8 md:mb-16 group">
       <div className="absolute inset-0 bg-dnd-gold/20 blur-xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
       <div className="relative flex items-center">
         <div className="absolute left-5 text-dnd-gold">

src/pages/dnd/DndAuthorsPage.jsx

@@ -78,7 +78,7 @@ function DndAuthorsPage() {
           <div className="flex justify-center mb-6">
              <Users size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
           </div>
-          <h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none">
+          <h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none">
             The Scribes
           </h1>
           <p className="text-lg md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12">

src/pages/dnd/DndBookPage.jsx

@@ -52,12 +52,12 @@ function DndBookPage() {
 
   return (
     <DndLayout>
-      <div className="max-w-7xl mx-auto px-6 py-12">
-        <header className="text-center mb-24">
+      <div className="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12">
+        <header className="text-center mb-12 md:mb-24">
           <div className="flex justify-center mb-6">
              <BookmarkSimple size={48} className="text-dnd-gold" weight="duotone" />
           </div>
-          <h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none dnd-header-pulse">
+          <h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none dnd-header-pulse">
             {pageTitle}
           </h1>
           <div className="h-px w-32 bg-dnd-gold mx-auto opacity-40" />
@@ -67,7 +67,7 @@ function DndBookPage() {
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
-            className="dnd-parchment-container p-12 md:p-24 shadow-2xl border-2 border-black/10 dnd-parchment-glow relative"
+            className="dnd-parchment-container p-6 md:p-24 shadow-2xl border-2 border-black/10 dnd-parchment-glow relative"
           >
             {/* Scroll Ornaments */}
             <div className="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-b-full blur-xl dnd-scroll-accent" />

src/pages/dnd/DndCharactersPage.jsx

@@ -60,10 +60,10 @@ function DndCharactersPage() {
           <div className="flex justify-center mb-6">
              <UsersThree size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
           </div>
-          <h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
+          <h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
             Dramatis Personae
           </h1>
-          <p className="text-lg md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12">
+          <p className="text-base md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12 px-4">
             The heroes, villains, and bystanders of our tales.
           </p>
 

src/pages/dnd/DndEpisodePage.jsx

@@ -136,15 +136,15 @@ function DndEpisodePage() {
 
       <div className="max-w-7xl mx-auto px-6 py-12">
 
-        <header className="text-center mb-24">
+        <header className="text-center mb-12 md:mb-24 px-4">
 
           <div className="flex justify-center mb-6">
 
              <Scroll size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
 
           </div>
 
-                    <h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none dnd-header-pulse">
+                    <h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 leading-none dnd-header-pulse">
 
                       {episodeTitle}
 
@@ -172,7 +172,7 @@ function DndEpisodePage() {
 
                                       {/* Hidden message in sidebar */}
 
-                                      <div className="absolute -bottom-8 left-0 w-full text-center opacity-0 group-hover:opacity-100 transition-opacity duration-1000">
+                                      <div className="absolute -bottom-8 left-0 w-full text-center opacity-0 group-hover:opacity-100 transition-opacity duration-1000 hidden md:block">
 
                                          <span className="dnd-secret-text text-[8px] uppercase tracking-[0.2em]">Don't believe the scribes</span>
 
@@ -262,19 +262,19 @@ function DndEpisodePage() {
 
                                               animate={{ opacity: 1, y: 0 }}
 
-                                              className="lg:col-span-4 dnd-parchment-container p-8 md:p-24 shadow-2xl border-2 border-black/10 min-h-[60vh] flex flex-col relative dnd-parchment-glow"
+                                              className="lg:col-span-4 dnd-parchment-container p-6 md:p-24 shadow-2xl border-2 border-black/10 min-h-[60vh] flex flex-col relative dnd-parchment-glow"
 
                                             >
 
                                               {/* Secret Inscriptions */}
 
-                                              <div className="absolute top-1/4 -left-4 -rotate-90 pointer-events-none">
+                                              <div className="absolute top-1/4 -left-4 -rotate-90 pointer-events-none hidden md:block">
 
                                                  <span className="dnd-secret-text text-[10px] uppercase tracking-[1em]">The walls have eyes</span>
 
                                               </div>
 
-                                              <div className="absolute bottom-1/4 -right-4 rotate-90 pointer-events-none">
+                                              <div className="absolute bottom-1/4 -right-4 rotate-90 pointer-events-none hidden md:block">
 
                                                  <span className="dnd-secret-text text-[10px] uppercase tracking-[1em]">History is written by survivors</span>
 
@@ -286,13 +286,13 @@ function DndEpisodePage() {
 
                                   <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-t-full blur-xl dnd-scroll-accent" />
 
-                      <div className="dnd-ornate-corner dnd-ornate-corner-tl !w-20 !h-20" />
+                      <div className="dnd-ornate-corner dnd-ornate-corner-tl !w-12 md:!w-20 !h-12 md:!h-20" />
 
-                      <div className="dnd-ornate-corner dnd-ornate-corner-tr !w-20 !h-20" />
+                      <div className="dnd-ornate-corner dnd-ornate-corner-tr !w-12 md:!w-20 !h-12 md:!h-20" />
 
-                      <div className="dnd-ornate-corner dnd-ornate-corner-bl !w-20 !h-20" />
+                      <div className="dnd-ornate-corner dnd-ornate-corner-bl !w-12 md:!w-20 !h-12 md:!h-20" />
 
-                      <div className="dnd-ornate-corner dnd-ornate-corner-br !w-20 !h-20" />
+                      <div className="dnd-ornate-corner dnd-ornate-corner-br !w-12 md:!w-20 !h-12 md:!h-20" />
 
                       <div className="relative z-10 prose prose-lg prose-stone max-w-none dnd-body-text dnd-drop-cap flex-grow">
 
@@ -306,9 +306,9 @@ function DndEpisodePage() {
 
               {/* Scribe Signature at the bottom of the parchment */}
 
-              <div className="mt-20 pt-12 border-t border-black/5 relative z-10 flex flex-col items-end opacity-60">
+              <div className="mt-12 md:mt-20 pt-8 md:pt-12 border-t border-black/5 relative z-10 flex flex-col items-end opacity-60">
 
-                 <span className="font-playfairDisplay italic text-2xl text-dnd-crimson mb-2">{currentEpisode.author}</span>
+                 <span className="font-playfairDisplay italic text-xl md:text-2xl text-dnd-crimson mb-2">{currentEpisode.author}</span>
 
                  <div className="h-px w-32 bg-dnd-crimson/20 mb-1" />
 

src/pages/dnd/DndItemsPage.jsx

@@ -60,10 +60,10 @@ function DndItemsPage() {
           <div className="flex justify-center mb-6">
              <Sword size={48} className="text-dnd-gold-light drop-shadow-[0_0_8px_rgba(249,224,118,0.4)]" weight="duotone" />
           </div>
-          <h1 className="text-5xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
+          <h1 className="text-4xl md:text-8xl font-playfairDisplay italic font-black dnd-gold-gradient-text uppercase tracking-tighter mb-4 dnd-header-pulse">
             The Armory
           </h1>
-          <p className="text-lg md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12">
+          <p className="text-base md:text-xl font-arvo text-gray-400 max-w-2xl mx-auto uppercase tracking-widest opacity-60 mb-12 px-4">
             Artifacts, curiosities, and tools of the trade.
           </p>