/* --- 1. THE REPEATING BACKGROUND --- */
body {
    /* Set your fallback pastel color here just in case */
    background-color: #FDFBD4; 
    /* This points to your 256x256 cat pattern and tiles it infinitely */
    background-image: url('../assets/pokapoka_bg.png');
    background-repeat: repeat;
    
    margin: 0;
    padding: 0;
    /* We will load your custom Japanese font later */
    font-family: sans-serif; 
}

/* --- 2. THE CENTERED COLUMN --- */
.main-column {
    /* This is the fixed width! 800px is perfect for a cozy blog/app site */
    max-width: 800px; 
    /* margin: 0 auto; is the old-school trick that forces the box to the exact center */
    margin: 0 auto; 
    /* Make sure the column stretches all the way down the screen */
    min-height: 100vh; 
    /* The color inside the column (usually white or cream) so text is readable */
    background-color: #FFFFFF; 
    /* Optional: Adds a slight shadow so the column pops off the cat background */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

/* --- 3. THE CHOCOLATE BANNER --- */
.chocolate-banner {
    /* A rich, cozy chocolate brown */
    background-color: #4B3832; 
    color: #FFFFFF;
}

/* The Tab Bar */
.top-tabs {
    display: flex;
    justify-content: flex-end; /* Pushes the tabs to the right side */
    padding: 12px 20px;
    background-color: #3e2e29; /* A slightly darker brown to separate the tabs from the main banner */
}

.top-tabs a {
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 20px;
    font-size: 14px;
    font-weight: bold;
}

.top-tabs a:hover {
    color: #FFD700; /* Cute yellow hover effect */
}

/* The Logo Area */
/* --- BANNER LAYOUT (The SwiftUI Equivalents) --- */

.banner-content {
    /* Giving it a nice chunk of space inside the brown banner */
    padding: 50px 40px; 
}

/* This is your HStack */
.banner-hstack {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between acts exactly like a Spacer()! */
    justify-content: space-between; 
    align-items: center; /* Vertically centers the text with the logo */
}

/* This is your VStack */
.banner-vstack {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns the capsules to the left */
    gap: 12px; /* Adds space between the title and subtitle capsules */
}

/* --- THE PINK CAPSULES --- */
.capsule-text {
    background-color: #F178B6; /* A super cute, warm pastel pink */
    color: #ffffff; /* Dark brown text so it reads clearly against the pink */
    margin: 0; /* Removes default HTML spacing */
    border-radius: 9999px; /* The CSS trick to create a perfect Capsule shape */
    display: inline-block; /* Makes the capsule wrap tightly around the text */
}

.capsule-text.title {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 10px 30px; /* Padding creates the pill shape: top/bottom left/right */
}

.capsule-text.subtitle {
    font-size: 16px;
    font-weight: bold;
    padding: 20px 40px;
}

/* --- THE TILTED LOGO --- */
/* --- THE TILTED LOGO IMAGE --- */
.logo-image {
    /* Set a strict width so a massive image file doesn't blow up your header */
    width: 130px; 
    height: auto; /* Keeps the proportions perfect */
    
    /* The magic slight tilt! */
    transform: rotate(3deg); 
    
    /* This prevents the layout from squishing your logo on small screens */
    flex-shrink: 0; 
    
    /* The best part: this drop-shadow actually traces the outline of your transparent PNG! */
    filter: drop-shadow(3px 5px 0px rgba(0,0,0,0.3));
}

/* Temporary padding for the unknown content area */
.content-area {
    padding: 40px;
}


/* --- REUSABLE COMPONENTS (Like SwiftUI Views) --- */

.page-section {
    margin-bottom: 60px; /* Gives nice breathing room between sections */
}

.section-title {
    font-size: 24px;
    font-weight: 600;
    color: #4A3018; /* Chocolate brown */
    margin-bottom: 24px;
    margin-top: 0;
    
    /* This creates a beautiful, thick pink line under the text */
    /* border-bottom: 4px solid #FFB1CB; 
    padding-bottom: 10px; */
    
    /* This HStack alignment perfectly centers the text and the arrow */
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* Pushes the arrow all the way to the right! */
}

/* The native-looking iOS Chevron */
.ios-arrow {
    color: #C7C7CC; /* The exact hex code for the classic iOS chevron gray */
    font-size: 32px;
    font-weight: 300; /* Keeps it thin and elegant */
    line-height: 1;
}


/* --- THE PLATFORM CARDS --- */
.platforms-container {
    display: flex;
    gap: 20px; /* Space between the two image cards */
}

.platform-card-img {
    flex: 1; /* Makes both images take up exactly 50% of the space */
    width: 30%; /* Ensures they scale perfectly on smaller screens */
    height: auto; /* Keeps your custom image proportions intact */
    border-radius: 3px; /* Clips the corners of your image to be Apple-round */
    
    /* Adds a tiny bit of padding so your image isn't touching the dash */
    padding: 4px; 
    
    /* A cute little hover animation since these will eventually be buttons */
    transition: transform 0.2s ease;
    cursor: pointer;
}

/* Make it pop up slightly when a user hovers their mouse over it */
/* .platform-card-img:hover {
    transform: scale(1.02);
} */

/* Specific style for the active iOS image */
.platform-card-img.active {
    border: 3px dashed #ED4B9E; /* Cute pink dash! */
    background-color: #FFF9F2; /* Fills the 4px padding gap with cream */
}

/* Specific style for the upcoming tvOS image */
.platform-card-img.upcoming {
    border: 3px dashed #ED4B9E; /* Faded brown dash */
    background-color: #FFF9F2;
    cursor: default; /* Removes the clicky finger cursor */
}

.platform-card-img.upcoming:hover {
    transform: none; /* Disables the hover animation for the unreleased app */
}

.platform-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.platform-card h3 {
    margin: 0 0 5px 0;
    color: #4A3018;
    font-size: 20px;
}

.platform-card p {
    margin: 0;
    color: #7A6048;
    font-size: 14px;
    font-weight: bold;
}


/* --- REUSABLE TEXT CARDS (Like a Custom SwiftUI View) --- */

.info-card {
    background-color: #fe8cc723; /* Clean white paper look */
    border-radius: 1%; /* Classic Apple rounded corners */
    padding: 24px;
    
    /* A thick accent line on the left side to make it pop */
    border-left: 6px solid #F178B6; 
    
    /* A very soft, slightly chocolate-tinted shadow */
    box-shadow: 0px 4px 15px rgba(74, 48, 24, 0.05); 
    
    /* Adds space just in case you want to stack two cards on top of each other */
    margin-bottom: 0px; 
}

.info-card h3 {
    color: #4A3018; /* Chocolate title */
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 12px;
    
    /* Aligns the emoji and the text perfectly */
    display: flex;
    align-items: center;
    gap: 8px; 
}

.info-card p {
    color: #5C432E; /* A slightly softer brown for heavy reading */
    font-size: 15px;
    
    /* line-height is CRUCIAL for web typography. 1.6 makes it super cozy to read */
    line-height: 1.6; 
    
    margin-top: 0;
    margin-bottom: 0px;
}

/* This targets the very last paragraph in the card so it doesn't mess up your bottom padding */
.info-card p:last-child {
    margin-bottom: 0; 
}

/* --- THE INFO CARD HEADER (HStack + Spacer) --- */

/* --- THE MINI CAPSULE --- */
.mini-capsule {
    background-color: #A4DDB9; /* Matches your cute pink theme */
    color: #4A3018; /* Chocolate text for contrast */
    
    /* Padding creates the pill shape: top/bottom left/right */
    padding: 6px 16px; 
    
    border-radius: 9999px; /* The magic capsule shape */
    
    font-size: 16px; /* Slightly smaller than the main header capsule */
    font-weight: 800;
    
    /* This ensures the emoji and the text line up perfectly inside the capsule */
    display: inline-flex; 
    align-items: center;
    gap: 6px; /* Adds a tiny bit of breathing room between the emoji and the text */
}

/* Let's remove the default color from the header since the capsule handles it now */
.info-card-header {
    margin-top: 0;
    margin-bottom: 16px; /* Added a tiny bit more space under the capsule */
    display: flex;
    align-items: center; 
    justify-content: space-between; 
}

/* The tiny image on the right */
.info-title-img {
    width: 55px; /* Keeps the little icon from taking over the header */
    height: auto;
    
    /* Optional: A slight tilt to make it look like a stamped sticker! */
    transform: rotate(-3deg); 
    opacity: 0.8; /* Softens the image slightly so it doesn't distract from the text */
}

/* --- SIMPLE DIVIDER --- */
.simple-divider {
    border: none; /* Removes the ugly default 3D web border */
    height: 70px; /* The thickness of your rectangle */
    background-color: #dfdfdf63; /* Classic iOS gray */
    
    /* 40px of breathing room above and below the line */
    margin: 40px 0; 
    
    /* Optional: slightly rounds the ends of the rectangle so it isn't so sharp */
    border-radius: 2px; 
}

/* --- REUSABLE BUTTON --- */

/* Optional wrapper to center the button perfectly in its section */
.button-container {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.poka-button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Colors */
    background-color: #ed4b9fcf; /* Your signature pink */
    color: #ffffff; /* Chocolate brown text */
    
    /* Typography */
    font-size: 18px;
    font-weight: 700;
    text-decoration: none; /* Removes the ugly blue link underline */
    letter-spacing: 1px;
    
    /* The Capsule Shape */
    padding: 16px;
    width: 90%;
    border-radius: 0px;
    
    /* A soft pink glowing drop shadow */
    box-shadow: 0px 6px 15px rgba(255, 177, 203, 0.4);
    
    /* The animation duration */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* The Hover Animation */
.poka-button:hover {
    /* Lifts the button up 2 pixels */
    transform: translateY(-1px); 
    /* Makes the glowing shadow slightly bigger so it looks closer to the user */
    box-shadow: 0px 8px 20px rgba(255, 177, 203, 0.6); 
}

/* The Active/Click Animation */
.poka-button:active {
    /* Pushes the button down when physically clicked */
    transform: translateY(1px);
    box-shadow: 0px 2px 8px rgba(255, 177, 203, 0.3);
}


/* --- NEWS BANNERS --- */

.news-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* The exact spacing between each stacked banner */
}

.news-banner {
    display: flex;
    align-items: center;
    background-color: #FFF9F2; /* Matches your cream card background */
    border: 2px solid #E8D9C8; /* A subtle, earthy brown border */
    border-radius: 12px; /* Slightly tighter iOS rounded corners */
    padding: 16px 20px;
    text-decoration: none; /* Removes default link styling */
    transition: all 0.2s ease; /* Smooth hover animation */
}

/* Hover effect to make it feel interactive */
.news-banner:hover {
    border-color: #FFB1CB; /* Border turns pink! */
    background-color: #FFFFFF;
    transform: translateY(-2px); /* Lifts up */
    box-shadow: 0px 4px 12px rgba(255, 177, 203, 0.2);
}

.news-date {
    font-size: 13px;
    font-weight: 900;
    color: #FFB1CB; /* Pink dates */
    margin-right: 16px;
    flex-shrink: 0; /* Prevents the date from squishing */
    letter-spacing: 1px;
}

.news-text {
    font-size: 15px;
    font-weight: bold;
    color: #4A3018; /* Chocolate text */
    flex-grow: 1; /* This pushes the arrow to the right side! */
    
    /* These three lines ensure long titles get a '...' instead of breaking the layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 16px;
}

.news-arrow {
    color: #C7C7CC; /* Classic iOS chevron gray */
    font-size: 20px;
    font-weight: 300;
}


/* --- CONTACT PAGE STYLES --- */

.contact-stack {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything horizontally */
    justify-content: center; /* Centers everything vertically */
    text-align: center;
    
    /* Pushes the stack down a bit so it sits right in the middle of the screen */
    margin-top: 60px; 
}

.contact-logo {
    width: 140px; /* Slightly larger than the header logo so it acts as a hero image */
    height: auto;
    margin-bottom: 24px;
    
    /* A gentle tilt just like the homepage */
    /* transform: rotate(5deg); */
    filter: drop-shadow(3px 5px 0px rgba(0,0,0,0.2));
}

.contact-title {
    color: #4B3832; /* Chocolate */
    font-size: 36px;
    font-weight: 900;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

.contact-subtitle {
    color: #7A6048; /* Softer brown */
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 40px 0; /* Huge margin at the bottom to give the button space */
}

/* --- PLAIN TEXT POLICY BLOCKS --- */

.policy-block {
    margin-bottom: 40px; /* Big, breathable space between each rule */
}

.policy-block h3 {
    color: #4A3018; /* Signature chocolate brown */
    font-size: 20px;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 12px;
}

.policy-block p {
    color: #5C432E; /* Easy-to-read dark brown */
    font-size: 15px;
    line-height: 1.6; /* Cozy reading height */
    margin-top: 0;
    margin-bottom: 12px;
}

/* Dedicated style just for the English translations to make them recede slightly */
.policy-block .en-translation {
    font-size: 13px;
    opacity: 0.8;
}

/* --- CUSTOM IMAGE NEWS BANNERS --- */

.news-image-link {
    display: flex;
    justify-content: center; /* Centers the banner perfectly */
    text-decoration: none;
}

.custom-news-banner {
    height: 120px;
    width: 100%;
    object-fit: cover;
    
    /* Safety measure: prevents the image from breaking the layout on tiny screens */
    max-width: 100%; 
    
    /* Matches your other UI elements */
    border-radius: 0px; 
    box-shadow: 0px 4px 12px rgba(74, 48, 24, 0.05);
    
    /* Smooth hover animation */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-news-banner:hover {
    transform: translateY(-2px); /* Lifts up slightly */
    box-shadow: 0px 6px 15px rgba(255, 177, 203, 0.4); /* Soft pink glow */
}