@import "https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;600;800;900&display=swap";:root{--comic-yellow:#ffd200;--comic-red:#ee1d23;--comic-blue:#0a66c2;--comic-cyan:#00f0ff;--comic-dark:#000;--comic-white:#fff;--comic-gray:#f0f0f0;--font-hero:"Bangers", cursive;--font-body:"Inter", sans-serif;--border-comic:5px solid var(--comic-dark);--shadow-primary:8px 8px 0px var(--comic-dark);--shadow-hover:12px 12px 0px var(--comic-dark);--shadow-btn:5px 5px 0px var(--comic-dark)}body{font-family:var(--font-body);background-color:var(--comic-yellow);background-image:radial-gradient(var(--comic-dark) 15%, transparent 16%), radial-gradient(var(--comic-dark) 15%, transparent 16%);color:var(--comic-dark);background-position:0 0,10px 10px;background-size:20px 20px;min-height:100vh;margin:0}#root{box-sizing:border-box;max-width:1400px;margin:0 auto;padding:40px 20px}.wavy-nav{background:var(--comic-white);border:var(--border-comic);box-shadow:var(--shadow-primary);justify-content:space-between;align-items:center;margin-bottom:60px;padding:16px 48px;transition:transform .3s;display:flex;position:relative;overflow:hidden;transform:rotate(-1deg)}.wavy-nav:before{content:"";pointer-events:none;background:repeating-linear-gradient(45deg,#0000,#0000 10px,#00000008 10px 20px);position:absolute;inset:0}.wavy-nav:hover{transform:rotate(0)}.wavy-logo{font-family:var(--font-hero);color:var(--comic-red);text-transform:uppercase;letter-spacing:3px;text-shadow:2px 2px 0 var(--comic-yellow), 4px 4px 0 var(--comic-dark);z-index:10;margin:0;font-size:54px;text-decoration:none;position:relative}.comic-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:40px;display:grid}.comic-card{background:var(--comic-white);border:var(--border-comic);box-shadow:var(--shadow-primary);color:inherit;cursor:pointer;flex-direction:column;text-decoration:none;transition:all .25s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden}.comic-card:hover{box-shadow:var(--shadow-hover);transform:translate(-6px,-6px)rotate(-1deg)}.comic-card:after{content:"";z-index:2;pointer-events:none;background:linear-gradient(90deg,#fff0 0%,#fff6 50%,#fff0 100%);width:50%;height:100%;transition:all .5s;position:absolute;top:0;left:-100%;transform:skew(-20deg)}.comic-card:hover:after{left:200%}.comic-cover{aspect-ratio:2/3;object-fit:cover;border-bottom:var(--border-comic);background:var(--comic-cyan);width:100%;position:relative;overflow:hidden}.comic-info{background:var(--comic-white);z-index:5;flex-direction:column;flex:1;padding:30px;display:flex;position:relative}.comic-title{font-family:var(--font-hero);text-transform:uppercase;color:var(--comic-dark);text-shadow:2px 2px 0 var(--comic-cyan);margin:0 0 16px;font-size:36px;line-height:1.1}.comic-synopsis{-webkit-line-clamp:4;line-clamp:4;color:#333;-webkit-box-orient:vertical;margin:0;font-size:16px;font-weight:600;line-height:1.6;display:-webkit-box;overflow:hidden}.comic-btn{background:var(--comic-red);color:var(--comic-white);font-family:var(--font-hero);letter-spacing:2px;text-transform:uppercase;border:4px solid var(--comic-dark);box-shadow:var(--shadow-btn);cursor:pointer;text-align:center;margin-top:auto;padding:14px 28px;font-size:26px;text-decoration:none;transition:all .1s;display:inline-block;position:relative;overflow:hidden}.comic-btn:active{box-shadow:2px 2px 0px var(--comic-dark);transform:translate(3px,3px)}.detail-layout{background:var(--comic-white);border:var(--border-comic);box-shadow:var(--shadow-primary);grid-template-columns:350px 1fr;gap:60px;padding:50px;display:grid;position:relative;overflow:hidden}.detail-layout:before{content:"";pointer-events:none;background:repeating-linear-gradient(45deg,#0000,#0000 15px,#00000005 15px 30px);position:absolute;inset:0}.detail-cover{border:var(--border-comic);width:100%;box-shadow:var(--shadow-primary);background:var(--comic-gray);transition:transform .3s;position:relative;transform:rotate(-2deg)}.detail-cover:hover{transform:rotate(0)}.detail-body{z-index:10;position:relative}.detail-body h1{font-family:var(--font-hero);color:var(--comic-dark);text-shadow:3px 3px 0 var(--comic-yellow), 6px 6px 0 var(--comic-dark);text-transform:uppercase;letter-spacing:1px;margin:0 0 20px;font-size:72px;line-height:1}.detail-body p{background:var(--comic-yellow);border:4px solid var(--comic-dark);box-shadow:6px 6px 0 var(--comic-dark);padding:24px;font-size:20px;font-weight:600;line-height:1.6}.release-list-header{font-family:var(--font-hero);text-transform:uppercase;color:var(--comic-blue);text-shadow:2px 2px 0 var(--comic-dark);margin-top:50px;margin-bottom:20px;font-size:48px}.release-list{flex-direction:column;gap:20px;margin:0;padding:0;list-style:none;display:flex}.release-item{border:4px solid var(--comic-dark);background:var(--comic-white);box-shadow:6px 6px 0 var(--comic-dark);justify-content:space-between;align-items:center;padding:24px;transition:transform .2s,box-shadow .2s;display:flex}.release-item:hover{box-shadow:9px 9px 0 var(--comic-dark);transform:translate(-3px,-3px)}.release-item h3{font-family:var(--font-hero);color:var(--comic-red);letter-spacing:1px;margin:0;font-size:28px}.release-item .format-pill{background:var(--comic-dark);color:var(--comic-white);text-transform:uppercase;border-radius:4px;margin-top:8px;padding:4px 12px;font-size:14px;font-weight:800;display:inline-block}.bad-fetch{background:var(--comic-gray);border:var(--border-comic);box-shadow:var(--shadow-primary);font-family:var(--font-hero);text-align:center;color:var(--comic-red);text-transform:uppercase;padding:50px;font-size:48px}
